/* Gender Mode Styles - iOS/WebKit Compatible */

.modal-overlay.opusmeds-select-mode {
    position: fixed;
    inset: 0;
    background: url(../img/green-fullwidth-bg.webp) center / cover no-repeat;
    z-index: 999991;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transition: opacity 600ms cubic-bezier(0.33, 0, 0, 1), visibility 600ms;
    padding: min(10%, 124px) 5% 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
}

.modal-overlay.opusmeds-select-mode:not(.active) {
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Wrapper */
.opusmeds-select-mode .opusmeds-popup-wrapper {
    max-width: 920px;
    width: 100%;
}

.opusmeds-select-mode .logo-wrapper {
    margin-bottom: min(14.5%, 140px);
}

.opusmeds-select-mode .logo-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Form */
.opusmeds-select-mode #genderPreferenceForm {
    padding: 13%;
    background-color: #FDF6E3;
}

/* Gender Options */
.opusmeds-select-mode .gender-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--small-space, 16px);
}

.opusmeds-select-mode .gender-option {
    cursor: pointer; /* Critical for iOS tap events */
    width: calc(50% - var(--small-space, 16px) / 2);
    touch-action: manipulation;
}

.opusmeds-select-mode .gender-option span {
    text-align: center;
    display: block;
    width: 100%;
    padding: 2rem 1rem;
    border: 1px solid var(--color-primary-btn, #3D655D);
    color: #333;
    font-weight: 600;
    transition: background-color 0.2s, transform 0.15s;
    background-color: rgba(255, 255, 255, 0.61);
}

/* Hover - desktop only */
@media (hover: hover) {
    .opusmeds-select-mode .gender-option:hover span {
        background-color: var(--color-medication-card-bg, rgba(61, 101, 93, 0.1));
    }
}

/* Active/pressed state */
.opusmeds-select-mode .gender-option:active span {
    background-color: var(--color-medication-card-bg, rgba(61, 101, 93, 0.15));
    transform: scale(0.98);
}

/* Button */
.opusmeds-select-mode #genderPreferenceForm button {
    margin-left: auto;
    cursor: pointer;
    display: block;
    padding: var(--small-space, 16px) !important;
    background: none;
    line-height: 15px !important;
    border-color: var(--color-main-dark, #3D655D) !important;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

@media (hover: hover) {
    .opusmeds-select-mode #genderPreferenceForm button:hover {
        background-color: var(--color-main-dark, #3D655D) !important;
    }
    .opusmeds-select-mode #genderPreferenceForm button:hover svg path {
        fill: var(--color-white, #fff);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .modal-overlay.opusmeds-select-mode {
        align-items: center;
        padding: env(safe-area-inset-top, 0) 5% calc(20px + env(safe-area-inset-bottom, 0));
    }
    .opusmeds-select-mode .gender-options {
        flex-direction: column;
    }
    .opusmeds-select-mode .gender-option {
        width: 100%;
    }
}

/* iOS 100vh fix */
@supports (-webkit-touch-callout: none) {
    .modal-overlay.opusmeds-select-mode {
        min-height: -webkit-fill-available;
    }
}

/* Scroll lock */
body.gender-modal-open {
    overflow: hidden !important;
}

/* Women mode colors */
body.site_mode_women {
    --color-main-dark: #4B2C49;
    --color-primary-btn: #D8A3B2;
    --color-main-light: #D8A3B2;
    --color-light: #D8A3B2;
    --color-secondary-dark: #4B2C49;
    --color-main-dark-hover: rgba(216, 163, 178, 0.6);
    --color-light-text-lighter: rgba(216, 163, 178, 0.5);
    --c-p-btn-h: rgba(216, 163, 178, 0.1);
    --color-light-text: rgba(216, 163, 178, 0.6);
    --c-light-green: #99A985;
}

body.site_mode_women .et_pb_section_0_tb_footer.et_pb_section {
    background-color: var(--color-main-dark);
}

body.site_mode_women .et_pb_icon_0_tb_footer .et_pb_icon_wrap {
    color: var(--color-primary-btn);
}

body.et-db.site_mode_women #page-container #et-boc footer.et-l {
    color: var(--color-main-dark-hover);
}