/* ============================================
   CARTOBID - Design System
   "Premium & Trustworthy" — deep navy + ivory + brass,
   an auction-house palette for a platform handling real money.

   Redesign pass (2026), v1 of the priority-page rollout.
   Strategy: Bootstrap 5.3 exposes its whole palette as CSS
   variables (--bs-primary, --bs-warning, --bs-body-bg, ...) that
   every one of this project's ~65 templates already consumes via
   utility classes (bg-primary, btn-warning, text-muted, etc).
   Overriding those variables here re-themes the entire site from
   one place, instead of hand-editing classes across every template.
   The legacy --primary-color/--secondary-color/etc. aliases below
   do the same for this file's own ~700 lines of component rules
   that predate this pass, so they re-theme too without individual
   edits. New component work should read the --bs-* / semantic
   tokens directly rather than adding more of the legacy aliases.
   ============================================ */

/* Fonts are loaded via preconnected <link> tags in base.html's <head>,
   not @import here, to avoid the serial-fetch waterfall @import causes
   (it blocks CSS parsing until fetched, then only starts the font fetch
   after — a real Core Web Vitals cost). See base.html for the actual tags. */

:root {
    /* ---- Brand tokens ---- */
    --ink: #14202e;           /* body text, deep navy-black */
    --navy-deep: #0d1420;     /* header/footer/hero surfaces */
    --navy: #1c2b3f;          /* mid navy — hover/active dark surfaces */
    --paper: #f6f3ec;         /* warm ivory page background */
    --surface: #ffffff;       /* card/panel background */
    --line: #e2ddd0;          /* warm ivory hairline border */
    --muted: #5c6472;         /* secondary text, slate */
    --brass: #8a6526;         /* text-safe accent (links, small text on light bg) */
    --brass-bright: #b9873f;  /* accent for buttons/badges on light or dark bg */
    --brass-dark: #6b4d1b;    /* hover/active state for brass */
    --brass-soft: #f3e6cc;    /* soft accent tint for highlight badges */

    /* ---- Semantic (premium-tuned, same hue families as before) ---- */
    --success-c: #2f7d4f;
    --success-rgb: 47,125,79;
    --danger-c: #a83a30;
    --danger-rgb: 168,58,48;
    --info-c: #2f5f7a;
    --info-rgb: 47,95,122;

    /* ---- Bootstrap 5.3 variable overrides: this is what actually
       re-themes every template's bg-*/btn-*/text-* utility classes ---- */
    --bs-primary: var(--navy-deep);
    --bs-primary-rgb: 13,20,32;
    --bs-secondary: var(--muted);
    --bs-secondary-rgb: 92,100,114;
    --bs-success: var(--success-c);
    --bs-success-rgb: var(--success-rgb);
    --bs-danger: var(--danger-c);
    --bs-danger-rgb: var(--danger-rgb);
    --bs-warning: var(--brass-bright);
    --bs-warning-rgb: 185,135,63;
    --bs-info: var(--info-c);
    --bs-info-rgb: var(--info-rgb);
    --bs-dark: var(--navy-deep);
    --bs-dark-rgb: 13,20,32;
    --bs-light: var(--paper);
    --bs-light-rgb: 246,243,236;
    --bs-body-bg: var(--paper);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-border-color-translucent: rgba(20,32,46,0.12);
    --bs-link-color: var(--brass);
    --bs-link-color-rgb: 138,101,38;
    --bs-link-hover-color: var(--brass-dark);
    --bs-link-hover-color-rgb: 107,77,27;
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: #efe9db;

    /* ---- Typography ---- */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* ---- Legacy aliases: every existing rule below that reads
       var(--primary-color) etc. re-themes automatically via these ---- */
    --primary-color: var(--bs-primary);
    --primary-dark: var(--navy);
    --secondary-color: var(--bs-secondary);
    --success-color: var(--bs-success);
    --danger-color: var(--bs-danger);
    --warning-color: var(--bs-warning);
    --info-color: var(--bs-info);
    --light-bg: var(--bs-body-bg);
    --dark-bg: var(--bs-dark);

    --border-radius: 0.4rem;
    --box-shadow: 0 2px 6px rgba(20, 32, 46, 0.08);
    --box-shadow-lg: 0 14px 28px rgba(20, 32, 46, 0.16);
}

/* ---------- General ---------- */
body {
    font-family: var(--font-body);
    background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .card-header h1, .card-header h2, .card-header h3 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.countdown-display, .current-bid, .price-tag, .stat-value,
.negotiation-bubble .price, .bid-agent-card .max-bid {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

a {
    text-decoration: none;
}

.btn {
    border-radius: var(--border-radius);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.footer-heading {
    color: var(--brass-bright);
}

/* ---------- Bootstrap component color fix ----------
   Bootstrap 5.3's compiled CSS hardcodes literal hex values into each
   component's own local custom properties (e.g. .btn-primary sets
   --bs-btn-bg:#0d6efd directly) instead of referencing the theme-level
   --bs-primary/--bs-warning/etc at the point of use. Only a handful of
   plain utility classes (bg-primary, text-primary, border-primary)
   actually read the theme variable directly — confirmed by inspecting
   the compiled bundle. So overriding --bs-primary above re-themes the
   navbar/utility classes correctly, but buttons, badges, alerts and the
   accordion's active state stay Bootstrap-blue/amber unless their own
   component variables are overridden here explicitly. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--navy-deep);
    --bs-btn-border-color: var(--navy-deep);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy);
    --bs-btn-hover-border-color: var(--navy);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy);
    --bs-btn-active-border-color: var(--navy);
    --bs-btn-disabled-bg: var(--navy-deep);
    --bs-btn-disabled-border-color: var(--navy-deep);
    --bs-btn-focus-shadow-rgb: 13,20,32;
}
.btn-outline-primary {
    --bs-btn-color: var(--navy-deep);
    --bs-btn-border-color: var(--navy-deep);
    --bs-btn-hover-bg: var(--navy-deep);
    --bs-btn-hover-border-color: var(--navy-deep);
    --bs-btn-active-bg: var(--navy-deep);
    --bs-btn-active-border-color: var(--navy-deep);
    --bs-btn-focus-shadow-rgb: 13,20,32;
}
.btn-warning {
    --bs-btn-color: #1a1206;
    --bs-btn-bg: var(--brass-bright);
    --bs-btn-border-color: var(--brass-bright);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brass-dark);
    --bs-btn-hover-border-color: var(--brass-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brass-dark);
    --bs-btn-active-border-color: var(--brass-dark);
    --bs-btn-disabled-bg: var(--brass-bright);
    --bs-btn-disabled-border-color: var(--brass-bright);
    --bs-btn-focus-shadow-rgb: 185,135,63;
}
.btn-outline-warning {
    --bs-btn-color: var(--brass-dark);
    --bs-btn-border-color: var(--brass-bright);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brass-bright);
    --bs-btn-hover-border-color: var(--brass-bright);
    --bs-btn-active-bg: var(--brass-bright);
    --bs-btn-active-border-color: var(--brass-bright);
    --bs-btn-focus-shadow-rgb: 185,135,63;
}
.btn-success, .btn-outline-success { --bs-btn-focus-shadow-rgb: var(--success-rgb); }
.btn-success {
    --bs-btn-bg: var(--success-c);
    --bs-btn-border-color: var(--success-c);
    --bs-btn-hover-bg: #26653f;
    --bs-btn-hover-border-color: #26653f;
    --bs-btn-active-bg: #26653f;
    --bs-btn-active-border-color: #26653f;
    --bs-btn-disabled-bg: var(--success-c);
    --bs-btn-disabled-border-color: var(--success-c);
}
.btn-outline-success {
    --bs-btn-color: var(--success-c);
    --bs-btn-border-color: var(--success-c);
    --bs-btn-hover-bg: var(--success-c);
    --bs-btn-hover-border-color: var(--success-c);
    --bs-btn-active-bg: var(--success-c);
    --bs-btn-active-border-color: var(--success-c);
}
.btn-danger, .btn-outline-danger { --bs-btn-focus-shadow-rgb: var(--danger-rgb); }
.btn-danger {
    --bs-btn-bg: var(--danger-c);
    --bs-btn-border-color: var(--danger-c);
    --bs-btn-hover-bg: #8a3026;
    --bs-btn-hover-border-color: #8a3026;
    --bs-btn-active-bg: #8a3026;
    --bs-btn-active-border-color: #8a3026;
    --bs-btn-disabled-bg: var(--danger-c);
    --bs-btn-disabled-border-color: var(--danger-c);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger-c);
    --bs-btn-border-color: var(--danger-c);
    --bs-btn-hover-bg: var(--danger-c);
    --bs-btn-hover-border-color: var(--danger-c);
    --bs-btn-active-bg: var(--danger-c);
    --bs-btn-active-border-color: var(--danger-c);
}
.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--navy-deep);
    --bs-btn-hover-bg: var(--paper);
    --bs-btn-hover-color: var(--navy-deep);
}

/* Alerts (flash messages) */
.alert-primary { --bs-alert-color: var(--navy-deep); --bs-alert-bg: #e3e6ea; --bs-alert-border-color: #c9cfd7; }
.alert-warning { --bs-alert-color: var(--brass-dark); --bs-alert-bg: var(--brass-soft); --bs-alert-border-color: #e3cfa0; }
.alert-success { --bs-alert-color: #1d5334; --bs-alert-bg: #e3f1e7; --bs-alert-border-color: #bfe0cb; }
.alert-danger { --bs-alert-color: #6e2620; --bs-alert-bg: #f6e0dd; --bs-alert-border-color: #e8c1bb; }

/* Accordion active state (FAQ, etc.) */
.accordion-button:not(.collapsed) {
    color: var(--navy-deep);
    background-color: var(--brass-soft);
}
.accordion-button:focus {
    border-color: var(--navy-deep);
    box-shadow: 0 0 0 0.25rem rgba(13, 20, 32, 0.15);
}

/* Active states in lists/dropdowns */
.list-group-item.active {
    background-color: var(--navy-deep);
    border-color: var(--navy-deep);
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--navy-deep);
}
.page-link { color: var(--brass); }
.page-item.active .page-link { background-color: var(--navy-deep); border-color: var(--navy-deep); }
.form-check-input:checked { background-color: var(--navy-deep); border-color: var(--navy-deep); }

/* ---------- Navbar ---------- */
.navbar-brand {
    font-size: 1.5rem;
}

.notification-dropdown {
    min-width: 300px;
    max-height: 400px;
    overflow-y: auto;
}

/* ---------- Cards ---------- */
.card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

.card-img-top {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    height: 200px;
    object-fit: cover;
}

/* ---------- Vehicle Cards ---------- */
.vehicle-card {
    position: relative;
}

.vehicle-card .badge-status {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
}

.vehicle-card .price-tag {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--primary-color);
}

.vehicle-card .vehicle-info {
    font-size: 0.9rem;
    color: var(--secondary-color);
}

.vehicle-card .vehicle-info i {
    width: 20px;
}

/* ---------- Auction Styles ---------- */
.hotbid-container {
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
    color: white;
    border-radius: var(--border-radius);
    padding: 2rem;
}

.countdown-display {
    font-size: 4rem;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.countdown-display.warning {
    color: var(--warning-color);
    animation: pulse 0.5s infinite;
}

.countdown-display.danger {
    color: var(--danger-color);
    animation: pulse 0.3s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.current-bid {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--success-color);
}

.bid-history {
    max-height: 300px;
    overflow-y: auto;
}

.bid-entry {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bid-entry.winning {
    background: rgba(25, 135, 84, 0.2);
}

.bid-entry .bidder {
    font-weight: bold;
}

.bid-entry .amount {
    color: var(--success-color);
}

.bid-entry .time {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Quick Bid Buttons */
.quick-bid-btn {
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    margin: 0.25rem;
}

/* ---------- Auction Queue ---------- */
.queue-item {
    background: white;
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.queue-item.current {
    background: var(--primary-color);
    color: white;
}

.queue-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 1rem;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--border-radius);
    border: 1px solid var(--line);
    padding: 0.75rem 1rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* ---------- Steps Progress ----------
   Used by the listing wizard (5 steps) and the seller/dealer registration.
   The connector is drawn per step (from the previous circle's centre to this one's),
   so it always runs exactly through the circle centres whatever padding the
   container has, and turns brass up to the current step. */
.steps-progress {
    --step-size: 40px;
    --step-line: var(--line);
    --step-line-done: var(--brass-bright);
    --step-label: var(--secondary-color);
    --step-label-strong: var(--navy-deep);
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    position: relative;
    padding: 0;
    list-style: none;
}

.step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step + .step::before {
    content: '';
    position: absolute;
    top: calc(var(--step-size) / 2 - 1.5px);
    right: 50%;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--step-line);
    z-index: 0;
    transition: background 300ms ease;
}

.step.completed + .step::before,
.step.active::before {
    background: var(--step-line-done);
}

.step-number {
    position: relative;
    z-index: 1;
    width: var(--step-size);
    height: var(--step-size);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--step-line);
    color: var(--navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.55rem;
    flex-shrink: 0;
}

.step.completed .step-number {
    background: var(--navy-deep);
    border-color: var(--brass-bright);
    color: var(--brass-bright);
    font-size: 0;
}
.step.completed .step-number::after {
    content: '\2713';
    font-size: 1.05rem;
    line-height: 1;
}

.step.active .step-number {
    background: var(--brass-bright);
    border-color: var(--brass-bright);
    color: var(--navy-deep);
    box-shadow: 0 0 0 5px rgba(185, 135, 63, 0.25);
}

.step-label {
    font-size: 0.82rem;
    line-height: 1.25;
    color: var(--step-label);
    text-align: center;
    padding: 0 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.step.active .step-label,
.step.completed .step-label {
    color: var(--step-label-strong);
    font-weight: 600;
}

/* Phones: keep all steps on one line; smaller circles, icons hidden, and only the
   current step keeps its label (the others show their number/tick only). */
@media (max-width: 575.98px) {
    .steps-progress { --step-size: 32px; margin-bottom: 1.5rem; }
    .step-number { font-size: 0.85rem; margin-bottom: 0.4rem; }
    .step-label { font-size: 0.72rem; }
    .step-label .step-icon,
    .step-label i { display: none; }
    .step:not(.active) .step-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .step.active .step-label { white-space: nowrap; }
    .step:first-child.active .step-label { align-self: flex-start; text-align: left; }
    .step:last-child.active .step-label { align-self: flex-end; text-align: right; }
}

/* ---------- Image Upload ---------- */
.image-upload-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .image-upload-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.image-upload-box {
    aspect-ratio: 4/3;
    border: 2px dashed var(--line);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.image-upload-box:hover {
    border-color: var(--primary-color);
    background: rgba(13, 110, 253, 0.05);
}

.image-upload-box.required {
    border-color: var(--warning-color);
}

.image-upload-box.has-image {
    border-style: solid;
    border-color: var(--success-color);
}

.image-upload-box img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-upload-box .upload-icon {
    font-size: 2rem;
    color: var(--line);
}

.image-upload-box .upload-label {
    font-size: 0.8rem;
    color: var(--secondary-color);
    text-align: center;
    padding: 0 0.5rem;
}

.image-upload-box .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    display: none;
}

.image-upload-box.has-image .remove-btn {
    display: block;
}

/* ---------- Dashboard Stats ---------- */
.stat-card {
    text-align: center;
    padding: 1.5rem;
}

.stat-card .stat-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: bold;
}

.stat-card .stat-label {
    color: var(--secondary-color);
    font-size: 0.9rem;
}

/* ---------- Negotiation ---------- */
.negotiation-timeline {
    position: relative;
    padding-left: 30px;
}

.negotiation-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line);
}

.negotiation-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.negotiation-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid white;
    box-shadow: var(--box-shadow);
}

.negotiation-item.seller::before {
    background: var(--info-color);
}

.negotiation-item.dealer::before {
    background: var(--warning-color);
}

.negotiation-item.accepted::before {
    background: var(--success-color);
}

.negotiation-bubble {
    background: white;
    border-radius: var(--border-radius);
    padding: 1rem;
    box-shadow: var(--box-shadow);
}

.negotiation-bubble .price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.negotiation-bubble .meta {
    font-size: 0.85rem;
    color: var(--secondary-color);
}

/* ---------- Vehicle Detail ---------- */
.vehicle-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.vehicle-gallery .main-image {
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.vehicle-gallery .main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vehicle-gallery .thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.vehicle-gallery .thumbnail {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.vehicle-gallery .thumbnail:hover,
.vehicle-gallery .thumbnail.active {
    opacity: 1;
}

.vehicle-gallery .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vehicle Specs Table */
.specs-table {
    width: 100%;
}

.specs-table th {
    width: 40%;
    font-weight: 500;
    color: var(--secondary-color);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

.specs-table td {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

/* ---------- Bid Agent ---------- */
.bid-agent-card {
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--brass-dark) 100%);
    color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.bid-agent-card .agent-status {
    font-size: 0.9rem;
    opacity: 0.9;
}

.bid-agent-card .max-bid {
    font-size: 1.5rem;
    font-weight: bold;
}

/* ---------- Invoice/Contract Preview ---------- */
.document-preview {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--box-shadow);
}

.document-preview .document-header {
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

/* ---------- Home: Hero ---------- */
/* 2026-11-03: the hero background used to be a full-bleed cover photo
   (hero-showroom.jpg) with large empty areas, safe for overlaid text
   anywhere. The new brand illustration (hero-auktion.jpg) is detailed and
   busy across its whole frame (price cards, chart, car) with no "quiet
   zone" - as a stretched/cropped CSS background it either hid almost
   entirely behind the old hero-card widget or, once that was removed, its
   own card graphics collided visually with the hero text depending on
   crop position. Shown instead as a contained, intentionally-framed <img>
   in the hero's own right-hand column (replacing the old hero-card
   widget; see home.html's .hero-illustration) - predictable, never
   cropped, never collides with text. This section now just needs a solid
   navy backdrop of its own. */
.hero-section {
    background: linear-gradient(135deg, var(--navy-deep) 0%, #16213e 100%);
}
.hero-illustration {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
/* ---------- Page banner ----------
   Reusable header band for content/landing pages that aren't the homepage
   (how_it_works, auto_verkaufen, auto_auktion, fuer_haendler, ...) - a
   photographic banner with a dark scrim so a white title stays legible
   over any part of the image. Pair with a modifier class per page that
   sets --page-banner-image, e.g.:
     .page-banner-handshake { --page-banner-image: url("/static/img/banner-handshake.d62dd98f920b.jpg"); }
*/
.page-banner {
    position: relative;
    background:
        linear-gradient(180deg, rgba(13,20,32,0.62) 0%, rgba(13,20,32,0.82) 100%),
        var(--page-banner-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 3.5rem 0;
}
.page-banner h1 {
    color: #fff;
    margin-bottom: 0.5rem;
}
.page-banner .page-banner-lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.1rem;
}
.page-banner-handshake { --page-banner-image: url("/static/img/banner-handshake.d62dd98f920b.jpg"); }
.page-banner-list-vehicle { --page-banner-image: url("/static/img/banner-list-vehicle.3df6b7000742.jpg"); }
.page-banner-auction-stage { --page-banner-image: url("/static/img/banner-auction-stage.6a3f4831d1c6.jpg"); }
.page-banner-dealer-showroom { --page-banner-image: url("/static/img/banner-dealer-showroom.507788d780e4.jpg"); }

/* ---------- In-page feature section with photo background ----------
   Used to break up long content pages (e.g. how_it_works.html) between
   plain beige/white sections, mirroring the page-banner treatment but
   sized for a mid-page block rather than the top hero. */
.feature-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
}
.feature-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,20,32,0.80) 0%, rgba(13,20,32,0.90) 100%);
}
.feature-section > .container {
    position: relative;
    z-index: 1;
}
.feature-section h2 { color: #fff; }
.feature-section-hotbid { background-image: url("/static/img/banner-hotbid-arena.b758fedd2fa4.png"); }

/* ---------- Comparison table (homepage "why CartoBid" section) ---------- */
.compare-table-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--box-shadow-lg);
    background: var(--surface);
}
.compare-table {
    margin-bottom: 0;
}
.compare-table thead th {
    background: var(--navy-deep);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    border: none;
    vertical-align: bottom;
    padding: 1.1rem 1rem;
}
.compare-table tbody td {
    padding: 0.9rem 1rem;
    border-color: var(--line);
    color: var(--ink);
}
.compare-table tbody tr:last-child td {
    border-bottom: none;
}
.compare-feature-col {
    font-weight: 600;
    min-width: 180px;
}
td.compare-us-col, th.compare-us-col {
    background: var(--brass-soft);
    font-weight: 600;
}
th.compare-us-col {
    background: var(--brass-dark);
}
.compare-table tbody td.compare-us-col i {
    color: var(--brass-dark);
    margin-right: 0.4rem;
}

.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass-bright);
    margin-bottom: 0.75rem;
}
.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 540px;
}
.hero-stats { margin-top: 0.5rem; }
.hero-stat-value {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brass-bright);
    line-height: 1;
}
.hero-stat-label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}
.hero-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    color: #fff;
}
.hero-card-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.95rem;
}
.hero-card-row strong { font-family: var(--font-mono); }
.hero-card-status {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(185, 135, 63, 0.18);
    border: 1px solid var(--brass-bright);
    border-radius: calc(var(--border-radius) - 0.1rem);
    color: var(--brass-bright);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

/* ---------- Home: Steps ---------- */
.step-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

/* ---------- Step icon tile (2026-11-03) ----------
   Icon + step number badge, replacing a bare .step-circle number where the
   icon pack provides a matching glyph - the number badge is kept (not
   dropped) so the step order still reads at a glance, per design review:
   "Schrittnummern zur Orientierung erhalten". */
.step-icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
}
.step-icon-wrap img {
    width: 72px;
    height: 72px;
    display: block;
}
.step-icon-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--navy-deep, #0d1420);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(13, 20, 32, 0.25);
}

/* ---------- Home: Seller/Dealer dedicated full-width sections ---------- */
.audience-block-dealer { background: var(--navy-deep); color: #fff; }
.audience-block-dealer h2 { color: #fff; }
.audience-kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 0.5rem;
}
.audience-kicker-dealer { color: var(--brass-bright); }
.audience-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.audience-list li { padding: 0.4rem 0; display: flex; align-items: flex-start; gap: 0.6rem; }
.audience-list li i { color: var(--success-c); margin-top: 0.2rem; }
.audience-block-dealer .audience-list li i { color: var(--brass-bright); }
.audience-cta-dealer { background: var(--brass-bright); border-color: var(--brass-bright); color: #1a1206; }
.audience-cta-dealer:hover { background: var(--brass-dark); border-color: var(--brass-dark); color: #fff; }
.text-accent { color: var(--brass); font-weight: 700; }

.audience-visual {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    box-shadow: var(--box-shadow);
}
.audience-visual-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
}
.audience-visual-row strong { font-family: var(--font-mono); }
.audience-visual-status {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--brass-soft);
    border-radius: calc(var(--border-radius) - 0.1rem);
    color: var(--brass-dark);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}
.audience-visual-dealer {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.audience-visual-dealer .audience-visual-row { border-color: rgba(255, 255, 255, 0.12); }
.audience-visual-status-dealer {
    background: rgba(185, 135, 63, 0.18);
    border: 1px solid var(--brass-bright);
    color: var(--brass-bright);
}

/* ---------- Home: Stats + chart section ---------- */
.stat-tile {
    display: block;
    text-align: center;
    padding: 1.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
}
.stat-tile-value {
    display: block;
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--navy-deep);
    line-height: 1;
    margin-bottom: 0.4rem;
}
.stat-tile-label { font-size: 0.9rem; color: var(--muted); }
.chart-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    padding: 1.75rem;
    box-shadow: var(--box-shadow);
}

/* ---------- Home: Recently-sold cards ---------- */
.sold-card { position: relative; }
.sold-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--success-c);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.7rem;
    border-radius: 100px;
}
.sold-price { font-family: var(--font-mono); font-size: 1.2rem; color: var(--success-c); }

/* ---------- Home: "Learn more" teaser cards (replace duplicated page content) ---------- */
.learn-more-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    padding: 1.1rem 1.4rem;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}
.learn-more-card:hover { box-shadow: var(--box-shadow-lg); transform: translateY(-2px); }
.learn-more-title { color: var(--ink); font-weight: 600; }
.learn-more-link { color: var(--brass); font-size: 0.9rem; white-space: nowrap; }

/* ---------- Home: Trust strip ---------- */
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); }
.trust-item i { font-size: 1.6rem; color: var(--bs-primary); }
.trust-item span { font-size: 0.85rem; font-weight: 600; }

/* ---------- Helpdesk: Help Center ---------- */
.help-category-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--ink);
    height: 100%;
    transition: box-shadow 0.15s, transform 0.15s;
}
.help-category-card:hover { box-shadow: var(--box-shadow-lg); transform: translateY(-2px); color: var(--ink); }
.help-category-card i { font-size: 1.75rem; color: var(--bs-primary); flex-shrink: 0; }
.help-category-count {
    display: inline-block; margin-top: 0.5rem; font-size: 0.75rem; color: var(--brass);
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.help-article-body { font-size: 1.05rem; line-height: 1.7; }
.help-article-body h2, .help-article-body h3 { margin-top: 1.75rem; margin-bottom: 0.75rem; }
.help-article-body ul, .help-article-body ol { margin-bottom: 1rem; }
.help-feedback-card {
    background: var(--surface-2, var(--paper));
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

/* ---------- Helpdesk: Support tickets ---------- */
.ticket-thread { display: flex; flex-direction: column; gap: 1rem; }
.ticket-message {
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    max-width: 85%;
}
.ticket-message-customer { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.ticket-message-staff { background: var(--brass-soft); align-self: flex-end; }
.ticket-message-meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; }
.ticket-message-body { white-space: normal; }

/* ---------- Home: Final CTA ---------- */
.final-cta { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%); color: #fff; }

/* ---------- Status Badges ----------
   Matches auctions.Vehicle.STATUS_CHOICES exactly (was missing
   pending_approval/deactivated, and used the phantom 'in_auction'
   value instead of the real 'in_hotbid' — fixed here). */
.badge-draft { background-color: var(--muted); }
.badge-pending_approval { background-color: var(--info-c); }
.badge-active { background-color: var(--bs-primary); }
.badge-in_hotbid { background-color: var(--brass-bright); color: #1a1206; }
.badge-sold { background-color: var(--success-c); }
.badge-negotiating { background-color: var(--brass-bright); color: #1a1206; }
.badge-not_sold { background-color: var(--danger-c); }
.badge-deactivated { background-color: var(--muted); }
.badge-withdrawn { background-color: var(--muted); }
.badge-cancelled { background-color: var(--muted); }

/* ---------- Loading Spinner ---------- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- Empty State ---------- */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--secondary-color);
}

.empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h4 {
    color: var(--dark-bg);
}

/* ---------- Responsive Adjustments ---------- */
@media (max-width: 576px) {
    .countdown-display {
        font-size: 2.5rem;
    }
    
    .current-bid {
        font-size: 1.75rem;
    }
    
}

/* ---------- Print Styles ---------- */
@media print {
    .navbar, footer, .btn, .no-print {
        display: none !important;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid var(--line);
    }
}

/* =========================================================
   Dealer Vehicle Detail – rechte Spalte immer rechts/sticky
   ========================================================= */

/* Container-Reihe im Template:
   <div class="row dealer-detail-layout"> … */
@media (min-width: 992px) {
    .dealer-detail-layout {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
    }

    /* Linke Spalte: Bilder + Daten */
    .dealer-detail-layout > .col-lg-7 {
        flex: 0 0 60%;
        max-width: 60%;
    }

    /* Rechte Spalte: Sidebar mit Titel/Auktion/Biet-Agent
       -> bleibt beim Scrollen immer oben rechts sichtbar */
    .dealer-detail-layout > .col-lg-5 {
        flex: 0 0 40%;
        max-width: 40%;
        position: sticky;
        top: 90px;              /* Abstand unter der blauen Navbar */
        align-self: flex-start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    /* In der Sidebar KEIN Hover-Translate,
       damit sticky nicht beeinträchtigt wird */
    .dealer-detail-layout > .col-lg-5 .card:hover {
        transform: none;
        box-shadow: var(--box-shadow);
    }
}

/* Mobile: normales untereinander-Layout */
@media (max-width: 991.98px) {
    .dealer-detail-layout {
        display: block;
    }

    .dealer-detail-layout > .col-lg-7,
    .dealer-detail-layout > .col-lg-5 {
        max-width: 100%;
        flex: 0 0 100%;
        position: static;
        max-height: none;
        overflow: visible;
    }
}
/* =========================
   Footer Contrast Fix
   ========================= */
footer.bg-dark,
footer.bg-dark p,
footer.bg-dark li,
footer.bg-dark small {
    color: rgba(255, 255, 255, 0.75);
}

footer.bg-dark a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

footer.bg-dark a:hover,
footer.bg-dark a:focus {
    color: #ffffff;
    text-decoration: underline;
}

/* Wenn Bootstrap "text-muted" bei dir kaputt überschrieben ist */
footer.bg-dark .text-muted {
    color: rgba(255, 255, 255, 0.65) !important;
}
footer.bg-dark a {
  color: rgba(255,255,255,.85) !important;
}
footer.bg-dark a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}
footer.bg-dark .text-muted,
footer.bg-dark small {
  color: rgba(255,255,255,.65) !important;
}

/* Pages whose last section is dark (home, so-funktionierts): no light strip before the
   footer, just a thin brass line so the two navy areas stay distinguishable. */
footer.footer-flush { margin-top: 0; border-top: 1px solid rgba(185, 135, 63, 0.35); }