:root{--bg:#f5f7fa;--text:#1f2937;--card:rgba(255,255,255,.78);--border:rgba(0,0,0,.08);--hover:rgba(0,0,0,.05);--muted:#6b7280;--popup-shadow:0 8px 30px rgba(0,0,0,.25);--btn-bg:var(--card);--btn-text:var(--text)}
.dark{--bg:#0f172a;--text:#e5e7eb;--card:rgba(30,41,59,.75);--border:rgba(255,255,255,.08);--hover:rgba(255,255,255,.08);--muted:#94a3b8;--popup-shadow:0 8px 30px rgba(0,0,0,.6);--btn-bg:rgba(30,41,59,.7);--btn-text:#e5e7eb}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);transition:.35s ease}.topbar{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10010;backdrop-filter:blur(12px);background:var(--card);border-bottom:2px solid var(--border)}.title{display:flex;align-items:center;gap:8px;font-weight:600}.topbar-actions{display:flex;align-items:center;gap:10px}.menu-wrap{position:relative}#dayNightIcon{width:16px;height:16px}.toggle-btn,.menu-btn,.popup-close,#cookieAccept{cursor:pointer;border:1px solid var(--border);background:var(--btn-bg);color:var(--btn-text);border-radius:8px}.toggle-btn{font-size:14px;padding:6px 10px}.menu-btn{width:40px;height:40px;font-size:21px}.site-menu{position:absolute;top:48px;right:0;min-width:210px;padding:7px;border:1px solid var(--border);border-radius:12px;background:var(--bg);box-shadow:var(--popup-shadow);z-index:10020}.site-menu:not(.show){display:none!important}.site-menu a{display:block;padding:11px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:14px}.site-menu a:hover{background:var(--hover)}
.wrapper{max-width:420px;margin:50px auto;padding:0 16px}#date{text-align:center;color:var(--muted)}#clock{text-align:center;font-size:clamp(2.5rem,10vw,3.4rem);margin-bottom:25px}#search{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--card);font-size:16px;color:inherit}#results{display:none;margin-top:8px;border-radius:10px;border:1px solid var(--border);background:var(--card);max-height:260px;overflow:auto}#results.show{display:block}.result-item{padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px}.result-item:hover{background:var(--hover)}#cityClock{display:none;margin-top:25px;padding:16px;border-radius:12px;background:var(--card);border:1px solid var(--border);text-align:center}#cityClock.show{display:block}.city-header,.country-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.country-list{margin-top:12px}.country-row{margin:8px 0}.muted{font-size:13px;color:var(--muted)}
#estimatedLocation{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;width:100%;min-width:0;margin:0 0 10px;column-gap:10px;color:var(--muted);font-size:13px;white-space:nowrap}#estimatedLocation[hidden]{display:none!important}.estimated-location-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.estimated-location-label strong{color:var(--text)}.action-icons{display:inline-flex;align-items:center;gap:10px;flex-wrap:nowrap;width:max-content;min-width:max-content}.weather-icon,.map-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:8px;box-shadow:0 0 0 4px rgba(59,130,246,.35);flex:0 0 auto}.weather-icon{font-size:16px}.map-icon svg{width:18px;height:18px}
.time-format{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:-14px 0 24px}.time-format button{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:34px;padding:0;border:1px solid var(--border);border-radius:9px;background:var(--btn-bg);color:var(--btn-text);font:700 13px/1 system-ui;cursor:pointer}.time-format button.active,.time-format button[aria-pressed="true"]{color:#fff;background:#2563eb;border-color:#2563eb;box-shadow:0 4px 12px rgba(37,99,235,.24)}
.landing-info{margin:54px auto 20px;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--card);text-align:left;line-height:1.65}.landing-info h1{display:block;width:100%;margin:0 0 16px;padding:0;text-align:center;white-space:nowrap;overflow-wrap:normal;word-break:normal;hyphens:none;font-size:clamp(1rem,4.2vw,1.45rem);line-height:1.2;letter-spacing:-.03em}.landing-info p{margin:0 0 14px}.landing-info p:last-child{margin-bottom:0}
#mapPopup,#weatherPopup{display:block;opacity:0;pointer-events:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);background:var(--card);border:1px solid var(--border);padding:10px;border-radius:12px;z-index:9999;width:90%;box-shadow:var(--popup-shadow);transition:.25s}#mapPopup{max-width:500px}#weatherPopup{max-width:420px}#mapPopup.show,#weatherPopup.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.popup-toolbar{display:flex;justify-content:flex-end;margin-bottom:8px}.popup-close{width:34px;height:34px}#mapFrame{width:100%;height:350px;border:0;border-radius:8px}#mapFrame.dark-map{filter:invert(.92) hue-rotate(180deg) brightness(.85)}#weatherContent{padding:8px 12px 18px}#weatherLoading,#weatherError{padding:32px 10px;text-align:center;color:var(--muted)}.weather-heading{display:flex;justify-content:space-between;gap:16px}.weather-heading h2{margin:0}.weather-condition-icon{font-size:46px}.weather-temperature{margin:24px 0;font-size:clamp(3rem,15vw,4.5rem);font-weight:700;text-align:center}.weather-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.weather-detail{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--hover)}.weather-detail-label,.weather-source{color:var(--muted);font-size:12px}.weather-source{text-align:center;margin-top:14px}
#backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.25s;z-index:9990}#backdrop.show{opacity:1;pointer-events:auto;backdrop-filter:blur(6px)}#cookieBanner{position:fixed;bottom:20px;right:20px;max-width:300px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;opacity:0;transform:translateY(12px);transition:.4s;pointer-events:none;z-index:10000}#cookieBanner.show{opacity:1;transform:none;pointer-events:auto}#cookieBanner p{font-size:13px;color:var(--muted)}#cookieAccept{padding:8px 12px}
@media(max-width:600px){.wrapper{max-width:100%;margin-top:30px;padding:0 12px}#estimatedLocation{column-gap:8px;font-size:clamp(10px,3.1vw,13px)}.action-icons{gap:8px}.landing-info{margin-top:42px;padding:18px 14px}.landing-info h1{font-size:clamp(12px,4vw,18px)}.site-menu{position:fixed;top:62px;right:12px;left:12px;min-width:0}}
@media(max-width:340px){.landing-info h1{font-size:11.5px;letter-spacing:-.045em}}


/* Navigation overlay */
.topbar {
    position:sticky;
    top:0;
    z-index:1000;
    overflow:visible;
}
.topbar-actions,
.menu-wrap {
    position:relative;
    overflow:visible;
}
.site-menu {
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:auto;
    z-index:1100;
    min-width:220px;
    max-height:calc(100dvh - 80px);
    overflow-y:auto;
    padding:7px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg);
    box-shadow:0 18px 45px rgba(0,0,0,.34);
}
.site-menu.show { display:block; }
.site-menu a { display:block; }
@media (max-width:600px) {
    .site-menu {
        position:fixed;
        top:62px;
        right:12px;
        left:12px;
        min-width:0;
    }
}

/* In-page information overlay */
body.modal-open { overflow:hidden; }
.info-modal-backdrop {
    position:fixed;
    inset:0;
    z-index:12000;
    background:rgba(15,23,42,.52);
    backdrop-filter:blur(8px);
}
.info-modal,
.info-modal-backdrop { opacity:0; transition:opacity .2s ease; }
.info-modal[hidden],
.info-modal-backdrop[hidden] { display:none !important; }
.info-modal {
    position:fixed;
    inset:0;
    z-index:12010;
    display:grid;
    place-items:center;
    padding:24px;
    pointer-events:none;
}
.info-modal.show,
.info-modal-backdrop.show { opacity:1; }
.info-modal.show { pointer-events:auto; }
.info-modal-shell {
    display:flex;
    flex-direction:column;
    width:min(820px,100%);
    max-height:calc(100dvh - 48px);
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:22px;
    color:var(--text);
    background:var(--bg);
    box-shadow:0 28px 80px rgba(0,0,0,.4);
    transform:translateY(14px) scale(.98);
    transition:transform .2s ease;
}
.info-modal.show .info-modal-shell { transform:none; }
.info-modal-toolbar {
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 40px;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    background:var(--card);
}
.info-modal-brand {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,#3b82f6,#6366f1);
    font-size:21px;
}
.info-modal-toolbar h2 {
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:clamp(1rem,3vw,1.25rem);
}
.info-modal-close {
    width:40px;
    height:40px;
    padding:0;
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--btn-text);
    background:var(--btn-bg);
    cursor:pointer;
}
.info-modal-body {
    overflow:auto;
    padding:26px clamp(20px,5vw,48px) 42px;
    line-height:1.7;
}
.info-modal-body .page-content { max-width:none; margin:0; padding:0; }
.info-modal-body h1 { margin:0 0 18px; font-size:clamp(1.65rem,6vw,2.4rem); line-height:1.15; }
.info-modal-body h2 { margin:28px 0 8px; font-size:1.25rem; }
.info-modal-body p { margin:0 0 16px; }
.info-modal-loading,.info-modal-error { min-height:220px; display:grid; place-items:center; text-align:center; color:var(--muted); }
@media(max-width:600px){
    .info-modal { padding:0; place-items:end center; }
    .info-modal-shell { width:100%; max-height:92dvh; border-radius:22px 22px 0 0; border-bottom:0; }
    .info-modal-body { padding:22px 18px 34px; }
}

/* Forms loaded inside the information overlay */
.info-modal-body main.page-content {
    display:block;
    width:100%;
    max-width:680px;
    margin:0 auto;
    padding:0;
}
.info-modal-body .contact-form {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:9px;
    width:100%;
    margin-top:24px;
}
.info-modal-body .contact-form label {
    display:block;
    margin-top:5px;
    font-size:14px;
    font-weight:650;
}
.info-modal-body .contact-form input,
.info-modal-body .contact-form textarea,
.info-modal-body .contact-form select {
    display:block;
    width:100%;
    min-width:0;
    margin:0;
    padding:12px 13px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card);
    color:var(--text);
    font:inherit;
    line-height:1.4;
}
.info-modal-body .contact-form textarea {
    min-height:120px;
    resize:vertical;
}
.info-modal-body .contact-form input:focus,
.info-modal-body .contact-form textarea:focus,
.info-modal-body .contact-form select:focus {
    outline:2px solid rgba(59,130,246,.55);
    outline-offset:2px;
}
.info-modal-body .contact-submit {
    justify-self:start;
    margin-top:10px;
    padding:11px 16px;
    border:1px solid #2563eb;
    border-radius:10px;
    background:#2563eb;
    color:#fff;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}
.info-modal-body .contact-submit:hover { background:#1d4ed8; }
.info-modal-body .contact-submit:disabled { opacity:.65; cursor:wait; }
.info-modal-body .contact-status {
    min-height:24px;
    margin-top:4px;
    font-size:14px;
}
.info-modal-body .contact-status.success { color:#15803d; }
.info-modal-body .contact-status.error { color:#dc2626; }
.dark .info-modal-body .contact-status.success { color:#86efac; }
.dark .info-modal-body .contact-status.error { color:#fca5a5; }
.info-modal-body .contact-honeypot {
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}
.info-modal-body .feature-request-form label .muted { font-weight:400; }