/*
 * FoodX / Shaktisarvo category split.
 * Rendered by the foodx/split block in templates/front-page.html.
 */

.fx-split{
  box-sizing:border-box;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding:56px 0 0;
}
.fx-split *{ box-sizing:border-box; }
.fx-split-in{
  max-width:1360px; width:calc(100% - 40px); margin:0 auto;
  display:flex; gap:16px; align-items:stretch; min-height:540px;
}

/* ---------------- panel shell ---------------- */
/* NOTE: named .fx-split-panel, not .fx-panel — the navbar already owns
 * .fx-panel for its mobile dropdown wrapper (display:contents on desktop),
 * and this stylesheet loads after it. */
.fx-split-panel{
  flex:1; position:relative; overflow:hidden;
  border-radius:28px; padding:36px 40px 40px;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
}

.fx-split-panel--makhana{ background:linear-gradient(135deg,#163F33 0%,#1B4D3E 45%,#35805F 100%); }
.fx-split-panel--chow{ background:linear-gradient(135deg,#E58E26 0%,#D97A18 65%,#C56A10 100%); }

.fx-panel-glow{ position:absolute; inset:0; pointer-events:none; }
.fx-split-panel--makhana .fx-panel-glow--a{ background:radial-gradient(85% 70% at 90% 8%,rgba(76,187,23,.32) 0%,rgba(76,187,23,0) 55%); }
.fx-split-panel--makhana .fx-panel-glow--b{ background:radial-gradient(80% 70% at 8% 100%,rgba(76,187,23,.16) 0%,rgba(76,187,23,0) 60%); }
.fx-split-panel--chow .fx-panel-glow--a{ background:radial-gradient(85% 70% at 10% 8%,rgba(255,214,150,.34) 0%,rgba(255,214,150,0) 55%); }
.fx-split-panel--chow .fx-panel-glow--b{ background:radial-gradient(80% 70% at 95% 100%,rgba(197,106,16,.4) 0%,rgba(197,106,16,0) 60%); }

/* ---------------- floating orb ---------------- */
/* Inset from the corner, not bleeding off it — the panel clips its overflow,
 * so negative offsets just shear the artwork. */
.fx-panel-orb{
  position:absolute; top:32px; right:36px;
  width:150px; height:150px; pointer-events:none;
}
.fx-panel-orb-halo{
  position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 68%);
}
.fx-panel-orb-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.4));
}

/* ---------------- pills ---------------- */
.fx-panel-pills{ position:relative; display:flex; gap:8px; flex-wrap:wrap; max-width:70%; }
.fx-pill{
  background:rgba(255,255,255,.14); color:#DFF3E8;
  border:1px solid rgba(255,255,255,.25);
  font-size:11.5px; font-weight:700; letter-spacing:.05em;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.fx-split-panel--chow .fx-pill{ background:rgba(255,255,255,.18); color:#FFF3E0; border-color:rgba(255,255,255,.3); }

/* ---------------- copy ---------------- */
.fx-panel-body{ position:relative; }
.fx-panel-eyebrow{
  margin:0 0 10px; font-size:12.5px; font-weight:700;
  letter-spacing:.2em; color:#9FE870;
}
.fx-split-panel--chow .fx-panel-eyebrow{ color:#FFE0B0; }
.fx-panel-title{
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:46px; font-weight:800; color:#fff;
  margin:0 0 12px; line-height:1.02; max-width:320px;
}
.fx-panel-lede{
  color:rgba(255,255,255,.82); font-size:15px; line-height:1.55;
  margin:0 0 20px; max-width:400px;
}
.fx-split-panel--chow .fx-panel-lede{ color:rgba(255,255,255,.88); }

/* ---------------- flavour chips ---------------- */
.fx-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.fx-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:8px 14px; font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .2s,border-color .2s,color .2s;
}
.fx-chip:hover{ background:rgba(255,255,255,.18); }
.fx-chip.is-active{ background:#fff; color:#1B4D3E; border-color:#fff; }
.fx-chip-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ---------------- stats ---------------- */
.fx-stats{ display:flex; gap:8px; margin-bottom:14px; }
.fx-stat{
  flex:1; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:10px 12px;
}
.fx-stat-value{
  display:block;
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px; font-weight:800; color:#9FE870; line-height:1;
}
.fx-stat-label{
  display:block; font-size:10.5px; font-weight:700;
  color:rgba(255,255,255,.65); letter-spacing:.04em; margin-top:4px;
}

/* ---------------- featured product card ---------------- */
.fx-feat{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:22px; padding:16px;
  display:flex; align-items:stretch; gap:18px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.6);
}
/* Square, and centred rather than stretched: the parent is align-items:stretch,
 * which was making this 96px wide but as tall as the whole card. */
.fx-feat-thumb{
  position:relative; width:96px; aspect-ratio:1/1; align-self:center;
  flex-shrink:0; border-radius:16px;
  overflow:hidden; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.fx-feat-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fx-feat-info{
  position:relative; flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
}
.fx-feat-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fx-feat-name{
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:19px; font-weight:700; color:#fff; line-height:1.1;
}
.fx-feat-off{
  font-size:9.5px; font-weight:800; color:#1B4D3E; background:#9FE870;
  padding:3px 8px; border-radius:999px; letter-spacing:.03em; white-space:nowrap;
}
.fx-feat-off[hidden]{ display:none; }
.fx-feat-note{ margin:0; font-size:12.5px; color:rgba(255,255,255,.68); }

.fx-feat-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fx-feat-price{
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:24px; font-weight:800; color:#9FE870; line-height:1;
}
.fx-feat-was{ font-size:13px; color:rgba(255,255,255,.5); text-decoration:line-through; }
.fx-feat-sep{ width:1px; height:18px; background:rgba(255,255,255,.18); }
.fx-feat-rating{ display:inline-flex; align-items:center; color:#FFD37A; font-size:12px; font-weight:700; }

.fx-feat-add{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  background:#4CBB17; color:#fff; text-decoration:none;
  border-radius:12px; padding:11px 22px;
  font-size:13.5px; font-weight:800;
  box-shadow:0 8px 18px -8px rgba(76,187,23,.7);
  transition:background .2s,transform .15s;
}
.fx-feat-add:hover,.fx-feat-add:focus-visible{ background:#3A8E12; color:#fff; transform:translateY(-2px); }

/* ---------------- chowmein panel specifics ---------------- */
.fx-toggle-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
/* .fx-split-toggle, not .fx-toggle — the navbar's hidden hamburger checkbox
 * already owns .fx-toggle and would apply opacity:0/width:0 here. */
.fx-split-toggle{
  display:inline-flex; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:4px;
}
.fx-toggle-btn{
  border:0; background:transparent; color:#fff; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700;
  padding:8px 20px; border-radius:999px; transition:background .2s,color .2s;
}
.fx-toggle-btn.is-active{ background:#fff; color:#C56A10; }
.fx-ready{
  display:inline-flex; align-items:center; gap:7px; margin:0;
  color:#FFF3E0; font-size:12.5px; font-weight:700;
}

/* The chowmein card uses the same layout as the makhana one — only the
 * surface tint and the price colour differ, since light green on orange
 * reads poorly. */
.fx-feat--chow{
  background:rgba(27,77,62,.22); border-color:rgba(255,255,255,.2);
}
.fx-feat--chow .fx-feat-price{ color:#FFE0B0; }

.fx-feat-add--pill{
  border-radius:999px; padding:12px 20px; box-shadow:none;
}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1100px){
  .fx-split-panel{ padding:30px 28px 32px; }
  .fx-panel-title{ font-size:38px; }
  .fx-feat{ flex-direction:column; }
  .fx-feat-thumb{ width:100%; aspect-ratio:auto; height:120px; align-self:stretch; }
}

@media (max-width:899px){
  .fx-split{ padding-top:40px; }
  .fx-split-in{ flex-direction:column; min-height:0; }
  .fx-split-panel{ padding:28px 22px 30px; border-radius:22px; }
  .fx-panel-title{ font-size:32px; max-width:none; }
  .fx-panel-orb{ width:104px; height:104px; top:20px; right:20px; }
  .fx-panel-pills{ max-width:62%; }
}

@media (max-width:560px){
  .fx-split-in{ width:calc(100% - 28px); }
  .fx-stats{ flex-wrap:wrap; }
  .fx-stat{ flex:1 1 calc(33.333% - 6px); }
  .fx-panel-title{ font-size:28px; }
}

@media (prefers-reduced-motion:reduce){
  .fx-chip,.fx-toggle-btn,.fx-feat-add,
  .fx-panel-orb-img{ transition:none !important; }
  .fx-feat-add:hover,.fx-feat-add--pill:hover{ transform:none; }
}