/* =====================================================
   HOSPITAL PUBLIC SITE
   -----------------------------------------------------
   ⚠️ এই ফাইলটা Vite/Tailwind এর বাইরে, সরাসরি public/ থেকে
   লোড হয়। কারণ শেয়ার্ড cPanel এ `npm run build` চালানো
   ঝামেলার — CSS বদলালেই সাইট ভেঙে বসে থাকত।

   রঙ আসে :root ভেরিয়েবল থেকে, আর ভেরিয়েবলগুলো লেআউটে
   Settings → Website থেকে বসিয়ে দেওয়া হয়। তাই প্রতিটা
   হাসপাতাল নিজের রঙে সাইট চালাতে পারে।
===================================================== */

:root{
    --brand:#079d78;
    --brand-dark:#067e61;
    --brand-deep:#078c6d;
    --ink:#073e4c;
    --ink-deep:#052f39;

    /* fallback আগে, color-mix পরে — পুরনো ব্রাউজারেও রঙ থাকবে */
    --brand-tint:#e7f8f2;
    --brand-tint:color-mix(in srgb, var(--brand) 12%, #fff);

    --brand-tint-2:#f2fbf8;
    --brand-tint-2:color-mix(in srgb, var(--brand) 6%, #fff);

    --brand-light:#54d5b1;
    --brand-light:color-mix(in srgb, var(--brand) 58%, #fff);

    --brand-ring:rgba(7,157,120,.08);
}


/* =====================================================
   BASIC
===================================================== */

/*
| ⚠️ এখানে ইচ্ছাকৃতভাবে কোনো `*` রিসেট নেই।
|
| মূল ডিজাইনে `*{margin:0;padding:0}` ছিল। কিন্তু এই সাইটের
| ভেতরের পাতাগুলো (ডাক্তার তালিকা, ব্লগ, সেবা) Tailwind দিয়ে লেখা,
| আর site.css লোড হয় app.css এর পরে। `.site *` এর specificity
| Tailwind এর `.mt-4` এর সমান — পরে আসায় সেটাই জিতত, ফলে ভেতরের
| সব পাতার margin/padding মুছে যেত।
|
| box-sizing, margin রিসেট, a/img/form এর ডিফল্ট — সবই Tailwind এর
| preflight ইতিমধ্যে করে দেয়, তাই আলাদা করে দরকার নেই।
*/

html{
    scroll-behavior:smooth;
}

body.site-body{
    font-family:'Noto Sans Bengali','Hind Siliguri',sans-serif;
    background:#f7fbfc;
    color:#173b45;
    line-height:1.7;
}

.container{
    width:92%;
    max-width:1200px;
    margin:auto;
}


/* =====================================================
   TOP BAR
===================================================== */

.top-bar{
    background:var(--ink);
    color:#fff;
    font-size:13px;
}

.top-bar-content{
    min-height:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.top-left{
    display:flex;
    gap:25px;
}

.top-right{
    display:flex;
    gap:18px;
    color:#c8dfe3;
}


/* =====================================================
   HEADER
===================================================== */

.header{
    background:#fff;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 20px rgba(0,0,0,.06);
}

.navbar{
    min-height:82px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.logo{
    display:flex;
    align-items:center;
    gap:11px;
}

.logo-icon{
    width:51px;
    height:51px;
    border-radius:50%;
    border:4px solid var(--brand);
    color:var(--brand);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
    font-weight:800;
    overflow:hidden;
    flex-shrink:0;
}

.logo-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.logo h1{
    font-size:23px;
    line-height:1.2;
    color:var(--ink);
}

.logo p{
    color:#81969b;
    font-size:10px;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:25px;
}

.nav-menu a{
    color:#38565d;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.nav-menu a:hover,
.nav-menu .active{
    color:var(--brand);
}

.appointment-nav{
    background:var(--brand);
    color:#fff !important;
    padding:12px 18px;
    border-radius:8px;
}

.mobile-menu{
    display:none;
    border:none;
    background:none;
    font-size:27px;
    cursor:pointer;
    color:var(--ink);
}

/*
| মোবাইল ড্রয়ার — JS ছাড়াই চেকবক্স দিয়ে খোলে/বন্ধ হয়।
| Livewire wire:navigate করলে JS ইভেন্ট হারিয়ে যেত, তাই
| ইচ্ছাকৃতভাবে CSS-only রাখা হয়েছে।
*/
#nav-toggle{
    display:none;
}

.nav-drawer{
    display:none;
}


/* =====================================================
   HERO
===================================================== */

.hero{
    background:
        linear-gradient(
            90deg,
            #e9f8f6 0%,
            #edfafa 55%,
            #dff2f4 100%
        );

    padding:75px 0;
    position:relative;
    overflow:hidden;
}

.hero-wrapper{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
}

.hero-content{
    padding:20px 0;
}

.hero-small-title{
    color:var(--brand-deep);
    font-weight:700;
    font-size:14px;
}

.hero-content h2{
    font-size:52px;
    line-height:1.25;
    color:var(--ink);
    margin:15px 0 20px;
}

.hero-content h2 span{
    display:block;
    color:var(--brand);
}

.hero-content > p{
    max-width:600px;
    color:#627c83;
    font-size:16px;
    margin-bottom:28px;
}

.hero-buttons{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 23px;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    transition:.3s;
}

.btn-primary{
    background:var(--brand);
    color:#fff;
}

.btn-primary:hover{
    background:var(--brand-dark);
    transform:translateY(-2px);
}

.btn-white{
    background:#fff;
    color:var(--brand-deep);
    border:1px solid #cde5e0;
}

.btn-white:hover{
    background:var(--brand);
    color:#fff;
}

.hero-features{
    display:flex;
    gap:35px;
    margin-top:40px;
    flex-wrap:wrap;
}

.hero-features div{
    display:flex;
    flex-direction:column;
}

.hero-features strong{
    color:var(--ink);
    font-size:22px;
}

.hero-features small{
    color:#799095;
    font-size:11px;
}


/* =====================================================
   APPOINTMENT CARD
===================================================== */

.appointment-card{
    background:#fff;
    padding:28px;
    border-radius:18px;
    box-shadow:0 20px 55px rgba(4,62,74,.15);
}

.card-heading{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:18px;
    border-bottom:1px solid #edf2f3;
    margin-bottom:18px;
}

.card-heading > span{
    width:43px;
    height:43px;
    background:var(--brand-tint);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.card-heading h3{
    color:var(--ink);
    font-size:21px;
}

.card-heading p{
    color:#8a9ca0;
    font-size:11px;
}

.form-group{
    margin-bottom:13px;
}

.form-group label{
    display:block;
    color:#4e686e;
    font-size:12px;
    font-weight:600;
    margin-bottom:5px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:1px solid #dce8ea;
    background:#fbfdfd;
    padding:11px 12px;
    border-radius:7px;
    outline:none;
    font-size:13px;
    color:#39575e;
    transition:.3s;
}

.form-group textarea{
    height:75px;
    resize:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-ring);
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.submit-btn{
    width:100%;
    border:0;
    background:var(--brand);
    color:#fff;
    padding:13px;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.submit-btn:hover{
    background:var(--brand-dark);
}

.form-note{
    text-align:center;
    color:#899ba0;
    font-size:10px;
    margin-top:10px;
}


/* =====================================================
   SECTION HEADING
===================================================== */

/* সেকশনের ফাঁকা জায়গা — `.site section` নয়, নাহলে ভেতরের
   Tailwind পাতার <section> গুলোও ধরে ফেলত */
.services-section,
.doctor-section,
.about-section,
.reviews,
.contact-section{
    padding:80px 0;
}

.section-heading{
    text-align:center;
    max-width:700px;
    margin:0 auto 42px;
}

.section-heading > span,
.section-label{
    color:var(--brand);
    font-size:13px;
    font-weight:700;
}

.section-heading h2{
    color:var(--ink);
    font-size:32px;
    margin:4px 0 8px;
}

.section-heading p{
    color:#788e94;
    font-size:14px;
}


/* =====================================================
   SERVICES
===================================================== */

.services-section{
    background:#fff;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.service-card{
    background:#fff;
    border:1px solid #e4eeee;
    padding:27px 18px;
    text-align:center;
    border-radius:13px;
    transition:.3s;
}

.service-card:hover{
    transform:translateY(-7px);
    box-shadow:0 15px 35px rgba(0,0,0,.07);
}

.service-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    margin:0 auto 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
}

.service-icon.green{
    background:var(--brand-tint);
}

.service-icon.blue{
    background:#eaf3ff;
}

.service-icon.red{
    background:#fff0f0;
}

.service-icon.purple{
    background:#f2efff;
}

.service-icon.orange{
    background:#fff5e9;
}

.service-card h3{
    font-size:16px;
    color:#12444f;
    margin-bottom:6px;
}

.service-card p{
    font-size:12px;
    color:#7d9196;
    min-height:60px;
}

.service-card a{
    display:inline-block;
    margin-top:12px;
    color:var(--brand);
    font-size:12px;
    font-weight:700;
}


/* =====================================================
   DOCTOR SECTION
===================================================== */

.doctor-section{
    background:#f7fbfc;
}

.doctor-toolbar{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-bottom:25px;
}

.doctor-search{
    width:430px;
    background:#fff;
    border:1px solid #e0eaec;
    border-radius:8px;
    display:flex;
    align-items:center;
    padding:0 13px;
}

.doctor-search input{
    width:100%;
    border:0;
    outline:0;
    padding:12px;
    font-size:13px;
}

.doctor-toolbar > select{
    width:190px;
    border:1px solid #e0eaec;
    background:#fff;
    border-radius:8px;
    padding:0 13px;
    color:#536d73;
    outline:none;
}

.doctors-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.doctor-card{
    background:#fff;
    border:1px solid #e4eeee;
    border-radius:14px;
    overflow:hidden;
    transition:.3s;
}

.doctor-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.doctor-photo{
    height:255px;
    background:#e5f0f2;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.doctor-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.doctor-initials{
    font-size:54px;
    font-weight:800;
    color:var(--brand);
    opacity:.35;
}

.available{
    position:absolute;
    left:12px;
    top:12px;
    background:var(--brand-tint);
    color:var(--brand-deep);
    padding:4px 9px;
    border-radius:20px;
    font-size:10px;
    font-weight:700;
}

.doctor-info{
    padding:17px;
}

.doctor-speciality{
    color:var(--brand);
    font-size:11px;
    font-weight:700;
}

.doctor-info h3{
    font-size:18px;
    color:var(--ink);
    margin:2px 0;
}

.doctor-info > p{
    color:#829499;
    font-size:11px;
}

.doctor-meta{
    display:flex;
    justify-content:space-between;
    margin:12px 0;
    font-size:10px;
    color:#72878c;
}

.doctor-meta span:first-child{
    color:#f2a523;
}

.doctor-footer{
    border-top:1px solid #edf2f3;
    padding-top:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.doctor-footer strong{
    font-size:12px;
    color:#355860;
}

.doctor-footer a{
    color:var(--brand);
    border:1px solid var(--brand);
    border-radius:6px;
    padding:6px 9px;
    font-size:10px;
    font-weight:700;
}

.doctor-footer a:hover{
    background:var(--brand);
    color:#fff;
}

.view-all{
    text-align:center;
    margin-top:35px;
}

.btn-outline{
    border:1px solid var(--brand);
    color:var(--brand-deep);
    background:#fff;
}

.btn-outline:hover{
    background:var(--brand);
    color:#fff;
}


/* =====================================================
   STATISTICS
===================================================== */

.statistics{
    padding:40px 0;
    background:var(--ink);
}

.statistics-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.stat-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    color:#fff;
}

.stat-icon{
    width:53px;
    height:53px;
    background:rgba(255,255,255,.09);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.stat-box h3{
    color:var(--brand-light);
    font-size:27px;
    line-height:1.2;
}

.stat-box p{
    color:#bdd1d5;
    font-size:11px;
}


/* =====================================================
   ABOUT
===================================================== */

.about-section{
    background:#fff;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center;
}

.about-image{
    height:430px;
    position:relative;
    border-radius:18px;
    overflow:hidden;
    background:#e5f0f2;
}

.about-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.experience-box{
    position:absolute;
    left:20px;
    bottom:20px;
    background:var(--brand);
    color:#fff;
    padding:15px 20px;
    border-radius:10px;
    display:flex;
    gap:10px;
    align-items:center;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
}

.experience-box strong{
    font-size:29px;
}

.experience-box span{
    font-size:11px;
    line-height:1.4;
}

.about-content h2{
    color:var(--ink);
    font-size:35px;
    line-height:1.35;
    margin:8px 0 18px;
}

.about-content h2 span{
    color:var(--brand);
}

.about-content > p{
    color:#71868b;
    font-size:14px;
    margin-bottom:13px;
}

.about-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:22px;
}

.about-points div{
    display:flex;
    align-items:center;
    gap:9px;
}

.about-points span{
    width:25px;
    height:25px;
    border-radius:50%;
    background:var(--brand-tint);
    color:var(--brand);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:bold;
    flex-shrink:0;
}

.about-points p{
    font-size:12px;
    color:#526d73;
}


/* =====================================================
   REVIEWS
===================================================== */

.reviews{
    background:#edf9f7;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.review-card{
    background:#fff;
    border:1px solid #e1eeee;
    border-radius:14px;
    padding:25px;
}

.stars{
    color:#f5a623;
    letter-spacing:2px;
    margin-bottom:12px;
}

.review-card > p{
    color:#6e858a;
    font-size:13px;
    min-height:85px;
}

.review-user{
    display:flex;
    gap:10px;
    align-items:center;
    border-top:1px solid #edf2f3;
    padding-top:14px;
}

.avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--brand-tint);
    color:var(--brand-deep);
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    overflow:hidden;
    flex-shrink:0;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.review-user strong{
    display:block;
    color:#274c55;
    font-size:13px;
}

.review-user small{
    color:#87999d;
    font-size:10px;
}


/* =====================================================
   CONTACT
===================================================== */

.contact-section{
    background:#fff;
}

.contact-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:35px;
}

.contact-information{
    background:var(--ink);
    color:#fff;
    border-radius:15px;
    padding:35px;
}

.contact-information h2{
    font-size:29px;
    margin:7px 0 12px;
}

.contact-information > p{
    color:#bdd0d4;
    font-size:13px;
    margin-bottom:25px;
}

.contact-item{
    display:flex;
    gap:13px;
    margin-bottom:18px;
}

.contact-icon{
    width:40px;
    height:40px;
    background:rgba(255,255,255,.1);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.contact-item strong{
    font-size:13px;
}

.contact-item p{
    color:#bdd0d4;
    font-size:11px;
}

.contact-map{
    min-height:400px;
}

.contact-map iframe{
    width:100%;
    height:100%;
    min-height:400px;
    border:0;
    border-radius:15px;
}

.map-placeholder{
    height:100%;
    min-height:400px;
    border-radius:15px;
    background:
        linear-gradient(
            rgba(223,240,241,.85),
            rgba(223,240,241,.85)
        ),
        repeating-linear-gradient(
            45deg,
            #d5e8e9 0px,
            #d5e8e9 2px,
            #e8f3f4 2px,
            #e8f3f4 35px
        );
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.map-placeholder span{
    font-size:45px;
}

.map-placeholder h3{
    color:var(--ink);
    font-size:21px;
}

.map-placeholder p{
    color:#71888d;
    font-size:13px;
}

.map-placeholder a{
    display:inline-block;
    margin-top:15px;
    background:var(--brand);
    color:#fff;
    padding:10px 17px;
    border-radius:7px;
    font-size:12px;
}


/* =====================================================
   FLASH / NOTICE
===================================================== */

.site-notice{
    max-width:1200px;
    width:92%;
    margin:18px auto -10px;
    padding:12px 16px;
    border-radius:10px;
    font-size:13px;
}

.site-notice.ok{
    background:var(--brand-tint);
    color:#0a6b53;
    border:1px solid #bde8da;
}

.site-notice.warn{
    background:#fff6e6;
    color:#8a5a10;
    border:1px solid #f3dfb8;
}


/* =====================================================
   INNER PAGE WRAPPER
   -----------------------------------------------------
   হোম ছাড়া বাকি পাতাগুলো (ডাক্তার তালিকা, সেবা, ব্লগ)
   Tailwind দিয়ে লেখা। সেগুলো যেন হেডার-ফুটারের মাঝে
   ঠিকভাবে বসে, তার জন্য এই মোড়কটা।
===================================================== */

.site-inner{
    width:92%;
    max-width:1200px;
    margin:auto;
    padding:45px 0 70px;
    min-height:45vh;
}


/* =====================================================
   FOOTER
===================================================== */

.site-footer{
    background:var(--ink-deep);
    color:#fff;
    padding-top:55px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:45px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.footer-logo .logo-icon{
    width:43px;
    height:43px;
    font-size:22px;
}

.footer-logo h2{
    font-size:18px;
}

.footer-logo p{
    color:#8da8ad;
    font-size:9px;
}

.footer-about > p{
    color:#9db8bc;
    font-size:12px;
    max-width:330px;
}

.footer-column h3{
    font-size:16px;
    margin-bottom:15px;
}

.footer-column a,
.footer-column > p{
    display:block;
    color:#9db8bc;
    font-size:12px;
    margin-bottom:8px;
}

.footer-column a:hover{
    color:var(--brand-light);
}

.copyright{
    border-top:1px solid rgba(255,255,255,.1);
    text-align:center;
    padding:17px;
    color:#87a3a8;
    font-size:11px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .nav-menu{
        gap:15px;
    }

    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .doctors-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:800px){

    .top-left span:nth-child(3),
    .top-right{
        display:none;
    }

    .navbar{
        min-height:70px;
    }

    .nav-menu{
        display:none;
    }

    .mobile-menu{
        display:block;
    }

    /* চেকবক্স চেক হলে ড্রয়ার খোলে */
    #nav-toggle:checked ~ .nav-drawer{
        display:block;
        border-top:1px solid #eef4f5;
        padding:12px 0 18px;
    }

    .nav-drawer a{
        display:block;
        padding:10px 0;
        color:#38565d;
        font-size:14px;
        font-weight:600;
    }

    .hero-wrapper{
        grid-template-columns:1fr;
        gap:35px;
    }

    .hero-content h2{
        font-size:40px;
    }

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .statistics-grid{
        grid-template-columns:repeat(2,1fr);
        row-gap:25px;
    }

    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .review-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:560px){

    .top-left{
        gap:10px;
        justify-content:center;
        width:100%;
    }

    .top-left span{
        font-size:10px;
    }

    .logo h1{
        font-size:19px;
    }

    .logo p{
        font-size:8px;
    }

    .logo-icon{
        width:43px;
        height:43px;
        font-size:22px;
    }

    .services-section,
    .doctor-section,
    .about-section,
    .reviews,
    .contact-section{
        padding:60px 0;
    }

    .hero{
        padding:45px 0;
    }

    .hero-content h2{
        font-size:32px;
    }

    .hero-content > p{
        font-size:13px;
    }

    .hero-features{
        gap:18px;
    }

    .hero-features strong{
        font-size:18px;
    }

    .form-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .services-grid,
    .doctors-grid{
        grid-template-columns:1fr;
    }

    .doctor-toolbar{
        flex-direction:column;
    }

    .doctor-search,
    .doctor-toolbar > select{
        width:100%;
        min-height:45px;
    }

    .statistics-grid{
        grid-template-columns:1fr 1fr;
    }

    .about-grid{
        gap:35px;
    }

    .about-image{
        height:320px;
    }

    .about-content h2{
        font-size:28px;
    }

    .about-points{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

}