/* CapyFuel Supplement Cost Calculator — brand-token styling.
 * Two modes: single-product value check + multi-retailer compare/basket.
 * Mirrors capyfuel-calc.css conventions. */
.cf-cost{ max-width:920px; margin:0 auto; }
.cf-cost__modes{ display:inline-flex; gap:4px; background:var(--cf-green-900); border:1px solid var(--cf-green-600); border-radius:999px; padding:4px; margin:0 0 1.4em; }
.cf-cost__mode{ background:transparent!important; color:var(--cf-cream-200)!important; border:0!important; border-radius:999px!important; padding:.5em 1.3em!important; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; cursor:pointer; box-shadow:none!important; }
.cf-cost__mode.is-active{ background:var(--cf-orange-500)!important; color:#fff!important; }

.cf-cost__form{ background:rgba(42,62,41,.82); border:1px solid rgba(240,184,132,.18); border-radius:16px; padding:22px 24px; backdrop-filter:blur(12px); box-shadow:0 18px 45px rgba(0,0,0,.18); }
.cf-cost__intro{ color:var(--cf-cream-200); font-size:.92rem; margin:0 0 1.2em; }
.cf-cost__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 22px; }
.cf-cost__field{ display:flex; flex-direction:column; gap:.3em; }
.cf-cost__field label{ font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; color:var(--cf-cream-100); }
.cf-cost__field input, .cf-cost__field select{ background:rgba(26,39,26,.86); color:var(--cf-cream-100); border:1px solid rgba(240,184,132,.22); border-radius:8px; padding:.55em .7em; font-size:1rem; width:100%; transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
/* Keep inputs dark on focus + autofill (Storefront/browser try to force white). */
.cf-cost__field input:focus, .cf-cost__field select:focus{ background:var(--cf-green-900)!important; color:var(--cf-cream-100)!important; border-color:var(--cf-orange-200); outline:none; box-shadow:0 0 0 2px rgba(240,184,132,.45); }
.cf-cost__field input:-webkit-autofill, .cf-cost__field input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--cf-cream-100); -webkit-box-shadow:0 0 0 1000px var(--cf-green-900) inset; caret-color:var(--cf-cream-100); }
.cf-cost__field input::placeholder{ color:var(--cf-green-200); opacity:1; }
.cf-cost__sizewrap{ display:flex; gap:8px; }
.cf-cost__sizewrap input{ flex:1; }
.cf-cost__sizewrap select{ width:auto; }
/* Protein field only relevant for whey — hidden for other types via [data-type]. */
.cf-cost__protein{ transition:opacity .15s; }
.cf-cost__form[data-prot="off"] .cf-cost__protein{ display:none; }
.cf-cost__go{ margin-top:18px; }
.cf-cost__add{ margin-top:6px; margin-right:10px; }
.button--ghost{ background:transparent!important; color:var(--cf-orange-200)!important; border:1px solid var(--cf-orange-500)!important; box-shadow:none!important; }

/* Compare offers */
.cf-cost__offer{ background:var(--cf-green-800); border:1px solid var(--cf-green-600); border-radius:12px; padding:14px 16px; margin:0 0 12px; }
.cf-cost__offerhead{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cf-cost__offerhead h4{ margin:0; font-size:.95rem; color:var(--cf-cream-100); font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.cf-cost__del{ background:transparent!important; color:var(--cf-muted)!important; border:0!important; box-shadow:none!important; font-size:1.2rem; line-height:1; cursor:pointer; padding:0 .3em!important; }
.cf-cost__del:hover{ color:var(--cf-warning)!important; }
.cf-cost__ogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px 14px; }
.cf-cost__ogrid .cf-cost__full{ grid-column:1 / -1; }

.cf-cost__results{ margin-top:1.8em; }
.cf-cost__err{ color:var(--cf-warning); }
.cf-cost__rtitle{ font-size:1.5rem; margin:0 0 .2em; }
.cf-cost__rsub{ color:var(--cf-muted); margin:0 0 1.2em; }

/* Stat tiles (single mode) */
.cf-cost__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 1.4em; }
.cf-cost__stat{ background:var(--cf-char-800); border:1px solid var(--cf-green-600); border-radius:14px; padding:16px; text-align:center; }
.cf-cost__stat .n{ font-family:"Oswald",sans-serif; font-weight:700; font-size:1.7rem; color:var(--cf-orange-200); line-height:1; }
.cf-cost__stat .l{ font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.7rem; color:var(--cf-cream-100); margin-top:.45em; }
.cf-cost__stat .s{ font-size:.72rem; color:var(--cf-muted); margin-top:.2em; }

/* Verdict pill */
.cf-cost__verdict{ display:inline-flex; align-items:center; gap:.5em; border-radius:999px; padding:.5em 1em; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; margin:0 0 1em; }
.cf-cost__verdict.is-great{ background:rgba(46,160,67,.18); color:var(--cf-success); border:1px solid var(--cf-success); }
.cf-cost__verdict.is-fair{ background:rgba(210,153,34,.16); color:var(--cf-warning); border:1px solid var(--cf-warning); }
.cf-cost__verdict.is-pricey{ background:rgba(218,84,67,.16); color:var(--cf-warning); border:1px solid var(--cf-warning); }

/* Comparison / basket table */
.cf-cost__item{ margin:0 0 1.6em; }
.cf-cost__item h3{ font-size:1.2rem; margin:0 0 .5em; }
.cf-cmp{ width:100%; border-collapse:collapse; font-size:.9rem; table-layout:auto; }
.cf-cmp th, .cf-cmp td{ border:1px solid var(--cf-green-600); padding:.5em .6em; text-align:left; }
.cf-cmp th{ background:var(--cf-green-700); font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:.74rem; }
.cf-cmp td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.cf-cmp th, .cf-cmp td.num, .cf-cmp .pick, .cf-buy{ white-space:nowrap; }
.cf-cmp td:nth-child(2){ min-width:180px; }
.cf-cmp tr.is-best td{ background:rgba(46,160,67,.12); }
.cf-cmp .pick{ color:var(--cf-success); font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:.7rem; letter-spacing:.04em; }
.cf-buy{ display:inline-block; background:var(--cf-orange-500); color:#fff!important; text-decoration:none; border-radius:8px; padding:.35em .8em; font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:.74rem; }
.cf-buy:hover{ filter:brightness(1.08); }

.cf-cost__basket{ background:var(--cf-green-800); border:1px solid var(--cf-green-600); border-radius:14px; padding:16px 20px; margin:0 0 1.2em; }
.cf-cost__basket h3{ font-size:1.2rem; margin:0 0 .6em; }
.cf-cost__bline{ display:flex; justify-content:space-between; padding:.35em 0; border-bottom:1px dashed var(--cf-green-600); }
.cf-cost__bline:last-child{ border-bottom:0; }
.cf-cost__btotal{ font-family:"Oswald",sans-serif; font-size:1.15rem; color:var(--cf-orange-200); }
.cf-cost__single{ font-size:.88rem; color:var(--cf-cream-200); margin-top:.8em; }
.cf-cost__single strong{ color:var(--cf-orange-200); }

.cf-cost__disclaimer{ color:var(--cf-muted); font-size:.78rem; line-height:1.6; margin:1.4em 0 0; padding-top:1em; border-top:1px solid var(--cf-green-600); }

/* ── Curated "cheapest right now" comparison ([capyfuel_cheapest]) ── */
.cf-prices{ max-width:1000px; margin:0 auto; }
.cf-prices__cat{ margin:0 0 2.2em; }
.cf-prices__cat h3{ font-size:1.5rem; margin:0 0 .15em; }
.cf-prices__note{ color:var(--cf-muted); font-size:.85rem; margin:0 0 .8em; }
.cf-prices__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 .35em; border:1px solid var(--cf-green-600); border-radius:12px; }
.cf-prices .cf-cmp{ min-width:860px; margin:0; }
.cf-prices .cf-cmp td:nth-child(2){ font-weight:600; color:var(--cf-cream-100); }
.cf-prices .cf-cmp td:nth-child(2) a{ color:var(--cf-cream-100); text-decoration:none; }
.cf-prices .cf-cmp td:nth-child(2) a:hover{ color:var(--cf-orange-200); text-decoration:underline; }
.cf-rate{ color:var(--cf-orange-200); white-space:nowrap; font-weight:600; }
.cf-rate__v{ font-variant-numeric:tabular-nums; }
.cf-rate__n{ color:var(--cf-muted); font-size:.82em; white-space:nowrap; }

@media (max-width:680px){
  .cf-cost__grid{ grid-template-columns:1fr; }
  .cf-cost__ogrid{ grid-template-columns:1fr; }
  .cf-cost__stats{ grid-template-columns:1fr; }
  .cf-cmp{ font-size:.82rem; min-width:720px; }
  .cf-cmp th, .cf-cmp td{ padding:.4em .45em; }
  .cf-prices__scroll{ margin-left:-4px; margin-right:-4px; }
}