/**
 * Mobile Layout Styles
 * Only applied on screens ≤ 768px.
 * Desktop styles are completely untouched.
 *
 * @package qawafel_alkhair
 */

/* ══════════════════════════════════════════════
   STATS MOBILE GRID
   Compact ticker grid with featured big number
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    .mobile-stats-bar {
        display: flex;
        align-items: stretch;
        gap: 0;
        background: #f0f4f4;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
        margin: 0 8px 20px;
        direction: rtl;
    }

    /* ── Big featured number on the right ── */
    .mobile-stats-featured {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--color-primary, #c8a055);
        color: #fff;
        min-width: 90px;
        padding: 14px 10px;
        text-align: center;
        flex-shrink: 0;
    }

    .mobile-stats-featured .msf-number {
        font-size: 1.7rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.5px;
    }

    .mobile-stats-featured .msf-label {
        font-size: 0.62rem;
        margin-top: 4px;
        opacity: 0.9;
        line-height: 1.3;
        max-width: 74px;
    }

    /* ── Mini grid: 2 rows × 4 cols ── */
    .mobile-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        flex: 1;
        background: #fff;
    }

    .mobile-stats-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 9px 4px;
        border-right: 1px solid #e8eded;
        border-bottom: 1px solid #e8eded;
        text-align: center;
        position: relative;
        cursor: default;
        transition: background 0.2s;
    }

    .mobile-stats-cell:nth-child(4n) {
        border-right: none;
    }

    .mobile-stats-cell:nth-child(n+5) {
        border-bottom: none;
    }

    .mobile-stats-cell:hover {
        background: rgba(200, 160, 85, 0.06);
    }

    .mobile-stats-cell .msc-number {
        font-size: 0.9rem;
        font-weight: 800;
        color: var(--color-primary, #c8a055);
        line-height: 1;
        /* count-up animation target */
    }

    .mobile-stats-cell .msc-label {
        font-size: 0.55rem;
        color: #6b7280;
        margin-top: 3px;
        line-height: 1.3;
        max-width: 58px;
    }

    /* ── Count-up animation keyframe ── */
    @keyframes msc-pop {
        0% {
            transform: scale(0.7);
            opacity: 0;
        }

        60% {
            transform: scale(1.08);
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .mobile-stats-cell.animated .msc-number {
        animation: msc-pop 0.55s ease-out both;
    }

    /* ── Featured stat rotation animations ── */
    @keyframes msf-slide-out {
        0% {
            transform: translateX(0) scale(1);
            opacity: 1;
        }

        100% {
            transform: translateX(-80%) scale(0.75);
            opacity: 0;
        }
    }

    @keyframes msf-slide-in {
        0% {
            transform: translateX(80%) scale(0.75);
            opacity: 0;
        }

        60% {
            transform: translateX(-6%) scale(1.06);
            opacity: 1;
        }

        100% {
            transform: translateX(0) scale(1);
            opacity: 1;
        }
    }

    .mobile-stats-featured {
        transition: background 0.4s ease;
    }

    .mobile-stats-featured.msf-exit {
        animation: msf-slide-out 0.38s ease-in both;
        pointer-events: none;
    }

    .mobile-stats-featured.msf-enter {
        animation: msf-slide-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* Grid cell that is the "source" of the current featured stat */
    .mobile-stats-cell.featured-source {
        background: rgba(200, 160, 85, 0.18) !important;
        transform: scale(1.08);
        transition: background 0.3s, transform 0.3s;
    }

    .mobile-stats-cell.featured-source .msc-number {
        color: var(--color-primary, #c8a055);
        font-weight: 900;
    }

    /* Show mobile services wrap */
    .mobile-services-wrap {
        display: block !important;
    }

    /* Show mobile hero */
    .mobile-hero-section {
        display: block !important;
    }

    /* Hide desktop stats on mobile */
    .desktop-stats-only {
        display: none !important;
    }

    /* Mobile stats bar shown */
    .mobile-stats-bar {
        display: flex;
    }
}

@media (min-width: 769px) {

    /* hide mobile-only elements entirely on desktop */
    .mobile-stats-bar,
    .mobile-services-wrap,
    .mobile-hero-section {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════
   SERVICES MOBILE CAROUSEL (slides upward)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Hide the desktop services grid section */
    section.services-section {
        display: none !important;
    }

    /* Hide desktop hero */
    .about-gallery-section-new {
        display: none !important;
    }

    /* Mobile wrapper */
    .mobile-services-wrap {
        display: block;
        padding: 0 0 24px;
    }

    .mobile-services-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Text card on top */
    .mobile-services-text-card {
        background: #fff;
        border-radius: 20px 20px 0 0;
        padding: 24px 20px 20px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
        text-align: center;
    }

    .mobile-services-text-card .service-heading-two {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }

    .mobile-services-text-card .service-heading-two-new {
        font-size: 1.1rem;
        color: var(--color-primary, #c8a055);
    }

    /* Animated carousel container */
    .mobile-services-carousel {
        position: relative;
        overflow: hidden;
        border-radius: 0 0 20px 20px;
        min-height: 260px;
        background: #f8fafc;
    }

    /* Each slide item */
    .mobile-services-item {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        padding: 5px;
        border-radius: 10px;
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.5s ease;
        will-change: transform, opacity;
    }

    /* The inner tab card fills the slide */
    .mobile-services-item [class^="services-tab-bg-"],
    .mobile-services-item [class*=" services-tab-bg-"] {
        flex: 1;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 20px;
        text-align: center;
        border-radius: 0;
        width: 100%;
        height: 100%;
        min-height: 260px;
    }

    .mobile-services-item [class^="services-tab-bg-"] img {
        width: 130px;
        height: 130px;
        object-fit: contain;
        margin-bottom: 14px;
        filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.25));
    }


    .mobile-services-item.active {
        transform: translateY(0%);
        opacity: 1;
        position: relative;
        /* let height auto-size when active */
    }

    .mobile-services-item.leaving {
        transform: translateY(-110%);
        opacity: 0;
    }

    .mobile-services-item img {
        width: 64px;
        height: 64px;
        object-fit: contain;
        margin-bottom: 14px;
        filter: drop-shadow(0 4px 10px rgba(200, 160, 85, 0.3));
    }

    .mobile-services-item .service-heading {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: #fff;
    }

    .mobile-services-item .service-text {
        font-size: 0.85rem;
        line-height: 1.7;
        color: #555;
    }

    /* progress dot indicators */
    .mobile-services-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 12px 0 4px;
    }

    .mobile-services-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ddd;
        transition: background 0.3s, transform 0.3s;
        cursor: pointer;
    }

    .mobile-services-dot.active {
        background: var(--color-primary, #c8a055);
        transform: scale(1.3);
    }

    /* Clickable mobile service link */
    .mobile-services-item a.mobile-service-link {
        display: inline-block;
        margin-top: 14px;
        padding: 8px 24px;
        border-radius: 30px;
        background: var(--color-primary, #c8a055);
        color: #fff;
        font-size: 0.8rem;
        font-weight: 700;
        text-decoration: none;
        transition: opacity 0.2s;
    }

    .mobile-services-item a.mobile-service-link:hover {
        opacity: 0.85;
    }

    /* ── Hero mobile: hide desktop, show mobile swiper ── */
    /* (handled via display:none on .about-gallery-section-new above) */

    /* Mobile hero full-width swiper */
    .mobile-hero-section {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .mobile-hero-section .swiper,
    .mobile-hero-section .swiper-slide {
        width: 100%;
        padding: 10px;
    }

    .mobile-hero-section .mobile-hero-img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        display: block;
    }

    .mobile-hero-section .swiper-pagination {
        bottom: 10px;
    }

    .mobile-hero-section .swiper-pagination-bullet-active {
        background: var(--color-primary, #c8a055);
    }

}

/* end @media (max-width: 768px) */