/* ============================================================
   ClinicMaster – Image Slider  |  slider.css
   Works alongside existing Bootstrap + site style.css classes
   ============================================================ */

/* ── CSS VARIABLES (mirror site's teal palette) ── */
:root {
    --cm-teal: #1DA8A3;
    --cm-teal-dark: #0b7c7c;
    --cm-teal-glow: rgba(29, 168, 163, 0.25);
    --cm-ink: #0d1f2d;
    --cm-glass: rgba(255, 255, 255, 0.07);
    --cm-radius: 18px;
    --cm-transition: 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   1. SWIPER HERO SLIDER  (.cm-hero-swiper)
      Drop inside any .container or .page-wraper
   ============================================================ */
.cm-hero-swiper {
    position: relative;
    border-radius: var(--cm-radius);
    overflow: hidden;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.22);
}

    /* Each slide image wrapper – reuses existing .dz-media pattern */
    .cm-hero-swiper .swiper-slide {
        position: relative;
        height: 560px;
        overflow: hidden;
    }

    .cm-hero-swiper .slide-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 6s ease;
        transform: scale(1.05);
        display: block;
    }

    .cm-hero-swiper .swiper-slide-active .slide-img {
        transform: scale(1);
    }

    /* Dark gradient overlay — sits above image */
    .cm-hero-swiper .slide-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient( 110deg, rgba(13, 31, 45, 0.85) 38%, rgba(29, 168, 163, 0.18) 100% );
        z-index: 1;
    }

    /* ── SLIDE CAPTION ── */
    .cm-hero-swiper .slide-caption {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px 64px;
        max-width: 620px;
    }

    .cm-hero-swiper .slide-tag {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--cm-teal);
        margin-bottom: 18px;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
    }

        .cm-hero-swiper .slide-tag::before {
            content: '';
            display: inline-block;
            width: 26px;
            height: 2px;
            background: var(--cm-teal);
            border-radius: 2px;
        }

    .cm-hero-swiper .swiper-slide-active .slide-tag {
        opacity: 1;
        transform: translateY(0);
    }

    .cm-hero-swiper .slide-title {
        font-size: clamp(30px, 4vw, 52px);
        font-weight: 700;
        color: #ffffff;
        line-height: 1.15;
        margin: 0 0 16px;
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s ease 0.45s, transform 0.6s ease 0.45s;
    }

        .cm-hero-swiper .slide-title em {
            font-style: italic;
            color: var(--cm-teal);
            font-weight: 300;
        }

    .cm-hero-swiper .swiper-slide-active .slide-title {
        opacity: 1;
        transform: translateY(0);
    }

    .cm-hero-swiper .slide-desc {
        font-size: 15px;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.65);
        margin: 0 0 32px;
        max-width: 430px;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
    }

    .cm-hero-swiper .swiper-slide-active .slide-desc {
        opacity: 1;
        transform: translateY(0);
    }

    /* CTA buttons — extend existing .btn classes */
    .cm-hero-swiper .slide-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.75s;
    }

    .cm-hero-swiper .swiper-slide-active .slide-actions {
        opacity: 1;
        transform: translateY(0);
    }

    .cm-hero-swiper .btn-slide-primary {
        background: var(--cm-teal);
        color: #fff;
        border: 2px solid var(--cm-teal);
        padding: 12px 30px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
        display: inline-block;
    }

        .cm-hero-swiper .btn-slide-primary:hover {
            background: var(--cm-teal-dark);
            border-color: var(--cm-teal-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px var(--cm-teal-glow);
            color: #fff;
        }

    .cm-hero-swiper .btn-slide-ghost {
        background: transparent;
        color: rgba(255, 255, 255, 0.75);
        border: 2px solid rgba(255, 255, 255, 0.25);
        padding: 12px 28px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: border-color 0.3s, color 0.3s;
        display: inline-block;
    }

        .cm-hero-swiper .btn-slide-ghost:hover {
            border-color: var(--cm-teal);
            color: var(--cm-teal);
        }

    /* ── STAT BADGE (bottom-left chips) ── */
    .cm-hero-swiper .slide-stats {
        position: absolute;
        bottom: 36px;
        left: 64px;
        z-index: 3;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.5s ease 0.9s, transform 0.5s ease 0.9s;
    }

    .cm-hero-swiper .swiper-slide-active .slide-stats {
        opacity: 1;
        transform: translateY(0);
    }

    .cm-hero-swiper .stat-badge {
        background: var(--cm-glass);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 10px 16px;
        text-align: center;
        min-width: 80px;
    }

        .cm-hero-swiper .stat-badge strong {
            display: block;
            font-size: 22px;
            font-weight: 700;
            color: var(--cm-teal);
            line-height: 1;
        }

        .cm-hero-swiper .stat-badge span {
            display: block;
            font-size: 10px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.5);
            margin-top: 3px;
        }

    /* ── THUMBNAIL STRIP (bottom-right) ── */
    .cm-hero-swiper .slide-thumbs {
        position: absolute;
        bottom: 36px;
        right: 64px;
        z-index: 3;
        display: flex;
        gap: 8px;
    }

        .cm-hero-swiper .slide-thumbs .s-thumb {
            width: 68px;
            height: 46px;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid rgba(255, 255, 255, 0.15);
            opacity: 0.5;
            transition: opacity 0.3s, border-color 0.3s, transform 0.3s;
            flex-shrink: 0;
        }

            .cm-hero-swiper .slide-thumbs .s-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                pointer-events: none;
                transition: transform 0.4s ease;
            }

            .cm-hero-swiper .slide-thumbs .s-thumb:hover {
                opacity: 0.8;
                transform: translateY(-2px);
            }

                .cm-hero-swiper .slide-thumbs .s-thumb:hover img {
                    transform: scale(1.08);
                }

            .cm-hero-swiper .slide-thumbs .s-thumb.active {
                border-color: var(--cm-teal);
                opacity: 1;
                transform: translateY(-3px);
                box-shadow: 0 4px 16px var(--cm-teal-glow);
            }

    /* ── PROGRESS BAR ── */
    .cm-hero-swiper .cm-progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        width: 0%;
        background: linear-gradient(90deg, var(--cm-teal-dark), var(--cm-teal));
        z-index: 10;
        border-radius: 0 2px 2px 0;
        transition: width 0.08s linear;
        pointer-events: none;
    }

    /* ── SWIPER NAVIGATION override ── */
    .cm-hero-swiper .swiper-button-prev,
    .cm-hero-swiper .swiper-button-next {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--cm-glass);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: background 0.3s, transform 0.2s;
        top: 50%;
        margin-top: -22px;
    }

    .cm-hero-swiper .swiper-button-prev {
        left: -17px;
    }

    .cm-hero-swiper .swiper-button-next {
        right: -17px;
    }

        .cm-hero-swiper .swiper-button-prev::after,
        .cm-hero-swiper .swiper-button-next::after {
            font-size: 14px;
            font-weight: 700;
            color: #fff;
        }

        .cm-hero-swiper .swiper-button-prev:hover,
        .cm-hero-swiper .swiper-button-next:hover {
            background: var(--cm-teal);
            border-color: var(--cm-teal);
            transform: scale(1.08);
        }

    /* ── SWIPER PAGINATION override ── */
    .cm-hero-swiper .swiper-pagination {
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .cm-hero-swiper .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.35);
        opacity: 1;
        border-radius: 3px;
        transition: width 0.3s, background 0.3s;
    }

    .cm-hero-swiper .swiper-pagination-bullet-active {
        width: 22px;
        background: var(--cm-teal);
    }

    /* ── COUNTER ── */
    .cm-hero-swiper .cm-counter {
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 10;
        font-size: 12px;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.4);
        pointer-events: none;
    }

        .cm-hero-swiper .cm-counter b {
            font-size: 20px;
            font-weight: 700;
            color: var(--cm-teal);
            vertical-align: middle;
        }

/* ============================================================
   2. TEAM CARDS — enhance existing .dz-team.style-1 cards
   ============================================================ */
.dz-team.style-1 {
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.35s, transform 0.35s;
}

    .dz-team.style-1:hover,
    .dz-team.style-1.box-hover.active {
        box-shadow: 0 16px 48px rgba(29, 168, 163, 0.18);
        transform: translateY(-4px);
    }

    .dz-team.style-1 .dz-media img {
        transition: transform 0.5s ease;
    }

    .dz-team.style-1:hover .dz-media img {
        transform: scale(1.06);
    }

    /* Teal underline on name hover */
    .dz-team.style-1 .dz-name a {
        position: relative;
        display: inline-block;
        transition: color 0.3s;
    }

        .dz-team.style-1 .dz-name a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--cm-teal);
            transition: width 0.3s;
        }

    .dz-team.style-1:hover .dz-name a::after {
        width: 100%;
    }

    .dz-team.style-1:hover .dz-name a {
        color: var(--cm-teal);
    }

/* ============================================================
   3. ICON BOX WRAPPERS — enhance existing .icon-bx-wraper.style-4
   ============================================================ */
.icon-bx-wraper.style-4 {
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 12px;
    padding: 12px;
}

    .icon-bx-wraper.style-4:hover {
        transform: translateX(6px);
        box-shadow: -4px 0 0 var(--cm-teal);
    }

/* ============================================================
   4. ACCORDION — enhance existing .dz-accordion.style-1
   ============================================================ */
.dz-accordion.style-1 .accordion-button:not(.collapsed) {
    color: var(--cm-teal);
    border-left: 3px solid var(--cm-teal);
    padding-left: calc(1rem - 3px);
}

.dz-accordion.style-1 .accordion-item {
    transition: box-shadow 0.3s;
}

    .dz-accordion.style-1 .accordion-item:has(.accordion-button:not(.collapsed)) {
        box-shadow: 0 4px 20px var(--cm-teal-glow);
    }

/* ============================================================
   5. FORM WRAPPER — enhance existing .form-wrapper.style-1
   ============================================================ */
.form-wrapper.style-1 {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.4s;
}

    .form-wrapper.style-1:hover {
        box-shadow: 0 24px 72px rgba(29, 168, 163, 0.15);
    }

    .form-wrapper.style-1 .form-control:focus {
        border-color: var(--cm-teal);
        box-shadow: 0 0 0 3px var(--cm-teal-glow);
    }

/* ============================================================
   6. MEDIA IMAGES — enhance existing .dz-media / .single-media
   ============================================================ */
.dz-media,
.single-media {
    overflow: hidden;
}

    .dz-media img,
    .single-media img {
        transition: transform 0.6s ease;
    }

    .dz-media:hover img,
    .single-media:hover img {
        transform: scale(1.04);
    }

/* ============================================================
   7.  RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .cm-hero-swiper .swiper-slide {
        height: 420px;
    }

    .cm-hero-swiper .slide-caption {
        padding: 36px 36px;
    }

    .cm-hero-swiper .slide-stats,
    .cm-hero-swiper .slide-thumbs {
        display: none;
    }
}

@media (max-width: 575px) {
    .cm-hero-swiper .swiper-slide {
        height: 340px;
    }

    .cm-hero-swiper .slide-caption {
        padding: 24px 24px;
        max-width: 100%;
    }

    .cm-hero-swiper .slide-title {
        font-size: 26px;
    }
}