/* =========================================================
   Meteon – MA-oldal modern, világos dizájn
   Csak a MA-oldalra hat: minden szabály body.ma-modern alatt.
   ========================================================= */
/* Nincs webfont: rendszer-betű (gyors, render-blokk nélkül – jobb mobil teljesítmény). */

body.ma-modern{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:linear-gradient(180deg,#a5d3f2 0%,#c2e2f7 42%,#e8f4fd 100%) no-repeat;
  background-color:#dceefb;
  text-align:left;
  color:#1b2c44;
}
body.ma-modern .page{ max-width:1080px; margin:0 auto; padding:6px 20px 10px; text-align:left; }

/* Breadcrumbs – sötétebb a világos háttérhez */
body.ma-modern .breadcrumbs{ color:#3f5572; }
body.ma-modern .breadcrumbs a{ color:#1d73eb; }
body.ma-modern .breadcrumbs-sep{ color:rgba(63,85,114,.45); }

/* ---------- HERO (a #leftCard) ---------- */
body.ma-modern #leftCard{
  width:auto; max-width:none;
  position:relative; overflow:hidden; border:0;
  background:linear-gradient(135deg,#4aa3ff 0%,#2f8bff 55%,#1d73eb 100%);
  color:#fff; border-radius:24px; padding:24px 28px;
  box-shadow:0 16px 40px rgba(29,90,200,0.28); margin-top:6px; text-shadow:none;
}
body.ma-modern #leftCard::after{
  content:""; position:absolute; width:300px;height:300px;border-radius:50%;
  right:-70px; top:-110px; background:radial-gradient(circle,rgba(255,231,168,0.5) 0%,rgba(255,231,168,0) 70%);
}
body.ma-modern #leftCard .loading{ padding:34px 0; text-align:center; color:#eaf3ff; font-weight:600; }

/* hero felső sor: város + dátum | élő-jelvény */
body.ma-modern #leftCard .hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; position:relative; z-index:2; }
body.ma-modern #leftCard .hero-loc{ font-size:22px; font-weight:800; letter-spacing:-.3px; }
body.ma-modern #leftCard .hero-date{ font-size:13px; opacity:.85; margin-top:2px; text-transform:capitalize; }
body.ma-modern #leftCard .hero-live{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.18); padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
body.ma-modern #leftCard .hero-live .hd{ width:7px;height:7px;border-radius:50%; background:#7CFFB2; box-shadow:0 0 0 3px rgba(124,255,178,.25); }

/* hero fő sor: emoji + fok + állapot */
body.ma-modern #leftCard .hero-main{ display:flex; align-items:center; gap:18px; margin-top:14px; position:relative; z-index:2; flex-wrap:wrap; }
body.ma-modern #leftCard .hero-main .emoji{ font-size:78px; line-height:1; filter:drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
body.ma-modern #leftCard .hero-main .temp{ font-size:72px; font-weight:300; letter-spacing:-3px; line-height:.95; }
body.ma-modern #leftCard .hero-cw{ display:flex; flex-direction:column; gap:3px; }
body.ma-modern #leftCard .hero-cond,
body.ma-modern #leftCard #leftDesc{ font-size:19px; font-weight:700; color:#fff; }
body.ma-modern #leftCard .hero-hl{ font-size:13.5px; font-weight:500; color:#fff; opacity:.92; }

/* KPI-csempék: TELJES szélességű 4-oszlopos rács (a .kpis 360px korlát feloldva) */
body.ma-modern #leftCard .kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  max-width:none; width:100%; margin:18px 0 0; position:relative; z-index:2;
}
body.ma-modern #leftCard .kpi{
  display:flex; align-items:center; gap:10px; text-align:left; min-width:0;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.22);
  border-radius:14px; padding:10px 12px; box-shadow:none; text-shadow:none;
}
body.ma-modern #leftCard .kpi-ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.20); color:#fff;
}
body.ma-modern #leftCard .kpi-ico svg{ width:19px; height:19px; display:block; }
body.ma-modern #leftCard .kpi-txt{ display:flex; flex-direction:column; min-width:0; }
body.ma-modern #leftCard .kpi-l{ font-size:10.5px; color:#fff; opacity:.82; text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
body.ma-modern #leftCard .kpi-v{ font-size:18px; color:#fff; font-weight:700; margin-top:2px; white-space:nowrap; }

/* ---------- Kedvenc-sáv (lap tetején, világos háttéren) ---------- */
body.ma-modern .fav-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow-x:auto;
  margin:4px 0 2px; padding:4px 2px 6px;
}
body.ma-modern .fav-bar::-webkit-scrollbar{ height:0; }
body.ma-modern .fav-bar-label{
  flex:0 0 auto; font-size:12.5px; font-weight:700; color:#3f5572; padding-right:2px;
}
body.ma-modern .fav-chip{
  flex:0 0 auto; display:inline-block; padding:6px 13px; border-radius:999px;
  background:#fff; border:1px solid #d9e6f6; color:#1d73eb; font-size:13px; font-weight:600;
  text-decoration:none; white-space:nowrap; box-shadow:0 2px 8px rgba(30,64,128,0.07); transition:.15s;
}
body.ma-modern .fav-chip:hover{ background:#eef5ff; }
body.ma-modern .fav-chip.active{ background:#1d73eb; border-color:#1d73eb; color:#fff; }

/* ---------- ⭐ Csillag a hero-ban (kék háttéren) ---------- */
body.ma-modern #leftCard .hero-loc-row{ display:flex; align-items:center; gap:8px; }
body.ma-modern #leftCard .fav-star{
  appearance:none; border:0; background:transparent; cursor:pointer; padding:0; line-height:1;
  font-size:23px; color:rgba(255,255,255,0.55); transition:transform .12s, color .12s;
}
body.ma-modern #leftCard .fav-star:hover{ transform:scale(1.12); color:#fff; }
body.ma-modern #leftCard .fav-star.on{ color:#ffd34d; text-shadow:0 0 14px rgba(255,211,77,.5); }

/* ---------- Push-riasztás ki/be gomb (hero-ban) ---------- */
body.ma-modern #leftCard .push-toggle{
  display:inline-flex; align-items:center; gap:7px; margin:14px 0 0; position:relative; z-index:2;
  appearance:none; cursor:pointer;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.28);
  color:#fff; font-size:13.5px; font-weight:700; padding:10px 16px; border-radius:999px;
  box-shadow:none; text-shadow:none; transition:background .15s, border-color .15s, transform .1s;
}
body.ma-modern #leftCard .push-toggle:hover{ background:rgba(255,255,255,0.26); }
body.ma-modern #leftCard .push-toggle:active{ transform:scale(.98); }
body.ma-modern #leftCard .push-toggle.on{
  background:rgba(124,255,178,0.22); border-color:rgba(124,255,178,0.55);
}
body.ma-modern #leftCard .push-toggle:disabled{ cursor:default; opacity:.85; }

/* ---------- fehér kártya alap ---------- */
body.ma-modern .side-card{
  background:#fff; border:1px solid #e7eef7; border-radius:18px;
  box-shadow:0 8px 24px rgba(30,64,128,0.09); padding:16px 18px; text-align:left;
}
body.ma-modern .side-card h3{
  font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#64748b; margin:0 0 12px;
}
body.ma-modern .mini-row{ display:flex; align-items:center; gap:12px; }
body.ma-modern .mini-row .emoji{ font-size:34px; line-height:1; }
/* Egységes SVG ikon-chip a részlet-csempékhez (UV/Pollen/Por/AQI/Nap/Csapadék) */
body.ma-modern .side-card .tile-ico{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#eef4ff; color:#1d73eb;
}
body.ma-modern .side-card .tile-ico svg{ width:22px; height:22px; display:block; }
body.ma-modern .mini-temp{ font-size:28px; font-weight:700; letter-spacing:-.5px; color:#1b2c44; }
body.ma-modern .mini-meta{ font-size:12.5px; color:#64748b; margin-top:8px; line-height:1.45; }
body.ma-modern .level-pill{ display:inline-block; padding:3px 10px; border-radius:999px; color:#fff; font-size:11px; font-weight:700; margin-left:auto; }
body.ma-modern .pollen-disclaimer{ font-size:11px; color:#94a3b8; margin:8px 0 0; }

/* Holnap / Heti átlag */
body.ma-modern .m-twin{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }

/* szekció-cím */
body.ma-modern .m-sec{
  display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:#3f5572; margin:26px 6px 12px;
}
body.ma-modern .m-sec span{ color:#64748b; text-transform:none; letter-spacing:0; font-weight:600; }
body.ma-modern .m-sec svg{ width:16px; height:16px; flex:0 0 auto; color:#3f5572; }

/* ---------- ÓRÁNKÉNT ---------- */
body.ma-modern .hourly-card{
  background:#fff; border:1px solid #e7eef7; border-radius:18px; box-shadow:0 8px 24px rgba(30,64,128,0.09); padding:6px;
}
body.ma-modern .hourly{ display:flex; gap:8px; overflow-x:auto; padding:10px; }
body.ma-modern .hourly::-webkit-scrollbar{ height:0; }
body.ma-modern .hour{
  flex:0 0 auto; width:66px; text-align:center; padding:12px 6px; border-radius:16px;
  background:#f5f9ff; border:1px solid #eaf1fb;
}
body.ma-modern .hour .emoji{ font-size:24px; display:block; margin-bottom:5px; }
body.ma-modern .hour .t{ font-size:16px; font-weight:700; color:#1b2c44; }
body.ma-modern .hour .time{ font-size:12.5px; color:#64748b; font-weight:600; margin-top:3px; }
body.ma-modern .hour .pp{ font-size:11px; color:#3578e5; font-weight:600; margin-top:3px; }
body.ma-modern #hourly-status{ text-align:center; color:#64748b; font-size:12.5px; }

/* ---------- RÉSZLET-CSEMPÉK (UV/Pollen/Por/AQI/Nap/Csapadék) ---------- */
body.ma-modern .uv-pollen-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:4px; }

/* ---------- SEO BLOKK ---------- */
body.ma-modern .seo-text-wide.city-seo-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  max-width:none; width:100%; margin:18px auto 0;
}
body.ma-modern .city-seo-card{
  background:#fff; border:1px solid #e7eef7; border-radius:18px; box-shadow:0 8px 24px rgba(30,64,128,0.09);
  padding:20px 22px; text-align:center;
}
body.ma-modern .city-seo-card-title{ font-size:17px; font-weight:700; margin:0 0 10px; color:#1b2c44; }
body.ma-modern .city-seo-card-text{ font-size:14px; line-height:1.62; color:#3f4c5f; margin:0 0 9px; }
body.ma-modern .city-seo-links{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:9px; padding:0; margin:0; }
body.ma-modern .city-seo-links a{
  display:inline-block; padding:8px 14px; border-radius:999px; background:#f0f6ff; border:1px solid #dbe9fb;
  color:#1d73eb; font-size:13.5px; font-weight:600; text-decoration:none; transition:.15s;
}
body.ma-modern .city-seo-links a:hover{ background:#e2eeff; }
body.ma-modern .city-seo-faq-item{ border-top:1px solid #eef2f7; padding:12px 0; }
body.ma-modern .city-seo-faq-item:first-of-type{ border-top:0; }
body.ma-modern .city-seo-faq-item summary{ cursor:pointer; font-size:14.5px; font-weight:600; color:#1b2c44; list-style:none; }
body.ma-modern .city-seo-faq-item summary::-webkit-details-marker{ display:none; }
body.ma-modern .city-seo-faq-item summary::after{ content:"+"; float:right; color:#64748b; }
body.ma-modern .city-seo-faq-item[open] summary::after{ content:"–"; }
body.ma-modern .city-seo-faq-item p{ font-size:13.5px; line-height:1.6; color:#4f5d6e; margin-top:8px; }
/* a GYIK kártya teljes szélességben */
body.ma-modern .city-seo-cards > .city-seo-card:last-child{ grid-column:1 / -1; }

body.ma-modern .seo-text-small{ max-width:820px; margin:24px auto 0; }

/* ---------- MOBIL ---------- */
@media (max-width:740px){
  body.ma-modern .page{ padding:8px 12px 16px; }

  /* Hero: kisebb, levegősebb, ne lógjon egymásba */
  body.ma-modern #leftCard{ padding:20px 18px; border-radius:20px; }
  body.ma-modern #leftCard .hero-top{ gap:10px; }
  body.ma-modern #leftCard .hero-loc{ font-size:20px; }
  body.ma-modern #leftCard .hero-live{ padding:5px 9px; font-size:11px; }
  body.ma-modern #leftCard .hero-main{ gap:10px 14px; margin-top:14px; }
  body.ma-modern #leftCard .hero-main .emoji{ font-size:56px; }
  body.ma-modern #leftCard .hero-main .temp{ font-size:56px; letter-spacing:-2px; }
  body.ma-modern #leftCard .hero-cond,
  body.ma-modern #leftCard #leftDesc{ font-size:16.5px; }
  body.ma-modern #leftCard .hero-hl{ font-size:13px; }
  body.ma-modern #leftCard .kpis{ grid-template-columns:repeat(2,1fr); gap:9px; margin-top:16px; }
  body.ma-modern #leftCard .push-toggle{ width:100%; justify-content:center; margin-top:16px; }

  /* Holnap / Heti + részlet-csempék: nagyobb térköz, ne tapadjanak össze */
  body.ma-modern .m-twin{ gap:12px; margin-top:14px; }
  body.ma-modern .m-sec{ margin:24px 4px 12px; }
  body.ma-modern .uv-pollen-row{ grid-template-columns:repeat(2,1fr); gap:12px; }
  body.ma-modern .side-card{ padding:14px 15px; }
  body.ma-modern .mini-temp{ font-size:24px; }
  body.ma-modern .hourly-card{ margin-top:2px; }

  /* Kedvenc-sáv: kényelmes érintőméret */
  body.ma-modern .fav-chip{ padding:7px 14px; font-size:13.5px; }

  body.ma-modern .seo-text-wide.city-seo-cards{ grid-template-columns:1fr; }
}

/* Nagyon keskeny telefonok: a csempék 1 oszlopban kapjanak levegőt */
@media (max-width:380px){
  body.ma-modern #leftCard .hero-main .emoji{ font-size:50px; }
  body.ma-modern #leftCard .hero-main .temp{ font-size:50px; }
}