/* RCD_PUBLIC_UX_FINAL_V1 */

/* =========================================================
   HEADER — RTL, TYPOGRAPHY, EARLY BURGER
   ========================================================= */

.site-header .main-nav > a,
.site-header .crs-site-nav__more-button {
    font-size: 15px;
    font-weight: 800;
    padding-inline: 11px;
}

html[dir="rtl"] .site-header .main-nav {
    direction: rtl !important;
}

html[dir="ltr"] .site-header .main-nav {
    direction: ltr !important;
}

html[dir="rtl"] .site-header .main-nav > a,
html[dir="rtl"] .site-header .crs-site-nav__more-button {
    direction: rtl;
    text-align: right;
}

.site-header .main-nav {
    gap: 5px;
}

.rcd-header-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rcd-header-download__label {
    color: #48645a;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.rcd-header-store-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid #dce7e1;
    border-radius: 10px;

    background: #fff;
    color: #16392c;

    cursor: default;
}

.rcd-header-store-icon__mark {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.rcd-header-store-icon__play {
    width: 0;
    height: 0;

    border-block: 7px solid transparent;
    border-inline-start: 11px solid currentColor;
}

@media (max-width: 1460px) {
    .rcd-header-download__label {
        display: none;
    }
}

/*
 * Switch to the burger before Arabic/English controls can collide.
 */
@media (max-width: 1280px) {

    .site-header__inner {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr) !important;

        align-items: center !important;

        min-height: 72px;
    }

    html[dir="ltr"] .site-header__inner {
        grid-template-areas:
            "toggle logo actions" !important;
    }

    html[dir="rtl"] .site-header__inner {
        grid-template-areas:
            "actions logo toggle" !important;
    }

    .site-header .main-nav {
        display: none !important;
    }

    .site-header .crs-mobile-menu-toggle {
        display: inline-flex !important;

        grid-area: toggle;

        flex: 0 0 auto;
    }

    html[dir="ltr"]
    .site-header
    .crs-mobile-menu-toggle {
        justify-self: start;
    }

    html[dir="rtl"]
    .site-header
    .crs-mobile-menu-toggle {
        justify-self: end;
    }

    .site-header .brand {
        grid-area: logo;

        justify-self: center !important;

        margin: 0 !important;
    }

    .site-header .header-actions {
        grid-area: actions;

        display: flex !important;

        justify-self: end;

        width: auto;
    }

    html[dir="rtl"]
    .site-header
    .header-actions {
        justify-self: start;
    }

    .site-header
    .header-actions
    > :not(.rcd-header-language) {
        display: none !important;
    }

    .site-header
    .header-actions
    .rcd-header-language {
        display: inline-flex !important;
    }
}


/* =========================================================
   MOBILE APP PROMO
   ========================================================= */

.rcd-mobile-app-promo {
    display: none;
}

@media (max-width: 760px) {

    /*
     * On mobile the install promo becomes the first public strip.
     */
    body > .top,
    body > .platform-bar {
        display: none !important;
    }

    .rcd-mobile-app-promo {
        display: grid;

        grid-template-columns:
            32px
            52px
            minmax(0, 1fr)
            auto;

        align-items: center;

        gap: 10px;

        min-height: 82px;

        padding:
            max(10px, env(safe-area-inset-top))
            12px
            10px;

        border-bottom: 1px solid #e7ece9;

        background: #fff;
    }

    .rcd-mobile-app-promo.is-dismissed {
        display: none !important;
    }

    .rcd-mobile-app-promo__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 30px;
        height: 30px;

        padding: 0;

        border: 0;

        background: transparent;
        color: #65726d;

        font-size: 27px;
        line-height: 1;

        cursor: pointer;
    }

    .rcd-mobile-app-promo__icon {
        display: block;

        width: 52px;
        height: 52px;

        padding: 5px;

        border: 1px solid #e1e9e5;
        border-radius: 14px;

        background: #fff;

        object-fit: contain;
    }

    .rcd-mobile-app-promo__copy {
        display: grid;
        gap: 3px;

        min-width: 0;
    }

    .rcd-mobile-app-promo__copy strong {
        overflow: hidden;

        color: #18372c;

        font-size: 14px;
        font-weight: 850;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rcd-mobile-app-promo__copy small {
        color: #7a8983;

        font-size: 11px;
        line-height: 1.3;
    }

    .rcd-mobile-app-promo__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 40px;

        padding-inline: 13px;

        border-radius: 999px;

        background: #087846;
        color: #fff;

        font-size: 12px;
        font-weight: 850;

        white-space: nowrap;
    }
}

@media (max-width: 390px) {

    .rcd-mobile-app-promo {
        grid-template-columns:
            28px
            46px
            minmax(0, 1fr)
            auto;

        gap: 7px;

        padding-inline: 8px;
    }

    .rcd-mobile-app-promo__icon {
        width: 46px;
        height: 46px;
    }

    .rcd-mobile-app-promo__copy small {
        display: none;
    }

    .rcd-mobile-app-promo__cta {
        min-height: 36px;
        padding-inline: 10px;
    }
}


/* =========================================================
   STORE BADGES
   ========================================================= */

.rcd-store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rcd-store-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-width: 142px;
    min-height: 46px;

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 11px;

    background: rgba(255, 255, 255, .07);
    color: #fff;

    opacity: .78;

    cursor: default;
}

.rcd-store-badge__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 7px;

    background: rgba(255, 255, 255, .12);

    font-size: 15px;
    font-weight: 900;
}

.rcd-store-badge__play {
    width: 0;
    height: 0;

    margin-inline: 6px 4px;

    border-block: 8px solid transparent;
    border-inline-start: 12px solid currentColor;
}

.rcd-store-badge__copy {
    display: grid;

    line-height: 1.05;
}

.rcd-store-badge__copy small {
    color: rgba(255, 255, 255, .56);

    font-size: 8px;
    font-weight: 650;
}

.rcd-store-badge__copy b {
    color: #fff;

    font-size: 12px;
    font-weight: 800;
}

.rcd-footer-app-download {
    display: grid;
    gap: 10px;

    margin-top: 24px;
}

.rcd-footer-app-download > strong {
    color: #fff;

    font-size: 13px;
    font-weight: 850;
}

.rcd-footer-app-download .rcd-store-badges {
    flex-direction: column;
}

.rcd-mobile-drawer-download {
    display: grid;
    gap: 10px;

    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid #dfe8e3;
}

.rcd-mobile-drawer-download > strong {
    color: #18372c;

    font-size: 14px;
    font-weight: 850;
}

.rcd-mobile-drawer-download .rcd-store-badge {
    border-color: #dce7e1;

    background: #f5f9f7;
    color: #173c2e;
}

.rcd-mobile-drawer-download
.rcd-store-badge__copy small {
    color: #839088;
}

.rcd-mobile-drawer-download
.rcd-store-badge__copy b {
    color: #173c2e;
}


/* =========================================================
   FOOTER COOKIE CONTROL
   ========================================================= */

.rcd-footer-cookie-settings {
    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: rgba(255, 255, 255, .68);

    font: inherit;
    font-size: 13px;

    text-align: start;

    cursor: pointer;
}

.rcd-footer-cookie-settings:hover,
.rcd-footer-cookie-settings:focus-visible {
    color: #fff;
    outline: none;
}


/* =========================================================
   COOKIE CONSENT
   ========================================================= */

.rcd-cookie-banner[hidden],
.rcd-cookie-modal[hidden] {
    display: none !important;
}

.rcd-cookie-banner {
    position: fixed;

    inset-inline: 18px;
    inset-block-end: 18px;

    z-index: 3000;

    width: min(760px, calc(100% - 36px));

    margin-inline: auto;

    border: 1px solid #dbe7e0;
    border-radius: 18px;

    background: #fff;

    box-shadow: 0 22px 70px rgba(5, 36, 24, .22);
}

.rcd-cookie-banner__content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 22px;

    padding: 18px;
}

.rcd-cookie-banner__copy {
    display: grid;
    gap: 7px;
}

.rcd-cookie-banner__copy strong {
    color: #17382c;

    font-size: 16px;
    font-weight: 850;
}

.rcd-cookie-banner__copy p {
    margin: 0;

    color: #61736a;

    font-size: 13px;
    line-height: 1.65;
}

.rcd-cookie-banner__copy a {
    width: max-content;

    color: #087846;

    font-size: 12px;
    font-weight: 800;
}

.rcd-cookie-banner__actions {
    display: grid;
    gap: 8px;

    min-width: 172px;
}

.rcd-cookie-button {
    min-height: 42px;

    padding: 9px 13px;

    border: 1px solid #d9e5df;
    border-radius: 11px;

    background: #fff;
    color: #17382c;

    font-size: 12px;
    font-weight: 850;

    cursor: pointer;
}

.rcd-cookie-button--primary {
    border-color: #087846;

    background: #087846;
    color: #fff;
}

.rcd-cookie-modal {
    position: fixed;
    inset: 0;

    z-index: 3100;

    display: grid;
    place-items: center;

    padding: 20px;
}

.rcd-cookie-modal__backdrop {
    position: absolute;
    inset: 0;

    background: rgba(4, 25, 16, .56);
}

.rcd-cookie-modal__panel {
    position: relative;

    z-index: 1;

    width: min(620px, 100%);
    max-height: min(760px, calc(100vh - 40px));

    overflow-y: auto;

    padding: 24px;

    border-radius: 20px;

    background: #fff;

    box-shadow: 0 28px 90px rgba(0, 0, 0, .24);
}

.rcd-cookie-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.rcd-cookie-modal__head strong {
    color: #17382c;

    font-size: 20px;
    font-weight: 900;
}

.rcd-cookie-modal__head p {
    margin: 6px 0 0;

    color: #697970;

    font-size: 13px;
    line-height: 1.6;
}

.rcd-cookie-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 1px solid #dce7e1;
    border-radius: 10px;

    background: #fff;
    color: #17382c;

    font-size: 25px;

    cursor: pointer;
}

.rcd-cookie-preferences {
    display: grid;

    margin-top: 20px;

    border: 1px solid #e0e9e4;
    border-radius: 15px;

    overflow: hidden;
}

.rcd-cookie-preference {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 78px;

    padding: 14px 16px;

    border-bottom: 1px solid #e7eeea;
}

.rcd-cookie-preference:last-child {
    border-bottom: 0;
}

.rcd-cookie-preference > div {
    display: grid;
    gap: 4px;
}

.rcd-cookie-preference strong {
    color: #17382c;

    font-size: 14px;
    font-weight: 850;
}

.rcd-cookie-preference small {
    color: #74837c;

    font-size: 11px;
    line-height: 1.5;
}

.rcd-cookie-preference input {
    width: 21px;
    height: 21px;

    accent-color: #087846;
}

.rcd-cookie-required {
    flex: 0 0 auto;

    padding: 5px 8px;

    border-radius: 999px;

    background: #eaf6ef;
    color: #087846;

    font-size: 9px;
    font-weight: 850;
}

.rcd-cookie-modal__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 18px;
}

body.rcd-cookie-modal-open {
    overflow: hidden;
}

@media (max-width: 680px) {

    .rcd-cookie-banner {
        inset-inline: 10px;
        inset-block-end: 10px;

        width: calc(100% - 20px);
    }

    .rcd-cookie-banner__content {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 16px;
    }

    .rcd-cookie-banner__actions {
        grid-template-columns:
            1fr
            1fr;

        min-width: 0;
    }

    .rcd-cookie-banner__actions
    [data-rcd-cookie-manage] {
        grid-column: 1 / -1;
    }

    .rcd-cookie-modal {
        align-items: end;

        padding: 0;
    }

    .rcd-cookie-modal__panel {
        width: 100%;
        max-height: 90vh;

        border-radius: 22px 22px 0 0;

        padding: 20px 16px
            max(20px, env(safe-area-inset-bottom));
    }

    .rcd-cookie-preference {
        min-height: 84px;
    }

    .rcd-cookie-modal__actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* RCD_PUBLIC_UX_FINAL_BLOCK_END */

/* =========================================================
   RCD_HEADER_VISUAL_HOTFIX_V2
   Desktop RTL spacing + compact store controls
   ========================================================= */

/*
 * Accessibility utility.
 * Prevent accessible-only App Store / Google Play labels
 * from becoming visible layout text.
 */
.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ---------- Large desktop ---------- */

@media (min-width: 1381px) {

    .site-header__inner {
        width: min(
            1560px,
            calc(100% - 64px)
        ) !important;

        grid-template-columns:
            minmax(330px, 1fr)
            max-content
            minmax(250px, 1fr)
            !important;

        column-gap:
            clamp(22px, 2vw, 38px)
            !important;
    }

    .site-header .main-nav {
        max-width: none !important;

        gap: 8px !important;
    }

    .site-header .main-nav > a,
    .site-header
    .crs-site-nav__more-button {
        min-height: 44px;

        padding-inline: 12px !important;

        font-size: 16px !important;
        font-weight: 800;

        line-height: 1.25;
    }

    html[dir="rtl"]
    .site-header
    .main-nav {
        direction: rtl !important;
    }

    html[dir="rtl"]
    .site-header
    .main-nav > a,
    html[dir="rtl"]
    .site-header
    .crs-site-nav__more-button {
        text-align: right;
    }

    .site-header .header-actions {
        gap: 8px !important;
    }

    /*
     * Header gets compact store icons.
     * Full-size store badges remain in footer/drawer.
     */
    .site-header
    .rcd-header-download__label {
        display: none !important;
    }

    .site-header
    .rcd-header-download {
        gap: 6px;

        margin-inline-end: 2px;
    }

    .site-header
    .rcd-header-store-icon {
        width: 36px;
        min-width: 36px;
        height: 36px;

        border: 0;
        border-radius: 10px;

        background: #14211c;
        color: #fff;

        box-shadow:
            0 1px 2px rgba(5, 25, 16, .12);
    }

    .site-header
    .rcd-header-store-icon__mark {
        color: #fff;

        font-size: 17px;
        font-weight: 900;
    }

    .site-header
    .rcd-header-store-icon__play {
        border-inline-start-color: #fff;
    }

    .site-header
    .rcd-header-language {
        width: 42px;
        min-width: 42px;
        height: 42px;

        font-size: 13px;
    }

    .site-header
    .crs-header-sign-in {
        padding-inline: 18px;

        font-size: 14px;
    }

    .site-header
    .rcd-header-company {
        padding-inline: 16px;

        font-size: 14px;
    }
}


/* ---------- Early responsive switch ---------- */

/*
 * Switch to the drawer before navigation,
 * actions and Arabic labels can collide.
 */
@media (max-width: 1380px) {

    .site-header__inner {
        display: grid !important;

        width: min(
            100% - 32px,
            1240px
        ) !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr)
            !important;

        min-height: 72px;
    }

    html[dir="ltr"]
    .site-header__inner {
        grid-template-areas:
            "toggle logo actions"
            !important;
    }

    html[dir="rtl"]
    .site-header__inner {
        grid-template-areas:
            "actions logo toggle"
            !important;
    }

    .site-header
    .main-nav {
        display: none !important;
    }

    .site-header
    .crs-mobile-menu-toggle {
        display: inline-flex !important;

        grid-area: toggle;
    }

    html[dir="ltr"]
    .site-header
    .crs-mobile-menu-toggle {
        justify-self: start;
    }

    html[dir="rtl"]
    .site-header
    .crs-mobile-menu-toggle {
        justify-self: end;
    }

    .site-header
    .brand {
        grid-area: logo;

        justify-self: center !important;

        margin: 0 !important;
    }

    .site-header
    .header-actions {
        grid-area: actions;

        display: flex !important;

        width: auto;

        justify-self: end;
    }

    html[dir="rtl"]
    .site-header
    .header-actions {
        justify-self: start;
    }

    .site-header
    .header-actions
    > :not(.rcd-header-language) {
        display: none !important;
    }

    .site-header
    .header-actions
    .rcd-header-language {
        display: inline-flex !important;
    }
}

/* RCD_HEADER_VISUAL_HOTFIX_V2_END */

/* =========================================================
   RCD_MOBILE_DRAWER_APP_POLISH_V3
   Remove duplicated header app controls inside drawer
   and polish the dedicated app-download block.
   ========================================================= */

/*
 * platform-shell copies header actions into the mobile drawer.
 * The drawer already has its own dedicated app-download section,
 * so the desktop header app control must not appear there again.
 */
.crs-mobile-drawer__actions
.rcd-header-download,
.crs-mobile-drawer__actions
> .rcd-header-store-icon {
    display: none !important;
}


/*
 * Keep the drawer actions clean:
 * language -> sign in -> company portal.
 */
.crs-mobile-drawer__actions {
    gap: 10px;
}


/*
 * Dedicated mobile store badges.
 * Dark treatment is clearer and closer to normal store badges.
 */
.rcd-mobile-drawer-download
.rcd-store-badges {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.rcd-mobile-drawer-download
.rcd-store-badge {
    width: 100%;
    min-width: 0;
    min-height: 50px;

    border-color: #17211d;

    background: #111915;
    color: #fff;

    opacity: 1;
}

.rcd-mobile-drawer-download
.rcd-store-badge__mark {
    background:
        rgba(255, 255, 255, .10);

    color: #fff;
}

.rcd-mobile-drawer-download
.rcd-store-badge__play {
    color: #fff;
}

.rcd-mobile-drawer-download
.rcd-store-badge__copy small {
    color:
        rgba(255, 255, 255, .62);
}

.rcd-mobile-drawer-download
.rcd-store-badge__copy b {
    color: #fff;
}

@media (max-width: 390px) {

    .rcd-mobile-drawer-download
    .rcd-store-badges {
        grid-template-columns: 1fr;
    }
}

/* RCD_MOBILE_DRAWER_APP_POLISH_V3_END */