/* Mobile-specific vehicle radio button styles */
/*
 * Responsive Strategy (best practice: overlapping breakpoints):
 * - Mobile: max-width 1257px (--breakpoint-mobile-max)
 * - Desktop: min-width 1257px (--breakpoint-desktop-min)
 * - Overlap at 1257px ensures no styling gap; desktop wins via cascade (loads after mobile)
 * - Base styles in radio_button_choices.css; mobile/desktop files override per breakpoint
 */
/* Mobile/Tablet breakpoint: max-width 1257px (--breakpoint-mobile-max) */
@media screen and (max-width: 1257px) {
    .order-form-vehicle-radio-btn {
        padding: var(--vehicle-btn-padding-mobile);
        gap: var(--vehicle-btn-gap-mobile);
        border-radius: var(--vehicle-btn-radius-mobile);
    }

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

    .mobile-only-details {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: var(--vehicle-gap-md);
        align-items: flex-start;
    }

    .parcel-radio-btn {
        height: 100px;
    }

    .order-form-vehicle-radio-btn-left-col .vehicle-icon {
        width: var(--vehicle-icon-width-mobile);
        height: var(--vehicle-icon-height-mobile);
    }

    .vehicle-icon-parcel {
        width: var(--vehicle-icon-parcel-width-mobile);
        height: var(--vehicle-icon-parcel-height-mobile);
    }

    .order-form-vehicle-radio-btn.vehicle-mobile-gap {
        gap: var(--vehicle-gap-lg);
    }

    .order-form-vehicle-radio-btn-from-price-text {
        font-size: var(--vehicle-price-prefix-size-mobile);
        font-weight: 500;
        line-height: 10px;
        color: var(--grey-light-text);
    }

    .order-form-vehicle-radio-btn-from-price {
        font-size: var(--vehicle-price-size-mobile);
        font-weight: 700;
        line-height: var(--vehicle-price-size-mobile);
    }

    .order-form-vehicle-btn-dimensions {
        font-size: var(--vehicle-dimensions-size-mobile);
        font-weight: 500;
        line-height: 10px;
        color: var(--grey-light-text);
    }

    .order-form-vehicle-btn-more-info {
        display: flex;
        gap: var(--vehicle-gap-xs);
        font-size: var(--vehicle-dimensions-size-mobile);
        font-weight: 500;
        line-height: 10px;
    }

    /* Ensure badges have the same width and look uniform */
    /* Flattened selectors - reduce specificity */
    .order-form-vehicle-btn-max-weight {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--vehicle-warning-text-width);
        font-size: var(--vehicle-badge-font-size-inline);
        font-weight: 600;
        line-height: var(--vehicle-badge-line-height-inline);
        height: var(--vehicle-badge-min-height-inline);
        padding: var(--vehicle-badge-padding-inline);
        gap: var(--vehicle-gap-10px);
        border-radius: var(--vehicle-badge-radius-inline);
        background-color: var(--outline-blue);
        box-sizing: border-box;
        min-width: 0; /* Allow badge to shrink below its width */
    }

    .vehicle-warning-text {
        background-color: var(--warning-bg-color);
        color: var(--dark-text);
        padding: var(--vehicle-warning-text-padding);
        border-radius: var(--vehicle-badge-radius-inline);
        width: var(--vehicle-warning-text-width);
        font-size: var(--vehicle-warning-text-font-size);
        font-weight: 500;
        margin-top: var(--vehicle-gap-xs);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
    }

    /* Extra small mobile breakpoint - iPhone SE and similar */
    @media screen and (max-width: 375px) {
        .order-form-vehicle-btn-max-weight {
            font-size: 10px; /* Smaller */
            width: auto !important; /* Override variable width */
            max-width: 125px !important; /* More constrained */
            min-width: 0;
            padding: 2px 5px; /* Reduced padding */
            white-space: normal; /* Allow wrapping on iPhone SE too */
            word-break: break-word;
            overflow-wrap: break-word;
            flex-shrink: 1;
        }

        .order-form-vehicle-radio-btn-from-price {
            font-size: 11px;
            font-weight: 700;
            line-height: 14px;
            white-space: nowrap;
            letter-spacing: -0.2px; /* Slight reduction for long prices */
            overflow: visible;
            text-overflow: clip;
        }

        .order-form-vehicle-radio-btn-from-price-text {
            font-size: 9px; /* Smaller */
            white-space: nowrap;
        }

        /* Ensure price wrapper has fixed minimum width and priority */
        .vehicle-mobile-price-wrapper {
            flex-shrink: 0;
            min-width: 100px; /* Fixed minimum */
            flex-basis: 100px;
        }

        .mobile-badges-container {
            min-width: 0;
            flex: 1 1 0%; /* Allow aggressive shrinking */
            max-width: calc(100% - 106px); /* Reserve space for price (100px + 6px gap) */
        }

        .mobile-badges-and-price-row {
            gap: 6px;
            min-width: 0; /* Allow row to shrink */
        }
    }

    /* Very small mobile breakpoint - Samsung Galaxy S8 and similar (360px) */
    @media screen and (max-width: 360px) {
        .order-form-vehicle-radio-btn {
            padding: 12px 6px; /* Reduced horizontal padding */
            gap: 6px; /* Reduced gap */
        }

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

        .order-form-vehicle-btn-max-weight {
            font-size: 9px; /* Smaller font */
            padding: 2px 4px; /* Reduced padding */
            width: auto !important; /* Override variable width */
            max-width: 110px !important; /* More aggressive constraint */
            min-width: 0;
            line-height: 11px;
            white-space: normal; /* Allow badge text to wrap if needed */
            word-break: break-word; /* Break long words */
            overflow-wrap: break-word;
            flex-shrink: 1; /* Allow badge to shrink */
        }

        .order-form-vehicle-radio-btn-from-price {
            font-size: 10px;
            font-weight: 700;
            line-height: 12px;
            white-space: nowrap;
            letter-spacing: -0.3px; /* More aggressive letter spacing reduction */
            overflow: visible; /* Ensure text is visible */
            text-overflow: clip; /* Prevent ellipsis */
        }

        .order-form-vehicle-radio-btn-from-price-text {
            font-size: 8px; /* Smaller prefix */
            line-height: 8px;
            white-space: nowrap;
            overflow: visible;
        }

        .order-form-vehicle-btn-dimensions {
            font-size: 10px;
            line-height: 10px;
        }

        /* Ensure price wrapper has fixed minimum width and priority */
        .vehicle-mobile-price-wrapper {
            min-width: 95px; /* Fixed minimum width for price */
            flex-shrink: 0;
            flex-basis: 95px; /* Fixed basis */
            max-width: none; /* Allow to grow if needed */
        }

        /* Reduce gap in badges and price row to fit better */
        .mobile-badges-and-price-row {
            gap: 3px; /* Even smaller gap */
            align-items: flex-start;
            min-width: 0; /* Allow row to shrink */
        }

        /* Ensure badges container can shrink aggressively but price stays visible */
        .mobile-badges-container {
            min-width: 0;
            flex: 1 1 0%; /* More aggressive shrinking */
            max-width: calc(100% - 98px); /* Reserve space for price (95px + 3px gap) */
            overflow: hidden;
        }

        .vehicle-card-badges-mobile {
            min-width: 0;
            width: 100%;
        }

        /* Reduce item icon wrapper width for more space */
        .vehicle-item-icon-wrapper {
            width: 42px; /* Even smaller */
            min-width: 42px;
            max-width: 42px;
        }

        /* Reduce left column icon size to save space */
        .order-form-vehicle-radio-btn-left-col .vehicle-icon {
            width: 50px; /* Smaller */
            height: 28px;
        }

        .order-form-vehicle-radio-btn-left-col {
            flex-shrink: 0;
            width: 50px; /* Fixed width */
        }
    }

    .order-form-vehicle-radio-btn-left-col {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .order-form-vehicle-radio-btn-right-col {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }

    .order-form-vehicle-radio-btn-from-price-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-sm);
        align-items: flex-end;
        justify-content: flex-end;
    }

    .order-form-vehicle-btn-title {
        font-size: var(--vehicle-title-size-mobile);
        font-weight: var(--vehicle-title-weight);
        line-height: var(--vehicle-title-line-height-mobile);
        text-align: left;
        width: 100%;
    }

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

    /* Vehicle layout helpers for mobile - flattened selectors */
    .vehicle-content-wrapper {
        display: flex;
        flex-direction: row;
        gap: var(--vehicle-gap-sm);
        align-items: flex-start;
    }

    .vehicle-text-section {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-xs);
        flex: 1;
    }

    .vehicle-info-stacked {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-xs);
    }

    /* Hide desktop items section on mobile, show mobile version */
    .vehicle-items-section {
        display: none;
    }

    .simple-items-text {
        display: none;
    }

    /* Mobile items section - shown on mobile, hidden on desktop */
    /* Items are rendered once via template include, positioned here on mobile */
    .vehicle-items-section-mobile {
        display: block;
    }

    .sizes-label {
        display: none;
    }

    /* Vehicle item icons for mobile */
    .vehicle-item-icons-container {
        margin-top: 6px;
        margin-bottom: 8px;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Flattened selectors for vehicle items */
    .vehicle-item-icons-all {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--vehicle-gap-2px);
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 2px;
        /* Slight padding for scrollbar if any */
    }

    .vehicle-item-icon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--vehicle-gap-xs);
        flex-shrink: 0;
        width: var(--vehicle-item-icon-wrapper-width-mobile);
        min-width: var(--vehicle-item-icon-wrapper-width-mobile);
        max-width: 70px; /* Allow more growth for longer labels (from 50px to 70px) */
    }

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

    .vehicle-item-label {
        font-size: var(--vehicle-badge-font-size-inline);
        font-weight: 500;
        text-align: center;
        color: var(--grey-light-text);
        line-height: var(--vehicle-badge-line-height-inline);
        /* Better word breaking for long translations - prefer hyphenation */
        word-wrap: break-word;
        overflow-wrap: break-word; /* Break long words when needed */
        min-height: 11px;
        height: auto; /* Allow content to determine height */
        max-height: none; /* No truncation - show full content */
        width: 100%;
        overflow: visible; /* Show full content */
        padding: 0;
        box-sizing: border-box;
        /* Better hyphenation for long words in other languages */
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        word-break: normal; /* Use normal word breaking first, then break-word if needed */
    }

    .vehicle-item-icon img {
        width: var(--vehicle-item-icon-img-size-mobile);
        height: var(--vehicle-item-icon-img-size-mobile);
        object-fit: contain;
        filter: brightness(0);
    }

    .vehicle-warning-text-placeholder {
        height: var(--vehicle-warning-text-placeholder-height-mobile);
        margin-top: var(--vehicle-gap-xs);
    }

    /* Mobile base layout - applies to all screen sizes, overridden by desktop styles */
    .order-form-vehicle-radio-btn-content-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: flex-start;
        /* Ensure all content aligns left */
    }

    .order-form-vehicle-radio-btn-details-row {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
    }

    .order-form-vehicle-radio-btn-second-col {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
    }

    /* Hide desktop-only elements on mobile */
    .sizes-label,
    .sample-items-label,
    .order-form-vehicle-radio-btn-third-col {
        display: none;
    }

    /* Mobile Lower Row Layout (Badges + Price) */
    /* Price aligns with badges section horizontally, matching parcel button positioning */
    .mobile-lower-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: var(--vehicle-gap-xs);
        gap: var(--vehicle-gap-xs);
    }

    /* First row: badges and price side by side */
    .mobile-badges-and-price-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: var(--vehicle-gap-sm);
        justify-content: space-between;
        min-width: 0; /* Allow flex item to shrink */
        overflow: hidden; /* Prevent content from overflowing */
    }

    .mobile-badges-container {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-xs);
        align-items: flex-start;
        flex: 1;
        min-width: 0; /* Allow flex item to shrink */
    }

    .vehicle-card-badges-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--vehicle-gap-xs);
        align-items: flex-start;
    }

    .vehicle-mobile-price-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: var(--vehicle-gap-2px);
        flex-shrink: 0;
        min-width: fit-content;
        overflow: visible; /* Ensure price text is visible even if container is constrained */
    }

    /* Prevent price text from wrapping - apply to all mobile screens */
    .order-form-vehicle-radio-btn-from-price {
        white-space: nowrap;
    }

    .order-form-vehicle-radio-btn-from-price-text {
        white-space: nowrap;
    }

    .mobile-dimensions {
        margin-top: 0;
        text-align: left;
    }

    /* Mobile-only price display rules */
    .order-form-vehicle-radio-btn-right-col {
        display: none;
    }

    .vehicle-desktop-price {
        display: none;
    }
}