/* =========================================================
   ECHELON BREW — GUEST PORTAL SKIN  ("Noir & Champagne")
   Loaded ONLY by customer.html, AFTER /erp/css/style.css.
   Pure presentation: overrides colors, type and surfaces so the
   booking portal matches echelonbrew.in. No selector here is
   used by the staff ERP pages, and no layout mechanics change.
   ========================================================= */

/* ---------- palette: always noir, whatever theme staff picked ---------- */
html[data-theme]{
  --gold:#d8b979;
  --gold-soft:#e9d5a4;
  --coffee-light:#c9a24b;
  --bg:#0a0806;
  --bg-2:#0f0c09;
  --surface:#14100c;
  --surface-2:#1a150f;
  --surface-3:#231c13;
  --border:rgba(216,185,121,.16);
  --text:#f2ecdf;
  --text-2:#b8ae99;
  --text-3:#8a8070;
  --glass:rgba(10,8,5,.78);
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --shadow-sm:0 8px 22px rgba(0,0,0,.45);
  --radius:4px;
  --radius-sm:2px;
  --radius-lg:8px;
  --font:'Inter','Plus Jakarta Sans',system-ui,sans-serif;
  --display:'Italiana','Cormorant Garamond',serif;
}

body{
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(216,185,121,.06), transparent 60%),
    radial-gradient(800px 420px at 0% 110%, rgba(169,120,74,.05), transparent 60%),
    var(--bg);
  letter-spacing:.01em;
}

h1,h2,h3,.cust-hero h1{
  font-family:'Italiana','Cormorant Garamond',serif;
  font-weight:400;letter-spacing:.015em;
}

/* ---------- top bar ---------- */
.cust-top{
  background:rgba(9,7,5,.82);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  padding:14px 26px;
}
.cust-top nav button{
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--text-2);
  border-radius:0;padding:10px 15px;
}
.cust-top nav button.active{
  background:transparent;color:var(--gold);
  box-shadow:inset 0 -1px 0 var(--gold);
}
.cust-top nav button:hover{color:var(--text);}

/* ---------- hero ---------- */
.cust-hero{min-height:430px;padding:70px 20px;}
.cust-hero .hbg{filter:brightness(.75) saturate(.85) sepia(.12);}
.cust-hero .hveil{
  background:
    radial-gradient(85% 70% at 50% 40%, rgba(6,4,2,.55), rgba(6,4,2,.93)),
    linear-gradient(180deg, rgba(6,4,2,.4), transparent 40%, rgba(6,4,2,.85));
}
.cust-hero .hcontent::before{
  content:"A CINEMATIC CAFÉ · CRAFTED IN QUIET LUXURY";
  display:block;
  font-size:9.5px;font-weight:600;letter-spacing:.5em;color:var(--gold);
  margin-bottom:22px;
}
.cust-hero h1{
  font-size:clamp(30px,5.6vw,52px);line-height:1.12;
  max-width:660px;margin:18px auto 10px;
}
.cust-hero p{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(16px,2.4vw,20px);color:rgba(242,236,223,.72);
}

/* ---------- buttons ---------- */
.btn{
  border-radius:0;
  font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  padding:14px 24px;
}
.btn-primary{
  background:linear-gradient(120deg,#d8b979,#c9a24b);
  color:#171006;border:none;
  box-shadow:0 16px 40px -16px rgba(216,185,121,.5);
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}

/* ---------- cards & surfaces ---------- */
.card{
  border-radius:0;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  box-shadow:none;
}
.card:hover{box-shadow:var(--shadow-sm);}

.stat .val{
  font-family:'Italiana',serif;font-weight:400;letter-spacing:.02em;
}
.stat .ico{border-radius:0;}

/* ---------- page heads ---------- */
.page-head h1, .ph h1{font-family:'Italiana',serif;}
.ph .sub, .page-head .sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;
}

/* ---------- segmented category pills ---------- */
.seg button{
  border-radius:0;
  font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid transparent;
}
.seg button.active{
  background:rgba(216,185,121,.10);
  color:var(--gold);border-color:var(--border);
}

/* ---------- guest menu cards ---------- */
.menu-card{border-radius:0;overflow:hidden;}
.menu-card .thumb{
  border-radius:0;
  filter:sepia(.12) saturate(.92) brightness(.94);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1), filter .8s;
}
.menu-card:hover .thumb{transform:scale(1.05);filter:sepia(.03) saturate(1) brightness(1);}
.menu-card .price{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;
  color:var(--gold);
}
.menu-card b{font-family:'Italiana',serif;font-weight:400;font-size:17px;letter-spacing:.02em;}

/* ---------- forms ---------- */
.input,.select,textarea.input{
  border-radius:0;background:var(--bg-2);
  border:1px solid var(--border);
}
.input:focus,.select:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(216,185,121,.14);
}
.input-group .prefix{border-radius:0;}
.field label{
  font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-3);
}

/* ---------- bottom nav (phones) ---------- */
.bottom-nav{
  background:rgba(9,7,5,.92);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid var(--border);
}
.bottom-nav button{font-size:9px;letter-spacing:.12em;text-transform:uppercase;}
.bottom-nav button.active{color:var(--gold);}

/* ---------- footer line ---------- */
.cust-foot{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-3);
  border-top:1px solid var(--border);
  margin-top:40px;padding:26px 16px;
}

/* ---------- toasts & modals inherit the noir surfaces ---------- */
.toast{border-radius:0;border:1px solid var(--border);}
.modal{border-radius:0;border:1px solid var(--border);}

/* ---------- tables (My Bookings) ---------- */
table th{
  font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-3);
}

/* small screens: keep the hero calm */
@media (max-width:700px){
  .cust-hero{min-height:380px;padding:56px 16px;}
  .cust-hero .hcontent::before{letter-spacing:.34em;}
}