/* ============================================================
   COMPONENTS.CSS
   Reusable UI components used across the entire website.
   Buttons, cards, forms, modals, toasts, badges, tags, etc.

   TABLE OF CONTENTS:
   1.  Buttons — Base & Variants
   2.  Car Cards
   3.  Form Fields
   4.  Form Box / Wrapper
   5.  Submit Button
   6.  Checkbox
   7.  Modal — Global
   8.  Modal — Book Action
   9.  Toast Notifications
   10. AutoTrader Bar
   11. Reserve Box
   12. Spec Tags
   13. Status Badges
   14. Action Buttons (Admin)
   15. Lightbox
   16. Empty State
   17. Tooltip
   18. Filter Tabs
   19. Sort Buttons
   20. Responsive — Components
============================================================ */


/* ============================================================
   1. BUTTONS — BASE & VARIANTS
   All buttons share the .btn base class, then get a
   variant class for colour/style.
============================================================ */

/* Base button */
.btn {
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    gap:                8px;
    padding:            11px 26px;
    border-radius:      var(--radius-xl);
    font-size:          var(--font-size-base);
    font-weight:        600;
    font-family:        var(--font-family);
    line-height:        1.2;
    cursor:             pointer;
    transition:         var(--transition);
    border:             none;
    text-decoration:    none;
    white-space:        nowrap;
    position:           relative;
    overflow:           hidden;
    user-select:        none;
}

.btn:active {
    transform:          scale(0.97);
}

/* ── Red (Primary) ── */
.btn-red {
    background:         var(--gradient-red);
    color:              #ffffff;
    box-shadow:         var(--shadow-red);
}

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

.btn-red:active {
    transform:          translateY(0) scale(0.98);
}

/* ── Dark / Black ── */
.btn-dark {
    background:         var(--dark);
    color:              #ffffff;
}

.btn-dark:hover {
    background:         var(--dark-2);
    transform:          translateY(-2px);
    box-shadow:         var(--shadow-md);
}

/* ── Outline (border only) ── */
.btn-outline {
    background:         transparent;
    color:              var(--text);
    border:             1.5px solid var(--border-dark);
}

.btn-outline:hover {
    border-color:       var(--primary);
    color:              var(--primary);
    background:         var(--primary-faint);
}

/* ── Outline Red ── */
.btn-outline-red {
    background:         transparent;
    color:              var(--primary);
    border:             1.5px solid var(--primary);
}

.btn-outline-red:hover {
    background:         var(--primary);
    color:              #ffffff;
}

/* ── Outline White — used on dark backgrounds ── */
.btn-outline-white {
    background:         transparent;
    color:              #ffffff;
    border:             1.5px solid rgba(255, 255, 255, 0.3);
}

.btn-outline-white:hover {
    border-color:       #ffffff;
    background:         rgba(255, 255, 255, 0.1);
}

/* ── Danger (Red delete button) ── */
.btn-danger {
    background:         var(--red-danger);
    color:              #ffffff;
}

.btn-danger:hover {
    background:         #b91c1c;
    box-shadow:         0 6px 20px rgba(220, 38, 38, 0.3);
}

/* ── Ghost (minimal, text-only feel) ── */
.btn-ghost {
    background:         transparent;
    color:              var(--text-3);
    padding:            8px 14px;
}

.btn-ghost:hover {
    color:              var(--primary);
    background:         var(--primary-faint);
}

/* ── Size Variants ── */
.btn-lg {
    padding:            14px 34px;
    font-size:          15px;
}

.btn-sm {
    padding:            8px 18px;
    font-size:          13px;
}

.btn-xs {
    padding:            5px 12px;
    font-size:          12px;
    border-radius:      var(--radius-sm);
}

/* ── Full Width ── */
.btn-full {
    width:              100%;
}

/* ── Icon-only button ── */
.btn-icon {
    width:              40px;
    height:             40px;
    padding:            0;
    border-radius:      50%;
    font-size:          18px;
}

.btn-icon.sm {
    width:              32px;
    height:             32px;
    font-size:          14px;
}

/* ── Button with shimmer hover ── */
.btn-shimmer::before {
    content:            '';
    position:           absolute;
    top:                0;
    left:               -100%;
    width:              100%;
    height:             100%;
    background:         linear-gradient(
                            90deg,
                            transparent,
                            rgba(255, 255, 255, 0.2),
                            transparent
                        );
    transition:         left 0.5s ease;
}

.btn-shimmer:hover::before {
    left:               100%;
}

/* ── Disabled state ── */
.btn:disabled,
.btn.disabled {
    opacity:            0.55;
    cursor:             not-allowed;
    pointer-events:     none;
    transform:          none !important;
    box-shadow:         none !important;
}


/* ============================================================
   2. CAR CARDS
   The main vehicle listing card used on homepage, stock page,
   and related vehicles section.
============================================================ */

/* Card container */
.car-card {
    background:         var(--bg);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-md);
    overflow:           hidden;
    transition:         var(--transition);
    position:           relative;
}

.car-card:hover {
    border-color:       rgba(204, 0, 0, 0.20);
    transform:          translateY(-6px);
    box-shadow:         var(--shadow-lg);
}

/* ── Card Image Section ── */
.cc-img {
    position:           relative;
    height:             196px;
    overflow:           hidden;
    cursor:             pointer;
}

.cc-img img {
    width:              100%;
    height:             100%;
    object-fit:         cover;
    transition:         transform 0.5s ease;
}

.car-card:hover .cc-img img {
    transform:          scale(1.07);
}

/* Gradient overlay on image */
.cc-overlay {
    position:           absolute;
    inset:              0;
    background:         linear-gradient(
                            transparent 55%,
                            rgba(0, 0, 0, 0.35)
                        );
    pointer-events:     none;
}

/* Photo count badge */
.cc-count {
    position:           absolute;
    bottom:             10px;
    left:               10px;
    background:         rgba(0, 0, 0, 0.6);
    backdrop-filter:    blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding:            3px 9px;
    border-radius:      var(--radius-full);
    font-size:          var(--font-size-xs);
    color:              #ffffff;
    display:            flex;
    align-items:        center;
    gap:                4px;
    z-index:            2;
}

/* Car badge (Featured, Premium, Sale, etc.) */
.cc-badge {
    position:           absolute;
    top:                10px;
    left:               10px;
    padding:            3px 10px;
    border-radius:      var(--radius-full);
    font-size:          var(--font-size-xs);
    font-weight:        700;
    text-transform:     uppercase;
    letter-spacing:     0.3px;
    z-index:            2;
}

/* Badge colour variants */
.badge-feat {
    background:         var(--gradient-red);
    color:              #ffffff;
}

.badge-prem {
    background:         var(--dark);
    color:              #ffffff;
}

.badge-sale {
    background:         var(--green);
    color:              #ffffff;
}

.badge-sold {
    background:         #666666;
    color:              #ffffff;
}

.badge-reserved {
    background:         var(--orange);
    color:              #ffffff;
}

/* Save / Heart button on card */
.cc-save {
    position:           absolute;
    top:                10px;
    right:              10px;
    width:              34px;
    height:             34px;
    background:         rgba(255, 255, 255, 0.9);
    backdrop-filter:    blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border:             none;
    border-radius:      50%;
    cursor:             pointer;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          15px;
    transition:         var(--transition);
    z-index:            2;
    color:              var(--text-3);
}

.cc-save:hover,
.cc-save.saved {
    background:         var(--primary);
    color:              #ffffff;
    transform:          scale(1.1);
}

/* ── Card Body ── */
.cc-body {
    padding:            18px;
}

.cc-body h3 {
    font-size:          17px;
    font-weight:        800;
    margin-bottom:      10px;
    cursor:             pointer;
    transition:         var(--transition);
    color:              var(--text);
    line-height:        1.3;
}

.cc-body h3:hover {
    color:              var(--primary);
}

/* ── Price Section ── */
.cc-price {
    display:            flex;
    align-items:        baseline;
    gap:                8px;
    margin-bottom:      10px;
}

.cc-price .price {
    font-size:          22px;
    font-weight:        900;
    color:              var(--text);
    letter-spacing:     -0.5px;
}

.cc-price .plabel {
    font-size:          var(--font-size-sm);
    color:              var(--text-muted);
    font-weight:        400;
}

/* ── Card Footer (Save + View buttons) ── */
.cc-foot {
    display:            flex;
    gap:                8px;
    margin-top:         4px;
}

.cc-foot button {
    flex:               1;
    padding:            9px;
    border-radius:      var(--radius-sm);
    font-size:          13px;
    font-weight:        600;
    cursor:             pointer;
    transition:         var(--transition);
    font-family:        var(--font-family);
    border:             none;
}

/* Save button (grey) */
.btn-save2 {
    background:         var(--bg-2);
    border:             1.5px solid var(--border) !important;
    color:              var(--text-2);
}

.btn-save2:hover {
    border-color:       var(--primary) !important;
    color:              var(--primary);
    background:         var(--primary-faint);
}

/* View Car button (red) */
.btn-view {
    background:         var(--gradient-red);
    color:              #ffffff;
    box-shadow:         0 2px 8px rgba(204, 0, 0, 0.18);
}

.btn-view:hover {
    box-shadow:         var(--shadow-red);
    transform:          translateY(-1px);
}

/* Car card grid */
.car-grid {
    display:            grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap:                22px;
}


/* ============================================================
   3. FORM FIELDS
   Individual input, select, and textarea field styling.
============================================================ */

/* Field wrapper */
.f-field {
    margin-bottom:      14px;
}

/* Label */
.f-field label {
    display:            block;
    font-size:          var(--font-size-sm);
    font-weight:        700;
    color:              var(--text-2);
    margin-bottom:      5px;
    letter-spacing:     0.2px;
}

/* Inputs, selects, textareas */
.f-field input,
.f-field select,
.f-field textarea {
    width:              100%;
    background:         var(--bg-2);
    border:             1.5px solid var(--border);
    color:              var(--text);
    padding:            11px 14px;
    border-radius:      var(--radius-sm);
    font-size:          var(--font-size-base);
    font-family:        var(--font-family);
    transition:         var(--transition);
    outline:            none;
}

/* Textarea specific */
.f-field textarea {
    resize:             vertical;
    min-height:         110px;
    line-height:        1.6;
}

/* Placeholder */
.f-field input::placeholder,
.f-field textarea::placeholder {
    color:              var(--text-muted);
}

/* Focus state */
.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus {
    border-color:       var(--primary);
    box-shadow:         0 0 0 3px rgba(204, 0, 0, 0.08);
    background:         var(--bg);
}

/* Error state */
.f-field input.err,
.f-field select.err,
.f-field textarea.err {
    border-color:       var(--red-danger);
    box-shadow:         0 0 0 3px var(--red-danger-bg);
}

/* Error message text */
.f-err {
    font-size:          var(--font-size-xs);
    color:              var(--red-danger);
    margin-top:         4px;
    display:            none;
    font-weight:        500;
}

/* Show error when field has error */
.f-field input.err ~ .f-err,
.f-field select.err ~ .f-err,
.f-field textarea.err ~ .f-err {
    display:            block;
}

/* Select dropdown arrow */
.f-field select {
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 14px center;
    padding-right:      38px;
    cursor:             pointer;
}

/* Two-column form row */
.f-row {
    display:            grid;
    grid-template-columns: 1fr 1fr;
    gap:                14px;
    margin-bottom:      14px;
}

/* Field hint text */
.field-hint {
    font-size:          var(--font-size-xs);
    color:              var(--text-muted);
    margin-bottom:      8px;
    line-height:        1.5;
}


/* ============================================================
   4. FORM BOX / WRAPPER
   The containing card/box around form groups.
   Used on Contact, Sell Your Car, and Admin pages.
============================================================ */

.form-box {
    background:         var(--bg);
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-lg);
    padding:            36px;
    box-shadow:         var(--shadow-sm);
}

.form-box h3 {
    font-size:          19px;
    font-weight:        800;
    margin-bottom:      22px;
    color:              var(--text);
}


/* ============================================================
   5. SUBMIT BUTTON
   Full-width form submission button with loading spinner.
============================================================ */

.btn-submit {
    width:              100%;
    padding:            14px;
    background:         var(--gradient-red);
    color:              #ffffff;
    border:             none;
    border-radius:      var(--radius-sm);
    font-size:          15px;
    font-weight:        700;
    cursor:             pointer;
    font-family:        var(--font-family);
    transition:         var(--transition);
    position:           relative;
    overflow:           hidden;
}

.btn-submit:hover:not(:disabled) {
    box-shadow:         var(--shadow-red);
    transform:          translateY(-2px);
}

.btn-submit:active:not(:disabled) {
    transform:          translateY(0) scale(0.98);
}

.btn-submit:disabled {
    opacity:            0.6;
    cursor:             not-allowed;
    transform:          none;
    box-shadow:         none;
}


/* ============================================================
   6. CHECKBOX
   Custom styled checkbox used in form agreements.
============================================================ */

.f-check {
    display:            flex;
    align-items:        flex-start;
    gap:                9px;
    margin-bottom:      18px;
    cursor:             pointer;
}

.f-check input[type="checkbox"] {
    width:              16px;
    height:             16px;
    accent-color:       var(--primary);
    cursor:             pointer;
    margin-top:         2px;
    flex-shrink:        0;
    appearance:         auto;
    -webkit-appearance: checkbox;
    -moz-appearance:    checkbox;
}

.f-check label {
    font-size:          13px;
    color:              var(--text-3);
    cursor:             pointer;
    line-height:        1.5;
}

.f-check a {
    color:              var(--primary);
    text-decoration:    none;
    font-weight:        500;
}

.f-check a:hover {
    text-decoration:    underline;
}


/* ============================================================
   7. MODAL — GLOBAL
   Base modal styles used by success, confirmation, etc.
============================================================ */

/* Backdrop overlay */
.modal-bg {
    position:           fixed;
    inset:              0;
    background:         rgba(0, 0, 0, 0.45);
    z-index:            var(--z-modal);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    opacity:            0;
    pointer-events:     none;
    transition:         opacity 0.3s ease;
    padding:            20px;
}

.modal-bg.open {
    opacity:            1;
    pointer-events:     all;
}

/* Modal box */
.modal-box {
    background:         var(--bg);
    border-radius:      var(--radius-lg);
    padding:            48px 40px;
    text-align:         center;
    max-width:          420px;
    width:              100%;
    box-shadow:         var(--shadow-xl);
    transform:          scale(0.92);
    transition:         transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-bg.open .modal-box {
    transform:          scale(1);
}

/* Success icon circle */
.modal-ico {
    width:              68px;
    height:             68px;
    border-radius:      50%;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          30px;
    margin:             0 auto 18px;
}

.modal-ico.success-ico {
    background:         var(--green-bg);
    color:              var(--green);
    animation:          popIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal headings */
.modal-box h3 {
    font-size:          22px;
    font-weight:        800;
    margin-bottom:      8px;
    color:              var(--text);
}

.modal-box p {
    font-size:          var(--font-size-base);
    color:              var(--text-3);
    line-height:        1.65;
    margin-bottom:      26px;
}


/* ============================================================
   8. MODAL — BOOK ACTION
   The booking modal (viewing, test drive, purchase).
============================================================ */

.book-modal-box {
    max-width:          480px;
    text-align:         left !important;
    padding:            36px;
}

.book-modal-box h3 {
    font-size:          20px;
    font-weight:        800;
    text-align:         left;
    margin-bottom:      20px;
    color:              var(--text);
}

/* Booking type selector buttons */
.book-type-btns {
    display:            grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                8px;
    margin-bottom:      22px;
}

.btype-btn {
    padding:            12px 8px;
    border:             1.5px solid var(--border);
    border-radius:      var(--radius-sm);
    background:         var(--bg-2);
    color:              var(--text-2);
    font-size:          12px;
    font-weight:        600;
    cursor:             pointer;
    text-align:         center;
    transition:         var(--transition);
    font-family:        var(--font-family);
    line-height:        1.4;
}

.btype-btn:hover,
.btype-btn.on {
    border-color:       var(--primary);
    background:         var(--primary-faint);
    color:              var(--primary);
}

/* Modal form action buttons row */
.modal-form-actions {
    display:            flex;
    gap:                10px;
}

.modal-form-actions .btn {
    flex:               1;
}

.modal-form-actions .btn-submit {
    border-radius:      var(--radius-xl);
}


/* ============================================================
   9. TOAST NOTIFICATIONS
   Slide-in notifications from the right side.
   Injected by app.js toast() function.
============================================================ */

/* Container (fixed position) */
.toast-wrap {
    position:           fixed;
    top:                calc(var(--header-height) + 8px);
    right:              22px;
    z-index:            var(--z-toast);
    display:            flex;
    flex-direction:     column;
    gap:                8px;
    pointer-events:     none;
}

/* Individual toast */
.toast {
    background:         var(--bg);
    border:             1px solid var(--border);
    border-left:        3px solid var(--primary);
    border-radius:      var(--radius-sm);
    padding:            12px 18px;
    display:            flex;
    align-items:        center;
    gap:                10px;
    min-width:          280px;
    max-width:          360px;
    box-shadow:         var(--shadow-md);
    animation:          toastIn 0.35s ease;
    pointer-events:     all;
}

/* Success toast variant */
.toast.ok {
    border-left-color:  var(--green);
}

/* Dismissing toast */
.toast.out {
    animation:          toastOut 0.35s ease forwards;
}

/* Toast icon */
.toast-ico {
    font-size:          18px;
    flex-shrink:        0;
    line-height:        1;
}

/* Toast message text */
.toast-txt {
    font-size:          13px;
    font-weight:        500;
    color:              var(--text-2);
    line-height:        1.4;
}


/* ============================================================
   10. AUTOTRADER BAR
   Price rating bar shown on car cards and detail pages.
============================================================ */

.at-bar {
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    padding:            7px 11px;
    border-radius:      var(--radius-sm);
    font-size:          var(--font-size-sm);
    font-weight:        600;
    margin-bottom:      10px;
}

/* Good price variant */
.at-good {
    background:         rgba(22, 163, 74, 0.08);
    border:             1px solid rgba(22, 163, 74, 0.20);
}

.at-good .at-rating {
    color:              var(--green);
}

/* Great price variant */
.at-great {
    background:         rgba(22, 163, 74, 0.12);
    border:             1px solid rgba(22, 163, 74, 0.30);
}

.at-great .at-rating {
    color:              #14913d;
}

/* AutoTrader label (left side) */
.at-lbl {
    color:              var(--text-muted);
    font-weight:        500;
}


/* ============================================================
   11. RESERVE BOX
   Dashed box on car cards for the £99 reserve message.
============================================================ */

.res-box {
    background:         var(--primary-faint);
    border:             1.5px dashed rgba(204, 0, 0, 0.25);
    border-radius:      var(--radius-sm);
    padding:            10px;
    margin-bottom:      14px;
    text-align:         center;
}

.res-box strong {
    font-size:          13px;
    color:              var(--primary);
    display:            block;
    font-weight:        700;
}

.res-box span {
    font-size:          var(--font-size-xs);
    color:              var(--text-muted);
}


/* ============================================================
   12. SPEC TAGS
   Small pill-shaped tags showing car specs (year, fuel, etc.)
============================================================ */

.specs {
    display:            flex;
    flex-wrap:          wrap;
    gap:                5px;
    margin-bottom:      14px;
}

.spec {
    background:         var(--bg-2);
    border:             1px solid var(--border);
    padding:            3px 9px;
    border-radius:      var(--radius-full);
    font-size:          var(--font-size-xs);
    color:              var(--text-3);
    font-weight:        400;
    white-space:        nowrap;
}


/* ============================================================
   13. STATUS BADGES
   Coloured inline badges for status indicators.
   Used in admin tables.
============================================================ */

.status-badge {
    display:            inline-flex;
    align-items:        center;
    gap:                4px;
    padding:            3px 10px;
    border-radius:      var(--radius-full);
    font-size:          var(--font-size-xs);
    font-weight:        600;
    text-transform:     capitalize;
    white-space:        nowrap;
}

.sb-active {
    background:         var(--green-bg);
    color:              var(--green);
}

.sb-reserved {
    background:         var(--orange-bg);
    color:              var(--orange);
}

.sb-sold {
    background:         rgba(0, 0, 0, 0.06);
    color:              #888888;
}

.sb-featured {
    background:         var(--primary-faint);
    color:              var(--primary);
}

.sb-unread {
    background:         var(--blue-bg);
    color:              var(--blue);
}

.sb-read {
    background:         rgba(0, 0, 0, 0.04);
    color:              #999999;
}

.sb-premium {
    background:         rgba(0, 0, 0, 0.08);
    color:              var(--dark-3);
}


/* ============================================================
   14. ACTION BUTTONS (ADMIN)
   Small icon buttons for table row actions (edit, delete).
============================================================ */

.action-btns {
    display:            flex;
    gap:                6px;
}

.action-btn {
    width:              32px;
    height:             32px;
    border-radius:      var(--radius-sm);
    border:             1.5px solid var(--border);
    background:         var(--bg);
    cursor:             pointer;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          14px;
    transition:         var(--transition);
    color:              var(--text-3);
}

.action-btn:hover {
    border-color:       var(--primary);
    color:              var(--primary);
    background:         var(--primary-faint);
}

/* Delete variant */
.action-btn.del:hover {
    border-color:       var(--red-danger);
    color:              var(--red-danger);
    background:         var(--red-danger-bg);
}


/* ============================================================
   15. LIGHTBOX
   Full-screen image viewer for car gallery.
============================================================ */

.lightbox {
    position:           fixed;
    inset:              0;
    background:         rgba(0, 0, 0, 0.92);
    z-index:            var(--z-lightbox);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    opacity:            0;
    pointer-events:     none;
    transition:         opacity 0.3s ease;
}

.lightbox.open {
    opacity:            1;
    pointer-events:     all;
}

/* Lightbox image */
.lightbox img {
    max-width:          90vw;
    max-height:         88vh;
    border-radius:      var(--radius-md);
    object-fit:         contain;
    animation:          scaleIn 0.3s ease both;
}

/* Close button */
.lb-close {
    position:           absolute;
    top:                20px;
    right:              24px;
    background:         rgba(255, 255, 255, 0.10);
    border:             1px solid rgba(255, 255, 255, 0.15);
    color:              #ffffff;
    width:              44px;
    height:             44px;
    border-radius:      50%;
    font-size:          20px;
    cursor:             pointer;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    transition:         var(--transition);
    z-index:            2;
}

.lb-close:hover {
    background:         var(--primary);
    border-color:       var(--primary);
}

/* Previous / Next arrows */
.lb-prev,
.lb-next {
    position:           absolute;
    top:                50%;
    transform:          translateY(-50%);
    width:              48px;
    height:             48px;
    background:         rgba(255, 255, 255, 0.08);
    border:             1px solid rgba(255, 255, 255, 0.12);
    border-radius:      50%;
    color:              #ffffff;
    font-size:          22px;
    cursor:             pointer;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    transition:         var(--transition);
    z-index:            2;
}

.lb-prev {
    left:               24px;
}

.lb-next {
    right:              24px;
}

.lb-prev:hover,
.lb-next:hover {
    background:         var(--primary);
    border-color:       var(--primary);
    transform:          translateY(-50%) scale(1.1);
}

/* Lightbox counter */
.lb-counter {
    position:           absolute;
    bottom:             24px;
    left:               50%;
    transform:          translateX(-50%);
    background:         rgba(0, 0, 0, 0.55);
    backdrop-filter:    blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color:              #ffffff;
    padding:            6px 16px;
    border-radius:      var(--radius-full);
    font-size:          var(--font-size-sm);
    font-weight:        600;
    z-index:            2;
}


/* ============================================================
   16. EMPTY STATE
   Shown when a list or table has no data.
============================================================ */

.empty-state {
    text-align:         center;
    padding:            48px 20px;
}

.empty-state .empty-ico {
    font-size:          48px;
    margin-bottom:      12px;
    opacity:            0.5;
    line-height:        1;
}

.empty-state h3 {
    font-size:          18px;
    font-weight:        700;
    margin-bottom:      6px;
    color:              var(--text-2);
}

.empty-state p {
    font-size:          var(--font-size-base);
    color:              var(--text-muted);
    max-width:          300px;
    margin:             0 auto;
}


/* ============================================================
   17. TOOLTIP
   Simple CSS tooltip using data-tooltip attribute.
   Usage: <button data-tooltip="My Tooltip">
============================================================ */

[data-tooltip] {
    position:           relative;
}

[data-tooltip]::after {
    content:            attr(data-tooltip);
    position:           absolute;
    bottom:             calc(100% + 8px);
    left:               50%;
    transform:          translateX(-50%);
    background:         var(--dark);
    color:              #ffffff;
    padding:            5px 10px;
    border-radius:      var(--radius-xs);
    font-size:          var(--font-size-xs);
    font-weight:        500;
    white-space:        nowrap;
    opacity:            0;
    pointer-events:     none;
    transition:         opacity 0.2s ease, transform 0.2s ease;
    z-index:            50;
    transform:          translateX(-50%) translateY(4px);
}

[data-tooltip]:hover::after {
    opacity:            1;
    transform:          translateX(-50%) translateY(0);
}


/* ============================================================
   18. FILTER TABS
   Horizontal tab buttons used for filtering car listings.
============================================================ */

.filter-row {
    display:            flex;
    gap:                8px;
    margin-bottom:      28px;
    flex-wrap:          wrap;
}

.ftab {
    padding:            7px 18px;
    border-radius:      var(--radius-xl);
    border:             1.5px solid var(--border);
    background:         var(--bg);
    color:              var(--text-3);
    font-size:          13px;
    font-weight:        500;
    cursor:             pointer;
    transition:         var(--transition);
    font-family:        var(--font-family);
    white-space:        nowrap;
}

.ftab:hover {
    border-color:       var(--primary);
    color:              var(--primary);
}

/* Active / selected tab */
.ftab.on {
    background:         var(--gradient-red);
    border-color:       transparent;
    color:              #ffffff;
    box-shadow:         var(--shadow-red);
}


/* ============================================================
   19. SORT BUTTONS
   Used on stock page to sort by price.
============================================================ */

.sort-btn {
    padding:            10px 18px;
    border-radius:      var(--radius-sm);
    border:             1.5px solid var(--border);
    background:         var(--bg);
    color:              var(--text-3);
    font-size:          13px;
    font-weight:        500;
    cursor:             pointer;
    transition:         var(--transition);
    font-family:        var(--font-family);
    white-space:        nowrap;
}

.sort-btn:hover,
.sort-btn.on {
    border-color:       var(--primary);
    color:              var(--primary);
    background:         var(--primary-faint);
}


/* ============================================================
   20. RESPONSIVE — COMPONENTS
   Adjusts component sizes and layouts for smaller screens.
============================================================ */

/* Tablet */
@media (max-width: 1024px) {

    .car-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap:                18px;
    }
}

/* Mobile */
@media (max-width: 768px) {

    /* Forms */
    .f-row {
        grid-template-columns: 1fr;
    }

    .form-box {
        padding:            24px;
    }

    /* Modals */
    .modal-box {
        padding:            32px 24px;
    }

    .book-modal-box {
        padding:            28px 22px;
    }

    .book-type-btns {
        grid-template-columns: 1fr;
    }

    .modal-form-actions {
        flex-direction:     column;
    }

    /* Car grid */
    .car-grid {
        grid-template-columns: 1fr;
        gap:                16px;
    }

    /* Lightbox arrows */
    .lb-prev {
        left:               12px;
    }

    .lb-next {
        right:              12px;
    }

    .lb-prev,
    .lb-next {
        width:              40px;
        height:             40px;
        font-size:          18px;
    }

    /* Filter tabs — horizontal scroll */
    .filter-row {
        flex-wrap:          nowrap;
        overflow-x:         auto;
        padding-bottom:     8px;
        -webkit-overflow-scrolling: touch;
    }

    /* Toast */
    .toast {
        min-width:          240px;
        max-width:          300px;
    }

    .toast-wrap {
        right:              12px;
    }
}

/* Small mobile */
@media (max-width: 480px) {

    .cc-img {
        height:             170px;
    }

    .cc-body {
        padding:            14px;
    }

    .cc-price .price {
        font-size:          20px;
    }

    .btn-lg {
        padding:            12px 26px;
        font-size:          14px;
    }

    .modal-box {
        padding:            28px 20px;
    }
}

/* ============================================================
   COOKIE CONSENT BANNER
============================================================ */

.cookie-banner {
    position:           fixed;
    bottom:             0;
    left:               0;
    right:              0;
    background:         var(--dark);
    z-index:            9000;
    padding:            18px 0;
    box-shadow:         0 -4px 24px rgba(0,0,0,0.15);
    transform:          translateY(100%);
    transition:         transform 0.5s cubic-bezier(0.4,0,0.2,1);
    border-top:         3px solid var(--primary);
}

.cookie-banner.show {
    transform:          translateY(0);
}

.cookie-inner {
    max-width:          1280px;
    margin:             0 auto;
    padding:            0 24px;
    display:            flex;
    align-items:        center;
    justify-content:    space-between;
    gap:                24px;
    flex-wrap:          wrap;
}

.cookie-left {
    display:            flex;
    align-items:        flex-start;
    gap:                14px;
    flex:               1;
    min-width:          280px;
}

.cookie-icon {
    font-size:          28px;
    flex-shrink:        0;
    line-height:        1;
    margin-top:         2px;
}

.cookie-text strong {
    display:            block;
    font-size:          14px;
    font-weight:        700;
    color:              #ffffff;
    margin-bottom:      4px;
}

.cookie-text p {
    font-size:          13px;
    color:              rgba(255,255,255,0.6);
    line-height:        1.55;
    max-width:          600px;
}

.cookie-text a {
    color:              var(--primary);
    text-decoration:    none;
    font-weight:        500;
}

.cookie-text a:hover {
    text-decoration:    underline;
}

.cookie-actions {
    display:            flex;
    gap:                10px;
    flex-shrink:        0;
    flex-wrap:          wrap;
}

.cookie-btn-decline {
    padding:            10px 22px;
    border-radius:      var(--radius-xl);
    border:             1.5px solid rgba(255,255,255,0.2);
    background:         transparent;
    color:              rgba(255,255,255,0.7);
    font-size:          13px;
    font-weight:        600;
    cursor:             pointer;
    font-family:        var(--font-family);
    transition:         var(--transition);
}

.cookie-btn-decline:hover {
    border-color:       rgba(255,255,255,0.5);
    color:              #ffffff;
}

.cookie-btn-accept {
    padding:            10px 22px;
    border-radius:      var(--radius-xl);
    border:             none;
    background:         var(--gradient-red);
    color:              #ffffff;
    font-size:          13px;
    font-weight:        700;
    cursor:             pointer;
    font-family:        var(--font-family);
    transition:         var(--transition);
    box-shadow:         var(--shadow-red);
}

.cookie-btn-accept:hover {
    transform:          translateY(-2px);
    box-shadow:         0 8px 20px rgba(204,0,0,0.3);
}

/* Responsive */
@media (max-width: 600px) {
    .cookie-inner {
        flex-direction:     column;
        gap:                16px;
    }
    .cookie-actions {
        width:              100%;
        justify-content:    stretch;
    }
    .cookie-btn-decline,
    .cookie-btn-accept {
        flex:               1;
        text-align:         center;
    }
}