/* ============================================
   ASR Academy Theme Overrides
   - RTL support
   - Arabic Font: IBM Plex Sans Arabic (local @font-face)
   - ASR Brand Colors
   ============================================ */

/* Arabic font: IBM Plex Sans Arabic (local) */
@import url('ibm-plex.css');

/* ----- ASR Brand Color Palette ----- */
:root {
    --asr-primary: #443B85;
    --asr-primary-light: #5b51a3;
    --asr-primary-dark: #2f2960;
    --asr-cyan: #00B3E4;
    --asr-green: #42ba96;
    --asr-blue: #3984C6;
    --asr-navy: #1c1c2b;
    --asr-white: #ffffff;
    --asr-bg: #ffffff;
    --asr-bg-soft: #f5f7fa;
    --asr-text: #1c1c2b;
    --asr-text-muted: #5f6577;
    --asr-border: #e5e7eb;

    /* Override template variables to ASR palette */
    --text-color: #1c1c2b;
    --text-color-2: #5f6577;
    --background-color: #ffffff;
    --background-team: #f5f7fa;
    --accent-color: #00B3E4;
    --accent-color-2: #443B85;
    --accent-color-3: #42ba96;
    --accent-color-4: #3984C6;
    --color-1: #f5f7fa;
    --color-2: #ffffff;
    --color-3: #1c1c2b;
    --color-4: #443B85;
    --font-1: "IBM Plex Sans Arabic", "IBM Plex Arabic", system-ui, -apple-system, sans-serif;
    --font-2: "IBM Plex Sans Arabic", "IBM Plex Arabic", system-ui, -apple-system, sans-serif;

    /* Align Bootstrap's --bs-primary with the ASR palette so Bootstrap's
       `.bg-primary` / `.btn-primary` / `.text-primary` (which are declared
       with !important and would otherwise win over Tailwind utilities)
       render in the brand purple instead of Bootstrap's default blue. */
    --bs-primary: #443B85;
    --bs-primary-rgb: 68, 59, 133;
}

/* ----- Global Arabic body ----- */
html[dir="rtl"],
html[lang="ar"] {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Arabic", system-ui, -apple-system, sans-serif;
}

body {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Arabic", system-ui, -apple-system, sans-serif !important;
    font-weight: 400;
    letter-spacing: 0;
}

/* Marketing-only body styling — scoped so the admin/dashboard pages
   continue to use their shadcn/Tailwind text + background tokens
   (otherwise the !important rules below would override e.g.
   text-primary-foreground on the active sidebar item, making the
   text invisible against the primary-colored background). */
.marketing-shell {
    color: var(--asr-text) !important;
    background-color: var(--asr-bg) !important;
}

/* Headings - scoped to marketing pages only for the same reason. */
.marketing-shell h1,
.marketing-shell h2,
.marketing-shell h3,
.marketing-shell h4,
.marketing-shell h5,
.marketing-shell h6 {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Arabic", system-ui, -apple-system, sans-serif !important;
    color: var(--asr-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

p,
span,
a,
li,
label,
input,
textarea,
button,
.nav-link,
select,
option {
    font-family: "IBM Plex Sans Arabic", "IBM Plex Arabic", system-ui, -apple-system, sans-serif !important;
}

/* Utility: Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Light text helpers */
.fw-thin {
    font-weight: 100 !important;
}

.fw-extralight {
    font-weight: 200 !important;
}

.fw-light {
    font-weight: 300 !important;
}

.fw-regular {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

/* Larger Arabic heading sizes for MARKETING pages only.
   Wrap the marketing layout with .marketing-shell. Uses :where() so
   the whole selector has zero specificity, letting any Tailwind
   utility class (e.g. text-2xl on a card heading) win.
   Admin/dashboard pages don't have .marketing-shell, so they fall back
   to the smaller :where() defaults defined in globals.css. */
:where(.marketing-shell h1) {
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.2;
}

:where(.marketing-shell h2) {
    font-size: clamp(26px, 3.5vw, 40px);
    line-height: 1.25;
}

:where(.marketing-shell h3) {
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.3;
}

:where(.marketing-shell h4) {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.35;
}

:where(.marketing-shell h5) {
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.4;
}

:where(.marketing-shell h6) {
    font-size: 14px;
    line-height: 1.5;
}

:where(.marketing-shell p),
:where(.marketing-shell .text-color-2),
:where(.marketing-shell .text-muted) {
    color: var(--asr-text-muted);
    line-height: 1.85;
}

/* ----- Header / Navbar ----- */
#header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 12px rgba(28, 28, 43, 0.06);
    backdrop-filter: blur(8px);
}

#header .nav-link {
    color: var(--asr-text) !important;
    font-weight: 600;
}

#header .nav-link:hover,
#header .nav-link.active {
    color: var(--asr-primary) !important;
}

.logo-container img {
    max-height: 60px;
    width: auto !important;
    object-fit: contain;
}

/* ----- Buttons ----- */
.btn-accent,
.btn-primary {
    background: linear-gradient(135deg, var(--asr-cyan), var(--asr-primary)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 26px !important;
    font-weight: 700 !important;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.btn-accent:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(68, 59, 133, 0.25);
    filter: brightness(1.05);
    color: #fff !important;
}

.btn-toggler-accent {
    background: var(--asr-primary) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 44px;
    height: 44px;
}

/* Outline button */
.btn-outline-accent {
    background: transparent !important;
    color: var(--asr-primary) !important;
    border: 2px solid var(--asr-primary) !important;
    border-radius: 999px !important;
    padding: 10px 24px !important;
    font-weight: 700 !important;
}

.btn-outline-accent:hover {
    background: var(--asr-primary) !important;
    color: #fff !important;
}

/* ----- Cards / Sections backgrounds ----- */
.bg-color-1,
.bg-color-2 {
    background-color: var(--asr-bg-soft) !important;
    color: var(--asr-text) !important;
}

.bg-accent {
    background-color: var(--asr-primary) !important;
    color: #fff !important;
}

.bg-dark,
.bg-black {
    background-color: var(--asr-navy) !important;
    color: #fff !important;
}

.bg-dark *,
.bg-black * {
    color: #fff !important;
}

.bg-dark p,
.bg-black p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.text-accent {
    color: var(--asr-primary) !important;
}

.text-color {
    color: var(--asr-text) !important;
}

/* Cards */
.card,
.r-card,
.feature-card {
    background: #fff !important;
    color: var(--asr-text) !important;
    border: 1px solid var(--asr-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(28, 28, 43, 0.04);
    transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover,
.r-card:hover,
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(68, 59, 133, 0.10);
}

/* ----- RTL adjustments for icons/arrows ----- */
[dir="rtl"] .rtmicon-arrow-up-right,
.rtmicon-arrow-up-right {
    transform: scaleX(-1);
}

[dir="rtl"] .rtmicon-arrow-right {
    transform: scaleX(-1);
}

[dir="rtl"] .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

[dir="rtl"] .me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

[dir="rtl"] .text-start {
    text-align: right !important;
}

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* ----- Footer ----- */
footer,
.footer,
#footer {
    background: var(--asr-navy) !important;
    color: #fff !important;
}

footer a,
.footer a,
#footer a {
    color: rgba(255, 255, 255, 0.85) !important;
}

footer a:hover,
.footer a:hover,
#footer a:hover {
    color: var(--asr-cyan) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: #fff !important;
}

footer p {
    color: rgba(255, 255, 255, 0.7) !important;
}

.social-icons a {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 8px;
    transition: all .25s ease;
}

.social-icons a:hover {
    background: var(--asr-primary) !important;
    color: #fff !important;
    transform: translateY(-3px);
}

/* ----- Hero Section ----- */
.hero-asr {
    position: relative;
    background: linear-gradient(135deg, #443B85 0%, #00B3E4 100%);
    color: #fff;
    padding: 140px 0 100px;
    overflow: hidden;
}

.hero-asr::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 85% 20%, rgba(0, 179, 228, 0.18) 0%, transparent 55%);
    pointer-events: none;
}

.hero-asr h1,
.hero-asr p {
    color: #fff !important;
}

.hero-asr .btn-accent {
    background: #fff !important;
    color: var(--asr-primary) !important;
}

.hero-asr .btn-outline-light {
    border: 2px solid #fff !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
}

.hero-asr .btn-outline-light:hover {
    background: #fff !important;
    color: var(--asr-primary) !important;
}

/* ----- Stats Block ----- */
.asr-stats {
    background: var(--asr-bg-soft);
    border-radius: 24px;
    padding: 36px 24px;
}

.asr-stat-item .num {
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 700;
    color: var(--asr-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.asr-stat-item .label {
    color: var(--asr-text-muted);
    margin-top: 8px;
    font-weight: 600;
}

/* ----- Feature/Why Choose Us ----- */
.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--asr-cyan), var(--asr-primary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
}

/* ----- Course / Program Cards ----- */
.program-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--asr-border);
    overflow: hidden;
    transition: all .25s ease;
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(68, 59, 133, 0.12);
    border-color: var(--asr-primary);
}

.program-card .img-wrap {
    height: 200px;
    background: linear-gradient(135deg, var(--asr-cyan), var(--asr-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 48px;
}

.program-card .body {
    padding: 22px;
}

.program-card .badge-tag {
    display: inline-block;
    background: rgba(0, 179, 228, 0.12);
    color: var(--asr-primary);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* ----- FAQ Accordion ----- */
.accordion-item {
    background: #fff !important;
    border: 1px solid var(--asr-border) !important;
    border-radius: 14px !important;
    margin-bottom: 12px;
    overflow: hidden;
    color: #1c1c2b !important;
}

.accordion-button {
    background: #fff !important;
    color: var(--asr-text) !important;
    font-weight: 600 !important;
    font-family: "IBM Plex Sans Arabic", system-ui, sans-serif !important;
}

.accordion-button:not(.collapsed) {
    background: rgba(68, 59, 133, 0.06) !important;
    color: var(--asr-primary) !important;
    box-shadow: none !important;
}

.accordion-body,
.accordion-collapse.show .accordion-body,
.accordion-collapse.collapsing .accordion-body {
    color: #4b5563 !important;
    /* Clearly visible dark grey */
    line-height: 1.85;
    background-color: #fff !important;
}

/* Safety override for Tailwind v4's .collapse { visibility: collapse } */
.collapse,
.accordion-collapse {
    visibility: visible !important;
}

/* ----- Forms ----- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    background: #fff !important;
    color: var(--asr-text) !important;
    border: 1px solid var(--asr-border) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-family: "IBM Plex Sans Arabic", system-ui, sans-serif !important;
    font-weight: 400 !important;
}

.form-control:focus {
    border-color: var(--asr-primary) !important;
    box-shadow: 0 0 0 3px rgba(68, 59, 133, 0.12) !important;
}

/* Section padding (excludes utility/aria sections like Sonner Toaster) */
section:not([aria-live]):not([aria-label="Notifications alt+T"]),
.r-section {
    padding-block: 80px;
}

/* Section title */
.section-title {
    font-weight: 700 !important;
    margin-bottom: 16px;
    color: var(--asr-text) !important;
    letter-spacing: -0.015em;
}

.section-subtitle {
    color: var(--asr-text-muted) !important;
    font-size: 18px;
    max-width: 720px;
    margin: 0 auto 40px;
    line-height: 1.85;
}

.section-eyebrow {
    display: inline-block;
    color: var(--asr-primary);
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* Hide template's super-wide text utilities issues */
.txt-200,
.txt-150,
.txt-130 {
    font-size: clamp(28px, 4vw, 44px) !important;
}

/* Page header (sub-pages) */
.asr-page-header {
    background: linear-gradient(135deg, var(--asr-primary) 0%, var(--asr-cyan) 100%);
    color: #fff;
    padding: 140px 0 60px;
    text-align: center;
}

.asr-page-header h1 {
    color: #fff !important;
}

.asr-page-header .breadcrumb {
    justify-content: center;
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.7);
}

.asr-page-header .breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.asr-page-header .breadcrumb-item.active {
    color: #fff;
}

/* Vision 2030 banner */
.vision-2030 {
    background: linear-gradient(135deg, #1c1c2b 0%, #443B85 100%);
    color: #fff;
    border-radius: 24px;
    padding: 48px;
}

.vision-2030 h1,
.vision-2030 h2,
.vision-2030 h3,
.vision-2030 h4,
.vision-2030 h5,
.vision-2030 h6,
.vision-2030 p,
.vision-2030 span {
    color: #fff !important;
}

/* ASR badge */
.asr-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 179, 228, 0.12);
    color: var(--asr-cyan);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
}

/* Misc cleanup for template's heavy patterns */
.dark-section,
.bg-color-2 {
    background-color: var(--asr-bg-soft) !important;
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section p {
    color: var(--asr-text) !important;
}

/* Image rounded corners default */
img.rounded-3,
img.rounded-4 {
    border-radius: 16px !important;
}

/* ----- Mobile Off-canvas ----- */
.offcanvas {
    background: var(--asr-navy) !important;
    color: #fff;
}

.offcanvas * {
    color: #fff !important;
}

.offcanvas .text-color {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Ensure container respects RTL */
[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
}

/* Hide elements from template that aren't applicable */
.template-only {
    display: none !important;
}

/* ===== Navbar action icons (avatar / cart) ===== */
.nav-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--asr-bg-soft);
    color: var(--asr-text);
    border: 1px solid var(--asr-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none !important;
    transition: all .2s ease;
    position: relative;
    flex-shrink: 0;
}

.nav-icon-btn:hover {
    background: linear-gradient(135deg, var(--asr-primary), var(--asr-cyan));
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(68, 59, 133, 0.18);
}

.nav-icon-btn .badge-dot {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e63946;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}