/* =====================================================================================
   Auction Site theme: marketplace layout, orange accent. Layered on Bootstrap 5.3; overrides
   its CSS variables for light and dark mode (data-bs-theme on <html>, set from the user's
   Appearance setting or their device), then styles the app's own components.
   Colour contrast checked against WCAG AA (see notes on --app-primary*).
   ===================================================================================== */

/* ----- design tokens ----------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --app-bg: #f5f5f4;
  --app-surface: #ffffff;
  --app-surface-2: #f4f4f3;
  --app-text: #1c1917;
  --app-muted: #6b6560;
  --app-border: #e7e5e4;
  --app-border-strong: #d6d3d1;
  --app-primary: #cf4a0c;        /* buttons: white text 4.5:1 */
  --app-primary-hover: #b33f09;
  --app-primary-text: #c2410c;   /* links / small orange text: 5.2:1 on white */
  --app-primary-vivid: #ea580c;  /* big prices, bars, decoration (large text 3:1) */
  --app-primary-soft: #fff1e8;
  --app-primary-rgb: 207, 74, 12;
  --app-on-primary: #ffffff;
  --app-live: #16a34a;
  --app-soon: #b45309;
  --app-urgent: #dc2626;
  --app-shadow-sm: 0 1px 2px rgba(28, 25, 23, .05);
  --app-shadow: 0 1px 3px rgba(28, 25, 23, .06), 0 10px 24px -14px rgba(28, 25, 23, .22);
  --app-shadow-lg: 0 2px 6px rgba(28, 25, 23, .06), 0 22px 44px -18px rgba(28, 25, 23, .32);
}

[data-bs-theme="dark"] {
  --app-bg: #0c0a09;
  --app-surface: #171412;
  --app-surface-2: #1f1b18;
  --app-text: #f5f5f4;
  --app-muted: #a8a29e;
  --app-border: #2c2724;
  --app-border-strong: #3d3632;
  --app-primary: #fb923c;        /* dark text on it: 7.7:1 */
  --app-primary-hover: #fdba74;
  --app-primary-text: #fb923c;
  --app-primary-vivid: #fb923c;
  --app-primary-soft: rgba(251, 146, 60, .14);
  --app-primary-rgb: 251, 146, 60;
  --app-on-primary: #1c1917;
  --app-live: #4ade80;
  --app-soon: #fbbf24;
  --app-urgent: #f87171;
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --app-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 10px 24px -14px rgba(0, 0, 0, .7);
  --app-shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 22px 44px -18px rgba(0, 0, 0, .8);
}

/* ----- map tokens onto Bootstrap -------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-emphasis-color: var(--app-text);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-bg: var(--app-surface-2);
  --bs-secondary-bg: var(--app-surface-2);
  --bs-border-color: var(--app-border);
  --bs-border-color-translucent: var(--app-border);
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-link-color: var(--app-primary-text);
  --bs-link-color-rgb: var(--app-primary-rgb);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
  --bs-card-bg: var(--app-surface);
  --bs-focus-ring-color: rgba(var(--app-primary-rgb), .3);
}

/* 16px everywhere: form text below 16px makes iPhones zoom in when a field is tapped. */
html { font-size: 16px; }

body {
  background: var(--app-bg);
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 800; letter-spacing: -.01em; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { color: var(--app-primary-text); }
.text-muted, .form-text { color: var(--app-muted) !important; }
.text-orange { color: var(--app-primary-vivid) !important; }

/* ----- buttons: pills ------------------------------------------------------------------ */
.btn { --bs-btn-font-weight: 700; --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.25rem; }
.btn-sm { --bs-btn-border-radius: 999px; --bs-btn-padding-x: .85rem; }
.btn-lg { --bs-btn-padding-x: 1.75rem; }
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
  --bs-btn-color: var(--app-on-primary);
  --bs-btn-hover-color: var(--app-on-primary);
  --bs-btn-active-color: var(--app-on-primary);
  --bs-btn-disabled-color: var(--app-on-primary);
  box-shadow: 0 6px 16px -8px rgba(var(--app-primary-rgb), .7);
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary-text);
  --bs-btn-border-color: var(--app-primary-text);
  --bs-btn-hover-bg: var(--app-primary-soft);
  --bs-btn-hover-color: var(--app-primary-text);
  --bs-btn-hover-border-color: var(--app-primary-text);
  --bs-btn-active-bg: var(--app-primary-soft);
  --bs-btn-active-color: var(--app-primary-text);
  --bs-btn-active-border-color: var(--app-primary-text);
  border-width: 1.5px;
}
.btn-outline-secondary {
  --bs-btn-color: var(--app-text);
  --bs-btn-border-color: var(--app-border-strong);
  --bs-btn-bg: var(--app-surface);
  --bs-btn-hover-bg: var(--app-surface-2);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-border-color: var(--app-border-strong);
  --bs-btn-active-bg: var(--app-surface-2);
  --bs-btn-active-color: var(--app-text);
}
.btn-dark-outline { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .55); --bs-btn-bg: rgba(0, 0, 0, .35); --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; border-width: 1.5px; backdrop-filter: blur(6px); }
.btn-link { --bs-btn-color: var(--app-primary-text); --bs-btn-hover-color: var(--app-primary-hover); text-decoration: none; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .25) !important;
}

/* ----- forms --------------------------------------------------------------------------- */
.form-control, .form-select, .input-group-text {
  background-color: var(--app-surface);
  border-color: var(--app-border-strong);
  border-radius: .7rem;
  padding: .55rem .85rem;
}
.form-control:focus, .form-select:focus { border-color: var(--app-primary); background-color: var(--app-surface); }
.input-group-text { background: var(--app-surface-2); color: var(--app-muted); }
.form-label { font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
fieldset.border { border-color: var(--app-border) !important; background: var(--app-surface); border-radius: 1rem !important; }
fieldset legend { font-size: .95rem; font-weight: 800; }

/* ----- surfaces ------------------------------------------------------------------------ */
.card {
  --bs-card-border-color: var(--app-border);
  --bs-card-cap-bg: var(--app-surface-2);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: calc(1rem - 1px);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}
.card-header { font-weight: 700; }
.list-group { --bs-list-group-bg: var(--app-surface); --bs-list-group-border-color: var(--app-border); --bs-list-group-border-radius: .875rem; }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--app-border); }
.table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); font-weight: 800; border-bottom-width: 1px; }
.table-panel { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; box-shadow: var(--app-shadow-sm); overflow: hidden; }
.table-panel .table { margin: 0; }
.table-panel .table td, .table-panel .table th { padding: .75rem 1rem; }
.card > .card-body > .table:last-child { margin-bottom: 0; }
.alert { border-radius: .875rem; }
.badge { font-weight: 800; letter-spacing: .02em; border-radius: 999px; padding: .4em .75em; }
.breadcrumb { font-size: .85rem; --bs-breadcrumb-divider-color: var(--app-muted); }
.breadcrumb-item.active { color: var(--app-muted); }
.dropdown-menu {
  --bs-dropdown-bg: var(--app-surface); --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-link-hover-bg: var(--app-surface-2); --bs-dropdown-link-active-bg: var(--app-primary); --bs-dropdown-link-active-color: var(--app-on-primary);
  border-radius: .875rem; box-shadow: var(--app-shadow-lg); padding: .4rem;
}
.dropdown-item { border-radius: .55rem; padding: .5rem .75rem; display: flex; align-items: center; gap: .6rem; }
.dropdown-item .bi { color: var(--app-muted); }
details > summary { cursor: pointer; color: var(--app-primary-text); }
.meta-pill {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600;
  padding: .32rem .75rem; border-radius: 999px; background: var(--app-surface-2); color: var(--app-text); border: 1px solid var(--app-border);
}
.meta-pill .bi { color: var(--app-muted); }

/* ----- header: utility bar, brand + search, quick links ---------------------------------- */
.site-header { background: var(--app-surface); border-bottom: 1px solid var(--app-border); position: relative; z-index: 1030; }
.utility-bar { font-size: .8rem; border-bottom: 1px solid var(--app-border); }
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 34px; }
.utility-bar a { color: var(--app-text); }
.utility-bar .greeting a { color: var(--app-primary-text); text-decoration: underline; text-underline-offset: 2px; }
.utility-links { display: flex; gap: 1.1rem; }
.header-main { display: flex; align-items: center; gap: 1.25rem; padding: .9rem 0; }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 900; font-size: 1.35rem; letter-spacing: -.02em; color: var(--app-text); white-space: nowrap; }
.brand:hover { text-decoration: none; color: var(--app-text); }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--app-primary-vivid); color: #fff; flex-shrink: 0; }
.header-search { flex: 1; position: relative; max-width: 860px; }
.header-search .form-control { height: 48px; border: 2px solid var(--app-text); border-radius: 999px; padding-left: 2.8rem; padding-right: 7.5rem; }
.header-search .form-control:focus { border-color: var(--app-primary); }
.header-search .bi-search { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--app-muted); }
.header-search .btn { position: absolute; right: 5px; top: 5px; bottom: 5px; padding: 0 1.4rem; box-shadow: none; }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); position: relative;
}
.icon-btn:hover { background: var(--app-surface-2); text-decoration: none; color: var(--app-text); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--app-primary-soft); color: var(--app-primary-text); font-weight: 900; }
.cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  font-size: .7rem; font-weight: 800; background: var(--app-primary-vivid); color: #fff; display: grid; place-items: center;
}
.quick-nav { border-top: 1px solid var(--app-border); }
.quick-nav .container { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.quick-nav .container::-webkit-scrollbar { display: none; }
.quick-nav a { padding: .65rem 0; color: var(--app-text); font-size: .9rem; white-space: nowrap; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: .35rem; }
.quick-nav a:hover { text-decoration: none; color: var(--app-primary-text); }
.quick-nav a.active { font-weight: 800; border-bottom-color: var(--app-primary-vivid); }
.quick-nav .staff-link { color: var(--app-primary-text); font-weight: 700; }

/* ----- page chrome ----------------------------------------------------------------------- */
.page-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 1.25rem; }
.page-header h1 { margin: 0; font-size: 1.85rem; }
main > h1:first-child, main > .h3:first-child, main > .h4:first-child, main > .h5:first-child, main > .page-header:first-child { margin-top: 1.75rem; }
.eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--app-primary-text); }
.section-title { display: flex; align-items: center; gap: .6rem; font-size: 1.4rem; margin: 2.5rem 0 1.1rem; }
.section-title .count { font-size: .8rem; font-weight: 700; color: var(--app-muted); background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 999px; padding: .1rem .6rem; }
.section-title .see-all { margin-left: auto; font-size: .9rem; font-weight: 700; padding: .55rem 0; }
.stats-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1.25rem; box-shadow: var(--app-shadow-sm); }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--app-muted); border: 1px solid var(--app-border); border-radius: 1rem; background: var(--app-surface); }
.empty-state .bi { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* ----- footer ------------------------------------------------------------------------------ */
.site-footer { background: var(--app-surface); border-top: 1px solid var(--app-border); margin-top: 4rem; padding: 3rem 0 1.5rem; font-size: .9rem; }
.site-footer h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer a { color: var(--app-muted); }
.site-footer a:hover { color: var(--app-primary-text); }
.site-footer .legal { border-top: 1px solid var(--app-border); margin-top: 2.5rem; padding-top: 1.25rem; color: var(--app-muted); font-size: .8rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }

/* ----- featured carousel (home) -------------------------------------------------------------- */
.featured { margin-top: 1.5rem; border-radius: 1.25rem; overflow: hidden; box-shadow: var(--app-shadow-lg); background: #1c1917; }
.featured .carousel-item { position: relative; min-height: 420px; }
.featured-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 10, 9, .92) 0%, rgba(12, 10, 9, .72) 45%, rgba(12, 10, 9, .15) 100%); }
.featured-body { position: relative; z-index: 1; color: #fff; padding: 3rem 4.5rem 4rem; max-width: 640px; }
.featured-body h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 900; margin: .9rem 0 .35rem; }
.featured-body .sub { color: rgba(255, 255, 255, .78); margin-bottom: 1.5rem; }
.featured-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.featured-stats .label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); font-weight: 800; }
.featured-stats .bid { font-size: 2.1rem; font-weight: 900; color: #fb923c; line-height: 1.1; font-variant-numeric: tabular-nums; }
.featured-stats .clock { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.featured-stats .small { color: rgba(255, 255, 255, .7); }
.badge-featured { background: var(--app-primary-vivid); color: #fff; }
.badge-live { background: rgba(220, 38, 38, .18); color: #fecaca; border: 1px solid rgba(248, 113, 113, .5); }
.badge-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-right: .35rem; vertical-align: 1px; animation: blink 1.4s ease-in-out infinite; }
.featured .carousel-control-prev, .featured .carousel-control-next { width: 44px; height: 44px; top: 50%; transform: translateY(-50%); margin: 0 1rem; border-radius: 50%; background: rgba(0, 0, 0, .45); opacity: 1; }
.featured .carousel-control-prev-icon, .featured .carousel-control-next-icon { width: 1.1rem; height: 1.1rem; }
.featured .carousel-indicators { margin-bottom: 1.1rem; }
/* Small dots, but each has a 32px tap area (transparent border, dot drawn by the padding box). */
.featured .carousel-indicators [data-bs-target] { box-sizing: border-box; width: 32px; height: 32px; padding: 0; margin: 0; border: 12px solid transparent; border-radius: 999px; background-clip: padding-box; opacity: .55; }
.featured .carousel-indicators .active { width: 50px; opacity: 1; background-color: var(--app-primary-vivid); }
.featured::after { content: ""; display: block; height: 4px; background: var(--app-primary-vivid); }
@keyframes blink { 50% { opacity: .35; } }

/* ----- circles (auction houses), stats, steps, call to action --------------------------------- */
.circle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.25rem; }
.circle-tile { text-align: center; color: var(--app-text); font-weight: 700; font-size: .9rem; }
.circle-tile:hover { text-decoration: none; color: var(--app-primary-text); }
.circle-tile .circle { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: .6rem; border: 3px solid var(--app-surface); box-shadow: var(--app-shadow); background: var(--app-surface-2); display: grid; place-items: center; transition: transform .2s ease; }
.circle-tile:hover .circle { transform: scale(1.04); }
.circle-tile .circle img { width: 100%; height: 100%; object-fit: cover; }
.circle-tile .circle .initials { font-size: 2rem; font-weight: 900; color: var(--app-primary-text); }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; padding: 2.25rem 0; }
.stats-strip .stat::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--app-primary-vivid); margin: 0 auto .8rem; }
.stats-strip .value { font-size: 1.9rem; font-weight: 900; line-height: 1; }
.stats-strip .label { color: var(--app-muted); font-size: .88rem; margin-top: .35rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.step { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--app-shadow-sm); }
.step .num { width: 34px; height: 34px; border-radius: .6rem; display: grid; place-items: center; background: var(--app-primary-soft); color: var(--app-primary-text); font-weight: 900; margin-bottom: 1rem; }
.step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.step p { color: var(--app-muted); font-size: .92rem; margin: 0; }
.cta-band { margin-top: 3rem; border-radius: 1.25rem; padding: 2.5rem; background: var(--app-primary-soft); border: 1px solid rgba(var(--app-primary-rgb), .18); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.cta-band h2 { font-size: 1.7rem; margin: 0 0 .35rem; }
.cta-band p { color: var(--app-muted); margin: 0; }

/* ----- browse page: chips + filters ---------------------------------------------------- */
.browse-head { padding: 1.75rem 0 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--app-border); }
.browse-head h1 { font-size: 2rem; margin-bottom: 1rem; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip-link { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--app-border-strong); background: var(--app-surface); color: var(--app-text); font-weight: 700; font-size: .9rem; }
.chip-link:hover { text-decoration: none; border-color: var(--app-primary-text); color: var(--app-primary-text); }
.chip-link.active { background: var(--app-primary); border-color: var(--app-primary); color: var(--app-on-primary); }
.filter-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; padding: 1.25rem; box-shadow: var(--app-shadow-sm); position: sticky; top: 1rem; }
.filter-card .filter-label { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); margin: 1rem 0 .4rem; }
.filter-card .filter-label:first-of-type { margin-top: 0; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }

/* ----- lot + sale cards ------------------------------------------------------------------- */
.lot-card, .sale-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.lot-card:hover, .sale-card:hover { transform: translateY(-3px); box-shadow: var(--app-shadow-lg); }
.card-media { position: relative; display: block; overflow: hidden; background: var(--app-surface-2); }
.card-media img { transition: transform .35s ease; }
.lot-card:hover .card-media img, .sale-card:hover .card-media img { transform: scale(1.05); }
.media-badges { position: absolute; inset: .7rem .7rem auto .7rem; display: flex; justify-content: space-between; gap: .4rem; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 800; padding: .3rem .65rem; border-radius: 999px; background: rgba(28, 25, 23, .78); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.chip-light { background: rgba(255, 255, 255, .94); color: #1c1917; }
.chip-orange { background: var(--app-primary-vivid); color: #fff; }
.card-title-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.02rem; font-weight: 800; line-height: 1.35; margin: .2rem 0 .55rem; min-height: 2.7em; }
.card-title-clamp a { color: var(--app-text); }
.price-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--app-muted); font-weight: 800; }
.price { font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--app-primary-vivid); }
.card-foot { border-top: 1px solid var(--app-border); padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--app-surface); }
.lot-thumb { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--app-surface-2); }
.lot-thumb-placeholder { aspect-ratio: 4 / 3; display: flex; flex-direction: column; gap: .35rem; align-items: center; justify-content: center; background: var(--app-surface-2); color: var(--app-muted); font-size: .85rem; }
.lot-thumb-placeholder::before { content: "\F42A"; font-family: "bootstrap-icons"; font-size: 1.6rem; opacity: .7; }
/* Whole card is tappable: the title link stretches over the card; buttons inside stay on top. */
.lot-card .stretched-link::after, .sale-card .stretched-link::after { z-index: 1; }
.lot-card .card-foot form, .lot-card .card-media, .sale-card .card-media { position: relative; z-index: 2; }
/* The bid box on My lots cards sits above the card's whole-card link. */
.lot-card .bid-form { position: relative; z-index: 2; }
.bid-form-compact .form-control { min-width: 4.5rem; }
.bid-form-compact .bid-message:empty { display: none; }

/* ----- countdowns & live indicator ---------------------------------------------------------- */
.countdown { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: .3rem .7rem; border-radius: 999px; background: var(--app-surface-2); color: var(--app-text); }
.countdown::before { content: "\F293"; font-family: "bootstrap-icons"; font-weight: normal; opacity: .75; }
.countdown.is-soon { color: var(--app-soon); background: color-mix(in srgb, var(--app-soon) 14%, transparent); }
.countdown.is-urgent { color: var(--app-urgent); background: color-mix(in srgb, var(--app-urgent) 14%, transparent); animation: urgent 1s ease-in-out infinite; }
.countdown.is-closed::before { content: "\F3CB"; }
.countdown-lg { font-size: 1.25rem; padding: .45rem .95rem; }
@keyframes urgent { 50% { opacity: .65; } }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; position: relative; display: inline-block; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #ef4444; animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* ----- lot page ------------------------------------------------------------------------------- */
.gallery-main { width: 100%; max-height: 560px; object-fit: contain; background: var(--app-surface); border-radius: 1rem; border: 1px solid var(--app-border); }
.gallery-thumbs img { width: 76px; height: 76px; object-fit: cover; cursor: pointer; border: 2px solid transparent; border-radius: .7rem; opacity: .75; transition: opacity .15s, border-color .15s; }
.gallery-thumbs img:hover { opacity: 1; }
.gallery-thumbs img.active { border-color: var(--app-primary-vivid); opacity: 1; }
.bid-panel { position: sticky; top: 1rem; box-shadow: var(--app-shadow); }
.bid-panel .price { font-size: 2.4rem; }
.spec-list dt { color: var(--app-muted); font-weight: 600; }
.spec-list dd { font-weight: 600; }

/* ----- back office -------------------------------------------------------------------------- */
.admin-head { margin: 1.5rem 0 1.25rem; }
.admin-head .house { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }
.admin-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--app-border); margin-top: .75rem; scrollbar-width: none; }
.admin-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .9rem; color: var(--app-muted); font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.admin-tabs a:hover { color: var(--app-text); text-decoration: none; }
.admin-tabs a.active { color: var(--app-primary-text); border-bottom-color: var(--app-primary-vivid); }
.admin-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; }
td .admin-thumb { border-radius: .6rem; }

/* ----- dashboard ------------------------------------------------------------------------------ */
.side-nav { display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 1rem; }
.side-nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 999px; color: var(--app-muted); font-weight: 700; }
.side-nav a:hover { background: var(--app-surface); color: var(--app-text); text-decoration: none; }
.side-nav a.active { background: var(--app-primary-soft); color: var(--app-primary-text); }
.nav-tabs { --bs-nav-tabs-border-color: var(--app-border); --bs-nav-tabs-link-active-bg: var(--app-surface); --bs-nav-tabs-link-active-border-color: var(--app-border) var(--app-border) var(--app-surface); }
.nav-tabs .nav-link { color: var(--app-muted); font-weight: 700; }
.nav-tabs .nav-link.active { color: var(--app-text); }

/* ----- appearance setting ----------------------------------------------------------------- */
.theme-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.theme-option { position: relative; display: block; cursor: pointer; padding: 1rem; border-radius: 1rem; background: var(--app-surface); border: 1.5px solid var(--app-border); box-shadow: var(--app-shadow-sm); }
.theme-option:has(input:checked) { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .2); }
.theme-option input { position: absolute; top: 1rem; right: 1rem; margin: 0; }
.theme-swatch { display: grid; grid-template-rows: 10px 1fr; gap: 6px; height: 74px; padding: 8px; border-radius: .7rem; border: 1px solid var(--app-border); }
.theme-swatch span:nth-child(1) { border-radius: 4px; width: 40%; }
.theme-swatch span:nth-child(2) { border-radius: 6px; }
.theme-swatch span:nth-child(3) { display: none; }
.theme-swatch-light { background: #f5f5f4; }
.theme-swatch-light span:nth-child(1) { background: #ea580c; }
.theme-swatch-light span:nth-child(2) { background: #fff; border: 1px solid #e7e5e4; }
.theme-swatch-dark { background: #0c0a09; }
.theme-swatch-dark span:nth-child(1) { background: #fb923c; }
.theme-swatch-dark span:nth-child(2) { background: #171412; border: 1px solid #2c2724; }
.theme-swatch-auto { background: linear-gradient(135deg, #f5f5f4 50%, #0c0a09 50%); }
.theme-swatch-auto span:nth-child(1) { background: linear-gradient(90deg, #ea580c 50%, #fb923c 50%); }
.theme-swatch-auto span:nth-child(2) { background: linear-gradient(135deg, #fff 50%, #171412 50%); border: 1px solid #8a8580; }

/* ----- Identity pages (login, register, manage account) ------------------------------------- */
.identity-page { max-width: 1040px; margin: 2rem auto 0; }
.identity-page > h1 { font-size: 1.85rem; margin-bottom: 1.25rem; }
.identity-page h2, .identity-page h3 { font-size: 1.05rem; color: var(--app-muted); font-weight: 700; }
.identity-page hr { border-color: var(--app-border); opacity: 1; }
.identity-page form { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1.1rem; padding: 1.5rem; box-shadow: var(--app-shadow); }
.identity-page form form, .identity-page .nav-pills form { background: none; border: 0; padding: 0; box-shadow: none; }
.identity-page .form-floating > .form-control { height: 3.5rem; }
.identity-page .form-floating > label { color: var(--app-muted); }
.identity-page .nav-pills .nav-link { color: var(--app-muted); border-radius: 999px; font-weight: 700; }
.identity-page .nav-pills .nav-link.active { background: var(--app-primary-soft); color: var(--app-primary-text); }
/* No external login providers configured: hide that empty column and centre the form.
   If providers are added later, the column contains a form and shows again automatically. */
.identity-page :is(.col-md-offset-2, .col-lg-offset-2):not(:has(form)) { display: none; }
.identity-page:has(#account, #registerForm) { max-width: 480px; }
.identity-page:has(#account, #registerForm) .row > [class*="col-"] { width: 100%; }

/* ----- misc ------------------------------------------------------------------------------------ */
@keyframes flash { from { background-color: color-mix(in srgb, var(--app-primary-vivid) 20%, transparent); } to { background-color: transparent; } }
.flash { animation: flash 1.2s ease-out; }
.toast { border-radius: .875rem; box-shadow: var(--app-shadow-lg); }
.toast-container { max-width: 100vw; }

/* ----- tablets & phones -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
  .steps { grid-template-columns: 1fr; }
  .filter-card { position: static; }
}
@media (max-width: 767.98px) {
  .header-main { flex-wrap: wrap; gap: .75rem; padding: .7rem 0; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  .header-search .form-control { height: 46px; padding-right: 6.5rem; }
  .header-actions { margin-left: auto; }
  .brand { font-size: 1.15rem; }
  .brand-mark { width: 34px; height: 34px; }
  .utility-links .hide-xs { display: none; }
  .featured .carousel-item { min-height: 460px; }
  .featured-shade { background: linear-gradient(180deg, rgba(12, 10, 9, .25) 0%, rgba(12, 10, 9, .88) 55%, rgba(12, 10, 9, .96) 100%); }
  .featured-body { padding: 9rem 1.25rem 3.25rem; }
  .featured-stats { gap: 1.5rem; }
  .featured-stats .bid, .featured-stats .clock { font-size: 1.6rem; }
  .featured .carousel-control-prev, .featured .carousel-control-next { top: 5.5rem; margin: 0 .6rem; }
  .circle-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .cta-band { padding: 1.75rem 1.25rem; }
  .bid-panel { position: static; }
  .side-nav { position: static; }
}

/* Comfortable thumb targets (~40px) on phones and touch screens. */
@media (max-width: 767.98px), (pointer: coarse) {
  .btn-sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
  .form-select-sm, .form-control-sm { font-size: 1rem; min-height: 40px; }
  .form-check-label, .identity-page .checkbox label { padding: .55rem 0; }
  .form-check .form-check-input { margin-top: calc(.25em + .55rem); }
  .form-check-input { width: 1.25em; height: 1.25em; }
  .admin-tabs a { padding: .8rem .9rem; }
  .utility-bar a { display: inline-block; padding: .45rem 0; }
  .quick-nav a { padding: .8rem 0; }
}

/* Back-office tables become stacked cards on phones (one row = one card, each cell labelled). */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: .9rem 1rem; border-bottom: 1px solid var(--app-border); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { border: 0; padding: .2rem 0 !important; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .table-stack td[data-label]::before { content: attr(data-label); color: var(--app-muted); font-size: .8rem; font-weight: 700; text-align: left; flex-shrink: 0; }
  .table-stack td.cell-title { display: block; text-align: left; font-weight: 800; font-size: 1.02rem; padding-bottom: .4rem !important; }
  .table-stack td.cell-thumb { float: left; width: 56px; margin-right: .8rem; padding: 0 !important; }
  .table-stack td.cell-actions { justify-content: flex-start; flex-wrap: wrap; gap: .4rem; padding-top: .6rem !important; clear: both; }
  .table-stack td.cell-actions::before { content: none; }
  .table-panel.table-responsive { overflow-x: visible; }
}
/* Wide tables (the owner's house list) also stack on tablets. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .table-stack-lg thead { display: none; }
  .table-stack-lg, .table-stack-lg tbody, .table-stack-lg tr, .table-stack-lg td { display: block; width: 100%; }
  .table-stack-lg tr { padding: .9rem 1rem; border-bottom: 1px solid var(--app-border); display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem 1.5rem; }
  .table-stack-lg td { border: 0; padding: .1rem 0 !important; text-align: left !important; }
  .table-stack-lg td[data-label]::before { content: attr(data-label); display: block; color: var(--app-muted); font-size: .75rem; font-weight: 700; }
  .table-stack-lg td.cell-title { grid-column: 1 / -1; font-weight: 800; }
  .table-stack-lg td.cell-actions { grid-column: 1 / -1; padding-top: .5rem !important; }
  .table-stack-lg td.cell-actions::before { content: none; }
  .table-panel.table-responsive:has(.table-stack-lg) { overflow-x: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Lot page: photos, bidding, description. Side-by-side on desktop with bidding in its own column. */
.lot-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.lot-gallery { grid-area: auto; }
@media (min-width: 992px) {
  .lot-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "gallery side" "info side"; column-gap: 2.5rem; align-items: start; }
  .lot-gallery { grid-area: gallery; }
  .lot-side { grid-area: side; position: sticky; top: 1rem; }
  .lot-info { grid-area: info; }
  .lot-side .bid-panel { position: static; }
}

/* ----- Q&A ------------------------------------------------------------------------------------ */
.count-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; font-size: .7rem; font-weight: 800; background: var(--app-primary-vivid); color: #fff; margin-left: .2rem; vertical-align: 1px; }
.count-badge[hidden] { display: none; }
.thread { display: flex; flex-direction: column; gap: .85rem; }
.bubble { max-width: min(560px, 88%); padding: .75rem 1rem; border-radius: 1rem; background: var(--app-surface); border: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm); white-space: pre-line; overflow-wrap: anywhere; }
.bubble.mine { align-self: flex-end; background: var(--app-primary-soft); border-color: rgba(var(--app-primary-rgb), .25); border-bottom-right-radius: .3rem; }
.bubble.theirs { align-self: flex-start; border-bottom-left-radius: .3rem; }
.bubble .meta { display: block; font-size: .75rem; color: var(--app-muted); margin-bottom: .2rem; white-space: normal; }
.bubble.published { box-shadow: 0 0 0 2px var(--app-live); }
.thread-row { display: flex; gap: .9rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--app-border); color: var(--app-text); }
.thread-row:last-child { border-bottom: 0; }
.thread-row:hover { background: var(--app-surface-2); text-decoration: none; color: var(--app-text); }
.thread-row .thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: .7rem; overflow: hidden; }
.thread-row .thumb img, .thread-row .thumb .lot-thumb-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; font-size: 0; }
.thread-row .preview { color: var(--app-muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.thread-row.unread .title { font-weight: 900; }
.thread-row .when { margin-left: auto; text-align: right; font-size: .78rem; color: var(--app-muted); flex-shrink: 0; }
.qa-item { padding: 1rem 0; border-bottom: 1px solid var(--app-border); }
.qa-item:last-child { border-bottom: 0; padding-bottom: 0; }
.qa-q, .qa-a { display: flex; gap: .65rem; }
.qa-a { margin-top: .5rem; }
.qa-q .tag, .qa-a .tag { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .8rem; }
.qa-q .tag { background: var(--app-surface-2); color: var(--app-text); }
.qa-a .tag { background: var(--app-primary-soft); color: var(--app-primary-text); }
.qa-q p, .qa-a p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.thread-row.card { flex-direction: row; }

/* Bootstrap components that still defaulted to blue/cyan: bring them into the theme. */
.nav-pills { --bs-nav-pills-link-active-bg: var(--app-primary); --bs-nav-pills-link-active-color: var(--app-on-primary); --bs-nav-pills-border-radius: 999px; }
.nav-pills .nav-link { color: var(--app-primary-text); font-weight: 700; }
.nav-pills .nav-link.active { color: var(--app-on-primary); }
.alert-info { --bs-alert-bg: var(--app-surface-2); --bs-alert-color: var(--app-text); --bs-alert-border-color: var(--app-border); }
.text-bg-primary { background-color: var(--app-primary) !important; color: var(--app-on-primary) !important; }
.text-bg-info { background-color: var(--app-surface-2) !important; color: var(--app-text) !important; border: 1px solid var(--app-border); }
.qa-item:has(+ :not(.qa-item)) { border-bottom: 0; }

/* Bid box: own − / + buttons step along the house's increment ladder, so hide the browser's 1-cent spinner. */
.bid-stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.bid-stepper input[type=number]::-webkit-outer-spin-button, .bid-stepper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bid-stepper .btn { border-radius: .7rem; min-width: 52px; }
.bid-stepper > :first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bid-stepper > :last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ----- Report a problem ------------------------------------------------------------------------ */
/* Bottom-left, so it never covers the toasts (bottom-right). */
.bug-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 1040; display: inline-flex; align-items: center; gap: .4rem;
           padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--app-border); background: var(--app-surface);
           color: var(--bs-body-color); box-shadow: var(--app-shadow-sm); font-size: .85rem; font-weight: 700; opacity: .85; }
.bug-fab:hover, .bug-fab:focus-visible { opacity: 1; border-color: rgba(var(--app-primary-rgb), .5); color: var(--app-primary, #ea580c); }
@media (max-width: 575.98px) { .bug-fab { padding: .5rem .6rem; } .bug-fab-label { display: none; } }
@media print { .bug-fab { display: none; } }
.bug-shot-preview img { max-height: 320px; object-fit: contain; object-position: left top; }
.bug-shot { max-width: 100%; max-height: 360px; object-fit: contain; }
/* Owners' private notes on a bug report: visibly not part of the conversation with the reporter. */
.bubble.private-note { background: color-mix(in srgb, var(--bs-warning) 12%, var(--app-surface)); border-style: dashed; border-color: color-mix(in srgb, var(--bs-warning) 55%, transparent); }

/* ----- Dashboard list view: one compact line per lot ------------------------------------------- */
.lot-list > :not(caption) > * > * { padding: .45rem .6rem; }
.lot-list .cell-thumb { width: 64px; }
.lot-list .cell-thumb img, .lot-list .cell-thumb .lot-thumb-placeholder { width: 48px; height: 48px; aspect-ratio: 1; }
.lot-list .lot-thumb-placeholder { font-size: 0; display: grid; place-items: center; border-radius: .5rem; }
/* The title takes whatever width is left and is cut off with an ellipsis (the other columns don't wrap). */
.lot-list .cell-title { width: 100%; max-width: 0; }
.lot-list .cell-title a, .lot-list .cell-title div { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lot-list td:not(.cell-title) { white-space: nowrap; }
.lot-list .countdown { padding: .2rem .55rem; white-space: nowrap; }
/* Watch button as just the heart (its title says Watch / Remove from watchlist), so the row fits. */
.lot-list .cell-actions form .btn { font-size: 0; padding: .3rem .5rem; }
.lot-list .cell-actions form .btn i { font-size: 1rem; }
.lot-list .cell-actions { width: 1%; }
/* The bid box row under a lot (opened with its Bid button): reads as part of that lot. */
.lot-list tr.bid-row > td { border-top: 0; padding-top: 0; padding-bottom: .7rem; background: var(--app-surface-2); white-space: normal; }
.lot-list tr:has(+ tr.bid-row:not([hidden])) > td { background: var(--app-surface-2); }
.lot-list .bid-row .bid-form { max-width: 26rem; }
.lot-list tr.bid-row[hidden] { display: none !important; }
.lot-list .lot-status:not(:has(.badge:not(.d-none), a, .text-danger)) { display: none !important; }   /* nothing to say */

/* Phones: two lines per lot instead of the stacked, labelled cells other tables get.
   Line 1: title (ellipsis) + Bid/watch buttons. Line 2: price · bids · time left · your status, small. */
@media (max-width: 767.98px) {
  .lot-list tr { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: .6rem; row-gap: .15rem; padding: .55rem .8rem !important; }
  .lot-list td { display: block !important; width: auto !important; max-width: none; padding: 0 !important; text-align: left !important; background: none !important; }
  .lot-list td[data-label]::before { content: none !important; }
  .lot-list tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }    /* line break after title + buttons */
  .lot-list .cell-thumb { display: none !important; }
  .lot-list .cell-title { flex: 1 1 0; min-width: 0; max-width: none; order: 0; }
  .lot-list .cell-title a { font-weight: 700; }
  .lot-list .cell-title div { display: none; }                                   /* lot number / house: on the lot page */
  .lot-list .cell-actions { order: 1; flex: none; display: flex !important; gap: .35rem; }
  .lot-list .cell-actions .btn { padding: .2rem .55rem; font-size: .8rem; }
  .lot-list td[data-label="Price"], .lot-list td[data-label="Time left"] { order: 3; font-size: .8rem; color: var(--app-muted); }
  .lot-list td[data-label="Price"] .fw-bold { color: var(--bs-body-color); }
  .lot-list td > span, .lot-list .lot-meta, .lot-list .lot-status { display: inline !important; margin: 0 !important; }
  .lot-list .lot-meta { margin-left: .4rem !important; }
  .lot-list .lot-status { margin-left: .4rem !important; }
  .lot-list .reserve { display: none; }
  .lot-list .countdown { font-size: .72rem; padding: .1rem .45rem; }
  .lot-list .badge { font-size: .68rem; }
  .lot-list tr:has(+ tr.bid-row:not([hidden])), .lot-list tr.bid-row { background: var(--app-surface-2); }
  .lot-list tr.bid-row { padding-top: 0 !important; }
  .lot-list tr.bid-row > td { flex: 1 1 100%; min-width: 0; }
  .lot-list tr.bid-row .bid-form { max-width: none; }
}
}