/**
 * location-pickers.css
 *
 * Country and city/timezone picker dialogs, search fields, option states, and mobile visual-viewport sizing. Native select styling remains in forms.css.
 *
 * Sections:
 * 1. Dialog/header shell
 * 2. Search and scrollable result list
 * 3. Option states and close button
 * 4. Mobile keyboard-aware bottom sheet
 *
 * Troubleshooting:
 * - `--country-picker-top/height` are updated by location-pickers.js.
 * - Country and city dialogs intentionally share these same classes.
 */

/* 1. Picker-specific layer and header placed over layout.css's modal shell. */
.country-picker{
    z-index:100;
}

.country-picker-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding-right:42px;
}

.country-picker-header > div{
    display:grid;
    gap:3px;
}

.country-picker-header span{
    color:var(--accent);
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.country-picker-header strong{
    font-size:20px;
}

.country-picker-panel{
    width:min(460px, 100%);
    max-height:min(620px, calc(100vh - 36px));
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;
}

/* 2. Search stays above a separately scrollable result list. */
.country-search{
    display:block;
}

.country-search input{
    min-height:44px;
    padding:0 14px;
    font-size:15px;
}

.country-results{
    min-height:0;
    display:grid;
    gap:5px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:2px 4px 2px 0;
    scrollbar-color:rgba(53,194,165,.45) transparent;
}

/* 3. Result buttons expose active keyboard and selected-value states separately. */
.country-option{
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 auto;
    padding:0 13px;
    border:1px solid transparent;
    background:rgba(18,24,34,.72);
    color:var(--text);
    text-align:left;
}

.country-option:hover,
.country-option.is-active{
    border-color:rgba(53,194,165,.34);
    background:rgba(53,194,165,.12);
    color:var(--text);
    transform:none;
}

.country-option.is-selected{
    border-color:rgba(53,194,165,.5);
    color:var(--accent);
}

.country-option.is-selected::after{
    content:"✓";
    margin-left:12px;
    font-size:13px;
}

.country-empty{
    margin:0;
    padding:18px 8px;
    color:var(--muted);
    text-align:center;
}

/* Shared circular close control for all first-party picker dialogs. */
.popover-close{
    position:absolute;
    right:10px;
    top:10px;
    width:34px;
    min-height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(43,51,66,.88);
    color:var(--muted);
    padding:0;
    font-size:20px;
    line-height:1;
}

.popover-close:hover{
    background:rgba(53,194,165,.16);
    color:var(--text);
}

/* 4. Mobile: bottom sheet tracks visualViewport while the keyboard is visible. */
@media (max-width:620px){
    /* Mobile: picker becomes a keyboard-aware bottom sheet. */
    .country-picker-header strong{
        font-size:18px;
    }

    .country-picker{
            inset:var(--country-picker-top, 0px) 0 auto;
            height:var(--country-picker-height, 100dvh);
            align-items:end;
            padding:12px 10px 0;
        }

    .country-picker-panel{
            width:100%;
            max-height:calc(var(--country-picker-height, 100dvh) - 12px);
            min-height:min(68dvh, 560px);
            border-radius:16px 16px 0 0;
            padding:14px 14px max(14px, env(safe-area-inset-bottom));
        }

    .country-search{
            position:sticky;
            top:0;
            z-index:2;
        }

    .country-search input{
            min-height:48px;
            font-size:16px;
        }

    .country-results{
            flex:1 1 auto;
            align-content:start;
            padding-bottom:8px;
        }

    .country-option{
            min-height:46px;
            font-size:15px;
        }
}