/**
 * Design System v2 — Banner Slot
 * Wrapper for admin-managed banners from smartend_banners.
 * NEVER style the inner banner HTML — it comes from the database.
 * Only style the wrapper and generic inner containers.
 */

.banner-slot {
    margin-block: var(--space-6);
    width: 100%;
}

/* Generic inner styling for banner containers */
.banner-slot > div,
.banner-slot > section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
    min-height: 140px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
}

.banner-slot > div:hover,
.banner-slot > section:hover {
    box-shadow: var(--shadow-md);
}

.banner-slot img {
    max-width: 100%;
    height: auto;
}

/* Scoped CTA button overrides for banners */
.banner-slot .btn,
.banner-slot [class*="btn-primary"],
.banner-slot [class*="btn-success"] {
    background: var(--navy);
    color: var(--bg-card);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: var(--font-bold);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all var(--transition-fast);
    border: none;
}

.banner-slot .btn:hover,
.banner-slot [class*="btn-primary"]:hover,
.banner-slot [class*="btn-success"]:hover {
    background: var(--navy-light);
    transform: translateY(-1px);
}

/* Ad disclosure */
.banner-slot .ad-disclosure,
.banner-slot small {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ── Variant: Inline banner (inside article body) ── */
.banner-slot--inline {
    margin-block: var(--space-4);
}

@media (max-width: 768px) {
    .banner-slot {
        margin-block: var(--space-4);
    }

    .banner-slot > div,
    .banner-slot > section {
        padding: var(--space-4) var(--space-5);
        min-height: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ARTICLE BANNER — Top / Bottom wrappers used by
   site-new/includes/top_banner.blade.php + bottom_banner.blade.php
   across Topic, Stock, Company, Asset, Platform, License, CurrencyPair.
   The inner HTML comes from the admin (banners.code / code_tablet /
   code_mobile) — we only style the wrapper and reasonable defaults for
   <a>/<img>. Never override admin-controlled visuals.
   ══════════════════════════════════════════════════════════════════════ */

.article-banner {
    /* Block-level centering via auto inline margins; full-width up to max */
    margin-block: var(--space-6);
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-xl, 1280px);
    padding-inline: var(--space-3);
}

.article-banner--top {
    /* Breathes above the article header */
    margin-block-end: var(--space-8);
}

.article-banner--bottom {
    /* Breathes after related content */
    margin-block-start: var(--space-8);
}

/* Device-specific size caps (IAB-ish). The wrapper width follows the device
   the user is on — the admin uploaded per-device HTML so we pair them up. */
.topic_top_banner,
.topic_bottom_banner {
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topic_top_banner.banner-desktop,
.topic_bottom_banner.banner-desktop {
    max-width: 728px;  /* IAB Leaderboard */
}

.topic_top_banner.banner-tablet,
.topic_bottom_banner.banner-tablet {
    max-width: 468px;  /* IAB Full Banner */
}

.topic_top_banner.banner-mobile,
.topic_bottom_banner.banner-mobile {
    max-width: 100%;
}

/* Responsive defaults for admin-inserted <img>/<a> — non-invasive */
.article-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
}

.article-banner a {
    display: inline-block;
    max-width: 100%;
    text-decoration: none;
}

/* Small viewports — tighter margins */
@media (max-width: 640px) {
    .article-banner {
        margin-block: var(--space-4);
        padding-inline: var(--space-2);
    }
    .article-banner--top {
        margin-block-end: var(--space-5);
    }
    .article-banner--bottom {
        margin-block-start: var(--space-5);
    }
}

/* Demoted headings (see Helper::prepareBannerHtml).
   Admin may have written <h1>/<h2>/<h3> inside the banner HTML to structure
   a card visually; we demote those to <div> (SEO — no H-hierarchy pollution)
   and restore visual weight via these utility classes. */
.banner-heading {
    font-weight: var(--font-bold);
    margin-block-end: var(--space-2);
    line-height: var(--leading-tight, 1.3);
}

.banner-heading--h1 { font-size: var(--text-2xl); }
.banner-heading--h2 { font-size: var(--text-xl); }
.banner-heading--h3 { font-size: var(--text-lg); }

@media (max-width: 640px) {
    .banner-heading--h1 { font-size: var(--text-xl); }
    .banner-heading--h2 { font-size: var(--text-lg); }
    .banner-heading--h3 { font-size: var(--text-base); }
}

/* ══════════════════════════════════════════════════════════════════════
   .btrb-banner — Bitarabi-authored banner template
   Used inside smartend_banners.code when the admin writes a <section
   class="btrb-banner"> card (logo + main-content + action-buttons +
   disclaimer). Renders inside top_banner / bottom_banner slots.

   Fully token-driven (zero hardcoded hex) so dark-mode / theme swaps work
   without hunting inline colours. Overrides admin inline `style=""` where
   readability / WCAG matter (CTA contrast, text color on gradient) — the
   admin-written HTML stays authoritative for content; CSS owns visuals.

   WCAG AA:
     - Primary CTA: white text on navy→navy-light gradient ≈ 9.3:1 (AA+).
       Previous #3b82f6 end stop tested at ~3.68:1 — failed AA for body
       text — which is why the CTA label looked "faded" mid-button.
     - Secondary CTA: white on teal ≥ 4.6:1 at all gradient stops.
   ══════════════════════════════════════════════════════════════════════ */

.btrb-banner {
    display: flex;
    align-items: center;
    padding: var(--space-6, 25px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        color-mix(in oklch, var(--bg-card) 92%, var(--navy) 8%) 0%,
        color-mix(in oklch, var(--bg-card) 78%, var(--navy) 22%) 100%);
    margin-block: var(--space-5);
    box-shadow: var(--shadow-md);
    position: relative;
    isolation: isolate;  /* contain any z-index from admin inline content */
    gap: var(--space-5);
}

/* Logo — fixed tile with navy ring */
.btrb-banner .logo img {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 2px solid var(--navy);
    display: block;
}

/* Content area (headline + body text) */
.btrb-banner .main-content {
    flex: 1 1 auto;
    min-width: 0;  /* allow long Arabic words to wrap */
    padding-inline: var(--space-5);
}

.btrb-banner .main-content h2,
.btrb-banner .banner-headline,
.btrb-banner .banner-title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: var(--navy);
    font-weight: var(--font-bold, 800);
    line-height: 1.25;
    display: block;
}

.btrb-banner .main-content p,
.btrb-banner .banner-text {
    margin: 0;
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    color: var(--text);
    line-height: 1.6;
}

/* Action buttons column (CTA stack on the side) */
.btrb-banner .action-buttons {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-inline-start: var(--space-5);
    align-items: stretch;
}

.btrb-banner .action-buttons a {
    text-decoration: none;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    font-weight: var(--font-bold, 700);
    text-align: center;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
    border: none;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 44px;  /* WCAG 2.5.5 touch target */
    line-height: 1.25;
    word-break: keep-all;  /* avoid breaking Arabic mid-word inside the button */
}

.btrb-banner .action-buttons a:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btrb-banner .action-buttons a:focus-visible {
    outline: 2px solid var(--teal-light);
    outline-offset: 2px;
}

/* Primary CTA — navy gradient, WCAG AA (~9.3:1 against #fff at both stops).
   Override inline `style="background:..."` the admin may have inherited
   from legacy templates — banner visual identity is CSS-owned now. */
.btrb-banner .action-buttons .btn-primary,
.btrb-banner .btn-primary {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%) !important;
    color: var(--text-on-navy, #fff) !important;
    font-size: 0.94rem;
}

.btrb-banner .action-buttons .btn-primary:hover,
.btrb-banner .btn-primary:hover {
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%) !important;
    color: var(--text-on-navy, #fff) !important;
}

/* Secondary CTA — teal gradient (same !important rationale) */
.btrb-banner .action-buttons .btn-secondary,
.btrb-banner .btn-secondary {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 100%) !important;
    color: var(--text-on-navy, #fff) !important;
    font-size: 0.88rem;
}

.btrb-banner .action-buttons .btn-secondary:hover,
.btrb-banner .btn-secondary:hover {
    background: linear-gradient(135deg,
        color-mix(in oklch, var(--teal) 85%, var(--navy) 15%) 0%,
        var(--teal) 100%) !important;
    color: var(--text-on-navy, #fff) !important;
}

/* Risk disclaimer under the CTAs */
.btrb-banner .disclaimer {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
    margin-block-start: var(--space-2);
    line-height: 1.4;
    max-width: 220px;
    margin-inline: auto;
}

/* Ad-disclosure pill (top-inline-start corner) — admin may author with
   inline positioning; we enforce logical placement so RTL flips correctly
   on both directions. Still respects an admin-authored `.ad-disclosure`
   as a badge even without their inline `position:absolute;top:0;right:0`. */
.btrb-banner .ad-disclosure {
    font-size: 0.68rem;
    font-weight: var(--font-bold, 700);
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    padding: 4px 10px;
    background: color-mix(in oklch, var(--teal-bg) 80%, transparent);
    color: var(--teal);
    border: 1px solid var(--teal-border);
    border-radius: var(--radius-full);
    line-height: 1.2;
    pointer-events: none;  /* never intercepts the CTA click */
    z-index: 1;
}

/* Tablet / small desktop — stack to column */
@media (max-width: 768px) {
    .btrb-banner {
        flex-direction: column;
        padding: var(--space-5);
        gap: var(--space-4);
        text-align: center;
    }
    .btrb-banner .logo {
        margin: 0;
    }
    .btrb-banner .logo img {
        margin-inline: auto;
    }
    .btrb-banner .main-content {
        padding-inline: var(--space-2);
    }
    .btrb-banner .action-buttons {
        margin-inline-start: 0;
        width: 100%;
        align-items: stretch;
    }
    .btrb-banner .action-buttons a {
        width: 100%;
        min-width: 0;
    }
    .btrb-banner .disclaimer {
        max-width: none;
        margin-block-start: var(--space-2);
    }
    .btrb-banner .ad-disclosure {
        inset-block-start: var(--space-2);
        inset-inline-end: var(--space-2);
    }
}

/* Mobile — tighter spacing + smaller logo */
@media (max-width: 480px) {
    .btrb-banner {
        padding: var(--space-4);
        margin-block: var(--space-4);
    }
    .btrb-banner .logo img {
        width: 72px;
        height: 72px;
    }
    .btrb-banner .main-content h2,
    .btrb-banner .banner-headline,
    .btrb-banner .banner-title {
        font-size: 1.05rem;
    }
    .btrb-banner .main-content p,
    .btrb-banner .banner-text {
        font-size: 0.85rem;
    }
    .btrb-banner .action-buttons {
        gap: var(--space-2);
    }
    .btrb-banner .action-buttons a {
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    .btrb-banner .disclaimer {
        font-size: 0.68rem;
    }
}

/* Small phones (≤380px) — even tighter; ad-disclosure shrinks to keep
   from overlapping the headline on Galaxy S10/iPhone SE widths. */
@media (max-width: 380px) {
    .btrb-banner {
        padding: var(--space-3);
    }
    .btrb-banner .ad-disclosure {
        font-size: 0.62rem;
        padding: 3px 8px;
    }
    .btrb-banner .action-buttons a {
        padding: 10px 12px;
        font-size: 0.82rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   .btrb-smart-banner — Bitarabi-authored "Smart Banner" template
   Used inside smartend_banners.code as the active affiliate-CTA block
   for Capital.com / JustMarkets across top + bottom banner slots on
   editorial articles, broker pages, stock pages, etc.

   ARCHITECTURE (CV-093, 2026-04-28 — Mohammed directive):
     Previously this template lived as ~3000 chars of inline <style>
     inside each banner row in the DB (5 banners × ~3000 = ~15KB
     duplicated). Moved to this stylesheet for: (1) single source of
     truth in Git, (2) cacheable across all article views,
     (3) CSP-safer (no inline <style> blocks), (4) admin can edit
     content (text/image/slug) without touching CSS.

   The DB HTML now contains structure ONLY — no <style> block.
   Updating the visual design = edit this file + STYLE_VERSION bump.
   Updating the content = admin edit.

   TEMPLATE STRUCTURE:
     <section class="btrb-smart-banner">
       <div class="btrb-app-wrapper">
         <div class="btrb-status-badge">badge text</div>
         <div class="btrb-brand-container"><a><img></a></div>
         <div class="btrb-info-container">
           <h3>headline</h3>
           <div class="btrb-tags-row">
             <span class="btrb-tag-item">badge 1</span>
             <span class="btrb-tag-item">badge 2</span>
           </div>
           <p class="btrb-disclaimer">subtitle</p>
         </div>
         <div class="btrb-action-container">
           <a class="btrb-btn-primary">CTA</a>
           <a class="btrb-btn-secondary">secondary link</a>
         </div>
       </div>
     </section>

   RESPONSIVE:
     ≥769px  → 3-col grid (logo / info / CTA)
     480-768 → 2-col grid + CTA spans full width below
     <480    → single column, centered (mobile)

   COLORS use brand tokens with hex fallbacks (works inside admin
   preview without design system context loaded).
   ══════════════════════════════════════════════════════════════════════ */

.btrb-smart-banner {
    direction: rtl;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 24px auto;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
}

.btrb-smart-banner .btrb-app-wrapper {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 130px 1fr 240px;
    align-items: center;
    padding: 20px;
    gap: 25px;
    position: relative;
    box-shadow: 0 10px 30px rgba(10, 25, 47, 0.05);
    border-bottom: 5px solid var(--navy, #0a192f);
}

.btrb-smart-banner .btrb-status-badge {
    position: absolute;
    inset-block-start: -14px;
    inset-inline-end: 30px;
    background: var(--navy, #0a192f);
    color: var(--text-on-navy, #fff);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: 50px;
    border: 2px solid var(--bg-card, #fff);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 1;
}

.btrb-smart-banner .btrb-brand-container {
    background: #f8fafc;
    border-radius: 15px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f5f9;
}

.btrb-smart-banner .btrb-brand-container img {
    width: 90px;
    height: auto;
    max-width: 100%;
}

.btrb-smart-banner .btrb-info-container {
    min-width: 0; /* prevents Arabic text overflow inside grid 1fr */
}

.btrb-smart-banner .btrb-info-container h3 {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 900;
    color: var(--navy, #0a192f);
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.btrb-smart-banner .btrb-tags-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.btrb-smart-banner .btrb-tag-item {
    background: #f0fdf4;
    color: #166534;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

.btrb-smart-banner .btrb-disclaimer {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    font-weight: 600;
}

.btrb-smart-banner .btrb-action-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btrb-smart-banner .btrb-btn-primary {
    background: linear-gradient(135deg, var(--navy, #0a192f) 0%, var(--navy-light, #1e3a8a) 100%);
    color: var(--text-on-navy, #ffffff) !important;
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    font-size: 16px;
    box-shadow: 0 8px 15px rgba(10, 25, 47, 0.2);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                filter 0.3s ease;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    display: flex;
    align-items: center;
    justify-content: center;
}

.btrb-smart-banner .btrb-btn-primary:hover {
    transform: translateY(-3px);
    filter: brightness(1.2);
}

.btrb-smart-banner .btrb-btn-primary:focus-visible {
    outline: 2px solid var(--teal-light, #12A09E);
    outline-offset: 2px;
}

.btrb-smart-banner .btrb-btn-secondary {
    font-size: 11px;
    color: #94a3b8;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    padding-block: 4px;
}

.btrb-smart-banner .btrb-btn-secondary:hover {
    color: var(--text-mid, #475569);
    text-decoration: underline;
}

/* Tablet — 480 to 768px: 2-col grid + CTA full-width below */
@media (max-width: 768px) {
    .btrb-smart-banner .btrb-app-wrapper {
        grid-template-columns: 100px 1fr;
        padding: 30px 20px 20px;
        gap: 15px;
    }
    .btrb-smart-banner .btrb-action-container {
        grid-column: span 2;
        width: 100%;
        margin-top: 10px;
    }
    .btrb-smart-banner .btrb-brand-container {
        height: 100px;
    }
    .btrb-smart-banner .btrb-brand-container img {
        width: 75px;
    }
}

/* Mobile — under 480px: single column, centered */
@media (max-width: 480px) {
    .btrb-smart-banner {
        margin: 16px auto;
    }
    .btrb-smart-banner .btrb-app-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 16px 16px;
        gap: 12px;
    }
    .btrb-smart-banner .btrb-brand-container {
        width: 90px;
        height: 90px;
        margin-inline: auto;
    }
    .btrb-smart-banner .btrb-action-container {
        grid-column: span 1;
    }
    .btrb-smart-banner .btrb-tags-row {
        justify-content: center;
    }
    .btrb-smart-banner .btrb-status-badge {
        inset-inline-end: 50%;
        transform: translateX(50%);
    }
    .btrb-smart-banner .btrb-info-container h3 {
        font-size: 18px;
    }
    .btrb-smart-banner .btrb-btn-primary {
        font-size: 15px;
        padding: 13px;
    }
}