/* ============================================================================
   COMPONENTS — reusable pieces: buttons, chips, cards, forms, tables, badges.
   ========================================================================= */

/* ---- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
     padding:12px 22px;border-radius:11px;font-weight:700;cursor:pointer;border:0;
     font-family:inherit;font-size:var(--t-base);line-height:1.2;
     transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
                border-color var(--dur) var(--ease)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-2);text-decoration:none}
.btn-ghost{background:transparent;border:2px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff;text-decoration:none}
.btn-sm{padding:7px 14px;font-size:var(--t-sm)}
.btn.on{background:var(--red);color:#fff;border-color:var(--red)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
/* Square icon-only button — three word-labelled buttons cannot fit a 4-up card. */
.btn-icon{flex:0 0 auto;width:38px;height:38px;padding:0;font-size:1.05rem}
.btn-icon .btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
                     overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* one card per row on a phone — there is room for words again */
@media(max-width:520px){
  .btn-icon{width:auto;height:auto;padding:7px 14px;font-size:var(--t-sm)}
  .btn-icon .btn-label{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible}
}

/* ---- chips & tags ------------------------------------------------------ */
/* Without an explicit flex row the chips were inline text: a chip could break across two
   lines mid-label, rendering as a pill sliced open at the container edge. */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:#fff;
      border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;
      font-weight:600;font-size:.9rem;color:var(--navy)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip:hover{text-decoration:none;border-color:var(--navy)}
.tag{font-size:var(--t-xs);background:var(--paper-2);color:#41505f;padding:3px 9px;
     border-radius:var(--r-pill);font-weight:600;white-space:nowrap;
     display:inline-flex;align-items:center;gap:4px}
.tag-ok{background:#d6f0e2;color:#0b6447}   /* 5.6:1 on the tint (var(--ok) was 4.1, axe 2026-10-21) */
.tag-copart{background:#fde8e8;color:var(--red-2)}
.tag-iaai{background:#e6f0fb;color:#1662a6}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--red);
          box-shadow:0 0 0 3px rgba(210,59,59,.18);display:inline-block;flex:none}

/* ---- lot card ---------------------------------------------------------- */
.lot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);align-items:stretch}
/* grid/flex items default to min-width:auto — a nowrap meta line then refused to shrink and
   pushed the fourth card past the viewport at 1024–1120px */
.lot-grid>*,.lot-card,.lot-body{min-width:0}
/* Cards are flex columns so the action row sits on the same baseline across a row, however
   many tag chips each lot happens to carry. */
.lot-card{display:flex;flex-direction:column;height:100%;background:#fff;
          border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
          box-shadow:var(--shadow);transition:box-shadow var(--dur) var(--ease),
                                              transform var(--dur) var(--ease)}
.lot-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.lot-imglink{display:block}
.lot-img{position:relative;aspect-ratio:4/3;background:#dbe3ec center/cover no-repeat;
         display:flex;align-items:center;justify-content:center;color:#8b9aab}
.lot-img img{width:100%;height:100%;object-fit:cover;display:block}
.noimg-mark{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);
            color:#93a3b4;font-weight:600;font-size:var(--t-sm)}
.noimg-mark .i{width:26px;height:26px}
.status-badge{position:absolute;top:10px;left:10px;font-size:.68rem;font-weight:800;
              text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;
              border-radius:var(--r-pill);color:#fff}
.s-sold{background:var(--ok)}
.s-live{background:var(--red)}
.s-soon{background:var(--accent)}
.s-buynow{background:#7a5af5}
.src-badge{position:absolute;top:10px;right:10px;font-size:.62rem;font-weight:800;
           padding:4px 8px;border-radius:5px;background:rgba(10,37,64,.85);color:#fff;
           letter-spacing:.03em;line-height:1}
.lot-body{padding:var(--s-4);display:flex;flex-direction:column;flex:1}
.lot-body h3{font-size:var(--t-base);margin:0 0 var(--s-1);line-height:1.25;
             display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
             overflow:hidden;min-height:2.5em}
.lot-imglink,.lot-body h3 a{text-decoration:none;color:inherit}
.lot-body h3 a:hover{color:var(--red)}
.lot-meta{font-size:var(--t-sm);color:var(--muted);margin:0 0 var(--s-2);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lot-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0;min-height:22px}
.lot-tags:empty{display:none}
.lot-priceline{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-3) 0}
.lot-price{font-weight:800;color:var(--navy);font-size:1.25rem;font-variant-numeric:tabular-nums}
.lot-price small{font-size:.6rem;color:var(--muted);font-weight:600;margin-left:3px;
                 text-transform:uppercase;letter-spacing:.04em}
.lot-price.nobids{font-size:var(--t-base);color:var(--muted);font-weight:600}
/* An estimate is not a price: it is set in the muted family so it can never be misread
   as the amount you would pay. */
.lot-price.est{font-size:1.05rem;color:var(--navy);font-weight:700}
.lot-buynow{font-size:.8rem;color:var(--ok);font-weight:700}
.lot-landed{font-size:var(--t-xs);color:var(--navy);background:#eef6f0;border-radius:6px;
            padding:4px 8px;margin:0 0 var(--s-2);display:inline-block;font-weight:700}
.lot-landed span{color:var(--muted);font-weight:400}
.lot-actions{display:flex;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3)}
.lot-actions .lot-details{flex:1 1 auto;text-align:center;white-space:nowrap;min-width:0;
                          overflow:hidden;text-overflow:ellipsis}

/* per-country title import traffic-light — card pill */
.title-check{font-size:var(--t-xs);font-weight:700;border-radius:6px;padding:3px 8px;
             margin:0 0 var(--s-2);display:inline-flex;align-items:center;gap:5px}
.title-check.tc-green{background:#eafaf0;color:var(--ok)}
.title-check.tc-amber{background:#fff4e0;color:#8a5800}   /* 5.5:1 (was #a9700a, 3.8) */
.title-check.tc-red{background:#fde8e8;color:#b33636}

/* deal ribbon */
.deal-wrap{position:relative;display:flex;min-width:0}
.deal-wrap>.lot-card{flex:1}
.deal-ribbon{position:absolute;top:10px;left:10px;z-index:2;background:var(--red);color:#fff;
             font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:14px;
             box-shadow:0 3px 10px rgba(210,59,59,.35)}
/* the ribbon owns the top-left corner here, so the Live/Upcoming pill drops below it */
.deal-wrap .status-badge{top:46px}

/* ---- sold card --------------------------------------------------------- */
.sold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
           gap:var(--s-4);align-items:stretch}
.sold-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
           border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow);color:inherit;
           transition:transform var(--dur) var(--ease)}
.sold-card:hover{transform:translateY(-2px)}
.sold-card-img{position:relative;height:150px;background-size:cover;background-position:center;
               background-color:#e7ecf2}
/* a sold record without a photo used to render as a bare grey box with a price floating in it */
.sold-card-img.noimg{display:flex;align-items:flex-start;justify-content:center;padding-top:34px}
.sold-price{position:absolute;left:10px;bottom:10px;background:var(--ok);color:#fff;
            font-weight:800;font-size:1.05rem;padding:4px 12px;border-radius:16px;
            box-shadow:0 3px 10px rgba(18,128,92,.3)}
.sold-card-img .src-badge{position:absolute;top:10px;right:10px}
.sold-card-body{padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:3px}
.sold-card-body b{color:var(--navy)}

/* ---- forms ------------------------------------------------------------- */
.field{display:grid;gap:5px}
.field>span,.field-label{font-weight:600;font-size:var(--t-sm);color:var(--navy)}
.field-hint{font-size:var(--t-xs);color:var(--muted)}
.input,.lead-form input,.lead-form textarea,.auth-form input,
.calc-form input,.calc-form select,.portal-form input,.portal-form textarea{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;
  font-size:var(--t-base);font-family:inherit;color:var(--ink);background:#fff}
.form-note{margin:0;font-size:.9rem;min-height:1.2em}
.form-note.ok{color:var(--ok)}
.form-note.err{color:var(--red)}

/* ---- tables ------------------------------------------------------------ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{width:100%;border-collapse:collapse;margin:var(--s-1) 0 var(--s-4)}
.spec td{padding:var(--s-2) 0;border-bottom:1px solid var(--line);font-size:.95rem;
         vertical-align:top}
.spec td:first-child{color:var(--muted);width:38%}
.spec td:last-child{font-weight:600;color:var(--navy)}
.calc-table{width:100%;border-collapse:collapse}
.calc-table th{padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--t-xs);
               text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:right}
.calc-table th:first-child{text-align:left}
.calc-table td{padding:7px 0;border-bottom:1px solid #eef2f6;font-size:.95rem}
.calc-table td:last-child{text-align:right;font-weight:700;color:var(--navy)}
.calc-table tr.group td{font-weight:800;color:var(--navy);padding-top:var(--s-3);border-bottom:0}
.calc-table tr.sub td{color:var(--muted)}
.sold-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
            border-radius:var(--r-sm);overflow:hidden}
.sold-table th{background:#f1f5f9;text-align:left;padding:9px 12px;font-size:var(--t-xs);
               color:var(--muted);text-transform:uppercase}
.sold-table td{padding:9px 12px;border-top:1px solid var(--line);font-size:.92rem}
.sold-table td.price{font-weight:800;color:var(--ok)}
.sold-thumb{width:56px;height:42px;object-fit:cover;border-radius:5px}
.sold-photos{display:flex;gap:4px;flex-wrap:wrap}

/* ---- disclosure (FAQ / glossary) --------------------------------------- */
.faq-item{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:var(--s-3);
          background:#fff;box-shadow:var(--shadow-sm)}
.faq-item summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--navy);
                  list-style:none;display:flex;align-items:center;gap:var(--s-3);
                  justify-content:space-between}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
/* drawn chevron, rotated when open — replaces the "+" / "–" glyph pair */
.faq-item summary::after{content:"";flex:none;width:18px;height:18px;
  transition:transform var(--dur) var(--ease);
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e88e5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 9.2 12 15.6l6.4-6.4'/%3E%3C/svg%3E")}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item p{margin:0;padding:0 18px 16px;color:var(--navy);line-height:var(--lh-body)}
.faq-item>div{padding:0 18px 16px}

/* ---- notices & banners -------------------------------------------------- */
.notice{display:flex;gap:var(--s-3);align-items:flex-start;border-radius:var(--r-sm);
        padding:11px 14px;margin:var(--s-3) 0;border:1px solid;font-size:.95rem}
.notice .i{margin-top:.15em}
.notice-green{background:#eafaf0;border-color:#b7e4c7;color:var(--navy)}
.notice-amber{background:#fff4e0;border-color:#f2d9a8;color:var(--navy)}
.notice-red{background:#fde8e8;border-color:#f2c0c0;color:var(--navy)}
.notice-blue{background:#eaf3ff;border-color:#b9d7ff;color:var(--navy)}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);
       padding:var(--s-8);text-align:center;color:var(--muted)}

/* ---- timeline ----------------------------------------------------------- */
.timeline{list-style:none;margin:var(--s-5) 0 0;padding:0;position:relative}
.timeline:before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;
                 background:var(--line)}
.timeline li{position:relative;padding:0 0 22px 46px;min-height:34px}
.tl-dot{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;
        place-items:center;background:#fff;border:2px solid var(--line);z-index:1;
        color:var(--muted)}
.tl-done .tl-dot{border-color:var(--ok);background:#e9f7f0;color:var(--ok)}
.tl-active .tl-dot{border-color:var(--accent);background:#eaf3fc;color:var(--accent);
                   box-shadow:0 0 0 4px rgba(30,136,229,.15)}
.tl-pending{opacity:.55}
.tl-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
        flex-wrap:wrap}
.tl-row b{color:var(--navy)}
.tl-active .tl-row b{color:var(--accent)}
.tl-date{color:var(--muted);font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.tl-note{font-size:.9rem;color:var(--navy);margin-top:3px}
.tl-photos{display:flex;gap:6px;margin-top:var(--s-2);flex-wrap:wrap}
.tl-photos img{width:72px;height:54px;object-fit:cover;border-radius:6px}

/* ---- ticks list --------------------------------------------------------- */
/* The marker is a drawn SVG (data URI), not a "✓" glyph: it keeps a consistent weight across
   platforms and needs no extra markup in every list item. */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.ticks li{padding-left:28px;position:relative;color:#dbe7f5}
.ticks li::before{content:"";position:absolute;left:0;top:.34em;width:16px;height:16px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ad19a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E")}
.ticks.big li{font-size:var(--t-base)}
.ticks.on-light li{color:var(--navy)}
.ticks.on-light li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312805c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E")}

/* ---- compare bar (floating) --------------------------------------------- */
.compare-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:40;
             display:flex;gap:var(--s-3);align-items:center;background:var(--navy);color:#fff;
             padding:9px 14px;border-radius:30px;box-shadow:0 8px 30px rgba(10,37,64,.28)}
.compare-bar[hidden]{display:none}   /* class display must not override the hidden attribute */
.compare-bar b{color:#fff}
.cmp-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.cmp-btn.shake{animation:cmpshake .4s}
@keyframes cmpshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---- misc shared -------------------------------------------------------- */
.step-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);
           gap:var(--s-6)}
.step-grid li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
              padding:var(--s-6);box-shadow:var(--shadow)}
.step-n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
        background:var(--navy);color:#fff;font-weight:800;margin-bottom:var(--s-3)}
.step-grid h3{margin:.2em 0}
.landing-cta{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}
.media-links{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-3)}
.media-links .btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.st-sold{background:var(--ok);color:#fff;font-size:.68rem;font-weight:800;padding:2px 7px;
         border-radius:5px}
.st-live{background:var(--accent);color:#fff;font-size:.68rem;font-weight:800;padding:2px 7px;
         border-radius:5px}
.odo-ok{color:var(--ok);font-weight:600}
.odo-warn{color:var(--red);font-weight:600}

/* ---- saved state -------------------------------------------------------- */
/* The heart is one drawn icon; "saved" fills it instead of swapping ♡ for ♥. */
[data-save-ico].i-fill-on .i{fill:currentColor}
.save-btn.on{background:var(--red);border-color:var(--red);color:#fff}

/* ---- country code badge ------------------------------------------------- */
/* Flag emoji render as two grey letters on Windows and not at all in some fonts. */
.guide-code{display:inline-grid;place-items:center;min-width:44px;height:32px;padding:0 8px;
            border-radius:var(--r-sm);background:var(--navy);color:#fff;font-weight:800;
            font-size:.95rem;letter-spacing:.06em}
.guide-code.sm{min-width:32px;height:22px;font-size:.72rem;background:var(--paper-2);
               color:var(--navy)}