/* ============================================================================
   Watch Selling Wizard — 4-step seller form.
   Used by Views/Shared/_Form_WatchSellingWizardPartial.cshtml (renders on
   /selling-my-rolex). Previously inlined at the top of the partial.

   Locally-scoped design tokens live under .bq-wizard so they don't leak.
   ============================================================================ */

  .bq-wizard{
    /* Brand green is #028565 - the site's .highlight / accent token and the same
       green used across the emails. The wizard previously invented its own
       #0c5c45, a third green that matched neither the brand nor the nav. */
    --bq-green:#028565;
    --bq-green-700:#027156;
    --bq-green-900:#015a45;
    --bq-gold:#b4924f;
    --bq-gold-soft:#d9c08a;
    --bq-ink:#1b211e;
    --bq-muted:#6f766f;
    --bq-line:#e7e4da;
    --bq-line-soft:#efece4;
    --bq-card:#ffffff;
    --bq-ring:rgba(2,133,101,.16);
    --bq-radius:14px;
    --bq-radius-sm:10px;
    --bq-shadow:0 1px 2px rgba(27,33,30,.04), 0 12px 30px -18px rgba(27,33,30,.22);
    --bq-shadow-lift:0 2px 4px rgba(27,33,30,.05), 0 22px 48px -22px rgba(2,133,101,.32);
    color:var(--bq-ink);
  }

  .bq-wizard .bq-eyebrow{
    letter-spacing:.24em; text-transform:uppercase; font-size:.66rem;
    color:var(--bq-gold); font-weight:600;
  }
  .bq-wizard .bq-h1{
    font-family:'Titillium Web', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight:600;
    font-size:clamp(1.6rem, 4vw, 2.2rem); letter-spacing:-.01em; line-height:1.12; margin:.35rem 0 0;
  }
  .bq-wizard .bq-sub{ color:var(--bq-muted); font-size:.95rem; margin-top:.5rem; }

  /* stepper */
  .bq-wizard .bq-steps{ list-style:none; display:flex; padding:0; margin:0; gap:0; }
  .bq-wizard .bq-steps li{ flex:1 1 0; position:relative; text-align:center; padding-top:34px; min-width:0; }
  .bq-wizard .bq-steps li::before{
    content:""; position:absolute; top:13px; left:-50%; width:100%; height:2px;
    background:var(--bq-line); z-index:0;
  }
  .bq-wizard .bq-steps li:first-child::before{ display:none; }
  .bq-wizard .bq-dot{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:28px; height:28px; border-radius:50%;
    background:var(--bq-card); border:2px solid var(--bq-line);
    display:flex; align-items:center; justify-content:center;
    font-size:.74rem; font-weight:600; color:var(--bq-muted); z-index:1; transition:all .35s ease;
  }
  .bq-wizard .bq-dot .tick{ display:none; width:13px; height:13px; }
  .bq-wizard .bq-step-label{
    font-size:.7rem; letter-spacing:.04em; color:var(--bq-muted);
    text-transform:uppercase; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .35s ease;
  }
  .bq-wizard .bq-steps li.active .bq-dot{
    border-color:var(--bq-gold); color:var(--bq-green-900); box-shadow:0 0 0 4px rgba(180,146,79,.16);
  }
  .bq-wizard .bq-steps li.active .bq-step-label{ color:var(--bq-green); }
  .bq-wizard .bq-steps li.done .bq-dot{ background:var(--bq-green); border-color:var(--bq-green); }
  .bq-wizard .bq-steps li.done .bq-dot .num{ display:none; }
  .bq-wizard .bq-steps li.done .bq-dot .tick{ display:block; }
  .bq-wizard .bq-steps li.done::before{ background:var(--bq-green); }
  .bq-wizard .bq-step-counter{ font-size:.72rem; color:var(--bq-muted); letter-spacing:.04em; }
  .bq-wizard .bq-step-counter b{ color:var(--bq-green); font-weight:600; }

  /* card */
  .bq-wizard .bq-card{
    background:var(--bq-card); border:1px solid var(--bq-line);
    border-radius:var(--bq-radius); box-shadow:var(--bq-shadow); padding:clamp(1.2rem, 3.5vw, 2.1rem);
  }
  .bq-wizard .bq-q{ font-family:'Titillium Web', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight:600; font-size:1.4rem; letter-spacing:-.005em; margin:0; }
  .bq-wizard .bq-q-hint{ color:var(--bq-muted); font-size:.9rem; margin-top:.25rem; }

  /* step transitions */
  .bq-wizard .bq-step{ display:none; }
  .bq-wizard .bq-step.show{ display:block; animation:bqIn .42s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes bqIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

  /* selectable tiles */
  .bq-wizard .bq-tile{
    width:100%; height:100%; background:var(--bq-card); border:1.5px solid var(--bq-line);
    border-radius:var(--bq-radius-sm); padding:1.05rem .8rem; cursor:pointer; text-align:center;
    transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.5rem; min-height:118px;
  }
  .bq-wizard .bq-tile:hover{ transform:translateY(-3px); box-shadow:var(--bq-shadow-lift); border-color:var(--bq-gold-soft); }
  .bq-wizard .bq-tile:focus-visible{ outline:none; border-color:var(--bq-gold); box-shadow:0 0 0 4px rgba(180,146,79,.22); }
  .bq-wizard .bq-tile.is-selected{ border-color:var(--bq-green); box-shadow:0 0 0 1.5px var(--bq-green), var(--bq-shadow-lift); }
  .bq-wizard .bq-tile .bq-check{
    position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%;
    background:var(--bq-green); color:#fff; display:none; align-items:center; justify-content:center;
  }
  .bq-wizard .bq-tile.is-selected .bq-check{ display:flex; }
  .bq-wizard .bq-tile-img{ width:74px; height:74px; object-fit:contain; }
  .bq-wizard .bq-tile-glyph{ color:var(--bq-green); opacity:.85; }
  .bq-wizard .bq-brand-name{ font-family:'Titillium Web', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight:600; font-size:1.02rem; color:var(--bq-ink); }
  .bq-wizard .bq-model .bq-tile{ min-height:170px; padding:.9rem .6rem; gap:.35rem; }
  .bq-wizard .bq-model-name{ font-family:'Titillium Web', 'Segoe UI', Tahoma, Arial, sans-serif; font-weight:600; font-size:.92rem; line-height:1.15; }

  /* choice chips */
  .bq-wizard .bq-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
  .bq-wizard .bq-chip{
    border:1.5px solid var(--bq-line); background:var(--bq-card); border-radius:999px;
    padding:.5rem 1rem; font-size:.88rem; font-weight:500; cursor:pointer; transition:all .16s ease; color:var(--bq-ink);
  }
  .bq-wizard .bq-chip:hover{ border-color:var(--bq-gold-soft); }
  .bq-wizard .bq-chip:focus-visible{ outline:none; border-color:var(--bq-gold); box-shadow:0 0 0 3px rgba(180,146,79,.22); }
  .bq-wizard .bq-chip.is-selected{ background:var(--bq-green); border-color:var(--bq-green); color:#fff; }

  /* inputs */
  .bq-wizard .bq-label{ font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--bq-ink); margin-bottom:.3rem; }
  .bq-wizard .bq-label .opt{ color:var(--bq-muted); font-weight:400; }
  .bq-wizard .form-control, .bq-wizard .form-select{
    border:1.5px solid var(--bq-line); border-radius:var(--bq-radius-sm);
    padding:.7rem .85rem; font-size:.95rem; color:var(--bq-ink); background-color:#fff;
  }
  .bq-wizard .form-control:focus, .bq-wizard .form-select:focus{ border-color:var(--bq-green); box-shadow:0 0 0 4px var(--bq-ring); }
  .bq-wizard .form-floating > label{ color:var(--bq-muted); padding:.7rem .85rem; }
  .bq-wizard .input-prefix{
    display:flex; align-items:stretch; border:1.5px solid var(--bq-line);
    border-radius:var(--bq-radius-sm); overflow:hidden;
  }
  .bq-wizard .input-prefix:focus-within{ border-color:var(--bq-green); box-shadow:0 0 0 4px var(--bq-ring); }
  .bq-wizard .input-prefix .pfx{
    display:flex; align-items:center; padding:0 .85rem; background:var(--bq-line-soft);
    color:var(--bq-muted); font-weight:600; font-size:.95rem;
  }
  .bq-wizard .input-prefix .form-control{ border:0; box-shadow:none !important; }
  .bq-wizard .bq-section-label{
    font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
    color:var(--bq-gold); margin-bottom:.7rem; display:flex; align-items:center; gap:.6rem;
  }
  .bq-wizard .bq-section-label::after{ content:""; flex:1; height:1px; background:var(--bq-line); }
  .bq-wizard .bq-err{ color:#b3261e; font-size:.78rem; margin-top:.3rem; display:none; }
  .bq-wizard .bq-err.show{ display:block; }
  .bq-wizard .field-invalid .form-control, .bq-wizard .field-invalid .form-select{ border-color:#d6453b; }

  /* radio list */
  .bq-wizard .bq-radio{
    display:flex; gap:.7rem; align-items:flex-start; border:1.5px solid var(--bq-line);
    border-radius:var(--bq-radius-sm); padding:.7rem .85rem; cursor:pointer; transition:all .16s ease; font-size:.9rem;
  }
  .bq-wizard .bq-radio:hover{ border-color:var(--bq-gold-soft); }
  .bq-wizard .bq-radio input{ margin-top:.18rem; accent-color:var(--bq-green); }
  .bq-wizard .bq-radio.is-selected{ border-color:var(--bq-green); background:#f4f9f6; }

  /* selected-context pill */
  .bq-wizard .bq-context{
    display:inline-flex; align-items:center; gap:.55rem; background:#f4f9f6; border:1px solid #cfe4da;
    color:var(--bq-green-900); border-radius:999px; padding:.38rem .85rem; font-size:.82rem; font-weight:500;
  }
  .bq-wizard .bq-context button{ border:0; background:none; color:var(--bq-muted); padding:0 0 0 .2rem; font-size:.9rem; cursor:pointer; }
  .bq-wizard .bq-context button:hover{ color:var(--bq-green); }

  /* buttons */
  .bq-wizard .btn-bq{
    background:var(--bq-green); border:1.5px solid var(--bq-green); color:#fff;
    border-radius:var(--bq-radius-sm); padding:.72rem 1.5rem; font-weight:600; font-size:.95rem; transition:all .18s ease;
  }
  .bq-wizard .btn-bq:hover{ background:var(--bq-green-700); border-color:var(--bq-green-700); color:#fff; transform:translateY(-1px); }
  .bq-wizard .btn-bq:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(180,146,79,.3); }
  .bq-wizard .btn-bq-ghost{
    background:transparent; border:1.5px solid var(--bq-line); color:var(--bq-ink);
    border-radius:var(--bq-radius-sm); padding:.72rem 1.3rem; font-weight:600; font-size:.95rem; transition:all .18s ease;
  }
  .bq-wizard .btn-bq-ghost:hover{ border-color:var(--bq-green); color:var(--bq-green); }
  .bq-wizard .form-check-input:checked{ background-color:var(--bq-green); border-color:var(--bq-green); }
  .bq-wizard .form-check-input:focus{ border-color:var(--bq-green); box-shadow:0 0 0 .2rem var(--bq-ring); }

  /* dropzone */
  .bq-wizard .bq-drop{
    border:1.5px dashed var(--bq-line); border-radius:var(--bq-radius-sm); padding:1.3rem; text-align:center;
    color:var(--bq-muted); cursor:pointer; transition:all .18s ease; background:#fcfbf8;
  }
  .bq-wizard .bq-drop:hover{ border-color:var(--bq-gold); color:var(--bq-green); background:#fbfaf4; }

  /* success */
  .bq-wizard .bq-success-ring{
    width:64px; height:64px; border-radius:50%; background:#f1f8f4; border:2px solid var(--bq-green);
    display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; color:var(--bq-green);
  }

  .bq-chips a.highlight {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      text-decoration: underline; /* if desired */
  }

  .bq-chips a.highlight svg {
      width: 0.9em;
      height: 0.9em;
      flex-shrink: 0;
      fill: currentColor;
  }

  @media (prefers-reduced-motion: reduce){ .bq-wizard *{ animation:none !important; transition:none !important; } }

  /* ---- Mobile ----
     The card sits inside .container (~12px each side) and adds its own padding on
     top, so on a phone the content column was doubly-inset and felt narrow. Pull
     the card padding right back, tighten the tile gutters and shrink the tiles so
     the two-up grid uses the width instead of floating in whitespace.

     Step labels are hidden below Bootstrap's sm breakpoint (576px): between 520
     and 576 they used to show and truncate to "YOUR DETAI…". The numbered dots
     plus the "Step X of 4" counter and the question heading carry the context. */
  @media (max-width:575.98px){
    .bq-wizard .bq-card{ padding:1.05rem .9rem; border-radius:12px; }
    .bq-wizard .bq-step-label{ display:none; }
    .bq-wizard .bq-steps li{ padding-top:30px; }

    /* tighter gutters for the brand/model tile grids (Bootstrap .g-3 = 1rem) */
    .bq-wizard .row.g-3{ --bs-gutter-x:.55rem; --bs-gutter-y:.55rem; }

    .bq-wizard .bq-tile{ min-height:102px; padding:.8rem .5rem; gap:.4rem; }
    .bq-wizard .bq-tile-img{ width:60px; height:60px; }
    .bq-wizard .bq-brand-name{ font-size:.92rem; }
    .bq-wizard .bq-model .bq-tile{ min-height:150px; padding:.75rem .5rem; }
    .bq-wizard .bq-model .bq-tile-img{ width:78px; height:78px; }
    .bq-wizard .bq-model-name{ font-size:.86rem; }

    /* let long chip rows (Box & papers etc.) breathe without overflowing */
    .bq-wizard .bq-chip{ padding:.5rem .85rem; }
  }