/* ==========================================================================
   ASOUG PAY — Site-wide design system (loaded on every public page)
   Tokens, font override, header, body containment, focus states, and
   shared animation keyframes. Page-specific components live in each
   view's own <style> block.
   ========================================================================== */

:root {
    --ap-brand-950: #1A002E;
    --ap-brand-900: #2F0052;
    --ap-brand-800: #3F1069;
    --ap-brand-700: #581C87;
    --ap-brand-600: #6D28D9;
    --ap-brand-500: #7C3AED;
    --ap-brand-400: #A855F7;
    --ap-brand-200: #E9D5FF;
    --ap-brand-100: #F3E8FF;
    --ap-brand-50:  #FAF5FF;

    --ap-ink:      #16101F;
    --ap-ink-soft: #3D3550;
    --ap-muted:    #6B7280;

    --ap-surface:     #FFFFFF;
    --ap-surface-alt: #FBF9FF;
    --ap-line:        rgba(88, 28, 135, 0.10);
    --ap-line-strong: rgba(88, 28, 135, 0.24);

    --ap-r-sm:   10px;
    --ap-r-md:   14px;
    --ap-r-lg:   20px;
    --ap-r-xl:   28px;
    --ap-r-pill: 999px;

    --ap-shadow-xs: 0 1px 2px rgba(26, 0, 46, .05);
    --ap-shadow-sm: 0 2px 10px rgba(26, 0, 46, .05), 0 1px 2px rgba(26, 0, 46, .04);
    --ap-shadow-md: 0 14px 30px -14px rgba(26, 0, 46, .20), 0 2px 6px rgba(26, 0, 46, .04);
    --ap-shadow-lg: 0 30px 60px -26px rgba(26, 0, 46, .32), 0 4px 12px rgba(26, 0, 46, .05);

    --ap-ease: cubic-bezier(.22, .61, .36, 1);
    --ap-dur:  .28s;

    --ap-section-y: clamp(60px, 7vw, 100px);

    --ap-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
}

html[dir="rtl"] {
    /* Roboto has no Arabic glyphs — Arabic pages need a stack that does. */
    --ap-font: 'Segoe UI', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Dubai', Tahoma, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Base — reassert the font past style.css's `* { font-family: Arial }`
   which pinned it to Arial on every element.
   -------------------------------------------------------------------------- */
body,
body * {
    font-family: var(--ap-font);
}

.fa,
.fas, .fa-solid,
.far, .fa-regular,
.fal, .fa-light,
.fab, .fa-brands,
[class^="bi-"], [class*=" bi-"] {
    font-family: var(--fa-style-family, "Font Awesome 6 Free");
}
.fab, .fa-brands { font-family: "Font Awesome 6 Brands"; }
[class^="bi-"], [class*=" bi-"] { font-family: "bootstrap-icons" !important; }

body {
    background: var(--ap-surface);
    color: var(--ap-ink-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Contain decorative blobs (e.g. footer's -100px radial). `clip`
       prevents scroll without creating a new scroll container. */
    overflow-x: clip;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* On-brand focus rings site-wide */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible {
    outline: 3px solid var(--ap-brand-400);
    outline-offset: 3px;
    border-radius: var(--ap-r-sm);
    box-shadow: none;
}

/* Utilities referenced by markup but never defined in the base theme */
.text-purple { color: var(--ap-brand-900) !important; }
.bg-purple   { background-color: var(--ap-brand-900) !important; }

/* Entrance animation — many views use .animate-fade-in-up and an inline
   animation-delay, but the keyframes never existed in the base theme. */
.animate-fade-in-up { animation: apFadeInUp .8s var(--ap-ease) both; }
@keyframes apFadeInUp {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Header
   Sticky, sized so 12 English nav items fit on one line down to ~992px.
   -------------------------------------------------------------------------- */
header.header_bg {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(180deg, #391158 0%, #210D59 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .08),
        0 10px 30px -18px rgba(26, 0, 46, .9);
}

header.header_bg .logo img,
header.header_bg .mobile-logo img {
    max-height: 44px;
    width: auto;
}

/* Give the logo a hair of breathing room from the container edge.
   Logical property = right in Arabic, left in English. */
header.header_bg .logo {
    margin-inline-start: 10px;
}

header.header_bg .navigation ul {
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
}

header.header_bg .navigation ul li {
    list-style: none;
    flex-shrink: 0;
}

header.header_bg .navigation ul li a {
    position: relative;
    display: inline-block;
    padding: 10px 9px;
    font-size: .86rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .86);
    border-radius: var(--ap-r-sm);
    white-space: nowrap;
    transition: color var(--ap-dur) var(--ap-ease),
                background-color var(--ap-dur) var(--ap-ease);
}

header.header_bg .navigation ul li a::after {
    content: '';
    position: absolute;
    inset-inline: 9px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--ap-brand-400);
    transform: scaleX(0);
    transition: transform .28s var(--ap-ease);
}

header.header_bg .navigation ul li a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .08);
}

header.header_bg .navigation ul li a:hover::after {
    transform: scaleX(1);
}

/* Language / sign-in cluster */
header.header_bg .arabic-top {
    align-items: center;
    gap: 4px;
    padding-top: 0;
    flex-shrink: 0;
}

header.header_bg .arabic-top p {
    padding-top: 0;
    margin: 0;
    color: rgba(255, 255, 255, .3);
}

header.header_bg .arabic-top a {
    padding: 8px 10px;
    font-size: .84rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
    border-radius: var(--ap-r-sm);
    white-space: nowrap;
    transition: color var(--ap-dur) var(--ap-ease),
                background-color var(--ap-dur) var(--ap-ease);
}

header.header_bg .arabic-top a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .12);
}

header.header_bg .menu-bar-icon {
    transition: background-color var(--ap-dur) var(--ap-ease);
}
header.header_bg .menu-bar-icon:hover {
    background: rgba(255, 255, 255, .28) !important;
}

/* At the narrow end of desktop, English labels are longest — tighten
   nav + language cluster + logo so nothing wraps. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    header.header_bg .navigation ul li a {
        padding: 8px 7px;
        font-size: .78rem;
    }
    header.header_bg .navigation ul li a::after {
        inset-inline: 7px;
    }
    header.header_bg .arabic-top a {
        padding: 7px 8px;
        font-size: .78rem;
    }
    header.header_bg .logo img,
    header.header_bg .mobile-logo img {
        max-height: 38px;
    }
    header.header_bg .logo {
        margin-inline-start: 6px;
    }
}

/* Mobile drawer — arabic.css paints the hover row bright red (#b91616)
   which fights the brand everywhere it appears. Recolor on brand. */
.nav-menu-mobile .navigation ul li:hover {
    background: var(--ap-brand-50) !important;
}

/* --------------------------------------------------------------------------
   Accessibility & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .animate-fade-in-up { opacity: 1 !important; transform: none !important; }
}