﻿:root {
    --cc-bg: #fffffff5;
    --cc-text: var(--colors-text-primary, #161b26);
    --cc-btn-primary-bg: var(--colors-primary-sa-flag-600-primary, #1b8354);
    --cc-btn-primary-color: var(--text-oncolor-primary, #ffffff);
    --cc-btn-primary-hover-bg: var(--colors-primary-sa-flag-700, #166a45);
}

#cc-main {
    font-family: IBMPlexSansArabic, "IBM Plex Sans Arabic", Tahoma, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
}

#cc-main .cm__desc {
    text-align: center;
}

#cc-main .cm {
    text-align: center;
    max-width: 1280px;
    width: 90%;
    min-height: 70px;
    padding: 12px 16px;
}

#cc-main .cm__body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
}

#cc-main .cm__btns {
    justify-self: end;
    font-family: IBMPlexSansArabic, "IBM Plex Sans Arabic", Tahoma, sans-serif;
}

#cc-main .cm__btn {
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    margin-inline-end: 10px;
    min-height: 44px;
    font-family: IBMPlexSansArabic, "IBM Plex Sans Arabic", Tahoma, sans-serif;
}

#cc-main .cm__desc a {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--link-primary, #1b8354);
    font-family: IBMPlexSansArabic, "IBM Plex Sans Arabic", Tahoma, sans-serif;
}

#cc-main .cm__btn[data-role="necessary"] {
    background: #6c727e !important;
    border: #6c727e !important;
}

#cc-main .cm__btn[data-role="necessary"]:hover {
    background: #161b26 !important;
}

#cc-main .cm__btn:focus-visible {
    outline: 2px solid #161616;
    outline-offset: 2px;
}

/* Wave 2 — overlay only; never push #main-content or the footer. */
html.show--consent,
body.show--consent {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

#cc-main {
    position: fixed !important;
    inset: auto 0 0 0;
    width: 100%;
    pointer-events: none;
    z-index: 2147483646;
}

#cc-main .cm,
#cc-main .pm {
    pointer-events: auto;
}

@media (max-width: 599px) {
    #cc-main .cm__body {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #cc-main .cm__btns {
        justify-self: stretch;
    }
}
