/* Desktop styles - applies to screens >= 1257px */
/* Breakpoint: 1257px (--breakpoint-desktop-min in order_form_common.css) */
/* Mobile CSS applies to screens <= 1257px (overlap at 1257px; desktop wins via cascade) */
/* Base styles are defined in radio_button_choices.css - only desktop-specific overrides here */
/*
 * Responsive Strategy:
 * - Mobile-first: Base styles target mobile, this file overrides for desktop
 * - Uses @media queries for consistent behavior across all browsers
 * - Consider container queries (@container) for component-level responsiveness in future
 */
@media screen and (min-width: 960px) {
    .order-form-vehicle-radio-btn {
        padding: var(--vehicle-btn-padding-desktop);
        gap: var(--vehicle-btn-gap-desktop);
        border-radius: var(--vehicle-btn-radius-desktop);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box; /* Ensure padding is included in width calculation */
        overflow: hidden; /* Prevent content from breaking out of card */
    }

    .desktop-only-details {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-md);
    }

    /* Hide mobile-only elements on desktop */
    .order-form-vehicle-radio-btn .mobile-only-details {
        display: none;
    }

    .order-form-vehicle-radio-btn-left-col {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        flex-shrink: 0;
    }

    .order-form-vehicle-radio-btn-left-col .vehicle-icon {
        width: var(--vehicle-icon-width-desktop);
        height: var(--vehicle-icon-height-desktop);
        object-fit: contain;
    }

    .order-form-vehicle-radio-btn-left-col .vehicle-icon-parcel {
        width: var(--vehicle-icon-parcel-width-desktop);
        height: var(--vehicle-icon-parcel-height-desktop);
        object-fit: contain;
    }

    .order-form-vehicle-radio-btn-content-wrapper {
        order: 2;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--vehicle-gap-lg);
        min-width: 0; /* Allow flex item to shrink below content size */
        max-width: 100%; /* Prevent overflow */
        overflow: visible; /* Changed to visible to allow icons container to scroll */
    }

    .order-form-vehicle-radio-btn-details-row {
        display: flex;
        flex-direction: row;
        gap: var(--vehicle-btn-gap-desktop);
        flex-wrap: nowrap; /* Prevent wrapping to keep columns in one row */
        min-width: 0; /* Allow flex item to shrink */
        max-width: 100%; /* Prevent overflow */
        align-items: flex-start; /* Align columns to top */
        width: 100%; /* Ensure full width */
    }

    .order-form-vehicle-radio-btn-second-col {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--vehicle-gap-sm);
        min-width: 120px; /* Reduced from 140px to give more space to icons */
        flex-shrink: 0; /* Prevent sizes column from shrinking */
        flex-grow: 0; /* Don't grow beyond content */
        width: auto; /* Auto width based on content */
    }

    .order-form-vehicle-radio-btn-third-col {
        flex: 1 1 auto; /* Allow column to grow to accommodate icons */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--vehicle-gap-sm);
        min-width: 160px; /* Reduced from 200px to allow more flexibility */
        max-width: 100%; /* Constrain to prevent overlap with price column */
        overflow: visible; /* Changed to visible to allow icons to scroll */
    }

    .order-form-vehicle-radio-btn-right-col {
        order: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        flex-shrink: 0;
        flex-grow: 0;
        min-width: 100px; /* Reduced from 120px to give more space to icons */
        max-width: fit-content; /* Prevent price column from expanding unnecessarily */
    }

    .order-form-vehicle-radio-btn .sizes-label,
    .order-form-vehicle-radio-btn .sample-items-label {
        display: block;
        font-size: 15px;
        font-weight: 600;
        line-height: 18px;
        color: var(--dark-text);
    }

    .order-form-vehicle-radio-btn-middle-content {
        flex: 1;
    }

    .vehicle-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-lg);
    }

    .vehicle-text-section {
        flex: none;
    }

    .order-form-vehicle-btn-title-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--vehicle-gap-md);
        flex-wrap: wrap;
    }

    .order-form-vehicle-btn-title {
        font-size: var(--vehicle-title-size-desktop);
        font-weight: 600;
        line-height: var(--vehicle-title-line-height-desktop);
        color: var(--dark-text);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .vehicle-card-badges-inline {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-xs);
        align-items: flex-start;
        margin-top: 2px;
    }


    .vehicle-info-stacked {
        display: grid;
        grid-template-columns: 1fr auto; /* Items column takes available space, badges column auto-sized */
        column-gap: var(--vehicle-gap-xxl);
        row-gap: var(--vehicle-gap-lg);
        align-items: start; /* Align to start to prevent vertical centering issues */
        width: 100%;
        max-width: 100%;
        min-width: 0; /* Allow grid to shrink */
    }

    .vehicle-items-section {
        display: block;
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0; /* Allow section to shrink if needed */
        max-width: 100%; /* Constrain to grid column width */
        overflow-x: auto; /* Allow horizontal scrolling if icons don't fit */
        overflow-y: visible;
        /* Ensure scrolling works properly */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .vehicle-items-section::-webkit-scrollbar {
        height: 4px;
    }

    .vehicle-items-section::-webkit-scrollbar-track {
        background: transparent;
    }

    .vehicle-items-section::-webkit-scrollbar-thumb {
        background: var(--outline-blue);
        border-radius: 2px;
    }

    /* Hide mobile items section on desktop - items shown in desktop section instead */
    .vehicle-items-section-mobile-sizes,
    .vehicle-items-section-mobile {
        display: none;
    }

    .vehicle-card-badges-mobile {
        display: none;
    }

    .vehicle-card-badges-inline {
        display: flex;
    }

    .vehicle-item-icons-container {
        overflow-x: auto; /* Allow horizontal scrolling if icons don't fit */
        overflow-y: visible;
        width: 100%;
        max-width: 100%; /* Constrain to parent width to prevent overlap */
        /* Smooth scrolling for better UX */
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        /* Ensure scrolling is always available */
        min-width: 0; /* Allow container to shrink */
    }

    .vehicle-item-icons-container::-webkit-scrollbar {
        height: 4px;
    }

    .vehicle-item-icons-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .vehicle-item-icons-container::-webkit-scrollbar-thumb {
        background: var(--outline-blue);
        border-radius: 2px;
    }

    .vehicle-item-icons-all {
        display: flex;
        flex-wrap: nowrap; /* Keep icons in a single row */
        gap: var(--vehicle-gap-xs); /* Reduced to 4px to decrease gaps between icons */
        width: fit-content; /* Allow row to expand to fit all icons */
        min-width: 0; /* Allow shrinking if needed */
    }

    .vehicle-item-icon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--vehicle-gap-6px); /* Reduced from sm (8px) to 6px to fit more icons */
        width: var(--vehicle-item-icon-wrapper-width-desktop);
        min-width: var(--vehicle-item-icon-wrapper-width-desktop);
        max-width: 85px; /* Allow more growth for longer labels (from 70px to 85px) */
        flex-shrink: 0; /* Prevent icons from shrinking */
    }

    .vehicle-item-icon {
        width: var(--vehicle-item-icon-size-desktop);
        height: var(--vehicle-item-icon-size-desktop);
        padding: var(--vehicle-gap-6px);
        border-radius: 50%;
        background-color: var(--outline-blue);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vehicle-item-icon img {
        width: var(--vehicle-item-icon-img-size-desktop);
        height: var(--vehicle-item-icon-img-size-desktop);
        filter: brightness(0);
    }

    .vehicle-item-label {
        font-size: 10px; /* Reduced from 11px to fit more icons */
        color: var(--dark-text);
        line-height: 12px; /* Reduced from 13px to match smaller font */
        text-align: center;
        white-space: normal;
        min-height: 22px; /* Minimum height for 2 lines */
        height: auto; /* Allow content to determine height */
        max-height: none; /* No truncation - show full content */
        overflow: visible; /* Show full content */
        width: 100%; /* Use full available width */
        /* Better word breaking for long translations - prefer hyphenation */
        word-wrap: break-word;
        overflow-wrap: break-word; /* Break long words when needed */
        hyphens: auto; /* Auto-hyphenate for better line breaks */
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        word-break: normal; /* Use normal word breaking first, then break-word if needed */
    }

    .vehicle-card-badges {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-md);
        align-items: flex-start;
        min-width: 180px;
        max-width: 100%;
        grid-column: 2;
        grid-row: 1;
        flex-shrink: 0; /* Prevent badges column from shrinking */
    }

    .vehicle-card-item-weight {
        height: 19px;
    }

    .order-form-vehicle-btn-dimensions {
        display: block;
        font-size: var(--vehicle-dimensions-size-desktop);
        font-weight: 500;
        line-height: 14px;
        color: var(--grey-light-text);
        margin-top: var(--vehicle-gap-xs);
    }

    .vehicle-warning-text-placeholder {
        height: var(--vehicle-warning-text-placeholder-height-desktop);
        min-height: var(--vehicle-warning-text-placeholder-height-desktop);
    }

    .order-form-vehicle-btn-more-info {
        font-size: 14px;
        line-height: 16px;
    }

    .order-form-vehicle-radio-btn .order-form-vehicle-btn-more-info a {
        text-decoration: underline;
    }

    /* Hide mobile price elements on desktop */
    .order-form-vehicle-radio-btn .order-form-vehicle-radio-btn-from-price-wrapper.vehicle-mobile-price {
        display: none;
    }

    .order-form-vehicle-radio-btn .vehicle-mobile-price-wrapper {
        display: none;
    }

    .vehicle-desktop-price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--vehicle-gap-xs); /* Reduced from 6px to 4px to make pricing more compact */
        min-width: fit-content;
    }

    .vehicle-desktop-price-prefix {
        font-size: var(--vehicle-price-prefix-size-desktop);
        font-weight: 500;
        line-height: 15px; /* Reduced from 18px to match smaller font */
        color: var(--grey-light-text);
    }

    .vehicle-desktop-price-amount {
        font-size: var(--vehicle-price-size-desktop);
        font-weight: 700;
        line-height: 24px; /* Reduced from 30px to match smaller font */
        color: var(--interaction-pink);
        white-space: nowrap;
    }
}

/* Small desktop screens (960px - 1256px) - optimize for smaller desktop/large tablet */
@media screen and (min-width: 960px) and (max-width: 1256px) {
    .order-form-vehicle-radio-btn {
        padding: 18px 20px; /* Reduced padding */
        gap: 16px; /* Reduced gap */
    }

    .order-form-vehicle-radio-btn-details-row {
        gap: 16px; /* Match reduced gap */
    }

    .order-form-vehicle-radio-btn-second-col {
        min-width: 120px; /* Smaller */
    }

    .order-form-vehicle-radio-btn-third-col {
        min-width: 160px; /* Smaller */
        max-width: none;
    }

    .order-form-vehicle-radio-btn-right-col {
        min-width: 90px; /* Smaller to give more space to icons */
    }

    .vehicle-info-stacked {
        column-gap: var(--vehicle-gap-lg); /* Reduced spacing */
    }

    .vehicle-card-badges {
        min-width: 150px; /* Smaller */
    }

    /* Further reduce icon sizes for smaller desktop */
    .vehicle-item-icon-wrapper {
        width: var(--vehicle-item-icon-wrapper-width-extra-compact); /* 60px - extra compact */
        min-width: var(--vehicle-item-icon-wrapper-width-extra-compact);
        max-width: 100%; /* Allow flexibility for longer labels */
    }

    .vehicle-item-icons-all {
        gap: var(--vehicle-gap-2px); /* Even smaller gap: 2px */
    }
}

/* Medium desktop screens (1257px - 1279px) - optimize spacing for narrower screens */
@media screen and (min-width: 1257px) and (max-width: 1279px) {
    .order-form-vehicle-radio-btn {
        padding: 18px 20px; /* Reduced padding */
        gap: 18px; /* Reduced gap */
    }

    .order-form-vehicle-radio-btn-details-row {
        gap: 16px; /* Reduced gap */
    }

    .order-form-vehicle-radio-btn-second-col {
        min-width: 115px; /* Further reduced */
    }

    .order-form-vehicle-radio-btn-third-col {
        min-width: 160px; /* Further reduced */
        max-width: none; /* Allow icons to display fully */
    }

    .order-form-vehicle-radio-btn-right-col {
        min-width: 85px; /* Further reduced */
    }

    .vehicle-info-stacked {
        column-gap: var(--vehicle-gap-md); /* Reduced to md */
    }

    .vehicle-card-badges {
        min-width: 145px; /* Further reduced */
    }

    /* Use ultra compact icon sizing for this range */
    .vehicle-item-icon-wrapper {
        width: var(--vehicle-item-icon-wrapper-width-ultra-compact); /* 58px */
        min-width: var(--vehicle-item-icon-wrapper-width-ultra-compact);
        max-width: 100%; /* Allow flexibility for longer labels */
    }

    .vehicle-item-icons-all {
        gap: var(--vehicle-gap-2px); /* 2px gap */
    }
}

/* Critical breakpoint (1280px - 1319px) - extra aggressive reductions to prevent icon cut-off */
/* Handles common screen sizes like 1280x800, 1280x720, etc. */
@media screen and (min-width: 1280px) and (max-width: 1319px) {
    .order-form-vehicle-radio-btn {
        padding: 18px 20px; /* Reduced padding */
        gap: 16px; /* Reduced gap */
    }

    .order-form-vehicle-radio-btn-details-row {
        gap: 14px; /* Further reduced gap */
    }

    .order-form-vehicle-radio-btn-second-col {
        min-width: 110px; /* Aggressively reduced */
    }

    .order-form-vehicle-radio-btn-third-col {
        min-width: 150px; /* Aggressively reduced */
        max-width: none; /* Allow icons to display fully */
    }

    .order-form-vehicle-radio-btn-right-col {
        min-width: 80px; /* Aggressively reduced */
    }

    .vehicle-info-stacked {
        column-gap: var(--vehicle-gap-md); /* Reduced to md */
    }

    .vehicle-card-badges {
        min-width: 140px; /* Aggressively reduced */
    }

    /* Use ultra compact icon sizing for this critical range */
    .vehicle-item-icon-wrapper {
        width: var(--vehicle-item-icon-wrapper-width-ultra-compact); /* 58px */
        min-width: var(--vehicle-item-icon-wrapper-width-ultra-compact);
        max-width: var(--vehicle-item-icon-wrapper-width-ultra-compact);
    }

    .vehicle-item-icons-all {
        gap: var(--vehicle-gap-2px); /* 2px gap */
    }
}

/* Medium desktop screens (1320px - 1399px) - optimize spacing for narrower screens */
/* Handles scaled displays like 2880x1800 at 200% (effective 1440px) */
@media screen and (min-width: 1320px) and (max-width: 1399px) {
    .order-form-vehicle-radio-btn {
        padding: 20px 24px; /* Slightly reduced padding */
        gap: 20px; /* Slightly reduced gap */
    }

    .order-form-vehicle-radio-btn-details-row {
        gap: 18px; /* Reduced from 20px */
    }

    .order-form-vehicle-radio-btn-second-col {
        min-width: 125px; /* Reduced from 130px */
    }

    .order-form-vehicle-radio-btn-third-col {
        min-width: 170px; /* Reduced from 180px */
        max-width: none; /* Allow icons to display fully */
    }

    .order-form-vehicle-radio-btn-right-col {
        min-width: 90px; /* Reduced from 95px to give more space to icons */
    }

    .vehicle-info-stacked {
        column-gap: var(--vehicle-gap-lg); /* Reduced from xl to lg */
    }

    .vehicle-card-badges {
        min-width: 155px; /* Reduced from 160px */
    }

    /* Use compact icon sizing for medium desktop */
    .vehicle-item-icon-wrapper {
        width: var(--vehicle-item-icon-wrapper-width-compact); /* 62px */
        min-width: var(--vehicle-item-icon-wrapper-width-compact);
        max-width: 100%; /* Allow flexibility for longer labels */
    }

    .vehicle-item-icons-all {
        gap: var(--vehicle-gap-2px); /* Even smaller gap: 2px */
    }
}

/* Large desktop screens (1400px - 1599px) - use compact icons to prevent cut-off */
@media screen and (min-width: 1400px) and (max-width: 1599px) {
    .order-form-vehicle-radio-btn {
        max-width: 100%; /* Use full width but with constraints */
    }

    .order-form-vehicle-radio-btn-details-row {
        gap: 18px; /* Reduced from 20px */
    }

    .order-form-vehicle-radio-btn-second-col {
        min-width: 125px; /* Further reduced */
    }

    .order-form-vehicle-radio-btn-third-col {
        min-width: 170px; /* Reduced from 180px */
        max-width: none; /* Allow icons to display fully */
    }

    .order-form-vehicle-radio-btn-right-col {
        min-width: 90px; /* Further reduced */
    }

    .vehicle-info-stacked {
        column-gap: var(--vehicle-gap-lg); /* Reduced from xl to lg */
    }

    .vehicle-card-badges {
        min-width: 155px; /* Reduced */
    }

    /* Use compact icon sizing for large desktop to prevent cut-off */
    .vehicle-item-icon-wrapper {
        width: var(--vehicle-item-icon-wrapper-width-compact); /* 62px */
        min-width: var(--vehicle-item-icon-wrapper-width-compact);
        max-width: var(--vehicle-item-icon-wrapper-width-compact);
    }

    .vehicle-item-icons-all {
        gap: var(--vehicle-gap-2px); /* Use 2px gap like compact breakpoints */
    }
}

/* Very large desktop screens (1600px - 1919px) - constrain card width and ensure proper spacing */
/* Prevents cards from stretching too wide on ultrawide displays */
@media screen and (min-width: 1600px) and (max-width: 1919px) {
    .order-form-vehicle-radio-btn {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    .order-form-vehicle-radio-btn-details-row {
        gap: 22px; /* Slightly reduced */
    }

    /* Ensure right column has adequate spacing and doesn't get cut off */
    .order-form-vehicle-radio-btn-right-col {
        min-width: 105px; /* Slightly reduced */
        padding-left: var(--vehicle-gap-md); /* Reduced from lg to md */
    }

    /* Prevent price text from wrapping */
    .vehicle-desktop-price {
        min-width: 100px; /* Reduced from 120px to give more space to icons */
    }

    .vehicle-desktop-price-amount {
        word-break: keep-all;
        overflow-wrap: normal;
    }

    /* Allow more space for items on very large screens */
    .order-form-vehicle-radio-btn-third-col {
        max-width: none; /* Allow icons to display fully */
    }

    .vehicle-info-stacked {
        column-gap: 36px; /* Reduced from 40px */
    }

    /* Standard icon sizes for very large desktop */
    .vehicle-item-icon-wrapper {
        width: var(--vehicle-item-icon-wrapper-width-desktop); /* 70px */
        max-width: 100%; /* Allow flexibility for longer labels */
    }

    .vehicle-item-icons-all {
        gap: var(--vehicle-gap-xs); /* 4px gap */
    }
}

/* Extra large/ultrawide screens (1920px+) - optimize for 4K and ultrawide displays */
@media screen and (min-width: 1920px) {
    .order-form-vehicle-radio-btn {
        max-width: 1600px; /* Wider constraint for very large screens */
    }

    .order-form-vehicle-radio-btn-third-col {
        max-width: none; /* Allow icons to display fully */
    }

    .vehicle-info-stacked {
        column-gap: 48px; /* Maximum spacing */
    }

    .vehicle-card-badges {
        min-width: 200px; /* More space for badges */
    }
}