/* Public JDIH theme. Every selector is scoped; shared admin/vendor CSS stays intact. */
body.jdih-frontend {
  --jdih-navy: #142d49;
  --jdih-teal: #087f83;
  --jdih-teal-dark: #066568;
  --jdih-ink: #24384d;
  --jdih-muted: #5e7082;
  --jdih-border: #dce5ec;
  --jdih-soft: #f3f7fa;
  --jdih-radius: 16px;
  --jdih-shadow: 0 8px 28px rgba(20, 45, 73, .07);
  background: var(--jdih-soft);
  color: var(--jdih-ink);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}
.jdih-frontend :is(h1,h2,h3,h4,h5,h6) { color: var(--jdih-navy); font-family: 'Poppins', Arial, sans-serif; font-weight: 600; line-height: 1.4; }
.jdih-frontend a { color: var(--jdih-teal-dark); text-underline-offset: 4px; }
.jdih-frontend a:hover { color: var(--jdih-navy); }
.jdih-frontend :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #d49c35; outline-offset: 3px; }
.jdih-frontend .text-muted { color: var(--jdih-muted) !important; }
.jdih-frontend #topbar { background: var(--jdih-navy); color: #edf5fc; font-size: 12px; letter-spacing: .02em; }
.jdih-frontend #header { padding: 16px 0; border-bottom: 1px solid var(--jdih-border); box-shadow: 0 4px 20px #142d4910; }
.jdih-frontend #header .logo { flex-shrink: 0; }
.jdih-frontend #header .logo img { max-height: 48px; width: auto; }
.jdih-frontend .navbar a { font-size: 12px; font-weight: 600; color: var(--jdih-navy); padding: 12px 9px; }
.jdih-frontend .navbar a:hover, .jdih-frontend .navbar .active { color: var(--jdih-teal); }
.jdih-frontend .navbar .dropdown ul { border: 1px solid var(--jdih-border); border-radius: 12px; box-shadow: var(--jdih-shadow); padding: 8px; }
.jdih-frontend .navbar .dropdown ul a { border-radius: 7px; padding: 10px 12px; font-size: 13px; }
.jdih-frontend .navbar .dropdown ul a:hover { background: #edf7f7; }
.jdih-frontend .mobile-nav-toggle { color: var(--jdih-navy); }
/* Banner beranda: tinggi mengikuti rasio banner (±2,2:1); gambar tampil utuh, sisi kosong diisi blur gambar yang sama */
.jdih-frontend #hero { height: clamp(170px, 45vw, 640px); margin-top: 120px; background: var(--jdih-navy); border-bottom: 5px solid var(--jdih-teal); }
.jdih-frontend #hero .carousel-item { display: block; overflow: hidden; background: var(--jdih-navy); }
.jdih-frontend #hero .carousel-item::before { content: ""; position: absolute; inset: -40px; background: var(--hero-bg) center / cover no-repeat; filter: blur(24px) brightness(.75); transform: scale(1.05); }
.jdih-frontend #hero .hero-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.jdih-frontend #hero .carousel-indicators { z-index: 3; margin-bottom: 10px; }
.jdih-frontend #hero :is(.carousel-control-prev,.carousel-control-next) { z-index: 3; width: 8%; }
.jdih-frontend #hero :is(.carousel-control-next-icon,.carousel-control-prev-icon) { background: #142d49bb; border-radius: 50%; padding: 12px; width: 48px; height: 48px; font-size: 24px; }
.jdih-frontend #hero .hero-alerts { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 4; width: min(640px, calc(100% - 32px)); }
.jdih-frontend #hero .hero-alerts .alert { margin-bottom: 8px; box-shadow: var(--jdih-shadow); }
@media (max-width: 768px) {
  .jdih-frontend #hero :is(.carousel-control-next-icon,.carousel-control-prev-icon) { width: 36px; height: 36px; padding: 6px; font-size: 18px; }
  .jdih-frontend #hero .carousel-indicators { margin-bottom: 4px; }
}
.jdih-frontend #main { min-height: 50vh; }
.jdih-frontend #main section { padding: 56px 0; scroll-margin-top: 120px; }
.jdih-frontend #main section:nth-of-type(even) { background-color: #fff; }
.jdih-frontend .section-bg { background: #edf3f7; }
.jdih-frontend .section-title { padding-bottom: 30px; }
.jdih-frontend .section-title h2 { font-size: clamp(23px, 2.4vw, 32px); text-transform: none; letter-spacing: -.04em; padding-bottom: 20px; }
.jdih-frontend .section-title h2::after { width: 48px; height: 4px; border-radius: 4px; background: var(--jdih-teal); }
.jdih-frontend .section-title p { color: var(--jdih-muted); max-width: 720px; margin: 0 auto; line-height: 1.8; }
.jdih-frontend :is(.card,.box,.panel,.well) { border: 1px solid var(--jdih-border); border-radius: var(--jdih-radius); box-shadow: var(--jdih-shadow); background: #fff; }
.jdih-frontend .card { overflow: hidden; }
.jdih-frontend :is(.shadow-lg,.shadow-sm) { box-shadow: var(--jdih-shadow) !important; }
.jdih-frontend :is(.card-body,.box-body,.panel-body) { padding: 24px; }
.jdih-frontend :is(.card-header,.box-header,.panel-heading) { background: #f3f7fa; color: var(--jdih-navy); padding: 18px 24px; border-bottom: 1px solid var(--jdih-border); }
.jdih-frontend .card :is(h4,h5) { font-size: 17px; line-height: 1.6; }
.jdih-frontend .card .text-dark { color: var(--jdih-navy) !important; }
.jdih-frontend .card hr { border-color: var(--jdih-border); opacity: 1; }
.jdih-frontend :is(.menu-box,.icon-box) { border: 1px solid var(--jdih-border); border-radius: var(--jdih-radius); background: #fff; box-shadow: var(--jdih-shadow); padding: 24px; transition: border-color .2s, box-shadow .2s; }
.jdih-frontend .menu-box:hover { background: #edf7f7; color: var(--jdih-navy); border-color: #70b5b6; transform: none; }
.jdih-frontend .menu-box :is(.menu-icon,.menu-text), .jdih-frontend .menu-box:hover .menu-icon { color: var(--jdih-teal-dark); }
.jdih-frontend .menu-text { font-size: 14px; line-height: 1.5; }
.jdih-frontend .badge { font-size: 11px; line-height: 1.5; font-weight: 600; padding: 6px 10px; border-radius: 6px; white-space: normal; }
.jdih-frontend .bg-primary { background-color: var(--jdih-teal-dark) !important; color: #fff; }
.jdih-frontend .bg-warning { color: #3d3008 !important; }
.jdih-frontend :is(.btn,.appointment-btn,.btn-get-started,button.dt-button) { border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; line-height: 1.5; transition: background-color .2s, border-color .2s; box-shadow: none; }
.jdih-frontend :is(.btn-primary,.appointment-btn,.btn-get-started) { background: var(--jdih-teal); border-color: var(--jdih-teal); color: #fff; }
.jdih-frontend :is(.btn-primary,.appointment-btn,.btn-get-started):hover { background: var(--jdih-teal-dark); border-color: var(--jdih-teal-dark); color: #fff; }
.jdih-frontend .btn-outline-primary { color: var(--jdih-teal-dark); border-color: #81babb; background: #fff; }
.jdih-frontend .btn-outline-primary:hover { color: #fff; background: var(--jdih-teal-dark); }
.jdih-frontend .btn-sm { padding: 7px 12px; font-size: 12px; }
.jdih-frontend :is(.form-control,.form-select) { min-height: 46px; border: 1px solid #cbd7e1; border-radius: 8px; background-color: #fff; color: var(--jdih-ink); padding: 11px 14px; font-size: 14px; box-shadow: none; }
.jdih-frontend :is(.form-control,.form-select):focus { border-color: var(--jdih-teal); box-shadow: 0 0 0 3px #087f831a; }
.jdih-frontend textarea.form-control { height: auto; }
.jdih-frontend label { color: var(--jdih-navy); font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.jdih-frontend .form-group { margin-bottom: 18px; }
.jdih-frontend .input-group .form-control { min-width: 0; }
.jdih-frontend #pencarian { background: #edf3f7; border-bottom: 1px solid var(--jdih-border); }
.jdih-frontend #pencarian .nav-tabs { border-color: var(--jdih-border); gap: 6px; }
.jdih-frontend .nav-tabs .nav-link { border-radius: 8px 8px 0 0; color: var(--jdih-muted); }
.jdih-frontend .nav-tabs .nav-link.active { color: var(--jdih-teal-dark); border-top: 3px solid var(--jdih-teal); }
.jdih-frontend .table-responsive { border: 1px solid var(--jdih-border); border-radius: 12px; background: #fff; }
.jdih-frontend .table { color: var(--jdih-ink); margin-bottom: 0; font-size: 14px; --bs-table-striped-bg: #f6f9fb; }
.jdih-frontend .table > :not(caption) > * > * { padding: 15px 18px; border-color: var(--jdih-border); vertical-align: middle; }
.jdih-frontend .table thead th { background: var(--jdih-navy); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; border-bottom: 0; }
.jdih-frontend .table tbody tr:hover > td { background-color: #eef7f7; }
.jdih-frontend .table :is(th,td) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.jdih-frontend .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jdih-frontend .jdih-list-table { width: 100%; table-layout: auto; }
.jdih-frontend .jdih-list-table .jdih-col-compact { white-space: nowrap; }
.jdih-frontend .jdih-list-table .jdih-col-description { min-width: 280px; white-space: normal; }
.jdih-frontend .jdih-list-table .jdih-col-image { min-width: 120px; }
.jdih-frontend .jdih-list-table .jdih-col-image img { min-width: 80px; }
.jdih-frontend .table tbody tr[class*="table-"] { --bs-table-bg: #fff; --bs-table-accent-bg: transparent; --bs-table-color: var(--jdih-ink); }
.jdih-frontend .table tbody tr[class*="table-"] > td:first-child { background: #f3f7fa; width: 28%; color: var(--jdih-navy); }
.jdih-frontend .dataTables_wrapper { padding: 20px; }
.jdih-frontend .dataTables_wrapper :is(.dataTables_filter,.dataTables_length) { margin: 8px 0 18px; }
.jdih-frontend .dataTables_wrapper :is(input,select) { border: 1px solid #cbd7e1; border-radius: 6px; padding: 8px; background: #fff; }
.jdih-frontend .dataTables_wrapper .dataTables_filter input { max-width: 100%; }
.jdih-frontend .dataTables_wrapper .dataTables_info { color: var(--jdih-muted); font-size: 12px; padding-top: 20px; }
.jdih-frontend .dataTables_wrapper .dataTables_paginate { padding-top: 15px; }
.jdih-frontend .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 6px; font-size: 12px; }
.jdih-frontend .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--jdih-teal-dark); color: #fff !important; border-color: var(--jdih-teal-dark); }
.jdih-frontend .dt-buttons { margin: 0 16px 12px 0; }
.jdih-frontend button.dt-button { background: #fff; border: 1px solid #bbced8; color: var(--jdih-navy); }
.jdih-frontend button.dt-button:hover:not(.disabled) { background: #edf7f7; border-color: var(--jdih-teal); }
.jdih-frontend .pagination { gap: 4px; flex-wrap: wrap; margin-top: 24px; }
.jdih-frontend .pagination :is(a,span) { border-radius: 6px; color: var(--jdih-teal-dark); }
.jdih-frontend .pagination .active > :is(a,span) { background: var(--jdih-teal-dark); border-color: var(--jdih-teal-dark); color: white; }
.jdih-frontend .alert { border-radius: 10px; font-size: 14px; }
.jdih-frontend .alert-info { background: #eaf6f6; border-color: #c6e5e5; color: #185b61; }
.jdih-frontend #main img { max-width: 100%; }
.jdih-frontend #gallery img { border-radius: 12px; }
.jdih-frontend :is(.modal-content,.accordion-item) { border-radius: 12px; border-color: var(--jdih-border); }
.jdih-frontend .modal-header { padding: 20px 24px; background: #f3f7fa; }
.jdih-frontend .modal-body { padding: 24px; }
.jdih-frontend #footer { background: #10253c; color: #c4d3e1; border-top: 4px solid var(--jdih-teal); font-size: 13px; }
.jdih-frontend #footer .footer-top { background: var(--jdih-navy); padding: 56px 0 32px; }
.jdih-frontend #footer :is(h3,h4) { color: #fff; font-size: 17px; }
.jdih-frontend #footer :is(a,.footer-links ul a) { color: #d3e5ec; }
.jdih-frontend #footer a:hover { color: #fff; text-decoration: underline; }
.jdih-frontend #footer .social-links a { background: #25455e; color: #fff; border-radius: 8px; }
.jdih-frontend #footer .copyright { border-top: 1px solid #ffffff14; padding-top: 24px; }
.jdih-frontend .floating-buttons .btn { box-shadow: 0 4px 12px #142d4926; }

/* Dedicated public login, still using its existing form and validation. */
.jdih-frontend.login-page { min-height: 100vh; background: radial-gradient(ellipse at top left, #dcefed, transparent 65%), #eef3f8; padding: 48px 20px; }
.jdih-frontend .login-box { width: min(440px, 100%); margin: 0 auto; }
.jdih-frontend .login-logo { font-size: 23px; line-height: 1.5; margin-bottom: 24px; }
.jdih-frontend .login-logo img { margin-bottom: 18px; }
.jdih-frontend .login-box-body { border: 1px solid var(--jdih-border); border-radius: 20px; padding: 32px; box-shadow: var(--jdih-shadow); }
.jdih-frontend .has-feedback .form-control { padding-right: 40px; }
.jdih-frontend .form-control-feedback { top: 6px; }

@media (max-width: 1199px) and (min-width: 992px) {
  .jdih-frontend #header > .container { flex-wrap: wrap; gap: 10px; }
  .jdih-frontend #header .navbar { width: 100%; justify-content: center; }
  .jdih-frontend #hero { margin-top: 168px; }
  .jdih-frontend #header + section:not(#hero) { min-height: 170px; }
}
@media (max-width: 991px) {
  .jdih-frontend #header .logo img { max-height: 40px; }
  .jdih-frontend #hero { margin-top: 112px; height: clamp(160px, 45vw, 440px); }
  .jdih-frontend .navbar-mobile { background: #10253cee; }
  .jdih-frontend .navbar-mobile > ul { border-radius: 14px; padding: 16px; }
  .jdih-frontend .navbar-mobile a { font-size: 14px; padding: 13px 12px; }
  .jdih-frontend .navbar-mobile .mobile-nav-toggle { color: #fff; }
  .jdih-frontend #main section { padding: 38px 0; }
}
@media (max-width: 575px) {
  .jdih-frontend { font-size: 14px; }
  .jdih-frontend #header .logo img { max-width: 170px; object-fit: contain; }
  .jdih-frontend .appointment-btn { margin-left: 10px; padding: 8px 12px; }
  .jdih-frontend .section-title { padding-bottom: 22px; }
  .jdih-frontend :is(.card-body,.box-body,.panel-body) { padding: 18px; }
  .jdih-frontend .table > :not(caption) > * > * { padding: 12px; font-size: 12px; }
  .jdih-frontend .dataTables_wrapper { padding: 12px; }
  .jdih-frontend .dataTables_wrapper :is(.dataTables_filter,.dataTables_length,.dt-buttons) { float: none; text-align: left; }
  .jdih-frontend .dataTables_wrapper .dataTables_filter input { width: 165px; }
  .jdih-frontend .login-box-body { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .jdih-frontend *, .jdih-frontend *::before, .jdih-frontend *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .jdih-frontend [data-aos] { opacity: 1 !important; transform: none !important; }
}
@media print {
  body.jdih-frontend { background: #fff; color: #000; }
  .jdih-frontend :is(#topbar,#header,#hero,#footer,.floating-buttons,.dt-buttons,.dataTables_filter,.dataTables_length,.dataTables_paginate) { display: none !important; }
  .jdih-frontend :is(.card,.table-responsive) { box-shadow: none !important; overflow: visible; }
  .jdih-frontend #main section { padding: 12px 0; }
}