/* =============================================================
   Etisalat (Operator-04) LIGHT + RED theme override
   Scoped under html.WebAppOperator-04.etisalat-light so it only
   applies when EnableEtisalatLightTheme is on. The dark theme
   (WebAppOperator-04.css) stays intact as the fallback.
   ============================================================= */

/* -------------------------------------------------------------
   DESIGN TOKENS — extracted from the "Etisalat - Engage" Figma
   (figma.com/design/lv2dLV1ztflXOXb2dKLEs8). Values are the
   single source of truth; Figma node/style IDs noted per token.
   Existing --eng-* names are preserved (consumed throughout this
   file) with values corrected to the Figma source.
   ------------------------------------------------------------- */
html.WebAppOperator-04.etisalat-light {
    /* ---- Brand red (Figma fill_HJBZQY / gradient fill_OJONSY) ---- */
    --eng-red: #E00800; /* primary CTA red — Figma source of truth */
    --eng-red-dark: #A30600; /* gradient end / pressed state */
    --eng-red-gradient: linear-gradient(158deg, #E00800 0%, #A30600 100%); /* redeem hero */
    --eng-hero-overlay: linear-gradient(252deg, rgba(209, 8, 1, 0) 0%, rgba(107, 4, 1, 1) 65%); /* photo tint over hero bg (Figma fill_MQ05BD) */
    --eng-red-soft: #FFF1F0; /* soft tint for redeem card (Figma fill_E6XJFT) */
    --eng-redeem-gradient: linear-gradient(160deg, #FFF1F0 0%, #FFE0DD 100%); /* Redeem & Enjoy card (Figma fill_PCZH2X) */
    --eng-expired: #6B7280; /* muted gray — ended/expired tournament badge */
    --eng-thumb-gradient: linear-gradient(135deg, #FFE5E3 0%, #FFD0CC 100%); /* reward thumbnail bg (Figma fill_TBZQWE) */

    /* ---- Navy (Figma fill_9JDKNC) — hero banners ---- */
    --eng-navy: #002948;
    --eng-on-navy: #FFFFFF; /* text / icons over navy */

    /* ---- Surfaces (Figma #FFFFFF, fill_XK0HPI, fill_44CF3F) ---- */
    --eng-card: #FFFFFF; /* cards / sheets */
    --eng-bg: #fff; /* page background / input fill */
    --eng-bg-alt: #F4F3F5; /* tabs / segmented control (fill_44CF3F) */

    /* ---- Text (Figma fill_A82402, fill_YAR1B2) ---- */
    --eng-text: #191329; /* primary text */
    --eng-text-body: rgba(25, 19, 41, 0.75); /* body copy (fill_YAR1B2) */
    --eng-muted: rgba(25, 19, 41, 0.5); /* meta / captions (Figma opacity 0.5) */
    --eng-on-red: #FFFFFF; /* text over red CTA */

    /* ---- Borders (Figma fill_OQ67GM table, fill_35S1FY nav) ---- */
    --eng-border: #ECECEC; /* card / table border */
    --eng-border-strong: #CAD0D9; /* nav divider / status-bar stroke */

    /* ---- Radius (Figma: button 24, search 22, sheet 16, card 10) ---- */
    --eng-radius-pill: 24px; /* CTA buttons / tabs */
    --eng-radius-search: 22px; /* search bar */
    --eng-radius: 16px; /* sheets / empty state (existing default) */
    --eng-radius-card: 10px; /* hero banners / cards */

    /* ---- Spacing (Figma: 20px gutter, 8/10/15 gaps, btn pad 10/40) ---- */
    --eng-gutter: 20px; /* screen side padding (390 frame -> 350 content) */
    --eng-gap-sm: 8px;
    --eng-gap: 10px;
    --eng-gap-lg: 15px;
    --eng-btn-pad: 10px 40px; /* CTA button padding */

    /* ---- Type (Figma "Suisse Int'l" -> registered 'Swiss International') ---- */
    --eng-font: 'Swiss International', system-ui, -apple-system, sans-serif;
    --eng-fs-body: 14px; /* style_2XOAWS */
    --eng-lh-body: 19px;
    --eng-fs-meta: 12px; /* style_UFIUQM */
    --eng-fw-book: 450; /* Suisse Book */
    --eng-fw-regular: 400;

    /* ---- Elevation ---- */
    --eng-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* ---------- Form inputs — Etisalat red focus state (overrides Bootstrap blue) ---------- */
.form-control:focus {
    border-color: var(--eng-red);                   /* #E00800 */
    box-shadow: 0 0 0 0.2rem rgba(224, 8, 0, 0.25); /* --eng-red @ 25% */
    outline: 0;
}

/* ---------- Page / section backgrounds ---------- */
html.WebAppOperator-04.etisalat-light,
.WebAppOperator-04.etisalat-light #webApp-body {
    background: var(--eng-bg) !important;
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .homeSec2,
.WebAppOperator-04.etisalat-light .homeSec3,
.WebAppOperator-04.etisalat-light .homeSec4 {
    background-image: none !important;
    background-color: var(--eng-bg) !important;
}

/* Homepage section reorder + hide promo block (light theme only).
   #webApp_content is .d-flex.flex-column, so these <section>s are flex children.
   Negative order pulls the hero + tournaments to the front; everything else
   (redeem, games, footer, popups) stays at order:0 in natural document order. */
.WebAppOperator-04.etisalat-light #webApp_content > .homeSec2 {
    display: none !important;
}

.WebAppOperator-04.etisalat-light #webApp_content > .upperBanner,
.WebAppOperator-04.etisalat-light #webApp_content > .upperBannerMobile {
    order: -3;
}

.WebAppOperator-04.etisalat-light #webApp_content > .homeSec4 {
    order: -2;   /* Upcoming Tournaments */
}

/* Redeem & Enjoy before AAA Games (per request): hero -> tournaments -> redeem -> games */
.WebAppOperator-04.etisalat-light #webApp_content > .homeSec-redeem {
    order: -1;
}

/* The page footer (brand + © + FAQ/Terms/About/Contact/Support links) is not part
   of the Figma home screen — hide it on the light theme (the fixed bottom nav stays). */
.WebAppOperator-04.etisalat-light #webApp_content > .Footer {
    display: none !important;
}

/* keep content clear of the fixed bottom nav — its space must clear the nav height */
.WebAppOperator-04.etisalat-light #webApp-body {
    padding-bottom: 80px;
}

/* Cap the app content width on large screens. !important is required to beat the
   base site.css/tournament.css `.container { max-width: 1315px !important }`. */
.WebAppOperator-04.etisalat-light .container {
    max-width: 1024px !important;
}

/* ---------- Header (white, red icons) ---------- */
.WebAppOperator-04.etisalat-light header {
    background: var(--eng-card) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.WebAppOperator-04.etisalat-light #header-top,
.WebAppOperator-04.etisalat-light #header-top:has(.topHeader-user-profile) {
    background: var(--eng-card) !important;
    padding: 10px 0 !important;
}

.WebAppOperator-04.etisalat-light #header-mid {
    background: var(--eng-card) !important;
}

/* The top header (#header-top) now carries the e&/Engage logo at every width
   (the light .header-logo rule keeps it visible on mobile too). So the separate
   mobile logo bar (#header-mid) is redundant and would show a SECOND logo —
   hide it at all widths. */
.WebAppOperator-04.etisalat-light #header-mid {
    display: none !important;
}

.WebAppOperator-04.etisalat-light .header-logo img {
    border-right: 0 !important;
}

/* Top bar layout: logo on the left, controls grouped on the right,
   everything vertically centered on a single horizontal line */
.WebAppOperator-04.etisalat-light #header-top .row {
    align-items: center;
}

.WebAppOperator-04.etisalat-light #topHeader-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
}

.WebAppOperator-04.etisalat-light #topHeader-right .topHeader-user-login,
.WebAppOperator-04.etisalat-light #topHeader-right .topHeader-user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* ----- New brand logo + "Engage" wordmark ----- */
.WebAppOperator-04.etisalat-light .header-logo {
    max-width: none;
    height: auto;
    display: flex;
    align-items: center;
    align-self: center;
    overflow: visible;
    text-decoration: none !important;
}

.WebAppOperator-04.etisalat-light .eng-logo-light {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* "Engage" wordmark sits inside the logo <a> — kill the link underline */
.WebAppOperator-04.etisalat-light .header-logo:hover,
.WebAppOperator-04.etisalat-light .eng-brand-text {
    text-decoration: none !important;
}

.WebAppOperator-04.etisalat-light .eng-brand-logo {
    height: 40px;
    width: auto;
    max-width: none !important;
    border-right: 0 !important;
}

.WebAppOperator-04.etisalat-light .eng-brand-logo-mobile {
    height: 36px;
    width: auto;
    max-width: none !important;
    border-right: 0 !important;
}

.WebAppOperator-04.etisalat-light .eng-brand-text {
    color: var(--eng-muted);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    padding-left: 12px;
    border-left: 1px solid var(--eng-border);
}

/* Phone tweaks: keep the "Engage" wordmark (per the mock) but shrink it + the logo
   so logo + Engage + the right-side controls still fit a crowded narrow row. */
@media (max-width: 600px) {
    /* Keep the "Engage" wordmark visible on mobile (per the mock), just smaller +
       tighter so logo + Engage + the right-side controls fit a ~360px row. */
    .WebAppOperator-04.etisalat-light .eng-brand-text {
        display: inline-block;   /* was display:none */
        font-size: 1rem;         /* was inherited 1.25rem */
        padding-left: 8px;       /* was 12px; keep the border-left divider */
    }

    .WebAppOperator-04.etisalat-light .eng-brand-logo {
        height: 32px;            /* was 40px — claw back width */
    }

    .WebAppOperator-04.etisalat-light .eng-logo-light {
        gap: 8px;                /* was 12px — tighten logo ↔ wordmark */
    }

    /* hide the "Have an account?" prompt in the logged-out header on mobile;
       the Login button (.btn-user-login) remains, so login still works */
    .WebAppOperator-04.etisalat-light .qst-user-login:not(.btn-user-top) {
        display: none !important;
    }

    /* legacy hacks shift the Login button sideways at <=480px (ENHeaderFix:
       right:20px, PashtoHeaderFix similar) — neutralize them so it aligns
       with the flex row in the new light header */
    .WebAppOperator-04.etisalat-light .ENHeaderFix,
    .WebAppOperator-04.etisalat-light .PashtoHeaderFix {
        right: 0 !important;
    }

    /* base mobile CSS sets .topHeader-user-login width:100% (+ justify-content:center),
       which centers the Login + EN in the row. Keep them a compact group pinned right. */
    .WebAppOperator-04.etisalat-light .topHeader-user-login {
        width: auto !important;
        margin-left: auto !important;
        justify-content: flex-end !important;
    }

    .WebAppOperator-04.etisalat-light .topHeader-user-login .search-tournaments-select {
        margin: 0 !important;
    }
}

.WebAppOperator-04.etisalat-light #header-mid .WebApp3LogoContainer {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ----- Right-side controls ----- */
.WebAppOperator-04.etisalat-light .btn-user-top,
.WebAppOperator-04.etisalat-light .btn-user-top p {
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .btn-user-top i,
.WebAppOperator-04.etisalat-light .search-btn .fa-search,
.WebAppOperator-04.etisalat-light .btn-user-ntf i {
    color: var(--eng-text) !important;
}

/* Bell + profile + login become circular icon buttons */
.WebAppOperator-04.etisalat-light .btn-user-ntf,
.WebAppOperator-04.etisalat-light .btn-user-profile,
.WebAppOperator-04.etisalat-light .btn-user-login {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--eng-bg) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.WebAppOperator-04.etisalat-light .btn-user-ntf i,
.WebAppOperator-04.etisalat-light .btn-user-profile i,
.WebAppOperator-04.etisalat-light .btn-user-login i {
    font-size: 1.1rem;
    color: var(--eng-text) !important;
    /* base .btn-user-top i has margin-right:0.25rem !important which pushes the
       glyph off-center in the round button — zero it so it centers */
    margin: 0 !important;
}

/* Profile is icon-only in the mock */
.WebAppOperator-04.etisalat-light .btn-user-profile p {
    display: none !important;
}

/* Login: collapse its bare "Login" text node so it's icon-only like profile/bell.
   The text sits directly after the <i> (no span), so zero the parent font and let
   the icon re-assert its own size below. */
.WebAppOperator-04.etisalat-light .btn-user-login {
    font-size: 0 !important;   /* beats base .btn-user-top font-size:.9rem !important */
    line-height: 0;
    overflow: hidden;
}

.WebAppOperator-04.etisalat-light .btn-user-login i {
    font-size: 1.1rem !important;  /* beats base .btn-user-top i 1.2rem !important */
}

/* Notification badge as a small red dot on the circular bell */
.WebAppOperator-04.etisalat-light .dropdown-user-ntf {
    position: relative;
}

.WebAppOperator-04.etisalat-light .btn-user-ntf .label-ntf {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 0.62rem;
    text-align: center;
    border: 2px solid var(--eng-card);
}

.WebAppOperator-04.etisalat-light .label-ntf,
.WebAppOperator-04.etisalat-light .btn-user-coins .label-ntf {
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

/* Coins button: hidden in the logged-in header (per request) */
.WebAppOperator-04.etisalat-light .btn-user-coins {
    display: none !important;
}

/* Language "EN" as a boxed pill (override the dark inline background) */
.WebAppOperator-04.etisalat-light .search-tournaments-select select,
.WebAppOperator-04.etisalat-light .languageDrop {
    background-color: var(--eng-bg) !important;
    color: var(--eng-text) !important;
    border: 1px solid var(--eng-border) !important;
    border-radius: 8px !important;            /* was 10px — smaller pill */
    padding: 6px 22px 6px 10px !important;    /* was 8px 28px 8px 12px */
    font-size: var(--eng-fs-meta);            /* 12px */
    font-weight: 600;
}

.WebAppOperator-04.etisalat-light .search-tournaments-select i,
.WebAppOperator-04.etisalat-light .search-box .fa-angle-down,
.WebAppOperator-04.etisalat-light .search-box button {
    color: var(--eng-text) !important;
}

/* the chevron sits on top of the <select>; let clicks pass through to it so
   clicking the arrow opens the dropdown. Pull it in + recenter for the
   smaller pill (base is right:15px / line-height:2.5 for the larger box). */
.WebAppOperator-04.etisalat-light .search-tournaments-select i {
    pointer-events: none;
    right: 8px;          /* was 15px */
    font-size: 11px;
    line-height: 2.2;    /* re-center vertically in the shorter pill */
}

/* EN language pill: drop the dropdown arrow and shrink it to hug the label.
   :has(.languageDrop) keeps this off the logged-in search select (same wrapper class). */
.WebAppOperator-04.etisalat-light .search-tournaments-select:has(.languageDrop) i {
    display: none;
}

.WebAppOperator-04.etisalat-light .search-tournaments-select:has(.languageDrop) {
    min-width: 0;        /* base forces min-width:75px — let it shrink to "EN" */
}

.WebAppOperator-04.etisalat-light .languageDrop {
    width: auto !important;        /* base sets width:100% — hug the label instead */
    padding: 4px 10px !important;  /* no arrow → symmetric + smaller */
    border-radius: 6px !important;
    font-size: 11px;
    /* center the value so the space on the left and right of "EN" is equal
       (the select sizes to the widest option, so EN can sit off-center) */
    text-align: center;
    text-align-last: center;
}

/* logged-out header: the language dropdown has an inline margin-left:15px on top
   of the flex gap, leaving too much space before the EN pill — use the gap only.
   Also pull EN ahead of the Login button (DOM order is qst → login → EN) so it
   sits first in the group, per the mock. order works in flex/RTL direction too. */
.WebAppOperator-04.etisalat-light .topHeader-user-login .search-tournaments-select {
    margin-left: 0 !important;
    order: -1;
}

/* "Already have an account?" prompt was green (old theme) — use the red theme */
.WebAppOperator-04.etisalat-light .qst-user-login {
    color: var(--eng-red) !important;
}

/* Search box blends with the light header */
.WebAppOperator-04.etisalat-light .search-box,
.WebAppOperator-04.etisalat-light .search-box input,
.WebAppOperator-04.etisalat-light .search-box button {
    background-color: var(--eng-bg) !important;
    color: var(--eng-text) !important;
    border-radius: 10px;
}

.WebAppOperator-04.etisalat-light .search-box input {
    border-left: 1px solid var(--eng-border) !important;
}

/* ---------- Hero banner (carousel) ---------- */
.WebAppOperator-04.etisalat-light .upperBanner,
.WebAppOperator-04.etisalat-light .upperBannerMobile {
    background: transparent !important;
    padding: 16px 0 0;
    min-height: 0;       /* base sets 300px — let the static hero define its own height */
    max-height: none;
}

/* Constrain the banner to the same .container width as the header/content so
   it lines up with the logo. position:relative makes the carousel arrows
   (.olt-prev/.olt-next, absolutely positioned) align to the container edges. */
.WebAppOperator-04.etisalat-light .eng-banner-container {
    position: relative;
}

.WebAppOperator-04.etisalat-light .upperBanner .owl-carousel img,
.WebAppOperator-04.etisalat-light .upperBannerMobile .owl-carousel img {
    border-radius: var(--eng-radius);
    overflow: hidden;
}

/* ---------- Static home hero ("Play, Compete & Win Big") ----------
   Replaces the dynamic carousel for the light theme. Mirrors the .redeem-hero
   pattern; flex column + align-self:flex-end/margin-top:auto puts the CTA
   bottom-right (LTR) / bottom-left (RTL) automatically. */
.WebAppOperator-04.etisalat-light .eng-static-hero {
    position: relative;
    max-width: none;            /* was 560px — fill the content container on desktop */
    min-height: 150px;
    margin: 0 auto;
    padding: 16px;
    border-radius: var(--eng-radius-card);
    /* Figma "Gradient/Red" (node 24:1155): radial, bright red top-left -> deep maroon */
    background: radial-gradient(circle at 3% 8%, #E73933 0%, #4B0300 100%);
    color: var(--eng-on-red);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.WebAppOperator-04.etisalat-light .eng-static-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--eng-gap);
    max-width: 220px;            /* Figma: text column ~half width, clears the CTA */
}

.WebAppOperator-04.etisalat-light .eng-static-hero-title {
    margin: 0;
    font-weight: 600;
    font-size: 20px;            /* Figma style_NI56A1 */
    line-height: 1.3;
    letter-spacing: -0.3px;     /* Figma -1.5% of 20px */
}

.WebAppOperator-04.etisalat-light .eng-static-hero-sub {
    margin: 0;
    font-weight: 400;
    font-size: 12px;           /* Figma Suisse Book 12px */
    line-height: 1.4;
    opacity: 0.7;              /* Figma white Med-emphasis 70% */
}

.WebAppOperator-04.etisalat-light .eng-static-hero-cta {
    /* Figma: button absolutely placed bottom-right (x:243,y:95 in 350x140),
       beside the subtitle — not stacked under the whole text block. */
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-block;
    width: auto;                        /* base `.upperBannerMobile a` forces 100%/80% — undo it */
    height: auto;
    background: var(--eng-on-red);      /* white */
    color: var(--eng-text) !important;  /* Figma Main Color/Midnight #191329 */
    border-radius: 999px;               /* Figma pill (radius 39px) */
    padding: 8px 20px;                  /* Figma 6px 20px (+ a touch for tap target) */
    font-weight: 600;
    font-size: 12px;                    /* Figma Suisse Semi-Bold 12px */
    text-decoration: none;
    white-space: nowrap;
}

/* RTL: mirror the button to the bottom-left */
html[dir="rtl"].WebAppOperator-04.etisalat-light .eng-static-hero-cta {
    right: auto;
    left: 16px;
}

.WebAppOperator-04.etisalat-light .eng-static-hero-cta:hover {
    opacity: 0.92;
}

/* ---------- Section header bars ("Upcoming Tournaments" + View all) ---------- */
.WebAppOperator-04.etisalat-light .eng-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    margin: 18px 0 12px;
}

.WebAppOperator-04.etisalat-light .eng-section-title {
    font-size: 16px; /* Figma Suisse Semi-Bold 16 */
    font-weight: 600;
    color: var(--eng-text);
    margin: 0;
}

.WebAppOperator-04.etisalat-light .eng-viewall {
    color: var(--eng-red) !important;
    font-weight: 400; /* Figma Suisse Regular 12 */
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.WebAppOperator-04.etisalat-light .eng-viewall:hover {
    color: var(--eng-red-dark) !important;
}

/* Legacy green bar -> transparent light header */
.WebAppOperator-04.etisalat-light .section3Bar,
.WebAppOperator-04.etisalat-light .title-bar,
.WebAppOperator-04.etisalat-light .title-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--eng-text) !important;
    font-weight: 700;
    text-align: start !important;
    padding-left: 4px;
}

/* ---------- Redeem & Enjoy CTA card ---------- */
.WebAppOperator-04.etisalat-light .eng-redeem-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--eng-redeem-gradient); /* Figma fill_PCZH2X */
    border-radius: var(--eng-radius-card);
    padding: 18px 20px;
    margin: 8px 0 4px;
    box-shadow: var(--eng-shadow);
    overflow: visible;        /* let the trophy pop out bottom-right */
}

.WebAppOperator-04.etisalat-light .eng-redeem-cta .erc-text h4 {
    font-weight: 600; /* Figma Suisse Semi-Bold 16 (style_91NNXN) */
    font-size: 16px;
    margin: 0 0 4px;
    color: var(--eng-text);
}

.WebAppOperator-04.etisalat-light .eng-redeem-cta .erc-text p {
    color: #6B6B6B;          /* Figma fill_W4TVVX */
    font-size: 12px; /* Figma Suisse Regular 12 */
    margin: 0 0 12px;
}

.WebAppOperator-04.etisalat-light .eng-redeem-cta .erc-btn {
    display: inline-block;
    background: var(--eng-red);
    color: #fff !important;
    border-radius: 999px;
    padding: 6px 20px;       /* Figma button padding (was 9px 22px) */
    font-size: 12px;         /* Figma Suisse 12 */
    font-weight: 600;
    text-decoration: none;
}

.WebAppOperator-04.etisalat-light .eng-redeem-cta .erc-btn:hover {
    background: var(--eng-red-dark);
}

.WebAppOperator-04.etisalat-light .eng-redeem-cta .erc-text {
    max-width: 60%;          /* keep text clear of the absolutely-placed trophy */
}

.WebAppOperator-04.etisalat-light .eng-redeem-cta .erc-img {
    position: absolute;
    right: 8px;
    bottom: -4px;            /* Figma: trophy (134x119) pops out the bottom-right */
    width: 130px;
    height: auto;
}

/* RTL: mirror the trophy to the bottom-left */
html[dir="rtl"].WebAppOperator-04.etisalat-light .eng-redeem-cta .erc-img {
    right: auto;
    left: 8px;
}

.WebAppOperator-04.etisalat-light .eng-redeem-cta i.erc-img {
    font-size: 56px;
    color: var(--eng-red);
    flex-shrink: 0;
}

/* ---------- AAA Games — static responsive grid (Figma: ~169x100 cards, no carousel) ---------- */
.WebAppOperator-04.etisalat-light .homeSec3gamesCont {
    display: grid;
    /* Max 5 per row on EVERY screen (never 6+): each column's min width is the larger of
       140px and a 1/5 share of the row (minus the 4 column-gaps), so auto-fill can never fit
       a 6th track. On narrow screens the 140px floor wins -> fewer columns, fluid
       (~2 on mobile, 3-4 on tablet); from ~740px up it settles at exactly 5. */
    grid-template-columns: repeat(auto-fill, minmax(max(140px, (100% - 4 * 10px) / 5), 1fr));
    gap: 20px 10px;              /* 20px between rows (clears the name labels), 10px between columns */
    margin: 0 0 40px !important; /* bottom space under the games (clears the fixed bottom nav) */
}

/* flatten the rows-of-5 wrappers and drop their overflow-x scroll (the "carousel") */
.WebAppOperator-04.etisalat-light .homeSec3gamesCont .containersec2,
.WebAppOperator-04.etisalat-light .homeSec3gamesCont .containersec2Mobile {
    display: contents;
}

.WebAppOperator-04.etisalat-light .homeSec3gamerowcont {
    width: auto !important;      /* base 20%; grid column (1fr) controls the width */
    padding-top: 0 !important;   /* base 30px */
    background: transparent;
}

.WebAppOperator-04.etisalat-light .homeSec3gamerowcont > a {
    display: block;
    text-decoration: none;
}

.WebAppOperator-04.etisalat-light .homeSec3gameimg {
    width: 100% !important;
    height: auto !important;            /* base 150px square */
    aspect-ratio: 169 / 100;            /* Figma card proportions (169x100) */
    margin: 0 !important;               /* base mobile rule adds margin: 0 15px */
    object-fit: cover;
    border: 0 !important;
    border-radius: 12px !important;     /* Figma card radius */
    box-shadow: none;
    background: var(--eng-bg-alt);      /* #F4F3F5 Figma "Component Background" */
}

/* game name under the card (Figma: Suisse Semi-Bold 12, #191329, centered) */
.WebAppOperator-04.etisalat-light .homeSec3gamename {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--eng-text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Tournament cards ---------- */
.WebAppOperator-04.etisalat-light .tournaments-item {
    background: var(--eng-card) !important;
    border-radius: var(--eng-radius) !important;
    box-shadow: var(--eng-shadow);
    overflow: hidden;
}

.WebAppOperator-04.etisalat-light .tournaments-item-description {
    background-color: var(--eng-card) !important;
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .tournaments-item-description .tid-title,
.WebAppOperator-04.etisalat-light .RedirectLinkRegister,
.WebAppOperator-04.etisalat-light .tid-date-start,
.WebAppOperator-04.etisalat-light .tid-date .tid-date-end {
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .tournaments-item-pool-prize {
    background: transparent !important;
}

.WebAppOperator-04.etisalat-light .tip-PrizeAmount .tip-PrizeAmount-price,
.WebAppOperator-04.etisalat-light .tip-PrizeAmount .tip-PrizeAmount-cash {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .tournaments-item-btn {
    background-color: var(--eng-red) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px;
}

.WebAppOperator-04.etisalat-light .tournaments-item-btn:hover {
    background-color: var(--eng-red-dark) !important;
}

.WebAppOperator-04.etisalat-light .tournaments-item-label.label-Upcoming,
.WebAppOperator-04.etisalat-light .tournaments-item-label.label-Ongoing {
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

/* selectors / dropdowns */
.WebAppOperator-04.etisalat-light .landing-tournaments-select select,
.WebAppOperator-04.etisalat-light .landing-games-select select {
    color: var(--eng-text) !important;
    background-color: var(--eng-card) !important;
    border-color: var(--eng-border) !important;
}

/* ---------- Games-list page (gamelist) — light grid + dark titles ---------- */
.WebAppOperator-04.etisalat-light .landing-games-body {
    background-color: var(--eng-bg) !important;
}

.WebAppOperator-04.etisalat-light .tournaments-games-grid {
    background-color: var(--eng-card) !important;
    color: var(--eng-text) !important;
    border-radius: var(--eng-radius);
}

.WebAppOperator-04.etisalat-light .tournaments-games-grid li span {
    color: var(--eng-text) !important;
}

/* rounded game thumbnails (overflow:hidden clips the image + locked overlay) */
.WebAppOperator-04.etisalat-light .tournaments-games-grid li .img {
    border-radius: var(--eng-radius) !important;
    overflow: hidden;
    box-shadow: var(--eng-shadow);
}

/* ---------- Redeem page — light page + new horizontal item cards ---------- */
.WebAppOperator-04.etisalat-light .PrizesContainer {
    background-color: var(--eng-bg) !important;
    color: var(--eng-text) !important;
    margin-top: 0;
}

/* Align the redeem content with the standard container gutter, like every other
   page. Base site.css adds large/zero side padding here (3.938em desktop, 1em
   tablet, 0 on small phones) and full-bleeds .profile-contain2, so the content
   never lined up with the rest of the app. Neutralize the side padding and the
   negative margins and let the .container gutter provide the inset. */
.WebAppOperator-04.etisalat-light .profile-contain2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.WebAppOperator-04.etisalat-light .PrizesContentContainer {
    padding: 12px 0 24px !important;
    margin-top: 0;
}

/* Hero block "Everyone is a Winner!" — Figma 29:3217 (gradient fill_34P5PT) */
.WebAppOperator-04.etisalat-light .redeem-hero {
    position: relative;
    max-width: 1024px;
    min-height: 143px; /* Figma layout_OSUDIA (350 x 142.75) */
    margin: 0 auto 12px;
    padding: 20px;
    border-radius: var(--eng-radius-card);
    background-color: var(--eng-red-dark); /* fallback behind photo */
    color: var(--eng-on-red);
    overflow: hidden;
}

/* Background photo + red tint sit on a pseudo so they can mirror in RTL
   without flipping the text. Figma: photo under the 252deg red overlay. */
.WebAppOperator-04.etisalat-light .redeem-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--eng-red-dark);
    background-image: var(--eng-hero-overlay), url('../pictures/img/etisalat/redeem-bg.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

html[dir="rtl"].WebAppOperator-04.etisalat-light .redeem-hero::before {
    transform: scaleX(-1); /* mirror the background in RTL */
}

.WebAppOperator-04.etisalat-light .redeem-hero-content {
    position: relative;
    z-index: 1; /* keep text above the pseudo background */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Figma layout_Z07QUP */
    max-width: 245px; /* Figma content width 244.54 */
}

.WebAppOperator-04.etisalat-light .redeem-hero-title {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Figma layout_0RQEL2 (two lines) */
    margin: 0;
    font-weight: 600; /* Suisse Semi Bold (Figma style_LWYU4H) */
    font-size: 24px; /* Figma 24px */
    line-height: 25.2px; /* Figma */
    letter-spacing: -0.5px; /* Figma -2.08% of 24px */
}

.WebAppOperator-04.etisalat-light .redeem-hero-title-2 {
    font-style: italic; /* Figma "Winner!" Semi Bold Italic (style_3H6MG3) */
}

.WebAppOperator-04.etisalat-light .redeem-hero-sub {
    margin: 0;
    font-weight: 400; /* Figma style_M87NTA */
    font-size: 13px; /* Figma 13px */
    line-height: 18.2px; /* Figma */
    opacity: 0.9; /* Figma 90% */
}

.WebAppOperator-04.etisalat-light .PrizesSubTitle {
    color: var(--eng-text) !important;
}

/* stack the items as a centered column of cards */
.WebAppOperator-04.etisalat-light .image-container:has(.redeem-item) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 1024px;
    margin: 1.5em auto;
}

.WebAppOperator-04.etisalat-light .redeem-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--eng-card);
    border: 1px solid var(--eng-border);
    border-radius: var(--eng-radius-card);
    box-shadow: var(--eng-shadow);
    padding: 12px 15px 12px 12px; /* Figma layout_HZ9KFI */
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.WebAppOperator-04.etisalat-light .redeem-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    opacity: 1 !important;
}

.WebAppOperator-04.etisalat-light .redeem-item-icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--eng-thumb-gradient); /* soft-pink product tile (Figma) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;          /* thin pink frame around the data-stack image */
}

/* the base rule .image-container img sizes items at 33% — reset for the icon */
.WebAppOperator-04.etisalat-light .redeem-item-icon img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;   /* show the full rewardItem.png, centered */
}

.WebAppOperator-04.etisalat-light .redeem-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto; /* grow so the Redeem button sits at the right edge */
}

.WebAppOperator-04.etisalat-light .redeem-item-title {
    color: var(--eng-text);
    font-weight: 700;
    font-size: 1rem;
}

.WebAppOperator-04.etisalat-light .redeem-item-sub {
    color: var(--eng-muted);
    font-size: 0.8rem;
}

.WebAppOperator-04.etisalat-light .redeem-item-btn {
    flex: 0 0 auto;
    background: var(--eng-red);
    color: #fff !important;
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.WebAppOperator-04.etisalat-light .redeem-item-btn:hover {
    background: var(--eng-red-dark);
}

/* "Available Rewards" heading */
.WebAppOperator-04.etisalat-light .redeem-rewards-title {
    max-width: 1024px;
    margin: 8px auto 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--eng-text);
    text-align: start;
}

/* Coins balance card — Figma "Coin balance" (16:24478): flat #F4F4F4, no border/shadow.
   display/position/height use !important to beat base site.css @media(max-width:670px)
   rules (display:inline-block !important + absolute pill styling) so mobile == desktop. */
.WebAppOperator-04.etisalat-light .my-coins-box-mobile {
    display: flex !important;
    align-items: center;
    gap: 10px; /* Figma layout_68I3OB */
    position: static;          /* cancel base @media absolute/relative */
    height: auto;              /* cancel base @media height:82% */
    background: #F4F4F4;        /* Figma fill_X9J1IT */
    border: 0;
    border-radius: var(--eng-radius-card);
    box-shadow: none;
    padding: 14px 18px; /* Figma */
    max-width: 1024px;
    margin: 0 auto 12px;
    width: 100%;
    color: var(--eng-text);
}

/* coin badge — coins.png is a ready-made 44x44 red-circle badge (red + padding
   are baked into the image, so no CSS background/padding here) */
.WebAppOperator-04.etisalat-light .my-coins-box-mobile img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;                 /* cancel base @media margin-right:10px */
    background: none;
    padding: 0;
    object-fit: contain;
}

/* stacked text: muted label over the bold amount (matches attached / Figma) */
.WebAppOperator-04.etisalat-light .my-coins-box-mobile span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--eng-muted);
    font-size: 14px;
    line-height: 1.25;
}

.WebAppOperator-04.etisalat-light .my-coins-box-mobile .user-coins {
    color: var(--eng-text);
    font-weight: 700; /* Suisse Semi Bold */
    font-size: 22px; /* prominent amount on its own line */
    line-height: 1.1;
}

/* Info banner (reuse PrizesSubTitle) -> soft pink with red "!" badge */
.WebAppOperator-04.etisalat-light .PrizesSubTitle {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1024px;
    margin: 0 auto 16px !important;
    background: var(--eng-red-soft);
    color: var(--eng-text) !important;
    border-radius: var(--eng-radius);
    padding: 14px 16px;
    text-align: start !important;
    font-size: 0.85rem;
    line-height: 1.4;
}

.WebAppOperator-04.etisalat-light .PrizesSubTitle::before {
    content: "!";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--eng-red);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.WebAppOperator-04.etisalat-light .PrizesSubTitle br {
    display: none;
}

/* Top header banner removed in light theme — replaced by the gradient hero */
.WebAppOperator-04.etisalat-light .PrizesHeaderbg {
    display: none !important;
}

.WebAppOperator-04.etisalat-light .landing-tournaments-select i {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .landing-tournaments-header {
    background: var(--eng-red) !important;
}

/* carousel arrows */
.WebAppOperator-04.etisalat-light .olt-prev,
.WebAppOperator-04.etisalat-light .olt-next {
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

/* =============================================================
   Tournament list redesign (tabs + responsive grid of cards)
   Replaces the category dropdown with pill tabs and the owl
   carousel with a responsive grid. Used on the homepage homeSec4
   and the /tournaments page (both share these classes).
   ============================================================= */

/* ----- Tabs (replace the dropdown) ----- */
/* hide the original <select> dropdown (kept in DOM; tabs drive its change event) */
.WebAppOperator-04.etisalat-light .landing-tournaments-select,
.WebAppOperator-04.etisalat-light .landing-games-select {
    display: none !important;
}

/* neutralize the red header bar that wrapped the dropdown on /tournaments */
.WebAppOperator-04.etisalat-light .landing-tournaments-header {
    background: transparent !important;
    padding: 0 !important;
}

/* Align the category tabs with the cards (and the rest of the container):
   base tournament.css zeroes this column's padding at <=1330px, while the
   cards live in a sibling .col-12 that keeps the Bootstrap gutter — restore
   the same gutter here so both columns share identical left/right insets. */
.WebAppOperator-04.etisalat-light .col-12:has(.landing-tournaments-header) {
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
}

.WebAppOperator-04.etisalat-light .eng-tourn-tabs {
    display: flex;
    gap: 8px;                       /* Figma chip gap 8px */
    overflow-x: auto;
    padding: 10px 0 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.WebAppOperator-04.etisalat-light .eng-tourn-tabs::-webkit-scrollbar {
    display: none;
}

/* Home "Upcoming Tournaments" preview: hide the category tabs (not in the Figma
   home); the full /tournaments page keeps them for filtering. */
.WebAppOperator-04.etisalat-light .homeSec4 .eng-tourn-tabs {
    display: none !important;
}

/* Tighten the gap between the title and the cards: the category bar is now empty
   (select + tabs hidden), so collapse it and pull the cards up under the heading. */
.WebAppOperator-04.etisalat-light .homeSec4 .section3Bar {
    display: none !important;
}

.WebAppOperator-04.etisalat-light .homeSec4 .eng-section-head {
    margin-bottom: 4px;
}

.WebAppOperator-04.etisalat-light .homeSec4 .landing-tournaments-body {
    margin-top: 0 !important;
}

/* Figma "Chips": unselected = white pill, 2px light border, dark label */
.WebAppOperator-04.etisalat-light .eng-tab {
    flex: 0 0 auto;
    background: var(--eng-card);              /* #FFFFFF */
    border: 2px solid rgba(25, 19, 41, 0.1);  /* Figma unselected stroke */
    color: var(--eng-text);                   /* #191329 */
    border-radius: 24px;                      /* pill */
    padding: 12px 24px;                       /* Figma chip padding */
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s all;
}

/* selected -> solid midnight fill, white label (Figma Selected state) */
.WebAppOperator-04.etisalat-light .eng-tab.active {
    background: var(--eng-text);              /* #191329 midnight */
    border-color: var(--eng-text);           /* keep box size between states */
    color: var(--eng-on-red);                /* #FFFFFF */
}

/* ----- Carousel -> responsive grid (scoped to the tournament carousel only,
   so the hero banner #owl-demo is untouched) ----- */
.WebAppOperator-04.etisalat-light .owl-landing-tournaments.owl-loaded {
    display: block !important;
}

.WebAppOperator-04.etisalat-light .owl-landing-tournaments .owl-stage-outer {
    overflow: visible !important;
    height: auto !important;
}

.WebAppOperator-04.etisalat-light .owl-landing-tournaments .owl-stage {
    display: grid !important;
    transform: none !important;
    width: 100% !important;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 576px) {
    .WebAppOperator-04.etisalat-light .owl-landing-tournaments .owl-stage {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .WebAppOperator-04.etisalat-light .owl-landing-tournaments .owl-stage {
        grid-template-columns: repeat(3, 1fr);
    }
}

.WebAppOperator-04.etisalat-light .owl-landing-tournaments .owl-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.WebAppOperator-04.etisalat-light .owl-landing-tournaments .owl-item.cloned {
    display: none !important;
}

/* hide the tournament carousel arrows (NOT the hero banner arrows) */
.WebAppOperator-04.etisalat-light .landing-tournaments-body .olt-prev,
.WebAppOperator-04.etisalat-light .landing-tournaments-body .olt-next {
    display: none !important;
}

/* ----- Card redesign ----- */
.WebAppOperator-04.etisalat-light .tournaments-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--eng-card) !important;
    border: 1px solid var(--eng-border) !important;     /* Figma 1px #ECECEC stroke */
    border-radius: var(--eng-radius-card) !important;   /* Figma 10px (was 16px) */
    overflow: hidden;
    box-shadow: var(--eng-shadow);
    height: 100%;
}

/* banner image on top. The <a.tournaments-item-img> and <a.tournaments-item-pool-prize>
   are each wrapped in a bare <div>, so flex `order` must go on the wrapper (direct child). */
.WebAppOperator-04.etisalat-light .tournaments-item > div:has(.tournaments-item-img) {
    order: 1;
}

.WebAppOperator-04.etisalat-light .tournaments-item > div:has(.tournaments-item-pool-prize) {
    order: 3;
}

.WebAppOperator-04.etisalat-light .tournaments-item-img {
    order: 1;
    display: block;
    background: var(--eng-navy);   /* Figma image area #002948 (shows behind logos) */
}

.WebAppOperator-04.etisalat-light .tournaments-item-img img.FixMyHeight {
    width: 100%;
    height: 140px;                 /* Figma image area 140 (was 160) */
    object-fit: cover;
    max-height: none;
}

.WebAppOperator-04.etisalat-light .tournaments-item-img i {
    display: none;
}

/* Hide promo/ad cards only (just a banner image, not a real tournament).
   Real tournament cards keep their .tournaments-item-img image. */
.WebAppOperator-04.etisalat-light .owl-landing-tournaments .owl-item:has(.tournaments-item-img-ads),
.WebAppOperator-04.etisalat-light .tournaments-item:has(.tournaments-item-img-ads),
.WebAppOperator-04.etisalat-light .tournaments-item-img-ads {
    display: none !important;
}

/* status label overlaid on the image, top-left */
.WebAppOperator-04.etisalat-light .tournaments-item-label {
    top: 12px;
    left: 12px;
}

.WebAppOperator-04.etisalat-light .tournaments-item-label.label-Previous {
    background-color: var(--eng-muted) !important;
    color: #fff !important;
}

/* body: title + date */
.WebAppOperator-04.etisalat-light .tournaments-item-description {
    order: 2;
    padding: 12px 16px 0;
    height: auto;
}

.WebAppOperator-04.etisalat-light .tournaments-item-description .tid-title {
    font-size: 14px;                    /* Figma Suisse Semi-Bold 14 */
    font-weight: 600;
    color: var(--eng-text) !important;  /* Figma #191329 */
    text-transform: none;
}

.WebAppOperator-04.etisalat-light .tid-date,
.WebAppOperator-04.etisalat-light .tid-date .tid-date-start,
.WebAppOperator-04.etisalat-light .tid-date .tid-date-end {
    color: var(--eng-muted) !important;
    font-size: 0.8rem;
}

/* prize row (left) + Register button (bottom-right) */
.WebAppOperator-04.etisalat-light .tournaments-item-pool-prize {
    order: 3;
    background: transparent !important;
    padding: 8px 120px 16px 16px; /* right padding leaves room for the button */
    display: flex;
    align-items: center;
}

.WebAppOperator-04.etisalat-light .tournaments-item-pool-prize .tip-icon {
    display: none !important;
}

.WebAppOperator-04.etisalat-light .tip-PrizeAmount .tip-PrizeAmount-price {
    font-size: 14px !important;     /* Figma Suisse Semi-Bold 14 (was 20px/700) */
    font-style: normal;
    font-weight: 600;
    color: var(--eng-red) !important;
    width: auto;
}

.WebAppOperator-04.etisalat-light .tip-PrizeAmount .tip-PrizeAmount-price br {
    display: none;
}

.WebAppOperator-04.etisalat-light .tip-PrizeAmount .tip-PrizeAmount-cash {
    display: inline;
    width: auto !important;
    font-size: 14px !important;     /* match price — Figma "25,000 AFN" single size */
    font-weight: 600;
    color: var(--eng-red) !important;
    margin-left: 4px;
}

.WebAppOperator-04.etisalat-light .tournaments-item-btn {
    position: absolute;
    right: 16px;
    bottom: 14px;
    left: auto;
    transform: none;
    padding: 6px 20px;              /* Figma button padding */
    border-radius: 999px;
    font-size: 12px;                /* Figma Suisse 12 */
    z-index: 2; /* keep the button above the prize row / any glow */
}

/* Ad cards (type==2): the image is a background <span> with height:100%, which
   collapses to ~1px in the grid (no content to size against). Give it an explicit
   banner height so it shows. */
.WebAppOperator-04.etisalat-light .tournaments-item:has(.tournaments-item-img-ads) {
    min-height: 220px;
}

.WebAppOperator-04.etisalat-light .tournaments-item-img-ads,
.WebAppOperator-04.etisalat-light .tournaments-item-img-ads span {
    height: 220px !important;
    min-height: 100%;
}

/* ----- RTL (Dari / Pashto): mirror the tournament card layout. These
   out-specify both the LTR light rules above and the generic rtl.css. ----- */
html[dir="rtl"].WebAppOperator-04.etisalat-light .tournaments-item-description,
html[dir="rtl"].WebAppOperator-04.etisalat-light .tournaments-item-description .tid-title,
html[dir="rtl"].WebAppOperator-04.etisalat-light .tid-date {
    text-align: right;
}

html[dir="rtl"].WebAppOperator-04.etisalat-light .tid-date {
    justify-content: flex-start; /* date sits at the start (right) edge */
}

/* status label -> top-right */
html[dir="rtl"].WebAppOperator-04.etisalat-light .tournaments-item-label {
    left: auto;
    right: 12px;
}

/* prize row keeps its clearance on the button side (now the left) */
html[dir="rtl"].WebAppOperator-04.etisalat-light .tournaments-item-pool-prize {
    padding: 8px 16px 16px 120px;
}

html[dir="rtl"].WebAppOperator-04.etisalat-light .tip-PrizeAmount .tip-PrizeAmount-cash {
    margin-left: 0;
    margin-right: 4px;
}

/* Register button -> bottom-left */
html[dir="rtl"].WebAppOperator-04.etisalat-light .tournaments-item-btn {
    left: 16px;
    right: auto;
    transform: none;
}

/* ---------- Footer ---------- */
.WebAppOperator-04.etisalat-light .Footer {
    background-color: var(--eng-card) !important;
    border-top: 1px solid var(--eng-border);
    padding-bottom: 90px; /* clear bottom nav */
}

.WebAppOperator-04.etisalat-light .bottom,
.WebAppOperator-04.etisalat-light .bottom .middle li a,
.WebAppOperator-04.etisalat-light .Footer-links-list li a {
    color: var(--eng-text) !important;
}

/* top footer links: red on hover (was magenta/pink) */
.WebAppOperator-04.etisalat-light .bottom .middle li a:hover,
.WebAppOperator-04.etisalat-light .Footer-links-list li a:hover {
    color: var(--eng-red) !important;
    opacity: 1 !important;
}

.WebAppOperator-04.etisalat-light .bottom .middle li {
    border-right: 1px solid var(--eng-border) !important;
}

/* Single-line footer on desktop: logo left, links centered, copyright right.
   Gated at min-width:1001px so the ≤1000px .footerReverseEtisalate stack is untouched. */
@media (min-width: 1001px) {
    .WebAppOperator-04.etisalat-light .Footer .container {
        display: flex;
        align-items: center;
        gap: 24px;
        padding-top: 40px;
    }

    .WebAppOperator-04.etisalat-light .Footer .brand {
        padding: 0 !important;
        flex: 0 0 auto;
    }

    .WebAppOperator-04.etisalat-light .Footer .brand img {
        height: 40px;
        width: auto;
    }

    .WebAppOperator-04.etisalat-light .Footer .bottom {
        padding: 0 !important;
        flex: 1 1 auto;
    }

    .WebAppOperator-04.etisalat-light .Footer .bottom .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        margin: 0;
    }

    .WebAppOperator-04.etisalat-light .Footer .bottom .left,
    .WebAppOperator-04.etisalat-light .Footer .bottom .subMenuRespon {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto;
    }

    /* links centered, copyright pushed to the right */
    .WebAppOperator-04.etisalat-light .Footer .bottom .subMenuRespon {
        order: 1;
        flex: 1 1 auto;
        text-align: center;
    }

    .WebAppOperator-04.etisalat-light .Footer .bottom .left {
        order: 2;
    }
}

/* ---------- Logout / landing footer nav — flat design (grey inactive, red on
   hover; no dark hover box, no white text, no heavy circle) ---------- */
.WebAppOperator-04.etisalat-light .landing-footer {
    background-color: var(--eng-card) !important;
    border-top: 1px solid var(--eng-border);
}

.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px !important;
}

/* kill the dark "black box" hover */
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a:hover {
    background-color: transparent !important;
}

/* flatten the circle icon -> simple grey glyph */
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i {
    position: static !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    top: auto !important;
    margin: 0 auto !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    color: var(--eng-muted) !important;
}

/* Etisalat bottom-nav: replace the FontAwesome glyphs with the brand outline
   SVGs via CSS mask, so they recolor through the existing grey/active-red
   `color` cascade (background-color:currentColor). --eng-muted over white == #8C8994.
   Scoped to the 4 footer icons only (a stray fa-award stays a normal glyph). */
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-home,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-trophy,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-rocket,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-gift {
    display: inline-block;
    width: 24px !important;          /* beats the width:auto !important above */
    height: 24px !important;
    vertical-align: middle;
    background-color: currentColor !important;  /* beats background:transparent !important */
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}

/* drop the FontAwesome glyph so only the masked shape shows */
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-home::before,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-trophy::before,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-rocket::before,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-gift::before {
    content: "" !important;
}

.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-home {
    -webkit-mask-image: url("../pictures/img/etisalat/nav-home.svg");
    mask-image: url("../pictures/img/etisalat/nav-home.svg");
}
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-trophy {
    -webkit-mask-image: url("../pictures/img/etisalat/nav-tournaments.svg");
    mask-image: url("../pictures/img/etisalat/nav-tournaments.svg");
}
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-rocket {
    -webkit-mask-image: url("../pictures/img/etisalat/nav-games.svg");
    mask-image: url("../pictures/img/etisalat/nav-games.svg");
}
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a label i.fa-gift {
    -webkit-mask-image: url("../pictures/img/etisalat/nav-redeem.svg");
    mask-image: url("../pictures/img/etisalat/nav-redeem.svg");
}

/* labels/text grey (not white, not red) */
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a p,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item h6 {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--eng-muted) !important;
    margin-top: 0 !important;
    font-size: 0.72rem !important;
}

/* footer menu labels: capitalize (base site.css forces uppercase) */
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a p {
    text-transform: capitalize !important;
}

/* hover -> red icon + text */
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a:hover label,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a:hover label i,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a:hover p {
    color: var(--eng-red) !important;
}

/* selected (current page) -> red icon + text, with a small underline indicator */
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a.active label,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a.active label i,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a.active p {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a.active p {
    position: relative;
    /* base site.css sets overflow:hidden on this <p>, which clips the underline
       (::after sits at bottom:-4px, just below the <p>) — let it show */
    overflow: visible !important;
}

.WebAppOperator-04.etisalat-light .landing-footer .lfm-item a.active p::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--eng-red);
}

/* ---------- Modals / buttons -> red ---------- */
.WebAppOperator-04.etisalat-light .modal .modal-header,
.WebAppOperator-04.etisalat-light .webApp-modal-title {
    background: linear-gradient(90deg, var(--eng-red), var(--eng-red-dark)) !important;
}

/* rounded design for all modals + popups (overflow:hidden clips the
   header/banner/footer to the rounded corners) */
.WebAppOperator-04.etisalat-light .modal-content,
.WebAppOperator-04.etisalat-light .popup-content,
.WebAppOperator-04.etisalat-light .swal2-popup {
    border-radius: var(--eng-radius) !important;
    overflow: hidden;
}

.WebAppOperator-04.etisalat-light .Model-Btn-firstColor,
.WebAppOperator-04.etisalat-light .Model-Btn-secondColor,
.WebAppOperator-04.etisalat-light .packages-item-btn {
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

.WebAppOperator-04.etisalat-light .Model-Btn-firstColor:hover,
.WebAppOperator-04.etisalat-light .Model-Btn-secondColor:hover,
.WebAppOperator-04.etisalat-light .packages-item-btn:hover {
    background-color: var(--eng-red-dark) !important;
}

.WebAppOperator-04.etisalat-light .modal a,
.WebAppOperator-04.etisalat-light .webApp-modal-close .close,
.WebAppOperator-04.etisalat-light .packages-item-title,
.WebAppOperator-04.etisalat-light .subscription-tournaments-header h2 {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .swal2-confirm {
    background-color: var(--eng-red) !important;
}

/* scrollbars */
.WebAppOperator-04.etisalat-light body::-webkit-scrollbar-thumb,
.WebAppOperator-04.etisalat-light .games-listing::-webkit-scrollbar-thumb,
.WebAppOperator-04.etisalat-light .past-scroller::-webkit-scrollbar-thumb,
.WebAppOperator-04.etisalat-light .popup-html-content::-webkit-scrollbar-thumb {
    background: var(--eng-red) !important;
}

/* ---------- Profile accents ---------- */
.WebAppOperator-04.etisalat-light .prof-name .nation,
.WebAppOperator-04.etisalat-light .prof-tab.active,
.WebAppOperator-04.etisalat-light .right-body .friends-list li .location span,
.WebAppOperator-04.etisalat-light .friends-banner {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .Friends-btns a,
.WebAppOperator-04.etisalat-light .prize-item {
    background: var(--eng-red) !important;
}

/* =============================================================
   Bottom navigation bar
   ============================================================= */
.WebAppOperator-04.etisalat-light .eng-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: var(--eng-card);
    border-top: 1px solid var(--eng-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    padding: 6px 4px env(safe-area-inset-bottom, 6px);
}

.WebAppOperator-04.etisalat-light .eng-bottom-nav .ebn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 0;
    color: var(--eng-muted) !important;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
}

.WebAppOperator-04.etisalat-light .eng-bottom-nav .ebn-item i {
    font-size: 1.15rem;
}

.WebAppOperator-04.etisalat-light .eng-bottom-nav .ebn-item.active,
.WebAppOperator-04.etisalat-light .eng-bottom-nav .ebn-item.active i {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .eng-bottom-nav .ebn-item:active {
    transform: scale(0.96);
}

/* On wide screens, keep the bottom nav (mobile-style app). Hide if a
   desktop layout is preferred by uncommenting the rule below.
@media (min-width: 992px) {
    .WebAppOperator-04.etisalat-light .eng-bottom-nav { display: none; }
    .WebAppOperator-04.etisalat-light .Footer { padding-bottom: 0; }
}
*/

/* =============================================================
   PHASE 2 — complete the rebrand across all operator-04 screens.
   All additions scoped under .WebAppOperator-04.etisalat-light and
   reuse the --eng-* tokens defined at the top of this file. These
   close the ~28 dark/lime/magenta/pink/purple gaps found by audit.
   ============================================================= */

/* ---------- 1. Popups & banners (redeem / share / home popups, FAQ accordion) ---------- */
/* White popup header so the new red e& logo is visible (logo is red on transparent) */
.WebAppOperator-04.etisalat-light .popup-header {
    background: var(--eng-card) !important;
    background-color: var(--eng-card) !important;
    border-bottom: 1px solid var(--eng-border);
}

/* close icons inside popup headers are inline-styled (#650c6a / #FFF) — force dark so they read on white */
.WebAppOperator-04.etisalat-light .popup-header .close i,
.WebAppOperator-04.etisalat-light .popup-header i.fa-times,
.WebAppOperator-04.etisalat-light #closepopup i {
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .popup-banner {
    background: var(--eng-red-soft) !important;
    background-color: var(--eng-red-soft) !important;
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .popup-banner h3 {
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .popup-html-content .btn3 {
    background: var(--eng-red) !important;
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

.WebAppOperator-04.etisalat-light .accordion .card .card-header,
.WebAppOperator-04.etisalat-light .accordion .card .card-header button[aria-expanded] {
    background: var(--eng-card) !important;
    background-color: var(--eng-card) !important;
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .accordion .card .card-header button[aria-expanded="true"] {
    color: var(--eng-red) !important;
}

/* ---------- 2. Tabs (tournament-details / profile tabs) ---------- */
/* rounded pill tabs (details / profile) */
.WebAppOperator-04.etisalat-light .tabs-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 16px;
}

.WebAppOperator-04.etisalat-light .tabs-box li {
    background: transparent !important;
    border-radius: 0;
    min-width: auto;
    width: auto;
    flex: 1 1 auto;
    overflow: visible;        /* don't clip the active underline */
}

.WebAppOperator-04.etisalat-light .tabs-box li a {
    color: var(--eng-muted) !important;
    background: transparent;
    border: 0;
    border-right: 0 !important; /* base sets a white divider */
    border-radius: 0;
    height: auto;
    padding: 10px 14px;
    position: relative;
}

/* selected -> red text + red underline (footer-style, no filled pill) */
.WebAppOperator-04.etisalat-light .tabs-box li a.active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .tabs-box li a.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--eng-red);
}

.WebAppOperator-04.etisalat-light .tabs-box li a .badge {
    background: var(--eng-red) !important;
    color: #fff !important;
    border-radius: 999px;
}

/* tab no longer has a red fill, so keep the count badge red (not white-on-white) */
.WebAppOperator-04.etisalat-light .tabs-box li a.active .badge {
    background: var(--eng-red) !important;
    color: #fff !important;
}

/* rounded buttons on the details page + modals (base sets border-radius:0) */
.WebAppOperator-04.etisalat-light .webApp-Model-Btn,
.WebAppOperator-04.etisalat-light .Model-Btn-firstColor,
.WebAppOperator-04.etisalat-light .Model-Btn-secondColor,
.WebAppOperator-04.etisalat-light .packages-item-btn,
.WebAppOperator-04.etisalat-light .popup-html-content .btn3,
.WebAppOperator-04.etisalat-light .statusLink {
    border-radius: 999px !important;
}

/* ---------- 3. Tournament details + leaderboard (base-CSS magenta #dd19ba / lime leak) ---------- */
.WebAppOperator-04.etisalat-light .tournament-details-header .game,
.WebAppOperator-04.etisalat-light .tournament-details-header .date span,
.WebAppOperator-04.etisalat-light .ColorMeNew,
.WebAppOperator-04.etisalat-light .PlayerRowActive {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .title-wrapper.type-2 {
    background: linear-gradient(90deg, var(--eng-red), var(--eng-red-dark)) !important;
}

.WebAppOperator-04.etisalat-light .title-wrapper.type-2 h3.box-title,
.WebAppOperator-04.etisalat-light .title-wrapper.type-2 a {
    color: #fff !important;
}

/* ---------- 4. Subscription packages (base-CSS pink #F6236F / purple #442a99) ---------- */
.WebAppOperator-04.etisalat-light .subscription-tournaments-header,
.WebAppOperator-04.etisalat-light .subscription-tournaments-header h2,
.WebAppOperator-04.etisalat-light .packages-item-title {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .packages-item-btn {
    background: var(--eng-red) !important;
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

.WebAppOperator-04.etisalat-light .packages-item-btn:hover {
    background-color: var(--eng-red-dark) !important;
}

.WebAppOperator-04.etisalat-light .packages-item-details {
    color: var(--eng-muted) !important;
}

/* ---------- 5. Profile & social leftovers ---------- */
.WebAppOperator-04.etisalat-light .right-body {
    background: var(--eng-card) !important;
}

.WebAppOperator-04.etisalat-light .right-body .friends-list li {
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .friends-banner {
    background: var(--eng-card) !important;
    background-color: var(--eng-card) !important;
}

.WebAppOperator-04.etisalat-light .profile-contain .friends-list.grid li .right2 .location img {
    border-color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .redeem-btn {
    background: var(--eng-red) !important;
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

/* ---- Subscription package dropdown: red & white only, no green ---- */
.WebAppOperator-04.etisalat-light .dropdown-Subscription-Packages {
    background-color: var(--eng-card) !important;
    border-color: var(--eng-border) !important;
}

/* default item: white bg, dark name, red price */
.WebAppOperator-04.etisalat-light .dsp-item {
    background-color: var(--eng-card) !important;
}

.WebAppOperator-04.etisalat-light .dsp-item-name {
    color: var(--eng-text) !important;
}

.WebAppOperator-04.etisalat-light .dsp-item-price {
    color: var(--eng-red) !important;
}

/* hover -> red bg, all text white (was green) */
.WebAppOperator-04.etisalat-light .dsp-item:hover {
    background-color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .dsp-item:hover .dsp-item-name,
.WebAppOperator-04.etisalat-light .dsp-item:hover .dsp-item-price {
    color: #fff !important;
}

/* selected -> red bg, all text white (base forced price green / name dark) */
.WebAppOperator-04.etisalat-light .dsp-item.dsp-item-active {
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

.WebAppOperator-04.etisalat-light .dsp-item.dsp-item-active .dsp-item-name,
.WebAppOperator-04.etisalat-light .dsp-item.dsp-item-active .dsp-item-price {
    color: #fff !important;
}

/* ---------- Profile page — rounded buttons, item cards, images ---------- */

/* buttons -> pill */
.WebAppOperator-04.etisalat-light .popup-html-content .btn3,
.WebAppOperator-04.etisalat-light .btnAddFriends,
.WebAppOperator-04.etisalat-light .redeem-btn,
.WebAppOperator-04.etisalat-light .Friends-btns a {
    border-radius: 999px !important;
}

/* panels / containers -> rounded cards */
.WebAppOperator-04.etisalat-light .right-body,
.WebAppOperator-04.etisalat-light .SettingsListContainer {
    border-radius: var(--eng-radius) !important;
    box-shadow: var(--eng-shadow);
    overflow: hidden;
}

/* friends-list rows (settings panel) -> rounded cards */
.WebAppOperator-04.etisalat-light .right-body .friends-list li {
    border-radius: var(--eng-radius) !important;
    background: var(--eng-card) !important;
    border: 1px solid var(--eng-border) !important;
    margin-bottom: 8px;
}

/* friends grid items -> rounded cards */
.WebAppOperator-04.etisalat-light .profile-contain .friends-list.grid li {
    border-radius: var(--eng-radius) !important;
    background: var(--eng-card) !important;
    box-shadow: var(--eng-shadow);
}

/* redeem / package items -> rounded */
.WebAppOperator-04.etisalat-light .dsp-item,
.WebAppOperator-04.etisalat-light .prize-item {
    border-radius: var(--eng-radius) !important;
    overflow: hidden;
}

/* image frames -> rounded; flag/country avatars -> circular */
.WebAppOperator-04.etisalat-light .pro-img2,
.WebAppOperator-04.etisalat-light .right-body .friends-list li .left .pro-img {
    border-radius: var(--eng-radius) !important;
}

.WebAppOperator-04.etisalat-light .right-body .friends-list li .location img,
.WebAppOperator-04.etisalat-light .profile-contain .friends-list.grid li .right2 .location img {
    border-radius: 999px !important;
}

/* profile tabs (.prof-tab) -> rounded pills, red active (base keeps dark purple bg) */
.WebAppOperator-04.etisalat-light .prof-tabs-menu {
    gap: 8px;
}

.WebAppOperator-04.etisalat-light .prof-tab {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--eng-muted) !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* base .prof-tabs-menu a forces padding:17.5px 0 (tall, no side padding) */
    padding: 10px 14px !important;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    position: relative;
}

/* selected -> red text + red underline (footer-style, no filled pill) */
.WebAppOperator-04.etisalat-light .prof-tab.active {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .prof-tab.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--eng-red);
}

/* round content images across the profile tab sections (circular avatars keep
   their own higher-specificity radius) */
.WebAppOperator-04.etisalat-light .prosec img,
.WebAppOperator-04.etisalat-light .tab-section img {
    border-radius: var(--eng-radius);
}

/* ---------- 6. Loaders & misc green helpers ---------- */
.WebAppOperator-04.etisalat-light .webApploaderPageBackground {
    background: radial-gradient(at top, var(--eng-red), var(--eng-card), var(--eng-card)) !important;
}

.WebAppOperator-04.etisalat-light .webApploaderPageSpinner {
    border-top-color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light #LoadingLandingPageModal .modal-content {
    background: linear-gradient(90deg, var(--eng-red), var(--eng-red-dark)) !important;
}

.WebAppOperator-04.etisalat-light .colorMeGreenEtisalate {
    color: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .top-right a {
    background: var(--eng-red) !important;
}

.WebAppOperator-04.etisalat-light .tournaments-item-pool-prize .tip-title {
    color: var(--eng-red) !important;
}

/* tip-icon is hidden in the new card design; no glow needed (it was bleeding a
   translucent-red halo over the Register button). */
.WebAppOperator-04.etisalat-light .tournaments-item-pool-prize .tip-icon {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/*.WebAppOperator-04.etisalat-light .prize-item .bb {
    background: var(--eng-card) !important;
}
*/
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item,
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item:nth-child(2),
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item:nth-child(3),
.WebAppOperator-04.etisalat-light .landing-footer .lfm-item:nth-child(4) {
    border: 0 !important;
}

.WebAppOperator-04.etisalat-light .landing-footer:has(.lfm-item-Subscription) {
    background-color: var(--eng-card) !important;
}

/* ---------- 7. Forms / inputs ---------- */
.WebAppOperator-04.etisalat-light .webApp-form input {
    border-color: var(--eng-border) !important;
}

.WebAppOperator-04.etisalat-light .btnAddFriends {
    background-color: var(--eng-red) !important;
    color: #fff !important;
}

.WebAppOperator-04.etisalat-light .search-tournaments-select select {
    border-color: var(--eng-border) !important;
}

/* =====================================================================
   /gamelist (Landing _GameList) — Figma "Games" (node 16:24390)
   Search bar + "N games available" count + 2-col rounded tile grid.
   Chips + column alignment are already handled by the shared rules above.
   ===================================================================== */

/* --- Search bar (Figma: 44px pill, #F4F4F4, search icon + placeholder) --- */
.WebAppOperator-04.etisalat-light .eng-games-search {
    position: relative;
    margin: 0 0 6px;
}

.WebAppOperator-04.etisalat-light .eng-games-search input {
    width: 100%;
    height: 44px;
    border: 0;
    outline: 0;
    border-radius: 22px;
    background: #F4F4F4;                  /* Figma fill_YBE0HY */
    padding: 0 16px 0 44px;              /* leave room for the icon */
    font-size: 14px;
    color: var(--eng-text);
}

.WebAppOperator-04.etisalat-light .eng-games-search input::placeholder {
    color: #9E9E9E;                      /* Figma placeholder */
    opacity: 1;
}

.WebAppOperator-04.etisalat-light .eng-games-search .egs-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    font-size: 16px;
    line-height: 1;
    color: #9E9E9E;
    pointer-events: none;
}

/* --- "N games available" count (12px, #191329 @ 0.5) --- */
.WebAppOperator-04.etisalat-light .eng-games-count {
    margin: 12px 0 10px;
    font-size: 12px;
    line-height: 1;
    color: var(--eng-text);
    opacity: 0.5;
}

/* --- Grid: rounded light tiles, 2 cols on mobile, fills width --- */
.WebAppOperator-04.etisalat-light .landing-games-body {
    margin-bottom: 0 !important;
}

.WebAppOperator-04.etisalat-light .tournaments-games-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px !important;
    align-content: start;
    height: auto !important;             /* cancel base 1114px / inline 100% */
    background: transparent !important;  /* cancel dark op-04 #272727 */
    padding: 0 0 24px !important;
    margin: 0 !important;
}

.WebAppOperator-04.etisalat-light .tournaments-games-grid li {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}

.WebAppOperator-04.etisalat-light .tournaments-games-grid li a {
    display: block;
    background: var(--eng-bg-alt);       /* #F4F3F5 tile */
    border-radius: 12px;
    padding: 5px 5px 8px;
    text-decoration: none;
}

.WebAppOperator-04.etisalat-light .tournaments-games-grid li a:hover {
    opacity: 0.85;
}

/* thumbnail — 8px radius, 5px inset. Figma's window is a very wide 159x69
   (2.3:1) banner crop; real game art is squarer, so that over-crops it.
   Use the home AAA Games ratio (169x100) instead so more of each game shows. */
.WebAppOperator-04.etisalat-light .tournaments-games-grid li .img {
    position: relative;
    width: 100%;
    padding-top: 0 !important;           /* cancel base square ratio */
    aspect-ratio: 169 / 100;
    border-radius: 8px;
    overflow: hidden;
    background: var(--eng-bg-alt);       /* blend while the art loads */
}

.WebAppOperator-04.etisalat-light .tournaments-games-grid li .img img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
}

/* name label — 12px semibold, centered, dark (cancel dark op-04 white) */
.WebAppOperator-04.etisalat-light .tournaments-games-grid li span {
    display: block;
    margin: 7px 0 0 !important;
    color: var(--eng-text) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* RTL: search icon moves to the right */
html[dir="rtl"] .WebAppOperator-04.etisalat-light .eng-games-search input {
    padding: 0 44px 0 16px;
}

html[dir="rtl"] .WebAppOperator-04.etisalat-light .eng-games-search .egs-icon {
    left: auto;
    right: 16px;
}

/* ============================================================================
   Tournament DETAIL page — Figma "Tournaments - Detailed view" (node 16:24153)
   New light-theme header markup (.eng-td-*) + the AJAX summary content.
   Appended last so it wins over the older .tabs-box/.title-wrapper/.prize-item rules.
   ============================================================================ */

/* section wrapper: kill base p-head/tournament-header bg + the mobile 60px top
   padding, keep row gutter, add a small breathing space under the app header */
.WebAppOperator-04.etisalat-light .eng-td-head {
    background: transparent !important;
    padding: 6px calc(var(--bs-gutter-x) * 0.5) 0 !important;
    margin: 0 !important;
}

/* ---- Top bar: back button + "Tournament" title (Figma 29:2213) ---- */
.WebAppOperator-04.etisalat-light .eng-td-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-bottom: 8px;
}

.WebAppOperator-04.etisalat-light .eng-td-topbar-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--eng-text);
}

.WebAppOperator-04.etisalat-light .eng-td-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--eng-bg-alt);
    color: var(--eng-text);
    font-size: 14px;
    text-decoration: none;
}

html[dir="rtl"] .WebAppOperator-04.etisalat-light .eng-td-back {
    left: auto;
    right: 0;
}

html[dir="rtl"] .WebAppOperator-04.etisalat-light .eng-td-back i {
    transform: scaleX(-1);   /* point the chevron the other way in RTL */
}

/* ---- Navy hero (Figma 16:24201) ---- */
.WebAppOperator-04.etisalat-light .eng-td-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    padding: 15px;
    border-radius: var(--eng-radius-card);
    background: var(--eng-navy, #002948);
    color: #fff;
    overflow: hidden;
}

.WebAppOperator-04.etisalat-light .eng-td-hero-media {
    flex: 0 0 88px;
}

.WebAppOperator-04.etisalat-light .eng-td-hero-img {
    display: block;
    width: 88px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.WebAppOperator-04.etisalat-light .eng-td-hero-text {
    min-width: 0;
}

.WebAppOperator-04.etisalat-light .eng-td-hero-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-transform: none;   /* base .name is uppercase */
}

.WebAppOperator-04.etisalat-light .eng-td-hero-sub {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
}

.WebAppOperator-04.etisalat-light .eng-td-hero-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--eng-red);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.WebAppOperator-04.etisalat-light .eng-td-hero-badge.is-expired {
    background: var(--eng-expired);
}

html[dir="rtl"] .WebAppOperator-04.etisalat-light .eng-td-hero-badge {
    right: auto;
    left: 12px;
}

/* ---- Date cards (Figma 16:24170) ---- */
.WebAppOperator-04.etisalat-light .eng-td-dates {
    display: flex;
    gap: 10px;
    margin: 12px 0;
}

.WebAppOperator-04.etisalat-light .eng-td-date-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--eng-bg-alt);
}

.WebAppOperator-04.etisalat-light .eng-td-date-lbl {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(25, 19, 41, 0.7);
}

.WebAppOperator-04.etisalat-light .eng-td-date-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--eng-text);
}

/* ---- Segmented pill tabs (Figma 16:24177) — override the underline tabs ---- */
.WebAppOperator-04.etisalat-light .eng-td-tabs.tabs-box {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 16px;
    padding: 4px;
    border-radius: 24px;
    background: var(--eng-bg-alt);
}

.WebAppOperator-04.etisalat-light .eng-td-tabs li {
    flex: 1 1 0;
    min-width: 0;
    background: transparent !important;
}

.WebAppOperator-04.etisalat-light .eng-td-tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 36px;
    padding: 0 8px;
    border: 0 !important;
    border-radius: 20px;
    color: #6B6B6B !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.WebAppOperator-04.etisalat-light .eng-td-tabs li a.active {
    background: var(--eng-red) !important;
    color: #fff !important;
}

.WebAppOperator-04.etisalat-light .eng-td-tabs li a.active::after {
    content: none !important;   /* remove the old underline */
}

.WebAppOperator-04.etisalat-light .eng-td-tabs li a .badge {
    min-width: auto;
    margin-left: 2px;
    background: rgba(25, 19, 41, 0.12) !important;
    color: inherit !important;
}

.WebAppOperator-04.etisalat-light .eng-td-tabs li a.active .badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* ---- Summary content: general text + section headings ---- */
.WebAppOperator-04.etisalat-light .tournament-page-content .tour-details-box .right2 {
    color: var(--eng-text-body);
    font-size: 14px;
    line-height: 1.5;
}

/* section headings -> plain dark (Figma style_A5IR7A), not the red gradient bar */
.WebAppOperator-04.etisalat-light .tournament-page-content .title-wrapper.type-2 {
    background: none !important;
    background-image: none !important;
    margin: 0;
    padding: 0 0 8px !important;
}

.WebAppOperator-04.etisalat-light .tournament-page-content .title-wrapper.type-2 h3.box-title,
.WebAppOperator-04.etisalat-light .tournament-page-content .title-wrapper.type-2 a {
    padding: 0 !important;
    background: none !important;
    color: var(--eng-text) !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none !important;
}

/* ---- Tournament Details table -> bordered card (Figma 29:2306) ---- */
.WebAppOperator-04.etisalat-light .tournament-page-content .wcontainer.p-container {
    overflow: hidden;
    border: 1px solid var(--eng-border);
    border-radius: 10px;
    background: #fff;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.table-1 {
    margin: 0;
    color: var(--eng-text);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.table-1 tr {
    border-bottom: 1px solid var(--eng-border);
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.table-1 tr:last-child {
    border-bottom: 0;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.table-1 td {
    padding: 12px 15px;
    vertical-align: middle;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.table-1 td.ColorMytd {
    width: 40%;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(25, 19, 41, 0.5);
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.table-1 td.font-weight-normal {
    color: var(--eng-text);
    font-size: 13px;
    text-align: right;
}

html[dir="rtl"] .WebAppOperator-04.etisalat-light .tournament-page-content table.table-1 td.font-weight-normal {
    text-align: left;
}

/* ---- Prizes -> medal-gradient cards in a 2-col grid (Figma 29:2309) ---- */
.WebAppOperator-04.etisalat-light .tournament-page-content .wcontainer.p-text:has(.prize-item) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.WebAppOperator-04.etisalat-light .eng-prize.prize-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    margin: 0 !important;
    padding: 20px 12px;
    border: 1px solid var(--eng-border);
    border-radius: 16px !important;
    background: #fff !important;
    overflow: visible;
    text-align: center;
}

/* first three prizes (by order) -> gold / silver / bronze; every other prize
   keeps the default white card above. Keyed off position in the grid so it
   works regardless of the API's `position` values. */
.WebAppOperator-04.etisalat-light .wcontainer.p-text .eng-prize:nth-child(1) {
    background: linear-gradient(154deg, #FFF8E1 0%, #FFE082 100%) !important;
    border-color: #FFE082;
}

.WebAppOperator-04.etisalat-light .wcontainer.p-text .eng-prize:nth-child(2) {
    background: linear-gradient(154deg, #F5F5F5 0%, #DDDDDD 100%) !important;
    border-color: #ECECEC;
}

.WebAppOperator-04.etisalat-light .wcontainer.p-text .eng-prize:nth-child(3) {
    background: linear-gradient(154deg, #FFF0E0 0%, #FFD2A8 100%) !important;
    border-color: #FFD2A8;
}

.WebAppOperator-04.etisalat-light .eng-prize .tt {
    padding: 0 !important;
    color: var(--eng-red) !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.WebAppOperator-04.etisalat-light .eng-prize .tt span {
    display: block;
    margin: 0;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* "1st place" -> one line "1ST PLACE" (Figma) */
.WebAppOperator-04.etisalat-light .eng-prize .tt br {
    display: none !important;
}

.WebAppOperator-04.etisalat-light .eng-prize hr {
    display: none !important;
}

/* amount + currency stacked (Figma: big dark amount over small gray currency) */
.WebAppOperator-04.etisalat-light .eng-prize .bb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 !important;
    background: transparent !important;
}

.WebAppOperator-04.etisalat-light .eng-prize-amount {
    color: #1A1A1A;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.05;
}

.WebAppOperator-04.etisalat-light .eng-prize-cur {
    color: #6B6B6B;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
}

/* ---- Rules -> bordered card (Figma 29:2310) ---- */
.WebAppOperator-04.etisalat-light .tournament-page-content .wcontainer.p-text:not(:has(.prize-item)) {
    padding: 15px;
    border: 1px solid var(--eng-border);
    border-radius: 10px;
    background: #fff;
    color: #6B6B6B;
    font-size: 12px;
    font-weight: 400 !important;
    line-height: 1.5;
}

/* ---- Fixed bottom "Play Now" CTA (Figma 29:2322) ---- */
.WebAppOperator-04.etisalat-light .eng-td-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 12px calc(var(--bs-gutter-x) * 0.5);  /* match the container gutter */
    background: #fff;
    border-top: 1px solid var(--eng-border-strong);
}

.WebAppOperator-04.etisalat-light .eng-td-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: calc(1024px - var(--bs-gutter-x));  /* = container content width, so the button aligns with the cards */
    height: 44px;
    border-radius: 24px !important;
    background: var(--eng-red) !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.WebAppOperator-04.etisalat-light .eng-td-cta-btn.no-action {
    opacity: 0.6;
    cursor: default;
}

/* match the container gutter on the sides like the hero/tabs, plus 12px top/bottom
   (the #webApp-body 80px padding-bottom still clears the fixed Play Now CTA) */
.WebAppOperator-04.etisalat-light .tournament-page-content {
    padding: 12px calc(var(--bs-gutter-x) * 0.5) !important;
}

/* Figma detail view has no bottom nav (back navigation is via the header) — only
   the Play Now CTA. Hide the landing-footer nav on the detail page so the fixed
   CTA doesn't overlap it. Scoped via :has(.eng-td-cta) so other pages keep the nav. */
.WebAppOperator-04.etisalat-light:has(.eng-td-cta) .landing-footer {
    display: none !important;
}

/* Tab content (Summary / Leaderboard / Participants): the base CSS adds
   .profile-contain margin-top:40px, .profile-contain > .left padding:25px and a
   .profile-contain-friends margin-bottom:40px, which over-indents the content
   and adds big top/bottom gaps. Drop them so the content lines up with the
   hero / tabs above (gutter only) and sits tight. */
.WebAppOperator-04.etisalat-light .tournament-page-content .p-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.WebAppOperator-04.etisalat-light .tournament-page-content .profile-contain {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.WebAppOperator-04.etisalat-light .tournament-page-content .profile-contain > .left {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
}

/* Summary/Leaderboard: drop the empty .left2 sidebar and the desktop (>=1025px)
   padding-left:160px on .right2 that pushed the content far right on desktop. */
.WebAppOperator-04.etisalat-light .tournament-page-content .tour-details-box .left2 {
    display: none !important;
}

.WebAppOperator-04.etisalat-light .tournament-page-content .tour-details-box .right2 {
    width: 100% !important;
    padding-left: 0 !important;
}

/* Mobile: keep the page top tight under the app header */
@media (max-width: 767px) {
    .WebAppOperator-04.etisalat-light .eng-td-head {
        padding-top: 0 !important;
    }
}

/* ---- Participants tab ----
   1) Scroll with the whole page (base puts an inner scroll on a 750px box).
   2) Clean single-column row list (avatar | flag + name/country).
   NOTE: exact Figma (16:24229) couldn't be fetched (API rate-limited) — this is
   a light-theme interpretation to be refined against the design. */
.WebAppOperator-04.etisalat-light .profile-contain.profile-contain-friends {
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}

.WebAppOperator-04.etisalat-light .profile-contain-friends .friends-list.grid {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* each participant -> a full-width row card (light theme already makes it a
   rounded white card) */
.WebAppOperator-04.etisalat-light .profile-contain .friends-list.grid.type-2 li,
.WebAppOperator-04.etisalat-light .profile-contain .friends-list.grid li {
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
    text-align: left;
}

/* drop the base row-divider pseudo */
.WebAppOperator-04.etisalat-light .profile-contain .friends-list.grid li::after {
    display: none !important;
}

/* keep avatar from shrinking; flag + name on one line */
.WebAppOperator-04.etisalat-light .profile-contain .friends-list.grid li .left {
    flex-shrink: 0;
}

.WebAppOperator-04.etisalat-light .profile-contain-friends .friends-list.grid li .right2 .ll {
    padding-bottom: 0 !important;
}

/* ============================================================
   Leaderboard tab — Figma node 16:24295 (red "You" card + ranked table)
   ============================================================ */

/* the tabs + table header already say "Leaderboard" — hide the red heading bar */
.WebAppOperator-04.etisalat-light #leaderboard-box .title-wrapper.type-2 {
    display: none !important;
}

/* "You" rank summary card (red) */
.WebAppOperator-04.etisalat-light .lb-you-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--eng-red);
    color: #fff;
}

.WebAppOperator-04.etisalat-light .lb-you-rank {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--eng-red-dark);
    font-size: 14px;
    font-weight: 700;
}

.WebAppOperator-04.etisalat-light .lb-you-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.WebAppOperator-04.etisalat-light .lb-you-name {
    font-size: 15px;
    font-weight: 700;
}

.WebAppOperator-04.etisalat-light .lb-you-sub {
    font-size: 12px;
    opacity: 0.85;
}

.WebAppOperator-04.etisalat-light .lb-you-score {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- table ---- */
.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList {
    width: 100%;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList td {
    padding: 12px 15px;
    vertical-align: middle;
}

/* header row (first row) -> gray bar, muted uppercase labels */
.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList tr:first-child td {
    background: var(--eng-bg-alt);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--eng-muted);
}

/* Score + Rank columns -> right aligned, narrow */
.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList td:nth-child(2),
.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList td:nth-child(3) {
    text-align: right;
    white-space: nowrap;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList td:nth-child(2) {
    width: 90px;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList td:nth-child(3) {
    width: 50px;
}

/* username (bold dark) / score (red) / rank (muted) */
.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList .lb-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--eng-text);
    vertical-align: middle;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList .lb-score {
    color: var(--eng-red) !important;
    font-weight: 600;
}

.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList .lb-rank-num {
    color: var(--eng-muted);
}

/* rank badge: top 3 = gold / silver / bronze, the rest light gray */
.WebAppOperator-04.etisalat-light .lb-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    border-radius: 50%;
    background: #F1F1F1;
    color: var(--eng-text);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.WebAppOperator-04.etisalat-light .lb-rank-badge.lb-r1 { background: #F5B70A; color: #fff; }
.WebAppOperator-04.etisalat-light .lb-rank-badge.lb-r2 { background: #9E9E9E; color: #fff; }
.WebAppOperator-04.etisalat-light .lb-rank-badge.lb-r3 { background: #8B5E34; color: #fff; }

/* subtle highlight if the current user appears in the visible list */
.WebAppOperator-04.etisalat-light .tournament-page-content table.scoreList tr.PlayerRowActive td {
    background: var(--eng-red-soft, #FFF1F0);
}

/* ============================================================
   Profile (Etisalat light) — Figma node 16:24538
   Red-gradient profile card, grey segmented tabs, and restyled
   Profile / Friends / Tournaments content. Single-column,
   mobile-first; centered with a max-width on desktop.
   ============================================================ */

/* ---- centered mobile-first column on desktop ---- */
/* One explicit gutter (Figma 20px) on BOTH the header container and the three
   content sections, so the card, tabs, and every heading/card/search/button
   share the exact same left/right edge (don't rely on Bootstrap .container
   padding, which can differ between the two containers). */
.WebAppOperator-04.etisalat-light .eng-prof-head > .container,
.WebAppOperator-04.etisalat-light #profile.tab-section,
.WebAppOperator-04.etisalat-light #friends.tab-section,
.WebAppOperator-04.etisalat-light #tournaments.tab-section {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--eng-gutter) !important;
    padding-right: var(--eng-gutter) !important;
}

/* tab content: consistent gap below the tabs. Drop the legacy .prosec 100vh
   (huge empty area) and .pd-50 bottom-only padding; the fixed bottom-nav
   clearance is already handled globally by #webApp-body padding-bottom. */
.WebAppOperator-04.etisalat-light #profile.tab-section,
.WebAppOperator-04.etisalat-light #friends.tab-section,
.WebAppOperator-04.etisalat-light #tournaments.tab-section {
    min-height: 0 !important;
    padding-top: 18px;
    padding-bottom: 24px;
}

/* ---- header / red gradient card ---- */
.WebAppOperator-04.etisalat-light .eng-prof-head.p-headprofnew {
    background: none !important;
    min-height: 0 !important;
    padding: 16px 0 4px !important;
}

.WebAppOperator-04.etisalat-light .eng-prof-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 20px 22px;
    border-radius: var(--eng-radius);
    background: var(--eng-red-gradient);
    color: var(--eng-on-red);
    box-shadow: var(--eng-shadow, 0 4px 16px rgba(0,0,0,0.06));
}

.WebAppOperator-04.etisalat-light .eng-prof-gear {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.WebAppOperator-04.etisalat-light .eng-prof-gear:hover {
    background: rgba(255, 255, 255, 0.3);
}

.WebAppOperator-04.etisalat-light .eng-prof-friendbtn {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--eng-red);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.WebAppOperator-04.etisalat-light .eng-prof-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.WebAppOperator-04.etisalat-light .eng-prof-initial {
    font-size: 38px;
    font-weight: 800;
    color: var(--eng-red);
    line-height: 1;
}

.WebAppOperator-04.etisalat-light .eng-prof-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.WebAppOperator-04.etisalat-light .eng-prof-name {
    margin: 14px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.WebAppOperator-04.etisalat-light .eng-prof-coins {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.WebAppOperator-04.etisalat-light .eng-prof-coins img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.WebAppOperator-04.etisalat-light .eng-prof-coins-lbl {
    font-size: 14px;
    color: #fff;
    opacity: 0.95;
}

.WebAppOperator-04.etisalat-light .eng-prof-coins-val {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.WebAppOperator-04.etisalat-light .eng-prof-redeem {
    margin-top: 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- segmented tab control (built on .prof-tabs-menu/.prof-tab; beats the
   existing footer-style underline overrides above) ---- */
.WebAppOperator-04.etisalat-light .eng-prof-seg {
    /* override the legacy mobile rule that absolutely-positions .prof-tabs-menu
       (position:absolute; top:229%; width:110%) — keep it in normal flow */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    display: flex;
    gap: 0 !important;
    margin: 16px 0 0 !important;
    padding: 4px;
    border-radius: 999px;
    background: var(--eng-bg-alt);
}

.WebAppOperator-04.etisalat-light .eng-prof-seg .eng-seg-item {
    flex: 1 1 0;
    padding: 11px 8px !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--eng-muted) !important;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.WebAppOperator-04.etisalat-light .eng-prof-seg .eng-seg-item.active {
    background: var(--eng-red) !important;
    color: #fff !important;
}

.WebAppOperator-04.etisalat-light .eng-prof-seg .eng-seg-item.active::after {
    content: none !important;
    display: none !important;
}

/* ---- shared section heading / empty state ---- */
/* Profile tab reuses .p-body (display:flex + 40px margins) — force all three
   tab wrappers to identical single-column blocks flush to the container gutter
   so their content left/right-aligns with the card and tabs above. */
.WebAppOperator-04.etisalat-light .eng-prof-body,
.WebAppOperator-04.etisalat-light .eng-friends,
.WebAppOperator-04.etisalat-light .eng-prof-tour {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
}

.WebAppOperator-04.etisalat-light .eng-prof-section {
    margin-bottom: 26px;
}

.WebAppOperator-04.etisalat-light .eng-prof-h {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--eng-text);
}

.WebAppOperator-04.etisalat-light .eng-prof-empty {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: var(--eng-muted);
    font-size: 14px;
}

/* ---- Profile tab: Last Played Games (horizontal scroll) ---- */
.WebAppOperator-04.etisalat-light .eng-games-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.WebAppOperator-04.etisalat-light .eng-games-row::-webkit-scrollbar {
    display: none;
}

.WebAppOperator-04.etisalat-light .eng-game-card {
    flex: 0 0 auto;
    width: 150px;
    border: 1px solid var(--eng-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--eng-card);
    text-decoration: none;
}

.WebAppOperator-04.etisalat-light .eng-game-thumb {
    display: block;
    width: 100%;
    height: 90px;
    background: var(--eng-navy);
}

.WebAppOperator-04.etisalat-light .eng-game-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.WebAppOperator-04.etisalat-light .eng-game-name {
    display: block;
    padding: 9px 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--eng-text);
}

/* ---- compact tournament card (Profile + Tournaments tabs) ---- */
.WebAppOperator-04.etisalat-light .eng-tourn-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.WebAppOperator-04.etisalat-light .eng-tourn-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--eng-border);
    border-radius: 12px;
    background: var(--eng-card);
}

.WebAppOperator-04.etisalat-light .eng-tourn-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--eng-navy);
    display: block;
}

.WebAppOperator-04.etisalat-light .eng-tourn-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.WebAppOperator-04.etisalat-light .eng-tourn-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.WebAppOperator-04.etisalat-light .eng-tourn-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--eng-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.WebAppOperator-04.etisalat-light .eng-tourn-date {
    font-size: 12px;
    color: var(--eng-muted);
}

.WebAppOperator-04.etisalat-light .eng-tourn-view {
    flex: 0 0 auto;
    padding: 8px 20px;
    border-radius: 999px;
    background: var(--eng-red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: capitalize;
    white-space: nowrap;
}

.WebAppOperator-04.etisalat-light .eng-tourn-view:hover {
    background: var(--eng-red-dark);
}

/* ---- Friends tab ---- */
.WebAppOperator-04.etisalat-light .eng-friends-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: var(--eng-radius-search);
    background: var(--eng-bg-alt);
}

.WebAppOperator-04.etisalat-light .eng-friends-search i {
    color: var(--eng-muted);
    font-size: 14px;
}

.WebAppOperator-04.etisalat-light .eng-friends-search input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--eng-text);
}

.WebAppOperator-04.etisalat-light .eng-friends-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 10px;
    margin-bottom: 24px;
}

.WebAppOperator-04.etisalat-light .eng-friend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.WebAppOperator-04.etisalat-light .eng-friend-avatar {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--eng-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.WebAppOperator-04.etisalat-light .eng-friend-initial {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.WebAppOperator-04.etisalat-light .eng-friend-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.WebAppOperator-04.etisalat-light .eng-friend-name {
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--eng-text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.WebAppOperator-04.etisalat-light .eng-add-friends {
    display: block;
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 999px;
    background: var(--eng-red);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.WebAppOperator-04.etisalat-light .eng-add-friends:hover {
    background: var(--eng-red-dark);
}

/* ---- Tournaments tab: Upcoming / Joined sub-tabs ---- */
.WebAppOperator-04.etisalat-light .eng-pt-tabs {
    display: flex;
    gap: 28px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--eng-border);
}

.WebAppOperator-04.etisalat-light .eng-pt-tabs li {
    list-style: none;
}

.WebAppOperator-04.etisalat-light .eng-pt-tab {
    position: relative;
    display: inline-block;
    padding: 12px 0;
    color: var(--eng-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.WebAppOperator-04.etisalat-light .eng-pt-tab.active {
    color: var(--eng-red);
}

.WebAppOperator-04.etisalat-light .eng-pt-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--eng-red);
}

.WebAppOperator-04.etisalat-light .eng-prof-tour-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.WebAppOperator-04.etisalat-light .eng-prof-tour-head .eng-prof-h {
    margin: 0;
}

.WebAppOperator-04.etisalat-light .eng-pt-count {
    color: var(--eng-red);
    font-size: 13px;
    font-weight: 600;
}