/**
 * Personal Details Form Styles
 * For Step 2: Personal information and payment details form
 */

/* ========================================
   PERSONAL FORM CONTAINER
   ======================================== */
.af-registration-wrapper .af-personal-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0px !important;
}

.af-registration-wrapper .af-personal-container .af-form-section:first-child {
    margin-top: 20px !important;
}

.af-registration-wrapper .af-personal-form {
    max-width: 100% !important;
}

/* ========================================
   FORM SECTIONS
   ======================================== */

.af-registration-wrapper .af-form-section {
    margin-bottom: 22px !important;
}

.af-registration-wrapper .af-form-row {
    display: grid !important;
    gap: 30px !important;
    margin-bottom: 20px !important;
}

.af-registration-wrapper .af-form-row.af-row-2 {
    grid-template-columns: 1fr 1fr !important;
}

.af-registration-wrapper .af-form-row.af-row-3 {
    grid-template-columns: 1fr 1fr 1fr !important;
}

/* Manual address fields - hidden by default, shown when address lookup fails */
.af-registration-wrapper .af-form-row.af-manual-address-fields {
    display: none !important;
}

.af-registration-wrapper .af-form-row.af-manual-address-fields.visible {
    display: grid !important;
}

/* ========================================
   FORM FIELDS
   ======================================== */

.af-registration-wrapper .af-form-field {
    position: relative !important;
}

.af-registration-wrapper .af-form-field input,
.af-registration-wrapper .af-form-field select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    font-family: 'Moon', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #000000 !important;
    background-color: #fff !important;
    transition: all 0.3s ease !important;
}

/* Placeholder for input and textarea */
.af-registration-wrapper .af-form-field input::placeholder,
.af-registration-wrapper .af-form-field textarea::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

/* Vendor fallbacks */
.af-registration-wrapper .af-form-field input::-webkit-input-placeholder,
.af-registration-wrapper .af-form-field textarea::-webkit-input-placeholder {
    color: #000000 !important;
}

.af-registration-wrapper .af-form-field input:-ms-input-placeholder,
.af-registration-wrapper .af-form-field textarea:-ms-input-placeholder {
    color: #000000 !important;
}

.af-registration-wrapper .af-form-field input::-ms-input-placeholder,
.af-registration-wrapper .af-form-field textarea::-ms-input-placeholder {
    color: #000000 !important;
}

.af-registration-wrapper .af-form-field input:focus,
.af-registration-wrapper .af-form-field select:focus {
    outline: none !important;
}

.af-registration-wrapper .af-form-field input::placeholder {
    color: #000000 !important;
}

.af-registration-wrapper .af-form-field input::-webkit-input-placeholder {
    color: #000000 !important;
}

.af-registration-wrapper .af-form-field input:-ms-input-placeholder {
    color: #000000 !important;
}

.af-registration-wrapper .af-form-field input::-moz-placeholder {
    color: #000000 !important;
}

.af-registration-wrapper .af-form-field input:-moz-placeholder {
    color: #000000 !important;
}

.af-registration-wrapper .af-form-field input.error {
    border-color: var(--af-red);
}


.af-registration-wrapper .af-error-message {
    display: none !important;
    color: var(--af-red) !important;
    font-family: 'Moon', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    font-style: italic !important;
    margin-top: 4px !important;
}

.af-registration-wrapper .af-error-message:not(:empty) {
    display: block !important;
}


/* Date Input with Flatpickr */
.af-registration-wrapper .af-form-field input#birthdate {
    color: #495057 !important;
    cursor: pointer !important;
    background-color: white !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23440099" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px !important;
    padding-right: 40px !important;
}

.af-registration-wrapper .af-form-field input#birthdate:focus {
    color: var(--af-black) !important;
    background-color: white !important;
}

.af-registration-wrapper .af-form-field input#birthdate::placeholder {
    color: #495057 !important;
}

/* Flatpickr calendar customization */
.af-registration-wrapper .flatpickr-calendar {
    font-family: 'Moon', sans-serif !important;
    font-weight: 400 !important;
}

.af-registration-wrapper .flatpickr-day.selected,
.af-registration-wrapper .flatpickr-day.selected:hover {
    background: var(--af-primary) !important;
    border-color: var(--af-primary) !important;
}

.af-registration-wrapper .af-form-field label {
    font-family: 'Moon', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: #333333 !important;
    top: calc(12px + 2.5px) !important;
    left: 16px !important;
    position: absolute !important;
    transition: .2s !important;
    pointer-events: none !important;
}

.af-registration-wrapper .af-form-field label.toggle {
    top: calc(-12px - 7px) !important;
    font-size: 12px !important;
}

.af-registration-wrapper .af-form-field label .af-required {
    color: var(--af-red) !important;
    font-size: 12px !important;
}

.af-registration-wrapper .flatpickr-monthDropdown-months {
    -webkit-appearance: none !important;
}

/* ========================================
   GENDER FIELD
   ======================================== */
.af-registration-wrapper .af-gender-field {
    display: flex !important;
    flex-direction: column !important;
}

.af-registration-wrapper .af-gender-options {
    display: flex !important;
    gap: 12px !important;
    width: 100% !important;
}

.af-registration-wrapper .af-gender-option {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 0px !important;
    padding: 13px 2px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-family: 'Moon', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #495057 !important;
    transition: all 0.3s ease !important;
}

.af-registration-wrapper .af-gender-option.selected .custom-radio-checkbox-ab {
    color: #68ce03 !important;
    /* background: #fff !important; */
    outline: 2px solid #409 !important;
}

.af-registration-wrapper .custom-radio-checkbox-ab {
    color: #fff;
    background: #fff;
    outline: 2px solid #d0d0d0 !important;
    border: 4px solid #fff;
    border-radius: 100px !important;
    width: 26px !important;
    height: 26px !important;
    margin-right: 15px !important;
}

.af-registration-wrapper .af-gender-option svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--af-white) !important;
    background: white !important;
    border-radius: 50% !important;
}

.af-registration-wrapper .af-gender-option.selected svg {
    color: var(--af-green) !important;
}

.af-registration-wrapper .af-gender-option svg .check-fill {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.af-registration-wrapper .af-gender-option.selected svg .check-fill {
    opacity: 1 !important;
}


/* ========================================
   AGREEMENTS SECTION
   ======================================== */
.af-registration-wrapper .af-agreements-section {
    margin: 32px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.af-registration-wrapper .af-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-family: 'Moon', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    position: relative !important;
    padding-left: 40px !important;
}

.af-registration-wrapper .af-checkbox-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
    height: 0 !important;
    width: 0 !important;
}

.af-registration-wrapper .af-checkbox-custom {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 28px !important;
    width: 28px !important;
    background-color: var(--af-white) !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 50% !important;
    /* transition: all 0.2s !important; */
}

.af-registration-wrapper .af-checkbox-label:hover .af-checkbox-custom {
    background-color: var(--af-gray-light) !important;
}


.af-registration-wrapper .af-checkbox-label input[type="checkbox"]:checked~.af-checkbox-custom:before {
    background-color: var(--af-green) !important;
    border-color: var(--af-green) !important;
    top: 4px !important;
    left: 4px !important;
    content: "";
    width: 16px !important;
    height: 16px !important;
    content: "";
    position: absolute !important;
    border-radius: 16px !important;
}

.af-registration-wrapper .af-checkbox-label input[type="checkbox"]:checked~.af-checkbox-custom {
    border-color: var(--af-primary) !important;
}

.af-registration-wrapper .af-checkbox-label input[type="checkbox"]:checked~.af-checkbox-custom {}

.af-registration-wrapper .af-checkbox-custom::after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
    left: 10px !important;
    top: 7px !important;
    width: 2px !important;
    height: 6px !important;
    border: solid var(--af-white) !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.af-registration-wrapper .af-checkbox-label input[type="checkbox"]:checked~.af-checkbox-custom::after {
    display: block !important;
}

.af-registration-wrapper .af-checkbox-text {
    line-height: 1.5 !important;
    color: #495057 !important;
}

.af-registration-wrapper .af-checkbox-text a {
    color: var(--af-primary) !important;
    text-decoration: none !important;
    font-family: 'Moon', sans-serif !important;
    font-weight: 700 !important;
}

body.et-db #et-boc .et-l .af-registration-wrapper .af-checkbox-text a:hover,
.af-registration-wrapper .af-checkbox-text a:hover {
    text-decoration: underline !important;
}


/* ========================================
   NAVIGATION BUTTONS
   ======================================== */
.af-registration-wrapper .af-navigation-buttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    width: 58% !important;
    max-width: 640px !important;
    margin-top: 32px !important;
}

.af-registration-wrapper .af-navigation-buttons:has(button:only-child) {
    justify-content: flex-end !important;
}

.af-registration-wrapper .af-personal-wrapper {
    display: grid !important;
    grid-template-columns: 640px auto !important;
    gap: 0 100px !important;
    margin-bottom: 15px !important;
}

.af-registration-wrapper .ab-test.subscription-usp {
    position: relative !important;
    background-color: #fff !important;
    font-size: 18px !important;
    margin-right: 0px !important;
    padding: 32px 32px 120px !important;
}

.af-registration-wrapper .ab-test.subscription-usp h4 {
    font-size: 18px !important;
    margin-bottom: 0 !important;
    color: var(--af-primary) !important;
}

.af-registration-wrapper .ab-test.subscription-usp .usp-list {
    margin-bottom: 30px !important;
}

.af-registration-wrapper .ab-test.subscription-usp .usp-list p {
    font-size: 18px !important;
    color: #676767 !important;
    line-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    padding-bottom: 0 !important;
}

.af-registration-wrapper .ab-test .text-h4 {
    text-transform: none !important;
    font-family: "Moon", sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
}

.af-registration-wrapper .ab-test.subscription-usp .usp-list img {
    margin-right: 8px !important;
    height: 100% !important;
}

.af-registration-wrapper .ab-test.subscription-usp .review-block {
    margin-left: 120px !important;
    margin-top: 20px !important;
    color: #000 !important;
}

.af-registration-wrapper .ab-test.subscription-usp .subscription-usp-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 22px 16px !important;
    text-align: center !important;
    width: 100% !important;
    background: #409 url(../images/side-stripes.png) 100% no-repeat !important;
    color: #fff !important;
    font-family: "Moon", sans-serif !important;
    font-weight: 700 !important;
}

.af-registration-wrapper .ab-test.subscription-usp .usp-persons-img {
    position: absolute !important;
    bottom: 0 !important;
    left: -60px !important;
    height: 230px !important;
}


/* ========================================
   RESPONSIVE STYLES
   ======================================== */
@media (max-width: 1366px) {
    .af-registration-wrapper .ab-test.subscription-usp {
        margin-right: 0px !important;
    }

    .af-registration-wrapper .af-personal-container {
        padding: 20px 0px !important;
    }
}

@media (max-width: 1250px) {
    .af-registration-wrapper .af-personal-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 80px !important;
        margin-bottom: 15px !important;
    }
}


@media (max-width: 991.98px) {
    .af-registration-wrapper .ab-test .subscription-usp-footer p {
        text-align: left !important;
    }

    .af-registration-wrapper .ab-test.subscription-usp .usp-list {
        margin-bottom: 0 !important;
    }

    .af-registration-wrapper .ab-test.subscription-usp {
        padding: 32px 20px 102px !important;
    }

    .af-registration-wrapper .af-personal-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 0px !important;
        margin-bottom: 15px !important;
    }

    .af-registration-wrapper .af-personal-container,
    .af-registration-wrapper .subscription-usp.form-group {
        max-width: 430px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .af-registration-wrapper .ab-test.subscription-usp .usp-list p {
        align-items: flex-start !important;
    }

    .af-registration-wrapper .ab-test.subscription-usp .usp-list p img {
        margin-top: 5px !important;
    }

    .af-registration-wrapper .af-personal-container {
        order: 2 !important;
    }

    .af-registration-wrapper .subscription-usp.form-group {
        order: 1 !important;
    }

    .af-registration-wrapper .af-navigation-buttons {
        width: 100% !important;
        max-width: 100% !important;
    }

    .af-registration-wrapper .af-navigation-buttons:has(button:only-child) {
        justify-content: center !important;
        margin-top: 0 !important;
    }

    .af-registration-wrapper .af-agreements-section {
        margin-bottom: 0 !important;
    }

    .af-registration-wrapper .af-form-field input,
    .af-registration-wrapper .af-form-field select {
        padding: 10px 14px !important;
        font-size: 15px !important;
        line-height: 22px !important;
    }

    .af-registration-wrapper .af-form-field label {
        left: 14px !important;
        top: calc(10px + 2.5px) !important;
    }

    .af-registration-wrapper .af-form-field label.toggle {
        top: calc(-10px - 7px) !important;
        font-size: 11px !important;
    }

    .af-registration-wrapper .af-gender-option {
        padding: 10px 2px !important;
    }
}

@media (max-width: 767.98px) {
    .af-registration-wrapper .ab-test.subscription-usp .review-block {
        margin-left: 90px !important;
    }

    .af-registration-wrapper .wp-block-group {
        padding: 0px !important;
    }

    .af-registration-wrapper .has-global-padding>.alignfull {
        margin: 0px !important;
        padding: 0px !important;
    }

    .af-registration-wrapper .af-navigation-buttons {
        width: 100% !important;
    }
}

@media (max-width: 768px) {

    .af-registration-wrapper .af-form-row {
        gap: 20px !important;
    }

    .af-registration-wrapper .af-form-row.af-row-2,
    .af-registration-wrapper .af-form-row.af-row-3 {
        grid-template-columns: 1fr !important;
    }

    .af-registration-wrapper .ab-test.subscription-usp .usp-list p {
        font-size: 16px !important;
        line-height: 1.4em !important;
    }

    .af-registration-wrapper .ab-test.subscription-usp .usp-list p:not(:last-child) {
        margin-bottom: 10px !important;
    }

    .af-registration-wrapper .af-personal-container {
        padding: 16px !important;
    }

    .af-registration-wrapper .af-form-field input,
    .af-registration-wrapper .af-form-field select {
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .af-registration-wrapper .af-form-field label {
        left: 12px !important;
        top: calc(8px + 2.5px) !important;
        font-size: 14px !important;
        line-height: 16px !important;
    }

    .af-registration-wrapper .af-form-field label.toggle {
        top: calc(-8px - 7px) !important;
        font-size: 11px !important;
    }

    .af-registration-wrapper .ab-test.subscription-usp .usp-list p img {
        margin-top: 2px !important;
    }
}

/* Hidden elements */
.af-registration-wrapper .hidden-desktop {
    display: none !important;
}

@media (max-width: 767px) {
    .af-registration-wrapper .ab-test.subscription-usp .usp-persons-img {
        left: -10px !important;
        height: 190px !important;
    }

    .af-registration-wrapper .hidden-tablet {
        display: none !important;
    }

    .af-registration-wrapper .hidden-desktop {
        display: flex !important;
    }

    .af-registration-wrapper .hidden-desktop .af-gender-option {
        padding-left: 0px !important;
    }
}


@media (max-width: 480px) {

    .af-registration-wrapper .af-form-row {
        display: grid !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .af-registration-wrapper .af-checkbox-label {
        font-size: 14px !important;
    }

    .af-registration-wrapper .ab-test.subscription-usp .usp-persons-img {
        left: -10px !important;
        height: 190px !important;
    }

    .af-registration-wrapper .review-block img {
        width: 80% !important;
    }
}

@media (max-width: 414px) {
    .af-registration-wrapper .af-personal-container {
        padding: 0px !important;
    }
}