/* Buyback Builder calculator. Ported from the iMobile calculator v2 styles.
   Scoped to .icalc. Neutral tokens; the page sets --accent (and --on-accent,
   the text color on top of it) from the shop's accent color. */

.icalc{
  --ink:#1f2328;--sub:#59606b;--muted:#6a717c;--quote:#5c6370;--teal:#2b6f8f;
  --page-2:#f5f6f7;--divider:#e3e6ea;--card:#ffffff;
  --accent:#1f7a3e;--accent-ink:color-mix(in srgb,var(--accent) 82%,#000);
  --accent-wash:color-mix(in srgb,var(--accent) 9%,#fff);--on-accent:#fff;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --g:var(--accent);--g2:var(--accent-ink);--gbg:var(--accent-wash);
  --navy:var(--ink);--navy2:rgba(255,255,255,.18);
  --text:var(--ink);
  --bdr:var(--divider);--card:var(--page-2);--white:#fff;
  --amber:var(--quote);--cyan:var(--teal);
  --blue:var(--ink);--blue-bg:var(--page-2);
  font-family:var(--font);color:var(--text);
  -webkit-font-smoothing:antialiased;
  width:100%;max-width:600px;margin:0 auto;
  background:var(--white);
  /* the step slide-in (translateX) must not widen the page on phones */
  overflow-x:clip;
}
.icalc *,.icalc *::before,.icalc *::after{box-sizing:border-box;margin:0;padding:0}
@media(min-width:640px){
  .icalc{border:1px solid var(--bdr);border-radius:20px;box-shadow:0 4px 32px rgba(0,0,0,.07);overflow:hidden}
}

/* Header + progress */
.ic-hdr{background:var(--navy);padding:.9rem 1.25rem .75rem}
.ic-hdr-title{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.ic-hdr-sub{font-size:.72rem;color:rgba(255,255,255,.72);margin-top:.15rem}
.ic-prog{height:4px;background:var(--navy2)}
.ic-prog-fill{height:100%;background:var(--g);width:0;transition:width .3s ease}

/* Step header */
.ic-sthdr{padding:.7rem 1.25rem .6rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:.6rem;min-height:56px}
.ic-sthdr-text{min-width:0}
.ic-stnum{width:23px;height:23px;border-radius:50%;background:var(--g);color:var(--on-accent);font-size:.66rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ic-sttitle{font-size:.92rem;font-weight:800;color:var(--text)}
.ic-stsub{font-size:.7rem;color:var(--muted);margin-top:1px}
.ic-body{padding:1rem 1.25rem 1.1rem}
/* Stable floor for the card. Without it the card collapses to a sliver on the
   short steps (the storage row is only ~78px of content) and everything below
   jumps up the page. Scoped to a step's body so the dark header and the step
   header stay put, and so the /offer/<code> page, which uses .ic-body outside
   .ic-step, is not padded out. No max-height: the model grid and the condition
   cards grow past this normally. Values picked by measuring the real steps,
   smaller on phones where the card is edge to edge and a gap reads larger. */
.icalc .ic-step > .ic-body{min-height:190px}
@media(min-width:640px){.icalc .ic-step > .ic-body{min-height:230px}}

/* The default (?grid=series) card floor. One family at a time makes the model
   step short, so the card holds one height across model, storage and SIM
   instead of dropping to a sliver. The base floor above still applies to the
   other layouts. Floors are the measured model step: 446px at 390 wide, 354px at
   1280, rounded up. Condition and result still grow past this.
   Flooring to the result step instead (636px) would sit 560px of white under
   four storage pills, so the anchor is the model step, not the tallest step. */
.icalc[data-grid="series"] .ic-step > .ic-body{min-height:460px}
@media(min-width:640px){.icalc[data-grid="series"] .ic-step > .ic-body{min-height:370px}}
.ic-step{animation:icIn .22s ease}
.ic-step.ic-quiet{animation:none}
@keyframes icIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* Model grid */
.ic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}


/* Series chips: one family at a time */
.ic-series{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.ic-series-chip{font-family:var(--font);font-size:.74rem;font-weight:700;line-height:1;color:var(--sub);
  background:var(--card);border:1.5px solid var(--bdr);border-radius:50px;padding:.5rem .7rem;cursor:pointer;
  min-height:34px;transition:all .15s;-webkit-tap-highlight-color:transparent}
.ic-series-chip:hover{border-color:var(--divider)}
.ic-series-chip.sel{background:var(--g);border-color:var(--g);color:var(--on-accent)}
@media(min-width:480px){.ic-grid{grid-template-columns:repeat(4,1fr)}}
.ic-model{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .35rem .6rem;border:1.5px solid var(--bdr);border-radius:12px;background:var(--white);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;font-family:var(--font);width:100%}
.ic-model:active{transform:scale(.95)}
.ic-model:hover,.ic-model.sel{border-color:var(--g);background:var(--gbg);box-shadow:0 0 0 1px var(--g)}
.ic-model-img{width:100%;height:72px;object-fit:contain;object-position:bottom}
.ic-model-icon{width:100%;height:72px;display:flex;align-items:flex-end;justify-content:center;color:var(--sub)}
.ic-model-icon svg{height:62px;width:auto}
.ic-model-name{font-size:.64rem;font-weight:700;color:var(--text);text-align:center;line-height:1.25}

/* Pills */
.ic-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.ic-pill{padding:.55rem 1.1rem;border-radius:50px;border:1.5px solid var(--bdr);background:var(--card);color:var(--sub);font-family:var(--font);font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;min-height:44px}
.ic-pill:active{transform:scale(.96)}
.ic-pill:hover{border-color:var(--g);color:var(--g);background:var(--gbg)}
.ic-pill.sel{border-color:var(--g);background:var(--g);color:var(--on-accent);box-shadow:0 2px 8px color-mix(in srgb,var(--g) 25%,transparent)}

/* Lock buttons */
.ic-locks{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.ic-lock{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.8rem .9rem;border:1.5px solid var(--bdr);border-radius:12px;background:var(--white);cursor:pointer;font-family:var(--font);text-align:left;transition:all .15s;min-height:56px;-webkit-tap-highlight-color:transparent}
.ic-lock:hover,.ic-lock.sel{border-color:var(--g);background:var(--gbg);box-shadow:0 0 0 1px var(--g)}
.ic-lock-label{font-size:.88rem;font-weight:800;color:var(--text)}
.ic-lock-sub{font-size:.68rem;color:var(--muted)}

/* Condition cards (same design as /sell/iphone) */
.ic-conds{display:flex;flex-direction:column;gap:.55rem}
.ic-cond{display:flex;align-items:flex-start;gap:.85rem;padding:.9rem 1rem;border:1.5px solid var(--bdr);border-radius:12px;background:var(--white);cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;text-align:left;font-family:var(--font);width:100%}
.ic-cond:active{transform:scale(.99)}
.ic-cond:hover,.ic-cond.sel{border-color:var(--g);background:var(--gbg);box-shadow:0 0 0 1px var(--g)}
.ic-cond.is-new:hover,.ic-cond.is-new.sel{border-color:var(--blue);background:var(--blue-bg);box-shadow:0 0 0 1px var(--blue)}
.ic-radio{width:18px;height:18px;border:2px solid var(--bdr);border-radius:50%;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ic-cond.sel .ic-radio{border-color:var(--g);background:var(--g)}
.ic-cond.is-new.sel .ic-radio{border-color:var(--blue);background:var(--blue)}
.ic-cond.sel .ic-radio::after{content:'';width:6px;height:6px;background:var(--card);border-radius:50%}
.ic-cond-main{flex:1;min-width:0}
.ic-cond-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.ic-cond-title{font-size:.88rem;font-weight:800;color:var(--text);margin-bottom:2px}
.ic-cond-price{font-size:1.15rem;font-weight:900;color:var(--text);white-space:nowrap;letter-spacing:-.02em;line-height:1.1}
.ic-cond-price.na{font-size:.72rem;font-weight:700;color:var(--muted);text-align:right;max-width:7rem;white-space:normal}
.ic-cond-grade{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.3rem}
.cg-new{color:var(--blue)}.cg-a{color:var(--g)}.cg-b{color:var(--cyan)}.cg-c{color:var(--amber)}
.ic-cond-desc{font-size:.77rem;color:var(--sub);line-height:1.5;margin-bottom:.2rem}
.ic-cond-note{display:inline-block;font-size:.64rem;font-weight:700;color:var(--blue);background:var(--blue-bg);border-radius:20px;padding:2px 8px;margin:.15rem 0 .1rem}
.ic-req{list-style:none;display:flex;flex-direction:column;gap:.2rem;margin-top:.3rem}
.ic-req li{font-size:.71rem;color:var(--sub);display:flex;gap:.35rem;align-items:flex-start;line-height:1.4}
.ic-req li::before{content:'✓';color:var(--g);font-weight:700;font-size:.68rem;flex-shrink:0;margin-top:1px}
.ic-cond-foot{font-size:.74rem;color:var(--muted);text-align:center;margin-top:.8rem;line-height:1.5}

/* Price loading skeleton + failure notice */
.ic-skel{display:inline-block;width:3.4rem;height:1.15rem;border-radius:6px;vertical-align:middle;background:linear-gradient(90deg,var(--divider) 25%,var(--page-2) 50%,var(--divider) 75%);background-size:200% 100%;animation:icShimmer 1.2s ease-in-out infinite}
.ic-skel-lg{width:9rem;height:3rem;border-radius:10px;background:linear-gradient(90deg,var(--page-2) 25%,var(--divider) 50%,var(--page-2) 75%);background-size:200% 100%}
@keyframes icShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.ic-skel{animation:none}.ic-step{animation:none}}
.ic-alert{font-size:.8rem;line-height:1.5;color:var(--quote);background:var(--page-2);border:1px solid var(--divider);border-radius:10px;padding:.65rem .85rem;margin-bottom:.7rem}
.ic-alert a{color:var(--quote);font-weight:800;white-space:nowrap}

/* Result: white quote card */
.ic-quote{background:var(--white);border:1.5px solid var(--bdr);border-radius:16px;padding:1.1rem 1.1rem 1.2rem;box-shadow:0 2px 14px rgba(15,25,35,.05)}
.ic-specs{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;margin:0}
.ic-spec{min-width:0}
.ic-spec:first-child,.ic-spec:nth-child(4){grid-column:1/-1}
.ic-spec dt{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ic-spec dd{margin:0;font-size:.9rem;font-weight:700;color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.ic-spec:first-child dd{font-size:1.05rem;font-weight:800}
.ic-q-label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--bdr)}
.ic-q-price{font-size:3.2rem;font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--text);margin:.15rem 0 .1rem}
.ic-q-price.na{font-size:1.4rem;letter-spacing:-.02em;margin:.35rem 0}
.ic-skel-q{width:8.5rem;height:2.8rem;border-radius:10px}
.ic-q-note{display:inline-block;font-size:.66rem;font-weight:700;color:var(--blue);background:var(--blue-bg);border-radius:20px;padding:2px 9px;margin-top:.2rem}
.ic-q-valid{font-size:.8rem;font-weight:600;color:var(--g);margin-top:.3rem}
.ic-q-fail{font-size:.9rem;font-weight:600;line-height:1.5;color:var(--quote);background:var(--page-2);border:1px solid var(--divider);border-radius:10px;padding:.65rem .85rem;margin-top:.4rem}
.ic-q-fail a{color:var(--quote);font-weight:800;white-space:nowrap}
.ic-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1rem;border-radius:12px;font-family:var(--font);font-size:.95rem;font-weight:800;text-decoration:none;transition:all .15s;width:100%}
.ic-btn-g{background:var(--g);color:var(--on-accent)}
.ic-btn-g:hover{background:var(--g2)}
.ic-btn-o{background:var(--white);color:var(--text);border:1.5px solid var(--bdr)}
.ic-btn-o:hover{border-color:var(--text)}
.ic-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bdr)}
.ic-q-where{font-size:.8rem;color:var(--sub);margin-top:.6rem;line-height:1.45}

.ic-fine{font-size:.68rem;color:var(--muted);text-align:center;margin-top:.7rem;line-height:1.5}
.ic-restart{display:block;margin:.6rem auto 0;background:none;border:none;color:var(--g);font-family:var(--font);font-size:.8rem;font-weight:700;cursor:pointer;padding:.5rem}

/* Lock this price */
.ic-lockform{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bdr);text-align:left}
.ic-lock-lbl{display:block;font-size:.74rem;font-weight:700;color:var(--sub);margin-bottom:.35rem}
.ic-email{display:block;width:100%;min-height:48px;padding:0 .85rem;border-radius:10px;border:1.5px solid var(--bdr);background:var(--card);color:var(--text);font-family:var(--font);font-size:16px}
.ic-email:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px var(--accent-wash)}
.ic-email:disabled{opacity:.7}
.ic-agree{display:flex;align-items:flex-start;gap:.55rem;margin:.75rem 0 .85rem;font-size:.76rem;line-height:1.45;color:var(--sub);cursor:pointer}
.ic-agree input{width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:var(--g)}
.ic-agree a{color:var(--g);font-weight:700}
.ic-lock-btn{display:block;width:100%;min-height:50px;border-radius:12px;border:none;background:var(--g);color:var(--on-accent);font-family:var(--font);font-size:1rem;font-weight:800;cursor:pointer;transition:background .15s}
.ic-lock-btn:hover{background:var(--g2)}
.ic-lock-btn:disabled{background:var(--muted);cursor:not-allowed}
.ic-lock-btn.is-busy{background:var(--g2);color:var(--on-accent);opacity:1}
.ic-lock-btn.is-busy::before{content:'';display:inline-block;width:15px;height:15px;margin-right:.5rem;vertical-align:-2px;border:2px solid rgba(255,255,255,.45);border-top-color:var(--divider);border-radius:50%;animation:icSpin .7s linear infinite}
@media(prefers-reduced-motion:reduce){.ic-lock-btn.is-busy::before{animation:none}}
.ic-lock-msg{font-size:.78rem;font-weight:600;margin-top:.5rem;min-height:1em}
.ic-lock-msg.err{color:#b91c1c}
.ic-lock-msg.ic-suggest{color:var(--text);font-size:.85rem;line-height:1.5;overflow-wrap:anywhere}
.ic-suggest-yes{background:none;border:none;padding:.7rem .15rem;margin:-.55rem 0;color:var(--g);font-family:var(--font);font-size:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px;cursor:pointer;overflow-wrap:anywhere}
.ic-suggest-keep{display:block;min-height:44px;background:none;border:none;padding:.45rem 0 .1rem;margin:0;color:var(--muted);font-family:var(--font);font-size:.74rem;font-weight:600;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.ic-suggest-yes:focus-visible,.ic-suggest-keep:focus-visible{outline:2px solid var(--g);outline-offset:2px;border-radius:4px}

/* Offer confirmation (after lock, and /offer/<code>) */
.ic-stnum-ok{font-size:.8rem}
.ic-offer{position:relative;background:var(--white);border:1.5px solid var(--bdr);border-radius:16px;padding:1.2rem 1.1rem;box-shadow:0 2px 14px rgba(15,25,35,.05)}
.ic-offer-label{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ic-offer-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;font-size:2.3rem;font-weight:800;letter-spacing:.06em;color:var(--text);line-height:1.15;margin:.1rem 0 .95rem;overflow-wrap:anywhere}
.ic-offer-price{font-size:2.6rem;font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--text);margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--bdr)}
.ic-offer-until{font-size:.85rem;font-weight:700;color:var(--g);margin:.3rem 0 1rem}
.ic-offer-msg{font-size:.9rem;font-weight:700;color:var(--quote);background:var(--page-2);border:1px solid var(--divider);border-radius:10px;padding:.6rem .8rem;margin:0 0 .9rem}
.ic-offer-msg a{color:var(--quote)}
.ic-offer-inactive .ic-specs,.ic-offer-inactive .ic-offer-price,.ic-offer-expired .ic-specs,.ic-offer-expired .ic-offer-price{opacity:.55}
.ic-offer-paid .ic-offer-code,.ic-offer-paid .ic-offer-price{color:var(--muted)}
.ic-badge{position:absolute;top:1rem;right:1rem;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:3px 10px}
.ic-badge-paid{background:var(--divider);color:var(--sub)}
.ic-hours{font-size:.8rem;color:var(--sub);text-align:center;margin-top:.75rem}
.ic-hours a,.ic-save a{color:var(--g);font-weight:700}
.ic-save{font-size:.74rem;color:var(--muted);text-align:center;margin-top:.45rem;overflow-wrap:anywhere}

.ic-field{margin-bottom:.7rem}
.ic-field .ic-email{margin-top:0}
.ic-opt{font-weight:500;color:var(--muted)}
.ic-sent{font-size:.8rem;color:var(--sub);text-align:center;margin-top:.6rem;line-height:1.5;overflow-wrap:anywhere}
.ic-sent.warn{color:#8f1d1d}
.ic-q-valid{font-size:.8rem;font-weight:600;color:var(--g);margin-top:.3rem}
.ic-badge-open{background:var(--accent-wash);color:var(--g)}
.ic-badge-off{background:#fdecec;color:#8f1d1d}
.ic-offer-page{max-width:600px;margin:0 auto}
/* Back row + states */
.ic-back{display:inline-flex;align-items:center;gap:.25rem;padding:0 .7rem;border-radius:8px;border:1.5px solid var(--bdr);background:var(--white);color:var(--sub);font-family:var(--font);font-size:.76rem;font-weight:700;cursor:pointer;min-height:36px;flex-shrink:0;white-space:nowrap}
.ic-back:hover{border-color:var(--text);color:var(--text)}
.ic-state{padding:2.2rem 1.25rem;text-align:center;font-size:.86rem;color:var(--muted);line-height:1.6}
.ic-state a{color:var(--g);font-weight:700}
.ic-spin{display:inline-block;width:22px;height:22px;border:3px solid var(--bdr);border-top-color:var(--g);border-radius:50%;animation:icSpin .8s linear infinite;margin-bottom:.6rem}
@keyframes icSpin{to{transform:rotate(360deg)}}
/* Offer codes stay on one line: they are read out at the counter */
.ic-offer-code{white-space:nowrap;overflow-wrap:normal;font-size:clamp(1.5rem,8.5vw,2.3rem)}