/*! ═══════════════════════════════════════════════════════════════════════════
   Findex News Runtime Pro — MOBILE LAYER (clean rebuild)
   File: assets/fnrp-mobile.css
   ─────────────────────────────────────────────────────────────────────────────
   PURPOSE
   A single, coherent mobile stylesheet that replaces the scattered, conflicting
   mobile patches that accumulated across versions (multiple @media blocks at the
   same breakpoints fighting each other with !important). This file is loaded
   LAST, so on equal specificity it wins. It is purely presentational — no JS,
   no DOM changes, no color/brand changes. Remove the single enqueue line in
   findex-news-runtime-pro.php to roll back instantly.

   BREAKPOINT SYSTEM (one consistent ladder, mobile-first overrides)
     ≤ 1024px  → tablet: layout becomes single column
     ≤ 768px   → large phone / small tablet: header compaction begins
     ≤ 560px   → phone: full mobile treatment (the main target)
     ≤ 380px   → small phone: tightest spacing
   All rules are scoped under #fnrp-root (or html.fnrp-active) to avoid leaking
   into the host WordPress theme.

   DESIGN GOALS (professional, smooth, first-impression-friendly)
     • Nothing clipped: header clock, price ticker, market tabs all readable.
     • One clear reading column; generous tap targets (≥44px where it matters).
     • Sidebar widgets become full-width, single-column, never truncated.
     • Calm vertical rhythm; consistent gutters (16px → 12px on tiny screens).
     • Horizontal rails (tabs, ticker) scroll cleanly with subtle edge fades.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   0. GLOBAL SAFETY — never allow sideways scroll on the document.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  html.fnrp-active,
  body.fnrp-active { overflow-x: hidden; }
  #fnrp-root,
  #fnrp-root #fnrp-body { max-width: 100vw; }
  /* Consistent outer gutter token for the whole mobile layer */
  #fnrp-root { --fnrp-m-gutter: 16px; }
}
@media (max-width: 380px) {
  #fnrp-root { --fnrp-m-gutter: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. LAYOUT — collapse the two-column grid into one readable column.
   The desktop grid is `1fr 320px`. Below 1024 we go single column and let the
   sidebar flow underneath the news stream (the JS already relocates the
   watchlist/chart into mobile slots above the body; the remaining sidebar
   cards — gainers/losers/IPOs/central banks — stack below).
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #fnrp-root #fnrp-body,
  #fnrp-root .fn-body {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 var(--fnrp-m-gutter);
    margin-top: 14px;
  }
  #fnrp-root .fn-sidebar {
    position: static;            /* drop the sticky desktop behaviour */
    top: auto;
    width: 100%;
    gap: 14px;
  }
  #fnrp-root .fn-stream { min-width: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. HEADER — the worst offender on mobile. Rebuild as a clean 2-zone bar:
   [ logo ........................................ meta cluster ]
   The desktop search box is already hidden ≤768; we tame the meta cluster so
   the clock is never clipped, and we hide the lowest-value chrome on phones.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #fnrp-root .fh-bar {
    grid-template-columns: 1fr auto;   /* logo | meta */
    gap: 10px;
    padding: 0 var(--fnrp-m-gutter);
    height: 54px;
  }
  #fnrp-root .fh-search-w { display: none; }   /* search collapses (kept for ≥769) */
  #fnrp-root .fh-meta { gap: 10px; flex-wrap: nowrap; }
  /* The ⌘K hint and any keyboard affordance make no sense on touch */
  #fnrp-root .fh-kbd { display: none; }
}

@media (max-width: 560px) {
  #fnrp-root .fh-bar { height: 52px; gap: 8px; }
  /* Logo: keep the mark + name, trim the ·markets tail's weight so it never
     pushes the meta cluster off-screen. */
  #fnrp-root .fh-logo { font-size: 17px; }
  #fnrp-root .fh-logo-tail { font-size: 13px; }
  /* Meta cluster: show the essentials only. The live dot + label and the
     clock are the high-value, glanceable items. Theme + language stay.
     We remove the right border/padding that caused the clock to clip. */
  #fnrp-root .fh-meta { gap: 8px; }
  #fnrp-root .fh-live {
    padding-inline-end: 0;
    border-inline-end: 0;          /* kills the divider that ate clock space */
    font-size: 8.5px;
    letter-spacing: .12em;
  }
  #fnrp-root .fh-clock {
    font-size: 11px;
    letter-spacing: .02em;
    white-space: nowrap;           /* never wrap or clip the time */
  }
  #fnrp-root .fh-theme-btn { width: 30px; height: 30px; }
}

/* Smallest phones: drop the LIVE text label (keep the pulsing dot) and the
   clock — they are the least critical and free up room for a clean logo +
   theme/lang controls. The dot alone still signals "live". */
@media (max-width: 380px) {
  #fnrp-root .fh-live { font-size: 0; gap: 0; }      /* hide label text */
  #fnrp-root .fh-live .fh-dot { width: 7px; height: 7px; }
  #fnrp-root .fh-clock { display: none; }
  #fnrp-root .fh-logo { font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. PRICE STRIP — the left edge was eaten by a 40px mask meant for desktop.
   On phones we shrink the edge fade to 14px so the first ticker ("BTC") is
   fully readable, and tighten tick padding so more fit per screen.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #fnrp-root .fp-strip {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  #fnrp-root .fp-tick {
    padding: 0 12px;
    font-size: 11px;
    gap: 6px;
  }
}
@media (max-width: 380px) {
  #fnrp-root .fp-strip {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
  }
  #fnrp-root .fp-tick { padding: 0 10px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. MARKET TABS + TOPIC CHIPS + SUB-FILTER — horizontal rails.
   They already use overflow-x:auto, but looked "cut" with no scroll cue.
   We add a right-edge fade mask + momentum scrolling + hidden scrollbar so the
   rail reads as intentionally swipeable, not broken.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #fnrp-root .fm-tabs,
  #fnrp-root .fm-subfilter,
  #fnrp-root .ff-bar {
    padding-left: var(--fnrp-m-gutter);
    padding-right: var(--fnrp-m-gutter);
  }
  /* Market tabs: a true swipe rail with an edge fade so the last tab reads as
     "more to the right" rather than "chopped off". */
  #fnrp-root .fm-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  #fnrp-root .fm-tabs::-webkit-scrollbar { display: none; }
  #fnrp-root .fm-tab {
    flex: 0 0 auto;            /* don't shrink; let them scroll */
    padding: 0 14px;
    font-size: 12.5px;
  }
  /* Topic chips + sub-filter: wrap is fine, but if they overflow let them
     scroll horizontally on one line for a tidier first impression. */
  #fnrp-root .fm-subfilter {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
  }
  #fnrp-root .fm-subfilter::-webkit-scrollbar { display: none; }
  #fnrp-root .fm-sub,
  #fnrp-root .fm-sub-chip { flex: 0 0 auto; }
}

/* Tap targets: make the tabs/chips comfortably tall on touch. */
@media (max-width: 560px) {
  #fnrp-root .fm-tabs { height: 46px; }
  #fnrp-root .ff-bar { margin-top: 12px; gap: 8px; }
  #fnrp-root .ff-chip { min-height: 34px; display: inline-flex; align-items: center; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. ECONOMIC PULSE STRIP — the 4-col grid (auto 1fr auto auto) is desktop-only.
   On phones, stack it into clean rows: header, then the 7-day spine as a
   scrollable rail, then NEXT EVENT, then a full-width CTA button.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #fnrp-root .fn-econ-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px var(--fnrp-m-gutter);
    margin: 12px var(--fnrp-m-gutter) 14px;
  }
  #fnrp-root .fn-econ-head { flex-direction: row; align-items: center; gap: 8px; }
  /* Spine: horizontal scroll rail of day cells, evenly sized. */
  #fnrp-root .fn-econ-spine {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #fnrp-root .fn-econ-spine::-webkit-scrollbar { display: none; }
  #fnrp-root .fn-econ-spine-cell { flex: 1 0 44px; min-width: 44px; }
  /* NEXT EVENT: full width, top divider instead of side divider. */
  #fnrp-root .fn-econ-next {
    max-width: none;
    border-inline-start: 0;
    border-top: 1px solid var(--border);
    padding-inline-start: 0;
    padding-top: 10px;
  }
  /* CTA: full-width pill, easy to tap. */
  #fnrp-root .fn-econ-cta {
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. NEWS STREAM — the core reading experience. Comfortable type, edge-to-edge
   cards with a clear left accent rail on important items, tidy meta + footer.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  #fnrp-root .fn-item {
    padding: 16px 14px;
    min-width: 0;
  }
  #fnrp-root .fn-title,
  #fnrp-root .fn-title-lead {
    font-size: 16px;
    line-height: 1.36;
    word-break: normal;
    overflow-wrap: anywhere;     /* long tokens wrap instead of overflowing */
  }
  #fnrp-root .fn-excerpt {
    font-size: 13px;
    line-height: 1.5;
  }
  /* Meta row: allow wrapping so badges never push content off-screen. */
  #fnrp-root .fn-meta {
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 6px;
  }
  /* Footer stats: wrap gracefully. */
  #fnrp-root .fn-foot {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 14px;
  }
  /* Load-more: full-width, comfortable tap target. */
  #fnrp-root .fn-load-more {
    width: 100%;
    min-height: 46px;
  }
}

/* Pagination + back-to-top on phones/tablets (v11.25.0).
   Bigger tap targets; on narrow screens the Prev/Next word labels collapse
   to just the arrow so the bar stays on one row. */
@media (max-width: 768px) {
  #fnrp-root .fn-pager { gap: 6px; }
  #fnrp-root .fn-pager-btn { padding: 10px 14px; min-height: 44px; }
  #fnrp-root .fn-pager-num { min-width: 44px; min-height: 44px; font-size: 14px; }
  .fnrp-to-top {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 16px;
    padding: 11px 15px;
  }
}
@media (max-width: 480px) {
  #fnrp-root .fn-pager-btn .fn-pager-lbl { display: none; }
  #fnrp-root .fn-pager-btn { padding: 10px 13px; }
  #fnrp-root .fn-pager-arrow { font-size: 18px; }
  /* Compact, thumb-reachable round-ish button; label hidden, arrow only. */
  .fnrp-to-top .fnrp-to-top-lbl { display: none; }
  .fnrp-to-top {
    width: 46px; height: 46px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .fnrp-to-top .fnrp-to-top-arrow { font-size: 18px; }
}
@media (max-width: 380px) {
  #fnrp-root .fn-item { padding: 14px 12px; }
  #fnrp-root .fn-title { font-size: 15.5px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. SIDEBAR WIDGETS (the "cards"/ads-style blocks the user flagged).
   The 2-column grid (minmax 150px) crushed long symbols like PEPEUSDT into
   "P…". On phones we make movers/gainers/losers SINGLE column so every row is
   full width and nothing is ever truncated. The short-symbol watchlist keeps
   two columns down to phone size, then also collapses on the smallest screens.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  #fnrp-root .fs-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--radius-md);
  }
  #fnrp-root .fs-card-hd {
    padding: 13px 14px 9px;
  }
  /* Movers / gainers / losers → ONE column, full-width readable rows. */
  #fnrp-root #fs-gainers-body.fnrp-w2-grid,
  #fnrp-root #fs-losers-body.fnrp-w2-grid {
    grid-template-columns: 1fr !important;
  }
  /* Watchlist can keep two columns (short symbols), but give it room. */
  #fnrp-root #fs-pairs-body.fnrp-w2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Row internals: never truncate the symbol; align the pct cleanly right. */
  #fnrp-root .fnrp-w2-col .fs-mover {
    grid-template-columns: auto 1fr auto;
    column-gap: 8px;
    padding: 10px 12px;
    min-height: 42px;            /* comfortable tap target */
  }
  #fnrp-root .fnrp-w2-col .fs-mover-sym {
    font-size: 12.5px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
  #fnrp-root .fnrp-w2-col .fs-mover-pct {
    font-size: 11.5px;
    white-space: nowrap;
    padding: 2px 6px;
  }
  /* Column dividers: vertical border between the two watchlist columns reads
     cleaner than relying on row borders alone. */
  #fnrp-root #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col + .fnrp-w2-col {
    border-inline-start: 1px solid var(--border);
  }
}

/* Smallest phones: even the watchlist goes single column so two short symbols
   don't get cramped. */
@media (max-width: 380px) {
  #fnrp-root #fs-pairs-body.fnrp-w2-grid {
    grid-template-columns: 1fr !important;
  }
  #fnrp-root #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col + .fnrp-w2-col {
    border-inline-start: 0;
  }
  #fnrp-root .fs-card-hd { padding: 12px 12px 8px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. SERVICES RAIL — the fixed right-edge icon rail (v11.18). It's appended to
   <body>, overlaps content on small screens, and adds no value on a phone where
   everything is one tap away. Hide it on mobile (it was already hidden ≤640 via
   #fsv-rail; we extend the guard in case the id/class differs across builds).
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #fsv-rail,
  .fnrp-services-rail,
  .fsv-rail { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. RTL — Arabic. The base styles use logical properties, but a couple of the
   mobile masks above are physical (left/right). Mirror the rail/strip fades so
   the fade falls on the correct (start) edge in RTL.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #fnrp-root.fnrp-rtl .fm-tabs,
  html[dir="rtl"] #fnrp-root .fm-tabs,
  #fnrp-root.fnrp-rtl .fm-subfilter,
  html[dir="rtl"] #fnrp-root .fm-subfilter {
    -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(270deg, #000 calc(100% - 22px), transparent);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AD CONTAINMENT (manual / AdSense ads placed by the site owner)
   ─────────────────────────────────────────────────────────────────────────────
   The "Sponsored" banner is NOT rendered by this plugin (the plugin only
   FILTERS sponsored content out of the news feed). It is injected by the site
   owner's own HTML/AdSense code. On mobile it was reported as "floating in the
   middle of the screen and flickering".

   Two causes, two cures:
     • Floating  → the ad (or a wrapper) is position:fixed/sticky. We force it
                   back into normal document flow on phones.
     • Flickering→ an animation/transition loop on the ad box (or its repeated
                   re-render). We disable animations on the ad box on phones.

   HOW TO USE (recommended, gives a clean result every time):
   Wrap your ad code in a div with class "fnrp-ad-slot", e.g.

       <div class="fnrp-ad-slot">
         <!-- your AdSense or manual banner code here -->
       </div>

   The defensive selectors below also catch the most common ad patterns
   (AdSense <ins class="adsbygoogle">, [data-ad-*], #fnrp-sidebar-ad, etc.) so
   the fix still helps even if you cannot re-wrap the ad right now.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (A) The clean, recommended wrapper — works at ALL widths. A tidy centered
   card that never floats, never overflows, and reserves its space so the page
   doesn't jump as the ad loads. */
.fnrp-ad-slot {
  position: relative;          /* never fixed/sticky */
  display: block;
  width: 100%;
  max-width: 336px;            /* standard large-rectangle width cap */
  margin: 16px auto;           /* centered, with breathing room */
  overflow: hidden;            /* clip anything that tries to spill */
  border-radius: var(--radius-md, 8px);
}
.fnrp-ad-slot > * { max-width: 100%; }
.fnrp-ad-slot ins.adsbygoogle,
.fnrp-ad-slot iframe,
.fnrp-ad-slot img {
  display: block;
  max-width: 100% !important;
  height: auto;
}
/* Kill any animation/transition the ad creative tries to run on its own box
   (a frequent cause of the "flicker"). The ad's internal video/gif still
   plays; this only stops the CONTAINER from animating/blinking. */
.fnrp-ad-slot,
.fnrp-ad-slot > * {
  animation: none !important;
  transition: none !important;
}

/* (B) Defensive net on phones/tablets — applies even without the wrapper.
   These are the common shapes a manually-placed or AdSense ad takes. We:
   1) force them out of fixed/sticky positioning (stops mid-screen floating),
   2) constrain width and center them (stops overflow),
   3) disable container animation (stops flicker). */
@media (max-width: 1024px) {
  ins.adsbygoogle,
  .adsbygoogle,
  [data-ad-client],
  [data-ad-slot],
  [id*="div-gpt-ad"],
  .fnrp-ad-slot,
  #fnrp-sidebar-ad,
  .fnrp-sidebar-ad {
    position: static !important;     /* defeat fixed/sticky → no floating */
    inset: auto !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    z-index: auto !important;
    float: none !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    animation: none !important;      /* defeat blink/flicker loops */
    transition: none !important;
  }
  /* If the ad wrapper was the thing pinned mid-screen, also neutralize a
     transform that some "floating ad" snippets use to center it. */
  .fnrp-ad-slot,
  ins.adsbygoogle,
  [id*="div-gpt-ad"] {
    transform: none !important;
  }
}

/* (C) Reduced-motion users: never animate an ad container, any width. */
@media (prefers-reduced-motion: reduce) {
  .fnrp-ad-slot,
  .fnrp-ad-slot > *,
  ins.adsbygoogle {
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. MODALS / OVERLAYS — make the economic-calendar & chart modals full-bleed
   and scrollable on phones so they don't render in a tiny centered box.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  #fnrp-root .fn-econ-modal,
  .fn-econ-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}