/* ==========================================================================
   🕌 DARUL SHAHABISHT -UL- ISLAMIA — UNIFIED DESIGN SYSTEM
   Professional Polish & Consistent Aesthetic Foundation
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Serif:ital,wght@0,400;0,700;1,400&display=swap');

/* Material Symbols Outlined Direct Font Face */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v367/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

/* --------------------------------------------------------------------------
   1. ROOT VARIABLES & TOKENS (Luxury Islamic Emerald & Warm Gold)
   -------------------------------------------------------------------------- */
:root, html, html.dark {
    color-scheme: dark !important;

    /* Primary Palette */
    --color-primary: #ecfdf5;
    --color-primary-dark: #05100c;
    --color-primary-light: #34d399;
    --color-secondary: #34d399;
    --color-secondary-container: #134633;
    --color-accent-gold: #d97706;
    --color-accent-gold-dark: #b45309;
    --color-accent-gold-light: #fef08a;
    --color-whatsapp: #25D366;
    --color-whatsapp-dark: #1ea952;
    
    /* Backgrounds & Surfaces (Luxury Dark Emerald Canvas) */
    --bg-page: #05100c;
    --bg-surface: #071610;
    --bg-surface-card: #0c251c;
    --bg-surface-low: #091d16;
    --bg-surface-high: #123327;
    --bg-surface-highest: #163d2e;
    
    /* Text & Contrast (Crisp White & Soft Sage Mint) */
    --text-main: #ffffff;
    --text-muted: #d1ede1;
    --text-subtle: #a7f3d0;
    --text-inverse: #05100c;
    --border-color: rgba(52, 211, 153, 0.25);
    --border-color-strong: rgba(52, 211, 153, 0.45);
    
    /* Shadows & Radii */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 20px 45px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESET & BASE STYLES
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #ffffff !important;
    background-color: #05100c !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. TAILWIND UTILITY OVERRIDES (Ensuring High-Contrast Dark Theme Everywhere)
   -------------------------------------------------------------------------- */
.bg-background,
.bg-surface,
.bg-surface-bright,
.bg-surface-dim,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-container-lowest,
.geometric-bg {
    background-color: #0c251c !important;
    color: #ffffff !important;
}

body, main, section.bg-background {
    background-color: #05100c !important;
}

section.bg-surface,
section.bg-surface-container-low,
section.bg-surface-container {
    background-color: #071610 !important;
}

/* Bento grid cards & feature containers */
.bg-surface-container-lowest,
.bg-surface-bright,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-container,
div[class*="rounded-xl"][class*="bg-"],
div[class*="rounded-2xl"][class*="bg-"],
article[class*="rounded-"] {
    background-color: #0c251c !important;
    border-color: rgba(52, 211, 153, 0.25) !important;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY & HIGH CONTRAST TEXT RULES
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.font-display-lg,
.font-display-lg-mobile,
.font-headline-md,
.font-headline-sm,
.text-primary,
.text-on-surface,
.text-on-background {
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: -0.015em;
}

p, li,
.text-on-surface-variant,
.font-body-lg,
.font-body-md {
    color: #d1ede1 !important;
    line-height: 1.65;
}

.text-secondary {
    color: #34d399 !important;
}

.text-on-secondary-container,
.text-tertiary-fixed-dim,
.text-on-tertiary-fixed {
    color: #a7f3d0 !important;
}

.font-quran-verse {
    font-family: 'Noto Serif', serif;
    direction: rtl;
    line-height: 2.2 !important;
    color: #ecfdf5 !important;
}

/* --------------------------------------------------------------------------
   5. NAVIGATION HEADER & DROPDOWN
   -------------------------------------------------------------------------- */
header {
    background-color: rgba(7, 22, 16, 0.98) !important;
    background: rgba(7, 22, 16, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(52, 211, 153, 0.25) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
}

header nav a {
    color: #e2f6ee !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

header nav a:hover {
    color: #34d399 !important;
}

.nav-dropdown-menu {
    background-color: #0c251c !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8) !important;
}

.nav-dropdown-menu a {
    color: #d1ede1 !important;
}

.nav-dropdown-menu a:hover {
    background-color: #163d2e !important;
    color: #34d399 !important;
}

/* --------------------------------------------------------------------------
   6. UNIFIED BUTTONS & CALL-TO-ACTIONS
   -------------------------------------------------------------------------- */
/* Primary Gold CTA (BOOK FREE TRIAL) */
.btn-primary-trial,
a.btn-primary-trial,
button.btn-primary-trial,
button.bg-tertiary-container,
a.bg-tertiary-container {
    background-color: #d97706 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

.btn-primary-trial:hover,
a.btn-primary-trial:hover,
button.btn-primary-trial:hover,
button.bg-tertiary-container:hover,
a.bg-tertiary-container:hover {
    background-color: #b45309 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.5) !important;
}

/* Secondary Green Buttons */
button.bg-secondary,
a.bg-secondary,
.btn-secondary {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
}

button.bg-secondary:hover,
a.bg-secondary:hover,
.btn-secondary:hover {
    background-color: #059669 !important;
    transform: translateY(-2px);
}

/* Non-button background utilities */
div.bg-secondary,
section.bg-secondary,
article.bg-secondary {
    background-color: #0c251c !important;
    color: #ffffff !important;
}

.bg-secondary-container {
    background-color: #134633 !important;
    color: #a7f3d0 !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
}

/* --------------------------------------------------------------------------
   7. FOOTER STYLING
   -------------------------------------------------------------------------- */
footer {
    background-color: #071610 !important;
    background: linear-gradient(180deg, #0c251d 0%, #06150e 100%) !important;
    border-top: 1px solid rgba(52, 211, 153, 0.25) !important;
    color: #e6f4ee !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer strong, footer b,
footer .font-headline-sm, footer .font-headline-md {
    color: #ffffff !important;
    font-weight: 700 !important;
}

footer p, footer li, footer span, footer a {
    color: #c4ded2 !important;
}

footer a:hover {
    color: #34d399 !important;
    text-decoration: underline;
}

footer .material-symbols-outlined {
    color: #34d399 !important;
}

/* --------------------------------------------------------------------------
   8. FLOATING WHATSAPP BUTTON ANIMATION
   -------------------------------------------------------------------------- */
@keyframes wa-pulse-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.03); }
}

.wa-floating-radar-btn,
.wa-floating-btn,
#darushahabist-floating-wa a {
    animation: wa-pulse-bounce 3.5s ease-in-out infinite !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(37, 211, 102, 0.45) !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #25D366 !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
    z-index: 999999;
}

.wa-floating-radar-btn:hover,
.wa-floating-btn:hover,
#darushahabist-floating-wa a:hover {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 15px rgba(37, 211, 102, 0.6) !important;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE UTILITIES & FLUID TYPOGRAPHY
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    h1, .font-display-lg, .font-display-lg-mobile {
        font-size: clamp(1.75rem, 5.5vw, 2.5rem) !important;
        line-height: 1.22 !important;
    }
    
    h2, .font-headline-md {
        font-size: clamp(1.35rem, 4vw, 1.85rem) !important;
        line-height: 1.28 !important;
    }
    
    .wa-floating-radar-btn,
    .wa-floating-btn,
    #darushahabist-floating-wa a {
        width: 52px !important;
        height: 52px !important;
        bottom: 16px !important;
        right: 16px !important;
    }
}