/*
 * Safqa site shell.
 * Header and footer tokens live here so page templates never own the global chrome.
 */
:root {
    --safqa-shell-navy: #172434;
    --safqa-shell-navy-deep: #101b2a;
    --safqa-shell-ink: #0f172a;
    --safqa-shell-muted: #bdc6ce;
    --safqa-shell-accent: #ffd814;
    --safqa-shell-font: var(--safqa-theme-font-ar, "Noto Sans Arabic", sans-serif);
}

html body.theme-safqa #sqSignatureHeader,
html body.theme-safqa #sqSignatureFooter {
    box-sizing: border-box !important;
    width: 100% !important;
    clear: both !important;
}

html body.theme-safqa #sqSignatureHeader,
html body.theme-safqa #sqSignatureHeader * ,
html body.theme-safqa #sqSignatureFooter,
html body.theme-safqa #sqSignatureFooter * {
    box-sizing: border-box !important;
}

/* Hide UniTheme2 chrome only after the corresponding shared Safqa component exists. */
html body.theme-safqa:has(#sqSignatureHeader) .tygh-top-panel,
html body.theme-safqa:has(#sqSignatureHeader) .tygh-header,
html body.theme-safqa:has(#sqSignatureHeader) .ut2-header-allows-h-menu-stuck-top-sentinel {
    display: none !important;
}

html body.theme-safqa:has(#sqSignatureFooter) #tygh_footer,
html body.theme-safqa:has(#sqSignatureFooter) .tygh-footer,
html body.theme-safqa:has(#sqSignatureFooter) .ty-footer {
    display: none !important;
}

html body.theme-safqa #tygh_main_container > .ut2-sticky-panel__wrap:empty {
    display: none !important;
}

/* Authentication pages use the same site chrome, not a second page-specific shell. */
html body.theme-safqa .amz-dedicated-brand-header,
html body.theme-safqa .amz-dedicated-auth-footer {
    display: none !important;
}

html body.theme-safqa #sqSignatureFooter.safqa-preview-footer {
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 34px 14px !important;
    overflow: visible !important;
    background: var(--safqa-shell-navy) !important;
    color: #d9e0e6 !important;
    font-family: var(--safqa-shell-font) !important;
}

html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__inner {
    display: grid !important;
    grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)) !important;
    gap: 36px !important;
    width: min(1580px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: start !important;
}

html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__inner > section {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__inner h3 {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__inner p,
html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__inner a {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--safqa-shell-muted) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    text-decoration: none !important;
}

html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__inner a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__brand {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-family: var(--safqa-theme-font-numbers, "Outfit", sans-serif) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

@media (max-width: 900px) {
    html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    html body.theme-safqa #sqSignatureFooter.safqa-preview-footer {
        padding: 30px 16px !important;
    }

    html body.theme-safqa #sqSignatureFooter .safqa-preview-footer__inner {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}
