:root {
    --bg: #f6f8fb;
    --fg: #1f2a44;
    --muted: #6b7b94;
    --land: #e6eef6;
    --sea: #dfe9f5;
    --border: #b8c7d9;
    --meridian: #b5c3d6;
    --zone-stroke: #7da5d6;
    --dot: #d98c00;
    --dot-sel: #ffad00;
    --tooltip-bg: #ffffff;
    --tooltip-fg: #1f2a44;
    --shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: "Segoe UI", system-ui, sans-serif;
    padding: 2rem 0;
}

/* responsive 900×480 box (53.33% aspect) */
#tz-picker {
    width: 100%;
    max-width: 1000px;
    height: 640px;              /* real height so the canvas is not 0x0 */
    margin: 0 auto;
    position: relative;
    background: var(--sea);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

#tz-panel {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#tz-panel.d-none { display: none; }
.tz-panel-body {
    width: min(1024px, 96vw);
    max-height: 92vh;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Let the map fill its parent */
#timezones-map {
    position: relative;
    width: 100%;
    height: 640px;
    border-radius: 10px;
    overflow: hidden;
}

/* Ensure Mapbox internals fill the container */
#timezones-map .mapboxgl-map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
#timezones-map .mapboxgl-canvas-container,
#timezones-map .mapboxgl-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#timezones-map .mapboxgl-ctrl-logo {
    display: none !important;
}


/* tooltip */
.tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--tooltip-bg);
    color: var(--tooltip-fg);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: var(--shadow);
    font-size: 12px;
    line-height: 1.2;
    min-width: 160px;
    transform: translate(10px, -10px);
    opacity: 0;
    transition: opacity .12s ease;
    white-space: nowrap;
}
.tooltip .title {
    font-weight: 600;
    margin-bottom: 2px;
}
.tooltip .sub {
    color: var(--muted);
}


.mapboxgl-ctrl-geocoder,.mapboxgl-ctrl-geocoder *,.mapboxgl-ctrl-geocoder :after,.mapboxgl-ctrl-geocoder :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.mapboxgl-ctrl-geocoder {
    font: 15px/20px 'Helvetica Neue',Arial,Helvetica,sans-serif;
    position: relative;
    background-color: #fff;
    width: 33.3333%;
    min-width: 240px;
    max-width: 360px;
    z-index: 1;
    border-radius: 3px
}

.mapboxgl-ctrl-geocoder input[type=text] {
    font-size: 12px;
    width: 100%;
    border: 0;
    background-color: transparent;
    height: 40px;
    margin: 0;
    color: rgba(0,0,0,.5);
    padding: 10px 10px 10px 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.mapboxgl-ctrl-geocoder input:focus {
    color: rgba(0,0,0,.75);
    outline: 0;
    box-shadow: none;
    outline: dotted thin\9
}

.mapboxgl-ctrl-geocoder .geocoder-icon-search {
    position: absolute;
    top: 10px;
    left: 10px
}

.mapboxgl-ctrl-geocoder button {
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: none;
    cursor: pointer
}

.mapboxgl-ctrl-geocoder .geocoder-pin-right * {
    background-color: #fff;
    z-index: 2;
    position: absolute;
    right: 10px;
    top: 10px;
    display: none
}

.mapboxgl-ctrl-geocoder,.mapboxgl-ctrl-geocoder ul {
    box-shadow: 0 0 0 2px rgba(0,0,0,.1)
}

.mapboxgl-ctrl-geocoder ul {
    background-color: #fff;
    border-radius: 0 0 3px 3px;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    top: 100%;
    z-index: 1000;
    overflow: hidden;
    font-size: 12px
}

.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-geocoder ul,.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-geocoder ul {
    top: auto;
    bottom: 100%
}

.mapboxgl-ctrl-geocoder ul>li>a {
    clear: both;
    cursor: default;
    display: block;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    color: #404040
}

.mapboxgl-ctrl-geocoder ul>li:last-child>a {
    border-bottom: none
}

.mapboxgl-ctrl-geocoder ul>li>a:hover {
    color: #202020;
    background-color: #f3f3f3;
    text-decoration: none;
    cursor: pointer
}

.mapboxgl-ctrl-geocoder ul>li.active>a {
    color: #202020;
    background-color: #e3e3e3;
    text-decoration: none;
    cursor: pointer
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0)
    }

    to {
        -moz-transform: rotate(360deg)
    }
}

@-ms-keyframes rotate {
    from {
        -ms-transform: rotate(0)
    }

    to {
        -ms-transform: rotate(360deg)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.geocoder-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    speak: none;
    background-repeat: no-repeat
}

.geocoder-icon-search {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIj4NCiAgPHBhdGggZD0iTTguNSA0QzYgNCA0IDYgNCA4LjUgNCAxMSA2IDEzIDguNSAxMyA5LjQgMTMgMTAuMiAxMi44IDEwLjggMTIuM0wxMC45IDEyLjMgMTQuMyAxNS43QzE0LjUgMTUuOSAxNC43IDE2IDE1IDE2IDE1LjYgMTYgMTYgMTUuNiAxNiAxNSAxNiAxNC43IDE1LjkgMTQuNSAxNS43IDE0LjNMMTIuMyAxMC45IDEyLjMgMTAuOEMxMi44IDEwLjIgMTMgOS40IDEzIDguNSAxMyA2IDExIDQgOC41IDR6TTguNSA1LjVDMTAuMiA1LjUgMTEuNSA2LjggMTEuNSA4LjUgMTEuNSAxMC4yIDEwLjIgMTEuNSA4LjUgMTEuNSA2LjggMTEuNSA1LjUgMTAuMiA1LjUgOC41IDUuNSA2LjggNi44IDUuNSA4LjUgNS41eiIgZmlsbD0iIzAwMCIvPg0KPC9zdmc+)
}

.geocoder-icon-close {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiPg0KICA8cGF0aCBkPSJtNSA1IDAgMS41IDMuNSAzLjUtMy41IDMuNSAwIDEuNSAxLjUgMCAzLjUtMy41IDMuNSAzLjUgMS41IDAgMC0xLjUtMy41LTMuNSAzLjUtMy41IDAtMS41LTEuNSAwLTMuNSAzLjUtMy41LTMuNS0xLjUgMHoiIGZpbGw9IiMwMDAiLz4NCjwvc3ZnPg==)
}

.geocoder-icon-loading {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Im0xMCAyIDAgMy4zYzIuNiAwIDQuNyAyLjEgNC43IDQuN2wzLjMgMGMwLTQuNC0zLjYtOC04LTh6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTEwIDJDNi44IDIgMy43IDQuMSAyLjYgNy4xIDEuNCAxMCAyLjEgMTMuNiA0LjUgMTUuOGMyLjQgMi40IDYuNCAyLjkgOS40IDEuMiAyLjUtMS40IDQuMi00LjIgNC4yLTctMS4xIDAtMi4yIDAtMy4zIDAgMC4xIDIuMi0xLjcgNC4zLTMuOCA0LjZDOC43IDE1IDYuNCAxMy44IDUuNyAxMS43IDQuOCA5LjcgNS42IDcuMSA3LjYgNiA4LjMgNS42IDkuMSA1LjMgMTAgNS4zYzAtMS4xIDAtMi4yIDAtMy4zeiIgc3R5bGU9ImZpbGw6IzAwMDtvcGFjaXR5OjAuMiIvPjwvc3ZnPg==);
    -webkit-animation: rotate .4s linear infinite;
    -moz-animation: rotate .4s linear infinite;
    -ms-animation: rotate .4s linear infinite;
    animation: rotate .4s linear infinite
}

.mapboxgl-style-list {
    display: none
}

.mapboxgl-style-list button {
    background: 0 0;
    border: none;
    cursor: pointer;
    display: block;
    font-size: 14px;
    padding: 8px 8px 6px;
    text-align: right;
    width: 100%
}

.mapboxgl-style-list button.active {
    font-weight: 700
}

.mapboxgl-style-list button:hover {
    background-color: rgba(0,0,0,.05)
}

.mapboxgl-style-list button+button {
    border-top: 1px solid #ddd
}

.mapboxgl-style-switcher {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTQuODQ5cHgiIGhlaWdodD0iNTQuODQ5cHgiIHZpZXdCb3g9IjAgMCA1NC44NDkgNTQuODQ5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NC44NDkgNTQuODQ5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+PGc+PHBhdGggZD0iTTU0LjQ5NywzOS42MTRsLTEwLjM2My00LjQ5bC0xNC45MTcsNS45NjhjLTAuNTM3LDAuMjE0LTEuMTY1LDAuMzE5LTEuNzkzLDAuMzE5Yy0wLjYyNywwLTEuMjU0LTAuMTA0LTEuNzktMC4zMThsLTE0LjkyMS01Ljk2OEwwLjM1MSwzOS42MTRjLTAuNDcyLDAuMjAzLTAuNDY3LDAuNTI0LDAuMDEsMC43MTZMMjYuNTYsNTAuODFjMC40NzcsMC4xOTEsMS4yNTEsMC4xOTEsMS43MjksMEw1NC40ODgsNDAuMzNDNTQuOTY0LDQwLjEzOSw1NC45NjksMzkuODE3LDU0LjQ5NywzOS42MTR6Ii8+PHBhdGggZD0iTTU0LjQ5NywyNy41MTJsLTEwLjM2NC00LjQ5MWwtMTQuOTE2LDUuOTY2Yy0wLjUzNiwwLjIxNS0xLjE2NSwwLjMyMS0xLjc5MiwwLjMyMWMtMC42MjgsMC0xLjI1Ni0wLjEwNi0xLjc5My0wLjMyMWwtMTQuOTE4LTUuOTY2TDAuMzUxLDI3LjUxMmMtMC40NzIsMC4yMDMtMC40NjcsMC41MjMsMC4wMSwwLjcxNkwyNi41NiwzOC43MDZjMC40NzcsMC4xOSwxLjI1MSwwLjE5LDEuNzI5LDBsMjYuMTk5LTEwLjQ3OUM1NC45NjQsMjguMDM2LDU0Ljk2OSwyNy43MTYsNTQuNDk3LDI3LjUxMnoiLz48cGF0aCBkPSJNMC4zNjEsMTYuMTI1bDEzLjY2Miw1LjQ2NWwxMi41MzcsNS4wMTVjMC40NzcsMC4xOTEsMS4yNTEsMC4xOTEsMS43MjksMGwxMi41NDEtNS4wMTZsMTMuNjU4LTUuNDYzYzAuNDc3LTAuMTkxLDAuNDgtMC41MTEsMC4wMS0wLjcxNkwyOC4yNzcsNC4wNDhjLTAuNDcxLTAuMjA0LTEuMjM2LTAuMjA0LTEuNzA4LDBMMC4zNTEsMTUuNDFDLTAuMTIxLDE1LjYxNC0wLjExNiwxNS45MzUsMC4zNjEsMTYuMTI1eiIvPjwvZz48L2c+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvc3ZnPg==);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%
}