/* =====================================
   Siddharvanam Appointments
====================================== */

.sv-appointments{
    width:100%;
    padding:80px 0;
}

.sv-container{
    width:1320px;
    max-width:95%;
    margin:0 auto;
}

.sv-section-title{
    text-align:center;
    font-size:42px;
    font-weight:700;
    margin-bottom:15px;
    color:#0B3C5D;
}

.sv-section-subtitle{
    text-align:center;
    max-width:650px;
    margin:0 auto 60px;
    color:#666;
    font-size:18px;
    line-height:1.7;
}

/* =====================================
   Splide Doctor Slider
====================================== */

#sv-doctor-slider{
    margin-top:20px;
}

#sv-doctor-slider{

    width:100%;

    margin-top:20px;

}

#sv-doctor-slider .splide__track{

    overflow:hidden;

}

#sv-doctor-slider .splide__list{

    display:flex !important;

    align-items:stretch;

}

#sv-doctor-slider .splide__slide{

    display:flex !important;

    justify-content:center;

    align-items:stretch;

    height:auto;

    box-sizing:border-box;

    padding:15px;

}

#sv-doctor-slider .splide__slide > *{

    width:100%;

}

/* =====================================
   Doctor Card
====================================== */

.sv-doctor-card{
    width:100%;
    max-width:none;
    background:#ffffff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:all .3s ease;
    text-align:center;
    display:flex;
    flex-direction:column;
    height:100%;
}

.sv-doctor-card{

    min-height:100%;

}

.sv-doctor-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.sv-doctor-image{
    width:100%;
    overflow:hidden;
}

.sv-doctor-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
}

.sv-doctor-card h3{
    margin:22px 15px 10px;
    font-size:24px;
    font-weight:700;
    color:#0B3C5D;
}

.sv-doctor-card p{
    margin:5px 20px;
    color:#666;
    font-size:15px;
    line-height:1.6;
}

.sv-doctor-card h4{
    color:#0B3C5D;
    font-size:32px;
    margin:18px 0;
}

/* =====================================
   Button
====================================== */

.sv-book-btn{
    width:220px;
    height:52px;
    margin:25px auto 0;
    border:none;
    border-radius:50px;
    background:#0B3C5D;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.sv-book-btn:hover{
    background:#EFBF04;
    color:#000;
}

/* =====================================
   Splide Arrows
====================================== */

.splide__arrow{
    width:46px;
    height:46px;
    background:#0B3C5D;
    opacity:1;
}

.splide__arrow svg{
    fill:#fff;
}

.splide__arrow:hover{
    background:#08314d;
}

.splide__arrow--prev{
    left:-22px;
}

.splide__arrow--next{
    right:-22px;
}

/* =====================================
   Splide Pagination
====================================== */

.splide__pagination{
    bottom:-35px;
}

.splide__pagination__page{
    width:12px;
    height:12px;
    background:#d5d5d5;
    opacity:1;
    margin:0 6px;
    transition:.3s;
}

.splide__pagination__page.is-active{
    background:#0B3C5D;
    transform:scale(1.15);
}

/* =====================================
   Elementor Compatibility
====================================== */

.elementor-widget-shortcode,
.elementor-shortcode,
.sv-appointments,
.sv-container,
#sv-doctor-slider{
    width:100%;
    max-width:100%;
}

/* =====================================
   Responsive
====================================== */

@media (max-width:1200px){

    .sv-container{
        max-width:98%;
    }

}

@media (max-width:1024px){

    .sv-section-title{
        font-size:34px;
    }

    .sv-section-subtitle{
        font-size:16px;
    }

    .splide__arrow{
        width:40px;
        height:40px;
    }

}

@media (max-width:768px){

    .sv-appointments{
        padding:60px 0;
    }

    .sv-section-title{
        font-size:28px;
    }

    .sv-section-subtitle{
        margin-bottom:35px;
    }

    .splide__arrow{
        display:none;
    }

    .sv-book-btn{
        width:90%;
        max-width:240px;
    }

    .sv-doctor-image img{
        height:240px;
    }

}

@media (max-width:480px){

    .sv-container{
        max-width:100%;
        padding:0 15px;
    }

    .sv-section-title{
        font-size:24px;
    }

    .sv-section-subtitle{
        font-size:15px;
    }

    .sv-doctor-card h3{
        font-size:22px;
    }

    .sv-doctor-card p{
        font-size:14px;
    }

}

/* =====================================
   Booking Modal
===================================== */

.sv-modal{
    display:none;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:999999;
}

.sv-modal.active{
    display:block;
}

.sv-modal-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(6px);
}

.sv-modal-box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:700px;
    max-width:95%;
    max-height:90vh;
    overflow-y:auto;
    background:#fff;
    border-radius:20px;
    padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.sv-close-modal{
    position:absolute;
    top:20px;
    right:20px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:#f3f3f3;
    cursor:pointer;
    font-size:24px;
    transition:.3s;
}

.sv-close-modal:hover{
    background:#0B3C5D;
    color:#fff;
}

.sv-popup-image{
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:50%;
    margin:0 auto 20px;
    display:block;
}

.sv-popup-doctor{
    text-align:center;
}

.sv-popup-doctor h3{
    font-size:28px;
    color:#0B3C5D;
    margin-bottom:10px;
}

.sv-popup-department{
    font-size:18px;
    font-weight:600;
    color:#0B3C5D;
}

.sv-popup-types{
    margin:20px 0;
}

.sv-type-badge{
    display:inline-block;
    padding:8px 16px;
    margin:5px;
    border-radius:30px;
    background:#eef5fb;
    color:#0B3C5D;
    font-weight:600;
    font-size:14px;
}

.sv-popup-continue{
    margin-top:20px;
    padding:14px 30px;
    border:none;
    border-radius:40px;
    background:#0B3C5D;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    transition:.3s;
}

.sv-popup-continue:hover{
    background:#EFBF04;
    color:#000;
}

.sv-summary-table{
    width:100%;
    border-collapse:collapse;
}

.sv-summary-table td{
    padding:12px;
    border-bottom:1px solid #e5e5e5;
}

.sv-booking-success{
    margin-top:20px;
    padding:18px;
    background:#eefbf1;
    border:1px solid #bde5c8;
    border-radius:10px;
    text-align:center;
}

@media (max-width:768px){

.sv-book-btn{

    display:block !important;

    width:220px !important;

    height:52px !important;

    line-height:52px !important;

    margin:25px auto !important;

    padding:0 !important;

    background:#0B3C5D !important;

    color:#fff !important;

    border:none !important;

    border-radius:50px !important;

    text-align:center !important;

    cursor:pointer !important;

    appearance:none !important;

    -webkit-appearance:none !important;

}

}