/* ═══════════════════════════════════════════════════════════════════════════════
   BEST-COMPANIES TABLE — [companies_table]
   Rendered on 6,896 pages (topics 557 · stocks 6,286 · companies 26 · assets 6 ·
   platforms 3 · licenses 13 · currency pairs 5 — measured 2026-08-12).

   ONE layout at every width: a comparison table whose identity column is pinned and
   whose spec columns scroll. No separate mobile card mode — the same DOM, the same
   rules, so there is no second design to keep in sync.

   The pinned column carries the CTA. In a sticky-first-column table the trailing
   column is off-screen until the reader swipes to the very end, and the CTA is the
   affiliate exit the North Star is measured on — it is the one thing that may not
   require a swipe. That is also why the old trailing action column is gone rather
   than duplicated.

   WHY THIS FILE IS LOADED TWICE, AND WHY THAT IS DELIBERATE
   It is bundled by main.css into @layer components AND direct-linked (unlayered)
   from app-v2's head, after @yield('styles') and @stack('page-css'). Unlayered
   rules beat EVERY layer regardless of specificity, so the direct-linked copy is
   the one that wins — and that is the point. Page-level stylesheets reach into this
   component from outside and are all unlayered, so for four rounds of "mobile fixes"
   the component's own rules silently lost to rules nobody thought to look at:
     • topic-inline.css         .best-companies-table th,td { text-align:center }
     • topic-inline.css:2035    .art-body img { height:auto!important }
     • legacy-content.min.css   .best-companies-table .fixed-variant { width:65px }
     • article-content.css      .article-table th,td { text-align:start!important }
   Selectors below are element-qualified (`table.best-companies-table …`) so they also
   out-rank the .article-table skin, which only exists on 287 of the 6,896 pages.

   Markup contract: Helper::cleanHTMLCode() unwraps <div>/<span> and deletes <svg>
   on those 287 pages. Nothing below may depend on a wrapper element — the rank badge,
   the star, the tick and the CTA arrow are all CSS.
   See best_companies_table.blade.php for the full contract.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Kept in @layer components on purpose: it is NOT part of this component (it zeroes
   padding on every div inside article content) and promoting it to unlayered — which
   is what a direct <link> would otherwise do — would newly out-rank other components'
   own padding. Wrapping it here preserves its exact current weight and position. */
@layer components {
    .section-article-content div {
        padding: 0;
    }
}

/* ── Shell = the scroll port ────────────────────────────────────────────────────
   Two wrappers exist in the wild: .best-companies-container (blade) and
   .table-responsive (what the sanitizer replaces it with on the 287 pages). Both are
   styled identically so the component looks the same on every surface.
   position:sticky on the cells resolves against THIS box, so it must be the scroller. */
.best-companies-container,
.table-responsive:has(> .best-companies-table) {
    --bct-sticky: 168px;

    position: relative;
    margin-block: 20px 28px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #EBF0F7);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(21, 45, 80, .04), 0 12px 32px -20px rgba(21, 45, 80, .35);

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    /* a swipe lands a column flush against the pinned one instead of half-cut.
       `proximity`, not `mandatory` — a mandatory snap fights slow drags. */
    scroll-snap-type: inline proximity;
    scroll-padding-inline-start: var(--bct-sticky);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong, #C4D0E0) transparent;
}

.best-companies-container::-webkit-scrollbar,
.table-responsive:has(> .best-companies-table)::-webkit-scrollbar {
    height: 8px;
}

.best-companies-container::-webkit-scrollbar-thumb,
.table-responsive:has(> .best-companies-table)::-webkit-scrollbar-thumb {
    background: var(--border-strong, #C4D0E0);
    border-radius: 99px;
}

.best-companies-container::-webkit-scrollbar-track,
.table-responsive:has(> .best-companies-table)::-webkit-scrollbar-track {
    background: transparent;
}

table.best-companies-table {
    display: table;
    width: 100%;
    /* wider than a phone on purpose — this is what makes the spec columns scroll.
       Narrower than the article column on desktop, so there it simply fills and the
       pinned column never engages. 168+90+100+96+186 = 640. */
    min-width: 640px;
    margin: 0;
    /* separate, NOT collapse: a collapsed border belongs to the table, so it scrolls
       out from under a position:sticky cell and the pinned column loses its edges. */
    border-collapse: separate;
    border-spacing: 0;
    background: none;
    /* the .article-table skin (287 pages) sets its own border, radius, overflow,
       font-size and margin — the shell owns the frame, the table never draws one */
    border: 0;
    border-radius: 0;
    overflow: visible;
    font-size: .9rem;
    direction: rtl;
}

/* The Vite build emits @media blocks from a `layer(components)` import OUTSIDE that
   layer — verified in the bundle: `.article-table{width:100%…}` sits inside
   `@layer components`, while `@media (max-width:768px){ .article-main .article-table
   { display:block; overflow-x:auto } }` from the SAME file sits unlayered. So that
   rule is not weak at all: it scores (0,2,0) unlayered and beat
   `table.best-companies-table` (0,1,1). It turned the table into its own scroll
   container, which re-parents position:sticky away from the shell and kills the pinned
   column — on the 287 sanitized pages only. Naming the wrapper lifts these to (0,2,1).
   Both wrappers are listed because the sanitizer swaps one for the other. */
.best-companies-container > table.best-companies-table,
.table-responsive > table.best-companies-table {
    display: table;
    overflow: visible;
    overflow-x: visible;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
table.best-companies-table thead th {
    padding: 13px 12px;
    background: var(--bg-subtle, #f8fafc);
    color: var(--text-muted, #475A72);
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    text-align: center !important;
    vertical-align: middle;
    border: 0;
    border-block-end: 1px solid var(--border, #DDE5EF);
    white-space: nowrap;
}

table.best-companies-table thead th + th + th {
    border-inline-start: 1px solid var(--border-light, #EBF0F7);
}

/* ── Rows ───────────────────────────────────────────────────────────────────── */
table.best-companies-table tbody tr:nth-child(n) {
    background: var(--bg-card, #fff);
}

table.best-companies-table tbody td {
    padding: 14px 10px;
    border: 0;
    border-block-end: 1px solid var(--border-light, #EBF0F7);
    vertical-align: middle;
    text-align: center !important;
    color: var(--text, #1A2B45);
    font-size: .92rem;
    line-height: 1.45;
    background: var(--bg-card, #fff);
    scroll-snap-align: start;
}

table.best-companies-table tbody tr:last-child td {
    border-block-end: 0;
}

table.best-companies-table tbody td.bct-cell + td.bct-cell {
    border-inline-start: 1px solid var(--border-light, #EBF0F7);
}

/* ── The pinned identity column ─────────────────────────────────────────────────
   inset-inline-start resolves to `right` under this site's RTL root, which is the
   edge the first column sits on. The shadow therefore falls to the LEFT — the side
   the spec columns slide under. */
table.best-companies-table thead th.company-logo-cell,
table.best-companies-table tbody td.company-logo-cell {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    width: var(--bct-sticky, 168px);
    min-width: var(--bct-sticky, 168px);
    border-inline-end: 1px solid var(--border, #DDE5EF);
    scroll-snap-align: none;
}

table.best-companies-table thead th.company-logo-cell {
    text-align: start !important;
    padding-inline-start: 16px;
    background: var(--bg-subtle, #f8fafc);
}

/* Stays a REAL table-cell — no display:flex/grid here.
   A td with display:flex has an outer display of `block`, so it stops being a
   table-cell and the browser wraps it in an anonymous one. The column then sizes to
   the header while the cell sizes to itself: measured th x=1022 w=267 against td
   x=1049 w=240, i.e. a 27px strip of container background showing through beside the
   pinned column in the header row. The children are already block-level, so plain
   table-cell + centred text gives the same logo/name/button stack for free. */
table.best-companies-table tbody td.company-logo-cell {
    vertical-align: middle;
    padding: 13px 12px;
    /* !important answers `.article-table th,td { text-align:start !important }` from
       article-content.css, which only reaches the 287 sanitized pages */
    text-align: center !important;
}

/* !important answers topic-inline.css:2035 `.art-body img { height:auto!important }`,
   which otherwise collapses the logo to its alt-text line box (measured 13px). */
table.best-companies-table td.company-logo-cell img.bct-logo {
    display: block;
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    margin: 0 auto 8px;
    padding: 3px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border-light, #EBF0F7);
    border-radius: 13px;
}

table.best-companies-table td.company-logo-cell p.bct-company-name {
    margin: 0 0 8px;
    font-size: .81rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text, #1A2B45);
    text-align: center;
    unicode-bidi: plaintext;
}

table.best-companies-table td.bct-rating-col p.bct-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    /* direction is set HERE, not left to the element's dir="ltr" attribute.
       article-content.css carries `.article-table td p { direction: rtl }` at (0,2,1),
       and an author rule always beats the UA rule that maps the dir attribute — so on
       the 287 sanitized pages the rating rendered as "5/4.5" with the star flipped,
       while the other 6,609 rendered "4.5/5". Same component, two readings of one
       number. Declaring it here makes the two paths agree. */
    direction: ltr;
    unicode-bidi: isolate;
    margin: 0;
    font-size: .78rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--text-muted, #475A72);
}

table.best-companies-table td.bct-rating-col p.bct-rating strong {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text, #1A2B45);
    font-variant-numeric: tabular-nums;
}

/* star drawn as a mask so it survives the <svg>-stripping pass */
table.best-companies-table td.bct-rating-col p.bct-rating::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-inline-end: 5px;
    background-color: var(--gold, #C08A2E);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.86 5.8 6.4.93-4.63 4.51 1.09 6.37L12 17.2l-5.72 3.01 1.09-6.37L2.74 9.33l6.4-.93z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.86 5.8 6.4.93-4.63 4.51 1.09 6.37L12 17.2l-5.72 3.01 1.09-6.37L2.74 9.33l6.4-.93z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Spec columns ───────────────────────────────────────────────────────────── */
table.best-companies-table td.bct-cell strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

table.best-companies-table th.bct-rating-col,
table.best-companies-table td.bct-rating-col {
    width: 90px;
    min-width: 90px;
    white-space: nowrap;
}

table.best-companies-table th.bct-deposit,
table.best-companies-table td.bct-deposit {
    width: 100px;
    min-width: 100px;
    white-space: nowrap;
}

table.best-companies-table th.bct-bonus,
table.best-companies-table td.bct-bonus {
    width: 96px;
    min-width: 96px;
    white-space: nowrap;
}

table.best-companies-table th.licenses-cell,
table.best-companies-table td.licenses-cell {
    width: 186px;
    min-width: 186px;
}

table.best-companies-table td.bct-deposit strong,
table.best-companies-table td.bct-bonus strong {
    font-size: 1rem;
    font-weight: 800;
}

table.best-companies-table td.licenses-cell {
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-mid, #3D5A7A);
    line-height: 1.55;
    unicode-bidi: plaintext;
    white-space: normal;
}

/* ── Call to action, inside the pinned column ───────────────────────────────────
   SPECIFICITY IS LOAD-BEARING — do not simplify these selectors. topic-inline.css
   carries, unlayered:
       .best-companies-table a:not(.btn-outline-primary):not(.bct-review-link) {color:#fff}
   :not() counts its argument, so that scores (0,3,1). A ghosted review button written
   at (0,3,0) would inherit white text on a white background — the 1.09:1 contrast
   failure that rule's own comment records causing on production at 375px. The
   selectors below score (0,3,3) and (0,4,3). */
table.best-companies-table td.company-logo-cell a.bct-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    margin-block-start: 1px;
    padding: 8px 12px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

table.best-companies-table td.company-logo-cell a.bct-cta.is-open {
    background: var(--teal, #0E7C7B);
    box-shadow: 0 2px 10px -3px rgba(14, 124, 123, .55);
}

table.best-companies-table td.company-logo-cell a.bct-cta.is-open:hover {
    background: var(--teal-dark, #0A5E5D);
    color: #fff;
}

/* the arrow points along the reading direction; this site renders RTL, so forward is
   leftward. A mask, not a glyph — Almarai has no dependable arrow codepoint. */
table.best-companies-table td.company-logo-cell a.bct-cta.is-open::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-inline-start: 6px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "تقييم الشركة" is our own review page, not an affiliate exit — it must not compete
   visually with the one CTA that earns. */
table.best-companies-table td.company-logo-cell a.bct-cta.is-review {
    background: var(--bg-card, #fff);
    color: var(--navy, #152D50);
    border-color: var(--border-strong, #C4D0E0);
    box-shadow: none;
}

table.best-companies-table td.company-logo-cell a.bct-cta.is-review:hover {
    background: var(--bg-subtle, #f8fafc);
    border-color: var(--navy, #152D50);
    color: var(--navy, #152D50);
}

table.best-companies-table td.company-logo-cell a.bct-cta:hover {
    transform: translateY(-1px);
}

table.best-companies-table td.company-logo-cell a.bct-cta:active {
    transform: translateY(0);
}

table.best-companies-table td.company-logo-cell a.bct-cta:focus-visible {
    outline: 3px solid var(--gold, #C08A2E);
    outline-offset: 2px;
}

/* Regulatory-ban notice — informational, not an error: muted, no red. A commercial
   ban never reaches this class (Company::showsUnavailableNoticeForVisitor), so the
   sentence can only ever state something true. */
table.best-companies-table td.company-logo-cell p.bct-unavailable-note {
    display: block;
    width: 100%;
    margin: 5px 0 0;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-muted, #475A72);
    text-align: center;
    white-space: normal;
}

/* ── Wider viewports ───────────────────────────────────────────────────────────
   The article column is ~820px and 240+96+108+102+190 = 736, so the table fills it and
   the pinned column never actually engages. Below ~736px it starts scrolling, which is
   the same behaviour as the phone — one design, no breakpoint jump. */
@media (min-width: 769px) {

    .best-companies-container,
    .table-responsive:has(> .best-companies-table) {
        --bct-sticky: 240px;
    }

    table.best-companies-table {
        min-width: 0;
    }

    table.best-companies-table th.bct-rating-col,
    table.best-companies-table td.bct-rating-col {
        width: 96px;
        min-width: 96px;
    }

    table.best-companies-table th.bct-deposit,
    table.best-companies-table td.bct-deposit {
        width: 108px;
        min-width: 108px;
    }

    table.best-companies-table th.bct-bonus,
    table.best-companies-table td.bct-bonus {
        width: 102px;
        min-width: 102px;
    }

    table.best-companies-table th.licenses-cell,
    table.best-companies-table td.licenses-cell {
        width: 190px;
        min-width: 190px;
    }

    table.best-companies-table tbody td.company-logo-cell {
        padding: 16px;
    }

    table.best-companies-table td.company-logo-cell img.bct-logo {
        margin-block-end: 9px;
    }

    table.best-companies-table td.company-logo-cell p.bct-company-name {
        margin-block-end: 10px;
    }

    table.best-companies-table td.company-logo-cell img.bct-logo {
        width: 68px !important;
        height: 68px !important;
        max-width: 68px !important;
        border-radius: 15px;
    }

    table.best-companies-table td.company-logo-cell p.bct-company-name {
        font-size: .87rem;
    }

    table.best-companies-table td.bct-rating-col p.bct-rating strong {
        font-size: 1rem;
    }

    table.best-companies-table td.company-logo-cell a.bct-cta {
        font-size: .84rem;
        min-height: 40px;
    }
}

/* ── Scroll affordance (phones only) ───────────────────────────────────────────
   Below 769px the spec columns really do run off-screen, so the pinned column needs to
   say so. A double chevron sits on its edge and nudges toward the hidden columns.
   Four beats then rest: a cue that never stops stops being a cue, and a permanent
   animation across 6,896 pages is noise. It is drawn on the header cell's ::after —
   the only free pseudo-element left on an element that is already `position: sticky`,
   so it needs no wrapper (the sanitizer would delete one on 287 pages).
   Above 769px the table fits its column and nothing scrolls, so no cue is shown. */
@media (max-width: 768px) {
    table.best-companies-table thead th.company-logo-cell::after {
        content: "";
        position: absolute;
        inset-inline-end: -7px;
        top: 50%;
        width: 15px;
        height: 15px;
        margin-block-start: -7px;
        background-color: var(--teal, #0E7C7B);
        opacity: .6;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5l-7 7 7 7M19 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5l-7 7 7 7M19 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
        animation: bct-swipe-hint 1.5s ease-in-out 4;
    }
}

@keyframes bct-swipe-hint {

    0%,
    100% {
        transform: translateX(0);
        opacity: .55;
    }

    50% {
        transform: translateX(-5px);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .best-companies-container,
    .table-responsive:has(> .best-companies-table) {
        scroll-snap-type: none;
    }

    table.best-companies-table td.company-logo-cell a.bct-cta {
        transition: none;
    }

    table.best-companies-table td.company-logo-cell a.bct-cta:hover {
        transform: none;
    }

    table.best-companies-table thead th.company-logo-cell::after {
        animation: none;
    }
}