/*
 * ═══════════════════════════════════════════════════════════════
 *  THEME: BRAND RED — Alodhaib Red + Navy Identity
 *
 *  ARCHITECTURE:
 *  Instead of overriding every component individually, we REMAP
 *  the CSS variables so ALL 35+ components that reference them
 *  automatically adopt the Red + Navy palette.
 *
 *  KEY CHANGE: --color-accent (gold) → WHITE on dark surfaces
 *  This eliminates gold from stats, footer, badges, hovers, etc.
 *  Gold is only retained where explicitly re-applied (e.g. wassilha).
 *
 *  Color hierarchy: RED (action) → NAVY (structure) → WHITE (accent)
 * ═══════════════════════════════════════════════════════════════
 */

:root {
    /* ─── Primary: Brand Red ─── */
    --color-primary:         #C8102E;
    --color-primary-dark:    #9B0C23;
    --color-primary-light:   #E42040;
    --color-primary-dim:     #8B1A2B;
    --color-primary-subtle:  rgba(200, 16, 46, 0.08);

    /* ─── Secondary: Navy (stays the same) ─── */
    --color-secondary:       #1B2A4A;
    --color-secondary-dark:  #0F1A2E;
    --color-secondary-light: #2C3E6B;

    /*
     * ─── Accent: REMAPPED to White ───
     * In the navy theme, accent = gold. In the red theme, we use
     * white as the accent on dark surfaces (stats, footer, cards).
     * This one variable change automatically updates ~35 places.
     */
    --color-accent:          #FFFFFF;
    --color-accent-light:    rgba(255, 255, 255, 0.85);

    /* ─── Gradients — Red-forward ─── */
    --gradient-primary:      linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-secondary:    linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    --gradient-navy:         linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-accent:       linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dim) 100%);
    --gradient-hero:         linear-gradient(135deg, rgba(140,14,30,0.82) 0%, rgba(27,42,74,0.85) 100%);

    /* ─── Neutrals ─── */
    --color-white:           #FFFFFF;
    --color-off-white:       #FFF9F7;
    --color-light-gray:      #F0E8EA;
    --color-gray:            #6C757D;
    --color-dark:            #212529;
    --color-text:            #2C3E50;
    --color-text-light:      #6B778D;

    /* ─── Secondary-ink ─── */
    --color-secondary-ink:     #0a0f1a;
    --color-secondary-ink-mid: #12192e;
    --color-secondary-ink-alt: #0d1524;
    --color-secondary-mid:      #2d4270;
    --color-surface-alt:        #FFF9F7;
    --color-border-light:       #f0e8ea;
    --color-border-medium:      #e0d5d8;
    --color-placeholder:        #ccbbbb;
}


/* ═══════════════════════════════════════════════════════════════
   A. BASE BUTTONS — Global overrides (apply to ALL pages)
   These swap gold/navy buttons → red across the whole site.
   ═══════════════════════════════════════════════════════════════ */

/* Primary solid button: navy gradient → RED gradient */
.btn-primary-custom {
    background: var(--gradient-primary) !important;
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.25) !important;
}
.btn-primary-custom:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%) !important;
    box-shadow: 0 6px 20px rgba(200, 16, 46, 0.35) !important;
}

/* Outline button: navy → RED */
.btn-outline-primary-custom {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.btn-outline-primary-custom:hover {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Hero primary button: gold → RED solid */
.btn-hero-primary {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.4) !important;
    border: 2px solid var(--color-primary) !important;
}
.btn-hero-primary:hover {
    background: var(--color-primary-light) !important;
    box-shadow: 0 6px 25px rgba(200, 16, 46, 0.5) !important;
}

/* CTA button (top-bar wassilha): RED */
.btn-cta {
    background: var(--gradient-primary) !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3) !important;
}
.btn-cta:hover {
    box-shadow: 0 6px 20px rgba(200, 16, 46, 0.45) !important;
}

/* Back-to-top button → Red */
.back-to-top {
    background: var(--color-primary) !important;
}
.back-to-top:hover {
    background: var(--color-primary-dark) !important;
}


/* ═══════════════════════════════════════════════════════════════
   B. TOP BAR — RED gradient (not navy)
   ═══════════════════════════════════════════════════════════════ */
.top-bar {
    background: var(--gradient-primary) !important;
}
.top-bar a:hover {
    color: var(--color-white) !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.4);
}
.top-bar-contact i {
    color: var(--color-white) !important;
}


/* ═══════════════════════════════════════════════════════════════
   C. STATS SECTION — RED gradient bg, WHITE numbers
   (--color-accent is now white, so stat-number auto-fixes)
   ═══════════════════════════════════════════════════════════════ */
.stats-section {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dim) 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   D. SERVICES SECTION — Red accents on cards
   ═══════════════════════════════════════════════════════════════ */
.service-card-overlay {
    background: linear-gradient(
        180deg,
        rgba(27, 42, 74, 0.05) 0%,
        rgba(200, 16, 46, 0.15) 40%,
        rgba(27, 42, 74, 0.80) 70%,
        rgba(139, 26, 43, 0.92) 100%
    ) !important;
}
.service-card:hover .service-card-overlay {
    background: linear-gradient(
        180deg,
        rgba(200, 16, 46, 0.05) 0%,
        rgba(200, 16, 46, 0.25) 40%,
        rgba(27, 42, 74, 0.85) 70%,
        rgba(139, 26, 43, 0.95) 100%
    ) !important;
}

/* Service badge → Red pill */
.service-card-content .service-badge {
    background: rgba(200, 16, 46, 0.25) !important;
    border-color: rgba(200, 16, 46, 0.4) !important;
}

/* Service icon circle (why choose us text cards) */
.service-card-icon {
    background: var(--color-primary-subtle) !important;
    color: var(--color-primary) !important;
}

/* Why Choose Us hover border: red (not gold) */
#why-choose-us .service-card.service-card--text:hover {
    border-inline-start-color: var(--color-primary-light) !important;
}


/* ═══════════════════════════════════════════════════════════════
   E. OFFERS SECTION — Red gradient bg, white cards with glow
   ═══════════════════════════════════════════════════════════════ */
#offers-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dim) 100%) !important;
}

/* Section title + subtitle → white on red bg */
#offers-section .section-title {
    color: var(--color-white) !important;
}
#offers-section .section-title::after {
    background: var(--color-white) !important;
}
#offers-section .section-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Offer cards: white bg, no border, glow */
#offers-section .offer-card {
    background: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.12),
        0 0 40px rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
#offers-section .offer-card:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.2),
        0 0 50px rgba(255, 255, 255, 0.15) !important;
}

/* Fix image corner clipping */
#offers-section .offer-card > div[style*="background-image"] {
    border-radius: 0 !important;
}

/* Offer card hover border: RED (not gold) —
   override --color-accent which is now white */
.offer-card:hover {
    border-color: var(--color-primary) !important;
}

/* Offer badge → RED */
.offer-badge {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}
.offer-badge--package {
    background: var(--color-secondary) !important;
}

/* "مجاناً" / "FREE" → RED */
.offer-price--success {
    color: var(--color-primary) !important;
}

/* "View All Offers" → white outline on red bg */
#offers-section > .container > .text-center > .btn-outline-primary-custom {
    background: transparent !important;
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
}
#offers-section > .container > .text-center > .btn-outline-primary-custom:hover {
    background: var(--color-white) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════
   F. PARTNERS SECTION — One RED button, one NAVY button
   ═══════════════════════════════════════════════════════════════ */
#partners-section .btn-outline-primary {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}
#partners-section .btn-outline-primary:hover {
    background: var(--color-secondary) !important;
    color: var(--color-white) !important;
}


/* ═══════════════════════════════════════════════════════════════
   G. WASSILHA SECTION — The ONE place gold is kept intentionally
   ═══════════════════════════════════════════════════════════════ */

/* Icon circle: Red */
.wassilha-home-icon-circle {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    border-color: rgba(200, 16, 46, 0.4) !important;
    color: var(--color-white) !important;
}

/* Service tag: Red */
.wassilha-home-tag {
    background: rgba(200, 16, 46, 0.15) !important;
    border-color: rgba(200, 16, 46, 0.3) !important;
    color: var(--color-primary-light) !important;
}

/* "وصّلها" text: real gold (the ONLY gold usage in red theme) */
.wassilha-home-content .text-gold {
    color: #D4A843 !important;
}

/* Feature icons: Red + white alternating */
.wassilha-home-feature:nth-child(1) i { color: var(--color-primary-light) !important; }
.wassilha-home-feature:nth-child(2) i { color: rgba(255, 255, 255, 0.8) !important; }
.wassilha-home-feature:nth-child(3) i { color: var(--color-primary-light) !important; }

/* Wassilha CTA button (higher specificity to beat inline) */
#wassilha-home .wassilha-home-btn {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3) !important;
    transition: all 0.3s ease;
}
#wassilha-home .wassilha-home-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-secondary-light) 100%) !important;
    box-shadow: 0 8px 25px rgba(200, 16, 46, 0.5) !important;
    color: var(--color-white) !important;
    transform: translateY(-3px);
}

/* Floating badges border: red + white + navy */
.wassilha-home-badge-1 { border-color: rgba(200, 16, 46, 0.35) !important; }
.wassilha-home-badge-2 { border-color: rgba(255, 255, 255, 0.25) !important; }
.wassilha-home-badge-3 { border-color: rgba(27, 42, 74, 0.35) !important; }


/* ═══════════════════════════════════════════════════════════════
   H. CTA "BOOK APPOINTMENT" — RED gradient
   ═══════════════════════════════════════════════════════════════ */
#cta-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dim) 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   I. PAGE HEADERS — RED gradient overlay (all inner pages)
   ═══════════════════════════════════════════════════════════════ */
.page-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dim) 100%) !important;
}
.page-header--img .page-header-overlay {
    background: linear-gradient(
        180deg,
        rgba(200, 16, 46, 0.45) 0%,
        rgba(139, 26, 43, 0.6) 50%,
        rgba(27, 42, 74, 0.75) 100%
    ) !important;
}


/* ═══════════════════════════════════════════════════════════════
   J. FOOTER — NAVY dark with RED accents (gold eliminated)
   Headings, hovers, icons all use RED instead of gold.
   ═══════════════════════════════════════════════════════════════ */

/* Footer bottom: red strip */
.footer-bottom {
    background: linear-gradient(0deg, var(--color-primary) 5%, var(--color-secondary-dark) 5%) !important;
    border-top: none !important;
}

/* Heading underline: RED gradient */
.footer-heading::after {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
}

/* Slogan: light gray (not gold anymore — accent is white now) */
.footer-slogan {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Link hovers: RED */
.footer-links a:hover {
    color: var(--color-primary-light) !important;
}
.footer-bottom-links a:hover {
    color: var(--color-primary-light) !important;
}
.footer-credit a:hover {
    color: var(--color-primary-light) !important;
}

/* Contact icons: RED */
.footer-contact-info i {
    color: var(--color-primary) !important;
}

/* Social icons hover: RED glow */
.footer-social a:hover {
    background: rgba(200, 16, 46, 0.25) !important;
    color: var(--color-primary-light) !important;
}

/* Footer logo centering on mobile */
@media (max-width: 575.98px) {
    .footer-logo-canvas {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   K. GENERAL ELEMENTS — Global red accents
   ═══════════════════════════════════════════════════════════════ */

/* Value card hover accent → Red */
.value-card::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-primary)) !important;
}

/* About stat card accent → Red */
.about-stat-card {
    border-top: 3px solid var(--color-primary) !important;
}

/* News/Blog card links → Red */
.news-card .card-link {
    color: var(--color-primary) !important;
}
.news-card .card-link:hover {
    color: var(--color-primary-dark) !important;
}

/* Offer detail page gold text → Red */
.offer-detail-gold-text {
    color: var(--color-primary) !important;
}
.offer-detail-gold-light-text {
    color: var(--color-primary-light) !important;
}
.offer-detail-form-border {
    border-color: var(--color-primary) !important;
}

/* Timeline accent (history page) */
.timeline-dot,
.timeline-item::before {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}