/* ---- widgets.css ---- */
/* ============================================================
   Sidebar widgets · poll · weather · most read · deaths · horoscope
   ============================================================ */

.sidebar{position:sticky;top:64px;display:flex;flex-direction:column;gap:22px}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.widget-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--font-head);font-weight:800;font-size:15px}
.widget-head::after{content:"";width:26px;height:3px;background:var(--red);border-radius:2px}
.widget-body{padding:14px 16px}

/* --- weather --- */
.wx-now{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px dashed var(--line);gap:10px}
.wx-now .t{font-size:38px;font-weight:800;font-family:var(--font-head);font-variant-numeric:tabular-nums}
.wx-now .d{font-size:12px;color:var(--muted)}
.wx-now select{font-family:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:4px;padding:5px 9px;background:var(--surface);color:var(--ink);margin-top:6px;max-width:120px}
.wx-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:12px 0;border-bottom:1px dashed var(--line);text-align:center}
.wx-week .day{font-size:10.5px;color:var(--muted)}
.wx-week .dg{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.wx-week .dl{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.wx-cities{width:100%;font-size:12.5px;border-collapse:collapse;margin-top:8px}
.wx-cities td{padding:6px 2px;border-bottom:1px solid var(--line)}
.wx-cities tr:last-child td{border-bottom:none}
.wx-cities td:last-child{text-align:left;color:var(--muted);font-variant-numeric:tabular-nums}
.wx-cities .c-dot{display:inline-block;width:6px;height:6px;border-radius:4px;background:var(--red);margin-inline-end:7px}
.wx-note{font-size:10.5px;color:var(--muted);margin-top:8px;display:block}

/* --- top lists --- */
.top-list li{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.top-list li:last-child{border-bottom:none}
.top-list .rank{font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--line-strong);line-height:1;min-width:26px;transition:.2s}
.top-list li:hover .rank{color:var(--red)}
.top-list p{font-size:13px;font-weight:600;line-height:1.6}
.top-list p:hover{color:var(--red)}
.top-list .meta{margin-top:3px}

/* --- deaths --- */
.deaths{border-top:3px solid var(--ink)}
.deaths .widget-head::after{background:var(--ink)}
.deaths li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.deaths li:last-child{border-bottom:none}
.deaths .d-photo{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);color:var(--muted);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.deaths .d-photo img{width:100%;height:100%;object-fit:cover}
.deaths p{font-size:13px;font-weight:600;line-height:1.55}
.deaths small{font-size:11px;color:var(--muted);display:block;margin-top:2px}
.deaths .more-link{display:block;text-align:center;font-size:12px;color:var(--muted);padding:10px;border-top:1px solid var(--line)}
.deaths .more-link:hover{color:var(--red)}

/* --- poll --- */
.poll-q{font-size:14px;font-weight:800;font-family:var(--font-head);line-height:1.6;margin-bottom:12px}
.poll-opts{display:grid;gap:8px}
.poll-opts.imgs{grid-template-columns:1fr 1fr}
.poll-opt{border:1px solid var(--line);border-radius:4px;padding:10px 13px;font-size:13px;font-weight:600;text-align:right;transition:.15s;position:relative;overflow:hidden;color:var(--ink);width:100%}
.poll-opt:hover{border-color:var(--red);color:var(--red)}
.poll-opt.img{padding:0;text-align:center}
.poll-opt.img .ph{height:80px;border-radius:0}
.poll-opt.img img{height:80px;width:100%;object-fit:cover;display:block}
.poll-opt.img span{display:block;padding:8px 6px;font-size:12px}
.poll-opt .bar{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--red-soft);z-index:0;width:0;transition:width .6s ease}
.poll-opt .lbl{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:8px}
.poll-opt .pct{font-family:var(--font-head);font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.poll-opt.voted{cursor:default;pointer-events:none}
.poll-opt.mine{border-color:var(--red)}
.poll-foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;font-size:11px;color:var(--muted);gap:10px}
.poll-foot b{color:var(--red)}

/* --- horoscope --- */
.horo-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden}
.horo-signs{display:grid;grid-template-columns:repeat(4,1fr);border-inline-end:1px solid var(--line)}
.horo-sign{padding:12px 6px;border:none;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);text-align:center;transition:.15s;color:var(--ink)}
.horo-sign:nth-child(4n){border-inline-end:none}
.horo-sign:nth-child(n+9){border-bottom:none}
.horo-sign .g{display:block;font-size:20px;color:var(--red);line-height:1.2}
.horo-sign b{display:block;font-family:var(--font-head);font-size:12px;margin-top:3px}
.horo-sign small{display:block;font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.horo-sign:hover{background:var(--surface-2)}
.horo-sign.active{background:var(--red);color:#fff}
.horo-sign.active .g,.horo-sign.active small{color:#ffd6dc}
.horo-read{padding:18px 20px}
.horo-read .hr-top{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--line);margin-bottom:10px}
.horo-read .hr-g{font-size:34px;color:var(--red)}
.horo-read h3{font-size:17px;font-weight:800}
.horo-read .hr-d{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.horo-read p{font-size:13px;line-height:1.9;color:var(--ink-2)}
.horo-rates{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.horo-rates span{font-size:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:4px 10px;color:var(--ink-2)}
.horo-rates b{color:var(--red)}

/* ============ SIDEBAR MINI WIDGETS (standings / lotto / prayer) ============ */
.wg-more{display:flex;align-items:center;gap:5px;justify-content:center;margin-top:12px;font-size:12px;font-weight:700;color:var(--red);padding-top:11px;border-top:1px solid var(--line)}
.wg-more:hover{color:var(--red-deep)}
.wg-more .icon{width:12px;height:12px}
.wg-std-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.wg-std-tbl td{padding:7px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.wg-std-tbl tr:last-child td{border-bottom:none}
.wg-std-tbl .p{width:26px}
.wg-std-tbl .pos{display:inline-flex;width:20px;height:20px;border-radius:5px;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:var(--surface-2);color:var(--muted)}
.wg-std-tbl tr:first-child .pos{background:var(--red);color:#fff}
.wg-std-tbl .t{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.wg-std-tbl .t img{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.wg-std-tbl .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-std-tbl .pt{text-align:left;font-weight:800;color:var(--red);width:34px}
.wg-lt-meta{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:10px}
.wg-lt-balls{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wg-ball{width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums}
.wg-ball.strong{background:var(--red);border-color:var(--red);color:#fff}
.wg-plus{color:var(--muted);font-weight:800}
.wg-pr{display:flex;flex-direction:column;gap:2px}
.wg-pr li{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;border-bottom:1px dashed var(--line);font-size:13px}
.wg-pr li:last-child{border-bottom:none}
.wg-pr b{font-family:var(--font-head);font-variant-numeric:tabular-nums;color:var(--red)}

/* ============ HOMEPAGE: sport league carousel + full-standings link ============ */
.sport-leagues{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding:12px 0 4px;scrollbar-width:thin}
.sport-leagues::-webkit-scrollbar{height:5px}
.sport-leagues::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}
.sport-leagues a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--surface);font-family:var(--font-head);font-weight:700;font-size:12.5px;white-space:nowrap;transition:.15s}
.sport-leagues a img{width:22px;height:22px;object-fit:contain}
.sport-leagues a:hover{border-color:var(--red);color:var(--red)}
.std-full-link{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-top:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--red)}
.std-full-link:hover{color:var(--red-deep)}
.std-full-link .icon{width:12px;height:12px}

/* ============ HOMEPAGE quick-service tiles ============ */
/* desktop: in the hero left column under the 1x1 (qlinks--desk);
   mobile: under the super-story (qlinks--mob, hidden on desktop). */
.qlinks{display:grid;gap:10px}
/* desktop instance (in the hero aside, under currency rates): 4-per-row, compact
   tiles, DESKTOP ONLY (≥1081px). the mobile instance (under the super-story)
   shows on small screens. */
.qlinks--desk{display:none}
@media (min-width:1081px){
  .qlinks--desk{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
  .qlinks--desk a{padding:9px 4px;border-radius:10px;gap:6px}
  .qlinks--desk .ql-ic{width:34px;height:34px;border-radius:9px}
  .qlinks--desk .ql-ic .icon{width:16px;height:16px}
  .qlinks--desk .ql-t{font-size:9.5px;line-height:1.3}
}
.qlinks--mob{display:none;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.qlinks a{display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:center;transition:.16s}
.qlinks a:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--shadow)}
.qlinks .ql-ic{width:44px;height:44px;border-radius:12px;background:var(--red-soft);display:flex;align-items:center;justify-content:center}
.qlinks .ql-ic .icon{width:22px;height:22px;color:var(--red)}
.qlinks .ql-t{font-family:var(--font-head);font-weight:700;font-size:9.5px;color:var(--ink);line-height:1.35}

/* ============ MOBILE MENU services grid ============ */
.mp-services{padding:14px 0 4px;border-top:1px solid var(--line);margin-top:8px}
.mp-services-t{display:block;font-family:var(--font-head);font-weight:800;font-size:12px;color:var(--muted);margin-bottom:10px}
.mp-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mp-services-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border:1px solid var(--line);border-radius:10px;font-family:var(--font-head);font-weight:700;font-size:11px;text-align:center;color:var(--ink)}
.mp-services-grid a .icon{width:20px;height:20px;color:var(--red)}

@media (max-width:1080px){
  /* data-page sidebars stack full-width so info-cards/widgets aren't split */
  .article-grid > .sidebar{display:flex;flex-direction:column}
}
@media (max-width:720px){
  .qlinks--desk{display:none}
  .qlinks--mob{display:grid}
  .qlinks a{padding:11px 4px;border-radius:10px}
  .qlinks .ql-ic{width:38px;height:38px}
  .qlinks .ql-t{font-size:10.5px}
  /* every sidebar/aside card spans its full parent width on mobile */
  .info-card,.fx-card,.useful,.widget{width:100%}
  .lead-aside{align-items:stretch}
  .lead-aside>*{flex:0 0 auto;width:100%;height:auto;align-self:stretch}
  .art-ad--lb{max-width:100%!important;margin-inline:0}
}
@media (max-width:420px){
  .qlinks--mob{grid-template-columns:repeat(3,1fr)}
}

/* ---- overlays.css ---- */
/* ============================================================
   Footer · modals · reels viewer · back-to-top
   ============================================================ */

/* --- footer --- */
footer{background:#080A2E;color:#a7abd0;margin-top:48px}
.foot-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1.5fr;gap:34px;
  padding:44px 0 36px;border-top:1px solid rgba(255,255,255,.09)
}
.foot-col h4{color:#fff;font-size:14px;margin-bottom:16px}
.foot-col ul li{margin-bottom:2px}
.foot-col ul li a{display:block;font-size:13px;padding:5px 0;color:#a2a2ab;transition:.15s}
.foot-col ul li a:hover{color:#fff}

/* تابع كل العرب — platform, name and follower count in one row */
.foot-follow ul li a{
  display:flex;align-items:center;gap:9px;padding:6px 0;color:#a2a2ab
}
.foot-follow .icon{width:15px;height:15px;flex-shrink:0;transition:color .15s}
.foot-follow a:hover .icon{color:var(--net,#fff)}
.foot-follow a span{flex:1;min-width:0}
.foot-follow a b{
  color:#6f6f78;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap
}
.foot-follow a:hover b{color:#c9c9d1}

/* newsletter */
.foot-news h4{color:#fff;font-size:15px;margin-bottom:10px}
.foot-news p{font-size:13px;line-height:1.85;color:#8f8f97;max-width:420px}
.foot-news .nl-form{
  display:flex;align-items:center;gap:0;margin-top:18px;max-width:420px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:5px 6px 5px 18px
}
.foot-news .nl-form input{
  flex:1;min-width:0;height:38px;border:none;background:none;outline:none;
  font-family:inherit;font-size:13.5px;color:#f0efec
}
.foot-news .nl-form input::placeholder{color:#6f6f78}
.foot-news .nl-form button{
  height:38px;padding:0 22px;border-radius:999px;background:var(--red);color:#fff;
  border:1px solid var(--red);font-family:var(--font-head);font-weight:800;font-size:13px;
  transition:.2s;line-height:1;flex-shrink:0
}
.foot-news .nl-form button:hover{background:var(--red-deep);border-color:var(--red-deep)}
.foot-news .nl-done{
  display:none;margin-top:14px;max-width:420px;font-size:13px;font-weight:700;color:#fff;
  background:rgba(204,0,0,.18);border:1px solid rgba(204,0,0,.4);border-radius:999px;
  padding:12px 18px;text-align:center
}
.foot-socials{display:flex;gap:16px;margin-top:22px}
.foot-socials a{color:#8f8f97;transition:.15s}
.foot-socials .icon{width:18px;height:18px}
.foot-socials .s-fb:hover{color:var(--fb)}
.foot-socials .s-ig:hover{color:var(--ig)}
.foot-socials .s-tg:hover{color:var(--tg)}
.foot-socials .s-wa:hover{color:var(--wa)}
.foot-socials .s-yt:hover{color:var(--yt)}

/* legal bar */
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.09);padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12px;color:#6f6f78
}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand .logo .brand-mark{width:78px;height:auto;color:#8f8f97;transition:color .15s}
.foot-brand .logo:hover .brand-mark{color:#c9c9d1}
.foot-brand .logo .brand-mark g{fill:currentColor}
.foot-legal{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foot-legal a{color:#8f8f97;transition:.15s}
.foot-legal a:hover{color:#fff}
.foot-legal i{color:#3a3a41;font-style:normal}
.foot-app,.foot-lang{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#f4f4f2;
  font-family:var(--font-head);font-weight:700;font-size:12px;transition:.2s;line-height:1
}
.foot-app:hover,.foot-lang:hover{border-color:var(--red);color:#fff}
.foot-app .icon,.foot-lang .icon{width:15px;height:15px}
.foot-dev-row{border-top:1px solid rgba(255,255,255,.07);padding:14px 0;text-align:center}
.foot-dev{display:inline-flex;align-items:center;gap:8px;color:#5c5c64;font-size:11.5px}
.foot-dev img{height:18px;width:auto;display:block;opacity:.75}
.foot-dev:hover{color:#a2a2ab}
/* --- modals --- */
/* Above the Welcomer creative, which renders at z-index 1040. */
.modal-bg{position:fixed;inset:0;background:rgba(10,10,12,.6);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:1100;padding:20px}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border-radius:4px;width:100%;max-width:400px;padding:28px;position:relative;border-top:4px solid var(--red);animation:pop .22s ease}
@keyframes pop{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal .close{position:absolute;top:14px;left:14px;color:var(--muted);padding:4px;border-radius:4px;transition:.15s}
.modal .close:hover{background:var(--surface-2);color:var(--red)}
.modal h3{font-size:20px;font-weight:800;margin-bottom:4px}
.modal .sub{font-size:12.5px;color:var(--muted);margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.field input{width:100%;border:1px solid var(--line);border-radius:4px;padding:11px 14px;font-family:inherit;font-size:14px;background:var(--surface-2);color:var(--ink);outline:none;transition:.2s}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field textarea,html[data-theme="dark"] .field select{background:var(--input)}
.field input:focus,.field textarea:focus{border-color:var(--red);background:var(--surface);box-shadow:0 0 0 3px var(--red-soft)}
.field textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:11px 14px;font-family:inherit;font-size:14px;background:var(--surface-2);color:var(--ink);outline:none;transition:.2s;min-height:90px;resize:vertical}
.btn-red{display:inline-flex;align-items:center;gap:7px;height:42px;background:var(--red);color:#fff;border-radius:4px;padding:0 22px;font-weight:600;font-size:13.5px;transition:.2s;justify-content:center;line-height:1}
.btn-red:hover{background:var(--red-deep);box-shadow:0 4px 14px rgba(204,0,0,.3)}
.btn-red:active{transform:scale(.98);box-shadow:none}
.modal .btn-red{width:100%;height:46px;margin-top:6px}
.modal .alt{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px}
.modal .alt a{color:var(--red);font-weight:600}

/* --- ticker news popup --- */
.news-modal{max-width:560px;padding:0;overflow:hidden}
.news-modal .nm-head{background:var(--black-block);color:var(--on-black);padding:20px 24px 18px}
.news-modal .nm-head .cat-tag{margin-bottom:10px}
.news-modal .nm-head h3{font-size:19px;font-weight:800;line-height:1.6}
.news-modal .nm-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:#b9b9bf;margin-top:10px;flex-wrap:wrap}
.news-modal .nm-meta .icon{width:13px;height:13px}
.news-modal .nm-body{padding:20px 24px;font-size:14px;line-height:1.9;color:var(--ink-2)}
.news-modal .nm-share{display:flex;align-items:center;gap:9px;padding:0 24px 22px;flex-wrap:wrap}
.news-modal .nm-share span{font-size:12px;color:var(--muted);margin-left:4px}
.news-modal .close{color:#b9b9bf}
.news-modal .close:hover{background:rgba(255,255,255,.12);color:#fff}
.share-b{width:38px;height:38px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .15s}
.share-b:hover{transform:scale(1.1)}
.share-b .icon{width:16px;height:16px}
.share-b.s-fb{background:var(--fb);color:#fff}
.share-b.s-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);color:#fff}
.share-b.s-tg{background:var(--tg);color:#fff}
.share-b.s-wa{background:var(--wa);color:#fff}
.share-copy{width:auto;border-radius:4px;padding:0 16px;gap:7px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);font-size:12.5px}
.share-copy:hover{border-color:var(--red);color:var(--red)}

/* --- reels viewer --- */
.reels-bg{position:fixed;inset:0;background:rgba(8,8,10,.95);z-index:1120;display:none;align-items:center;justify-content:center;gap:18px}
.reels-bg.open{display:flex}
.reel{width:min(430px,90vw);height:min(84vh,760px);background:#131316;border-radius:4px;position:relative;overflow:hidden;animation:pop .22s ease}
/* مواجهة clips are 16:9 — give the popup a wide landscape frame on desktop
   (mobile keeps the tall reel shape above). */
@media (min-width:721px){
  .reel{width:min(960px,92vw);height:auto;aspect-ratio:16/9;max-height:86vh}
}
.reel-view{position:absolute;inset:0;transition:transform .4s cubic-bezier(.22,.8,.3,1);will-change:transform}
.reel .ph-dark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.reel .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.reel .play span{width:64px;height:64px;border-radius:4px;background:var(--red);display:flex;align-items:center;justify-content:center}
.reel .play .icon{width:26px;height:26px;fill:#fff;stroke:none;margin-right:-3px}
.reel-info{position:absolute;bottom:0;right:0;left:0;padding:70px 18px 16px;background:linear-gradient(to top,rgba(0,0,0,.92),transparent);color:#fff;z-index:3}
.reel-info .vcat{position:static;display:inline-block;margin-bottom:8px}
.reel-info h3{font-size:16px;font-weight:800;line-height:1.6;color:#fff}
.reel-info .dur-t{font-size:12px;color:#b9b9bf;margin-top:6px;font-variant-numeric:tabular-nums}
.reel-count{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:3px 11px;border-radius:4px;font-variant-numeric:tabular-nums;z-index:4}
.reel,.reel-player,.reel-player .brid,.reel-player iframe,.reel-player video{border-radius:0}
.reel-player{position:absolute;inset:0;width:100%;height:100%;background:#000;z-index:1}
.reel-player .brid,.reel-player iframe,.reel-player video{position:absolute;inset:0;z-index:1;width:100%!important;height:100%!important}
/* With a Brid player, the info strip moves to the TOP so it never covers the
   player's own controls at the bottom. It stays click-through except for the
   title/open-button. */
.reel-player ~ .reel-info{
  top:0;bottom:auto;padding:52px 18px 44px;
  background:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
  pointer-events:none;
}
.reel-player ~ .reel-info .reel-open,.reel-player ~ .reel-info h3{pointer-events:auto}
.reel-open{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:9px 16px;border-radius:999px;background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;font-size:12.5px}
.reel-open:hover{background:var(--red-deep)}
.reel-open .icon{width:14px;height:14px}
.reels-nav{display:flex;flex-direction:column;gap:10px}
.reels-nav button,.reels-close{width:46px;height:46px;border-radius:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;transition:.15s}
.reels-nav button:hover,.reels-close:hover{background:var(--red);border-color:var(--red)}
.reels-nav button:disabled{opacity:.3;pointer-events:none}
.reels-close{position:fixed;top:18px;left:18px;z-index:1121}
.reels-hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);color:#8f8f97;font-size:11.5px}

/* --- back to top --- */
.to-top{position:fixed;bottom:18px;inset-inline-end:18px;width:44px;height:44px;border-radius:4px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;z-index:90;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 4px 14px rgba(204,0,0,.35)}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--red-deep)}
.to-top .icon{transform:rotate(180deg)}

/* ---- ads.css ---- */
/* ============================================================
   GAM integration — must load LAST so it wins over layout rules.
   Markup contract lives in partials; behaviour in js/kulalarab-ads.js
   ============================================================ */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.genecy-welcomer-ad-cont,
.genecy-welcomer-ad-clipper,
.genecy-welcomer-ad-ad-cont {
  max-width: 100vw !important;
}

.gam-welcomer-wrap {
  position: relative;
  z-index: 120;
  width: 100%;
  background: var(--bg);
}

.gam-welcomer-wrap > .gam-fallback {
  position: relative;
  inset: auto;
  width: min(970px, calc(100% - 32px));
  height: 90px;
  margin: 0 auto;
}

.gam-welcomer-wrap.gam-has-ad > .gam-fallback {
  display: none !important;
}

.gam-slot-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  color: var(--muted);
  /* Every creative except the Welcomer — its host is #gam-welcomer-wrap and
     never receives .gam-slot-box. */
  border-radius: 4px;
}

.gam-slot-box iframe,
.gam-gpt-inner {
  border-radius: 4px;
  overflow: hidden;
}

.gam-slot-box::before {
  content: "إعلان";
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 4;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  color: #6d6d76;
  font-size: 9px;
  line-height: 1.5;
}

/* 1x1 markers: out of the visual flow, but left at their natural position.
 *
 * The reference CSS used `left: -9999px`. In this RTL document that pushes the
 * marker 9999px outside the page box, so documentElement.scrollWidth becomes
 * ~10764 against a 765 client width and the viewport opens on the empty region
 * — a blank page. `overflow-x: clip` on html/body does not rescue it.
 *
 * Collapsing to 1x1 with overflow:hidden hides it just as effectively, keeps
 * the marker exactly where it belongs (better for the IntersectionObserver,
 * per requirement 4) and produces no horizontal overflow (requirement 10).
 * Deliberately no opacity/transform/filter here: those would create a
 * containing block and trap any position:fixed creative the 1x1 unit injects.
 */
.gam-slot-box[data-gam-size="1x1"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  overflow: hidden !important;
  border: 0 !important;
  padding: 0 !important;
}

.gam-slot-box[data-gam-size="1x1"]::before {
  content: none !important;
}

.gam-slot-box iframe {
  display: block;
  margin: auto;
}

.gam-gpt-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.gam-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: #8f0808;
}

.gam-fallback[hidden] {
  display: none;
}

.gam-fallback svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.gam-fallback__content {
  position: relative;
  z-index: 2;
  max-width: 92%;
  padding: 12px;
  font-family: var(--font-head);
}

.gam-fallback__brand {
  display: block;
  margin-bottom: 5px;
  font-size: clamp(12px, 2vw, 18px);
  font-weight: 800;
}

.gam-fallback__title {
  display: block;
  font-size: clamp(11px, 1.5vw, 16px);
  font-weight: 700;
  line-height: 1.55;
}

.gam-fallback__size {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  opacity: .82;
}

.gam-fallback__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

/* 320x50 at the foot of the breaking-news popup, centred with its own gap. */
.news-modal .nm-ad {
  display: flex;
  justify-content: center;
  padding: 0 24px 22px;
}

/* Manually-driven popup ad host (priority chain 1x1 → 320x100 → 320x50). */
.gam-modal-ad {
  width: 100%;
  max-width: 320px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.gam-modal-ad .gam-gpt-inner { margin-inline: auto; }

/* Fixed side rails are disabled for now (markup removed from welcomer.php and
   initRails() early-returns). This hard hide is a safety net so any cached JS
   that still injects a rail cannot make it visible. */
.gam-rail {
  display: none !important;
}

.gam-rail--left {
  left: 0 !important;
  right: auto !important;
}

.gam-rail--right {
  right: 0 !important;
  left: auto !important;
}

.gam-rail.is-visible {
  display: flex;
}

.gam-inline-300x600 {
  width: 300px;
  height: 600px;
  max-width: 100%;
  margin-inline: auto;
}

.gam-inline-728x90 {
  width: min(728px, 100%);
  height: 90px;
  margin-inline: auto;
}

/* 44px matches the section rhythm (.sec-head / .featured-cat / .sport-sec all
   use margin-top:44px). Because adjacent margins collapse to the larger value,
   this yields an identical 44px gap above and below the leaderboard. */
.gam-inline-970x250 {
  width: min(970px, 100%);
  height: 250px;
  margin: 44px auto;
}

.gam-inline-320x50 {
  width: min(320px, 100%);
  height: 50px;
  margin-inline: auto;
}

/* Only the leaderboard instance needs the vertical gap — the copy inside the
   ticker modal is spaced by .nm-ad instead. */
.gam-only-mobile.gam-inline-320x50 {
  margin-block: 28px;
}

/* Breakpoint pair for the leaderboards.
 *
 * Only the visible member is ever requested: a display:none element has no
 * box, so the IntersectionObserver never fires for it and no GPT slot is
 * defined. That gives one unit per breakpoint without a size mapping.
 *
 * 1024px is the smallest viewport where 970px still fits inside .container
 * (min(1280, vw) - 40 padding), so the wide unit can never cause a horizontal
 * scrollbar.
 */
.gam-only-desktop { display: none; }
.gam-only-mobile { display: flex; }

@media (min-width: 1024px) {
  .gam-only-desktop { display: flex; }
  .gam-only-mobile { display: none; }
}

/* Reserved square above خدمات سريعة. Requests the 1x1 parall_resp unit, but
   keeps its 500×500 footprint, so the hero column keeps its original shape. */
.gam-inline-500x500 {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

@media (max-width: 1080px) {
  .gam-inline-500x500 {
    max-width: none;
  }
}

/* Mobile: drop the fixed square so a taller creative isn't clipped by the box's
   overflow:hidden — let the ad set its own height. (Defined here, not in
   responsive.css, because ads.css loads later and would otherwise override it.) */
@media (max-width: 720px) {
  .gam-inline-500x500 {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 1199px) {
  .gam-rail {
    display: none !important;
  }
}

/* ============ MOBILE STICKY BOTTOM ANCHOR (320x50) ============ */
.gam-sticky-bottom{display:none}
.gam-sticky-bottom.is-closed{display:none!important}
@media (max-width:720px){
  .gam-sticky-bottom{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    min-height:54px;padding:3px 0;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -2px 12px rgba(0,0,0,.14);
  }
  .gam-sticky-bottom .gam-inline-320x50{margin:0 auto}
  .gam-sticky-close{
    position:absolute;top:-13px;inset-inline-end:10px;width:26px;height:26px;border-radius:50%;
    background:var(--surface);border:1px solid var(--line);color:var(--muted);
    display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
    box-shadow:0 1px 5px rgba(0,0,0,.18)
  }
  .gam-sticky-close:active{transform:scale(.92)}
  /* keep the back-to-top button clear of the sticky bar */
  .to-top{bottom:76px}
}

/* ============ FLOATING LEFT 120x600 (desktop) ============ */
.gam-inline-120x600{width:120px;height:600px;max-width:100%;margin:0}
.gam-float-left,.gam-float-right{display:none}
@media (min-width:1400px){
  .gam-float-left{
    display:block;position:fixed;left:0;top:var(--gam-rail-top,0px);
    z-index:80;transition:top .18s ease;
  }
  .gam-float-right{
    display:block;position:fixed;right:0;top:var(--gam-rail-top,0px);
    z-index:80;transition:top .18s ease;
  }
}

/* ---- a11y.css ---- */
/* ============================================================
   إمكانية الوصول — accessibility toolbar
   Self-contained, no external library. Settings are applied as
   data-a11y-* attributes on <html> and persisted in localStorage.
   The widget itself is appended to <html> (outside <body>) so page
   zoom / grayscale filters never touch its own controls.
   ============================================================ */

/* ---- page text/zoom scale (default 1 = no-op) ---- */
body { zoom: var(--ka-a11y-zoom, 1); }

/* ---- launcher button ---- */
.a11y-widget { direction: rtl; }
.a11y-fab {
  position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 2147483000;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: #1a4fd6; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(26, 79, 214, .45); transition: transform .15s, background .15s;
}
.a11y-fab:hover { background: #1442b8; transform: scale(1.06); }
.a11y-fab:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
.a11y-fab svg { width: 26px; height: 26px; fill: currentColor; }

/* ---- panel ---- */
.a11y-panel {
  position: fixed; bottom: 74px; inset-inline-start: 18px; z-index: 2147483000;
  width: 300px; max-width: calc(100vw - 36px);
  background: #fff; color: #16181d; border: 1px solid #d8dae2; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10, 15, 40, .28); padding: 14px; font-family: inherit;
  max-height: calc(100vh - 100px); overflow: auto;
}
.a11y-panel[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  .a11y-panel { background: #1b1d24; color: #eef0f6; border-color: #333744; }
}
html[data-theme="dark"] .a11y-panel { background: #1b1d24; color: #eef0f6; border-color: #333744; }
html[data-theme="dark"] .a11y-size { border-color: #333744; }
html[data-theme="dark"] .a11y-stepper button { background: #262933; border-color: #3a3e4b; }
html[data-theme="dark"] .a11y-opt { background: #23262f; border-color: #333744; }
html[data-theme="dark"] .a11y-reset { background: #2b2f3b; color: #eef0f6; }

.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.a11y-head b { font-size: 15px; font-weight: 800; }
.a11y-close { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; padding: 2px 6px; border-radius: 6px; }
.a11y-close:hover { background: rgba(0, 0, 0, .08); }

.a11y-size { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid #e2e4ec; border-radius: 10px; margin-bottom: 12px; }
@media (prefers-color-scheme: dark) { .a11y-size { border-color: #333744; } }
.a11y-size > span { font-size: 13.5px; font-weight: 700; }
.a11y-stepper { display: flex; align-items: center; gap: 6px; }
.a11y-stepper button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #cdd0da; background: #f4f5fa; color: inherit; cursor: pointer; font-weight: 800; }
.a11y-stepper button:hover { background: #e7e9f4; border-color: #1a4fd6; }
@media (prefers-color-scheme: dark) { .a11y-stepper button { background: #262933; border-color: #3a3e4b; } }
.a11y-size-val { min-width: 46px; text-align: center; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }

.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 8px; border: 1px solid #e2e4ec; border-radius: 10px; background: #fafbfe;
  color: inherit; cursor: pointer; font-size: 12px; font-weight: 700; font-family: inherit; transition: .12s;
}
.a11y-opt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.a11y-opt:hover { border-color: #1a4fd6; background: #eef2fd; }
.a11y-opt[aria-pressed="true"] { background: #1a4fd6; color: #fff; border-color: #1a4fd6; }
@media (prefers-color-scheme: dark) { .a11y-opt { background: #23262f; border-color: #333744; } .a11y-opt:hover { background: #2b2f3b; } }

.a11y-reset { width: 100%; margin-top: 12px; padding: 11px; border: 0; border-radius: 10px; background: #eceef4; color: #16181d; font-weight: 800; font-family: inherit; cursor: pointer; font-size: 13px; }
.a11y-reset:hover { background: #e0e3ec; }
@media (prefers-color-scheme: dark) { .a11y-reset { background: #2b2f3b; color: #eef0f6; } }

/* ============================================================
   Applied modes (on <html>)
   ============================================================ */

/* high contrast */
html[data-a11y-contrast="1"] body,
html[data-a11y-contrast="1"] .super,
html[data-a11y-contrast="1"] .masthead,
html[data-a11y-contrast="1"] section,
html[data-a11y-contrast="1"] article,
html[data-a11y-contrast="1"] aside,
html[data-a11y-contrast="1"] footer,
html[data-a11y-contrast="1"] .widget,
html[data-a11y-contrast="1"] header { background: #000 !important; color: #fff !important; }
html[data-a11y-contrast="1"] h1, html[data-a11y-contrast="1"] h2, html[data-a11y-contrast="1"] h3,
html[data-a11y-contrast="1"] p, html[data-a11y-contrast="1"] span, html[data-a11y-contrast="1"] b,
html[data-a11y-contrast="1"] time, html[data-a11y-contrast="1"] small, html[data-a11y-contrast="1"] li,
html[data-a11y-contrast="1"] td, html[data-a11y-contrast="1"] th { color: #fff !important; background: transparent !important; }
html[data-a11y-contrast="1"] a, html[data-a11y-contrast="1"] a * { color: #ffe600 !important; }
html[data-a11y-contrast="1"] .cat-tag, html[data-a11y-contrast="1"] .badge { background: #ffe600 !important; color: #000 !important; }
html[data-a11y-contrast="1"] img { filter: contrast(1.05); }

/* readable font */
html[data-a11y-readable="1"] body,
html[data-a11y-readable="1"] body * { font-family: Tahoma, "Segoe UI", Arial, sans-serif !important; }
html[data-a11y-readable="1"] p, html[data-a11y-readable="1"] li, html[data-a11y-readable="1"] .excerpt { font-weight: 500 !important; }

/* highlight links */
html[data-a11y-links="1"] a { text-decoration: underline !important; text-underline-offset: 2px; outline: 2px solid rgba(26, 79, 214, .55); outline-offset: 1px; border-radius: 2px; }

/* increased spacing */
html[data-a11y-spacing="1"] body { letter-spacing: .04em !important; word-spacing: .1em !important; }
html[data-a11y-spacing="1"] p, html[data-a11y-spacing="1"] li,
html[data-a11y-spacing="1"] h1, html[data-a11y-spacing="1"] h2, html[data-a11y-spacing="1"] h3 { line-height: 2 !important; }

/* grayscale (body only, so the widget keeps its colour) */
html[data-a11y-grayscale="1"] body { filter: grayscale(1); }

/* stop animations */
html[data-a11y-motion="1"] *, html[data-a11y-motion="1"] *::before, html[data-a11y-motion="1"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* big cursor */
html[data-a11y-cursor="1"] body,
html[data-a11y-cursor="1"] body * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M4 2l10 24 3.5-9.5L27 13z' fill='%23fff' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}

@media (max-width: 720px) {
  .a11y-fab { bottom: 14px; inset-inline-start: 14px; width: 42px; height: 42px; }
  .a11y-panel { bottom: 64px; inset-inline-start: 14px; }
}

/* ---- mobile-scale.css ---- */
/* ============================================================
   AUTO-GENERATED — do NOT edit by hand.
   Enlarges every px font-size by 10% on mobile (<=720px).
   Regenerate with scratchpad/genscale.py after changing font sizes.
   Emitted largest-range-first so narrower breakpoints keep winning.
   ============================================================ */
@media (max-width:720px){
  body{font-size:17.6px!important}
  .logo .brand-txt b{font-size:24.2px!important}
  .logo .brand-txt>span{font-size:11px!important}
  .badge{font-size:12.7px!important}
  .cat-tag{font-size:12.1px!important}
  .meta{font-size:12.7px!important}
  .sec-head h2{font-size:19.8px!important}
  .sec-head .more{font-size:13.8px!important}
  .sub-links a{font-size:13.2px!important}
  .story-body h3{font-size:16px!important}
  .col-title{font-size:15.4px!important}
  .empty-note{font-size:13.8px!important}
  .crumbs{font-size:13.2px!important}
  .crumbs .sep{font-size:12.1px!important}
  .super{font-size:12.1px!important}
  .btn-ghost{font-size:13.2px!important}
  .city-select__btn{font-size:14.3px!important}
  .city-select__search input{font-size:14.9px!important}
  .city-select__list a{font-size:13.8px!important}
  .city-select__empty{font-size:14.3px!important}
  .elx-btn{font-size:14.3px!important}
  .search-box input{font-size:14.3px!important}
  .sp-label{font-size:12.1px!important}
  .sp-chip{font-size:13.8px!important}
  .sp-row{font-size:14.9px!important}
  .sp-row .n{font-size:13.2px!important}
  .sp-avatar{font-size:12.1px!important}
  .sp-row small{font-size:12.7px!important}
  .sp-empty{font-size:14.3px!important}
  .app-btn small{font-size:9.9px!important}
  .app-btn b{font-size:13.2px!important}
  .btn-send{font-size:13.8px!important}
  .nav-link{font-size:16px!important}
  .tk-title{font-size:14.9px!important}
  .tk-time{font-size:12.7px!important}
  .ticker-more{font-size:12.7px!important}
  .super-story .ss-date{font-size:13.2px!important}
  .super-story h1{font-size:23.1px!important}
  .super-story .excerpt{font-size:14.9px!important}
  .super-story .ss-live{font-size:13.8px!important}
  .hero-lead .hl-kick{font-size:12.7px!important}
  .hero-lead h1{font-size:23.1px!important}
  .hero-lead .excerpt{font-size:14.9px!important}
  .hero-sec h3{font-size:17.1px!important}
  .useful h4{font-size:14.9px!important}
  .u-tile{font-size:13.2px!important}
  .u-tile small{font-size:11.6px!important}
  .srow h3{font-size:14.3px!important}
  .writers .wr-by{font-size:13.2px!important}
  .writers p{font-size:13.8px!important}
  .picks-note{font-size:13.2px!important}
  .pick-txt h3{font-size:14.9px!important}
  .pick-txt .by{font-size:12.1px!important}
  .pick-tag{font-size:11.6px!important}
  .pick-big h3{font-size:19.8px!important}
  .fc-head h2{font-size:22px!important}
  .fc-head .fc-badge{font-size:12.1px!important}
  .fc-head .fc-links a{font-size:12.7px!important}
  .fc-all{font-size:13.8px!important}
  .fc-lead h3{font-size:18.7px!important}
  .fc-lead .excerpt{font-size:14.3px!important}
  .fc-item p{font-size:14.3px!important}
  .fc-list a{font-size:14.3px!important}
  .elex-hero-txt h2 a{font-size:22px!important}
  .elex-hero-txt p{font-size:14.9px!important}
  .elex-tag{font-size:12.7px!important}
  .elex-count .lbl{font-size:12.7px!important}
  .elex-count .box b{font-size:23.1px!important}
  .elex-count .box span{font-size:11px!important}
  .elex-flash .fl-flag{font-size:12.1px!important}
  .elex-flash h3{font-size:18.2px!important}
  .elex-flash .excerpt{font-size:13.8px!important}
  .elex-flash .fl-btn{font-size:13.8px!important}
  .elex-stat b{font-size:20.9px!important}
  .elex-stat .lbl{font-size:12.7px!important}
  .elex-card .card-head h3{font-size:16.5px!important}
  .elex-card .card-head .more{font-size:13.2px!important}
  .elex-gauge .g-center b{font-size:33px!important}
  .elex-gauge .g-center span{font-size:12.1px!important}
  .seatbar span{font-size:12.1px!important}
  .elex-legend{font-size:13.2px!important}
  .elex-note{font-size:11.6px!important}
  .elex-poll .poll-q{font-size:16px!important}
  .elex-poll .poll-opts.yesno .poll-opt{font-size:16.5px!important}
  .elex-poll .poll-opts.yesno .poll-opt .lbl::before{font-size:14.3px!important}
  .elex-tl li{font-size:13.8px!important}
  .elex-tl time{font-size:13.8px!important}
  .elex-cta{font-size:14.3px!important}
  .elex-mini p{font-size:14.3px!important}
  .elex-dates li{font-size:13.8px!important}
  .elex-dates time{font-size:13.2px!important}
  .wa-txt h2{font-size:24.2px!important}
  .wa-txt p{font-size:14.9px!important}
  .wa-btn{font-size:15.4px!important}
  .mj-logo span{font-size:35.2px!important}
  .mj-logo small{font-size:13.8px!important}
  .mj-desc{font-size:13.8px!important}
  .mj-all{font-size:14.3px!important}
  .mj-ep{font-size:12.1px!important}
  .mj-card .dur{font-size:11.6px!important}
  .mj-info b{font-size:15.4px!important}
  .mj-info small{font-size:12.1px!important}
  .sport-news .rowi p{font-size:14.3px!important}
  .std-dd-btn{font-size:14.3px!important}
  .std-dd-opt{font-size:14.3px!important}
  .standings table{font-size:13.8px!important}
  .standings th{font-size:12.7px!important}
  .standings .pos{font-size:12.1px!important}
  .standings-foot{font-size:11.6px!important}
  .cat-block .row p{font-size:14.3px!important}
  .cat-sub{font-size:13.2px!important}
  .fx-card .fx-head{font-size:14.9px!important}
  .fx-card .fx-head small{font-size:11.6px!important}
  .fx-card table{font-size:13.8px!important}
  .fx-card td:last-child{font-size:12.7px!important}
  .latest a{font-size:14.3px!important}
  .latest time{font-size:12.7px!important}
  .newsletter h2{font-size:24.2px!important}
  .newsletter p{font-size:14.3px!important}
  .nl-form input{font-size:15.4px!important}
  .nl-form button{font-size:15.4px!important}
  .nl-note{font-size:12.1px!important}
  .nl-done{font-size:15.4px!important}
  .ticker-badge{font-size:13.2px!important}
  .mp-title{font-size:17.6px!important}
  .widget-head{font-size:16.5px!important}
  .wx-now .t{font-size:41.8px!important}
  .wx-now .d{font-size:13.2px!important}
  .wx-now select{font-size:13.8px!important}
  .wx-week .day{font-size:11.6px!important}
  .wx-week .dg{font-size:13.2px!important}
  .wx-week .dl{font-size:11.6px!important}
  .wx-cities{font-size:13.8px!important}
  .wx-note{font-size:11.6px!important}
  .top-list .rank{font-size:24.2px!important}
  .top-list p{font-size:14.3px!important}
  .deaths p{font-size:14.3px!important}
  .deaths small{font-size:12.1px!important}
  .deaths .more-link{font-size:13.2px!important}
  .poll-q{font-size:15.4px!important}
  .poll-opt{font-size:14.3px!important}
  .poll-opt.img span{font-size:13.2px!important}
  .poll-foot{font-size:12.1px!important}
  .horo-sign .g{font-size:22px!important}
  .horo-sign b{font-size:13.2px!important}
  .horo-sign small{font-size:10.5px!important}
  .horo-read .hr-g{font-size:37.4px!important}
  .horo-read h3{font-size:18.7px!important}
  .horo-read .hr-d{font-size:12.1px!important}
  .horo-read p{font-size:14.3px!important}
  .horo-rates span{font-size:12.1px!important}
  .wg-more{font-size:13.2px!important}
  .wg-std-tbl{font-size:13.8px!important}
  .wg-std-tbl .pos{font-size:12.1px!important}
  .wg-lt-meta{font-size:12.7px!important}
  .wg-ball{font-size:13.8px!important}
  .wg-pr li{font-size:14.3px!important}
  .sport-leagues a{font-size:13.8px!important}
  .std-full-link{font-size:13.8px!important}
  .qlinks .ql-t{font-size:11.6px!important}
  .mp-services-t{font-size:13.2px!important}
  .mp-services-grid a{font-size:12.1px!important}
  .foot-col h4{font-size:15.4px!important}
  .foot-col ul li a{font-size:14.3px!important}
  .foot-follow a b{font-size:12.7px!important}
  .foot-news h4{font-size:16.5px!important}
  .foot-news p{font-size:14.3px!important}
  .foot-news .nl-form input{font-size:14.9px!important}
  .foot-news .nl-form button{font-size:14.3px!important}
  .foot-news .nl-done{font-size:14.3px!important}
  .foot-bottom{font-size:13.2px!important}
  .foot-app,.foot-lang{font-size:13.2px!important}
  .foot-dev{font-size:12.7px!important}
  .modal h3{font-size:22px!important}
  .modal .sub{font-size:13.8px!important}
  .field label{font-size:13.8px!important}
  .field input{font-size:15.4px!important}
  .field textarea{font-size:15.4px!important}
  .btn-red{font-size:14.9px!important}
  .modal .alt{font-size:13.8px!important}
  .news-modal .nm-head h3{font-size:20.9px!important}
  .news-modal .nm-meta{font-size:13.2px!important}
  .news-modal .nm-body{font-size:15.4px!important}
  .news-modal .nm-share span{font-size:13.2px!important}
  .share-copy{font-size:13.8px!important}
  .reel-info h3{font-size:17.6px!important}
  .reel-info .dur-t{font-size:13.2px!important}
  .reel-count{font-size:13.2px!important}
  .reel-open{font-size:13.8px!important}
  .reels-hint{font-size:12.7px!important}
  .gam-slot-box::before{font-size:9.9px!important}
  .gam-fallback__size{font-size:11px!important}
  .gam-fallback__cta{font-size:11px!important}
  .gam-sticky-close{font-size:19.8px!important}
  .a11y-head b{font-size:16.5px!important}
  .a11y-close{font-size:24.2px!important}
  .a11y-size > span{font-size:14.9px!important}
  .a11y-size-val{font-size:14.3px!important}
  .a11y-opt{font-size:13.2px!important}
  .a11y-reset{font-size:14.3px!important}
  .art-head h1{font-size:23.1px!important}
  .art-sub{font-size:16.5px!important}
  .art-meta{font-size:13.2px!important}
  .art-meta .sp-avatar{font-size:14.3px!important}
  .art-author b{font-size:14.9px!important}
  .art-share>span{font-size:13.2px!important}
  .rx-head .rx-label{font-size:16.5px!important}
  .rx-head .rx-total{font-size:13.2px!important}
  .rx-btn .rx-emoji{font-size:29.7px!important}
  .rx-btn .rx-name{font-size:13.2px!important}
  .rx-btn .rx-count{font-size:13.8px!important}
  .rx-btn.is-mine::after{font-size:11px!important}
  .cta-wa .cta-txt b{font-size:16px!important}
  .cta-wa .cta-txt small{font-size:13.2px!important}
  .cta-wa .cta-go{font-size:13.8px!important}
  .cta-mini b{font-size:14.3px!important}
  .cta-mini small{font-size:12.7px!important}
  .follow-grid .fg-txt b{font-size:13.8px!important}
  .follow-grid .fg-txt small{font-size:12.1px!important}
  .c-empty{font-size:14.3px!important}
  .lb-close{font-size:33px!important}
  .lb-counter{font-size:14.3px!important}
  .lb-nav{font-size:33px!important}
  .art-fig figcaption{font-size:12.7px!important}
  .art-fontbar .af-label{font-size:13.2px!important}
  .af-btn small{font-size:12.1px!important}
  .af-btn.af-reset{font-size:14.3px!important}
  .art-body{font-size:17.1px!important}
  .art-body h2{font-size:20.9px!important}
  .art-body h3{font-size:18.7px!important}
  .art-body blockquote{font-size:16.5px!important}
  .art-body blockquote footer{font-size:13.2px!important}
  .read-also b{font-size:12.7px!important}
  .read-also a{font-size:15.4px!important}
  .art-tags a{font-size:12.7px!important}
  .author-box .sp-avatar{font-size:17.6px!important}
  .author-box b{font-size:16px!important}
  .author-box p{font-size:13.8px!important}
  .author-box .fol{font-size:13.8px!important}
  .art-nav small{font-size:12.1px!important}
  .art-nav b{font-size:14.3px!important}
  .comments .c-head{font-size:17.6px!important}
  .comments .c-head span{font-size:13.2px!important}
  .comment-form label{font-size:13.8px!important}
  .comment-form input,.comment-form textarea{font-size:15.4px!important}
  .comment b{font-size:14.3px!important}
  .comment time{font-size:12.1px!important}
  .comment p{font-size:14.9px!important}
  .comment .c-like{font-size:12.7px!important}
  .c-note{font-size:12.7px!important}
  .rel-card h3{font-size:15.4px!important}
  .cb-kicker{font-size:12.1px!important}
  .cat-banner h1{font-size:26.4px!important}
  .cb-count{font-size:13.2px!important}
  .cat-banner .cb-desc{font-size:14.3px!important}
  .cb-upd{font-size:12.1px!important}
  .cat-hero .parent{font-size:13.2px!important}
  .cat-hero h1{font-size:28.6px!important}
  .sort-tab{font-size:13.8px!important}
  .list-tools .count{font-size:13.2px!important}
  .lead-story h2{font-size:22px!important}
  .lead-story .excerpt{font-size:14.3px!important}
  .nrow h3{font-size:14.9px!important}
  .nrow .excerpt{font-size:13.8px!important}
  .scb-head h2{font-size:17.1px!important}
  .scb-head small{font-size:11.6px!important}
  .scb-head .more{font-size:12.7px!important}
  .scb-lead b{font-size:14.9px!important}
  .scb-list a{font-size:13.8px!important}
  .scb-list time{font-size:11.6px!important}
  .pager a,.pager span.cur,.pager span.dots{font-size:14.3px!important}
  .city-banner h1{font-size:26.4px!important}
  .city-banner .cb-desc{font-size:14.3px!important}
  .city-facts span{font-size:12.7px!important}
  .city-wx .t{font-size:33px!important}
  .city-wx .d{font-size:12.7px!important}
  .cwx-now .t{font-size:37.4px!important}
  .cwx-now .d{font-size:13.2px!important}
  .cwx-week .wd{font-size:11px!important}
  .cwx-week .dg{font-size:13.2px!important}
  .cwx-week .dl{font-size:11.6px!important}
  .cwx-more{font-size:13.2px!important}
  .search-page-form input{font-size:15.4px!important}
  .search-page-form button{font-size:14.3px!important}
  .search-count{font-size:13.8px!important}
  .wxp-head h1{font-size:25.3px!important}
  .wxp-head .upd{font-size:12.7px!important}
  .city-chips a{font-size:13.8px!important}
  .wxn-t{font-size:48.4px!important}
  .wxn-city{font-size:20.9px!important}
  .wxn-cond{font-size:14.3px!important}
  .wxn-feels{font-size:12.7px!important}
  .wxn-stats{font-size:13.2px!important}
  .wxn-stats span{font-size:11.6px!important}
  .wxn-stats b{font-size:16.5px!important}
  .wxh time{font-size:12.1px!important}
  .wxh b{font-size:16.5px!important}
  .wxh small{font-size:11px!important}
  .wxw{font-size:14.3px!important}
  .wx-chart-card .sub{font-size:12.7px!important}
  .wxc text{font-size:12.1px!important}
  .wxt b{font-size:14.3px!important}
  .wxt span{font-size:16.5px!important}
  .sun-card h3{font-size:15.4px!important}
  .sun-row{font-size:13.8px!important}
  .tk-live{font-size:14.3px!important}
  .tk-banner h1{font-size:23.1px!important}
  .tk-banner p{font-size:13.8px!important}
  .tk-upd{font-size:12.7px!important}
  .tl-day{font-size:13.8px!important}
  .tl-time{font-size:14.3px!important}
  .tl-cat{font-size:11.6px!important}
  .tl-card h3{font-size:16px!important}
  .tl-card .excerpt{font-size:13.8px!important}
  .tl-foot a{font-size:12.7px!important}
  .tl-more a{font-size:14.9px!important}
  .hr-head h1{font-size:25.3px!important}
  .hr-head .upd{font-size:12.7px!important}
  .zo-nav button .g{font-size:20.9px!important}
  .zo-nav button b{font-size:12.1px!important}
  .zf-glyph{font-size:37.4px!important}
  .zf-top h2{font-size:27.5px!important}
  .zf-top small{font-size:13.2px!important}
  .zo-feat .txt{font-size:15.4px!important}
  .zfb small{font-size:12.7px!important}
  .zo-card .zc-top .g{font-size:24.2px!important}
  .zo-card .zc-top b{font-size:16.5px!important}
  .zo-card .zc-top small{font-size:11px!important}
  .zo-card p{font-size:13.8px!important}
  .zo-card .zc-more{font-size:12.7px!important}
  .compat select{font-size:13.8px!important}
  .compat-res b{font-size:33px!important}
  .compat-res p{font-size:13.2px!important}
  .mag-head .kick{font-size:13.2px!important}
  .mag-head h1{font-size:41.8px!important}
  .mag-head .tag{font-size:14.9px!important}
  .mag-head .issue{font-size:12.1px!important}
  .mag-chips button{font-size:13.8px!important}
  .mg-tag{font-size:11.6px!important}
  .mg-card h3{font-size:16.5px!important}
  .mg-card.big h3{font-size:19.8px!important}
  .mg-card .excerpt{font-size:13.8px!important}
  .mg-read{font-size:11.6px!important}
  .mg-op .sp-avatar{font-size:13.2px!important}
  .mg-op .who b{font-size:13.2px!important}
  .mg-op .who small{font-size:11.6px!important}
  .mg-op h3{font-size:17.6px!important}
  .mg-op .excerpt{font-size:13.8px!important}
  .mg-quote .qm{font-size:59.4px!important}
  .mg-quote p{font-size:18.2px!important}
  .mg-quote .by{font-size:12.7px!important}
  .mg-video .dur{font-size:11.6px!important}
  .mg-video .vt{font-size:14.9px!important}
  .mag-more a,.mag-more button{font-size:14.9px!important}
  .pg-head h1{font-size:25.3px!important}
  .pg-head .upd{font-size:12.7px!important}
  .pr-top h2{font-size:22px!important}
  .pr-top small{font-size:12.7px!important}
  .pr-next small{font-size:11.6px!important}
  .pr-next b{font-size:26.4px!important}
  .prt small{font-size:12.1px!important}
  .prt b{font-size:17.6px!important}
  .prt.next::after{font-size:9.9px!important}
  .pr-month table{font-size:12.7px!important}
  .pr-month th{font-size:12.1px!important}
  .info-card h3{font-size:15.4px!important}
  .info-row{font-size:13.8px!important}
  .pr-month td:first-child,.pr-month th:first-child{font-size:12.1px!important}
  .lg-chip b{font-size:11.6px!important}
  .std-card-head h2{font-size:19.8px!important}
  .std-card-head .std-season{font-size:13.2px!important}
  .std-full{font-size:13.8px!important}
  .std-full th{font-size:12.7px!important}
  .std-full .pos{font-size:12.7px!important}
  .std-legend{font-size:12.7px!important}
  .lg-row{font-size:14.3px!important}
  .lt-tabs button{font-size:14.3px!important}
  .lt-top h2{font-size:20.9px!important}
  .lt-top small{font-size:12.7px!important}
  .lt-jack small{font-size:11.6px!important}
  .lt-jack b{font-size:24.2px!important}
  .ball{font-size:17.6px!important}
  .balls .plus{font-size:22px!important}
  .pcard{font-size:20.9px!important}
  .pcard span{font-size:24.2px!important}
  .pcard small{font-size:11px!important}
  .lt-nums-777 .ball{font-size:17.6px!important}
  .chk p.hint{font-size:13.2px!important}
  .num-grid button{font-size:14.3px!important}
  .chk-row label{font-size:13.8px!important}
  .chk-row select{font-size:14.3px!important}
  .chk-row .btn-red{font-size:14.9px!important}
  .chk-row .clear{font-size:13.2px!important}
  .chk-res{font-size:14.9px!important}
  .hist-row .d{font-size:13.2px!important}
  .hist-row .d b{font-size:14.3px!important}
  .hist-row .ball{font-size:14.9px!important}
  .hist-row .pcard{font-size:14.3px!important}
  .hist-row .pcard span{font-size:15.4px!important}
  .hc h3{font-size:14.9px!important}
  .hc .ball{font-size:16px!important}
  .next-card small{font-size:12.1px!important}
  .next-card .cnt{font-size:29.7px!important}
  .next-card b{font-size:16.5px!important}
  .resp{font-size:12.1px!important}
}
@media (max-width:600px){
  .rx-head .rx-label{font-size:14.9px!important}
  .rx-btn .rx-emoji{font-size:25.3px!important}
  .rx-btn .rx-name{font-size:11.6px!important}
  .rx-btn .rx-count{font-size:12.7px!important}
  .rx-btn.is-mine::after{font-size:9.9px!important}
  .lb-nav{font-size:26.4px!important}
  .lb-close{font-size:28.6px!important}
}
@media (max-width:400px){
  .app-btn b{font-size:12.7px!important}
  .btn-send{font-size:12.7px!important}
  .pr-month table{font-size:11.6px!important}
}
@media (max-width:360px){
  .rx-btn .rx-name{font-size:10.5px!important}
}