/* Minification failed. Returning unminified contents.
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,14): run-time error CSS1039: Token not allowed after unary operator: '-left-form-bg-color'
(59,28): run-time error CSS1039: Token not allowed after unary operator: '-left-form-bg-color'
(60,17): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(76,22): run-time error CSS1039: Token not allowed after unary operator: '-left-container-bg-image'
(89,28): run-time error CSS1039: Token not allowed after unary operator: '-step-one-bg-color'
(89,53): run-time error CSS1039: Token not allowed after unary operator: '-left-form-bg-color'
(90,17): run-time error CSS1039: Token not allowed after unary operator: '-step-one-text-color'
(90,44): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(94,32): run-time error CSS1039: Token not allowed after unary operator: '-step-one-image'
(94,54): run-time error CSS1039: Token not allowed after unary operator: '-left-container-bg-image'
(99,28): run-time error CSS1039: Token not allowed after unary operator: '-step-two-bg-color'
(99,53): run-time error CSS1039: Token not allowed after unary operator: '-left-form-bg-color'
(100,17): run-time error CSS1039: Token not allowed after unary operator: '-step-two-text-color'
(100,44): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(104,32): run-time error CSS1039: Token not allowed after unary operator: '-step-two-image'
(104,54): run-time error CSS1039: Token not allowed after unary operator: '-left-container-bg-image'
(109,28): run-time error CSS1039: Token not allowed after unary operator: '-confirmation-bg-color'
(109,57): run-time error CSS1039: Token not allowed after unary operator: '-left-form-bg-color'
(110,17): run-time error CSS1039: Token not allowed after unary operator: '-confirmation-text-color'
(110,48): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(114,32): run-time error CSS1039: Token not allowed after unary operator: '-confirmation-image'
(114,58): run-time error CSS1039: Token not allowed after unary operator: '-left-container-bg-image'
(136,17): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(146,17): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(169,35): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(194,37): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Primary'
(196,21): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(206,41): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Primary'
(207,25): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(215,37): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Primary'
(216,21): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(235,17): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(240,21): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Primary'
(251,22): run-time error CSS1039: Token not allowed after unary operator: '-pill-bg-color'
(252,17): run-time error CSS1039: Token not allowed after unary operator: '-pill-text-color'
(257,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(295,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(297,35): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Secondary'
(307,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(353,25): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(354,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-3'
(355,22): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(361,28): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(365,29): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(366,34): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(367,26): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(371,32): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-3'
(375,29): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(376,32): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-2'
(377,26): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-1'
(387,28): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(453,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-4'
(459,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-4'
(466,26): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-1'
(467,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-4'
(476,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(477,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(483,32): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-1'
(484,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-4'
(489,32): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(490,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(500,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(546,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(547,25): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(558,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(566,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(577,25): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(584,29): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(596,25): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(605,22): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Primary'
(606,24): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Primary'
(607,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(617,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(618,24): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-3'
(619,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(672,17): run-time error CSS1030: Expected identifier, found '.'
(672,42): run-time error CSS1031: Expected selector, found ')'
(672,42): run-time error CSS1025: Expected comma or open brace, found ')'
(817,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(827,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-3'
(828,25): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(854,24): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(859,24): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(866,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-1'
(867,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-4'
(913,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-3'
(914,22): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-White'
(923,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(933,21): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(950,25): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(958,17): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(965,17): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(979,21): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(1150,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1205,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1221,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-3'
(1222,25): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(1231,28): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(1240,28): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(1262,23): run-time error CSS1031: Expected selector, found '-'
(1262,23): run-time error CSS1025: Expected comma or open brace, found '-'
(1284,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1337,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1352,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-3'
(1353,25): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(1361,28): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(1369,28): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(1378,28): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-3'
(1379,25): run-time error CSS1039: Token not allowed after unary operator: '-Corners'
(1399,28): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(1406,28): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-link'
(1411,32): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-1'
(1412,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Neutral-4'
(1539,35): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Secondary'
(1545,17): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(1580,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1605,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1615,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1625,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1635,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1654,21): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1719,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1732,35): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Secondary'
(1738,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1751,17): run-time error CSS1039: Token not allowed after unary operator: '-Neutrals-Black'
(1782,28): run-time error CSS1039: Token not allowed after unary operator: '-confirmation-bg-color'
(1782,57): run-time error CSS1039: Token not allowed after unary operator: '-left-form-bg-color'
(1783,17): run-time error CSS1039: Token not allowed after unary operator: '-confirmation-text-color'
(1783,48): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(1787,32): run-time error CSS1039: Token not allowed after unary operator: '-confirmation-image'
(1787,58): run-time error CSS1039: Token not allowed after unary operator: '-left-container-bg-image'
(1858,17): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-error'
(1869,17): run-time error CSS1039: Token not allowed after unary operator: '-Semantic-Colors-error'
(2168,26): run-time error CSS1039: Token not allowed after unary operator: '-pill-bg-color'
(2169,21): run-time error CSS1039: Token not allowed after unary operator: '-pill-text-color'
(2362,43): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Primary'
(2368,47): run-time error CSS1039: Token not allowed after unary operator: '-HGV-Primary'
(2369,29): run-time error CSS1039: Token not allowed after unary operator: '-left-form-text-color'
(2426,26): run-time error CSS1039: Token not allowed after unary operator: '-pill-bg-color'
(2427,21): run-time error CSS1039: Token not allowed after unary operator: '-pill-text-color'
 */
/* CSS Variables - Add the new teal color */
:root {
    --Corners: 6px;
    --Neutrals-Neutral-4: #5E5E5E;
    --Neutrals-Neutral-3: #9E9E9E;
    --Neutrals-Neutral-2: #E0E0E0;
    --Neutrals-Neutral-1: #F5F5F5;
    --Neutrals-White: #FFF;
    --Neutrals-Black: #000;
    --Semantic-Colors-link: #007ACC;
    --HGV-Secondary: #EA6F43;
    --HGV-Primary: #000;
    --HGV-Teal: #89FFE7;
}

/* Add a new wrapper container with split background */
.multi-product-enrollment-wrapper {
    min-height: 75vh;
    display: none;
    justify-content: center;
    align-items: flex-start;
    /* Split background: left side matches style box, right side white */
    background: linear-gradient(
        to right,
        var(--left-form-bg-color, #89FFE7) 50%,
        white 50%
    );
    transition: background 0.3s ease;
}

/* Overall container with proper minimum width (462px + 660px = 1122px) */
#content-container {
    display: flex;
    padding: 0 !important;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 75vh;
    width: min(1122px, 90vw); /* 462px left + 660px right = minimum total */
    max-width: 1122px; /* Prevent expansion beyond intended width */
    flex: 0 0 auto; /* Don't grow or shrink */
    align-self: stretch;
    transform-origin: top left;
    transition: transform 0.3s ease;
    position: relative;
    background: transparent; /* Remove any background from content container */
}

/* Left content container - Updated with 462px minimum threshold */
#left-content-container {
    display: flex;
    width: clamp(462px, 24.06vw, 462px); /* 462px minimum threshold */
    flex-shrink: 0 !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(24px, 1.25vw, 24px); /* Minimum 24px gap */
    padding: clamp(32px, 1.67vw, 32px) clamp(24px, 1.25vw, 24px) clamp(32px, 1.67vw, 32px) clamp(64px, 3.33vw, 64px); /* Minimum original padding */
    margin-right: 0 !important;
    background-color: var(--left-form-bg-color, #89FFE7) !important;
    color: var(--left-form-text-color, #000) !important;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Background image element - positioned at bottom right with minimum sizes */
#left-content-container::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 16px;
    width: 405px;
    height: 355px;
    flex-shrink: 0;
    border-radius: 235.5px 235.5px 0 0;
    background: var(--left-container-bg-image, lightgray) lightgray 50% / cover no-repeat;
    z-index: 0;
    transition: background-image 0.3s ease; /* Smooth transition between images */
}

/* Ensure content appears above the background image */
#left-content-container > * {
    position: relative;
    z-index: 1;
}

/* Step 1 specific styling */
#content-container[data-current-step="1"] #left-content-container {
    background-color: var(--step-one-bg-color, var(--left-form-bg-color, #89FFE7));
    color: var(--step-one-text-color, var(--left-form-text-color, #000));
}

    #content-container[data-current-step="1"] #left-content-container::before {
        background-image: var(--step-one-image, var(--left-container-bg-image, lightgray));
    }

/* Step 2 specific styling */
#content-container[data-current-step="2"] #left-content-container {
    background-color: var(--step-two-bg-color, var(--left-form-bg-color, #89FFE7));
    color: var(--step-two-text-color, var(--left-form-text-color, #000));
}

    #content-container[data-current-step="2"] #left-content-container::before {
        background-image: var(--step-two-image, var(--left-container-bg-image, lightgray));
    }

/* Confirmation step specific styling */
#content-container[data-current-step="3"] #left-content-container {
    background-color: var(--confirmation-bg-color, var(--left-form-bg-color, #89FFE7));
    color: var(--confirmation-text-color, var(--left-form-text-color, #000));
}

    #content-container[data-current-step="3"] #left-content-container::before {
        background-image: var(--confirmation-image, var(--left-container-bg-image, lightgray));
    }

/* Right content container - Updated with 660px minimum threshold */
#right-content-container {
    display: flex;
    width: 748px;
    height: auto !important;
    min-height: 75vh;
    padding: clamp(32px, 1.67vw, 32px) clamp(64px, 3.33vw, 64px) clamp(40px, 2.08vw, 40px) clamp(24px, 1.25vw, 24px); /* Minimum original padding */
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    border-radius: 0 !important;
    border: none !important;
    background: white !important; /* Ensure white background */
    box-shadow: none !important;
    overflow: visible !important;
}

/* Form title and description styling - Uses LeftFormStyleBox text color */
#form-title {
    color: var(--left-form-text-color, #000) !important;
    /* H4 */
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    line-height: 40px; /* 166.667% */
    margin-bottom: 0; /* Remove existing margin since gap handles spacing */
}

#form-description {
    color: var(--left-form-text-color, #000) !important;
    /* Subtitle */
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px; /* 155.556% */
}

/* Form title and description with dynamic color transitions */
#form-title,
#form-description {
    transition: color 0.3s ease;
}

/* Title and description container */
#block-descripter {
    display: flex;
    padding-bottom: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid var(--left-form-text-color, #000); /* Uses text color for border */
    transition: border-color 0.3s ease;
}

/* Navigation tabs container - Proportional to 462px minimum left container */
#navigation-tabs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 0;
    width: clamp(250px, 30%, 304px);
    height: clamp(100px, 15%, 120px);
}

    #navigation-tabs div {
        display: flex;
        height: clamp(60px, 3.125vw, 60px); /* Original 60px height */
        width: clamp(272px, 14.17vw, 272px); /* Original 272px width */
        padding: clamp(16px, 0.83vw, 16px); /* Original 16px padding */
        align-items: center;
        gap: clamp(10px, 0.52vw, 10px); /* Original 10px gap */
        align-self: stretch;
        border: none;
        border-radius: 0;
        border-left: 1px solid var(--HGV-Primary, #000);
        background: transparent;
        color: var(--left-form-text-color, #000) !important;
        font-size: clamp(16px, 0.83vw, 16px); /* Original 16px font size */
        font-style: normal;
        font-weight: 300;
        line-height: clamp(24px, 1.25vw, 24px); /* Original 24px line height */
        transition: border-color 0.3s ease, color 0.3s ease;
    }

        /* Active navigation tab - only the current step gets black border */
        #navigation-tabs div.active {
            border-left: 4px solid var(--HGV-Primary, #000); /* Black border for active */
            color: var(--left-form-text-color, #000) !important; /* Uses dynamic color */
            background: transparent;
            font-weight: bold; /* Bold for active step */
            line-height: 28px; /* 175% for active */
        }

    /* Default active state for navbar-1 */
    #navigation-tabs #navbar-1 {
        border-left: 4px solid var(--HGV-Primary, #000); /* Black border for active step */
        color: var(--left-form-text-color, #000) !important; /* Uses dynamic color */
        background: transparent;
        font-weight: bold; /* Bold for active step */
        line-height: 28px; /* 175% for active */
    }

/* Constrain title labels to stay within the form step width */
#title-label-step1,
#title-label-step2 {
    max-width: 100%; /* Constrain to parent container width */
    width: 100%; /* Take full available width of parent */
    box-sizing: border-box; /* Include padding and border in width calculation */
    overflow: hidden; /* Hide any overflow text */
    text-overflow: ellipsis; /* Add ... for text that doesn't fit */
    white-space: nowrap; /* Prevent text wrapping to new lines */
    align-self: stretch; /* Stretch to full width of parent container */
}

#title-label {
    color: var(--left-form-text-color, #000) !important;
}

    #title-label-step1,
    #title-label-step2 {
        color: var(--HGV-Primary, #000) !important;
    }

/* Override input fields container height restrictions */
.input-fields-container {
    max-height: none !important; /* Remove height restrictions */
    overflow: visible !important;
}

/* Dynamic pill styling using CSS custom properties */
.tier-pill {
    background: var(--pill-bg-color, #89FFE7) !important;
    color: var(--pill-text-color, #000) !important;
}

/* Form labels - updated styling */
.form-label {
    color: var(--Neutrals-Black, #000);
    /* 14px Bold */
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    line-height: 130%; /* 18.2px */
    margin: 0;
}

/* Input field widths - Proportional to 660px minimum right container */
#EnrollForm_FirstName,
#EnrollForm_LastName,
#EnrollForm_City,
.input-email,
.input-third-party-code,
.password-input-container {
    width: clamp(300px, 100%, 300px);
}

.input-phone {
    width: clamp(218px, 100%, 218px);
}

.input-country-code,
.phone-input-group .country-code {
    width: clamp(76px, 3.96vw, 76px); /* Original 76px width */
}

#EnrollForm_PostalCode {
    width: clamp(131px, 6.82vw, 131px); /* Original 131px width */
}

/* Form title containers for each step */
#title-label,
#title-label-step1,
#title-label-step2 {
    font-size: 20px;
    font-weight: bold;
    color: var(--Neutrals-Black);
    padding-bottom: 12px; /* Reduced from 16px */
    border-bottom: 1px solid var(--HGV-Secondary, #EA6F43);
    margin-bottom: 12px; /* Reduced spacing */
    flex-shrink: 0; /* Don't allow title to shrink */
}

/* Section labels */
#member-class-label,
#member-tier-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--Neutrals-Black);
    margin-bottom: 12px;
    margin-top: 12px;
}

/* Radio button groups */
.radio-group {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
}

    /* Override radio button layout to maintain consistent 2-column appearance */
    .radio-group.two-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-self: stretch;
    }

        .radio-group.two-columns .radio-option {
            /* Reset flex properties since we're using grid */
            flex: none;
            min-width: 0;
            width: 100%;
        }

            /* For single item, place it in the first column */
            .radio-group.two-columns .radio-option:only-child {
                grid-column: 1;
            }

            /* For odd number (like 3), ensure the last item doesn't stretch */
            .radio-group.two-columns .radio-option:nth-child(odd):last-child {
                grid-column: 1;
            }

/* Individual radio button option */
.radio-option {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 8px;
    flex: 1 0 0;
    border-radius: var(--Corners);
    border: 1px solid var(--Neutrals-Neutral-3);
    background: var(--Neutrals-White);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .radio-option:hover {
        border-color: var(--Semantic-Colors-link);
    }

    .radio-option.selected {
        border-radius: var(--Corners, 6px);
        border: 1.5px solid var(--Neutrals-Black, #000);
        background: var(--Neutrals-White, #FFF);
    }

    .radio-option:not(.selected):not(.disabled) {
        border: 1px solid var(--Neutrals-Neutral-3);
    }

    .radio-option.disabled {
        border-radius: var(--Corners, 6px);
        border: 1px solid var(--Neutrals-Neutral-2, #E0E0E0);
        background: var(--Neutrals-Neutral-1, #F5F5F5);
        opacity: 1; /* Remove opacity so we can see the custom styling */
        cursor: not-allowed;
    }

    /* Radio button input */
    .radio-option input[type="radio"] {
        margin: 0;
        width: 17px;
        height: 16px;
        accent-color: var(--Semantic-Colors-link);
    }

    /* Update radio button label styling for tiers with pill support */
    .radio-option label {
        margin: 0;
        cursor: pointer;
        flex: 1;
        font-size: 14px;
        line-height: 1.4;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        /* Tier content container to hold text and pill */
        .radio-option label .tier-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            gap: 8px;
        }

        /* Tier text container */
        .radio-option label .tier-text {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1;
        }

        /* Tier name styling (bold) */
        .radio-option label .tier-name {
            font-weight: 600;
            font-size: 14px;
            line-height: 1.2;
        }

        /* Tier description styling */
        .radio-option label .tier-description {
            font-weight: 400;
            font-size: 12px;
            line-height: 1.3;
            color: #666;
        }

        /* Tier pill styling */
        .radio-option label .tier-pill {
            display: flex;
            padding: 4px 8px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 16px;
            flex-shrink: 0;
            /* Pill text styling */
            font-size: 12px;
            font-style: normal;
            font-weight: 325;
            line-height: 14px; /* 116.667% */
            /* Note: background and color are now set dynamically via inline styles in the view */
        }

    /* Disabled tier label styling */
    .radio-option.disabled label .tier-name {
        color: var(--Neutrals-Neutral-4, #5E5E5E);
        font-weight: 600;
        cursor: not-allowed;
    }

    .radio-option.disabled label .tier-description {
        color: var(--Neutrals-Neutral-4, #5E5E5E);
        font-weight: 300;
        cursor: not-allowed;
    }

    /* Disabled pill styling */
    .radio-option.disabled label .tier-pill {
        background: var(--Neutrals-Neutral-1, #F5F5F5) !important;
        color: var(--Neutrals-Neutral-4, #5E5E5E) !important;
    }

.tier-pill-mobile {
    display: none;
}

/* Styling for member tier dropdown options */
#member-tier-dropdown option {
    background-color: var(--Neutrals-White, #FFF);
    color: var(--Neutrals-Black, #000);
    padding: 8px 12px;
}

    /* Grey background for disabled (unselected) options */
    #member-tier-dropdown option:disabled {
        background-color: var(--Neutrals-Neutral-1, #F5F5F5) !important;
        color: var(--Neutrals-Neutral-4, #5E5E5E) !important;
    }

    /* Selected option styling */
    #member-tier-dropdown option:checked {
        background-color: var(--Semantic-Colors-link, #007ACC);
        color: var(--Neutrals-White, #FFF);
    }

    /* Hover state for enabled options */
    #member-tier-dropdown option:not(:disabled):hover {
        background-color: rgba(0, 122, 204, 0.1);
    }

/* Additional styling to ensure consistent appearance */
#member-tier-dropdown {
    background-color: var(--Neutrals-White, #FFF);
}

/* Form bottom section - contains selected options and buttons */
.form-bottom-section {
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Don't allow bottom section to shrink */
}

.bottom-row-container {
    display: flex;
    margin-top: 40px;
    justify-content: space-between;
    gap: 20px;
}

/* Step 1 specific styling - move continue button to the right */
#step-1 .form-bottom-section {
    margin-top: 24px;
    justify-content: space-between;
    flex-direction: row;
}

/* Step 2 specific styling - keep space between back and continue buttons */
#step-2 .form-bottom-section {
    margin-top: 24px;
    justify-content: space-between; /* Space between back and continue buttons in Step 2 */
}

.form-secure-payment-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .form-secure-payment-content .payment-secure-title {
        display: flex;
        gap: 4px;
    }

/* Shared styling for chosen option displays */
.chosen-option-display,
#chosen-option-label,
#chosen-option-label-step2 {
    margin-top: 0;
    background-color: var(--Neutrals-White, #FFF);
    border-radius: var(--Corners);
    border: none;
    flex: 1;
    max-width: 300px;
}

    .chosen-option-display .selected-class,
    #chosen-option-label .selected-class,
    #chosen-option-label-step2 .selected-class {
        font-weight: bold;
        font-size: 20px;
        color: var(--Neutrals-Black);
        margin-bottom: 4px;
    }

    .chosen-option-display .selected-tier,
    #chosen-option-label .selected-tier,
    #chosen-option-label-step2 .selected-tier {
        font-size: 16px;
        color: var(--Neutrals-Black);
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .chosen-option-display .selected-tier span,
        #chosen-option-label .selected-tier span,
        #chosen-option-label-step2 .selected-tier span {
            font-weight: 600;
            color: var(--Neutrals-Black);
        }

            .chosen-option-display .selected-tier #selected-tier-description,
            #chosen-option-label .selected-tier #selected-tier-description,
            #chosen-option-label-step2 .selected-tier span:last-child {
                font-weight: 400;
                color: var(--Neutrals-Black);
                font-size: 16px;
            }

/* Button styling */
.btn {
    display: flex;
    height: 48px;
    min-width: 140px;
    padding: 0 28px;
    justify-content: center;
    align-items: center;
    border-radius: var(--Corners, 6px);
    border: 1px solid;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--HGV-Primary, #000);
    border-color: var(--HGV-Primary, #000);
    color: var(--Neutrals-White);
    text-transform: none;
}

    .btn-primary:hover {
        background-color: #333; /* Slightly lighter black for hover */
        border-color: #333;
    }

.btn-secondary {
    background-color: var(--Neutrals-White);
    border-color: var(--Neutrals-Neutral-3);
    color: var(--Neutrals-Black);
}

    .btn-secondary:hover {
        background-color: #f8f9fa;
    }

/* Error messages */
.validation-error {
    color: #dc3545;
    font-size: 11px; /* Reduced from 12px */
    margin-top: 2px; /* Reduced from 4px */
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

/* Terms validation error styling */
.form-group-terms .validation-error {
    display: block;
    color: #dc3545;
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.2;
}

/* Terms validation error styling */
.form-additional-group-terms .validation-error {
    display: block;
    color: #dc3545;
    font-size: 11px;
    margin-top: 4px;
    line-height: 1.2;
}

/* Special styling for password validation errors - prevent width expansion while preserving toggle button */
.password-input-container + .validation-error {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content; /* Allow natural width of the error message */
    max-width: 500px; /* Set a reasonable max-width to prevent extremely long messages */
    z-index: 10; /* Ensure it appears above other elements */
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent background for readability */
    padding: 2px 4px;
    margin-top: 2px;
    border-radius: 3px;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Ensure the form group containing password inputs has relative positioning */
.form-group:has(.password-input-container) {
    position: relative;
}

/* Ensure password input containers maintain their fixed width and don't interfere with toggle button */
/*.password-input-container {
    width: 15.63vw;*/ /* 300px at 1920px = 15.63vw */
    /*flex-shrink: 0;*/ /* Prevent shrinking */
    /*position: relative;*/ /* Maintain relative positioning for the toggle button */
/*}*/

/* Ensure password toggle button remains properly positioned */
.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: background-color 0.2s ease;
    z-index: 5; /* Ensure it's above the input but below validation errors */
}

/* Ensure password input maintains proper padding for the toggle button */
.password-input-container .password-input {
    padding-right: 40px; /* Make room for the toggle button */
    width: 300px; 
    box-sizing: border-box;
}

/* Hidden elements */
.hidden {
    display: none !important;
}

/* Step navigation - Updated for better space management and scaling */
.form-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: auto; /* Remove fixed 660px width */
    align-self: auto;
    padding: 24px;
    min-height: 0;
    overflow: hidden;
}

#step-1 {
    gap: 8px; 
}

/* Step 2 specific styling - Personal Information Section - OPTIMIZED */
#step-2 {
    gap: 8px; /* Reduced gap between sections */
}

#step-2 .form-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: stretch;
    min-height: 0; /* Allow shrinking */
    overflow: hidden; /* Prevent overflow */
}

/* Input Fields Container - FIXED: Change from flex-wrap to flex-direction column */
.input-fields-container {
    display: flex;
    flex-direction: column; /* Changed from flex-wrap */
    align-items: flex-start;
    align-content: flex-start;
    flex: 1;
    align-self: stretch;
    overflow: hidden; /* Prevent overflow */
    max-height: 350px; /* Limit height to prevent overflow */
    overflow-y: auto; /* Allow scrolling if absolutely necessary */
}

/* Form sections */
.form-section {
    display: flex;
    flex-direction: column;
}

/* Form rows - Reduced spacing and ensure full width */
.form-row {
    display: flex;
    gap: 12px; /* Reduced from 16px */
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-shrink: 0; /* Don't allow rows to shrink */
    min-height: 0;
    width: 100%; /* Ensure full width */
    margin-bottom: 16px; /* Add small bottom margin between rows */
}

/* Form groups - Optimized spacing */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Reduced from 6px */
    flex: none;
    min-height: 0;
}

/* Ensure Third Party ID row takes full width */
.form-row:last-of-type {
    width: 100%;
}

.form-group-firstname,
.form-group-lastname,
.form-group-phone,
.form-group-address,
.form-group-city,
.form-group-zipcode,
.form-group-country,
.form-group-state,
.form-group-email{
    margin-bottom: 4px;
}

/* Third Party ID form group should extend full width */
.form-group-third-code-label {
    width: 277px; /* Match the input width instead of 129px */
}

    /* Third Party ID label should extend full width of its container */
    .form-group-third-code-label .form-label {
        width: 100%; /* Full width of the form group container */
        max-width: 277px; /* Match the input width */
    }

/* Section titles for Payment and Billing Information */
.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--Neutrals-Black) !important;
    margin-bottom: 12px;
    margin-top: 16px;
}

/* Form controls - Compact sizing */
.form-control {
    height: 32px; /* Reduced height for more compact appearance */
    padding: 6px 8px; /* Reduced padding */
    font-size: 14px;
    border: 1px solid var(--Neutrals-Neutral-3);
    border-radius: var(--Corners);
    box-sizing: border-box;
}

/* Custom dropdown arrow styling for all select elements */
select.form-control {
    /* Remove the default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Add custom arrow using background image */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3e%3cpath d='M7.46885 9.43311L0.220269 2.07205C-0.0734232 1.77836 -0.0734232 1.30345 0.220269 1.00976L0.663933 0.566095C0.957626 0.272402 1.43253 0.272402 1.72623 0.566095L8 6.9586L14.2738 0.572344C14.5675 0.278651 15.0424 0.278651 15.3361 0.572344L15.7797 1.01601C16.0734 1.3097 16.0734 1.78461 15.7797 2.0783L8.53115 9.43936C8.23745 9.7268 7.76255 9.7268 7.46885 9.43311Z' fill='black'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 10px;
    
    /* Add padding to the right to make room for the arrow */
    padding-right: 32px;
    
    /* Ensure the text doesn't overlap with the arrow */
    text-overflow: ellipsis;
}

/* Hover state for dropdown */
select.form-control:hover {
    border-color: var(--Semantic-Colors-link);
}

/* Focus state for dropdown */
select.form-control:focus {
    border-color: var(--Semantic-Colors-link);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
}

/* Disabled state for dropdown */
select.form-control:disabled {
    background-color: var(--Neutrals-Neutral-1);
    color: var(--Neutrals-Neutral-4);
    cursor: not-allowed;
    /* Use a grayed out version of the arrow for disabled state */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3e%3cpath d='M7.46885 9.43311L0.220269 2.07205C-0.0734232 1.77836 -0.0734232 1.30345 0.220269 1.00976L0.663933 0.566095C0.957626 0.272402 1.43253 0.272402 1.72623 0.566095L8 6.9586L14.2738 0.572344C14.5675 0.278651 15.0424 0.278651 15.3361 0.572344L15.7797 1.01601C16.0734 1.3097 16.0734 1.78461 15.7797 2.0783L8.53115 9.43936C8.23745 9.7268 7.76255 9.7268 7.46885 9.43311Z' fill='%239E9E9E'/%3e%3c/svg%3e");
}

/* Terms & Conditions Section - Compact */
.terms-section {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    margin-top: auto; /* Reduced spacing */
    flex-shrink: 0; /* Don't allow to shrink */
}

/* Terms & Conditions Section - Compact */
.additional-terms-section {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    margin-top: auto; /* Reduced spacing */
    flex-shrink: 0; /* Don't allow to shrink */
}

/* TCPA Section - Same styling as Terms Section */
.tcpa-section {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    margin-top: auto; /* Reduced spacing */
    margin-bottom: 12px;
    flex-shrink: 0; /* Don't allow to shrink */
}

/* Checkbox styling - Compact */
.form-group-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 6px; /* Reduced from 8px */
}

/* Custom checkbox styling */
.form-checkbox {
    width: 20px; /* Reduced from 24px */
    height: 20px; /* Reduced from 24px */
    border-radius: 4px;
    border: 1px solid var(--Neutrals-Neutral-3, #9E9E9E);
    background: var(--Neutrals-White, #FFF);
    margin: 0 !important;
    flex-shrink: 0;
    accent-color: #0072E3;
}

.checkbox-label {
    font-size: 16px; /* Reduced from 13px */
    line-height: 1.2; /* Reduced line height */
    color: var(--Neutrals-Black);
    margin: 0;
    cursor: pointer;
    flex: 1;
    font-weight: 300;
}

    /* Links within checkbox labels for both Step 1 and Step 2 */
    .checkbox-label a,
    .checkbox-label .terms-link {
        color: var(--Semantic-Colors-link, #0072E3) !important;
        text-decoration: underline !important;
        text-decoration-style: solid !important;
        text-decoration-thickness: 1px !important;
        text-underline-offset: 2px !important;
        font-weight: inherit; /* Inherit the weight from parent label */
        transition: color 0.2s ease;
    }

        .checkbox-label a:hover,
        .checkbox-label .terms-link:hover {
            color: #005bb5 !important; /* Slightly darker blue on hover */
            text-decoration: underline !important;
        }

        .checkbox-label a:visited,
        .checkbox-label .terms-link:visited {
            color: var(--Semantic-Colors-link, #0072E3) !important;
        }

/* Ensure consistent link styling in both steps */
#step-1 .checkbox-label a,
#step-1 .checkbox-label .terms-link,
#step-2 .checkbox-label a,
#step-2 .checkbox-label .terms-link {
    color: var(--Semantic-Colors-link, #0072E3) !important;
    text-decoration: underline !important;
    text-decoration-style: solid !important;
}

/* Terms links styling */
.terms-link {
    color: var(--Semantic-Colors-link, #0072E3);
    font-size: 16px; /* Reduced from 14px */
    font-style: normal;
    font-weight: 300;
    line-height: 16px; /* Reduced from 20px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

    .terms-link:hover {
        color: var(--Semantic-Colors-link, #0072E3);
        text-decoration: underline;
    }

/* Phone input group styling */
.phone-input-group {
    display: flex;
    gap: 6px; /* Reduced from 8px */
    align-items: flex-start;
}

    .phone-input-group .phone-number {
        flex: 1;
        min-width: 0;
    }

/* Form buttons container - Updated to support row layout with gap */
.form-buttons {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 16px;
}

/* Back button styling - transparent with link color */
.btn-back {
    background: transparent;
    border: none;
    color: #0072E3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    min-width: auto;
    height: auto;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back:hover {
    color: #005bb5;
}

.btn-back svg {
    flex-shrink: 0;
}

.btn-back:hover svg path {
    fill: #005bb5;
}

/* Disabled button styling */
.btn-disabled,
.btn:disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.65 !important;
}

.btn-primary.btn-disabled,
.btn-primary:disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

    .btn-primary.btn-disabled:hover,
    .btn-primary:disabled:hover {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
    }

/* Password info icon styling */
.password-info-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.password-info-icon svg {
    transition: opacity 0.2s ease;
}

.password-info-icon:hover svg {
    opacity: 0.7;
}



/* Ensure the form-group has relative positioning for tooltip positioning */
.form-group {
    position: relative;
}

/* Password input container styling */
.password-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Password toggle button styling */
.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.password-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.password-toggle-btn:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Eye icon styling */
.password-toggle-btn .eye-icon {
    width: 16px;
    height: 14px;
    transition: opacity 0.2s ease;
}

.password-toggle-btn:hover .eye-icon {
    opacity: 0.7;
}

/* Hide the toggle button icon when password is visible (we'll add a different icon via JS) */
.password-toggle-btn.password-visible .eye-icon {
    display: none;
}

/* Eye slash icon for when password is visible - will be added via JavaScript */
.password-toggle-btn.password-visible::before {
    content: "";
    display: block;
    width: 16px;
    height: 14px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3e%3cpath d='M1.33313 0.335098L14.6665 13.6684L13.7331 14.6018L11.5553 12.4239C10.4415 13.0795 9.2442 13.224 7.99979 13.224C5.75535 13.224 3.95813 12.2018 2.64979 10.9851C1.34979 9.77954 0.480349 8.3351 0.0692383 7.34343C-0.0224284 7.12399 -0.0224284 6.87954 0.0692383 6.6601C0.388683 5.89954 0.855126 5.11287 1.44424 4.3351L0.399795 3.29065L1.33313 2.35732L1.33313 0.335098ZM2.37757 5.26843C1.88868 5.89954 1.49979 6.53065 1.25813 7.00176C1.62757 7.89065 2.42757 9.22399 3.62479 10.3351C4.82202 11.4462 6.41368 12.3351 7.99979 12.3351C8.94279 12.3351 9.85535 12.0906 10.6998 11.6906L9.61091 10.6018C9.04424 10.9351 8.54424 11.1128 7.99979 11.1128C6.61091 11.1128 5.33313 10.3573 4.74424 9.24621C4.15535 8.1351 4.37757 6.80176 5.2442 5.93509L2.37757 5.26843ZM5.33313 7.00176C5.33313 6.29452 5.61408 5.61624 6.11418 5.11615C6.61427 4.61605 7.29255 4.3351 7.99979 4.3351C8.16646 4.3351 8.33313 4.35732 8.49979 4.40176L7.15535 3.05732C7.08868 3.0351 7.04424 3.01287 7.99979 3.01287C9.95535 3.01287 11.547 3.90176 12.7442 5.01287C13.9415 6.12399 14.7415 7.45732 15.1109 8.34621C14.7415 9.2351 13.9415 10.5684 12.7442 11.6795L11.2442 10.1795C11.4665 9.73509 11.5553 9.20176 11.5553 8.64621C11.5553 7.70321 11.1807 6.79885 10.514 6.13205C9.84716 5.46526 8.94279 5.09065 7.99979 5.09065C7.44424 5.09065 6.91091 5.1795 6.46646 5.40176L5.33313 7.00176Z' fill='black'/%3e%3c/svg%3e");
}

/* ================================
   PAYMENT SECTION STYLES
   ================================ */

/* Payment Section Container */
.payment-section {
    display: flex;
    flex-direction: column;
}

.payment-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--Neutrals-Black);
    margin-bottom: 12px;
    margin-top: 16px;
}

.payment-fields-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    flex: 1;
    align-self: stretch;
    gap: 8px;
}

/* Payment Row Containers */
.payment-row-1,
.payment-row-2 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-shrink: 0;
    min-height: 0;
    width: 100%;
    margin-bottom: 4px;
}

/* Payment Form Groups */
.payment-name-group,
.payment-card-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: none;
    min-height: 0;
    margin-bottom: 4px;
}

.payment-name-group,
.payment-card-group {
    width: clamp(300px, 15.63vw, 300px);
}

.payment-expiration-group,
.payment-security-group {
    width: 144px;
}

/* Payment Labels */
.payment-name-label,
.payment-card-label,
.payment-expiration-label,
.payment-security-label {
    color: var(--Neutrals-Black, #000);
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    line-height: 130%;
    margin: 0;
}

/* Payment Inputs */
.payment-name-input,
.payment-card-input,
.payment-expiration-input,
.payment-security-input {
    height: 32px;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--Neutrals-Neutral-3);
    border-radius: var(--Corners);
    box-sizing: border-box;
    width: 100%;
}

    .payment-name-input:focus,
    .payment-card-input:focus,
    .payment-expiration-input:focus,
    .payment-security-input:focus {
        border-color: var(--Semantic-Colors-link);
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
    }

    .payment-name-input:hover,
    .payment-card-input:hover,
    .payment-expiration-input:hover,
    .payment-security-input:hover {
        border-color: var(--Semantic-Colors-link);
    }

/* Move credit card input text to the right of background image */
.payment-card-input,
#Payment_CardNumber {
    padding-left: 50px; /* Adjust this value based on your background image width */
    background-position: left 8px center; /* Position the background image on the left */
    background-repeat: no-repeat;
}

/* Payment Error Messages */
.payment-name-error,
.payment-card-error,
.payment-expiration-error,
.payment-security-error {
    color: #dc3545;
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.2;
}

* Payment Form Groups - Individual Sizing */
.payment-expiration-group {
    width: 144px; /* Adjustable - Expiration Date */
}

.payment-security-group {
    width: 144px; /* Adjustable - Security Code */
}

/* ================================
   BILLING SECTION STYLES
   ================================ */

/* Billing Section Container */
.billing-section {
    display: flex;
    flex-direction: column;
}

.billing-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--Neutrals-Black);
    margin-bottom: 12px;
    margin-top: 16px;
}

.billing-fields-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    flex: 1;
    align-self: stretch;
    gap: 8px;
}

/* Billing Row Containers */
.billing-row-1,
.billing-row-2 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: flex-start;
    flex-shrink: 0;
    min-height: 0;
    width: 100%;
    margin-bottom: 4px;
}

/* Billing Form Groups */
.billing-address-group,
.billing-city-group,
.billing-zipcode-group,
.billing-country-group,
.billing-state-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: none;
    min-height: 0;
    margin-bottom: 4px;
}

.billing-address-group {
    width: clamp(300px, 15.63vw, 300px);
}

/* Billing Labels */
.billing-address-label,
.billing-city-label,
.billing-zipcode-label,
.billing-country-label,
.billing-state-label {
    color: var(--Neutrals-Black, #000);
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    line-height: 130%;
    margin: 0;
}

/* Billing Inputs */
.billing-address-input,
.billing-city-input,
.billing-zipcode-input {
    height: 32px;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--Neutrals-Neutral-3);
    border-radius: var(--Corners);
    box-sizing: border-box;
    width: 100%;
}

    .billing-address-input:focus,
    .billing-city-input:focus,
    .billing-zipcode-input:focus {
        border-color: var(--Semantic-Colors-link);
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
    }

    .billing-address-input:hover,
    .billing-city-input:hover,
    .billing-zipcode-input:hover {
        border-color: var(--Semantic-Colors-link);
    }

/* Billing Dropdown Inputs */
.billing-country-input,
.billing-state-input {
    height: 32px;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--Neutrals-Neutral-3);
    border-radius: var(--Corners);
    box-sizing: border-box;
    width: 100%;
    /* Remove the default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Add custom arrow using background image */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3e%3cpath d='M7.46885 9.43311L0.220269 2.07205C-0.0734232 1.77836 -0.0734232 1.30345 0.220269 1.00976L0.663933 0.566095C0.957626 0.272402 1.43253 0.272402 1.72623 0.566095L8 6.9586L14.2738 0.572344C14.5675 0.278651 15.0424 0.278651 15.3361 0.572344L15.7797 1.01601C16.0734 1.3097 16.0734 1.78461 15.7797 2.0783L8.53115 9.43936C8.23745 9.7268 7.76255 9.7268 7.46885 9.43311Z' fill='black'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 10px;
    /* Add padding to the right to make room for the arrow */
    padding-right: 32px;
    /* Ensure the text doesn't overlap with the arrow */
    text-overflow: ellipsis;
}

    .billing-country-input:focus,
    .billing-state-input:focus {
        border-color: var(--Semantic-Colors-link);
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
    }

    .billing-country-input:hover,
    .billing-state-input:hover {
        border-color: var(--Semantic-Colors-link);
    }

    .billing-country-input:disabled,
    .billing-state-input:disabled {
        background-color: var(--Neutrals-Neutral-1);
        color: var(--Neutrals-Neutral-4);
        cursor: not-allowed;
        /* Use a grayed out version of the arrow for disabled state */
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3e%3cpath d='M7.46885 9.43311L0.220269 2.07205C-0.0734232 1.77836 -0.0734232 1.30345 0.220269 1.00976L0.663933 0.566095C0.957626 0.272402 1.43253 0.272402 1.72623 0.566095L8 6.9586L14.2738 0.572344C14.5675 0.278651 15.0424 0.278651 15.3361 0.572344L15.7797 1.01601C16.0734 1.3097 16.0734 1.78461 15.7797 2.0783L8.53115 9.43936C8.23745 9.7268 7.76255 9.7268 7.46885 9.43311Z' fill='%239E9E9E'/%3e%3c/svg%3e");
    }

/* Billing Error Messages */
.billing-address-error,
.billing-city-error,
.billing-zipcode-error,
.billing-country-error,
.billing-state-error {
    color: #dc3545;
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.2;
}

/* Billing Form Groups - Individual Sizing */
.billing-city-group {
    width: 144px; /* Adjustable - City */
}

.billing-zipcode-group {
    width: 144px; /* Adjustable - Zip Code */
}

.billing-country-group {
    width: 144px; /* Adjustable - Country */
}

.billing-state-group {
    width: 144px; /* Adjustable - State */
}

/* ================================
   VALIDATION STATES
   ================================ */

/* Invalid Input States */
.payment-name-input.invalid,
.payment-card-input.invalid,
.payment-expiration-input.invalid,
.payment-security-input.invalid,
.billing-address-input.invalid,
.billing-city-input.invalid,
.billing-zipcode-input.invalid,
.billing-country-input.invalid,
.billing-state-input.invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
}

/* Valid Input States */
.payment-name-input.valid,
.payment-card-input.valid,
.payment-expiration-input.valid,
.payment-security-input.valid,
.billing-address-input.valid,
.billing-city-input.valid,
.billing-zipcode-input.valid,
.billing-country-input.valid,
.billing-state-input.valid {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

/* Enhanced Modal Styles with Two-Column Layout */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 700px;
    width: 90%;
    max-height: 75vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease-out;
    position: relative;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 24px 24px 16px 24px;
    border-bottom: 0 !important;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
    color: #111827;
    border-bottom: 1px solid var(--HGV-Secondary, #EA6F43);
    padding-bottom: 12px;
    text-transform: none;
}

.modal-description {
    color: var(--left-form-text-color, #000) !important;
    /* Subtitle */
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px; /* 155.556% */
}

.charge-date-info {
    font-size: 14px;
    font-style: normal;
    font-weight: 325;
    line-height: 155%; /* 18.6px */
    margin-top: 16px;
}

.modal-body {
    padding: 24px;
}

/* Two-column layout for modal sections */
.modal-sections-container {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.modal-section-left,
.modal-section-right {
    flex: 1;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--Neutrals-Black, #000) !important;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
}

.section-content {
    display: flex;
    flex-direction: column;
}

/* Membership Plan specific styles (left side) */
.plan-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
}

.plan-price {
    color: var(--Neutrals-Black, #000);
    /* 16px */
    font-size: 16px;
    font-style: normal;
    font-weight: 325;
    line-height: 130%; /* 20.8px */
}

/* Member Information specific styles (right side) */
.info-value-only {
    color: var(--Neutrals-Black, #000);
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%; /* 20.8px */
    margin-bottom: 8px;
}

    /* Member name specific styling - bold */
    .info-value-only.member-name {
        color: var(--Neutrals-Black, #000);
        /* 16px Bold */
        font-size: 16px;
        font-style: normal;
        font-weight: bold;
        line-height: 130%; /* 20.8px */
    }

    /* Member address specific styling - multi-line format */
    .info-value-only.member-address {
        color: var(--Neutrals-Black, #000);
        /* 16px */
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 130%; /* 20.8px */
        white-space: pre-line; /* Allow line breaks */
    }

.info-gap {
    height: 16px;
}

.info-with-label {
    margin-bottom: 8px;
}

    .info-with-label .info-label {
        font-weight: bold;
        color: var(--Neutrals-Black, #000);
        font-size: 16px;
        margin-bottom: 4px;
    }

    .info-with-label .info-value {
        color: #111827;
        font-size: 16px;
        line-height: 1.4;
    }

.modal-footer {
    padding: 16px 24px 24px 24px;
    display: flex;
    justify-content: end;
    align-items: center;
    border-top: 0 !important;
    gap: 16px;
}

.login-modal-content {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 155%; /* 24.8px */
}

.login-modal-footer {
    padding: 16px 24px 24px 24px;
    display: flex;
    justify-content: end;
    align-items: center;
    border-top: 0 !important;
}

/* Body scroll lock when modal is open */
.modal-open {
    overflow: hidden;
}

/* Confirmation Step Styling */
.confirmation-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Changed from center to flex-start */
    justify-content: flex-start; /* Changed from center to flex-start */
    text-align: left; /* Changed from center to left */
    height: auto;
    padding: 60px 40px;
    min-height: 60vh;
}

.confirmation-content {
    display: flex;
    max-width: 600px;
    margin: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.confirmation-title {
    color: var(--Neutrals-Black, #000);
    display: flex;
    padding-bottom: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    /* H6 */
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    line-height: 28px; /* 140% */
    border-bottom: 1px solid var(--HGV-Secondary, #EA6F43);
    margin-bottom: 24px;
}

.confirmation-description {
    font-size: 18px;
    color: var(--Neutrals-Black);
    line-height: 1.6;
    margin: auto;
}

    .confirmation-description p {
        margin-bottom: 16px;
    }

/* Confirmation email styling */
.confirmation-email {
    display: flex;
    justify-content: center;
    color: var(--Neutrals-Black, #000);
    /* 16px Bold */
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    line-height: 130%; /* 20.8px */
    margin-top: 8px; /* Additional gap above email */
}

.confirmation-action {
    margin-top: 32px;
}

.confirmation-btn {
    min-width: 200px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 300;
}

/* Hide navigation and title/description on confirmation step */
#content-container[data-current-step="3"] #navigation-tabs {
    display: none !important;
}

#content-container[data-current-step="3"] #block-descripter {
    display: none !important;
}

/* Ensure left container still shows background image and color on confirmation */
#content-container[data-current-step="3"] #left-content-container {
    background-color: var(--confirmation-bg-color, var(--left-form-bg-color, #89FFE7));
    color: var(--confirmation-text-color, var(--left-form-text-color, #000));
}

    #content-container[data-current-step="3"] #left-content-container::before {
        background-image: var(--confirmation-image, var(--left-container-bg-image, lightgray));
    }

/* Error banner styling */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Responsive adjustments for confirmation step */
@media (max-width: 768px) {
    .confirmation-step {
        padding: 40px 24px;
    }

    .confirmation-title {
        font-size: 18px;
        line-height: 24px;
    }

    .confirmation-description {
        font-size: 16px;
    }

    .confirmation-email {
        font-size: 14px;
    }
}

/* Add the payment error banner styles at the end of the existing CSS file */

/* ================================
   PAYMENT ERROR BANNER STYLES
   ================================ */

/* Payment Error Banner Container */
.payment-error-banner {
    display: flex;
    padding: 8px 64px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: #F9DEE0;
    box-sizing: border-box;
}

/* Payment Error Banner Icon */
.payment-error-icon {
    flex-shrink: 0;
    width: 32px;
    height: 30px;
}

/* Payment Error Banner Content */
.payment-error-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
}

/* Payment Error Banner Title */
.payment-error-title {
    color: var(--Semantic-Colors-error, #C71720);
    /* 16px Bold */
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    line-height: 130%; /* 20.8px */
    margin: 0;
}

/* Payment Error Banner Description */
.payment-error-description {
    color: var(--Semantic-Colors-error, #C71720);
    /* 14px */
    font-size: 14px;
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    margin: 0;
}

/* Hidden by default */
.payment-error-banner.hidden {
    display: none;
}

.spinner {
    visibility: hidden;
}

    .spinner.show {
        visibility: visible;
    }

.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4); /* semi-transparent overlay */
    z-index: 99999; /* Increased z-index to ensure it's above everything */
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none; /* default: allow interaction */
    transition: background 0.2s;
    /* Ensure it's always positioned relative to the viewport */
    transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}

    .spinner-overlay.show {
        visibility: visible;
        pointer-events: all; /* block interaction when visible */
    }

/* Scale factor calculation based on viewport width - update for wrapper */
@media (max-width: 1920px) {
    .spinner-overlay {
        /* Override any scaling from parent containers */
        transform: none !important;
        /* Ensure it's always full viewport */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }

    .multi-product-enrollment-wrapper {
        transform: scale(calc(100vw / 1920)); /* Scale based on viewport width */
        transform-origin: top center; /* Center the scaling */
    }

    #content-container {
        transform: none; /* Remove transform from content-container since wrapper handles it */
    }
}

@media (max-width: 1600px) {
    .multi-product-enrollment-wrapper {
        transform: scale(calc(100vw / 1920));
        transform-origin: top center;
    }

    #content-container {
        transform: none;
    }
}

@media (max-width: 1400px) {
    .multi-product-enrollment-wrapper {
        transform: scale(calc(100vw / 1920));
        transform-origin: top center;
    }

    #content-container {
        transform: none;
    }
}

@media (max-width: 1200px) {
    .multi-product-enrollment-wrapper {
        transform: scale(calc(100vw / 1920));
        transform-origin: top center;
    }

    #content-container {
        width: min(90cqw, 1122px);
    }
    
    #left-content-container {
        width: clamp(300px, 35cqw, 462px);
    }
    
    #right-content-container {
        width: clamp(400px, 65cqw, 748px);
    }

    /* Input field widths - Proportional to 660px minimum right container */
    #EnrollForm_FirstName,
    #EnrollForm_LastName,
    #EnrollForm_City,
    .input-email,
    .input-third-party-code,
    .password-input-container {
        width: clamp(200px, 25vw, 300px);
    }

    .input-phone {
        width: clamp(150px, 18vw, 218px);
    }

    .input-country-code,
    .phone-input-group .country-code {
        width: clamp(60px, 6vw, 76px); 
    }

    #EnrollForm_PostalCode {
        width: clamp(100px, 10vw, 131px); 
    }

    /* Payment and billing fields */
    .payment-name-group,
    .payment-card-group,
    .billing-address-group {
        width: clamp(200px, 25vw, 300px);
    }

    .payment-expiration-group,
    .payment-security-group,
    .billing-city-group,
    .billing-zipcode-group,
    .billing-country-group,
    .billing-state-group {
        width: clamp(100px, 12vw, 144px);
    }

    /* Form rows responsive behavior */
    .form-row {
        gap: clamp(8px, 1vw, 12px);
        justify-content: space-between;
    }

    /* Radio options scaling */
    .radio-option {
        padding: clamp(8px, 1vw, 12px);
        font-size: clamp(12px, 1.2vw, 14px);
    }

    #left-content-container::before {
        position: absolute;
        height: 331px;
        width: 82%;
    }
}

@media (max-width: 1024px) {
    .multi-product-enrollment-wrapper {
        display: none;
        background: 0;
    }

    #content-container {
        flex-direction: row;
        min-height: 0;
        min-width: 200px;
        max-width: 100%;
        transform: none; /* Override scaling for this component */
    }

    #left-content-container {
        width: 30%;
        min-width: 248px;
        min-height: auto;
        padding: 16px 16px 0 16px;
        align-items: end;
    }

        #left-content-container::before {
            position: absolute;
            height: 331px;
            width: 88%;
        }

    #navigation-tabs {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 80px;
        justify-content: flex-start;
    }

    #right-content-container {
        width: 100%;
        min-height: auto;
        padding: 0;
    }

    .input-fields-container {
        width: 100%;
    }

    #EnrollForm_FirstName,
    #EnrollForm_LastName,
    #EnrollForm_City,
    .input-email,
    .input-third-party-code,
    .password-input-container {
        width: 100%
    }

    .input-phone {
        width: 100% /* Original 218px width */
    }

    .input-country-code,
    .phone-input-group .country-code {
        width: clamp(76px, 3.96vw, 76px); /* Original 76px width */
    }

    #EnrollForm_PostalCode {
        width: clamp(131px, 6.82vw, 131px); /* Original 131px width */
    }

    /* Password input containers */
    .password-input-container .password-input {
        width: 100% /* Original 300px width */
    }

    .form-group-third-code-label {
        width: 100%;
    }

    .form-row {
        flex-direction: column;
    }

    .form-group {
        width: 100%;
    }

    #block-descripter {
        border-bottom: 0;
    }

    .input-fields-container {
        width: 100%;
        background: 0;
    }

    #step-1 .form-bottom-section {
        flex-direction: column;
        justify-content: flex-start;
    }

    .recaptcha-content {
        display: flex;
        justify-content: center;
    }

    .radio-group.two-columns .radio-option {
        min-height: 0px;
        height: 100%;
    }

    .radio-option-tier {
        flex-direction: column;
    }

    .tier-pill {
        display: none !important;
    }

    .tier-pill-mobile {
        display: flex;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 16px;
        flex-shrink: 0;
        /* Pill text styling */
        font-size: 12px;
        font-style: normal;
        font-weight: 325;
        line-height: 14px; /* 116.667% */
        /* Use the same dynamic pill styling */
        background: var(--pill-bg-color, #89FFE7) !important;
        color: var(--pill-text-color, #000) !important;
    }

    .radio-option-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .bottom-row-container {
        flex-direction: column;
    }

    /*.form-buttons {
        flex-direction: column-reverse;
    }*/

    .modal-content {
        width: 95%;
        margin: 20px;
        max-height: 90vh;
    }

    .modal-sections-container {
        flex-direction: row;
        gap: 24px;
    }

    /*.modal-footer {
        flex-direction: column;
        gap: 12px;
    }

        .modal-footer .btn {
            width: 100%;
            justify-content: center;
        }*/

    .modal-header {
        padding: 24px 16px 0 16px;
    }

    /*.modal-footer {
        flex-direction: column-reverse;
        padding: 24px 16px 16px 16px;
        gap: 12px;
    }*/

    .modal-body {
        padding: 16px 16px 0 16px;
    }

    #modal-back-btn {
        margin-top: 6px;
    }

    .confirmation-step {
        padding: 40px 32px;
    }

    .confirmation-title {
        font-size: 20px;
    }

    .confirmation-description {
        font-size: 18px;
        text-align: center;
    }

    .confirmation-email {
        font-size: 18px;
    }

    .confirmation-action {
        display: flex;
        justify-content: center;
        width: 100%
    }

    .confirmation-btn {
        height: 48px;
        width: 120px;
    }
}

/*@media (max-width: 768px) {
    .multi-product-enrollment-wrapper {
        transform: scale(calc(100vw / 1920));
        transform-origin: top center;
    }

    #content-container {
        transform: none;
    }
}*/

@media (max-width: 480px) {
    .multi-product-enrollment-wrapper {
        display: none;
        background: 0;
    }

    #content-container {
        flex-direction: column;
        min-height: 0;
        min-width: 200px;
        max-width: 100%;
        transform: none; /* Override scaling for this component */
    }

    #left-content-container {
        width: 100%;
        min-height: auto;
        padding: 16px 16px 0 16px;
        align-items: end;
        gap: 0;
    }

        #left-content-container::before {
            display: none;
            position: relative;
            height: 200px;
            width: 210px;
            right: 0;
        }
        
        #content-container[data-current-step="3"] #left-content-container::before {
            display: flex;
        }

    #right-content-container {
        width: 100%;
        min-height: auto;
        padding: 0;
    }

    .input-fields-container{
        width: 100%;
    }

    #EnrollForm_FirstName,
    #EnrollForm_LastName,
    #EnrollForm_City,
    .input-email,
    .input-third-party-code,
    .password-input-container {
        width: 100%
    }

    .input-phone {
        width: 100% /* Original 218px width */
    }

    .input-country-code,
    .phone-input-group .country-code {
        width: clamp(76px, 3.96vw, 76px); /* Original 76px width */
    }

    #EnrollForm_PostalCode {
        width: clamp(131px, 6.82vw, 131px); /* Original 131px width */
    }

    /* Password input containers */
    .password-input-container .password-input {
        width: 100% /* Original 300px width */
    }

    .form-group-third-code-label {
        width: 100%;
    }

    .form-row {
        flex-direction: column;
    }

    .form-group {
        width: 100%;
    }

    #block-descripter {
        border-bottom: 0;
    }

    #navigation-tabs {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 80px;
        justify-content: flex-start;
    }

        #navigation-tabs div {
            border-left: 0;
            border-bottom: 1px solid var(--HGV-Primary, #000);
        }

            /* Active navigation tab - only the current step gets black border */
            #navigation-tabs div.active {
                border-left: 0;
                border-bottom: 4px solid var(--HGV-Primary, #000); /* Black border for active */
                color: var(--left-form-text-color, #000); /* Uses dynamic color */
                background: transparent;
                font-weight: bold; /* Bold for active step */
                line-height: 28px; /* 175% for active */
            }

        /* Default active state for navbar-1 */
        #navigation-tabs #navbar-1 {
            border-left: 0;
        }

    .input-fields-container {
        width: 100%;
        background: 0;
    }

    #step-1 .form-bottom-section {
        flex-direction: column;
        justify-content: flex-start;
    }

    .recaptcha-content{
        display: flex;
        justify-content: center;
    }

    .btn {
        width: 100%;
    }

    .radio-group.two-columns .radio-option {
        min-height: 0px;
        height: 100%;
    }

    .radio-option-tier {
        flex-direction: column;
    }

    .tier-pill {
        display: none !important;
    }

    .tier-pill-mobile {
        display: flex;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 16px;
        flex-shrink: 0;
        /* Pill text styling */
        font-size: 12px;
        font-style: normal;
        font-weight: 325;
        line-height: 14px; /* 116.667% */
        /* Use the same dynamic pill styling */
        background: var(--pill-bg-color, #89FFE7) !important;
        color: var(--pill-text-color, #000) !important;
    }

    .radio-option-container{
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .bottom-row-container{
        flex-direction: column;
    }

    .form-buttons{
        flex-direction: column-reverse;
    }

    .modal-header{
        padding: 24px 16px 0 16px;
    }

    .modal-footer {
        flex-direction: column-reverse;
        padding: 24px 16px 16px 16px;
        gap: 12px;
    }

    .modal-body {
        padding: 16px 16px 0 16px;
    }

    #modal-back-btn{
        margin-top: 6px;
    }

    .confirmation-step{
        padding: 40px 32px;
    }

    .confirmation-title {
        font-size: 20px;
    }

    .confirmation-description {
        font-size: 18px;
        text-align: center;
    }

    .confirmation-email{
        font-size: 18px;
    }

    .confirmation-action{
        width: 100%
    }

    .confirmation-btn{
        height: 65px;
    }
}