/* Meteo v1.1.0 — Minimal widget styles
   Framework-agnostic. All classes namespaced mt-*
   ------------------------------------------------ */
.mt-card,.mt-full,.mt-minimal{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.4}
.mt-card *,.mt-full *,.mt-minimal *{box-sizing:border-box}

/* SVG icons */
.mt-svg{width:100%;height:100%;display:block}
.mt-weather-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mt-icon--lg{width:80px;height:80px}
.mt-icon--xs{width:18px;height:18px}

/* ── Card ───────────────────────────────────────── */
.mt-card{border-radius:20px;padding:24px;max-width:420px;width:100%;color:#fff;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.24)}
.mt-card.mt-day{background:linear-gradient(145deg,#2563eb 0%,#0ea5e9 100%)}
.mt-card.mt-night{background:linear-gradient(145deg,#1e1b4b 0%,#0f172a 100%)}
.mt-card.mt-theme-dark{background:linear-gradient(145deg,#111827 0%,#020617 100%);box-shadow:0 8px 32px rgba(0,0,0,.34)}
.mt-card.mt-theme-light.mt-night{background:linear-gradient(145deg,#2563eb 0%,#0ea5e9 100%)}

.mt-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;font-size:13px;opacity:.8}
.mt-location{display:flex;align-items:center;gap:4px;font-weight:600;font-size:14px;opacity:1}
.mt-icon-pin{width:12px;height:12px;flex-shrink:0}
.mt-updated{font-size:11px}

.mt-card__current{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.mt-temp-main{font-size:56px;font-weight:300;line-height:1;letter-spacing:-2px}
.mt-unit{font-size:28px;vertical-align:top;margin-top:8px;display:inline-block}
.mt-weather-label{font-size:18px;font-weight:500;margin-top:4px}
.mt-feels-like{font-size:13px;opacity:.75;margin-top:2px}

.mt-card__details{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;background:rgba(255,255,255,.1);border-radius:12px;padding:12px 8px;margin-bottom:16px}
.mt-detail{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.mt-detail__icon{width:20px;height:20px}
.mt-detail__val{font-size:13px;font-weight:600}
.mt-detail__lbl{font-size:11px;opacity:.7}

.mt-card__sun{display:flex;justify-content:center;gap:20px;font-size:13px;margin-bottom:16px;opacity:.85}
.mt-card__sun span{display:flex;align-items:center;gap:4px}
.mt-card__sun .mt-svg{width:16px;height:16px}

/* Hourly scroll */
.mt-card__hourly,.mt-full__hourly{margin-bottom:16px;overflow:hidden}
.mt-hourly-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.mt-hourly-scroll::-webkit-scrollbar{height:4px}
.mt-hourly-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}
.mt-hourly-item{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;padding:8px 4px;background:rgba(255,255,255,.08);border-radius:10px;flex-shrink:0}
.mt-hourly-time{font-size:11px;opacity:.7}
.mt-hourly-icon{width:28px;height:28px}
.mt-hourly-temp{font-size:13px;font-weight:600}
.mt-hourly-rain{font-size:10px;opacity:.75;min-height:14px;display:flex;align-items:center;gap:2px}
.mt-hourly-rain .mt-svg{width:10px;height:10px}

/* 7-day */
.mt-card__daily,.mt-full__daily{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.mt-daily-row{display:grid;grid-template-columns:40px 32px 1fr 52px 80px;align-items:center;gap:8px;padding:6px 4px;border-radius:8px;font-size:13px}
.mt-daily-row:hover{background:rgba(255,255,255,.07)}
.mt-daily-day{font-weight:600}
.mt-daily-icon{width:28px;height:28px}
.mt-daily-label{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-daily-rain{font-size:11px;opacity:.75;text-align:right;display:flex;align-items:center;gap:2px}
.mt-daily-rain .mt-svg{width:11px;height:11px}
.mt-daily-temps{display:flex;justify-content:space-between;font-size:13px}
.mt-daily-high{font-weight:600}
.mt-daily-low{opacity:.55}

.mt-card__footer{text-align:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.12)}
.mt-source{font-size:11px;color:rgba(255,255,255,.5);text-decoration:none}
.mt-source:hover{color:rgba(255,255,255,.8)}

/* ── Minimal ────────────────────────────────────── */
.mt-minimal{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.06);padding:4px 12px 4px 8px;border-radius:100px;font-size:14px;color:inherit}
.mt-minimal.mt-theme-dark{background:rgba(15,23,42,.94);color:#f8fafc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mt-minimal.mt-theme-light{background:rgba(0,0,0,.06);color:inherit}
.mt-minimal__icon{width:24px;height:24px;display:flex;align-items:center}
.mt-minimal__icon .mt-svg{width:24px;height:24px}
.mt-minimal__temp{font-weight:600}
.mt-minimal__loc{opacity:.6;font-size:12px}

/* ── Full ───────────────────────────────────────── */
.mt-full{border-radius:24px;padding:28px;max-width:600px;width:100%;color:#fff;box-shadow:0 12px 48px rgba(0,0,0,.28)}
.mt-full.mt-day{background:linear-gradient(145deg,#1d4ed8 0%,#0284c7 100%)}
.mt-full.mt-night{background:linear-gradient(145deg,#1e1b4b 0%,#0f172a 100%)}
.mt-full.mt-theme-dark{background:linear-gradient(145deg,#111827 0%,#020617 100%);box-shadow:0 12px 48px rgba(0,0,0,.38)}
.mt-full.mt-theme-light.mt-night{background:linear-gradient(145deg,#1d4ed8 0%,#0284c7 100%)}

.mt-full__hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.mt-full__city{font-size:20px;font-weight:600;margin:0 0 8px;opacity:.9}
.mt-full__temp-big{font-size:72px;font-weight:200;line-height:1;letter-spacing:-3px}
.mt-full__condition{font-size:20px;font-weight:500;margin-top:6px}
.mt-full__range{font-size:14px;opacity:.7;margin-top:4px}
.mt-full__icon-xl{width:120px;height:120px}
.mt-full__section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.55;margin:20px 0 10px}

.mt-full__details-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.mt-detail-tile{background:rgba(255,255,255,.1);border-radius:12px;padding:12px;text-align:center}
.mt-detail-tile__label{font-size:11px;opacity:.65;margin-bottom:4px}
.mt-detail-tile__val{font-size:18px;font-weight:600}
.mt-detail-tile__sub{font-size:11px;opacity:.65;margin-top:2px}

/* Full — daily with bar: add bar column */
.mt-full .mt-daily-row{grid-template-columns:48px 32px 1fr 52px 1fr 80px}
.mt-daily-bar{padding:0 4px}
.mt-daily-bar__track{background:rgba(255,255,255,.15);border-radius:4px;height:6px;position:relative;overflow:hidden}
.mt-daily-bar__fill{position:absolute;top:0;height:100%;background:linear-gradient(90deg,#93C5FD,#FBBF24);border-radius:4px}

/* Error */
.mt-error{color:#ef4444;font-size:13px;padding:8px 12px;border:1px solid #fee2e2;border-radius:8px;background:#fef2f2}

/* Responsive */
@media(max-width:480px){
    .mt-card,.mt-full{padding:16px;border-radius:16px}
    .mt-temp-main{font-size:42px}
    .mt-full__temp-big{font-size:52px}
    .mt-full__icon-xl{width:72px;height:72px}
    .mt-card__details{grid-template-columns:repeat(2,1fr)}
    .mt-full__details-grid{grid-template-columns:repeat(2,1fr)}
    .mt-daily-row{grid-template-columns:36px 28px 1fr 60px}
    .mt-full .mt-daily-row{grid-template-columns:36px 28px 1fr 60px}
    .mt-daily-bar,.mt-daily-label{display:none}
}

@media(prefers-color-scheme:dark){
    .mt-card.mt-theme-auto{background:linear-gradient(145deg,#111827 0%,#020617 100%);box-shadow:0 8px 32px rgba(0,0,0,.34)}
    .mt-full.mt-theme-auto{background:linear-gradient(145deg,#111827 0%,#020617 100%);box-shadow:0 12px 48px rgba(0,0,0,.38)}
    .mt-minimal.mt-theme-auto{background:rgba(15,23,42,.94);color:#f8fafc;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
}