/* =========================================================
   Penfix Services — clean stylesheet
   (consolidated + deduped, keeps existing class names)
   =======================================================*/

/* ---------- Theme & helpers ---------- */
:root{
  --brand:#7a0e19;          /* maroon */
  --ink:#1b1b1b;
  --muted:#6b7280;
  --bg:#f8fafc;
  --line:#e5e7eb;
  --card:#fff;
  --shadow:0 24px 40px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html{scrollbar-gutter:stable both-edges}
html,body{
  margin:0;
  font:400 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink); background:#fff; overflow-x:hidden;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 12px}
img,svg,video{max-width:100%;height:auto}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ---------- Top bar ---------- */
#topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand .logo{width:36px;height:36px;border-radius:8px;background:var(--brand)}
.brand .title{font-weight:800;font-size:18px}

/* ---------- Category menu (text only) ---------- */
.pills{position:sticky;top:58px;background:#fff;border-bottom:1px solid var(--line);z-index:48}
.pills .wrap{display:flex;gap:22px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 12px}
.pills .pill{
  appearance:none;background:transparent;border:0;border-radius:0;padding:0;color:var(--ink);
  font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:none;
}
.pills .pill:hover{text-decoration:underline}
.pills .pill.active{color:var(--brand);text-decoration:underline}

/* ---------- Search ---------- */
.search-row{position:sticky;top:100px;z-index:47;background:#fff}
.search-row .wrap{padding:8px 0 12px}
#search{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:16px}

/* ---------- Product grid & cards ---------- */
.group-section .group-title{margin:0 0 10px 2px;font-size:16px;font-weight:800}
.group-section .cards{background:#f7f8fb;border-radius:12px;padding:8px}

.cards{display:grid;gap:16px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{
  width:100%; border:1px solid var(--line); border-radius:12px; background:#fff;
  padding:10px; display:flex; flex-direction:column; gap:8px;
}
.card .thumb{
  aspect-ratio:4/3; background:#fff; border:1px dashed var(--line);
  border-radius:8px; display:grid; place-items:center; overflow:hidden;
}
.card .meta .name{font-weight:700}
.card .meta .sku{color:var(--muted);font-size:12px}
.card .meta .price{font-weight:700;color:#0d6b2a}

.card .row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}

/* Quantity stepper */
.stepper{
  display:inline-grid;grid-template-columns:36px 60px 36px;align-items:center;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;height:42px;background:#f5f6f8
}
.stepper button{border:none;background:transparent;height:100%;font-size:22px;line-height:1;cursor:pointer;color:#4b5563}
.stepper button:active{transform:scale(.98)}
.stepper input{width:60px;text-align:center;border:none;height:100%;outline:none;background:transparent;font-size:16px}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input[type=number]{-moz-appearance:textfield}

/* Links beside stepper */
.links{display:flex;align-items:center;gap:6px;white-space:nowrap}
.links a{color:var(--brand);text-decoration:none;font-weight:700}
.links a:hover{text-decoration:underline}
.links .sep{color:#9ca3af}

/* ---------- Modal (Create Specs) ---------- */
dialog.modal{border:0;border-radius:14px;box-shadow:var(--shadow);padding:0;width:min(760px,96vw)}
dialog.modal::backdrop{background:rgba(0,0,0,.35)}
.modal-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{color:var(--brand);margin:0}
.modal-head .close{position:absolute;right:12px;top:10px;color:#333;background:transparent;border:0;border-radius:8px;width:34px;height:34px;display:grid;place-items:center;font-weight:700;cursor:pointer}
.modal-head .close:hover{background:#f1f3f5}
.modal-body{padding:14px 16px 18px}

/* “Line” fields with icons */
.fancy-field{position:relative;display:block}
.fancy-field .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:grid;place-items:center;font-size:14px;color:var(--muted)}
.fancy-field input,.fancy-field select{width:100%;border:none;border-bottom:2px solid var(--line);border-radius:0;padding:10px 10px 10px 40px;background:transparent;outline:none}
.fancy-field input:focus,.fancy-field select:focus{border-bottom-color:var(--brand)}
.fancy-field input::placeholder{color:#9ca3af}

/* Specs layout: Length & Width same row; qty below */
.specs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.specs-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.specs-row.single{grid-template-columns:1fr}
.compute{margin-top:12px;color:#374151;font-size:14px;overflow-wrap:anywhere}
.actions{text-align:right}

/* Simple tooltip helper */
.tip{width:18px;height:18px;border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;font-size:12px;color:var(--brand);cursor:help;position:relative;background:#fff}
.tip::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:125%;transform:translate(-50%,6px);
  background:#111;color:#fff;padding:8px 10px;border-radius:8px;min-width:220px;max-width:320px;white-space:normal;
  opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease;font-size:12px
}
.tip:hover::after,.tip:focus::after{opacity:1;transform:translate(-50%,0)}

/* ---------- Fly panels (Registration / Virtual Assist / Rewards / JO bubble panel) ---------- */
.fly-panel{
  position:fixed; right:14px; bottom:84px; width:420px; max-width:92vw;
  height:min(82vh,680px); max-height:82vh;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); opacity:0; transform:translateY(8px) scale(.98);
  pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:60;
  display:flex; flex-direction:column;
}
.fly-panel.drawer-open{opacity:1; transform:none; pointer-events:auto}

.fly-head{position:relative}
.fly-head .band{height:96px;background:var(--brand);border-top-left-radius:16px;border-top-right-radius:16px}
.fly-head .avatar{
  position:absolute; top:58px; left:50%; transform:translateX(-50%);
  width:72px; height:72px; border-radius:50%; border:3px solid #fff; background:#fff; object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,.25); z-index:3;    /* under the × */
}
.fly-head .titlebar{
  position:absolute; top:8px; left:0; right:0; text-align:center; padding:0 48px;
}
.fly-head .titlebar h2{margin:0;color:#fff}

/* Always-visible close (white on maroon), aligned top-right, above avatar */
.fly-head .titlebar .close{
  position:absolute; right:10px; top:10px; z-index:6;
  color:#fff; background:transparent; border:0; border-radius:8px;
  width:34px; height:34px; display:grid; place-items:center; font-weight:700; cursor:pointer;
}
.fly-head .titlebar .close:hover{background:rgba(255,255,255,.12)}

.panel-body{flex:1 1 auto; overflow:auto; min-height:0; padding:96px 16px 16px}
@media (max-width:480px){
  .fly-panel{right:6px; left:6px; width:auto; height:86vh}
  .panel-body{padding:106px 12px 12px}
}

/* Chat textarea section at the bottom */
.chat-window{display:flex;flex-direction:column;gap:12px}
.chat-window .messages{flex:1 1 auto;overflow:auto;min-height:0}
.chat-window .input{display:flex;align-items:center;gap:8px}

/* Rewards body centering for QR/gift icon */
#rightPanelBody .qr-wrap{display:grid;place-items:center;padding:8px}
#rightPanelBody .qr-wrap img{width:180px;height:180px;border-radius:12px;border:1px solid var(--line)}

/* ---------- Help Desk FAB & text menu ---------- */
#fab{position:fixed;right:12px;bottom:14px;z-index:65;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#fabMain{
  width:48px;height:48px;border-radius:10px;border:0;background:var(--brand);color:#ffd54a;
  font-weight:900;font-size:26px;display:grid;place-items:center;cursor:pointer
}
#fabMenu{position:absolute;right:68px;bottom:12px;display:inline-flex;flex-direction:row;align-items:center;gap:18px;max-width:82vw;white-space:nowrap}
#fabMenu[hidden]{display:none}
#fabMenu a{color:var(--brand);text-decoration:none;font-weight:800}
#fabMenu a:hover{text-decoration:underline}
@media (max-width:420px){ #fabMenu{right:58px;gap:12px;font-size:14px} }

/* ---------- JO bubble (top-right, under menus) ---------- */
.cart-bubble{
  position:fixed; top:154px; right:12px; z-index:70; border:1px solid var(--line); background:#fff;
  height:40px; padding:0 12px; display:flex; align-items:center; gap:8px; font-weight:800; border-radius:999px
}
.badge{display:inline-grid;place-items:center;background:var(--brand);color:#fff;border-radius:999px;padding:2px 8px;font-size:12px}
body.panel-open .cart-bubble{opacity:0;pointer-events:none}

/* ---------- Buttons (shared “×”) ---------- */
button.close{
  border:0; background:transparent; border-radius:8px; width:34px; height:34px;
  display:inline-grid; place-items:center; font-weight:700; cursor:pointer;
}
button.close:hover{background:rgba(0,0,0,.06)}