/**
 * MHM Rentiva - Core Vehicle Card Styles
 * Standardized component used across Grid, List, Search, and Featured modules.
 * 
 * Structure:
 * .mhm-vehicle-card
 *   ├── .mhm-card-image
 *   │     ├── img
 *   │     ├── .mhm-card-badges
 *   │     └── .mhm-card-favorite
 *   └── .mhm-card-content
 *         ├── .mhm-card-header (Title, Category, Price)
 *         ├── .mhm-card-features
 *         └── .mhm-card-footer (Button)
 */

/* =========================================
   Base Variables (Scoped)
   ========================================= */
.mhm-vehicle-card {
    /* Isolation: Reset all inherited styles from theme */
    all: unset;

    /* Restore Essential Properties */
    display: flex;
    box-sizing: border-box;
    font-family: inherit;
    width: 100%;
    /* Ensure it takes full width of container */

    /* v1.1: Full height for equal CTA alignment in grid */
    height: 100%;

    /* Scoped Variables */
    --mhm-card-bg: var(--mhm-white, #ffffff);
    --mhm-card-border: var(--mhm-gray-200, #e5e7eb);
    --mhm-card-radius: 12px;
    --mhm-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --mhm-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --mhm-btn-height: 48px;
    --mhm-btn-min-height: 48px;
    --mhm-transition: all 0.3s ease;

    /* v1.1: Stabilized title height */
    --mhm-title-line-height: 1.3;
    --mhm-title-lines: 2;
    /* v1.1: Fixed chips row height */
    --mhm-chips-height: 32px;

    position: relative;
    background: var(--mhm-card-bg);
    border: 1px solid var(--mhm-card-border);
    border-radius: var(--mhm-card-radius);
    overflow: hidden;
    transition: var(--mhm-transition);
    flex-direction: column;
}

.mhm-vehicle-card *,
.mhm-vehicle-card *:before,
.mhm-vehicle-card *:after {
    box-sizing: border-box;
}

.mhm-vehicle-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mhm-card-shadow-hover);
}

/* =========================================
   Image Section
   ========================================= */
.mhm-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--mhm-gray-100, #f3f4f6);
}

/* Specificity (0,2,1) — beats .elementor img { height: auto } (0,1,1) */
.mhm-vehicle-card .mhm-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.mhm-vehicle-card:hover .mhm-card-image img {
    transform: scale(1.05);
}

/* Badges (Top Left) */
.mhm-card-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
}

.mhm-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mhm-badge--featured {
    background-color: var(--mhm-primary, #2563eb);
}

.mhm-badge--unavailable {
    background-color: var(--mhm-error, #ef4444);
}

/* Favorite Button (Top Right) */
.mhm-vehicle-card .mhm-card-favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--mhm-transition);
    color: var(--mhm-gray-400, #9ca3af);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mhm-card-favorite:hover {
    color: var(--mhm-error, #ef4444);
    transform: scale(1.1);
}

.mhm-card-favorite.is-active {
    color: var(--mhm-error, #ef4444);
}

/* Placeholder Icon */
.mhm-placeholder-svg {
    width: 48px;
    height: 48px;
    color: var(--mhm-gray-300, #d1d5db);
    transition: var(--mhm-transition);
}

/* Favorite Heart Icon - Explicit Color Overrides */
.mhm-card-favorite svg {
    /* Reset Theme Overrides for SVGs */
    max-width: unset !important;
    max-height: unset !important;
    min-width: unset !important;
    min-height: unset !important;

    /* No width/height here on purpose. This rule used to pin the heart at
       18px !important while the compare icon's rule below asked for 16px
       WITHOUT !important -- so the heart won at 18 and the compare icon lost
       to Icons::get()'s inline 20px default, and two different sizes sat in
       identical 32px circles. The size is now stated once, at the call site
       (templates/partials/vehicle-card.php, templates/shortcodes/vehicle-details.php,
       and the add-on's templates/partials/transfer-card.php), where an inline
       style wins without anyone having to out-!important anyone. The resets
       above stay: they defend against theme rules like `svg { max-width: 100% }`,
       which an inline width alone would not survive. */
    transition: var(--mhm-transition);
    /* Inactive: Red Outline Only */
    stroke: #ef4444 !important;
    fill: none !important;
}

.mhm-card-favorite.is-active svg {
    /* Active: Solid Red Fill + Stroke */
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

/* ===========================================
   Actions Overlay Container (Favorite + Compare)
   =========================================== */
.mhm-card-actions-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
    /* Allow click-through to image link */
}

.mhm-card-actions-overlay>* {
    pointer-events: auto;
    /* Re-enable on child buttons */
}

/* Compare Button (Below Favorite, Top Right) */
.mhm-vehicle-card .mhm-card-compare {
    position: absolute;
    top: 52px;
    right: 12px;
    z-index: 10;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--mhm-transition);
    color: var(--mhm-gray-400, #9ca3af);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mhm-card-compare:hover {
    color: var(--mhm-primary, #2563eb);
    transform: scale(1.1);
}

.mhm-card-compare.is-active,
.mhm-card-compare.active {
    color: var(--mhm-primary, #2563eb);
    background: rgba(255, 255, 255, 1);
}

/* Compare SVG Sizing */
.mhm-card-compare .mhm-compare-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: var(--mhm-transition);
}

/* When favorite is hidden, compare moves to top position */
.mhm-card-actions-overlay>.mhm-card-compare:first-child {
    top: 12px;
}

/* List View Constraints */
.mhm-card--list .mhm-card-features {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

/* =========================================
   Content Section
   ========================================= */
.mhm-card-content {
    padding: 1.25rem;
    padding-bottom: 1rem;
    /* Tighter bottom spacing for compact cards */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* v1.1: Ensure content stretches to fill card height */
    min-height: 0;
}

/* Header */
.mhm-card-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--mhm-primary, #2563eb);
    margin-bottom: 4px;
}

.mhm-card-brand {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
    color: var(--mhm-text-secondary, #6b7280);
}

.mhm-card-title {
    margin: 0;
    font-size: 1.125rem;
    /* 18px */
    font-weight: 700;
    line-height: var(--mhm-title-line-height, 1.3);
    color: var(--mhm-text-primary, #1f2937);

    /* v1.1: 2-line clamp for consistent height */
    display: -webkit-box;
    -webkit-line-clamp: var(--mhm-title-lines, 2);
    line-clamp: var(--mhm-title-lines, 2);
    /* Standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Reserve space for 2 lines: font-size * line-height * 2 */
    min-height: calc(1.125rem * var(--mhm-title-line-height, 1.3) * var(--mhm-title-lines, 2));
}

.mhm-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.mhm-card-title a:hover {
    color: var(--mhm-primary, #2563eb);
}

/* Price */
.mhm-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
}

.mhm-price-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mhm-price-color, #2563eb);
}

.mhm-price-period {
    font-size: 0.875rem;
    color: var(--mhm-text-secondary, #6b7280);
    font-weight: 500;
}

/* Location — always on its own line below title */
.mhm-card-location {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    font-size: 12px;
    color: var(--mhm-text-secondary, #6b7280);
}

/* Rating Stars */
/* Rating Stars */
.mhm-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.mhm-rating-count {
    font-size: 11px;
    /* Further reduced from 0.85em */
    color: var(--mhm-text-secondary, #6b7280);
    font-weight: 500;
    margin-top: 1px;
    /* Optical alignment */
}

/* Rating Confidence Label (v1.3.1) */
.mhm-rating-confidence {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.4;
    cursor: default;
}

.mhm-confidence--new {
    background: #fef3c7;
    color: #92400e;
}

.mhm-confidence--reliable {
    background: #d1fae5;
    color: #065f46;
}

.mhm-confidence--high {
    background: #dbeafe;
    color: #1e40af;
}

.mhm-stars {
    display: inline-flex;
    gap: 1px;
    align-items: center;
}

.mhm-stars .rv-star {
    color: var(--mhm-gray-300, #d1d5db);
    display: flex;
    font-size: 13px;
    /* Slightly smaller stars */
}

.mhm-stars .rv-star svg {
    width: 1em;
    height: 1em;
}

.mhm-stars .rv-star.filled {
    color: var(--mhm-warning, #fbbf24) !important;
    /* Force yellow */
}

/* Features (Chips) */
.mhm-card-features {
    display: flex;
    flex-wrap: nowrap;
    /* v1.1: Force single row - never wrap */
    overflow: hidden;
    /* v1.1: Hide overflow cleanly */
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--mhm-gray-100, #f3f4f6);
    /* v1.1: Fixed height for alignment */
    height: var(--mhm-chips-height, 32px);
    min-height: var(--mhm-chips-height, 32px);
    max-height: var(--mhm-chips-height, 32px);
    align-items: center;
}

.mhm-feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--mhm-bg-secondary, #f3f4f6);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mhm-text-secondary, #4b5563);
    /* v1.1: Prevent chip from shrinking or wrapping text */
    flex-shrink: 0;
    white-space: nowrap;
}

.mhm-feature-chip svg {
    /* Reset Theme Overrides */
    max-width: unset !important;
    max-height: unset !important;

    width: 14px !important;
    height: 14px !important;
    overflow: visible !important;
    color: var(--mhm-text-secondary, #9ca3af);
    flex-shrink: 0;
}

/* Guard against external icon-font pseudo rules (e.g. [class*="icon-"]::before) */
.mhm-vehicle-card .mhm-feature-chip>.rv-icon::before,
.mhm-vehicle-card .mhm-feature-chip>.rv-icon::after {
    content: none !important;
}

.mhm-vehicle-card .mhm-feature-chip>.rv-icon {
    font-family: inherit !important;
}

/* Footer (Button) - v1.1: CTA anchored to bottom */
.mhm-card-footer {
    margin-top: auto;
    padding-top: 12px;
}

/* Strip wpautop <p> tag margins inside card content */
.mhm-card-content p,
.mhm-card-footer p {
    margin: 0;
    padding: 0;
}

.mhm-btn-booking {
    display: flex;
    /* Flex ensures vertical centering */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--mhm-btn-height);
    background-color: var(--mhm-btn-bg, #2563eb);
    color: var(--mhm-btn-color, #ffffff);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    text-decoration: none;
    transition: var(--mhm-transition);
    border: none;
    /* Reset borders */
    cursor: pointer;
    opacity: 1;
    /* Fix 'faded' issue */
}

.mhm-btn-booking:hover {
    background-color: var(--mhm-btn-hover-bg, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    color: var(--mhm-btn-color, #ffffff);
}

.mhm-btn-booking.is-disabled {
    background-color: var(--mhm-gray-400, #9ca3af);
    pointer-events: none;
    cursor: not-allowed;
}

/* =========================================
   Layout Modifiers - Hybrid List View
   ========================================= */

/**
 * Hybrid List Layout (Desktop):
 * ┌──────────────────────────────────────────────────────────────┐
 * │ ┌──────────┐  ┌─────────────────────────────────────────────┐│
 * │ │          │  │ Category                              ♥    ││
 * │ │  IMAGE   │  │ Vehicle Title                              ││
 * │ │  260px   │  │ ─────────────────────────────────          ││
 * │ │          │  │ 🔧 Auto  ⛽ Dizel  👥 5                     ││
 * │ │          │  │                                            ││
 * │ │          │  │ ₺500 /day              [  Book Now  ]      ││
 * │ └──────────┘  └─────────────────────────────────────────────┘│
 * └──────────────────────────────────────────────────────────────┘
 *
 * Key: Image (Left) | Vertical Stack (Right) — no horizontal overflow
 */

.mhm-card--list,
.rv-layout-list .mhm-vehicle-card {
    flex-direction: row !important;
    align-items: stretch;
    max-height: none;
    padding: 0;
    overflow: hidden;
    /* Prevent any horizontal overflow */
    width: 100%;
    /* v1.1: Fixed height for visible bottom alignment */
    min-height: 240px;
}

.mhm-card--list:hover {
    transform: translateY(-2px);
}

/* Column 1: Image (Fixed Width, never grows) */
.mhm-card--list .mhm-card-image,
.rv-layout-list .mhm-vehicle-card .mhm-card-image {
    width: 220px !important;
    min-width: 220px;
    max-width: 220px;
    flex: 0 0 220px;
    aspect-ratio: auto;
    border-radius: var(--mhm-card-radius) 0 0 var(--mhm-card-radius);
    overflow: hidden;
}

.mhm-card--list .mhm-card-image img {
    height: 100%;
    min-height: 160px;
}

/* Show favorite button on image in list view (top-right overlay) */
.mhm-card--list .mhm-card-image .mhm-card-favorite {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    /* Explicit hex colors — bypass theme CSS */
    color: #ef4444;
}

/* Column 2: Vertical Stack (Category → Title → Features → Divider → Price+Button) */
.mhm-card--list .mhm-card-content,
.rv-layout-list .mhm-vehicle-card .mhm-card-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 220px);
    display: flex;
    flex-direction: column !important;
    padding: 1rem 1.25rem;
    gap: 4px;
    /* v1.1: Make content fill full height of card */
    align-self: stretch;
    height: auto;
    min-height: 100%;
}

/* Main Content Area (Title + Features) — compact spacing */
.mhm-card--list .mhm-content-main,
.rv-layout-list .mhm-vehicle-card .mhm-content-main {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mhm-card--list .mhm-card-category {
    margin-bottom: 2px;
}

.mhm-card--list .mhm-card-title {
    font-size: 1.125rem;
    margin: 0;
    line-height: 1.3;
}

/* Features stay on single line */
.mhm-card--list .mhm-card-features,
.rv-layout-list .mhm-vehicle-card .mhm-card-features {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    border-top: none;
    padding-top: 4px;
    margin-top: 2px;
    gap: 6px;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

.mhm-card--list .mhm-feature-chip {
    flex-shrink: 0;
}

/* Actions Row: Price + Button — v1.1: anchored to bottom */
.mhm-card--list .mhm-card-footer,
.rv-layout-list .mhm-vehicle-card .mhm-card-footer {
    width: 100%;
    min-width: unset;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--mhm-gray-100, #f3f4f6);
    padding-top: 8px;
    flex-wrap: nowrap;
    /* v1.1: Anchor to bottom of card content */
    margin-top: auto;
}

/* Hide duplicate heart in actions row — heart is shown on image overlay instead */
.mhm-card--list .mhm-card-footer .mhm-card-favorite {
    display: none;
}

/* Price styling in List View — inline with button */
.mhm-card--list .mhm-card-price,
.rv-layout-list .mhm-vehicle-card .mhm-card-price {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 4px;
    margin-right: auto;
    white-space: nowrap;
}

.mhm-card--list .mhm-price-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mhm-price-color, #2563eb);
}

.mhm-card--list .mhm-price-period {
    font-size: 0.8rem;
    color: var(--mhm-text-secondary, #6b7280);
    white-space: nowrap;
}

.mhm-card--list .mhm-price-amount {
    white-space: nowrap;
}

/* Button in List View — auto width, pushed to right */
.mhm-card--list .mhm-btn-booking {
    width: auto;
    min-width: 140px;
    height: var(--mhm-btn-height, 48px);
    min-height: 48px;
    padding: 0 1.5rem;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* =========================================
   Responsive: List View Breakpoints
   ========================================= */

/* Tablet: Smaller image */
@media (max-width: 900px) {

    .mhm-card--list .mhm-card-image,
    .rv-layout-list .mhm-vehicle-card .mhm-card-image {
        width: 180px !important;
        min-width: 180px;
        max-width: 180px;
        flex: 0 0 180px;
    }

    .mhm-card--list .mhm-card-content,
    .rv-layout-list .mhm-vehicle-card .mhm-card-content {
        max-width: calc(100% - 180px);
    }
}

/* Mobile: Full stack layout (identical to grid) */
@media (max-width: 782px) {

    .mhm-card--list,
    .rv-layout-list .mhm-vehicle-card {
        flex-direction: column !important;
        max-height: none;
        min-height: auto;
    }

    .mhm-card--list .mhm-card-image,
    .rv-layout-list .mhm-vehicle-card .mhm-card-image {
        width: 100% !important;
        min-width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        aspect-ratio: 16/9;
        border-radius: var(--mhm-card-radius) var(--mhm-card-radius) 0 0;
    }

    .mhm-card--list .mhm-card-image img {
        min-height: unset;
    }

    .mhm-card--list .mhm-card-content,
    .rv-layout-list .mhm-vehicle-card .mhm-card-content {
        max-width: 100%;
        padding: 1rem;
        gap: 10px;
    }

    .mhm-card--list .mhm-content-main {
        width: 100%;
    }

    .mhm-card--list .mhm-card-footer,
    .rv-layout-list .mhm-vehicle-card .mhm-card-footer {
        flex-wrap: wrap;
    }

    .mhm-card--list .mhm-btn-booking {
        min-width: 120px;
    }
}

/* Small Mobile: Stack button full width */
@media (max-width: 480px) {

    .mhm-card--list .mhm-card-footer,
    .rv-layout-list .mhm-vehicle-card .mhm-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .mhm-card--list .mhm-card-price {
        margin-right: 0;
    }

    .mhm-card--list .mhm-btn-booking {
        width: 100%;
    }
}

/* =========================================
   Compact Mode (Modifier)
   ========================================= */
.rv-compact-mode .mhm-vehicle-card {
    --mhm-card-radius: 8px;
    --mhm-btn-height: 40px;
}

.rv-compact-mode .mhm-card-content {
    padding: 12px;
    gap: 8px;
}

.rv-compact-mode .mhm-card-title {
    font-size: 1rem;
}

.rv-compact-mode .mhm-price-amount {
    font-size: 1.1rem;
}

.rv-compact-mode .mhm-card-features {
    padding-top: 8px;
    /* Hide features in compact grid if too crowded? Keep for now as nowrap handles it */
}

.rv-compact-mode .mhm-feature-chip {
    padding: 2px 6px;
    font-size: 11px;
}

/* =========================================
   Accessibility Utilities
   ========================================= */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* =========================================================================
   BROADSHEET SKIN — design-system pilot (v5.2.0-dev)
   =========================================================================
   Scoped to the card on purpose: the rest of the plugin keeps its current
   palette until this system is rolled out component by component, so the
   pilot stays reversible.

   Every token prefers the active theme's WP preset and only falls back to
   the design system's own value, so the card harmonises with whatever theme
   it lands in instead of imposing a look. No webfont is loaded — the display
   face follows the theme's heading font and degrades to a serif.
   ========================================================================= */
.mhm-vehicle-card {
	--rv-surface: var(--wp--preset--color--surface, #f8f4f4);
	--rv-ink: var(--wp--preset--color--text, #201e1d);
	--rv-muted: color-mix(in srgb, var(--rv-ink) 60%, transparent);
	--rv-faint: color-mix(in srgb, var(--rv-ink) 42%, transparent);
	--rv-accent: var(--wp--preset--color--primary, #0088b0);
	--rv-accent-soft: color-mix(in srgb, var(--rv-accent) 12%, transparent);
	--rv-accent-ink: color-mix(in srgb, var(--rv-accent) 82%, #000);
	--rv-hair: color-mix(in srgb, var(--rv-ink) 9%, transparent);
	--rv-radius: 2px;
	--rv-display: var(--wp--preset--font-family--heading, Georgia, "Times New Roman", serif);

	background: var(--rv-surface);
	border: 1px solid var(--rv-hair);
	border-radius: var(--rv-radius);
	box-shadow: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
}

.mhm-vehicle-card:hover {
	box-shadow: 0 3px 12px color-mix(in srgb, #2d2b2b 15%, transparent);
}

/* Category reads as the card's eyebrow; brand stays quiet beside it. */
.mhm-vehicle-card .mhm-card-category {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rv-accent);
}

.mhm-vehicle-card .mhm-card-brand {
	font-size: 11px;
	color: var(--rv-faint);
}

.mhm-vehicle-card .mhm-card-title {
	font-family: var(--rv-display);
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Spec line — vehicle details (seats / transmission / fuel …). Plain, quiet,
   scannable; deliberately not chips so the price keeps the emphasis. */
.mhm-vehicle-card .mhm-card-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12.5px;
	color: var(--rv-muted);
}

.mhm-vehicle-card .mhm-spec-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.mhm-vehicle-card .mhm-spec-item svg {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--rv-faint);
}

/* Chips keep their pill treatment for when they are switched back on. */
.mhm-vehicle-card .mhm-feature-chip {
	background: color-mix(in srgb, var(--rv-ink) 5%, transparent);
	border: 1px solid var(--rv-hair);
	border-radius: 20px;
	font-size: 11.5px;
	color: var(--rv-muted);
	padding: 3px 9px;
}

/* Footer — a hairline separates the commercial row from the description. */
.mhm-vehicle-card .mhm-card-footer {
	border-top: 1px solid var(--rv-hair);
	padding-top: 11px;
}

/* Price above, full-width button below — always, in every grid card.
   Grid only; the list layout has its own row rules further up.

   This deliberately does not try to share a row when there is space. A
   wrapping row decides per card, and the deciding factor is the *price
   string*: cards in one row wrapped differently because "$850" fits beside
   the label and "$2.800" does not, so a row of otherwise identical cards
   came out ragged. Stacking is decided by structure rather than content, so
   every card in a grid agrees — and the label can never be squeezed or
   overflow, whatever the translation. */
.mhm-vehicle-card.mhm-card--grid .mhm-card-footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.mhm-vehicle-card.mhm-card--grid .mhm-card-price {
	justify-content: center;
}

.mhm-vehicle-card.mhm-card--grid .mhm-btn-booking {
	width: 100%;
	justify-content: center;
	white-space: normal;
}

.mhm-vehicle-card .mhm-price-amount {
	font-family: var(--rv-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--rv-ink);
}

.mhm-vehicle-card .mhm-price-period {
	font-size: 12px;
	color: var(--rv-muted);
}

.mhm-vehicle-card .mhm-btn-booking {
	background: var(--rv-accent);
	border: 1px solid var(--rv-accent);
	border-radius: var(--rv-radius);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	padding: 8px 16px;
	white-space: nowrap;
}

.mhm-vehicle-card .mhm-btn-booking:hover {
	background: color-mix(in srgb, var(--rv-accent) 88%, #000);
}

.mhm-vehicle-card .mhm-btn-booking.is-disabled {
	background: transparent;
	border-color: var(--rv-hair);
	color: var(--mhm-error, #b32d2e);
}