/* ============================================================
   weather.css - раздел погоды (weather.memax) и его блоки на других сайтах.
   Макеты: design/redesign-2026/mock/weather (weather-seasons, weather-list-a,
   weather-region-b, weather-city-a, world-city-a, world-c, side-weather).
   Все классы с префиксом wx - style.css уже занял короткие имена.
   Разметку рисуют modulesWeather/*.ascx и WeatherHtmlHelper, оживляет js/mm/weather.js.
   ============================================================ */

.wxPage { font: 14px/1.45 Arial, Helvetica, sans-serif; color: #333; max-width: 100%; }
.wxPage *, .wxSide * { box-sizing: border-box; }
.wxPage a, .wxSide a { color: #059; text-decoration: none; }
.wxPage a:hover, .wxSide a:hover { color: #1a5f80; }
.wxPage h1 { margin: 0; font: 700 26px/1.2 Georgia, "Times New Roman", serif; color: #16324a; }
.wxPage h2 { margin: 18px 0 4px; font: 700 16px/1.25 Georgia, "Times New Roman", serif; color: #16324a; }
.wxPage h3 { margin: 0; }

/* переключатели скрипта: скрытый вариант дня, срока, списка */
.wxOff { display: none !important; }
.wxSprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- блок --- */
.wxBlk { margin-bottom: 14px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(30, 60, 100, .06); }
.wxBlk.wxPad { padding: 16px 18px 18px; }
.wxHd { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #d6e7f3; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #f3f9fd, #e6f2fa); font: 600 15px/20px "Segoe UI", Arial, sans-serif; color: #15557f; }
.wxHd .wxFlag { margin-right: 0; }
.wxMore { margin-left: auto; font: 400 12px Arial, Helvetica, sans-serif; }
.wxPage .wxMore { color: #1f86c4; }
.wxBd { padding: 12px 14px 14px; }
.wxSub { margin-top: 4px; font-size: 13px; color: #6b7480; }
.wxSub b { color: #16324a; }
.wxMuted { color: #8a8f98; }
.wxCredit { margin-top: 10px; font-size: 11px; color: #8a95a3; }
.wxPage .wxCredit a, .wxSide .wxCredit a { color: #8a95a3; }
.wxFlag { display: inline-block; vertical-align: -1px; margin-right: 5px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.wxPage .nmCrumbs { margin: 0 0 8px; font-size: 12px; }

/* --- иконки, температура, ветер --- */
.wxI { display: inline-block; vertical-align: middle; flex: none; }
.wxT { font-weight: 700; color: #16324a; white-space: nowrap; }
.wxT.wxHot { color: #d1561d; }
.wxT.wxCold { color: #2a6fc2; }
.wxWind { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.wxWind i { display: inline-block; width: 12px; height: 12px; background: #6b7480;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l6 18-6-4-6 4z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l6 18-6-4-6 4z'/%3E%3C/svg%3E") no-repeat center/contain; }

/* --- вкладки дней и сегменты --- */
.wxDays { display: flex; gap: 6px; flex-wrap: wrap; }
.wxDays a { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 10px 5px; border: 1px solid #d6e3ee; border-radius: 9px; background: #fff; line-height: 1.15; white-space: nowrap; cursor: pointer; }
.wxPage .wxDays a { color: #3d4650; }
.wxDays a b { font: 700 13px/1.2 Arial, Helvetica, sans-serif; color: #16324a; }
.wxDays a span { font-size: 11px; color: #8a8f98; }
.wxDays a.wxWe b, .wxDays a.wxWe span { color: #c00; }
.wxDays a.on { border-color: #1f86c4; background: #1f86c4; box-shadow: 0 2px 6px rgba(31, 134, 196, .3); }
.wxDays a.on b, .wxDays a.on span { color: #fff; }
.wxSeg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #eef2f6; }
.wxSeg a { padding: 4px 10px; border-radius: 7px; font: 600 12px/16px Arial, Helvetica, sans-serif; cursor: pointer; }
.wxPage .wxSeg a, .wxSide .wxSeg a { color: #4d5661; }
.wxPage .wxSeg a.on, .wxSide .wxSeg a.on { background: #fff; color: #1f86c4; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.wxSegFull { display: flex; margin: 0 0 6px; }
.wxSegFull a { flex: 1; text-align: center; }
.wxSide .wxSeg a.on.wxSegHot { color: #c2571d; }

/* --- карта Украины --- */
.wxMap { position: relative; }
.wxMap > svg { display: block; width: 100%; height: auto; overflow: visible; }
.wxMap .wxRg { cursor: pointer; outline: none; }
.wxMap .wxRg path { stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; transition: fill .15s, filter .15s; }
.wxMap .wxRg:hover path, .wxMap .wxRg.on path, .wxMap .wxRg:focus path { filter: brightness(.93) saturate(1.2); }
.wxMap .wxRg:hover path { stroke: #16324a; stroke-width: 2; }
.wxMap .wxRg.on path { stroke: #16324a; stroke-width: 2.2; }
.wxMap .wxLbl { pointer-events: none; font: 700 26px Arial, Helvetica, sans-serif; fill: #2b2410; paint-order: stroke; stroke: rgba(255, 255, 255, .8); stroke-width: 4px; stroke-linejoin: round; text-anchor: middle; }
.wxMap .wxPic { pointer-events: none; }
.wxMapZoom { display: flex; align-items: center; height: 100%; }
.wxMapZoom > svg { flex: 1; min-width: 0; overflow: hidden; }
.wxMapZoom .wxRg path { fill: #e3ebf2; }
.wxMapZoom .wxRg:hover path { fill: #cfe3f2; stroke: #fff; filter: none; }
.wxMapZoom .wxRg.on path { fill: #8cc3e8; stroke: #1f86c4; filter: none; }
.wxMapZoom .wxNlbl { font-weight: 700; font-family: Arial, Helvetica, sans-serif; fill: #7f8c99; text-anchor: middle; paint-order: stroke; stroke: #f3f8fc; stroke-linejoin: round; pointer-events: none; }
.wxMapZoom .wxCtr { pointer-events: none; }
.wxMapZoom .wxCtr circle { fill: #c00; stroke: #fff; }
.wxMapZoom .wxCtr text { font-weight: 700; font-family: Arial, Helvetica, sans-serif; fill: #16324a; paint-order: stroke; stroke: #fff; stroke-linejoin: round; }

/* подсказка над картой - рисует скрипт */
.wxTip { position: absolute; z-index: 5; width: 280px; padding: 12px 14px 10px; border: 1px solid #d6e3ee; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(20, 50, 80, .18); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; font: 13px/1.4 Arial, Helvetica, sans-serif; color: #333; text-align: left; }
.wxTip.on { opacity: 1; transform: none; }
.wxTip h4 { margin: 0; font: 700 15px/1.2 Georgia, serif; color: #16324a; }
.wxTip .wxTipNow { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.wxTip .wxTipNow .wxT { font-size: 30px; line-height: 1; letter-spacing: -.5px; }
.wxTip .wxTipNow span { flex: 1; min-width: 0; font-size: 12px; color: #4d5661; line-height: 1.3; }
.wxTip .wxTipNow span b { display: block; font-size: 13px; color: #16324a; }
.wxTip .wxTipFacts { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #6b7480; }
.wxTip ul { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px solid #eef2f6; font-size: 12px; columns: 2; column-gap: 12px; }
.wxTip li { display: flex; align-items: center; gap: 4px; padding: 1px 0; break-inside: avoid; }
.wxTip li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3d4650; }
.wxTip .wxTipGo { margin-top: 8px; font: 700 12px Arial, Helvetica, sans-serif; color: #1f86c4; }

.wxLegend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #8a8f98; }
.wxLegend .wxBar { flex: 1; height: 8px; border-radius: 4px; }

/* --- главная: блок-герой с картой --- */
.wxHero { padding: 16px 18px 14px; background: linear-gradient(180deg, #f3f9fd, #fff 42%); }
.wxSeason_winter .wxHero { background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120' viewBox='0 0 220 120'%3E%3Cg stroke='%23c9def3' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 20v24M18 26l24 12M18 38l24-12'/%3E%3Cpath d='M120 10v16M112 14l16 8M112 22l16-8'/%3E%3Cpath d='M190 40v28M176 47l28 14M176 61l28-14'/%3E%3Cpath d='M80 70v14M73 73l14 8M73 81l14-8'/%3E%3C/g%3E%3C/svg%3E") right 10px top 6px no-repeat, linear-gradient(180deg, #eaf3fc, #fff 42%); }
.wxSeason_spring .wxHero { background: linear-gradient(180deg, #edf8ee, #fff 42%); }
.wxSeason_summer .wxHero { background: linear-gradient(180deg, #fff6e0, #fff 42%); }
.wxSeason_autumn .wxHero { background: linear-gradient(180deg, #fcefe2, #fff 42%); }
.wxSeason_winter h1 { color: #1d4f8a; }
.wxSeason_spring h1 { color: #256b3a; }
.wxSeason_summer h1 { color: #7a4d00; }
.wxSeason_autumn h1 { color: #8a3f16; }
.wxHeroTop { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.wxHeroTop .wxDays { margin-left: auto; }
.wxHeroTop .wxDays a { min-width: 0; padding: 5px 8px 4px; }
.wxTools { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.wxTools .wxLegend { flex: 1; max-width: 300px; margin-left: auto; }
.wxHeroSide { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; padding-top: 12px; border-top: 1px solid #eef2f6; }
.wxHeroSide h3 { margin: 0 0 8px; font: 700 12px Arial, Helvetica, sans-serif; color: #8a8f98; text-transform: uppercase; letter-spacing: .4px; }
.wxNowBox .wxNow { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px #e3edf5; }
.wxNow { display: flex; align-items: center; gap: 12px; }
.wxNow .wxT { font: 700 40px/1 Arial, Helvetica, sans-serif; letter-spacing: -1px; }
.wxNow .wxD { font-size: 13px; color: #4d5661; }
.wxNow .wxD b { display: block; font: 700 15px/1.3 Arial, Helvetica, sans-serif; color: #16324a; }
.wxFacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.wxFacts div { padding: 7px 10px; border-radius: 8px; background: #f5f8fb; font-size: 12px; color: #6b7480; line-height: 1.25; }
.wxFacts div b { display: block; font-size: 14px; color: #16324a; }
.wxPage .wxGo { display: block; margin-top: 8px; font: 700 12px Arial, Helvetica, sans-serif; }
.wxSum { font-size: 13px; line-height: 1.5; color: #3d4650; }
.wxSum p { margin: 0; }
.wxSum b { color: #16324a; }

/* --- таблица областей --- */
.wxRows { width: 100%; border-collapse: collapse; }
.wxRows th { padding: 6px; border-bottom: 1px solid #e3e9ef; font: 700 11px Arial, Helvetica, sans-serif; color: #8a8f98; text-transform: uppercase; letter-spacing: .3px; text-align: left; white-space: nowrap; }
.wxRows td { padding: 6px; border-bottom: 1px solid #f0f3f6; vertical-align: middle; }
.wxRows tbody tr:last-child td { border-bottom: 0; }
.wxRows tbody tr:hover td { background: #f7fbfe; }
.wxRows tr.on td { background: #eaf5fc; }
.wxRows .wxNum { text-align: right; }
.wxRows .wxIc { width: 34px; padding-right: 0; }
.wxRows .wxNight { color: #6b7480; }
.wxPage .wxRows .wxRn { font-weight: 700; color: #16324a; }
.wxPage .wxRows .wxCn { font-size: 12px; color: #6b7480; }
.wxRows .wxMuted { font-size: 12px; }

.wxChips { display: flex; flex-wrap: wrap; gap: 6px; }
.wxChips a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border: 1px solid #d6e3ee; border-radius: 14px; background: #fff; font-size: 13px; }
.wxPage .wxChips a { color: #16324a; }
.wxChips a:hover { border-color: #1f86c4; }
.wxChips .wxT { font-size: 12px; }

/* --- список городов Украины --- */
.wxFilter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 6px; font-size: 12px; }
.wxFilter input { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid #d6dce3; border-radius: 8px; font: 14px Arial, Helvetica, sans-serif; }
.wxAbc { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0 0; }
.wxAbc a { min-width: 24px; padding: 3px 0; border-radius: 6px; background: #f3f9fd; text-align: center; font: 700 12px Arial, Helvetica, sans-serif; cursor: pointer; }
.wxPage .wxAbc a { color: #1f86c4; }
.wxPage .wxAbc a:hover, .wxPage .wxAbc a.on { background: #1f86c4; color: #fff; }
.wxGroups { columns: 2; column-gap: 14px; margin-top: 14px; }
.wxGroup, .wxGroups .nmAdMobile { break-inside: avoid; margin: 0 0 14px; }
.wxGroup { border: 1px solid #e3edf5; border-radius: 10px; background: #fff; }
.wxGroup h3 { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #eef2f6; border-radius: 10px 10px 0 0; background: #f7fbfe; font: 700 14px Arial, Helvetica, sans-serif; }
.wxPage .wxGroup h3 a { color: #16324a; }
.wxGroup h3 span { margin-left: auto; font: 400 11px Arial, Helvetica, sans-serif; color: #8a8f98; }
.wxGroup ul { list-style: none; margin: 0; padding: 4px 12px 8px; }
.wxGroup li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 13px; }
.wxGroup li a { flex: 1; min-width: 0; }
.wxGroup li.wxMain a { font-weight: 700; }
.wxGroup .wxN { width: 28px; font-size: 12px; color: #8a8f98; text-align: right; }
.wxGroup .wxT { width: 30px; text-align: right; }

/* --- страница области --- */
.wxBand { display: grid; grid-template-columns: 1fr 230px; overflow: hidden; }
.wxBandText { padding: 16px 18px; min-width: 0; }
.wxBandText .wxDays { margin-top: 12px; }
.wxBandText .wxDays a { min-width: 0; padding: 5px 8px 4px; }
.wxLead { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #3d4650; }
.wxLead b { color: #16324a; }
.wxZoom { display: flex; align-items: stretch; min-width: 0; overflow: hidden; background: #f3f8fc; border-left: 1px solid #e3edf5; }
.wxZoom .wxMap { flex: 1; }
.wxCards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.wxCard { min-width: 0; padding: 12px 14px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(30, 60, 100, .06); }
.wxCardMain { grid-column: 1 / -1; background: linear-gradient(160deg, #eaf5fc, #fff 60%); }
.wxCardTop { display: flex; align-items: center; gap: 10px; }
.wxPage .wxCardTop a { min-width: 0; font: 700 16px/1.2 Arial, Helvetica, sans-serif; color: #16324a; }
.wxCardTop small { display: block; font: 400 11px Arial, Helvetica, sans-serif; color: #8a8f98; }
.wxCardTop .wxT { margin-left: auto; font-size: 30px; letter-spacing: -.5px; }
.wxCardDesc { margin: 6px 0 8px; font-size: 12px; color: #6b7480; }
.wxPer { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; font-size: 12px; color: #8a8f98; text-align: center; }
.wxPer .wxT { display: block; font-size: 13px; }
.wxD5 { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: #8a8f98; text-align: center; }
.wxD5 .wxT { display: block; font-size: 12px; }
.wxD5 .wxWe { color: #c00; }
.wxD5 .wxI { display: block; margin: 2px auto 0; }
.wxCardMain .wxPer, .wxCardMain .wxD5 { justify-content: flex-start; gap: 26px; }

/* --- город --- */
.wxTimebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 0; }
.wxTimebar div { padding: 8px 10px; border: 1px solid #e3edf5; border-radius: 10px; background: #fbfdfe; font-size: 11px; color: #8a8f98; line-height: 1.3; }
.wxTimebar b { display: block; font: 700 18px/1.2 Arial, Helvetica, sans-serif; color: #16324a; }
.wxTimebar .wxClock b { font-size: 22px; }
.wxTimebar i { font-style: normal; color: #6b7480; }
.wxNowBig { display: flex; align-items: center; gap: 16px; margin: 14px 0 4px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(160deg, #e3f1fb, #f7fbfe 70%); }
.wxForeign .wxNowBig { background: linear-gradient(160deg, #fdf0de, #fffaf3 70%); }
.wxNowBig .wxT { font: 700 56px/1 Arial, Helvetica, sans-serif; letter-spacing: -2px; }
.wxNowBig .wxD { font-size: 13px; color: #4d5661; line-height: 1.4; }
.wxNowBig .wxD b { display: block; font: 700 17px/1.3 Arial, Helvetica, sans-serif; color: #16324a; }
.wxNowBig .wxFacts { margin: 0 0 0 auto; grid-template-columns: repeat(2, 120px); }
.wxNowBig .wxFacts div { background: rgba(255, 255, 255, .7); }
.wxVs { margin-left: auto; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .8); font-size: 12px; color: #6b7480; text-align: center; line-height: 1.3; }
.wxVs b { display: block; font: 700 20px Arial, Helvetica, sans-serif; color: #16324a; }
.wxDiff { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 9px; background: #fdeede; color: #b24d12; font-weight: 700; }
.wxDiff.wxDn { background: #e7effb; color: #2a5da8; }
.wxDsel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 14px 0 0; }
.wxDsel a { position: relative; top: 1px; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid #d6e3ee; border-bottom: 0; border-radius: 10px 10px 0 0; background: #f7fafc; line-height: 1.2; cursor: pointer; }
.wxPage .wxDsel a { color: #16324a; }
.wxDsel a b { font: 700 13px Arial, Helvetica, sans-serif; }
.wxDsel a.wxWe b { color: #c00; }
.wxDsel a span { font-size: 11px; color: #8a8f98; }
.wxDsel a em { margin-top: 2px; font-style: normal; font-size: 14px; }
.wxDsel a em i { font-style: normal; font-size: 12px; color: #8a8f98; }
.wxDsel a.on { background: #fff; box-shadow: inset 0 3px 0 #1f86c4; }
.wxDtab { padding: 6px 12px 10px; border: 1px solid #d6e3ee; border-radius: 0 0 10px 10px; }
.wxDtab table { width: 100%; border-collapse: collapse; }
.wxDtab th { padding: 8px 4px 6px; font: 700 11px Arial, Helvetica, sans-serif; color: #8a8f98; text-transform: uppercase; letter-spacing: .3px; text-align: center; }
.wxDtab th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
.wxDtab th:first-child, .wxDtab td:first-child { width: 120px; text-align: left; font-size: 12px; font-weight: 400; color: #8a8f98; text-transform: none; letter-spacing: 0; }
.wxDtab td { padding: 6px 4px; border-top: 1px solid #f0f3f6; text-align: center; font-size: 13px; }
.wxDtab .wxIcRow td { border-top: 0; }
.wxDtab .wxTtRow td { font: 700 20px Arial, Helvetica, sans-serif; }
.wxDtab .wxTtRow td:first-child { font: 400 12px Arial, Helvetica, sans-serif; }
.wxDtab .wxNowCol { background: #f3f9fd; }
.wxDtab .wxNightCol { background: #eef2fa; }
.wxChart svg { display: block; width: 100%; height: auto; }
.wxChart .wxChLn { fill: none; stroke: #e8793a; stroke-width: 2.5; stroke-linejoin: round; }
.wxChart .wxChAr { fill: #f59a45; opacity: .18; }
.wxChart .wxChK { fill: none; stroke: #5b7fae; stroke-width: 1.8; stroke-dasharray: 5 4; }
.wxChart .wxChPt { fill: #fff; stroke: #e8793a; stroke-width: 2; }
.wxChart .wxChTv { font: 700 11px Arial, Helvetica, sans-serif; fill: #16324a; text-anchor: middle; }
.wxChart .wxChTk { fill: #5b7fae; }
.wxChart .wxChDay { font: 700 11px Arial, Helvetica, sans-serif; fill: #8a8f98; text-anchor: middle; }
.wxChart .wxChDay.wxWe { fill: #c00; }
.wxChart .wxChSep { stroke: #e3e9ef; stroke-dasharray: 3 3; }
.wxChart .wxChPr { fill: #8cc3e8; }
.wxChart .wxChNote { font: 10px Arial, Helvetica, sans-serif; fill: #8a8f98; text-anchor: end; }
.wxChartLegend { display: flex; gap: 14px; margin-top: 2px; font-size: 11px; color: #6b7480; }
.wxChartLegend i { display: inline-block; width: 18px; height: 0; margin-right: 4px; border-top: 2.5px solid #e8793a; vertical-align: middle; }
.wxChartLegend i.wxK { border-top: 2px dashed #5b7fae; }
.wxSeo { font-size: 13px; line-height: 1.55; color: #4d5661; }
.wxSeo h2 { margin-top: 0; }
.wxSeo p { margin: 0 0 8px; }
.wxFaq dt { margin-top: 10px; font-weight: 700; color: #16324a; }
.wxFaq dd { margin: 2px 0 0; color: #4d5661; }
.wxWorld { position: relative; min-height: 60px; }
.wxWorld svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.wxWorld .wxWorldLbl { font: 700 11px Arial, Helvetica, sans-serif; fill: #16324a; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.wxDist { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #6b7480; }
.wxDist b { color: #16324a; }

/* --- мир --- */
.wxCtl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.wxKref { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #f3f9fd; font-size: 13px; color: #3d4650; }
.wxKref > span { display: inline-flex; align-items: center; gap: 8px; }
.wxKref .wxT { font-size: 26px; }
.wxAxis, .wxDr { display: grid; grid-template-columns: 150px 64px 1fr 44px; gap: 8px; align-items: center; }
.wxAxis { padding: 8px 0 4px; font: 700 10px Arial, Helvetica, sans-serif; color: #8a8f98; text-transform: uppercase; letter-spacing: .3px; }
.wxAxis .wxSc { display: flex; justify-content: space-between; }
.wxZone h3 { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; font: 700 15px Georgia, serif; color: #16324a; }
.wxZone h3 small { font: 400 12px Arial, Helvetica, sans-serif; color: #8a8f98; }
.wxDr { padding: 5px 0; border-bottom: 1px solid #f0f3f6; }
.wxPage .wxDr a { min-width: 0; font: 700 13px/1.2 Arial, Helvetica, sans-serif; color: #16324a; }
.wxDr a small { display: block; overflow: hidden; font: 400 11px Arial, Helvetica, sans-serif; color: #8a8f98; text-overflow: ellipsis; white-space: nowrap; }
.wxLt { font-size: 12px; color: #6b7480; white-space: nowrap; }
.wxLt.wxLtN { color: #5b6b9a; }
.wxTrack { position: relative; height: 14px; }
.wxTrack:before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: #16324a; opacity: .5; }
.wxTrack i { position: absolute; top: 2px; height: 10px; border-radius: 5px; }
.wxTrack i.wxUp { left: 50%; background: linear-gradient(90deg, #fbc15a, #e8603a); }
.wxTrack i.wxDn { right: 50%; background: linear-gradient(270deg, #9fd0f0, #3f6fd1); }
.wxDr .wxTv { text-align: right; }

/* --- правые блоки (обёртка round сайта, шапка nmSideHead) --- */
.nmSideIcon.wxIcon_thermo { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 14.6V5a3 3 0 0 0-6 0v9.6a4.6 4.6 0 1 0 6 0zm-3 6.4a2.6 2.6 0 0 1-1-5V8h2v8a2.6 2.6 0 0 1-1 5zM16 5h4v1.8h-4zm0 3.5h3v1.8h-3zm0 3.5h4v1.8h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 14.6V5a3 3 0 0 0-6 0v9.6a4.6 4.6 0 1 0 6 0zm-3 6.4a2.6 2.6 0 0 1-1-5V8h2v8a2.6 2.6 0 0 1-1 5zM16 5h4v1.8h-4zm0 3.5h3v1.8h-3zm0 3.5h4v1.8h-4z'/%3E%3C/svg%3E"); }
.nmSideIcon.wxIcon_pin { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.nmSideIcon.wxIcon_sky { -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 1.5h1.8v3H7zM1.8 4.4l1.3-1.3 2.1 2.1-1.3 1.3zM.5 9.2h3V11h-3zM11 5.2l2.1-2.1 1.3 1.3-2.1 2.1zM8 7a4 4 0 0 1 3.7 2.4A5.5 5.5 0 0 1 19.5 13a4 4 0 0 1-.5 8H7.5a4.2 4.2 0 0 1-3.6-6.3A4 4 0 0 1 8 7zm0 1.8a2.2 2.2 0 0 0-2 3.1 4.2 4.2 0 0 1 3.9-1.6A2.2 2.2 0 0 0 8 8.8zm2.8 3.3a2.4 2.4 0 0 0-3.3 7.1h11.5a2.2 2.2 0 0 0 0-4.4h-.9l-.1-.9a3.7 3.7 0 0 0-7.2-1.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 1.5h1.8v3H7zM1.8 4.4l1.3-1.3 2.1 2.1-1.3 1.3zM.5 9.2h3V11h-3zM11 5.2l2.1-2.1 1.3 1.3-2.1 2.1zM8 7a4 4 0 0 1 3.7 2.4A5.5 5.5 0 0 1 19.5 13a4 4 0 0 1-.5 8H7.5a4.2 4.2 0 0 1-3.6-6.3A4 4 0 0 1 8 7zm0 1.8a2.2 2.2 0 0 0-2 3.1 4.2 4.2 0 0 1 3.9-1.6A2.2 2.2 0 0 0 8 8.8zm2.8 3.3a2.4 2.4 0 0 0-3.3 7.1h11.5a2.2 2.2 0 0 0 0-4.4h-.9l-.1-.9a3.7 3.7 0 0 0-7.2-1.8z'/%3E%3C/svg%3E"); }
.nmSideHead .wxSideDate { margin-left: auto; font: 11px/1 Arial, Helvetica, sans-serif; color: #8a8f98; white-space: nowrap; }
.wxSide { font: 13px/1.4 Arial, Helvetica, sans-serif; color: #333; }
.wxSide .wxCredit { margin-top: 8px; }
.wxSideMore { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; font-size: 12px; color: #8a8f98; }
.round_info .wxSideMore a, .round_info .wxSideMore a:visited { padding: 4px 12px; border: 1px solid #bcdff0; border-radius: 13px; color: #1a5f80; font-size: 12px; text-decoration: none; }

.wxRec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wxSide .wxRec a { display: block; padding: 10px; border-radius: 9px; text-align: center; line-height: 1.2; color: #16324a; }
.wxRec span { display: block; font-size: 10px; color: #8a8f98; text-transform: uppercase; letter-spacing: .3px; }
.wxRec .wxI { display: block; margin: 4px auto 0; }
.wxRec b { display: block; font: 700 28px/1.1 Arial, Helvetica, sans-serif; }
.wxRec .wxRecHot { color: #c2571d; }
.wxRec .wxRecCold { color: #2a6fc2; }
.wxRec em { display: block; margin-top: 4px; font-style: normal; font-weight: 700; }
.wxRec small { display: block; font-size: 11px; color: #8a8f98; }

.wxWr { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f3f6; }
.wxWr:last-child { border-bottom: 0; }
.wxWr .wxN { width: 16px; font: 700 12px Arial, Helvetica, sans-serif; color: #b5bcc5; text-align: right; }
.wxSide .wxWr a { flex: 1; min-width: 0; font: 700 13px/1.25 Arial, Helvetica, sans-serif; color: #16324a; }
.wxWr a small { display: block; overflow: hidden; font: 400 11px Arial, Helvetica, sans-serif; color: #8a8f98; text-overflow: ellipsis; white-space: nowrap; }
.wxPill { flex: none; min-width: 40px; padding: 3px 7px; border-radius: 10px; font: 700 13px/15px Arial, Helvetica, sans-serif; text-align: center; color: #3a2a10; }

.wxSideMap { border-radius: 0 0 8px 8px; }
.wxSideMap.wxSeason_winter { background: linear-gradient(180deg, #eaf3fc, #fff 50%); }
.wxSideMap.wxSeason_spring { background: linear-gradient(180deg, #edf8ee, #fff 50%); }
.wxSideMap.wxSeason_summer { background: linear-gradient(180deg, #fff6e0, #fff 50%); }
.wxSideMap.wxSeason_autumn { background: linear-gradient(180deg, #fcefe2, #fff 50%); }
.wxSideMap .wxLegend { margin: 4px 0 8px; }
.wxSideMap .wxLegend .wxBar { height: 6px; }
.wxSideMap .wxTip { width: 250px; }
.wxCg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.wxSide .wxCg a { display: flex; align-items: center; gap: 5px; padding: 4px 0; border-bottom: 1px dashed #eef2f6; font-size: 13px; color: #16324a; }
.wxCg a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wxCg .wxT { font-size: 12px; }

.nmSideHead .wxSel { margin-left: auto; padding: 2px 6px; border: 1px solid #bcdff0; border-radius: 12px; background: #fff; font: 600 12px/16px Arial, Helvetica, sans-serif; color: #1a5f80; }
.wxSide .wxStrip { display: flex; align-items: center; gap: 10px; color: #16324a; }
.wxStrip .wxT { font: 700 30px/1 Arial, Helvetica, sans-serif; letter-spacing: -1px; }
.wxStrip .wxD { flex: 1; font-size: 12px; color: #6b7480; line-height: 1.3; }
.wxStrip .wxD b { display: block; font-size: 13px; color: #16324a; }
.wxD5s { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; padding-top: 8px; border-top: 1px solid #f0f3f6; text-align: center; font-size: 11px; color: #8a8f98; }
.wxSide .wxD5s a { color: #8a8f98; }
.wxD5s span { display: block; }
.wxD5s .wxWe { color: #c00; }
.wxD5s .wxI { display: block; margin: 2px auto; }
.wxD5s .wxT { display: block; font-size: 12px; }

/* --- подсказки при наборе города (js/mm/weather-suggest.js) --- */

.nmWeatherSuggestBox { position: relative; display: inline-block; }

.nmWeatherSuggest {
  display: none;
  position: absolute;
  z-index: 1100;
  left: 0;
  top: 100%;
  min-width: 100%;
  max-width: 420px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 2px;
  border: 1px solid #cfe0ee;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(43, 108, 163, .15);
  text-align: left;
}

.nmWeatherSuggest a.nmWeatherSuggestItem,
.nmWeatherSuggest a.nmWeatherSuggestItem:visited {
  display: block;
  padding: 7px 12px;
  border-bottom: 1px solid #f0f6fb;
  color: #23628f;
  font: 14px Arial, Helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nmWeatherSuggest a.nmWeatherSuggestItem:last-child { border-bottom: none; }

.nmWeatherSuggest a.nmWeatherSuggestItem:hover,
.nmWeatherSuggest a.nmWeatherSuggestOn,
.nmWeatherSuggest a.nmWeatherSuggestOn:hover {
  background: #eaf4fc;
  color: #1e4c72;
  text-decoration: none;
}

/* область или страна: одноимённых городов много, без пояснения не выбрать */
.nmWeatherSuggestPlace { margin-left: 6px; color: #8194a5; font-size: 12px; }

/* --- реклама: на телефоне блок правой колонки (R1) переезжает в nmAdMobile после первого экрана --- */
.nmAdMobile .nmAd { margin: 0 0 14px; }

/* --- телефон --- */
@media (max-width: 700px) {
  .nmWeatherSuggest { max-width: 100%; }
  .wxPage h1 { font-size: 22px; }
  .wxDays { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .wxDays a { flex: none; min-width: 64px; }
  .wxHeroTop .wxDays { margin-left: 0; }
  .wxHero { padding: 12px; }
  .wxTools { flex-wrap: wrap; }
  .wxTools .wxLegend { max-width: none; flex-basis: 100%; }
  .wxHeroSide { grid-template-columns: 1fr; }
  .wxMap .wxLbl { font-size: 34px; }
  .wxTip { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; pointer-events: auto; }
  .wxRows .wxHideM { display: none; }
  .wxGroups { columns: 1; }
  .wxBand { grid-template-columns: 1fr; }
  .wxZoom { border-left: 0; border-top: 1px solid #e3edf5; }
  .wxZoom .wxMap > svg { height: 240px; }
  .wxCards { grid-template-columns: 1fr; }
  .wxTimebar { grid-template-columns: 1fr 1fr; }
  .wxNowBig { flex-wrap: wrap; }
  .wxNowBig .wxFacts { margin: 0; flex-basis: 100%; grid-template-columns: 1fr 1fr; }
  .wxVs { margin-left: 0; }
  .wxDsel { gap: 4px; }
  .wxDsel a { padding: 6px 2px; }
  .wxDsel a span { display: none; }
  .wxDtab { padding: 4px 6px 8px; overflow-x: auto; }
  .wxDtab th:first-child, .wxDtab td:first-child { width: 72px; }
  .wxDtab .wxTtRow td { font-size: 14px; }
  .wxDtab td { font-size: 12px; }
  .wxAxis, .wxDr { grid-template-columns: 104px 48px 1fr 36px; gap: 6px; }
  .wxLt { font-size: 11px; }
}