/* === Weather Consensus – Enhanced Theme with Day/Night + Rain + Snow === */
/* ---------- Design tokens (Night default) ---------- */
:root {
    --bg: #0b1220;
    --bg-2: #0d1526;
    --panel: #10192b;
    --panel-2: #0f1726;
    --card: #121c31;
    --card-2: #16223a;
    --muted: #98a2b3;
    --text: #e6eefc;
    --brand: #5ea0ff;
    --accent: #8ef2d0;
    --accent-2: #b388ff;
    --warning: #ffd166;
    --error: #ff6b6b;
    --border: #1e2a42;
    --glass: rgba(255, 255, 255, 0.05);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, .28);
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
}

/* ---------- Day theme overrides (darker sky) ---------- */
body[data-theme="day"] {
    --bg: #9ec7ff;
    /* zenith */
    --bg-2: #cfe4ff;
    /* near horizon */
    --panel: #ffffff;
    --panel-2: #f6fbff;
    --card: #ffffff;
    --card-2: #f4f9ff;
    --text: #0e1c33;
    --muted: #3c4b63;
    --border: #c0d6f7;
    --brand: #2e75ff;
    --accent: #00bba0;
    --accent-2: #8a75ff;
}

/* ---------- Base ---------- */
* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    background:
        radial-gradient(1200px 600px at 70% -10%, #1b2a4a33 0%, transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
    letter-spacing: .2px;
}

/* subtle animated star dots (night only) */
body:not([data-theme="day"])::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #fff2 40%, transparent 41%),
        radial-gradient(1px 1px at 80% 30%, #fff3 40%, transparent 41%),
        radial-gradient(1px 1px at 50% 70%, #fff2 40%, transparent 41%),
        radial-gradient(1px 1px at 20% 80%, #fff1 40%, transparent 41%);
    animation: twinkle 8s linear infinite;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: .4
    }

    50% {
        opacity: .8
    }
}

.container {
    width: min(1100px, 92vw);
    margin: 0 auto;
    padding: 1rem;
    position: relative;
    z-index: 2
}

/* ---------- Top gradient bar ---------- */
.topbar {
    height: 6px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    background: linear-gradient(90deg,
            #4ea2ff 0%,
            #7b86ff 20%,
            #b07cff 40%,
            #ff7fd1 60%,
            #77e1c6 80%,
            #4ea2ff 100%);
    box-shadow: 0 2px 10px rgba(94, 160, 255, .6);
}

/* ---------- Header / Hero with clouds ---------- */
.site-header {
    padding-top: 24px
}

.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #12203b;
    background: radial-gradient(800px 240px at 50% 0%, #1d2b48aa 0%, transparent 70%);
}

/* Day: softer atmospheric glow */
body[data-theme="day"] .hero {
    background: radial-gradient(900px 260px at 70% -10%,
            rgba(255, 255, 255, 0.65) 0%,
            rgba(255, 255, 255, 0.15) 40%,
            transparent 75%);
}

.hero-inner {
    padding: 2.6rem 1rem 1.1rem
}

.controls {
    display: flex;
    gap: .9rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .6rem;
}

.site-header h1 {
    margin: .25rem 0 .35rem;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: .3px;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .35);
}

body[data-theme="day"] .site-header h1 {
    text-shadow: none
}

.tagline {
    color: var(--muted);
    margin: 0 .5rem .9rem;
    text-align: center
}

/* ---------- Minimal modern sun (day only) ---------- */
.sun {
    position: absolute;
    top: 20px;
    right: 40px;
    width: 90px;
    height: 90px;
    display: none;
    z-index: 0;
}

body[data-theme="day"] .sun {
    display: block;
}

.sun .disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
            #fff7c2 0%,
            #ffe169 45%,
            #ffc94d 75%,
            #ffb84b 100%);
    box-shadow:
        0 0 45px 12px rgba(255, 215, 91, 0.45),
        0 0 120px 40px rgba(255, 215, 91, 0.15);
}

.sun .ray {
    display: none !important;
}

/* if old markup exists */

/* ---------- Minimal modern moon (night only) ---------- */
.moon {
    position: absolute;
    top: 20px;
    /* matches sun placement for symmetry */
    right: 40px;
    width: 84px;
    height: 84px;
    display: none;
    z-index: 0;
    /* behind clouds/precip, same as sun */
}

body[data-theme="night"] .moon {
    display: block;
}

/* show only at night */
body[data-theme="day"] .moon {
    display: none;
}

/* hide in day */

.moon .disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Soft, cool moon gradient */
    background: radial-gradient(circle at 40% 40%,
            #f7f9ff 0%,
            #e9efff 45%,
            #d6defe 72%,
            #c3ccff 100%);
    /* Subtle bluish glow */
    box-shadow:
        0 0 40px 12px rgba(150, 170, 255, 0.28),
        0 0 120px 40px rgba(140, 160, 255, 0.14);
}

/* (Optional) very subtle craters — keep modern & minimal */
.moon .disc {
    background:
        radial-gradient(10px 10px at 28% 36%, rgba(0, 0, 0, .12) 0 55%, transparent 56%),
        radial-gradient(7px 7px at 62% 30%, rgba(0, 0, 0, .10) 0 55%, transparent 56%),
        radial-gradient(6px 6px at 50% 64%, rgba(0, 0, 0, .10) 0 55%, transparent 56%),
        radial-gradient(circle at 40% 40%, #f7f9ff 0%, #e9efff 45%, #d6defe 72%, #c3ccff 100%);
}



/* Clouds */
.clouds {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    z-index: 1;
    opacity: .9;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18));
}

.layer-back {
    animation: driftBack 36s linear infinite;
    opacity: .45
}

.layer-front {
    animation: driftFront 28s linear infinite;
    opacity: .65
}

.clouds svg {
    width: 150%;
    height: 100%
}

@keyframes driftBack {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-20%)
    }
}

@keyframes driftFront {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-35%)
    }
}

/* Lightning flash (kept subtle; barely visible by day) */
.lightning {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(400px 220px at 70% 0%, #fff0 0%, #fff0 55%, #fff3 55.5%, #fff0 56%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: flash 9s ease-in-out infinite;
}

@keyframes flash {

    0%,
    86%,
    100% {
        opacity: 0
    }

    89% {
        opacity: .22
    }

    90% {
        opacity: .55
    }

    92% {
        opacity: .12
    }
}

/* ---------- Rain overlay ---------- */
.rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity .3s ease
}

body.rainy .rain {
    opacity: .65
}

.rain span {
    position: absolute;
    top: -10vh;
    width: 2px;
    height: 8vh;
    background: linear-gradient(to bottom, #aee1ff 0%, #4f9bf2 80%, transparent 100%);
    opacity: .8;
    border-radius: 1px;
    filter: blur(.3px);
    animation: drop 1.2s linear infinite;
}

@keyframes drop {
    0% {
        transform: translateY(-12vh)
    }

    100% {
        transform: translateY(110vh)
    }
}

/* ---------- Snow overlay ---------- */
.snow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity .3s ease
}

body.snowy .snow {
    opacity: .9
}

.snow span {
    position: absolute;
    top: -10vh;
    width: var(--size, 6px);
    height: var(--size, 6px);
    background: #ffffff;
    border-radius: 50%;
    opacity: var(--alpha, .9);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .28));
    animation: snowFall var(--dur, 8s) linear infinite;
    animation-play-state: paused;
}

body.snowy .snow span {
    animation-play-state: running;
}

@keyframes snowFall {
    0% {
        transform: translateY(-12vh) translateX(0)
    }

    100% {
        transform: translateY(110vh) translateX(var(--drift, 40px))
    }
}

/* ---------- Search ---------- */
.search {
    display: flex;
    gap: .6rem;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    z-index: 4;
}

.search input {
    width: min(520px, 86vw);
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1px solid #22314e;
    background: #0e1626;
    color: var(--text);
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 18px rgba(0, 0, 0, .35);
}

body[data-theme="day"] .search input {
    background: #ffffff;
    border-color: #cfe3ff;
    color: #10233d;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .10)
}

.search input:focus {
    border-color: #2f4b7f;
    box-shadow: 0 0 0 4px #2f4b7f33
}

.search button {
    padding: .85rem 1rem;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--brand), var(--accent-2));
    color: #061229;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.search button:hover {
    filter: brightness(1.06)
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-weight: 600
}

.theme-toggle select {
    appearance: none;
    padding: .62rem .7rem;
    border-radius: 10px;
    border: 1px solid #22314e;
    background: #0e1626;
    color: var(--text)
}

body[data-theme="day"] .theme-toggle select {
    background: #fff;
    border-color: #cfe3ff;
    color: #10233d
}

/* ---------- Autocomplete (portal dropdown) ---------- */
.sugg-box {
    position: fixed;
    /* NOTE: JS controls left/transform now */
    display: none;
    z-index: 10000;
    background: #0e1626;
    border: 1px solid #22314e;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
    max-height: 55vh;
    overflow: auto;
    color: var(--text);
    /* No default left/transform here to avoid conflict with JS */
}

.sugg-item {
    padding: .7rem .95rem;
    border-bottom: 1px solid #18253e;
    cursor: pointer;
    color: var(--text);
}

.sugg-item:last-child {
    border-bottom: none
}

.sugg-item:hover,
.sugg-item:focus {
    background: #15223a;
    outline: none
}

/* Day theme for autocomplete: light background + dark text */
body[data-theme="day"] .sugg-box {
    background: #ffffff;
    border-color: #cfe3ff;
    color: #0e1c33;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .14);
}

body[data-theme="day"] .sugg-item {
    color: #0e1c33;
    border-bottom: 1px solid #e6efff;
}

body[data-theme="day"] .sugg-item:hover,
body[data-theme="day"] .sugg-item:focus {
    background: #f0f6ff;
}

/* ---------- Panels & Grid ---------- */
.panel {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    margin: 1rem 0;
    color: var(--muted);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(4px);
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0
}

@media(min-width:720px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

/* ---------- Forecast cards ---------- */
.card {
    position: relative;
    background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    border: 1px solid #1f2c47;
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px 300px at 120% -10%, rgba(94, 160, 255, 0.12), transparent 60%);
    opacity: .8;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .42);
    border-color: #28406c;
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .5rem;
    gap: .6rem
}

.card .day {
    font-weight: 700
}

.card .hi .label {
    display: block;
    color: var(--muted);
    font-size: .8rem
}

.card .hi .val {
    font-size: 1.4rem;
    font-weight: 800
}

/* ---------- Metrics rows ---------- */
.metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
    margin-top: .6rem
}

.metric {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .6rem;
    align-items: center
}

.metric .i {
    width: 24px;
    height: 24px;
    color: var(--accent);
    display: grid;
    place-items: center
}

.metric .i svg {
    width: 22px;
    height: 22px
}

.metric .name {
    color: var(--muted)
}

.metric .value {
    font-weight: 800
}

/* ---------- Provider breakdown ---------- */
.providers {
    margin-top: .8rem
}

.providers summary {
    cursor: pointer;
    color: var(--brand);
    font-weight: 700;
    letter-spacing: .2px
}

.prov-pre {
    white-space: pre-wrap;
    overflow: auto;
    background: #0e1626;
    border: 1px dashed #27406b;
    border-radius: 10px;
    padding: .7rem;
    margin: .6rem 0;
    color: #bdd0ff;
}

body[data-theme="day"] .prov-pre {
    background: #f6fbff;
    color: #213555;
    border-color: #cfe3ff
}

/* ---------- Utility / Micro ---------- */
.error {
    background: #240d12;
    border: 1px solid #4d1c2a;
    color: #ffb5b5;
    padding: .9rem;
    border-radius: 12px
}

.site-footer {
    padding: 1.2rem 0;
    text-align: center;
    color: var(--muted)
}

:focus-visible {
    outline: 3px solid #6db0ff;
    outline-offset: 2px
}

/* Reduced motion: keep precipitation (slower), disable heavy chrome */
@media (prefers-reduced-motion: reduce) {

    .layer-back,
    .layer-front,
    .lightning,
    body::before,
    .sun {
        animation: none !important
    }

    .rain span {
        animation-duration: 2s !important;
    }

    .snow span {
        animation-duration: calc(var(--dur, 8s) * 1.5) !important;
    }
}

#useMyLocation{
  padding:.85rem 1rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  color:var(--text);
  font-weight:700;
  box-shadow: var(--shadow-md);
}
#useMyLocation:hover{ filter:brightness(1.03) }
body[data-theme="day"] #useMyLocation{
  background:#ffffff;
  border-color:#cfe3ff;
  color:#10233d;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

#radarControls button {
  padding:.55rem .9rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  color:var(--text); font-weight:700;
}