/* =========================================================
   YAQEEN — LOCATION PICKER
   Stable mobile / desktop layout
   ========================================================= */

.location-picker {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    display: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: rgba(7, 27, 34, .52);
    box-sizing: border-box;
}

.location-picker.is-open {
    display: block;
}

/* Background */
.location-picker-backdrop {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    background: rgba(7, 27, 34, .52);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* =========================================================
   Main sheet
   ========================================================= */

.location-picker-sheet {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 430px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: hidden !important;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border-radius: 0;

    box-sizing: border-box;

    transform: none !important;
    animation: none !important;

    box-shadow: none;
}

/* =========================================================
   Desktop = phone frame
   ========================================================= */

@media (min-width: 600px) {

    .location-picker {
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .location-picker.is-open {
        display: flex;
    }

    .location-picker-sheet {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: min(430px, 100%) !important;
        height: min(860px, calc(100dvh - 40px)) !important;
        max-height: calc(100dvh - 40px) !important;

        margin: 0 !important;

        border-radius: 28px;

        box-shadow:
            0 30px 80px rgba(0, 0, 0, .25),
            0 0 0 1px rgba(255,255,255,.35);

        overflow: hidden !important;
    }
}

/* =========================================================
   Scrollable content area
   ========================================================= */

.location-picker-sheet {
    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: thin;
    scrollbar-color: #d6e5e8 transparent;
}

.location-picker-sheet::-webkit-scrollbar {
    width: 4px;
}

.location-picker-sheet::-webkit-scrollbar-track {
    background: transparent;
}

.location-picker-sheet::-webkit-scrollbar-thumb {
    background: #d6e5e8;
    border-radius: 20px;
}

/* =========================================================
   Handle
   ========================================================= */

.location-picker-handle {
    flex: 0 0 auto;

    width: 42px;
    height: 4px;

    margin: 13px auto 19px;

    border-radius: 50px;

    background: #d9e6e9;
}

/* =========================================================
   Header
   ========================================================= */

.location-picker-header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    box-sizing: border-box;

    padding: 0 18px;

    margin-bottom: 22px;
}

.location-picker-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: #20aec8;

    font-size: 10px;
    font-weight: 800;
}

.location-picker-header h2 {
    margin: 0;

    color: #12333e;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 900;
}

.location-picker-close {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 13px;

    background: #20b8d4;
    color: #fff;

    font-family: inherit;
    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 7px 18px rgba(32,184,212,.20);
}

/* =========================================================
   GPS
   ========================================================= */

.location-current-button {
    flex: 0 0 auto;

    width: calc(100% - 36px);
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0 18px;
    padding: 11px 13px;

    box-sizing: border-box;

    border: 0;
    border-radius: 16px;

    background: #20b8d4;
    color: #fff;

    font-family: inherit;
    text-align: right;

    cursor: pointer;

    box-shadow: 0 10px 24px rgba(32,184,212,.18);
}

.location-current-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: rgba(255,255,255,.17);

    color: #fff;

    font-size: 21px;
}

.location-current-button > span:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.location-current-button strong,
.location-current-button small {
    display: block;
}

.location-current-button strong {
    font-size: 13px;
    font-weight: 900;
}

.location-current-button small {
    margin-top: 4px;

    color: rgba(255,255,255,.76);

    font-size: 9px;
    font-weight: 500;
}

.location-current-arrow {
    color: #fff;
    font-size: 18px;
}

/* =========================================================
   Divider
   ========================================================= */

.location-divider {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 10px;

    width: calc(100% - 36px);

    margin: 24px 18px 20px;

    color: #91a5ab;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
}

.location-divider::before,
.location-divider::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #e6edef;
}

/* =========================================================
   Fields
   ========================================================= */

.location-fields {
    flex: 0 0 auto;

    display: grid;

    gap: 16px;

    width: calc(100% - 36px);

    margin: 0 18px;

    box-sizing: border-box;
}

.location-field {
    position: relative;

    display: block;

    width: 100%;
}

.location-field > span {
    display: block;

    margin-bottom: 8px;

    color: #385762;

    font-size: 11px;
    font-weight: 900;
}

/* =========================================================
   Country trigger
   ========================================================= */

.location-select-trigger {
    position: relative;

    width: 100%;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #d9e7ea;
    border-radius: 15px;

    outline: none;

    background: #f9fcfd;

    color: #173943;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition: border-color .15s ease,
                background .15s ease;
}

.location-select-trigger:focus,
.location-select-trigger[aria-expanded="true"] {
    border-color: #20b8d4;
    background: #fff;
}

.country-selected-content {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}

.country-flag {
    width: 30px;
    height: 20px;

    flex: 0 0 30px;

    display: none;

    object-fit: cover;

    border-radius: 4px;

    box-shadow: 0 1px 4px rgba(0,0,0,.13);
}

.country-flag.is-visible {
    display: block;
}

.location-select-arrow {
    flex: 0 0 auto;

    color: #5b737b;

    font-size: 17px;
}

/* =========================================================
   Country dropdown
   IMPORTANT: absolute so it does NOT move the layout
   ========================================================= */

.country-menu {
    position: absolute !important;

    top: calc(100% + 7px);
    right: 0;
    left: 0;

    z-index: 100;

    width: 100%;

    max-height: 245px;

    overflow-y: auto;

    padding: 6px;

    box-sizing: border-box;

    border: 1px solid #e0ecef;
    border-radius: 15px;

    background: #fff;

    box-shadow:
        0 16px 35px rgba(15,51,61,.16),
        0 2px 6px rgba(15,51,61,.06);
}

.country-menu[hidden] {
    display: none !important;
}

.country-option {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 7px 9px;

    border: 0;
    border-radius: 10px;

    background: transparent;

    color: #183c47;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    text-align: right;

    cursor: pointer;
}

.country-option:hover,
.country-option.is-selected {
    background: #effafd;
}

.country-option img {
    width: 32px;
    height: 21px;

    flex: 0 0 32px;

    object-fit: cover;

    border-radius: 4px;

    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.country-option-check {
    margin-right: auto;

    color: #20b8d4;

    font-size: 16px;
}

/* =========================================================
   City select
   ========================================================= */

.location-field select {
    width: 100%;
    height: 56px;

    display: block;

    padding: 0 14px;

    box-sizing: border-box;

    border: 1px solid #d9e7ea;
    border-radius: 15px;

    outline: none;

    background: #f9fcfd;

    color: #173943;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.location-field select:focus {
    border-color: #20b8d4;

    background: #fff;

    box-shadow: 0 0 0 4px rgba(32,184,212,.09);
}

.location-field select:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* =========================================================
   Apply button
   ========================================================= */

.location-apply-button {
    flex: 0 0 auto;

    width: calc(100% - 36px);
    height: 55px;

    margin: 24px 18px 28px;

    border: 0;
    border-radius: 15px;

    background: #20b8d4;
    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 900;

    cursor: pointer;

    box-shadow: 0 10px 22px rgba(32,184,212,.16);

    transition: opacity .15s ease,
                transform .15s ease;
}

.location-apply-button:not(:disabled):active {
    transform: scale(.985);
}

.location-apply-button:disabled {
    opacity: .40;
    cursor: not-allowed;
    box-shadow: none;
}

/* =========================================================
   Body lock
   ========================================================= */

body.location-picker-open {
    overflow: hidden !important;
    touch-action: none;
}

/* =========================================================
   Very small phones
   ========================================================= */

@media (max-width: 360px) {

    .location-picker-header {
        padding-left: 15px;
        padding-right: 15px;
    }

    .location-current-button,
    .location-divider,
    .location-fields,
    .location-apply-button {
        width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
    }

    .location-picker-header h2 {
        font-size: 20px;
    }
}

/* =========================================================
   YAQEEN — LOCATION PAGE
   Full page — NOT a popup
   ========================================================= */

.location-page {
    width: 100%;
    min-height: calc(100dvh - 150px);

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fcfd 100%
        );

    padding: 18px 18px 110px;
}

/* Header */

.location-page-header {
    width: 100%;

    display: grid;
    grid-template-columns: 42px 1fr 42px;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;
}

.location-page-header > div:nth-child(2) {
    text-align: right;
}

.location-page-header > div:nth-child(2) > span {
    display: block;

    margin-bottom: 4px;

    color: #20b8d4;

    font-size: 10px;
    font-weight: 900;
}

.location-page-header h1 {
    margin: 0;

    color: #12333e;

    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
}

.location-page-back {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #20b8d4;
    color: #fff;

    text-decoration: none;

    font-size: 22px;
    font-weight: 700;
}

.location-page-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #e9f9fc;

    color: #20b8d4;

    font-size: 21px;
}

/* Content */

.location-page-content {
    width: 100%;
    max-width: 520px;

    margin: 0 auto;
}

/* Current location */

.location-page .location-current-button {
    width: 100%;
    margin: 0;

    min-height: 76px;
}

/* Divider */

.location-page .location-divider {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Fields */

.location-page .location-fields {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Apply */

.location-page .location-apply-button {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/* Country wrapper */

.country-select-wrapper {
    position: relative;
    width: 100%;
}

/* Mobile */

@media (max-width: 599px) {

    .location-page {
        min-height: calc(100dvh - 120px);
        padding:
            16px
            16px
            calc(95px + env(safe-area-inset-bottom));
    }

    .location-page-header {
        margin-bottom: 24px;
    }
}

/* Desktop */

@media (min-width: 600px) {

    .location-page {
        max-width: 760px;
        margin: 0 auto;

        padding:
            30px
            30px
            120px;

        border-radius: 24px;
    }
}

/* Hide old popup shell if it still exists in header */

body:not(.location-page-body) .location-picker {
    display: none !important;
}

/* =========================================================
   YAQEEN — LOCATION PAGE
   Full page — NOT a popup
   ========================================================= */

.location-page {
    width: 100%;
    min-height: calc(100dvh - 150px);

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fcfd 100%
        );

    padding: 18px 18px 110px;
}

/* Header */

.location-page-header {
    width: 100%;

    display: grid;
    grid-template-columns: 42px 1fr 42px;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;
}

.location-page-header > div:nth-child(2) {
    text-align: right;
}

.location-page-header > div:nth-child(2) > span {
    display: block;

    margin-bottom: 4px;

    color: #20b8d4;

    font-size: 10px;
    font-weight: 900;
}

.location-page-header h1 {
    margin: 0;

    color: #12333e;

    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
}

.location-page-back {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #20b8d4;
    color: #fff;

    text-decoration: none;

    font-size: 22px;
    font-weight: 700;
}

.location-page-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #e9f9fc;

    color: #20b8d4;

    font-size: 21px;
}

/* Content */

.location-page-content {
    width: 100%;
    max-width: 520px;

    margin: 0 auto;
}

/* Current location */

.location-page .location-current-button {
    width: 100%;
    margin: 0;

    min-height: 76px;
}

/* Divider */

.location-page .location-divider {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Fields */

.location-page .location-fields {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Apply */

.location-page .location-apply-button {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/* Country wrapper */

.country-select-wrapper {
    position: relative;
    width: 100%;
}

/* Mobile */

@media (max-width: 599px) {

    .location-page {
        min-height: calc(100dvh - 120px);
        padding:
            16px
            16px
            calc(95px + env(safe-area-inset-bottom));
    }

    .location-page-header {
        margin-bottom: 24px;
    }
}

/* Desktop */

@media (min-width: 600px) {

    .location-page {
        max-width: 760px;
        margin: 0 auto;

        padding:
            30px
            30px
            120px;

        border-radius: 24px;
    }
}

/* Hide old popup shell if it still exists in header */

body:not(.location-page-body) .location-picker {
    display: none !important;
}

/* =========================================================
   YAQEEN — Location Page Final Select Style
   ========================================================= */

.location-select-trigger {
    background: #ffffff !important;
    color: #263238 !important;
    border: 1px solid #e5edf0 !important;
    box-shadow: none !important;
}

.location-select-trigger:hover,
.location-select-trigger:focus {
    background: #ffffff !important;
    color: #263238 !important;
    border-color: #d5e3e7 !important;
    outline: none !important;
}

.country-selected-content {
    color: #263238 !important;
}

#countrySelectedName {
    color: #263238 !important;
}

.location-select-arrow {
    color: #78909c !important;
}

.country-menu {
    background: #ffffff !important;
    border: 1px solid #e5edf0 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

.country-option {
    background: #ffffff !important;
    color: #263238 !important;
}

.country-option:hover,
.country-option.is-selected {
    background: #f7fafb !important;
    color: #263238 !important;
}

#locationCity {
    background: #ffffff !important;
    color: #263238 !important;
    border-color: #e5edf0 !important;
}

#locationCity:focus {
    background: #ffffff !important;
    border-color: #d5e3e7 !important;
    outline: none !important;
}


/* Final interaction fix */
.location-page .country-select-wrapper {
    position: relative !important;
    z-index: 10000 !important;
}

.location-page #countryTrigger {
    position: relative !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.location-page #countryMenu {
    position: absolute !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
}

.location-page #countryMenu[hidden] {
    display: none !important;
}

.location-page #countryMenu:not([hidden]) {
    display: block !important;
}

.location-page .country-option {
    position: relative !important;
    z-index: 10003 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}