/* World Weather — top-nav layout, glass UI (based on weather-dashboard) */
:root {
  --ink: #fff;
  --glass: rgba(255,255,255,.14);
  --glass-line: rgba(255,255,255,.2);
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.22,.61,.36,1);
  --radius: 22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);background:#04121b;
  -webkit-font-smoothing:antialiased;
}

/* ── Stage & backgrounds ── */
.stage{position:relative;min-height:100vh;isolation:isolate}
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#04121b}
.bg .photo{
  position:absolute;inset:-2%;background-size:cover;background-position:center 28%;
  background-repeat:no-repeat;opacity:0;transform:scale(1.02);
  transition:opacity 1.2s var(--e-soft),filter 1.2s var(--e-soft);
}
.bg .photo.on{opacity:1}
.bg .photo.first{animation:settle 2s var(--e-out) both}
.sc-clear{background-image:url("../assets/scenes/sc-clear.jpg")}
.sc-partly{background-image:url("../assets/scenes/sc-partly.jpg")}
.sc-overcast{background-image:url("../assets/scenes/sc-overcast.jpg")}
.sc-rain{background-image:url("../assets/scenes/sc-rain.jpg")}
.sc-storm{background-image:url("../assets/scenes/sc-storm.jpg")}
.sc-snow{background-image:url("../assets/scenes/sc-snow.jpg")}
.sc-fog{background-image:url("../assets/scenes/sc-fog.jpg")}
.sc-night{background-image:url("../assets/scenes/sc-night.jpg")}
@keyframes settle{from{transform:scale(1.08);filter:brightness(.55)}to{transform:scale(1.02);filter:none}}
.stage.dim .bg .photo{filter:brightness(.52) saturate(.85) hue-rotate(6deg)}
.tint{position:absolute;inset:0;background:linear-gradient(105deg,rgba(4,16,24,.55) 0%,rgba(4,16,24,.35) 45%,rgba(4,16,24,.2) 100%)}
.fogfx{position:absolute;inset:0;opacity:0;transition:opacity 1.2s;
  background:radial-gradient(55% 28% at 28% 70%,rgba(210,220,222,.32),transparent 70%),
             radial-gradient(50% 26% at 75% 68%,rgba(210,220,222,.28),transparent 70%);
  animation:fogdrift 24s ease-in-out infinite alternate}
@keyframes fogdrift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,0,0)}}
.rainfx{position:absolute;inset:-60px;opacity:0;transition:opacity 1s;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160'%3E%3Cg stroke='%23dff3f7' stroke-linecap='round' stroke-opacity='.5'%3E%3Cpath d='M14 0l-5 26M58 40l-5 26M96 12l-5 26M36 92l-5 26M82 104l-5 26M110 70l-4 20M6 130l-4 20'/%3E%3C/g%3E%3C/svg%3E");
  animation:rain .5s linear infinite}
@keyframes rain{from{transform:translate3d(0,0,0)}to{transform:translate3d(-30px,160px,0)}}
.snowfx{position:absolute;inset:-80px;opacity:0;transition:opacity 1s;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='30' r='2.2' opacity='.9'/%3E%3Ccircle cx='90' cy='12' r='1.4' opacity='.7'/%3E%3Ccircle cx='150' cy='60' r='2.6' opacity='.85'/%3E%3Ccircle cx='60' cy='100' r='1.6' opacity='.6'/%3E%3Ccircle cx='120' cy='140' r='2' opacity='.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='40' cy='70' r='3.4' opacity='.55'/%3E%3Ccircle cx='200' cy='30' r='2.8' opacity='.5'/%3E%3Ccircle cx='130' cy='190' r='3.8' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  animation:snow 9s linear infinite}
@keyframes snow{from{background-position:0 0,0 0}to{background-position:60px 180px,-40px 260px}}
.grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

[data-scene=rain] .rainfx{opacity:.28}
[data-scene=storm] .rainfx{opacity:.38}
[data-scene=snow] .snowfx{opacity:.85}
[data-scene=fog] .fogfx{opacity:1}
[data-scene=night] .tint{opacity:1;background:linear-gradient(105deg,rgba(2,8,16,.72),rgba(2,8,16,.5))}

/* ── Top bar ── */
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:14px 22px;
  background:linear-gradient(180deg,rgba(8,22,32,.82),rgba(8,22,32,.45));
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:20px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
}
.logo-img{width:42px;height:42px;border-radius:12px;flex-shrink:0;box-shadow:0 4px 14px rgba(212,160,23,.35)}
.brand-text{line-height:1.15;min-width:0}
.brand-text strong{font-size:15px;font-weight:600;display:block;white-space:nowrap}
.brand-text small{opacity:.75;font-size:11px;white-space:nowrap}

.search-wrap{position:relative;flex:1;max-width:520px;margin:0 auto}
.search-field{
  display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;
  border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
}
.search-field svg{width:18px;height:18px;flex:none;opacity:.85}
.search-field input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:15px;
}
.search-field input::placeholder{color:rgba(255,255,255,.6)}
.search-field:focus-within{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.search-panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;
  padding:10px;border-radius:16px;
  background:linear-gradient(180deg,rgba(14,34,44,.92),rgba(8,22,32,.96));
  backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 40px rgba(0,0,0,.35);max-height:340px;overflow:auto;
}
.search-panel[hidden]{display:none}
#results{list-style:none}
#results button{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  padding:10px 12px;border-radius:10px;background:none;color:#fff;text-align:left;
  border:0;cursor:pointer;font:inherit;
}
#results button:hover,#results button:focus-visible{background:rgba(255,255,255,.12)}
#results strong{font-size:14px;font-weight:600}
#results span{font-size:12px;opacity:.75}
.hint{margin:8px 4px 2px;font-size:12px;opacity:.8}
.hint[data-warn="1"]{color:#ffd28a;opacity:1}

.top-actions{display:flex;gap:8px;flex-shrink:0}
.chip-btn{
  height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:.2s;
}
.chip-btn:hover{background:rgba(255,255,255,.22)}

/* ── Content ── */
.content{
  position:relative;z-index:1;width:min(1180px,calc(100% - 32px));
  margin:0 auto;padding:22px 0 40px;display:flex;flex-direction:column;gap:18px;
}
.glass{
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.09));
  border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 16px 40px rgba(2,10,16,.22);
}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;padding:26px 28px}
.place{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.place svg{width:18px;height:18px}
.status{
  margin-left:8px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.2px;
  background:rgba(255,255,255,.14);opacity:.9;
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:#7cf0b4}
.big-temp{margin:10px 0 4px;font-family:'Inter Tight',Inter,sans-serif;font-size:clamp(56px,10vw,88px);font-weight:500;line-height:.95;letter-spacing:-2px}
.big-temp i{font-style:normal;font-size:.42em;opacity:.8;margin-left:6px}
.cond{font-size:18px;font-weight:600;opacity:.95}
.blurb{margin-top:10px;font-size:13.5px;line-height:1.55;opacity:.82;max-width:42ch}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{
  padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:4px;
}
.m-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;opacity:.7}
.m-value{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}

.section-title{font-size:16px;font-weight:600;margin-bottom:14px;padding:20px 22px 0}
.section-title small{font-size:12px;opacity:.7;font-weight:500;margin-left:8px}

/* Forecast cards */
.forecast{padding-bottom:18px}
.days-row{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:0 18px;
}
.day-card{
  padding:14px 12px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  cursor:default;transition:.25s var(--e-out);
}
.day-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.16)}
.day-card.today{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.18)}
.day-name{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.8}
.day-date{font-size:11px;opacity:.65;margin-top:2px}
.day-icon{margin:10px 0 8px;height:36px;display:flex;align-items:center;justify-content:center}
.day-icon svg{width:34px;height:28px}
.day-temp{font-size:18px;font-weight:700}
.day-temp .lo{opacity:.65;font-weight:500;font-size:13px}
.day-cond{margin-top:6px;font-size:11px;opacity:.8;line-height:1.3}
.day-extra{margin-top:8px;font-size:10px;opacity:.7;line-height:1.4}

/* Details table */
.details{padding-bottom:18px}
.table-wrap{overflow-x:auto;padding:0 12px 8px}
.w-table{width:100%;border-collapse:collapse;min-width:720px}
.w-table th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.7px;opacity:.75;
  padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.16);font-weight:600;
}
.w-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.w-table tr:last-child td{border-bottom:0}
.w-table tr:hover td{background:rgba(255,255,255,.06)}

.foot{
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  width:min(1180px,calc(100% - 32px));margin:0 auto;padding:8px 0 28px;
  font-size:11.5px;opacity:.85;
}
.copy{display:flex;flex-direction:column;gap:3px}
.copy strong{font-size:12px;opacity:.95;letter-spacing:.2px}
.copy-line a{color:#f0c35a;text-decoration:none;font-weight:600}
.copy-line a:hover{text-decoration:underline}
.copy-sub{opacity:.7}

/* Cookie consent — glass style */
#cookieConsent{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:9998;width:min(720px,calc(100% - 28px));
  background:linear-gradient(160deg,rgba(18,34,46,.92),rgba(10,22,32,.96));
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;padding:18px 20px;
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
#cookieConsent[hidden]{display:none!important}
.cookie-inner{display:flex;align-items:center;gap:14px}
.cookie-icon{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:rgba(212,160,23,.18);border:1px solid rgba(212,160,23,.35);
  box-shadow:0 0 24px rgba(212,160,23,.15);
}
.cookie-text{
  flex:1;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.88);margin:0;
  min-width:0;
}
.cookie-more{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#f0c35a;border-radius:999px;padding:4px 12px;cursor:pointer;
  font-size:12px;font-weight:600;margin-left:8px;transition:.2s;
}
.cookie-more:hover{background:rgba(212,160,23,.2);border-color:rgba(212,160,23,.45)}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-decline{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);padding:11px 18px;border-radius:12px;
  font-size:12.5px;font-weight:500;cursor:pointer;transition:.2s;
}
.cookie-decline:hover{background:rgba(255,255,255,.14);color:#fff}
.cookie-accept{
  background:linear-gradient(135deg,#e0b12c,#c4920f);color:#1a1200;border:0;
  padding:11px 22px;border-radius:12px;font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 22px rgba(212,160,23,.35);transition:.2s;
}
.cookie-accept:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cookie-details{
  margin-top:14px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.82);
}
.cookie-details[hidden]{display:none!important}
.cookie-details strong{display:block;margin-bottom:8px;color:#fff;font-size:13px}
.cookie-details ul{margin:0 0 10px 18px;padding:0}
.cookie-details li{margin:5px 0}
.cookie-details b{color:#f0c35a;font-weight:600}
.cookie-details p{margin:0;opacity:.75}
/* ── Mobile / tablet adaptation ── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:16px;padding:20px}
  .days-row{grid-template-columns:repeat(3,1fr)}
  .big-temp{font-size:clamp(48px,14vw,72px)}
  .metrics{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  html,body{overflow-x:hidden}
  .topbar{
    flex-wrap:wrap;gap:10px;padding:10px 12px;
    padding-top:max(10px, env(safe-area-inset-top));
  }
  .logo-img{width:36px;height:36px;border-radius:10px}
  .brand{gap:10px;flex:1 1 auto;min-width:0}
  .brand-text strong{font-size:14px}
  .brand-text small{display:none}
  .top-actions{margin-left:auto}
  .chip-btn{height:36px;padding:0 12px;font-size:12px}

  .search-wrap{order:3;flex-basis:100%;max-width:none;margin:0}
  .search-field{height:44px;padding:0 12px;border-radius:12px}
  .search-field input{font-size:16px; /* iOS zoom fix */}

  .content{
    width:calc(100% - 20px);
    padding:14px 0 100px;
    gap:14px;
  }
  .glass{border-radius:18px}

  .hero{padding:18px 16px;gap:14px}
  .place{font-size:14px;flex-wrap:wrap}
  .status{margin-left:0}
  .big-temp{font-size:clamp(46px,16vw,68px);letter-spacing:-1.5px}
  .cond{font-size:16px}
  .blurb{font-size:12.5px;max-width:none}

  .metrics{grid-template-columns:1fr 1fr;gap:8px}
  .metric{padding:10px 12px;border-radius:12px}
  .m-value{font-size:14px}
  .m-label{font-size:10px}

  .section-title{font-size:15px;padding:16px 16px 0}
  .forecast,.details{padding-bottom:12px}
  .days-row{
    display:flex;overflow-x:auto;gap:10px;padding:0 14px 4px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .day-card{
    flex:0 0 42%;min-width:132px;scroll-snap-align:start;
    padding:12px 10px;
  }
  .day-temp{font-size:17px}
  .day-extra{font-size:10px}

  .table-wrap{
    margin:0 -2px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  .w-table{min-width:640px}
  .w-table th,.w-table td{padding:10px 8px;font-size:12px}

  .foot{
    width:calc(100% - 20px);
    flex-direction:column;align-items:flex-start;gap:8px;
    padding-bottom:max(24px, env(safe-area-inset-bottom));
    font-size:11px;
  }

  /* cookie */
  #cookieConsent{
    bottom:max(12px, env(safe-area-inset-bottom));
    width:calc(100% - 20px);
    padding:14px 14px;
    border-radius:16px;
  }
  .cookie-inner{flex-wrap:wrap}
  .cookie-icon{width:36px;height:36px;font-size:18px;border-radius:12px}
  .cookie-text{flex-basis:calc(100% - 50px);font-size:12.5px}
  .cookie-actions{width:100%;margin-top:8px}
  .cookie-accept,.cookie-decline{
    flex:1;padding:12px 10px;font-size:13px;
    min-height:44px; /* touch target */
  }
  .cookie-more{min-height:32px}
}

@media (max-width:380px){
  .days-row .day-card{flex:0 0 72%}
  .metrics{grid-template-columns:1fr}
  .big-temp{font-size:52px}
}