/* ==========================
   SMART PEKUA v2
   Part 1
========================== */
html,
body {
    font-family: "Noto Sans Bengali", sans-serif;
    margin: 0;
    padding: 0;
}

/* ===== Global Reset ===== */

html,
body {
    margin: 0;
    padding: 0;
}

/* ===== Smart Pekua Header ===== */

.app-header{
    background:#1E88E5;
    color:#fff;

    padding:14px 18px 12px;

    padding-top:calc(14px + env(safe-area-inset-top));

    border-radius:0 0 24px 24px;

    box-shadow:0 4px 14px rgba(0,0,0,.12);
}

.header-top{
    display:flex;
    align-items:center;
}

.logo-box{
    width:58px;
    height:58px;

    background:#fff;

    border-radius:12px;

    overflow:hidden;
    flex-shrink:0;
}

.logo-box img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.title-box{
    flex:1;
    margin-left:12px;
}

.title-box h1{
    color:#fff;

    font-size:28px;

    margin:0 0 2px;

    line-height:1.15;
}

.title-box p{
    color:#E3F2FD;

    font-size:13px;

    margin:0;

    line-height:1.2;
}

.notify{
    font-size:27px;

    margin-left:8px;
}


/* ===== Search ===== */

.search-area{
    margin-top:13px;
}

.search-box{
    width:100%;
    box-sizing:border-box;

    padding:12px 18px;

    border:none;
    outline:none;

    border-radius:27px;

    font-size:16px;

    background:#fff;

    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

/* ===== Smart Slider ===== */

.slider-container{
    width:calc(100% - 30px);

    /* Header এবং Slider-এর মাঝে পরিষ্কার gap */
    margin:12px 15px 15px;

    overflow:hidden;
    position:relative;

    border-radius:16px;

    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.slider-track{
    display:flex;
    transition:transform .4s ease;
    will-change:transform;
}

.slide{
    min-width:100%;
    height:180px;
    object-fit:cover;
    flex-shrink:0;
    user-select:none;
    -webkit-user-drag:none;
}

.dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ffffff80;
    transition:.3s;
}

.active-dot{
    background:#fff;
    transform:scale(1.3);
}

.slider-container{
    touch-action:pan-y;
}


/* ==========================
   SECTION TITLE
========================== */

.section-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin:20px 15px 12px;

}

.section-header h2{

    font-size:24px;
    color:#222;

}

.section-header a{

    color:#1E88E5;
    text-decoration:none;
    font-size:15px;
}


/* ==========================
   CARD DESIGN
========================== */

.container{

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:15px;

    padding:0 15px 20px;

}

.card{

    position:relative;

    background:#fff;

    border-radius:20px;

    padding:22px 15px;

    text-align:center;

    color:#222;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.25s;

}

.card:active{

    transform:scale(.96);

}

.card .icon{

    font-size:48px;

}

.card h3{

    margin-top:12px;

    font-size:18px;

    font-weight:bold;

}


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

.all-services-card{

    margin:10px 15px 20px;

    background:linear-gradient(135deg,#1976D2,#42A5F5);

    color:#fff;

    border-radius:18px;

    padding:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-decoration:none;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.all-services-card h3 {
    font-size: 18px;
    line-height: 1.4;
}

.all-services-card p {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 4px;
}

.all-services-card span {
    font-size: 24px;
}
/* ==========================
   SMART PEKUA v2
   Part 3
========================== */

/* ===== Bottom Navigation ===== */

.bottom-nav{
    position:fixed;
    left:0;
    bottom:0;
    width:94%;
    height:72px;
    background:#fff;
    display:flex;
    justify-content:space-around;
    align-items:center;
    box-shadow:0 -4px 15px rgba(0,0,0,.12);
    border-radius:20px 20px 0 0;
    z-index:999;
}

.nav-item{
    flex:1;
    text-align:center;
    text-decoration:none;
    color:#777;
    transition:.3s;
}

.nav-item .icon{
    font-size:24px;
    display:block;
    margin-bottom:4px;
}

.nav-item span{
    font-size:13px;
}

.nav-item.active{
    color:#1976D2;
}

.nav-item:active{
    transform:scale(.92);
}


/* ===== Notice Section ===== */

.notice-section{
    margin:20px 15px;
}

.notice-title{
    font-size:22px;
    margin-bottom:12px;
    color:#222;
}

.notice-card{
    background:#fff;
    border-left:5px solid #1976D2;
    border-radius:15px;
    padding:15px;
    margin-bottom:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.notice-card h4{
    margin:0 0 8px;
    color:#1976D2;
    font-size:17px;
}

.notice-card p{
    margin:0;
    color:#555;
    line-height:1.6;
}


/* ===== Quick Buttons ===== */

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

.quick-item{
    background:#fff;
    border-radius:16px;
    padding:14px 8px;
    text-align:center;
    text-decoration:none;
    color:#333;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.quick-item .icon{
    font-size:28px;
    margin-bottom:8px;
}

.quick-item span{
    font-size:13px;
}


/* ===== Fade Animation ===== */

.card,
.notice-card,
.quick-item,
.all-services-card{
    animation:fadeUp .35s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
/* ==========================
   SMART PEKUA v2
   Part 4 - Service Pages
========================== */

/* ===== Page Header ===== */

.page-header{

    position:sticky;
    top:0;
    z-index:100;
width: 100%;
    display:flex;
    align-items:center;
    gap:10px;

    background:#1E88E5;
    color:#fff;

    padding:16px 18px;

    border-radius:0 0 22px 22px;

    box-shadow:0 4px 12px rgba(0,0,0,.12);
box-sizing: border-box;
  
}

.page-header h1{

    font-size:24px;

    margin:0;

}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-left h1 {
    margin: 0;
    white-space: nowrap;
    line-height: 1.3;
}

.back-btn{

    color:#fff;

    text-decoration:none;

    font-size:28px;

    font-weight:bold;

  flex-shrink: 0;
}


/* ===== Page Content ===== */

.page-content{

    padding:15px;

}


/* ===== Search ===== */

.search-box{

    width:100%;

    padding:14px 16px;

    border:none;

    border-radius:14px;

    background:#fff;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

    font-size:16px;

    outline:none;

    margin-bottom:15px;

}


/* ===== Service Card ===== */

.service-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.25s;

}

.service-card:active{

    transform:scale(.98);

}


/* ===== Image ===== */

.service-image{

    width:100%;

    height:190px;

    object-fit:cover;

}


/* ===== Info ===== */

.service-info{

    padding:16px;

}

.service-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}

.service-top h2{

    font-size:20px;

    color:#222;

}


/* ===== Badge ===== */

.badge{

    padding:6px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;

}

.badge.open{

    background:#E8F5E9;

    color:#2E7D32;

}

.badge.closed{

    background:#FDECEC;

    color:#D32F2F;

}


/* ===== Rating ===== */

.rating{

    margin:12px 0;

    color:#FF9800;

    font-size:15px;

}


/* ===== Address ===== */

.location{

    color:#666;

    line-height:1.6;

    margin-bottom:16px;

}


/* ===== Buttons ===== */

.buttons{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.btn{

    flex:1;

    min-width:90px;

    padding:12px;

    text-align:center;

    text-decoration:none;

    border-radius:12px;

    color:#fff;

    font-weight:bold;

}

.call{

    background:#2E7D32;

}

.map{

    background:#1976D2;

}

.share{

    background:#FF9800;

}

.favorite{

    background:#E91E63;

}


/* ===== No Result ===== */

#noResult{

    text-align:center;

    color:#777;

    margin:25px 0;

    font-size:18px;

}
/* ==========================
   SMART PEKUA v2
   Part 5 - Premium UI
========================== */

/* ===== Smooth Scroll ===== */

html{
    scroll-behavior:smooth;
}

/* ===== Fade Animation ===== */

.fade-in{
    animation:fadeIn .5s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===== Card Hover ===== */

.card,
.service-card,
.notice-card{

    transition:.25s;

}

.card:active,
.service-card:active{

    transform:scale(.97);

}

/* ===== Ripple Effect ===== */

.card{

    position:relative;

    overflow:hidden;

}

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

.fab{

    position:fixed;

    right:18px;

    bottom:90px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#1E88E5;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:28px;

    box-shadow:0 6px 18px rgba(0,0,0,.25);

    z-index:999;

}

.fab:active{

    transform:scale(.92);

}

/* ===== Smart Pekua Dark Mode ===== */

.dark-mode{

    background:#121212;

    color:#fff;

}


/* Cards */

.dark-mode .card,
.dark-mode .service-card,
.dark-mode .notice-card,
.dark-mode .dashboard-card,
.dark-mode .doctor-card,
.dark-mode .hospital-card,
.dark-mode .details-card,
.dark-mode .favorite-service-card{

    background:#1f1f1f;

    color:#fff;

}


/* Card Text */

.dark-mode .card h3,
.dark-mode .service-card h3,
.dark-mode .dashboard-card span,
.dark-mode .doctor-name,
.dark-mode .hospital-name,
.dark-mode .details-title,
.dark-mode .favorite-service-card h3{

    color:#fff;

}


/* Search */

.dark-mode .search-box{

    background:#2b2b2b;

    color:#fff;

}


/* Search Placeholder */

.dark-mode .search-box::placeholder{

    color:#aaa;

}


/* Bottom Navigation */

.dark-mode .bottom-nav{

    background:#1b1b1b !important;

    color:#fff;

}


/* Navigation Text */

.dark-mode .bottom-nav .nav-item{

    color:#aaa;

}


/* Active Navigation */

.dark-mode .bottom-nav .nav-item.active{

    color:#64B5F6;

    background:#263238;

}


/* Page Content */

.dark-mode .page-content{

    color:#fff;

}


/* Doctor Information */

.dark-mode .doctor-degree,
.dark-mode .doctor-specialist,
.dark-mode .doctor-hospital{

    color:#ccc;

}


/* Hospital Information */

.dark-mode .hospital-address,
.dark-mode .hospital-time,
.dark-mode .hospital-phone{

    color:#ccc;

}


/* Details Information */

.dark-mode .info-card{

    background:#1f1f1f;

}

.dark-mode .info-text p{

    color:#ccc;

}


/* Favorite Button */

.dark-mode .favorite-btn{

    background:#2b2b2b;

}


/* Support Banner */

.dark-mode .support-banner{

    box-shadow:
        0 8px 20px rgba(0,0,0,.35);

}
/* ===== Hospital Buttons ===== */

.buttons{
    display:flex;
    gap:8px;
    margin-top:15px;
}

.btn{
    flex:1;
    text-align:center;
    text-decoration:none;
    padding:10px;
    border-radius:10px;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    transition:.25s;
}

.btn:active{
    transform:scale(.95);
}

.call{
    background:#2E7D32;
}

.map{
    background:#1976D2;
}

.details{
    background:#FF9800;
}
.government{
    background:#E3F2FD;
    color:#1565C0;
}

.info-item{
    background:#F8F9FA;
    padding:14px;
    border-radius:12px;
    margin-top:12px;
    line-height:1.7;
    color:#444;
}

.details-card{
    background:#fff;
    border-radius:20px;
    padding:18px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.details-image{
    width:100%;
    height:230px;
    object-fit:cover;
    border-radius:16px;
    margin-bottom:18px;
}
.details{
    background:#FF9800;
    color:#fff;
    border:none;
    cursor:pointer;
}
/* ==========================
   Premium Doctor Card
========================== */

.doctor-card{
    position:relative;
    display:flex;
    gap:16px;
    background:#fff;
    border-radius:22px;
    padding:18px;
    margin:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    align-items:flex-start;
}

.doctor-avatar{
    width:95px;
    height:95px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #EAF3FF;
    flex-shrink:0;
}

.doctor-info{
    flex:1;
    padding-right:60px;
}

.doctor-name{
    font-size:24px;
    font-weight:700;
    color:#222;
    line-height:1.3;
    margin-bottom:6px;
}

.doctor-degree{
    font-size:15px;
    color:#777;
    margin-bottom:8px;
}

.doctor-speciality,
.doctor-hospital,
.doctor-phone{
    font-size:15px;
    line-height:1.6;
    margin-bottom:5px;
}

.doctor-speciality{
    color:#1976D2;
    font-weight:600;
}

.doctor-hospital{
    color:#555;
}

.doctor-phone{
    color:#2E7D32;
    font-weight:bold;
}

.doctor-buttons{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.doctor-buttons .call-btn,
.doctor-buttons .details-btn{
    flex:1;
    height:42px;
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:15px;
    font-weight:bold;
}

.favorite-btn{
    position:absolute;
    top:14px;
    right:14px;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:#fff;
    box-shadow:0 3px 12px rgba(0,0,0,.15);
    font-size:24px;
    cursor:pointer;
}

.favorite-btn.active{
    color:#E53935;
}

@media(max-width:480px){

.doctor-card{
    gap:12px;
    padding:15px;
}

.doctor-avatar{
    width:82px;
    height:82px;
}

.doctor-name{
    font-size:21px;
}

.doctor-degree,
.doctor-speciality,
.doctor-hospital,
.doctor-phone{
    font-size:14px;
}

}

/* ===========================
   Home Support Banner
   Adorsholipi Responsive Fix
=========================== */

.support-banner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 18px;

    background: linear-gradient(135deg,#ff6b6b,#ff9800);

    color: #fff;

    text-decoration: none;

    margin: 20px;

    padding: 22px 20px;

    border-radius: 20px;

    box-shadow: 0 8px 20px rgba(0,0,0,.15);

    transition: .25s;

    box-sizing: border-box;

}


.support-banner:active {

    transform: scale(.98);

}


/* Text */

.support-banner-text {

    flex: 1;

    min-width: 0;

}


.support-banner-text h2 {

    font-size: 21px;

    line-height: 1.35;

    margin: 0 0 8px;

}


.support-banner-text p {

    font-size: 15px;

    line-height: 1.6;

    margin: 0;

    opacity: .95;

}


/* Button */

.support-banner-btn {

    flex-shrink: 0;

    background: #fff;

    color: #ff5722;

    padding: 12px 18px;

    border-radius: 40px;

    font-size: 16px;

    line-height: 1.4;

    font-weight: bold;

    white-space: nowrap;

    box-shadow: 0 4px 12px rgba(0,0,0,.15);

}


/* ===========================
   Mobile Support Banner
=========================== */

@media(max-width:600px){

.support-banner{
    display:flex;
    flex-direction:row;
    align-items:center;

    gap:8px;

    margin:18px 15px 110px;

    padding:16px 12px;

    min-height:150px;

    box-sizing:border-box;
}


    .support-banner-text{
        flex:1;
        min-width:0;
    }


    .support-banner-text h2{

        font-size:18px;

        line-height:1.35;

        margin:0 0 6px;

        word-break:normal;
    }


    .support-banner-text p{

        font-size:13px;

        line-height:1.55;

        margin:0;

    }


    .support-banner-btn{

        flex-shrink:0;

        padding:10px 12px;

        font-size:14px;

        line-height:1.3;

        white-space:nowrap;

        border-radius:30px;

        max-width:125px;

        text-align:center;

    }

}

/* Toast */

.toast{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    background:#222;

    color:#fff;

    padding:14px 22px;

    border-radius:30px;

    font-size:15px;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.toast.show{

    opacity:1;

    visibility:visible;

}

.slider{
    touch-action: pan-y;
    overflow: hidden;
    user-select: none;
}

/* =================================
   Smart Pekua - Fixed Bottom Nav
================================= */

.bottom-nav {
    position: fixed !important;

    left: 12px;
    right: 12px;
    bottom: 10px;

    height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(30, 136, 229, 0.10);

    border-radius: 22px;

    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.12);

    z-index: 99999;

    padding: 5px 7px;

    box-sizing: border-box;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Scroll থেকে স্বাধীন রাখবে */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}


/* Navigation Item */

.bottom-nav .nav-item {

    flex: 1;

    height: 56px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 2px;

    text-decoration: none;

    color: #777;

    border-radius: 17px;

    font-size: 11px;

    transition: all 0.25s ease;

    position: relative;
}


/* Icon */

.bottom-nav .nav-item div {

    font-size: 23px;

    line-height: 25px;

    transition:
        transform 0.25s ease;
}


/* Text */

.bottom-nav .nav-item span {

    font-size: 11px;

    font-weight: 500;

    white-space: nowrap;
}


/* Active */

.bottom-nav .nav-item.active {

    color: #1E88E5;

    background: #EAF4FF;

    font-weight: 700;

}


/* Active Icon */

.bottom-nav .nav-item.active div {

    transform:
        translateY(-1px)
        scale(1.08);

}


/* Touch Effect */

.bottom-nav .nav-item:active {

    transform: scale(0.92);

}


/* Hover */

@media (hover: hover) {

    .bottom-nav .nav-item:hover {

        color: #1E88E5;

        background: #F3F8FD;

    }

}


/* Mobile */

@media (max-width: 360px) {

    .bottom-nav {

        left: 8px;
        right: 8px;

        bottom: 7px;

        height: 64px;

        border-radius: 19px;

    }

    .bottom-nav .nav-item {

        height: 52px;

    }

    .bottom-nav .nav-item div {

        font-size: 21px;

    }

    .bottom-nav .nav-item span {

        font-size: 10px;

    }

}

/* ===========================
   Customer Support
=========================== */

/* Overlay */

.support-overlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:9997;

}

.support-overlay.show{

    opacity:1;
    visibility:visible;

}

/* Bottom Sheet */

.support-sheet{

    position:fixed;
    left:0;
    right:0;
    bottom:-100%;

    background:#fff;

    border-radius:28px 28px 0 0;

    padding:22px;

    box-shadow:0 -10px 35px rgba(0,0,0,.18);

    transition:.35s ease;

    z-index:9998;

}

.support-sheet.show{

    bottom:0;

}

/* Handle */

.sheet-handle{

    width:55px;
    height:6px;

    background:#D5D5D5;

    border-radius:20px;

    margin:0 auto 18px;

}

.support-sheet h2{

    margin:0;
    text-align:center;
    color:#1976D2;
    font-size:24px;

}

.sheet-subtitle{

    text-align:center;
    color:#666;
    margin:10px 0 25px;

}

/* Items */

.support-list{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.support-item{

    display:flex;
    align-items:center;
    gap:16px;

    text-decoration:none;

    background:#F5F7FB;

    border-radius:18px;

    padding:16px;

    color:#222;

    transition:.2s;

}

.support-item:hover{

    background:#EAF3FF;

}

.support-icon{

    width:52px;
    height:52px;

    border-radius:50%;

    background:#1976D2;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;

}

.support-item h4{

    margin:0;
    font-size:17px;

}

.support-item p{

    margin:5px 0 0;
    color:#666;
    font-size:14px;

}

/* Close */

.close-support{

    width:100%;

    margin-top:25px;

    border:none;

    background:#1976D2;

    color:#fff;

    padding:15px;

    border-radius:15px;

    font-size:17px;
    font-weight:bold;

}

/* Mobile */

@media(max-width:600px){

.support-sheet{

    padding:20px;

}

.support-sheet h2{

    font-size:22px;

}

.support-item{

    padding:14px;

}

.support-icon{

    width:48px;
    height:48px;
    font-size:22px;

}

}

.support-welcome{

    text-align:center;

    background:#EAF4FF;

    color:#1976D2;

    border-radius:16px;

    padding:15px;

    margin:18px 0 22px;

    font-size:16px;

    line-height:1.8;

    font-weight:bold;

}

/* ========================================
   SMART PEKUA
   Latest Notices
======================================== */

.latest-notices-section {

    margin: 20px 0 25px;

}


/* ==========================
   Header
========================== */

.latest-notices-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;

}


.latest-notices-header h2 {

    margin: 0;

    color: #222;

    font-size: 21px;

    font-weight: 700;

}


.view-all-notices {

    flex-shrink: 0;

    color: #1565C0;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

}


/* ==========================
   Notice Card
========================== */

.latest-notice-card {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    width: 100%;

    box-sizing: border-box;

    margin-bottom: 10px;

    padding: 13px 12px;

    background: #fff;

    border-left: 4px solid #1E88E5;

    border-radius: 12px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.06);

    text-decoration: none;

    transition: .2s ease;

}


.latest-notice-card:active {

    transform: scale(.98);

}


/* ==========================
   Pin
========================== */

.latest-notice-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;

    height: 30px;

    flex-shrink: 0;

    border-radius: 9px;

    background: #E3F2FD;

    font-size: 15px;

}


/* ==========================
   Content
========================== */

.latest-notice-content {

    flex: 1;

    min-width: 0;

}


.latest-notice-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-bottom: 4px;

}


.latest-notice-category {

    display: inline-block;

    padding: 2px 7px;

    background: #E3F2FD;

    color: #1565C0;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 600;

}


.latest-notice-date {

    color: #888;

    font-size: 10px;

    white-space: nowrap;

}


.latest-notice-content h3 {

    margin: 0;

    color: #222;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.45;

}


.latest-notice-content p {

    margin: 4px 0 0;

    color: #777;

    font-size: 12px;

    line-height: 1.5;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


/* ==========================
   Arrow
========================== */

.latest-notice-arrow {

    align-self: center;

    color: #1E88E5;

    font-size: 25px;

    line-height: 1;

}


/* ==========================
   Loading
========================== */

.notice-loading {

    padding: 25px 10px;

    text-align: center;

    color: #777;

    font-size: 14px;

}


/* ==========================
   Empty
========================== */

.notice-empty {

    padding: 22px 10px;

    background: #fff;

    border-radius: 12px;

    color: #777;

    text-align: center;

    font-size: 14px;

}


/* ==========================
   Error
========================== */

.notice-error {

    padding: 18px 10px;

    background: #FFF3F3;

    border-radius: 12px;

    color: #C62828;

    text-align: center;

    font-size: 13px;

}


/* ==========================
   Mobile
========================== */

@media (max-width: 600px) {

    .latest-notices-header h2 {

        font-size: 19px;

    }


    .view-all-notices {

        font-size: 12px;

    }


    .latest-notice-card {

        padding: 11px;

    }


    .latest-notice-content h3 {

        font-size: 14px;

    }

}

.update-card {
    text-align: center;
    text-decoration: none;
}

.update-card small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #777;
}

.update-now-btn {
    margin-top: 10px;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    background: #2189e5;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
}

.dashboard-card,
.card,
.service-card{
    text-decoration:none !important;
}

.dashboard-card span,
.dashboard-card h3,
.card span,
.card h3,
.service-card span,
.service-card h3{
    text-decoration:none !important;
}

/* =========================================
   SMART PEKUA - DARK MODE POLISH
========================================= */

.dark-mode .hospital-type,
.dark-mode .details-badge {
    background: #263b4a;
    color: #64b5f6;
}

.dark-mode .info-card {
    background: #1f1f1f;
    border-left-color: #42a5f5;
}

.dark-mode .info-text h4 {
    color: #64b5f6;
}

.dark-mode .info-text p {
    color: #d0d0d0;
}

.dark-mode .doctor-degree,
.dark-mode .doctor-specialist,
.dark-mode .doctor-hospital,
.dark-mode .hospital-address,
.dark-mode .hospital-time,
.dark-mode .hospital-phone {
    color: #ccc;
}

.dark-mode .favorite-title h2 {
    color: #fff;
}

.dark-mode .favorite-title span {
    background: #3a2528;
    color: #ff6b6b;
}

.dark-mode .favorite-empty {
    color: #ddd;
}

.dark-mode .favorite-empty p {
    color: #aaa;
}

.dark-mode .empty-box {
    color: #ccc;
}

.dark-mode .service-box {
    background: #1b2830;
    border-left-color: #42a5f5;
}

.dark-mode .service-box h3 {
    color: #64b5f6;
}

.dark-mode .support-banner {
    box-shadow: 0 8px 25px rgba(0,0,0,.4);
}

.dark-mode .favorite-btn {
    background: #2b2b2b;
    color: #ddd;
}

.dark-mode .favorite-btn.active {
    color: #ff5252;
}

.dark-mode .favorite-remove-btn {
    background: #3a2528;
    color: #ff6b6b;
}

/* =========================================
   DARK MODE - TEXT VISIBILITY FIX
========================================= */
/* =========================================
   SMART PEKUA - GLOBAL DARK MODE
========================================= */

.dark-mode {
    background:#121212;
    color:#ffffff;
}


/* ===== Common Cards ===== */

.dark-mode .card,
.dark-mode .service-card,
.dark-mode .doctor-card,
.dark-mode .hospital-card,
.dark-mode .notice-card,
.dark-mode .dashboard-card,
.dark-mode .details-card,
.dark-mode .donor-card,
.dark-mode .donor-details-card,
.dark-mode .info-card,
.dark-mode .details-item,
.dark-mode .service-box {
    background:#1f1f1f;
    color:#ffffff;
}


/* ===== Common Card Text ===== */

.dark-mode .card h1,
.dark-mode .card h2,
.dark-mode .card h3,
.dark-mode .card h4,
.dark-mode .card p,

.dark-mode .service-card h1,
.dark-mode .service-card h2,
.dark-mode .service-card h3,
.dark-mode .service-card h4,
.dark-mode .service-card p,

.dark-mode .doctor-card h1,
.dark-mode .doctor-card h2,
.dark-mode .doctor-card h3,
.dark-mode .doctor-card h4,
.dark-mode .doctor-card p,

.dark-mode .hospital-card h1,
.dark-mode .hospital-card h2,
.dark-mode .hospital-card h3,
.dark-mode .hospital-card h4,
.dark-mode .hospital-card p,

.dark-mode .notice-card h1,
.dark-mode .notice-card h2,
.dark-mode .notice-card h3,
.dark-mode .notice-card h4,
.dark-mode .notice-card p,

.dark-mode .dashboard-card h1,
.dark-mode .dashboard-card h2,
.dark-mode .dashboard-card h3,
.dark-mode .dashboard-card h4,
.dark-mode .dashboard-card p,

.dark-mode .details-card h1,
.dark-mode .details-card h2,
.dark-mode .details-card h3,
.dark-mode .details-card h4,
.dark-mode .details-card p,

.dark-mode .donor-card h1,
.dark-mode .donor-card h2,
.dark-mode .donor-card h3,
.dark-mode .donor-card h4,
.dark-mode .donor-card p,

.dark-mode .donor-details-card h1,
.dark-mode .donor-details-card h2,
.dark-mode .donor-details-card h3,
.dark-mode .donor-details-card h4,
.dark-mode .donor-details-card p,

.dark-mode .info-card h1,
.dark-mode .info-card h2,
.dark-mode .info-card h3,
.dark-mode .info-card h4,
.dark-mode .info-card p,

.dark-mode .details-item h1,
.dark-mode .details-item h2,
.dark-mode .details-item h3,
.dark-mode .details-item h4,
.dark-mode .details-item p,

.dark-mode .service-box h1,
.dark-mode .service-box h2,
.dark-mode .service-box h3,
.dark-mode .service-box h4,
.dark-mode .service-box p {
    color:#ffffff;
}


/* ===== Secondary Text ===== */

.dark-mode .doctor-degree,
.dark-mode .doctor-specialist,
.dark-mode .doctor-hospital,
.dark-mode .hospital-address,
.dark-mode .hospital-time,
.dark-mode .hospital-phone,
.dark-mode .info-text p {
    color:#cccccc;
}


/* ===== Search ===== */

.dark-mode .search-box {
    background:#2b2b2b;
    color:#ffffff;
}

.dark-mode .search-box::placeholder {
    color:#aaaaaa;
}


/* ===== Bottom Navigation ===== */

.dark-mode .bottom-nav {
    background:#1b1b1b !important;
}

.dark-mode .bottom-nav .nav-item {
    color:#cccccc;
}

.dark-mode .bottom-nav .nav-item.active {
    color:#64b5f6;
}


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

.dark-mode .favorite-btn {
    background:#2b2b2b;
    color:#dddddd;
}

.dark-mode .favorite-btn.active {
    color:#ff5252;
}
/* Card-এর ভিতরের সাধারণ লেখা */
.dark-mode .card,
.dark-mode .service-card,
.dark-mode .doctor-card,
.dark-mode .hospital-card,
.dark-mode .details-card,
.dark-mode .donor-card,
.dark-mode .donor-details-card {
    color: #fff;
}


/* Secondary / description text */
.dark-mode .description,
.dark-mode .details-description,
.dark-mode .donor-description,
.dark-mode .info-text p {
    color: #d0d0d0;
}


/* Input */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    color: #fff;
}


/* Placeholder */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #aaa;
}

/* ===== Bottom Navigation Content Fix ===== */

.page-content,
.container {
    padding-bottom: 120px !important;
}

/* =================================
   SMART PEKUA - GLOBAL FONT
================================= */

@font-face {
    font-family: "kalpurush";
    src: url("../assets/fonts/kalpurush.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* পুরো অ্যাপের মূল font */
html,
body {
    font-family: "kalpurush", "Roboto", sans-serif;
}

/* বাংলা + English সাধারণ লেখা */
body,
body p,
body span,
body div,
body a,
body button,
body input,
body textarea,
body select,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: "Kalpurush", "Roboto", sans-serif;
}