/*
 * ═══════════════════════════════════════════════════════════════
 *  THEME: BRAND RED — Alodhaib Red + Navy Identity
 *
 *  DESIGN PHILOSOPHY (from real brand assets):
 *  - Buildings: Bold RED structural frame
 *  - Uniforms: NAVY overalls + RED shoulders
 *  - Promos: RED gradient backgrounds + WHITE text + GOLD
 *
 *  This theme keeps NAVY for header/footer dark anchor but makes
 *  RED the dominant surface/accent color throughout the site.
 *
 *  Color distribution: Red (hero), Navy (anchor), minimal Gold
 * ═══════════════════════════════════════════════════════════════
 */

:root {
    /* ─── Primary: Logo Red — THE hero color ─── */
    --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 (uniform body color) ─── */
    --color-secondary:       #1B2A4A;
    --color-secondary-dark:  #0F1A2E;
    --color-secondary-light: #2C3E6B;

    /* ─── Accent: Gold (used sparingly) ─── */
    --color-accent:          #D4A843;
    --color-accent-light:    #E8C76A;

    /* ─── Gradients — Red-forward versions ─── */
    --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-secondary) 0%, var(--color-secondary-light) 100%);
    --gradient-accent:       linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 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;
}


/* ═══════════════════════════════════════════════════════════════
   1. TOP BAR — RED (matching branch building frame)
   ═══════════════════════════════════════════════════════════════ */
.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;
}


/* ═══════════════════════════════════════════════════════════════
   2. HERO BUTTONS — One RED, one outline
   ═══════════════════════════════════════════════════════════════ */
/* "Discover Services" → RED solid button */
.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;
}

/* "Find Branch" stays as the outline white button — nice contrast */


/* ═══════════════════════════════════════════════════════════════
   3. SERVICES SECTION — Red accents on cards
   ═══════════════════════════════════════════════════════════════ */
/* Service card overlay: subtle red tint at bottom */
.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 (count tag inside card): Red pill */
.service-card-content .service-badge {
    background: rgba(200, 16, 46, 0.25) !important;
    border-color: rgba(200, 16, 46, 0.4) !important;
}

/* "Read more" link inside service card: white (not gold) */
.service-card-content .card-link {
    color: var(--color-white) !important;
}
.service-card-content .card-link:hover {
    color: var(--color-primary-light) !important;
}

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

/* "View All Services" outline button → RED */
#featured-services .btn-outline-primary-custom {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
#featured-services .btn-outline-primary-custom:hover {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. ABOUT SECTION — Red "Read More" button
   ═══════════════════════════════════════════════════════════════ */
#about-quick .btn-primary-custom {
    background: var(--gradient-primary) !important;
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.25) !important;
}
#about-quick .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;
}


/* ═══════════════════════════════════════════════════════════════
   5. OFFERS SECTION — Red gradient bg, white cards with glow
   ═══════════════════════════════════════════════════════════════ */

/* Red gradient background for the section */
#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 shadow ── */
#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;
}

/* Force image divs to match card radius — overflow:hidden on parent clips */
#offers-section .offer-card > div[style*="background-image"] {
    border-radius: 0 !important;
}

/* Offer card CTA button → red outline, fills red on hover */
.offer-card .btn-outline-primary-custom {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    transition: all 0.3s ease !important;
}
.offer-card .btn-outline-primary-custom:hover {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3) !important;
}

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

/* Default offer badge → RED */
.offer-badge {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}
/* Package badge stays navy for contrast */
.offer-badge--package {
    background: var(--color-secondary) !important;
}

/* "View All Offers" button → 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;
    transition: all 0.3s ease !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;
}


/* ═══════════════════════════════════════════════════════════════
   6. PARTNERS SECTION — One RED button, one NAVY button
   ═══════════════════════════════════════════════════════════════ */
/* "Show More" outline → NAVY (blue) */
#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;
}
/* "Add Your Company" solid → RED */
#partners-section .btn-hero-primary {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3) !important;
    border: none !important;
}
#partners-section .btn-hero-primary:hover {
    background: var(--color-primary-light) !important;
    box-shadow: 0 6px 20px rgba(200, 16, 46, 0.45) !important;
}


/* ═══════════════════════════════════════════════════════════════
   7. WASSILHA SECTION — Red + Navy with dark card (KEEP DARK BG)
   ═══════════════════════════════════════════════════════════════ */
/*
 * The wassilha card has a DARK navy background with WHITE text.
 * We enhance it with red accents but KEEP the dark background
 * so text remains readable.
 */

/* Card keeps dark bg — red accents only via icon + tag */

/* Icon circle: Red background instead of gold */
.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;
}

/* "New Exclusive Service" tag: Red accent (on dark bg) */
.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;
}

/* "وصّلها" gold text: keep a touch of gold (minimal) */
.wassilha-home-content .text-gold {
    color: var(--color-accent) !important;
}

/* Feature icons inside wassilha: alternate Red and white */
.wassilha-home-feature:nth-child(1) i { color: var(--color-primary-light) !important; }
.wassilha-home-feature:nth-child(2) i { color: var(--color-accent) !important; }
.wassilha-home-feature:nth-child(3) i { color: var(--color-primary-light) !important; }

/* Wassilha CTA button: Red-Navy gradient (higher specificity to beat inline styles) */
#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 accents */
.wassilha-home-badge-1 { border-color: rgba(200, 16, 46, 0.35) !important; }
.wassilha-home-badge-2 { border-color: rgba(212, 168, 67, 0.35) !important; }
.wassilha-home-badge-3 { border-color: rgba(27, 42, 74, 0.35) !important; }


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


/* ═══════════════════════════════════════════════════════════════
   9. STATS SECTION — RED gradient background
   ═══════════════════════════════════════════════════════════════ */
.stats-section {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dim) 100%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   10. PAGE HEADERS — RED gradient overlay (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;
}


/* ═══════════════════════════════════════════════════════════════
   11. FOOTER — NAVY dark with RED accent stripe
   ═══════════════════════════════════════════════════════════════ */
/* Footer bottom bar: red accent strip at bottom edge */
.footer-bottom {
    background: linear-gradient(0deg, var(--color-primary) 5%, var(--color-secondary-dark) 5%) !important;
    border-top: none !important;
}

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

/* Footer link hover: RED (not gold) */
.footer-links a:hover {
    color: var(--color-primary-light) !important;
}

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

/* Footer credit hover → Red */
.footer-credit a:hover {
    color: var(--color-primary-light) !important;
}

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

/* Footer 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;
    }
}


/* ═══════════════════════════════════════════════════════════════
   12. GENERAL ELEMENTS — Red-forward
   ═══════════════════════════════════════════════════════════════ */
/* 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 border → Red */
.about-stat-card {
    border-top: 3px solid var(--color-primary) !important;
}

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


/* ═══════════════════════════════════════════════════════════════
   13. NEWS/BLOG CARDS — Red "Read More" link
   ═══════════════════════════════════════════════════════════════ */
.news-card .card-link {
    color: var(--color-primary) !important;
}
.news-card .card-link:hover {
    color: var(--color-primary-dark) !important;
}