/*
 * Choosebox storefront widget styles.
 *
 * Lifted out of blocks/choosebox.liquid so the theme block and the hosted builder page at
 * /apps/choosebox/build can share one stylesheet instead of drifting apart. Every merchant setting
 * still arrives as a CSS custom property on the .choosebox element itself - accent, text, card
 * background, border, radius, width - so this file is static and cacheable.
 *
 * The block loads it with asset_url. The hosted page cannot: on an app-proxy response asset_url
 * resolves against the THEME, not this extension, so the app serves this same file from its own
 * domain. One source, two delivery paths.
 */
  /* Defaults inherit the store theme: text = theme text, backgrounds = transparent. Accent is a brand default. */
  .choosebox{--cb:#066bfd;--cb-text:inherit;--cb-card-bg:transparent;--cb-border:rgba(128,128,140,.28);--cb-btn-text:#ffffff;--cb-r:14px;--cb-bw:1px;--cb-maxw:980px;font-family:inherit;color:var(--cb-text);max-width:var(--cb-maxw);margin:0 auto}
  .cb-loading{opacity:.6;font-size:14px}
  .cb-head{margin:0 0 18px}
  .cb-head-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .cb-title{font-size:18px;font-weight:800;letter-spacing:-.2px;color:var(--cb-text)}
  .cb-count{font-size:13px;font-weight:700;color:var(--cb)}
  .cb-bar{height:7px;background:color-mix(in srgb,var(--cb) 15%,transparent);border-radius:999px;overflow:hidden;margin:10px 0 8px}
  .cb-bar{position:relative}
  /* The notch marks where the Add button unlocks. Sits above the fill so it stays visible
     once the fill passes it, which is the moment it is confirming. */
  .cb-bar::after{content:"";position:absolute;top:0;bottom:0;left:var(--cb-min,100%);width:2px;
    background:color-mix(in srgb,var(--cb) 55%,#fff);border-radius:2px;z-index:1;pointer-events:none}
  /* No notch on a fixed-count box: the minimum IS the end of the bar. */
  .cb-bar[style*="--cb-min:100%"]::after{display:none}
  /* Once ready the notch is spent: it answers "how far until the button works", and the button
     works. Left in, it reads as a seam splitting the green fill rather than a milestone inside
     it. Hiding it is invisible at the moment of crossing, because at exactly the minimum the
     fill edge and the notch sit on the same pixel. */
  .cb-bar.is-ready::after{display:none}
  .cb-bar span{display:block;height:100%;background:var(--cb);border-radius:999px;transition:width .35s ease,background .25s ease}
  .cb-bar.is-ready span{background:#12805c}
  .cb-hint{font-size:13px;opacity:.65}
  .cb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
  .cb-card{position:relative;border:var(--cb-bw) solid var(--cb-border);border-radius:var(--cb-r);padding:14px;text-align:center;background:var(--cb-card-bg);transition:transform .15s,box-shadow .15s,border-color .15s}
  .cb-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,30,60,.10)}
  .cb-card.is-sel{border-color:var(--cb);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb) 16%,transparent)}
  .cb-media{position:relative;width:100%;height:150px;border-radius:calc(var(--cb-r) - 2px);background:color-mix(in srgb,currentColor 6%,transparent);overflow:hidden;margin-bottom:12px;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box}
  .cb-media img{max-width:100%;max-height:100%;object-fit:contain}
  .cb-badge-q{position:absolute;top:8px;right:8px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--cb);color:var(--cb-btn-text);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .cb-t{font-size:13.5px;font-weight:700;line-height:1.35;height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;color:var(--cb-text)}
  .cb-p{font-size:13px;opacity:.6;margin:2px 0 12px;font-weight:600}
    /* 9%/30% was tuned against a saturated blue. Once the accent follows the theme it is often a
     near-black, and 9% of black is #e8e8e8 - the card buttons read as disabled rather than as
     buttons. Raised so a neutral accent still has presence; a vivid one is barely affected. */
  .cb-addbtn{width:100%;background:color-mix(in srgb,var(--cb) 14%,transparent);color:var(--cb);border:1px solid color-mix(in srgb,var(--cb) 42%,transparent);border-radius:calc(var(--cb-r) - 2px);padding:9px 0;font-size:13.5px;font-weight:800;cursor:pointer;transition:background .15s,color .15s}
  .cb-addbtn:hover:not(:disabled){background:var(--cb);color:var(--cb-btn-text)}
  .cb-addbtn:disabled{opacity:.45;cursor:default}
  .cb-qty{display:flex;align-items:center;justify-content:center;gap:14px}
  .cb-qty button{width:34px;height:34px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--cb) 30%,transparent);background:transparent;color:var(--cb);font-size:18px;font-weight:700;line-height:1;cursor:pointer;transition:background .12s}
  .cb-qty button:hover:not(:disabled){background:color-mix(in srgb,var(--cb) 12%,transparent)}
  .cb-qty button:disabled{opacity:.35;cursor:default}
  .cb-qty span{min-width:18px;font-size:15px;font-weight:800;color:var(--cb-text)}
  .cb-sold{color:#c0322b;font-weight:700;font-size:12.5px;padding:9px 0}
  .cb-sold-card{opacity:.55}
  /* NOT sticky. It was `position:sticky;bottom:0` with `background:var(--cb-card-bg)`, and that
     variable defaults to TRANSPARENT so the widget inherits the merchant's theme. A transparent
     sticky bar pins itself over the grid and the product cards show straight through it - the count,
     the divider line and the Add box to cart button all sat on top of the second row of products.
     It only shows up once a box has more than one row, which is why it survived: the demo box had
     three products in a single row.
     Do not restore sticky without an OPAQUE background, and there is no safe way to pick one here:
     the widget deliberately inherits the theme and cannot know whether it is light or dark. If the
     always-visible button is wanted back, it needs its own colour setting in the schema first. */
  .cb-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding:14px 4px;border-top:1px solid var(--cb-border)}
  .cb-foot-info{font-size:14px}
  .cb-save{background:color-mix(in srgb,#1a9d5a 16%,transparent);color:#158a4e;font-weight:800;font-size:13px;padding:6px 12px;border-radius:999px}
  .cb-need{opacity:.7;font-weight:700;font-size:13.5px}
  .cb-add{background:var(--cb);color:var(--cb-btn-text);border:none;border-radius:calc(var(--cb-r) - 2px);padding:13px 26px;font-weight:800;font-size:15px;cursor:pointer;transition:background .15s,transform .1s;box-shadow:0 4px 14px color-mix(in srgb,var(--cb) 30%,transparent)}
  .cb-add:hover:not(:disabled){background:color-mix(in srgb,var(--cb) 82%,#000)}
  .cb-add:active:not(:disabled){transform:translateY(1px)}
  .cb-add:disabled{opacity:.5;cursor:default;box-shadow:none}
  .cb-badge{text-align:center;font-size:11px;opacity:.55;margin-top:14px}
  .cb-badge a{color:inherit}
  .cb-variant{font-size:11.5px;color:var(--cb);font-weight:700;margin:-6px 0 8px;opacity:.9}
  .cb-modal{position:fixed;inset:0;background:rgba(20,16,40,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
  .cb-modal-card{background:#fff;color:#1c1440;border-radius:16px;max-width:360px;width:100%;padding:18px 18px 20px;box-shadow:0 24px 60px rgba(20,16,40,.4)}
  .cb-modal-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:16px;gap:12px}
  .cb-modal-x{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#8a8aa0;padding:0 2px}
  .cb-modal-sub{font-size:12.5px;color:#8a8aa0;margin:2px 0 14px}
  .cb-modal-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
  .cb-var{display:flex;align-items:center;gap:12px;border:1.5px solid var(--cb-border);border-radius:12px;padding:10px 12px;background:#fff;cursor:default;font-size:14px;font-weight:700;color:inherit;text-align:left;transition:border-color .12s,background .12s}
  .cb-var-img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:color-mix(in srgb,var(--cb) 8%,#f2f5fa)}
  .cb-var-t{flex:1 1 auto;min-width:0}
  .cb-var:hover{border-color:var(--cb);background:color-mix(in srgb,var(--cb) 8%,transparent)}
  .cb-var-p{color:var(--cb);font-weight:800;white-space:nowrap}
  .cb-var-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  .cb-var-p2{font-size:12px;color:var(--cb);font-weight:800}
  .cb-var-qty{display:flex;align-items:center;gap:9px;flex:0 0 auto}
  .cb-var-qty button{width:30px;height:30px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--cb) 32%,transparent);background:transparent;color:var(--cb);font-size:17px;font-weight:800;line-height:1;cursor:pointer}
  .cb-var-qty button:disabled{opacity:.3;cursor:default}
  .cb-var-qty>span{min-width:16px;text-align:center;font-weight:800;font-size:14px}
  .cb-modal-done{margin-top:14px;width:100%;background:var(--cb);color:var(--cb-btn-text);border:none;border-radius:12px;padding:12px;font-size:14px;font-weight:800;cursor:pointer}
  .cb-picked{display:flex;flex-direction:column;gap:3px;margin:2px 0 10px}
  /* The label and the quantity must never touch. With space-between and no gap, a variant title
     long enough to fill the row leaves the quantity nowhere to go: "Citrus and Ginger / 8" plus
     "x1" rendered as "8x1", which reads as 81. Merchant option values are often bare numbers, so
     the collision lands on a digit more often than not. gap keeps them apart; letting the label
     shrink and wrap inside its own span keeps the quantity anchored right. */
  .cb-picked-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;font-weight:700;color:var(--cb-text);opacity:.85}
  .cb-picked-row>span:first-child{min-width:0;overflow-wrap:anywhere}
  .cb-picked-row>span:last-child{flex:0 0 auto;white-space:nowrap}
  @media(max-width:600px){.cb-grid{grid-template-columns:repeat(2,1fr);gap:12px}.cb-media{height:120px}.cb-add{padding:12px 18px;font-size:14px}}

  /* Gift message. Sits between the grid and the footer so it reads as the last thing to fill in
     before adding the box, not as a field buried above the products. Colours come from the same
     variables as everything else, so it follows the theme and any merchant override with no
     separate settings of its own. */
  .cb-gift{margin:22px 0 0;padding:16px;border:var(--cb-bw) solid var(--cb-border);border-radius:var(--cb-r);background:var(--cb-card-bg)}
  .cb-gift-l{display:block;font-size:13.5px;font-weight:700;margin-bottom:8px;color:var(--cb-text)}
  .cb-gift-req{font-weight:600;opacity:.6}
  .cb-gift-t{width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.45;color:var(--cb-text);background:transparent;border:1px solid var(--cb-border);border-radius:calc(var(--cb-r) - 4px);padding:10px 12px;resize:vertical;min-height:72px}
  .cb-gift-t:focus{outline:none;border-color:var(--cb);box-shadow:0 0 0 3px color-mix(in srgb,var(--cb) 16%,transparent)}
  .cb-gift-t::placeholder{color:currentColor;opacity:.45}
  .cb-gift-c{margin-top:6px;font-size:11.5px;text-align:right;color:var(--cb-text);opacity:.6;font-variant-numeric:tabular-nums}

  /* Steps. Only rendered when a box defines them; a box without steps has none of this in its DOM.
     The row is a progress trail rather than a tab bar: a step you have not reached is not clickable,
     because jumping ahead past an unmet minimum is the one move that can leave a box unfinishable. */
  .cb-steps{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
  .cb-stepdot{display:flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:700;
    color:var(--cb-text);background:transparent;border:1px solid var(--cb-border);
    border-radius:999px;padding:6px 13px 6px 7px;cursor:pointer;opacity:.55;
    transition:opacity .15s,border-color .15s,background .15s}
  .cb-stepdot>span{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
    border-radius:50%;background:color-mix(in srgb,var(--cb) 14%,transparent);color:var(--cb);
    font-size:11.5px;font-weight:800;flex:0 0 auto}
  .cb-stepdot:disabled{cursor:default}
  .cb-stepdot.is-done{opacity:.85}
  .cb-stepdot.is-now{opacity:1;border-color:var(--cb);background:color-mix(in srgb,var(--cb) 8%,transparent)}
  .cb-stepdot.is-now>span{background:var(--cb);color:var(--cb-btn-text)}
  .cb-stepnote{font-size:12.5px;opacity:.75;margin-bottom:2px}
  .cb-stepback{margin-top:10px}
  .cb-stepback button{font:inherit;font-size:13px;font-weight:700;color:var(--cb);background:none;
    border:none;padding:6px 0;cursor:pointer}
  @media(max-width:600px){.cb-stepdot{padding:5px 10px 5px 5px;font-size:12px}}