/* =================================================================
   V2.CSS — Standalone design system for the NCMH V2 Homepage
   This file is ONLY loaded on /home-v2 via @push('css') in index-v2.blade.php
   -----------------------------------------------------------------
   Figma Design System tokens:
   --primary:   #1B8354   --primary-dark: #14573A
   --bg-gray:   #F3F4F6   --bg-white:     #FFFFFF
   --icon-bg:   #F3FCF6   --text:         #161616
   --subtext:   #384250   --border:       #D2D6DB
   --neutral:   #E5E7EB   --card-text:    #1F2A37
   Font: IBMPlexSansArabic-Medium (loaded locally by the layout)
================================================================= */


/* ----------------------------------------------------------------
   1. FONT — apply to all v2 content + nav
---------------------------------------------------------------- */
.v2,
.v2 *,
body .secondary-header,
body .secondary-header * {
    font-family: 'IBMPlexSansArabic-Medium', Arial, sans-serif;
}


/* ================================================================
   2. NAVIGATION
   Override styles.css which forces:
     .navbar { background-color: transparent !important }
     .nav-link { color: white !important }
================================================================ */
body .secondary-header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
}
body .secondary-header .navbar {
    background-color: #FFFFFF !important;
}
body .secondary-header a.nav-link {
    color: #161616 !important;
    font-weight: 500 !important;
}
body .secondary-header a.nav-link:hover {
    color: #1B8354 !important;
    background-color: #F3FCF6 !important;
}
body .nav-item:hover {
    background-color: #F3FCF6 !important;
}
body .nav-item:active {
    background-color: #e8f5ee !important;
}
body .dropdown-menu {
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08) !important;
}
body .dropdown-item {
    color: #161616 !important;
}
body .dropdown-item:hover {
    background-color: #F3FCF6 !important;
    color: #1B8354 !important;
}


/* ================================================================
   3. FOOTER
   Layout inline style: style="background-color:#1e5736" (no !important)
   → CSS !important wins.
   Link/text colors handled by JS in blade (inline !important can't be
   overridden by CSS).
================================================================ */
footer,
footer .container-fluid {
    background-color: #F3F4F6 !important;
}


/* ================================================================
   4. V2 WRAPPER RESET
================================================================ */
.v2 {
    background-color: #fff;
    background-image: none !important;
}


/* ================================================================
   5. ANCHOR FIXES
   styles.css forces: a:not(.btn,...) { display: inline-flex !important }
   We must override inside .v2 to keep block layout on card links etc.
================================================================ */
.v2 a:not(.btn, .dropdown-item, .v2-read-btn, .v2-view-all) {
    display: block !important;
    padding: 0 !important;
    color: inherit !important;
    gap: 0 !important;
}
.v2 .v2-read-btn {
    display: inline-flex !important;
    padding: 0 14px !important;
}
.v2 .v2-view-all {
    display: inline-flex !important;
    padding: 0 12px !important;
}
.v2 .v2-card > a:first-child {
    display: block !important;
    width: 100% !important;
}


/* ================================================================
   6. CAROUSEL INDICATORS
   styles.css forces: width/height 16px !important
================================================================ */
.v2 .carousel-indicators [data-bs-target] {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    border: none !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    margin: 0 3px !important;
    background-color: #E5E7EB !important;
}
.v2 .carousel-indicators [data-bs-target].active {
    background-color: #1B8354 !important;
}
.v2-carousel-wrap .carousel-item {
    max-height: 520px;
    height: auto;
}


/* ================================================================
   7. HERO SECTION
================================================================ */
.v2-hero {
    position: relative;
    width: 100%;
    min-height: 340px;
    background: linear-gradient(270deg, #F3F4F6 0%, #FFFFFF 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 28px 56px;
    overflow: hidden;
    isolation: isolate;
}
.v2-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg, #F3F4F6 48%, rgba(249, 249, 250, .54) 68%, rgba(255, 255, 255, 0) 94%);
    z-index: 1;
}
.v2-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 52%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scaleX(-1);
    z-index: 0;
}
.v2-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 22px;
}
.v2-hero-text {
    max-width: 440px;
    text-align: right;
}
.v2-hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #161616;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}
.v2-hero-subtitle {
    font-size: .95rem;
    font-weight: 400;
    color: #161616;
    line-height: 1.55;
    margin: 0;
}
.v2-hero-dots {
    display: flex;
    gap: 6px;
    align-self: center;
}
.v2-hero-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E5E7EB;
    display: block;
}
.v2-hero-dots span.active {
    background: #1B8354;
}


/* ================================================================
   8. SECTION WRAPPERS & HEADINGS
================================================================ */
.v2-section {
    padding: 48px 0;
    background: #fff;
}
.v2-section-gray {
    background: #F3F4F6;
}
.v2-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}
.v2-section-head h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: #161616 !important;
    margin: 0;
    padding: 0;
}
.v2-section-head p {
    font-size: .88rem;
    color: #384250;
    margin: 4px 0 0;
}


/* ================================================================
   9. VIEW ALL BUTTON
================================================================ */
.v2-view-all {
    box-sizing: border-box;
    align-items: center;
    height: 32px;
    font-size: .82rem;
    font-weight: 500;
    color: #161616;
    text-decoration: none;
    border: 1px solid #D2D6DB;
    border-radius: 3px;
    white-space: nowrap;
    transition: background .18s, color .18s;
}
.v2-view-all:hover {
    background: #1B8354;
    color: #fff;
    border-color: #1B8354;
}


/* ================================================================
   10. STAT / ACHIEVEMENT CARDS
================================================================ */
.v2-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.v2-stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    flex: 1 1 150px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.v2-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #F3FCF6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.v2-stat-icon svg {
    color: #1B8354;
}
.v2-stat-value {
    font-size: 2.15rem;
    font-weight: 400;
    color: #14573A;
    letter-spacing: -0.02em;
    line-height: 1;
}
.v2-stat-label {
    font-size: .78rem;
    color: #1F2A37;
    font-weight: 400;
    text-align: center;
    line-height: 1.45;
}


/* ================================================================
   11. UNIFIED CONTENT CARD
================================================================ */
.v2-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    transition: box-shadow .22s, transform .22s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.v2-card:hover {
    box-shadow: 0 6px 24px rgba(27, 131, 84, .10);
    transform: translateY(-3px);
}
.v2-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}
.v2-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
}
.v2-card-title {
    font-size: .95rem;
    font-weight: 600;
    color: #161616 !important;
    line-height: 1.55;
    flex: 1;
    margin: 0;
    padding: 0;
}
.v2-read-btn {
    align-items: center;
    justify-content: center;
    height: 32px;
    background: #1B8354;
    color: #fff !important;
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 3px;
    align-self: flex-start;
    transition: background .18s;
}
.v2-read-btn:hover {
    background: #14573A;
    color: #fff !important;
}


/* ================================================================
   12. VIDEO SWIPER — fix blank space caused by lite-youtube lazy-load
   lite-youtube has no height until it's in viewport, causing Swiper
   to miscalculate container height. height:auto on slides fixes it.
================================================================ */
.v2Swiper {
    width: 100%;
    height: auto !important;
}
.v2Swiper .swiper-wrapper {
    align-items: flex-start;
    height: auto !important;
}
.v2Swiper .swiper-slide {
    height: auto !important;
    display: flex !important;
    flex-direction: column;
}
.v2Swiper lite-youtube {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
}
/* Navigation arrows: position relative to slide content, not container */
.v2Swiper .swiper-button-next,
.v2Swiper .swiper-button-prev {
    top: 38% !important;
}


/* ================================================================
   12b. VIDEO SECTION — titles & card styles
================================================================ */
.v2-video-title {
    font-size: .85rem;
    font-weight: 500;
    color: #161616;
    margin-top: 8px;
    text-align: right;
}
.topic-card {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
}


/* ================================================================
   13. SECTION DIVIDER (SVG image, alternating Frame 21 / Frame 23)
================================================================ */
.v2-dot-divider {
    width: 100%;
    height: 1px;
    background: #E5E7EB;
}
.v2-svg-divider {
    width: 100%;
    line-height: 0;
    overflow: hidden;
    display: flex;
}
.v2-svg-divider img {
    width: 50%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
}


/* ================================================================
   EHSAN FLOATING BUTTON (global — all pages)
================================================================ */
.ehsan-floating-btn {
    position: fixed;
    bottom: 20px;
    right: 100px;
    width: 60px;
    height: 60px;
    z-index: 9999;
    display: block;
    cursor: pointer;
    transition: transform .3s;
    text-decoration: none;
}
.ehsan-floating-btn:hover {
    transform: scale(1.08);
}
.ehsan-floating-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ================================================================
   15. SWAL CONFIRM BUTTON
================================================================ */
.swal2-styled.swal2-confirm {
    background-color: #1B8354;
}


/* ================================================================
   16. FOOTER REFINEMENTS (v2-specific overrides)
================================================================ */

/* --- Footer section title: orange border → Figma gray (#D2D6DB) --- */
footer .footer-title {
    border-bottom: 1px solid #D2D6DB !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
}

/* --- Subscribe form: fix flex layout so input fills available space --- */
footer #email.input {
    flex: 1 !important;
    min-width: 0;
    border: 1px solid #D2D6DB !important;
    border-radius: 4px !important;
    background: #fff !important;
}
footer #subscribe {
    float: none !important;
    flex-shrink: 0;
    margin-right: 8px !important;
    background-color: #1B8354 !important;
    border-color: #1B8354 !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 0 16px !important;
    min-height: 40px !important;
    white-space: nowrap;
}
footer #subscribe:hover {
    background-color: #14573A !important;
    border-color: #14573A !important;
}

/* --- Accessibility tools: icon separator color → gray --- */
footer #blind-icon {
    border-right: 1px solid #D2D6DB !important;
}


/* ================================================================
   17. RESPONSIVE
================================================================ */
@media (max-width: 768px) {
    .v2-hero {
        padding: 20px 16px;
        min-height: 260px;
    }
    .v2-hero-title {
        font-size: 1.8rem;
    }
    .v2-hero-img {
        width: 100%;
        opacity: .25;
    }
    .v2-stat-card {
        max-width: 140px;
    }
    .ehsan-floating-btn {
        bottom: 90px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}