/*
 * FoodX / Shaktisarvo "Build Your Own Snack Box".
 * Rendered by the foodx/box block in templates/front-page.html.
 * All selectors are fx-box-* prefixed to stay clear of the navbar and split
 * section, which already own generic names like .fx-panel and .fx-toggle.
 */

.fx-box{
  box-sizing:border-box;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  padding:8px 0 64px;
}
.fx-box *{ box-sizing:border-box; }
.fx-box-in{
  max-width:1360px; width:calc(100% - 40px); margin:0 auto;
  background:#fff; border:1px solid #EDEFEC; border-radius:28px;
  box-shadow:0 20px 44px -32px rgba(27,42,36,.35);
  padding:52px 56px;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;
}

/* ---------------- left column ---------------- */
.fx-box-pill{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
  background:#EFF6EC; color:#2F5E4A; border-radius:999px;
  padding:7px 16px; font-size:12px; font-weight:800; letter-spacing:.1em;
}
.fx-box-dot{ width:8px; height:8px; border-radius:50%; background:#4CBB17; }

.fx-box-title{
  margin:0 0 16px;
  font-family:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800; font-size:40px; line-height:1.08; color:#1B4D3E;
  max-width:340px;
}
.fx-box-lede{
  margin:0 0 24px; font-size:15px; line-height:1.6;
  color:#5A6A62; max-width:440px;
}

.fx-box-sizes{ display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.fx-box-size{
  flex:1; min-width:150px;
  background:#fff; color:#1B4D3E;
  border:1.5px solid #DCE4D8; border-radius:12px;
  padding:15px 18px; font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer; transition:background .18s,border-color .18s,color .18s;
}
.fx-box-size:hover{ border-color:#4CBB17; }
.fx-box-size.is-active{ background:#1B4D3E; border-color:#1B4D3E; color:#fff; }

.fx-box-status{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:8px;
}
.fx-box-count{ font-size:13.5px; font-weight:700; color:#3E4E45; }
.fx-box-total{ font-size:14px; font-weight:800; color:#E58E26; }

.fx-box-bar{
  height:7px; border-radius:999px; background:#EEF1EC;
  overflow:hidden; margin-bottom:20px;
}
.fx-box-bar-fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#4CBB17 0%,#2F5E4A 100%);
  border-radius:999px; transition:width .3s ease;
}

.fx-box-cta{
  display:block; text-align:center; text-decoration:none;
  background:#4CBB17; color:#fff;
  border-radius:999px; padding:16px 24px;
  font-size:15px; font-weight:800;
  transition:background .18s,transform .15s;
}
.fx-box-cta:hover,.fx-box-cta:focus-visible{ background:#3FA012; color:#fff; }
.fx-box-cta.is-disabled{
  background:#EFF1EE; color:#A9B2AC;
  pointer-events:none; cursor:default;
}

/* ---------------- right column ---------------- */
.fx-box-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.fx-box-row{
  display:flex; align-items:center; gap:18px;
  background:#FCFDFB; border:1px solid #EDEFEC; border-radius:16px;
  padding:16px 20px; transition:border-color .18s,background .18s;
}
.fx-box-row.is-picked{ border-color:#C7E3B6; background:#F7FBF4; }

.fx-box-thumb{
  flex:none; width:56px; height:56px; border-radius:12px;
  overflow:hidden; background:#F1F3F0;
}
.fx-box-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.fx-box-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fx-box-name{ font-size:15px; font-weight:800; color:#1B2A24; }
.fx-box-note{ font-size:12.5px; color:#98A29D; }

.fx-box-step{ display:flex; align-items:center; gap:12px; flex:none; }
.fx-box-qty{
  min-width:18px; text-align:center;
  font-size:14.5px; font-weight:800; color:#1B2A24;
}
.fx-box-btn{
  width:34px; height:34px; border-radius:9px; flex:none;
  font-family:inherit; font-size:17px; font-weight:700; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .18s,border-color .18s,opacity .18s;
}
.fx-box-minus{ background:#fff; color:#1B4D3E; border:1.5px solid #DCE4D8; }
.fx-box-minus:hover:not(:disabled){ border-color:#1B4D3E; }
.fx-box-plus{ background:#4CBB17; color:#fff; border:1.5px solid #4CBB17; }
.fx-box-plus:hover:not(:disabled){ background:#3FA012; border-color:#3FA012; }
.fx-box-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ======================= RESPONSIVE ======================= */
@media (max-width:1000px){
  .fx-box-in{ grid-template-columns:1fr; gap:34px; padding:38px 32px; }
  .fx-box-title{ font-size:32px; max-width:none; }
  .fx-box-lede{ max-width:none; }
}

@media (max-width:560px){
  .fx-box{ padding-bottom:48px; }
  .fx-box-in{ width:calc(100% - 28px); padding:30px 22px; border-radius:22px; }
  .fx-box-title{ font-size:27px; }
  .fx-box-size{ min-width:0; padding:13px 12px; font-size:14px; }
  .fx-box-row{ padding:13px 14px; gap:13px; }
  .fx-box-thumb{ width:48px; height:48px; }
  .fx-box-name{ font-size:14px; }
  .fx-box-note{ font-size:11.5px; }
  .fx-box-step{ gap:8px; }
  .fx-box-btn{ width:31px; height:31px; }
}

@media (prefers-reduced-motion:reduce){
  .fx-box-bar-fill,.fx-box-cta,.fx-box-size,.fx-box-btn,.fx-box-row{ transition:none !important; }
}