/* purpose: MD Weather portal — Weather Channel style glass UI */
/* author: MD Hub */
/* date: 2026-08-31 */

body.ap-kind-weather{
	background:#061018;color:#fff;
	--mdw-glass:rgba(8,18,32,.42);
	--mdw-glass-2:rgba(255,255,255,.10);
	--mdw-line:rgba(255,255,255,.16);
	--mdw-text:#f8fafc;
	--mdw-muted:rgba(248,250,252,.72)
}
body.ap-kind-weather #ap_app{background:transparent}
body.ap-kind-weather .ap-top{
	background:rgba(6,16,24,.28);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
	border-bottom:1px solid var(--mdw-line);color:#fff
}
body.ap-kind-weather .ap-brand h1,body.ap-kind-weather .ap-brand p,body.ap-kind-weather .ap-btn{color:#fff}
body.ap-kind-weather .ap-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
body.ap-kind-weather #ap_workspace{padding:0;overflow:hidden;background:transparent;position:relative}
html.dark body.ap-kind-weather,body.ap-kind-weather{background:#061018}

#mdw_root{position:relative;height:100%;min-height:0;display:flex;flex-direction:column;color:var(--mdw-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#mdw_bg{position:absolute;inset:0;overflow:hidden;z-index:0;background:#0b1c2e}
#mdw_bg_poster,#mdw_bg_video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#mdw_bg_video{opacity:0;transition:opacity .6s ease}
#mdw_bg_video.is-on{opacity:1}
#mdw_fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#mdw_bg_wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,.28) 0%,rgba(4,10,18,.18) 35%,rgba(4,10,18,.55) 100%)}
#mdw_app{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;min-height:0}

.mdw-loc{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.mdw-loc button{appearance:none;border:0;background:transparent;color:#fff;cursor:pointer}
#mdw_geo_btn,#mdw_unit_btn{
	width:40px;height:40px;border-radius:12px;background:var(--mdw-glass);border:1px solid var(--mdw-line);
	display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
}
.mdw-loc-name{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:650}
.mdw-loc-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdw-units{font-weight:800;font-size:13px}

#mdw_search{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 8px;position:relative}
#mdw_search[hidden]{display:none!important}
#mdw_q{flex:1;min-width:160px;border:1px solid var(--mdw-line);border-radius:12px;background:rgba(8,18,32,.7);color:#fff;padding:10px 12px;font-size:16px}
#mdw_search button{border:0;border-radius:12px;padding:10px 12px;background:#38bdf8;color:#082f49;font-weight:700;cursor:pointer}
#mdw_search_close{background:rgba(255,255,255,.12)!important;color:#fff!important}
#mdw_suggest{position:absolute;left:12px;right:12px;top:48px;z-index:8;background:rgba(8,18,32,.94);border:1px solid var(--mdw-line);border-radius:14px;overflow:hidden;max-height:240px;overflow-y:auto}
#mdw_suggest button{display:block;width:100%;text-align:left;background:transparent!important;color:#fff!important;border:0;border-radius:0;padding:12px 14px;font-weight:600}
#mdw_suggest button:hover{background:rgba(56,189,248,.18)!important}

#mdw_alerts{margin:0 12px 8px;display:flex;flex-direction:column;gap:6px}
#mdw_alerts[hidden]{display:none!important}
.mdw-alert{border-radius:14px;padding:10px 12px;background:linear-gradient(135deg,#9a3412,#b45309);border:1px solid rgba(255,255,255,.18);cursor:pointer}
.mdw-alert.sev-extreme,.mdw-alert.sev-severe{background:linear-gradient(135deg,#7f1d1d,#b91c1c)}
.mdw-alert.sev-minor{background:linear-gradient(135deg,#0e7490,#0284c7)}
.mdw-alert b{display:block;font-size:13px}
.mdw-alert span{display:block;font-size:12px;opacity:.9;margin-top:2px}

#mdw_pages{flex:1;min-height:0;overflow:auto;padding:0 12px 88px;padding-bottom:calc(88px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.mdw-page[hidden]{display:none!important}
.mdw-hero{text-align:center;padding:8px 8px 18px}
.mdw-icon{width:112px;height:112px;margin:0 auto 4px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.mdw-icon svg{width:100%;height:100%;display:block}
.mdw-temp{font-size:92px;font-weight:200;line-height:1;letter-spacing:-3px}
.mdw-temp small{font-size:36px;font-weight:300;letter-spacing:0}
.mdw-cond{font-size:18px;font-weight:600;margin-top:4px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.mdw-hi-lo{margin-top:6px;font-size:15px;opacity:.92}
.mdw-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.mdw-chip{background:var(--mdw-glass);border:1px solid var(--mdw-line);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:650;backdrop-filter:blur(10px)}

.mdw-card{background:var(--mdw-glass);border:1px solid var(--mdw-line);border-radius:18px;padding:12px;margin:0 0 12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.mdw-card h3{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.mdw-hours{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.mdw-hour{flex:0 0 68px;text-align:center}
.mdw-hour .t{font-size:11px;opacity:.8}
.mdw-hour .ic{width:36px;height:36px;margin:6px auto}
.mdw-hour .ic svg{width:100%;height:100%}
.mdw-hour .v{font-size:16px;font-weight:700}
.mdw-hour .p{font-size:11px;color:#7dd3fc}

.mdw-days{display:flex;flex-direction:column;gap:8px}
.mdw-day{display:grid;grid-template-columns:72px 36px 1fr 86px;gap:8px;align-items:center}
.mdw-day .n{font-weight:650}
.mdw-day .ic{width:32px;height:32px}
.mdw-day .ic svg{width:100%;height:100%}
.mdw-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;position:relative}
.mdw-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#38bdf8,#fbbf24)}
.mdw-hl{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}

.mdw-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mdw-stat{background:rgba(255,255,255,.06);border-radius:14px;padding:12px}
.mdw-stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.mdw-stat .v{font-size:22px;font-weight:700;margin-top:4px}
.mdw-stat .s{font-size:12px;opacity:.8;margin-top:2px}

.mdw-gauge{display:flex;align-items:center;gap:14px}
.mdw-ring{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;border:5px solid currentColor;background:rgba(255,255,255,.08)}
.mdw-poll{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mdw-poll>div{flex:1;min-width:88px;background:rgba(255,255,255,.08);border-radius:12px;padding:8px;text-align:center}
.mdw-poll .n{font-size:10px;text-transform:uppercase;opacity:.75}
.mdw-poll .v{font-size:15px;font-weight:700}

.mdw-list{display:flex;flex-direction:column;gap:0}
.mdw-list .mdw-hour-row,.mdw-list .mdw-day-row{
	display:grid;grid-template-columns:64px 40px 1fr auto;gap:10px;align-items:center;
	padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.08)
}
.mdw-list .mdw-hour-row:last-child,.mdw-list .mdw-day-row:last-child{border-bottom:0}

.mdw-tabs{
	position:absolute;left:0;right:0;bottom:0;z-index:3;
	display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
	padding:8px 8px calc(8px + env(safe-area-inset-bottom));
	background:rgba(6,16,24,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
	border-top:1px solid var(--mdw-line)
}
.mdw-tabs button{
	appearance:none;border:0;background:transparent;color:rgba(255,255,255,.62);
	display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:10px;font-weight:700;cursor:pointer
}
.mdw-tabs button i{font-size:16px}
.mdw-tabs button.on{color:#7dd3fc}

#mdw_radar{position:relative;height:100%;min-height:360px;margin:0 -12px;padding:0}
#mdw_radar_map{position:absolute;inset:0 0 56px 0;background:#0b1220}
.mdw-radar-bar{
	position:absolute;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;gap:10px;
	padding:8px 12px;background:rgba(6,16,24,.82)
}
#mdw_radar_play{width:40px;height:40px;border:0;border-radius:12px;background:#38bdf8;color:#082f49;cursor:pointer}
#mdw_radar_slider{flex:1}
#mdw_radar_time{font-size:12px;min-width:72px;text-align:right}

.mdw-empty{text-align:center;padding:48px 16px;opacity:.9}
.mdw-empty button{margin-top:12px;border:0;border-radius:12px;padding:10px 16px;background:#38bdf8;color:#082f49;font-weight:700;cursor:pointer}

.mdw-wx-sun .ray{transform-origin:50% 50%;animation:mdw-spin 16s linear infinite}
.mdw-wx-sun .core{animation:mdw-pulse 3s ease-in-out infinite}
.mdw-wx-moon .core{animation:mdw-pulse 4s ease-in-out infinite}
.mdw-wx-cloud .c{animation:mdw-drift 5s ease-in-out infinite}
.mdw-wx-rain .drop{animation:mdw-fall .9s linear infinite}
.mdw-wx-snow .flake{animation:mdw-sfall 2.2s linear infinite}
.mdw-wx-storm .bolt{animation:mdw-flash 1.6s ease-in-out infinite}
.mdw-wx-fog .f{animation:mdw-drift 6s ease-in-out infinite}

@keyframes mdw-spin{to{transform:rotate(360deg)}}
@keyframes mdw-pulse{0%,100%{opacity:1}50%{opacity:.82;transform:scale(1.04)}}
@keyframes mdw-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes mdw-fall{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}100%{transform:translateY(18px);opacity:0}}
@keyframes mdw-sfall{0%{transform:translate(0,-4px);opacity:0}20%{opacity:1}100%{transform:translate(6px,16px);opacity:0}}
@keyframes mdw-flash{0%,70%,100%{opacity:.2}78%,86%{opacity:1}}

@media (max-width:720px){
	.mdw-temp{font-size:84px}
	.mdw-row{grid-template-columns:1fr}
}