/**
 * RSIA Dhia - Design System & Base CSS
 * EMC Hospital Style Implementation
 */

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');

 :root {
     /* Color Palette - RSIA Dhia Branding */
     --primary: #2A8C4A;         /* Hijau Utama */
     --primary-hover: #1E6B37;   /* Hijau Gelap */
     --secondary: #F4C10F;       /* Kuning Keemasan/Aksen */
     
     /* Dark Green (Pengganti Navy agar sesuai dengan identitas RSIA Dhia) */
     --navy: #0B2B16;            /* Untuk Footer & Top Bar (Hijau Sangat Gelap) */
     --navy-light: #124222;      /* Hijau Gelap untuk aksen footer bawah */
     --navy-border: #1A5C30;     /* Border hijau gelap */
     
     --bg-light: #f5f6fa;        /* Light Gray */
     --bg-surface: #ffffff;      /* White */
     
     --text-dark: #3b3d42;       /* Dari RSIA Dhia lama */
     --text-muted: #a1a2a4;      /* Dari RSIA Dhia lama */
     
     /* Shapes & Radius */
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-lg: 16px;
     --radius-pill: 9999px;
     
     /* Shadows */
     --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
     --shadow-soft: 0 4px 12px rgba(0,0,0,0.08);
     --shadow-hover: 0 10px 24px rgba(0,0,0,0.12);
     
     /* Typography - RSIA Dhia Branding */
     --font-heading: 'Montserrat', sans-serif;
     --font-body: 'Raleway', sans-serif;
     
     /* Transitions */
     --transition-base: all 0.3s ease-in-out;
 }
 
 /* ==========================================================================
    Base Typogrpahy & Reset
    ========================================================================== */
 body {
     font-family: var(--font-body);
     color: var(--text-dark);
     background-color: var(--bg-light);
     -webkit-font-smoothing: antialiased;
 }
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
     font-family: var(--font-heading);
     font-weight: 600;
     color: var(--text-dark);
 }
 
 /* Responsive Typography for Mobile - RSIA Dhia Optimization */
 @media (max-width: 767px) {
     h1, .h1 { font-size: 1.75rem !important; line-height: 1.3 !important; }
     h2, .h2 { font-size: 1.45rem !important; line-height: 1.4 !important; }
     h3, .h3 { font-size: 1.25rem !important; line-height: 1.4 !important; }
     h4, .h4 { font-size: 1.1rem !important; }
     h5, .h5 { font-size: 1rem !important; }
     p { font-size: 0.9rem; line-height: 1.6; }
 }
 
 p {
     line-height: 1.6;
 }
 
 a {
     color: var(--primary);
     transition: var(--transition-base);
 }
 
 a:hover {
     color: var(--text-dark);
 }
 
 /* ==========================================================================
    Utility Overrides
    ========================================================================== */
 .text-primary { color: var(--primary) !important; }
 .text-navy { color: var(--navy) !important; }
 .bg-primary { background-color: var(--primary) !important; }
 .bg-navy { background-color: var(--navy) !important; }
 .bg-surface { background-color: var(--bg-surface) !important; }
 
 /* Custom Primary Button */
 .btn-primary {
     background-color: var(--primary);
     border-color: var(--primary);
     font-family: var(--font-body);
     font-weight: 600;
     transition: var(--transition-base);
     letter-spacing: 0.5px;
 }
 .btn-primary:hover, .btn-primary:focus {
     background-color: var(--primary-hover);
     border-color: var(--primary-hover);
     color: #fff;
     transform: translateY(-2px);
     box-shadow: var(--shadow-hover);
 }
 
 /* ==========================================================================
    Header 2-Layer (EMC Style)
    ========================================================================== */
 .site-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1030;
     box-shadow: var(--shadow-sm);
 }
 
 /* Top Bar */
 .site-header__top {
     background-color: var(--bg-light);
     color: var(--text-muted);
     font-size: 13px;
     font-family: var(--font-body);
     font-weight: 500;
     padding: 6px 0;
     border-bottom: 1px solid rgba(0,0,0,0.05);
 }
 
 .site-header__top a {
     color: var(--text-muted);
     text-decoration: none;
     margin-left: 20px;
 }
 
 .site-header__top a:hover {
     color: var(--primary);
 }
 
 .site-header__top i {
     color: var(--primary);
     margin-right: 5px;
 }
 
 /* Main Navbar */
 .site-header__bottom {
     background-color: #fff;
     transition: var(--transition-base);
 }
 
 /* Navbar Brand (Logo) */
 .navbar-brand img {
     /* Diperbesar agar proporsional dengan layout navbar */
     height: 65px;
     object-fit: contain;
 }
 
 .navbar-nav .nav-link {
     font-family: var(--font-heading);
     font-weight: 500;
     font-size: 14px;
     color: var(--text-dark);
     padding: 1rem 1.25rem !important;
     transition: var(--transition-base);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .navbar-nav .nav-link:hover, 
 .navbar-nav .nav-link.active {
     color: var(--primary);
 }
 
 /* Ensure content starts below header */
 .site-main {
     margin-top: 110px; /* Adjust based on header height */
 }
 
 /* ==========================================================================
    Hero Section (Carousel Banner)
    ========================================================================== */
 .hero-section {
     position: relative;
     width: 100%;
 }
 
 .hero-img {
     width: 100%;
     height: auto;
     max-height: 585px; /* Sesuai standar EMC */
     object-fit: cover;
     display: block;
 }
 
 /* Carousel Indicators EMC Style */
 .carousel-indicators {
     bottom: 15px; /* Turunkan ke bagian dasar gambar banner agar tidak menutupi konten */
     z-index: 105;
     pointer-events: auto !important;
 }
 
 .carousel-indicators [data-bs-target] {
     box-sizing: border-box !important;
     width: 12px !important;
     height: 12px !important;
     border-radius: 50% !important;
     background-color: transparent !important;
     border: 2px solid #ffffff !important;
     margin: 0 6px !important;
     opacity: 1 !important;
     transition: all 0.3s ease !important;
     cursor: pointer;
     padding: 0 !important;
 }
 
 .carousel-indicators .active {
     background-color: var(--primary) !important;
     border-color: var(--primary) !important;
     transform: scale(1.3) !important;
 }

 @media (max-width: 767px) {
     .carousel-indicators {
         bottom: 5px;
     }
     .carousel-indicators [data-bs-target] {
         width: 8px !important;
         height: 8px !important;
     }
 }
 
 /* ==========================================================================
    Quick Appointment Bar
    ========================================================================== */
 .appointment-bar {
     background-color: #fff;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-hover);
     padding: 20px;
     margin-top: -40px;
     position: relative;
     z-index: 10;
 }
 
 .appointment-bar select, .appointment-bar input, .appointment-bar button {
     height: 48px;
     border-radius: var(--radius-sm);
 }
 
 /* ==========================================================================
    Components
    ========================================================================== */
 /* Card Style */
 .card-premium {
     background-color: var(--bg-surface);
     border-radius: var(--radius-md);
     border: 1px solid rgba(0,0,0,0.05);
     box-shadow: var(--shadow-sm);
     transition: var(--transition-base);
     height: 100%;
     overflow: hidden;
 }
 .card-premium:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-hover);
     border-color: rgba(42, 140, 74, 0.2);
 }
 
 /* Section Header */
 .section-header {
     margin-bottom: 40px;
     text-align: center;
 }
 .section-header h2 {
     color: var(--navy);
     position: relative;
     padding-bottom: 15px;
     margin-bottom: 15px;
 }
 .section-header h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background-color: var(--primary);
 }
 .section-header p {
     color: var(--text-muted);
     max-width: 600px;
     margin: 0 auto;
 }
 
 /* ==========================================================================
    Footer (Navy EMC Style)
    ========================================================================== */
.site-footer {
    background-color: var(--navy);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-body);
    padding-top: 70px;
}

.site-footer h5 {
    color: #fff;
    font-family: var(--font-heading);
    margin-bottom: 25px;
    font-size: 18px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: var(--transition-base);
}

.footer-links a:hover {
    color: var(--primary);
    padding-left: 5px;
}

.footer-bottom {
    background-color: var(--navy-light);
    padding: 20px 0;
    margin-top: 50px;
    border-top: 1px solid var(--navy-border);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}
 
 .social-links a {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background-color: rgba(255,255,255,0.05);
     color: #fff;
     border-radius: 50%;
     margin-right: 10px;
     transition: var(--transition-base);
 }
 
 .social-links a:hover {
     background-color: var(--primary);
     transform: translateY(-3px);
 }
 
 /* ==========================================================================
    Helpers
    ========================================================================== */
 .text-clamp-2 {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }
 .text-clamp-3 {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 /* ==========================================================================
    Floating Quick Access Widget (EMC Style on Left Edge)
    ========================================================================== */
 .floating-widget {
     position: fixed;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
     z-index: 1040;
     display: flex;
     flex-direction: row;
     pointer-events: none; /* Prevent container from blocking clicks behind it */
 }
 
 .widget-tabs {
     display: flex;
     flex-direction: column;
     background-color: var(--primary);
     border-radius: 0 10px 10px 0;
     box-shadow: 2px 0 10px rgba(0,0,0,0.15);
     position: relative;
     z-index: 2; /* Selalu di atas panel yang slide-out */
     pointer-events: auto; /* Re-enable clicks */
 }
 
 .widget-tab {
     width: 75px;
     height: 75px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     text-decoration: none;
     background: transparent;
     border: none;
     border-bottom: 1px solid rgba(255,255,255,0.1);
     font-size: 10px;
     font-family: var(--font-body);
     font-weight: 600;
     text-align: center;
     line-height: 1.2;
     padding: 5px;
     transition: var(--transition-base);
     cursor: pointer;
 }
 
 .widget-tab:last-child {
     border-bottom: none;
 }
 
 .widget-tab:hover, .widget-tab.active {
     background-color: var(--primary-hover);
     color: #ffffff;
 }
 
 .widget-tab i {
     font-size: 24px;
     margin-bottom: 4px;
 }
 
 .widget-panel {
     position: absolute;
     top: 0;
     left: 0; /* Mulai tersembunyi di balik tab */
     width: 320px;
     background-color: #ffffff;
     box-shadow: 4px 4px 15px rgba(0,0,0,0.15);
     padding: 20px;
     border-radius: 0 10px 10px 0;
     transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     z-index: 1; /* Di bawah widget-tabs */
     opacity: 0;
     visibility: hidden;
     pointer-events: auto; /* Re-enable clicks */
 }
 
 .widget-panel.open {
     left: 75px; /* Slide out di sebelah kanan tab (sesuai lebar tab) */
     opacity: 1;
     visibility: visible;
 }
 
 .widget-panel-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
     border-bottom: 1px solid #eee;
     padding-bottom: 10px;
 }
 
 .widget-panel-header h5 {
     color: var(--primary);
     margin: 0;
     font-size: 16px;
     font-weight: 700;
 }
 
 .widget-panel-close {
     background: none;
     border: none;
     font-size: 20px;
     color: var(--text-muted);
     cursor: pointer;
     padding: 0;
 }
 
 .widget-panel-close:hover {
     color: #dc3545; /* Merah untuk tombol tutup */
 }
 
 /* ==========================================================================
    Mobile Responsiveness (Bottom Navigation for Widget)
    ========================================================================== */
 @media (max-width: 768px) {
     body {
         padding-bottom: 60px; /* Make space for bottom nav */
     }
     
     .floating-wa {
         bottom: 80px; /* Move WA button above the bottom nav */
     }
 
     .floating-widget {
         top: auto;
         bottom: 0;
         left: 0;
         right: 0;
         transform: none;
         width: 100%;
     }
 
     .widget-tabs {
         flex-direction: row;
         border-radius: 0;
         width: 100%;
         justify-content: space-between;
     }
 
     .widget-tab {
        flex: 1;
        width: auto;
        height: 60px;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.1);
        font-size: 9px;
        padding: 2px;
    }

    .widget-tab i {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .widget-tab:last-child {
        border-right: none;
    }

    .widget-panel {
        top: auto;
        bottom: 100%;
        left: 0;
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 15px 15px 0 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
        transform: translateY(20px);
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
 
     .widget-panel.open {
         left: 0;
         transform: translateY(0);
         opacity: 1;
         visibility: visible;
     }
 }