#wizard-nav {
    margin-bottom: 2rem;
}

#wizard-nav > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    margin-bottom: 1rem;
}

#wizard-nav > div > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

#wizard-nav > div > div:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #d1d5db;
    z-index: 1;
    transition: background-color 0.3s ease;
}

/* Progressive line colors */
#wizard-nav > div > div.line-completed::after {
    background: var(--colors-primary-light-green-600, #3f856a);
}

.wizard-circle {
    width: 48px;
    height: 48px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
    transition: all 0.3s ease;

    border-radius: 999px;
    border: 4px solid var(--colors-primary-light-green-200, #d4ebe2);
    background: var(--colors-neutral-grey-100, #fff);
}

.wizard-circle.active {
    background-color: #fff;
    color: #10b981;
    border: 2px solid #10b981;
    box-shadow: 0 0 0 2px #10b98133;
}

.wizard-label.active {
    color: black;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: 1.1;
}

.wizard-circle.completed {
    color: #fff;
    border-radius: 999px;
    border: 1px solid var(--colors-primary-light-green-600, #3f856a);
    background: var(--colors-primary-light-green-600, #3f856a);
}

.wizard-label {
    color: var(--colors-neutral-grey-900, #4a4a4a);
    text-align: center;

    /* fonts/b-1-regular */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

/* Responsive adjustments */
@media (max-width: 640px) {
    #wizard-nav > div > div:not(:last-child)::after {
        width: 80%;
        left: 60%;
    }

    .wizard-circle {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    #wizard-nav > div > div:not(:last-child)::after {
        top: 20px;
    }
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    color: var(--colors-neutral-grey-900, #4a4a4a);
    text-align: center;
    /* fonts/b-1-regular */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.wizard-page {
    padding-top: 32px !important;
    padding-bottom: 26px !important;
}

.form-input {
    height: 56px;
    width: 100% !important;
    padding: 8px !important;
    align-items: center;
    gap: 8px;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 400;
    color: #374151 !important;
    transition: border-color 0.2s;
    border: 1px solid var(--colors-neutral-grey-300, #d2d2d2);
    background: var(--colors-neutral-grey-100, #fff);
}

.form-input:focus {
    border-color: #10b981;
    outline: none;
    box-shadow: 0 0 0 2px #a7f3d0;
}

.form-button {
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    background-color: #3f856a !important;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--colors-primary-light-green-600, #3f856a);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-lock {
    background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 9.08333H14.1667V7.41667C14.1667 5.11667 12.3 3.25 10 3.25C7.70001 3.25 5.83334 5.11667 5.83334 7.41667V9.08333H5.00001C4.08334 9.08333 3.33334 9.83333 3.33334 10.75V19.0833C3.33334 20 4.08334 20.75 5.00001 20.75H15C15.9167 20.75 16.6667 20 16.6667 19.0833V10.75C16.6667 9.83333 15.9167 9.08333 15 9.08333ZM7.50001 7.41667C7.50001 6.03333 8.61668 4.91667 10 4.91667C11.3833 4.91667 12.5 6.03333 12.5 7.41667V9.08333H7.50001V7.41667ZM15 19.0833H5.00001V10.75H15V19.0833ZM10 16.5833C10.9167 16.5833 11.6667 15.8333 11.6667 14.9167C11.6667 14 10.9167 13.25 10 13.25C9.08334 13.25 8.33334 14 8.33334 14.9167C8.33334 15.8333 9.08334 16.5833 10 16.5833Z" fill="%238E8E8E"/></svg>') !important;
    background-repeat: no-repeat !important;

    background-size: 20px 20px !important;
    background-position: 10px center !important;
    padding-left: 40px !important;
}

input[type="checkbox"] {
    border-radius: 4px;
    border: 1px solid var(--colors-neutral-grey-500, #a4a4a4);
    background: var(--colors-neutral-grey-100, #fff);
    width: 20px;
    height: 20px;
}

/* Plan Cards */
.plan-cards-row {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}
.plan-card {
    flex: 1;
    border: 1.5px solid #d1d5db;
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.plan-card.selected {
    border-radius: 12px;
    border: 1px solid var(--colors-primary-light-green-500, #54b28e);
    background: var(--colors-primary-light-green-200, #d4ebe2);
    /* Global Tokens/E1 */
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2),
        0px 4px 5px 0px rgba(0, 0, 0, 0.14),
        0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.plan-title {
    color: var(--colors-neutral-grey-1000, #333);
    /* fonts/b-1-semi bold */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}
.plan-price {
    color: var(--colors-primary-light-green-600, #3f856a);

    /* fonts/h-6 */
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 150% */
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.plan-feature {
    display: flex;
    align-items: start;
    gap: 8px;
    color: var(--colors-neutral-grey-900, #4a4a4a);
    font-family: Figtree;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}
.plan-feature .check {
    color: #10b981;
    font-size: 1.1em;
}
.plan-feature .cross {
    color: #e53e3e;
    font-size: 1.1em;
}

/* Payment Section */
.payment-section-title {
    margin-bottom: 18px;
    font-weight: 600;
    font-size: 1.1rem;
    color: #222;
}
.payment-tabs {
    display: flex;
    padding: 4px;
    margin-bottom: 18px;
    background: #e8e8e8;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.payment-tab-btn {
    flex: 1;
    align-items: center;
    border-radius: 20px;
    background: var(--colors-neutral-grey-200, #e8e8e8);
    border: none;
    font-weight: 500;
    font-size: 1rem;
    color: #222;
    border-radius: 0;
    box-shadow: none;
    transition: background 0.2s;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.payment-tab-btn.selected {
    padding: 4px;
    border-radius: 16px;
    background: var(--colors-neutral-grey-100, #fff);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2),
        0px 4px 5px 0px rgba(0, 0, 0, 0.14),
        0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.payment-tab-btn:focus {
    outline: none;
}

.payment-fields-row {
    display: flex;
    gap: 18px;
    margin-bottom: -8px;
}

.payment-checkbox {
    margin-bottom: 10px;
}

.payment-actions-row {
    display: flex;
    gap: 24px;
    margin-top: 12px;
}

.payment-btn-back,
.info-btn-back {
    background: #fff !important;
    color: #3f856a !important;
    border: 1.5px solid #3f856a !important;
}
.payment-btn-submit {
    background: #3f856a !important;
    color: #fff !important;
}

.terms-link {
    color: #007bff;
    text-decoration: underline;
}

.datepicker-dropdown {
    z-index: 1000 !important;
    background-color: #ffffff !important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.375rem;
    /* md: Tailwind border radius */
}

.datepicker table {
    border-collapse: separate;
    border-spacing: 0.25rem;
}

.datepicker table tr td,
.datepicker table tr th {
    padding: 0.5rem;
    border-radius: 0.375rem;
    /* md: Tailwind border radius */
}

.datepicker table tr td.day.active,
.datepicker table tr td.day:hover {
    background-color: #6366f1 !important;
    /* indigo-500 */
    color: #ffffff !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #a0aec0 !important;
    /* gray-400 */
}

.datepicker table tr td.disabled,
.datepicker table tr th.disabled {
    color: #cbd5e0 !important;
    /* gray-300 */
}

.datepicker table tr th.datepicker-switch {
    text-transform: capitalize;
    color: #4a5568;
    /* gray-700 */
    cursor: pointer;
}

.main-container {
    padding: 22px 44px;
    margin-top: 100px;
    margin-bottom: 100px;
    z-index: 1;
    border-radius: 16px;
    background: var(--colors-neutral-grey-100, #fff);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2),
        0px 6px 10px 0px rgba(0, 0, 0, 0.14),
        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

@media (max-width: 640px) {
    .main-container {
        padding: 12px 4vw;
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .plan-cards-row {
        flex-direction: column;
        gap: 16px;
    }
    .plan-card {
        width: 100%;
    }
    .payment-fields-row,
    .wizard-page > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .form-button,
    .form-input {
        width: 100% !important;
        min-width: 0;
    }
    .plan-title,
    .form-label,
    .wizard-label {
        font-size: 14px !important;
    }
    .plan-price {
        font-size: 16px !important;
    }
    .plan-feature {
        font-size: 11px !important;
    }
    #wizard-nav {
        margin-bottom: 1rem;
    }
}

body,
html {
    max-width: 100vw;
    overflow-x: hidden;
}