/* Choose / store selector — full-bleed desktop brand image, stacked store panels on mobile */

.choose-page {
    --choose-fallback-bg: #c9b8a4;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--choose-fallback-bg);
    overflow: hidden;
}

.choose-topbar {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 20px;
    pointer-events: none;
}

.choose-topbar__lang {
    pointer-events: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.choose-topbar__lang i {
    font-size: 10px;
}

.choose-stage {
    flex: 1;
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.choose-stage__empty {
    margin: auto;
    padding: 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.choose-panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
    padding: 0 16px 12vh;
    border: 0;
    background-color: transparent;
    background-image: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    text-align: center;
}

.choose-panel:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.choose-panel__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 212px;
    min-height: 61px;
    padding: 0.88rem 2.2rem;
    border: 1.5px solid #fff;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.choose-panel:hover .choose-panel__cta,
.choose-panel:focus-visible .choose-panel__cta {
    background: rgba(255, 255, 255, 0.14);
}

.choose-panel:active .choose-panel__cta {
    transform: scale(0.98);
}

/* —— Desktop: one shared brand image, two CTA halves —— */
@media (min-width: 992px) {
    .choose-stage {
        /* Keep left/right store halves matched to the brand image */
        direction: ltr;
        flex-direction: row;
        background-color: var(--choose-fallback-bg);
        background-image: var(--choose-brand-image, none);
        background-size: cover;
        background-position: center;
        padding: 0 50px 50px;
    }

    .choose-panel {
        flex: 1 1 50%;
        min-height: 100%;
        padding: 0;
        /* Store images only on mobile */
        background-image: none !important;
    }

    .choose-panel:first-child {
        justify-content: flex-start;
    }

    .choose-panel:last-child {
        justify-content: flex-end;
    }

    .choose-panel:only-child {
        justify-content: center;
    }

    .choose-panel__cta {
        min-width: 240px;
        min-height: 66px;
        font-size: 17.6px;
    }
}

/* —— Mobile: stacked panels, each store’s own image —— */
@media (max-width: 991px) {
    .choose-page {
        /* Fit both panels in the visible viewport (no page scroll) */
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        max-height: 100svh;
        max-height: 100dvh;
    }

    .choose-stage {
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        background-image: none;
    }

    .choose-panel {
        flex: 1 1 0;
        min-height: 0;
        height: 50%;
        max-height: 50%;
        padding-bottom: clamp(20px, 6svh, 40px);
        background-color: var(--choose-fallback-bg);
        background-image: var(--choose-store-image, none);
        background-size: cover;
        background-position: center;
    }

    .choose-topbar {
        padding: 14px 16px;
    }
}

[dir='rtl'] .choose-topbar__lang,
[dir='rtl'] .choose-panel__cta {
    font-family: 'Cairo', sans-serif;
}