/* =========================
   PURPLE THEME
========================= */
:root{
  --purple: #4b0082;
  --purple-glass: rgba(75, 0, 130, 0.40);
  --purple-deep: rgba(75, 0, 130, 0.90);
  --white: #ffffff;
  --hover-glow: rgba(255, 255, 255, 0.20);
  --modal-backdrop: rgba(0, 0, 0, 0.60);

  --bg: #0a0913;
  --card: rgba(75, 0, 130, 0.35);
  --text: var(--white);
  --muted: #c9bff0;
  --accent: #9b88ff;
  --accent-2:#b39bff;
  --danger:#ff7c96;
  --ring: rgba(75,0,130,.55);
  --radius:16px;

  /* === Configurable spacing for header/overlay === */
  --overlay-top: calc(27px + env(safe-area-inset-top, 0px)); /* overlay bar position */
  --header-clear: 110px; /* page top padding to clear fixed header */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Softer background: gentle linear gradient + existing radial glow */
  background:
    linear-gradient(180deg, rgba(20,17,30,.9) 0%, rgba(14,12,22,.92) 55%, rgba(12,11,20,.95) 100%),
    radial-gradient(1200px 800px at 20% -10%, rgba(155,136,255,.15), transparent),
    var(--bg);
  color:var(--text);
  font:400 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* =========================
   GLASS HEADER (1:1 from home)
========================= */
header{
  position:fixed; top:0; left:0; width:100%;
  min-height:60px; z-index:3000;
  background: var(--purple-glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding:10px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between;
}
header::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.05) 20%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
}
header *{ position:relative; z-index:1; }

/* Container inside header (home) */
.header-inner{
  display:flex; align-items:center; justify-content:space-between; width:100%;
}

/* Brand chip (optional left) */
.brand-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:6px 10px; border:1px solid rgba(255,255,255,.35);
  border-radius:8px; color:var(--white); text-decoration:none; font-weight:700;
  background: rgba(255,255,255,.06);
}

/* Centered title (home) */
.site-title{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:2.5rem; font-weight:800; color:var(--white); margin:0; letter-spacing:2px;
  text-shadow:
    0 0 10px rgba(75, 0, 130, 0.6),
    0 0 20px rgba(75, 0, 130, 0.4),
    0 0 30px rgba(155, 136, 255, 0.55);
  pointer-events:none;
}
@media (max-width:560px){
  .site-title{ font-size:1.6rem; letter-spacing:1px; }
}

/* Right button cluster (home) */
.header-buttons{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:10px;
}

/* Icon buttons (home) */
.icon-btn, .cart-btn{
  position: relative; /* anchor tooltip spans */
  font-size:20px; width:40px; height:40px; padding:0;
  border:1px solid var(--white); border-radius:6px;
  background-color: rgba(255,255,255,.08);
  color:var(--white);
  cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
  transition: background-color .2s ease, box-shadow .2s ease, transform .08s ease-in-out;
}
.icon-btn:hover, .cart-btn:hover{
  background-color: var(--hover-glow);
  box-shadow:
    0 0 12px rgba(155,136,255, .5),
    0 0 30px rgba(75,0,130, .6);
}
.icon-btn img{ width:20px; height:20px; display:block; filter: invert(1); }

/* Menu button (home) */
.menu-btn{
  position: relative; /* anchor tooltip spans */
  font-size:20px; width:40px; height:40px; padding:0;
  border:1px solid var(--white); border-radius:3px;
  background: rgba(255,255,255,.08);
  color:var(--white);
  cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1;
  transition: background-color .2s ease, box-shadow .2s ease, transform .08s ease-in-out;
}
.menu-btn:hover{
  background-color: var(--hover-glow);
  box-shadow:
    0 0 12px rgba(155,136,255, .5),
    0 0 30px rgba(75,0,130, .6);
}

/* Tooltip target should not eat clicks */
.tooltip-anchor{ position:absolute; inset:0; pointer-events:none; }

/* Header hide/show on scroll (home) */
header.hidden{ top:-90px; transition: top .6s ease-in-out; }

/* =========================
   SIDE MENU (home)
========================= */
.menu{
  position: fixed;
  top: 0;
  right: -270px;
  width: 270px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 70px;
  background: var(--purple-glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: right 0.3s ease;
  z-index: 5000;
  overflow-y: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -6px 0 30px rgba(0, 0, 0, 0.4);
}
.menu.open{ right: 0; animation: slideInRight 0.4s ease forwards; }
.menu.closing{ animation: slideOutRight 0.4s ease forwards; }

.menu .close-btn{
  font-size:30px; color:var(--white); background:none; border:none; cursor:pointer;
  position:absolute; top:10px; left:115px; text-align:center;
}

.menu a{
  display:flex; justify-content:center; align-items:center; width:100%;
  padding:14px 0; font-size:1.2rem; color:var(--white);
  text-decoration:none; box-sizing:border-box; transition:background-color .3s ease;
}
.menu a:hover{ background-color: var(--hover-glow); }

@keyframes slideInRight { from{ right:-270px; } to{ right:0; } }
@keyframes slideOutRight { from{ right:0; } to{ right:-270px; } }

/* =========================
   PAGE LAYOUT (home bits used by checkout)
========================= */
.container{max-width:1200px; margin:0 auto; padding:100px 22px 28px}
.container > h2{margin: 0 0 6px 0}
.lede{color:var(--muted); margin-top:4px}
.cart-grid{display:grid; grid-template-columns: 1fr 380px; gap:24px; align-items:start}

/* Cards / list */
.card{background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.35)}
.card-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.10)}
.items-meta{padding:8px 18px; color:var(--muted)}
.empty{padding:22px 18px; color:var(--muted)}
.items-list{list-style:none; margin:0; padding:0}
.item-row{display:grid; grid-template-columns: 28px 64px 1fr auto auto; gap:14px; align-items:center; padding:12px 18px; border-top:1px solid rgba(255,255,255,.08)}
.item-row:first-child{border-top:none}
.item-row .thumb{width:64px; height:64px; border-radius:12px; background:rgba(0,0,0,.35); display:grid; place-items:center; overflow:hidden}
.item-title{font-weight:700}
.item-meta{font-size:.82rem; color:var(--muted)}
.qty{display:inline-flex; align-items:center; gap:6px}
.qty input{width:58px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:var(--purple-deep); color:var(--text)}
.row-actions .remove-btn{color:#ffd1dc; background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:6px 10px}

/* Summary / form */
.summary-card{position:relative}
.summary{display:grid; grid-template-columns: 1fr auto; gap:10px 12px; padding:16px 18px; align-items:center;}
.summary dt{color:var(--muted)}
.summary dd{margin:0; font-weight:800}
.summary > div{ display: contents; }

.checkbox-row{display:flex; align-items:center; gap:10px; padding:6px 18px 12px}
.form{padding:8px 18px 18px; display:grid; gap:12px}
.row-2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:grid; gap:6px}
.field input{
  padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: var(--purple-deep);
  color: var(--text); outline:none;
}
.field input:focus{box-shadow:0 0 0 4px var(--ring)}
.hint{color:var(--muted); font-size:.85rem; margin:8px 0 0}

/* Buttons */
.btn{
  position: relative; /* anchor tooltip spans if used inside */
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:10px 16px; border-radius:14px; border:1px solid transparent; cursor:pointer; font-weight:700
}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn-primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#0d0b1a; box-shadow:0 12px 36px rgba(155,136,255,.35)}
.btn-danger{background:transparent; color:#ff7c96; border-color:rgba(255,255,255,.18)}
.btn-sm{padding:8px 12px; font-size:.9rem}

/* =========================
   CHECKOUT-SPECIFIC
========================= */
.checkout-page{
  max-width:1200px;
  margin:0 auto;
  padding: var(--header-clear) 22px 28px; /* clears fixed header */
}
.checkout-title{margin:0 0 6px 0;}
.checkout-lede{color:var(--muted); margin-top:4px;}

.checkout-grid{display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start;}
@media (max-width: 980px){ .checkout-grid{ grid-template-columns:1fr; } }

.checkout-card{background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden;}
.checkout-card-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.10);}
.checkout-meta{padding:8px 18px; color:var(--muted);}
.checkout-empty{padding:22px 18px; color:var(--muted);}

.checkout-items{list-style:none; margin:0; padding:0;}
.checkout-row{display:grid; grid-template-columns:28px 64px 1fr auto auto; gap:14px; align-items:center; padding:12px 18px; border-top:1px solid rgba(255,255,255,.08);}
.checkout-row:first-child{border-top:none;}
.checkout-row .thumb{width:64px; height:64px; border-radius:12px; background:rgba(0,0,0,.35); display:grid; place-items:center; overflow:hidden;}
.checkout-row .item-title{font-weight:700;}
.checkout-row .item-meta{font-size:.82rem; color:var(--muted);}
.checkout-row .qty input{width:58px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:var(--purple-deep); color:var(--text);}
.checkout-row .remove-btn{color:#ffd1dc; background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:6px 10px}

.checkout-summary{display:grid; grid-template-columns:1fr auto; gap:10px 12px; padding:16px 18px; align-items:center;}
.checkout-summary dt{color:var(--muted);}
.checkout-summary dd{margin:0; font-weight:800;}
.checkout-checkbox{display:flex; align-items:center; gap:10px; padding:6px 18px 12px;}

.checkout-form{padding:8px 18px 18px; display:grid; gap:12px;}
.checkout-form .row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.checkout-form .field{display:grid; gap:6px;}
.checkout-form input{
  padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:var(--purple-deep); color:var(--text); outline:none;
}
.checkout-form input:focus{box-shadow:0 0 0 4px var(--ring);}
.checkout-hint{color:var(--muted); font-size:.85rem; margin:8px 0 0;}

.checkout-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:10px 16px; border-radius:14px; border:1px solid transparent; cursor:pointer; font-weight:700;}
.checkout-btn:disabled{opacity:.6; cursor:not-allowed;}
.checkout-btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#0d0b1a; box-shadow:0 12px 36px rgba(155,136,255,.35);}
.checkout-btn.danger{background:transparent; color:#ff7c96; border-color:rgba(255,255,255,.18);}
.checkout-btn.sm{padding:8px 12px; font-size:.9rem;}

/* =========================
   MODALS — visuals matched to homepage
   (kept z-index above menu for usability)
========================= */

/* =========================
   MODALS — homepage visuals (stable)
========================= */

@keyframes fadeIn { from { opacity:0; transform: translateY(-20px); } to { opacity:1; transform: translateY(0); } }
@keyframes fadeOut{ from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(-20px); } }

.modal{
  display:none;                 /* hidden by default; JS sets display:block */
  position:fixed; inset:0;
  background-color: rgba(0,0,0,0.6);     /* homepage overlay */
  backdrop-filter: blur(5px);            /* glass effect */
  -webkit-backdrop-filter: blur(5px);
  z-index: 6000;                         /* above .menu (5000) */
  overflow:auto;
  padding: 0;                            /* homepage uses margin on the sheet */
}

.modal.hidden{ display:none !important; }  /* JS won't use this, but harmless */

.modal .modal-content{
  position:relative;
  margin: 10% auto;                      /* homepage spacing */
  width: 90%;
  max-width: 400px;
  background: rgba(75, 0, 130, 0.9);     /* homepage purple sheet */
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 30px;
  color: white;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease-in-out;
  will-change: opacity, transform;
}

/* Close button */
.modal .close{
  position:absolute; top:10px; right:10px;
  color:#fff; font-size:26px; font-weight:bold; cursor:pointer;
  padding:0; line-height:1; z-index:10;
}
.modal .close:hover{ color:#ffcc00; }

/* Inputs */
.modal .modal-content input{
  width:100%;
  max-width:300px;
  padding:10px 12px;
  margin:10px auto;
  border:none;
  border-radius:6px;
  font-size:1rem;
  background-color: rgba(255,255,255,0.1);
  color:#fff;
  display:block;
  box-sizing:border-box;
}

/* Buttons */
.modal .modal-content button{
  width:100%;
  max-width:300px;
  padding:10px;
  margin:10px auto;
  background-color:#111;
  color:#f5f5f5;
  font-weight:bold;
  font-size:16px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  display:block;
  transition: color .3s ease, text-shadow .3s ease, background-color .3s ease;
}
.modal .modal-content button:hover{
  color:#00bfff;
  text-shadow:0 0 6px #00bfff;
  background-color:#222;
}

/* Action buttons row */
.modal .modal-action-buttons{
  display:flex; justify-content:space-between; gap:10px;
  margin:10px auto; max-width:300px;
}
.modal .modal-sub-btn{
  flex:1; padding:8px;
  background:transparent; color:#f5f5f5;
  border:1px solid #444; border-radius:6px; font-size:14px; font-weight:bold; cursor:pointer;
  transition: color .3s ease, text-shadow .3s ease, border-color .3s ease;
}
.modal .modal-sub-btn:hover{
  color:#00bfff; text-shadow:0 0 5px #00bfff; border-color:#00bfff;
}

/* Switch link */
.modal-switch-btn{
  background:none; border:none; color:#ffcc00; font-weight:bold; cursor:pointer; padding:0;
}
.modal-switch-btn:hover{ color:#ffaa00; }


/* =========================
   TOAST (unchanged)
========================= */
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background: rgba(75,0,130,.85); border:1px solid rgba(255,255,255,.18); padding:12px 16px; border-radius:12px; opacity:0; pointer-events:none; transition:opacity .25s}
.toast.show{opacity:1}

/* ===== Overlay button bar (floating above header, below menu) ===== */
.header-utility{
  position: fixed;
  top: var(--overlay-top);
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4500;                 /* header ~3000, menu is 5000 */
  pointer-events: none;
}
.header-utility > *{ pointer-events: auto; }

/* Checkout uses overlay; hide native cluster if present */
body.checkout .header-buttons{ display:none !important; }

/* Hide the Deposit button on Checkout overlay */
.depositBtn{ display:none !important; }

/* Visual parity */
.header-utility .icon-btn,
.header-utility .menu-btn{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
}
.header-utility .icon-btn img{ width:20px; height:20px; display:block; filter:invert(1); }

/* Pill */
.credit-pill{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  font-weight: 700;
}

/* =========================
   RESPONSIVE SPACING TWEAKS
========================= */
@media (max-width:560px){
  :root { --header-clear: 120px; }
}

@media (max-width:480px){
  :root {
    --overlay-top: calc(72px + env(safe-area-inset-top, 0px));
    --header-clear: 132px;
  }
}