/* ============================================================
   OTIA Weather Service V2 — premium / futuristic / compact
   Drop-in redesign for the existing weather module markup
   ============================================================ */

.weather-card{
  --wx:#7f96ff;
  --wx-2:#98acff;
  --wx-rgb:127,150,255;
  --txt:#f6f8ff;
  --txt-2:rgba(237,241,255,.78);
  --txt-3:rgba(190,202,235,.68);
  --line:rgba(255,255,255,.08);
  --soft:rgba(255,255,255,.05);
  position:relative;
  width:min(720px,100%);
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(155,180,255,.15);
  background:
    radial-gradient(circle at 12% 0%, rgba(138,160,255,.22), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(99,141,255,.18), transparent 26%),
    linear-gradient(180deg, rgba(15,22,40,.985), rgba(10,16,29,.985));
  box-shadow:
    0 28px 80px rgba(2,10,25,.42),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.03);
  color:var(--txt);
  isolation:isolate;
}

.weather-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 82%);
  opacity:.24;
  pointer-events:none;
}

.weather-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(185,205,255,.34), rgba(255,255,255,.03), rgba(115,151,255,.20));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.8;
  pointer-events:none;
}

.weather-card.wx-sun{
  --wx:#f6b246;
  --wx-2:#ffd37a;
  --wx-rgb:246,178,70;
}
.weather-card.wx-cloud{
  --wx:#8ea0bb;
  --wx-2:#c0cedd;
  --wx-rgb:142,160,187;
}
.weather-card.wx-rain{
  --wx:#63a7ff;
  --wx-2:#8fbeff;
  --wx-rgb:99,167,255;
}
.weather-card.wx-snow{
  --wx:#84d1f8;
  --wx-2:#c5ebff;
  --wx-rgb:132,209,248;
}

.weather-shell{
  position:relative;
  display:grid;
  grid-template-columns:265px minmax(0,1fr);
  min-height:214px;
  z-index:1;
}

.weather-summary{
  position:relative;
  min-width:0;
  padding:16px 16px 12px 16px;
  border-right:1px solid rgba(255,255,255,.065);
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.01));
}

.weather-summary::after{
  content:"";
  position:absolute;
  top:14px;
  right:-1px;
  bottom:14px;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(var(--wx-rgb),.68), transparent);
  box-shadow:0 0 14px rgba(var(--wx-rgb),.18);
}

.weather-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

.weather-place{
  min-width:0;
}

.weather-place strong{
  display:block;
  overflow:hidden;
  color:#ffffff;
  font-size:14px;
  font-weight:780;
  line-height:1.06;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.weather-place span{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--txt-3);
  font-size:9px;
  font-weight:600;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.weather-live{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  color:#d7e5ff;
  font-size:7.4px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
}

.weather-live i{
  position:relative;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--wx);
  box-shadow:
    0 0 10px rgba(var(--wx-rgb),.86),
    0 0 0 4px rgba(var(--wx-rgb),.10);
}

.weather-live i::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(var(--wx-rgb),.46);
  border-radius:50%;
  animation:wxLivePulse 2s ease-out infinite;
}
@keyframes wxLivePulse{
  0%{transform:scale(.65);opacity:.74}
  70%,100%{transform:scale(2.0);opacity:0}
}

.weather-now{
  display:grid;
  grid-template-columns:minmax(0,1fr) 94px;
  align-items:center;
  gap:8px;
  margin-top:14px;
}

.weather-temp{
  min-width:0;
}

.weather-temp strong{
  display:block;
  color:#ffffff;
  font-size:46px;
  font-weight:620;
  line-height:.86;
  letter-spacing:-.06em;
  text-shadow:0 0 24px rgba(255,255,255,.06);
  font-variant-numeric:tabular-nums;
}

.weather-temp strong sup{
  position:relative;
  top:-.36em;
  margin-left:2px;
  color:#bfd0ff;
  font-size:16px;
  font-weight:650;
  letter-spacing:-.015em;
}

.weather-condition{
  margin-top:7px;
  color:#f7fbff;
  font-size:11px;
  font-weight:760;
  line-height:1.18;
  letter-spacing:.01em;
}

.weather-condition-note{
  margin-top:3px;
  color:var(--txt-2);
  font-size:8.8px;
  font-weight:620;
  line-height:1.22;
}

.weather-daynight{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.weather-dn{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.034);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(6px);
}

.weather-dn span{
  color:var(--txt-3);
  font-size:8.4px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.weather-dn strong{
  color:#ffffff;
  font-size:13px;
  font-weight:820;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.weather-art{
  position:relative;
  width:84px;
  height:84px;
  justify-self:end;
  transform:translateZ(0);
}

.weather-art::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:7px;
  width:54px;
  height:14px;
  border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(var(--wx-rgb),.36), transparent 70%);
  filter:blur(5px);
}

.wx-sun-disc{
  position:absolute;
  top:15px;
  left:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.92), rgba(255,255,255,0) 20%),
    linear-gradient(145deg, var(--wx-2), var(--wx));
  box-shadow:
    0 0 0 12px rgba(var(--wx-rgb),.08),
    0 0 34px rgba(var(--wx-rgb),.28);
  animation:wxSunFloat 4.4s ease-in-out infinite;
}
.wx-sun-disc::before{
  content:"";
  position:absolute;
  inset:-13px;
  border-radius:50%;
  background:repeating-conic-gradient(
    from 0deg,
    rgba(var(--wx-rgb),.62) 0deg 4deg,
    transparent 4deg 34deg
  );
  -webkit-mask:radial-gradient(circle, transparent 0 58%, #000 60%);
  mask:radial-gradient(circle, transparent 0 58%, #000 60%);
  animation:wxSunSpin 18s linear infinite;
}
@keyframes wxSunFloat{
  0%,100%{transform:translateY(1px) scale(.985)}
  50%{transform:translateY(-2px) scale(1.02)}
}
@keyframes wxSunSpin{
  to{transform:rotate(360deg)}
}

.wx-cloud-body{
  position:absolute;
  z-index:2;
  left:13px;
  top:30px;
  width:57px;
  height:24px;
  border-radius:18px;
  background:linear-gradient(180deg,#eef4ff,#c9d5e6);
  box-shadow:
    0 10px 18px rgba(10,15,25,.18),
    inset 0 1px 0 rgba(255,255,255,.62);
  animation:wxCloudFloat 4.8s ease-in-out infinite;
}
.wx-cloud-body::before,
.wx-cloud-body::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
}
.wx-cloud-body::before{
  left:7px;
  top:-12px;
  width:28px;
  height:28px;
}
.wx-cloud-body::after{
  right:8px;
  top:-8px;
  width:21px;
  height:21px;
}
@keyframes wxCloudFloat{
  0%,100%{transform:translateX(-1px) translateY(0)}
  50%{transform:translateX(2px) translateY(-2px)}
}
.weather-art.wx-cloud-art .wx-cloud-body{
  top:26px;
  left:10px;
  width:60px;
  height:26px;
}
.weather-art.wx-rain-art .wx-cloud-body,
.weather-art.wx-snow-art .wx-cloud-body{
  top:16px;
}

.wx-rain-drop,
.wx-snow-flake{
  position:absolute;
  z-index:1;
  top:47px;
}
.wx-rain-drop{
  width:3px;
  height:13px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), #73b3ff);
  box-shadow:0 0 8px rgba(115,179,255,.25);
  transform:rotate(14deg);
  animation:wxRainDrop 1.14s ease-in infinite;
}
.wx-rain-drop:nth-child(2){left:26px;animation-delay:0s}
.wx-rain-drop:nth-child(3){left:41px;animation-delay:.28s}
.wx-rain-drop:nth-child(4){left:57px;animation-delay:.56s}
@keyframes wxRainDrop{
  0%{opacity:0;transform:translateY(-3px) rotate(14deg)}
  30%{opacity:.95}
  100%{opacity:0;transform:translateY(13px) rotate(14deg)}
}
.wx-snow-flake{
  width:7px;
  height:7px;
  color:#eaf8ff;
  text-shadow:0 0 8px rgba(255,255,255,.55);
  font-size:11px;
  font-weight:800;
  line-height:7px;
  animation:wxSnowFall 2.2s linear infinite;
}
.wx-snow-flake:nth-child(2){left:23px;animation-delay:0s}
.wx-snow-flake:nth-child(3){left:40px;animation-delay:.56s}
.wx-snow-flake:nth-child(4){left:57px;animation-delay:1.1s}
@keyframes wxSnowFall{
  0%{opacity:0;transform:translateY(-3px) rotate(0deg)}
  25%{opacity:.95}
  100%{opacity:0;transform:translateY(13px) rotate(95deg)}
}

.weather-week{
  position:relative;
  min-width:0;
  padding:12px 12px 10px;
}

.weather-week-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:26px;
  padding:0 4px 7px;
}
.weather-week-head strong{
  color:#f2f6ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.weather-week-head span{
  color:var(--txt-3);
  font-size:8px;
  font-weight:650;
}

.weather-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
  min-height:154px;
}

.weather-day{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:11px 4px 10px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 20px rgba(4,10,19,.10);
  backdrop-filter:blur(8px);
}

.weather-day:first-child{
  border-color:rgba(var(--wx-rgb),.33);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(var(--wx-rgb),.08),
    0 16px 28px rgba(4,10,19,.18);
}

.weather-day:first-child::before{
  content:"";
  position:absolute;
  top:-1px;
  left:16%;
  right:16%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--wx), transparent);
  box-shadow:0 0 12px rgba(var(--wx-rgb),.34);
}

.weather-day-name{
  color:var(--txt-3);
  font-size:8px;
  font-weight:780;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.weather-day:first-child .weather-day-name{
  color:#ffffff;
}

.weather-mini{
  position:relative;
  width:34px;
  height:34px;
}

.weather-mini.wx-mini-sun::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:linear-gradient(145deg,#ffd67f,#f5b144);
  box-shadow:
    0 0 0 4px rgba(245,177,68,.09),
    0 0 20px rgba(245,177,68,.18);
}
.weather-mini.wx-mini-cloud::before,
.weather-mini.wx-mini-rain::before,
.weather-mini.wx-mini-snow::before{
  content:"";
  position:absolute;
  left:5px;
  top:15px;
  width:24px;
  height:11px;
  border-radius:12px;
  background:linear-gradient(180deg,#eef4ff,#cad6e7);
  box-shadow:0 5px 10px rgba(10,15,24,.12);
}
.weather-mini.wx-mini-cloud::after,
.weather-mini.wx-mini-rain::after,
.weather-mini.wx-mini-snow::after{
  content:"";
  position:absolute;
  left:10px;
  top:9px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(180deg,#f4f8ff,#dbe4f0);
}
.weather-mini.wx-mini-rain i,
.weather-mini.wx-mini-snow i{
  position:absolute;
  z-index:2;
  left:9px;
  right:9px;
  top:26px;
  height:4px;
}
.weather-mini.wx-mini-rain i::before,
.weather-mini.wx-mini-rain i::after{
  content:"";
  position:absolute;
  top:0;
  width:2px;
  height:6px;
  border-radius:999px;
  background:#75b5ff;
  transform:rotate(12deg);
}
.weather-mini.wx-mini-rain i::before{left:1px}
.weather-mini.wx-mini-rain i::after{right:1px}
.weather-mini.wx-mini-snow i::before,
.weather-mini.wx-mini-snow i::after{
  content:"•";
  position:absolute;
  top:-4px;
  color:#e8f8ff;
  font-size:10px;
  line-height:10px;
}
.weather-mini.wx-mini-snow i::before{left:0}
.weather-mini.wx-mini-snow i::after{right:0}

.weather-day-temp{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-variant-numeric:tabular-nums;
}
.weather-day-temp strong{
  color:#ffffff;
  font-size:10.8px;
  font-weight:820;
}
.weather-day-temp span{
  color:var(--txt-3);
  font-size:8.8px;
  font-weight:700;
}
.weather-rainchance{
  min-height:9px;
  color:#9dc8ff;
  font-size:7.2px;
  font-weight:680;
  white-space:nowrap;
}

.weather-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:31px;
  padding:7px 12px 8px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
}

.weather-source{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  overflow:hidden;
  color:var(--txt-3);
  font-size:8.2px;
  font-weight:640;
  white-space:nowrap;
}
.weather-source i{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--wx);
  box-shadow:
    0 0 0 4px rgba(var(--wx-rgb),.08),
    0 0 12px rgba(var(--wx-rgb),.36);
}
.weather-source a{
  overflow:hidden;
  color:#e7efff;
  font-weight:700;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.weather-source a:hover{
  color:#ffffff;
  text-decoration:none;
}
.weather-resolved{
  overflow:hidden;
  color:var(--txt-3);
  font-size:7.8px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:720px){
  .weather-card{
    width:100%;
    border-radius:18px;
  }
  .weather-shell{
    grid-template-columns:1fr;
    min-height:0;
  }
  .weather-summary{
    padding:14px 14px 11px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .weather-summary::after{display:none}
  .weather-now{
    grid-template-columns:minmax(0,1fr) 84px;
    margin-top:10px;
  }
  .weather-temp strong{
    font-size:42px;
  }
  .weather-art{
    width:78px;
    height:78px;
  }
  .weather-daynight{
    margin-top:11px;
  }
  .weather-week{
    padding:10px 10px 9px;
  }
  .weather-days{
    gap:6px;
    min-height:122px;
  }
  .weather-day{
    padding:9px 3px 8px;
    gap:6px;
    border-radius:13px;
  }
  .weather-footer{
    min-height:28px;
    padding:6px 10px 7px 12px;
  }
}

@media(max-width:480px){
  .weather-place strong{
    font-size:13px;
  }
  .weather-place span{
    font-size:8.6px;
  }
  .weather-live{
    padding:4px 7px;
    gap:5px;
  }
  .weather-live span{
    display:none;
  }
  .weather-now{
    grid-template-columns:minmax(0,1fr) 72px;
    gap:6px;
  }
  .weather-temp strong{
    font-size:39px;
  }
  .weather-temp strong sup{
    font-size:14px;
  }
  .weather-condition{
    font-size:10.5px;
  }
  .weather-condition-note{
    font-size:8.4px;
  }
  .weather-dn{
    padding:8px 8px;
    border-radius:11px;
  }
  .weather-dn span{
    font-size:7.9px;
  }
  .weather-dn strong{
    font-size:12px;
  }
  .weather-week-head{
    height:22px;
    padding-bottom:6px;
  }
  .weather-week-head strong{
    font-size:8.2px;
  }
  .weather-week-head span{
    display:none;
  }
  .weather-days{
    gap:5px;
    min-height:108px;
  }
  .weather-day-name{
    font-size:7.2px;
  }
  .weather-mini{
    width:29px;
    height:29px;
    transform:scale(.95);
  }
  .weather-day-temp{
    gap:3px;
  }
  .weather-day-temp strong{
    font-size:9.5px;
  }
  .weather-day-temp span{
    font-size:8px;
  }
  .weather-rainchance{
    font-size:6.4px;
  }
  .weather-source{
    font-size:7.5px;
  }
  .weather-resolved{
    display:none;
  }
}

@media(max-width:390px){
  .weather-days{
    gap:4px;
  }
  .weather-day{
    padding:8px 2px 7px;
  }
  .weather-day-name{
    letter-spacing:.04em;
  }
}