/* =====================================================
   KLINIKINDONESIA.COM
   KONSULTASI DOKTER ONLINE
   PREMIUM RESPONSIVE EDITION
   Scoped CSS + Dark Mode + Tablet Friendly
===================================================== */


/* =====================================================
   1. MAIN SECTION
===================================================== */

.konsultasi-main {
    width: 100%;
    padding: 35px 0 50px;
    box-sizing: border-box;
}

.konsultasi-main > .container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.konsultasi-main .judul-konsultasi {
    text-align: center;
    font-size: 25px;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.4;
}

.konsultasi-main .deskripsi-konsultasi {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 25px;
    font-size: 14px;
    line-height: 1.8;
    color: #64748b;
}


/* =====================================================
   2. FORM CARD
===================================================== */

.konsultasi-main .konsultasi-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 25px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5eaf0;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
}

.konsultasi-main .konsultasi-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 15px;
    color: #123b56;
    line-height: 1.4;
}


/* =====================================================
   3. BADGE GRATIS
===================================================== */

.konsultasi-main .badge-gratis {
    display: inline-block;
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 13px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.konsultasi-main .konsultasi-info {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 18px;
    line-height: 1.6;
}


/* =====================================================
   4. CATATAN KONSULTASI
===================================================== */

.konsultasi-main .catatan-konsultasi {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.7;
    color: #1e40af;
    margin-bottom: 20px;
}


/* =====================================================
   5. FORM ELEMENT
===================================================== */

.konsultasi-main #formKonsultasi label:not(.persetujuan-konsultasi) {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 7px;
    color: #334155;
}

.konsultasi-main #formKonsultasi input:not([type="checkbox"]),
.konsultasi-main #formKonsultasi textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    margin: 0 0 17px;
    border-radius: 11px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #1e293b;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.konsultasi-main #formKonsultasi input:not([type="checkbox"]):focus,
.konsultasi-main #formKonsultasi textarea:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
}

.konsultasi-main #formKonsultasi textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.konsultasi-main #formKonsultasi input::placeholder,
.konsultasi-main #formKonsultasi textarea::placeholder {
    color: #94a3b8;
    opacity: 1;
}


/* =====================================================
   6. AUTOCOMPLETE SUGGESTIONS
===================================================== */

.konsultasi-main .suggestions {
    position: relative;
    margin-top: -13px;
    margin-bottom: 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
}

.konsultasi-main .suggestions div {
    padding: 11px 13px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}

.konsultasi-main .suggestions div:last-child {
    border-bottom: none;
}

.konsultasi-main .suggestions div:hover,
.konsultasi-main .suggestions div.active {
    background: #dcfce7;
    color: #15803d;
}


/* =====================================================
   7. PILIHAN KELUHAN
===================================================== */

.konsultasi-main .pilihan-keluhan {
    margin-bottom: 20px;
}

.konsultasi-main .pilihan-keluhan p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 10px;
}

.konsultasi-main .keluhan-btn {
    display: inline-block;
    width: auto;
    padding: 8px 13px;
    margin: 3px 4px 3px 0;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.konsultasi-main .keluhan-btn:hover,
.konsultasi-main .keluhan-btn.active {
    background: #dcfce7;
    border-color: #22c55e;
    color: #15803d;
}


/* =====================================================
   8. PERINGATAN DARURAT
===================================================== */

.konsultasi-main .peringatan-darurat {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    padding: 13px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 18px;
}


/* =====================================================
   9. PERSETUJUAN
===================================================== */

.konsultasi-main #formKonsultasi .persetujuan-konsultasi {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 15px 0 20px;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
    color: #64748b;
    cursor: pointer;
}

.konsultasi-main .persetujuan-konsultasi input[type="checkbox"] {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: #16a34a;
    cursor: pointer;
}

.konsultasi-main .persetujuan-konsultasi span {
    flex: 1;
}


/* =====================================================
   10. WHATSAPP BUTTON
===================================================== */

.konsultasi-main #formKonsultasi .btn-konsultasi-wa {
    display: block;
    width: 100%;
    padding: 15px;
    margin: 0;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #25d366, #16a34a);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(37, 211, 102, .2);
    transition: transform .2s, box-shadow .2s;
}

.konsultasi-main #formKonsultasi .btn-konsultasi-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, .3);
}

.konsultasi-main #formKonsultasi .btn-konsultasi-wa:active {
    transform: scale(.98);
}

.konsultasi-main #formKonsultasi .btn-konsultasi-wa:focus-visible,
.konsultasi-main .keluhan-btn:focus-visible {
    outline: 3px solid rgba(14, 165, 233, .4);
    outline-offset: 3px;
}


/* =====================================================
   11. INFO HARGA
===================================================== */

.konsultasi-main .info-harga {
    text-align: center;
    margin: 20px 0 10px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.7;
}


/* =====================================================
   12. FOOTER FORM
===================================================== */

.konsultasi-main .footer-konsultasi {
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 15px;
}


/* =====================================================
   13. POPUP PROMO
   Khusus #promoPopup agar tidak mengganggu popup lain
===================================================== */

#promoPopup.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(2, 15, 30, .65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#promoPopup .popup-box {
    position: relative;
    width: 100%;
    max-width: 360px;
    padding: 30px 23px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    animation: konsultasiFade .3s ease;
}

#promoPopup .popup-badge {
    display: inline-block;
    padding: 7px 13px;
    margin-bottom: 12px;
    background: #dcfce7;
    color: #15803d;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

#promoPopup .popup-box h3 {
    font-size: 21px;
    color: #123b56;
    margin: 0 0 12px;
    line-height: 1.4;
}

#promoPopup .popup-box p {
    font-size: 13px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 12px;
}

#promoPopup .popup-close {
    position: absolute;
    top: 10px;
    right: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    font-family: inherit;
    font-size: 22px;
    cursor: pointer;
}

#promoPopup .popup-action {
    display: block;
    width: 100%;
    padding: 13px;
    margin: 12px 0 0;
    background: #25d366;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

#promoPopup .popup-close:focus-visible,
#promoPopup .popup-action:focus-visible {
    outline: 3px solid rgba(14, 165, 233, .4);
    outline-offset: 3px;
}


/* =====================================================
   14. ANIMATION
===================================================== */

@keyframes konsultasiFade {
    from {
        opacity: 0;
        transform: translateY(15px) scale(.96);
    }

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


/* =====================================================
   15. DARK MODE
===================================================== */

body.dark .konsultasi-main .konsultasi-card,
html.dark .konsultasi-main .konsultasi-card {
    background: #172536;
    border-color: #334155;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
}

body.dark .konsultasi-main .judul-konsultasi,
html.dark .konsultasi-main .judul-konsultasi {
    color: #e2e8f0;
}

body.dark .konsultasi-main .deskripsi-konsultasi,
html.dark .konsultasi-main .deskripsi-konsultasi,
body.dark .konsultasi-main .konsultasi-info,
html.dark .konsultasi-main .konsultasi-info,
body.dark .konsultasi-main .info-harga,
html.dark .konsultasi-main .info-harga {
    color: #a8b6c8;
}

body.dark .konsultasi-main .konsultasi-title,
html.dark .konsultasi-main .konsultasi-title {
    color: #e0f2fe;
}

body.dark .konsultasi-main #formKonsultasi label:not(.persetujuan-konsultasi),
html.dark .konsultasi-main #formKonsultasi label:not(.persetujuan-konsultasi) {
    color: #dbeafe;
}

body.dark .konsultasi-main #formKonsultasi input:not([type="checkbox"]),
body.dark .konsultasi-main #formKonsultasi textarea,
html.dark .konsultasi-main #formKonsultasi input:not([type="checkbox"]),
html.dark .konsultasi-main #formKonsultasi textarea {
    background: #0f1c2b;
    border-color: #475569;
    color: #e2e8f0;
}

body.dark .konsultasi-main #formKonsultasi input::placeholder,
body.dark .konsultasi-main #formKonsultasi textarea::placeholder,
html.dark .konsultasi-main #formKonsultasi input::placeholder,
html.dark .konsultasi-main #formKonsultasi textarea::placeholder {
    color: #94a3b8;
}

body.dark .konsultasi-main .persetujuan-konsultasi,
html.dark .konsultasi-main .persetujuan-konsultasi {
    color: #a8b6c8;
}

body.dark .konsultasi-main .pilihan-keluhan p,
html.dark .konsultasi-main .pilihan-keluhan p {
    color: #a8b6c8;
}

body.dark .konsultasi-main .keluhan-btn,
html.dark .konsultasi-main .keluhan-btn {
    background: #26374a;
    border-color: #475569;
    color: #dbeafe;
}

body.dark .konsultasi-main .keluhan-btn:hover,
body.dark .konsultasi-main .keluhan-btn.active,
html.dark .konsultasi-main .keluhan-btn:hover,
html.dark .konsultasi-main .keluhan-btn.active {
    background: #14532d;
    border-color: #22c55e;
    color: #bbf7d0;
}

body.dark .konsultasi-main .suggestions,
html.dark .konsultasi-main .suggestions {
    background: #172536;
    border-color: #475569;
}

body.dark .konsultasi-main .suggestions div,
html.dark .konsultasi-main .suggestions div {
    color: #dbeafe;
    border-bottom-color: #334155;
}

body.dark .konsultasi-main .suggestions div:hover,
body.dark .konsultasi-main .suggestions div.active,
html.dark .konsultasi-main .suggestions div:hover,
html.dark .konsultasi-main .suggestions div.active {
    background: #14532d;
    color: #bbf7d0;
}

body.dark .konsultasi-main .catatan-konsultasi,
html.dark .konsultasi-main .catatan-konsultasi {
    background: #172f4b;
    border-left-color: #60a5fa;
    color: #bfdbfe;
}

body.dark .konsultasi-main .peringatan-darurat,
html.dark .konsultasi-main .peringatan-darurat {
    background: #3b2418;
    border-color: #9a3412;
    color: #fed7aa;
}

body.dark .konsultasi-main .footer-konsultasi,
html.dark .konsultasi-main .footer-konsultasi {
    color: #94a3b8;
}

body.dark #promoPopup .popup-box,
html.dark #promoPopup .popup-box {
    background: #172536;
}

body.dark #promoPopup .popup-box h3,
html.dark #promoPopup .popup-box h3 {
    color: #e0f2fe;
}

body.dark #promoPopup .popup-box p,
html.dark #promoPopup .popup-box p {
    color: #a8b6c8;
}

body.dark #promoPopup .popup-close,
html.dark #promoPopup .popup-close {
    background: #26374a;
    color: #dbeafe;
}


/* =====================================================
   16. RESPONSIVE TABLET
===================================================== */

@media (max-width: 768px) {

    .konsultasi-main {
        padding: 25px 0 35px;
    }

    .konsultasi-main .judul-konsultasi {
        font-size: 21px;
    }

    .konsultasi-main .konsultasi-card {
        padding: 20px;
        border-radius: 16px;
    }

}


/* =====================================================
   17. RESPONSIVE MOBILE
===================================================== */

@media (max-width: 480px) {

    .konsultasi-main > .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .konsultasi-main .konsultasi-card {
        padding: 17px;
    }

    .konsultasi-main .konsultasi-title {
        font-size: 20px;
    }

    .konsultasi-main .judul-konsultasi {
        font-size: 19px;
    }

    .konsultasi-main #formKonsultasi .btn-konsultasi-wa {
        padding: 14px;
    }

    #promoPopup .popup-box {
        padding: 27px 19px;
    }

}


/* =====================================================
   18. REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .konsultasi-main *,
    #promoPopup *,
    .konsultasi-main *::before,
    .konsultasi-main *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}