body {
    font-family: 'Poppins', sans-serif !important;
    background: #ffffff !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Hide old header from frontend-master layout - sama seperti cek-tagihan */
/* Gunakan selector yang lebih spesifik untuk memastikan tidak ter-override */
body > header.header-area,
header.header-area,
.header-area,
body header.header-area {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
}

/* Hide top-header specifically - hanya yang di dalam header-area */
.header-area > .top-header,
body > header.header-area > .top-header,
header.header-area > .top-header,
body header.header-area > .top-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    max-height: 0 !important;
}

/* Hide top-header container and row */
.header-area .top-header .container,
.header-area .top-header .row,
header.header-area .top-header .container,
header.header-area .top-header .row {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Hide semua child dari header-area */
body > header.header-area *,
header.header-area *,
.header-area *,
body header.header-area * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Ensure new header is visible */
header.shadow-md {
    display: block !important;
    visibility: visible !important;
}

/* Hide footer from frontend-master layout (footer yang langsung di bawah body, setelah @yield('content')) */
/* Footer dari layout memiliki style="margin-top: 50px;" */
body > footer.bg-gradient-to-r.from-mnet-orange.to-amber-500[style*="margin-top"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

header.shadow-md {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    /* Background color akan diatur oleh class Tailwind dari variabel $headerColor */
    /* Tidak perlu hardcode orange di sini */
}

/* Ensure navbar is visible */
header.shadow-md nav {
    display: block !important;
    visibility: visible !important;
}

header.shadow-md nav ul {
    display: flex !important;
    visibility: visible !important;
}

/* Ensure mobile menu has background */
/* Mobile menu background akan diatur oleh class Tailwind dari variabel $headerColor */
/* Tidak perlu hardcode orange di sini */

/* Ensure footer inside section content is visible (footer dari speedtest-custom.blade.php) */
/* Footer dari speedtest-custom berada di dalam @section('content'), jadi tidak langsung di bawah body */
/* Footer dari speedtest-custom tidak memiliki style="margin-top: 50px;" */
footer.bg-gradient-to-r.from-mnet-orange.to-amber-500:not([style*="margin-top"]),
footer.bg-gradient-to-r.from-blue-600.to-blue-700:not([style*="margin-top"]),
footer.bg-gradient-to-r.from-green-600.to-green-700:not([style*="margin-top"]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    /* Background color akan diatur oleh class Tailwind dari variabel $footerColor */
}

/* Ensure top bar desktop version - hidden on mobile, visible on desktop */
/* Desktop version: id="top-bar-desktop" */
#top-bar-desktop {
    display: none !important;
    visibility: hidden !important;
}

/* Desktop: show (min-width: 768px) */
@media (min-width: 768px) {
    #top-bar-desktop {
        display: block !important;
        visibility: visible !important;
    }
}

/* Ensure top bar mobile version - visible on mobile, hidden on desktop */
/* Mobile version: id="top-bar-mobile" */
#top-bar-mobile {
    display: block !important;
    visibility: visible !important;
}

/* Desktop: hidden (min-width: 768px) */
@media (min-width: 768px) {
    #top-bar-mobile {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Fallback - ensure background color for both versions */
.bg-gradient-to-r.from-blue-800,
div.bg-gradient-to-r.from-blue-800.to-blue-900 {
    background: linear-gradient(to right, #1e40af, #1e3a8a) !important;
    background-color: #1e40af !important;
}

/* Speedometer Styles */
.speedometer-container {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 0 auto;
}

.speedometer-needle {
    transform-origin: 150px 150px;
    transition: transform 0.3s ease-out;
}

/* Graph Styles */
.graph-container {
    height: 60px;
    position: relative;
    margin-top: 10px;
}

.graph-bar {
    background: #6B46C1;
    width: 4px;
    margin-right: 2px;
    display: inline-block;
    vertical-align: bottom;
}

/* Dropdown menu styles - ensure Tailwind group-hover works correctly */
.nav-dropdown {
    position: relative !important;
}

/* Pastikan li dengan nav-dropdown memiliki position relative */
li.nav-dropdown,
li.nav-dropdown.group,
li.nav-dropdown.flex.items-center {
    position: relative !important;
}

/* Ensure dropdown menu has proper styling - muncul di bawah, bukan inline */
.nav-dropdown .absolute.bg-white.rounded-lg.shadow-lg,
.nav-dropdown.group .absolute.bg-white.rounded-lg.shadow-lg,
li.nav-dropdown .absolute.bg-white.rounded-lg.shadow-lg,
li.nav-dropdown.group .absolute.bg-white.rounded-lg.shadow-lg,
li.nav-dropdown .absolute.left-0.mt-2 {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    margin-top: 0.5rem !important;
    width: 12rem !important;
    background-color: white !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    z-index: 50 !important;
    display: block !important;
    /* Pastikan tidak inline */
    float: none !important;
    clear: both !important;
    /* Pastikan tidak muncul di samping */
    white-space: normal !important;
}

/* Ensure group-hover works - Tailwind will handle opacity and visibility */
/* But we add fallback for browsers that don't support Tailwind properly */
.group:hover .absolute.bg-white.rounded-lg.shadow-lg.opacity-0.invisible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* More specific selectors for nav-dropdown */
.nav-dropdown.group:hover .absolute.bg-white.rounded-lg.shadow-lg,
.nav-dropdown.group.relative:hover .absolute.bg-white.rounded-lg.shadow-lg,
li.nav-dropdown.group:hover .absolute.bg-white.rounded-lg.shadow-lg,
li.nav-dropdown.group.relative:hover .absolute.bg-white.rounded-lg.shadow-lg {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Dropdown menu text color - ensure black */
.nav-dropdown-menu,
.nav-dropdown-menu ul,
.nav-dropdown-menu li,
.nav-dropdown-menu a,
.nav-dropdown-menu a:link,
.nav-dropdown-menu a:visited,
.absolute.bg-white a,
.group .absolute.bg-white a,
.group .absolute.bg-white ul,
.group .absolute.bg-white li {
    color: #000000 !important; /* black */
}

/* Pastikan ul di dalam dropdown tampil vertikal (stacked), bukan horizontal */
.absolute.bg-white ul,
.group .absolute.bg-white ul,
.nav-dropdown .absolute.bg-white ul,
.absolute.bg-white.rounded-lg.shadow-lg ul,
.group .absolute.bg-white.rounded-lg.shadow-lg ul,
.nav-dropdown.group .absolute.bg-white ul,
li.nav-dropdown .absolute.bg-white ul {
    display: block !important;
    list-style: none !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
}

/* Pastikan li di dalam dropdown tampil vertikal (stacked), bukan horizontal */
.absolute.bg-white ul li,
.group .absolute.bg-white ul li,
.nav-dropdown .absolute.bg-white ul li,
.absolute.bg-white.rounded-lg.shadow-lg ul li,
.group .absolute.bg-white.rounded-lg.shadow-lg ul li,
.nav-dropdown.group .absolute.bg-white ul li,
li.nav-dropdown .absolute.bg-white ul li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    flex: none !important;
}

/* Pastikan a di dalam dropdown tampil sebagai block */
.absolute.bg-white ul li a,
.group .absolute.bg-white ul li a,
.nav-dropdown .absolute.bg-white ul li a,
.absolute.bg-white.rounded-lg.shadow-lg ul li a,
.group .absolute.bg-white.rounded-lg.shadow-lg ul li a,
.nav-dropdown.group .absolute.bg-white ul li a,
li.nav-dropdown .absolute.bg-white ul li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus,
.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li a:focus,
.absolute.bg-white a:hover,
.group .absolute.bg-white a:hover {
    background-color: #fffbeb !important; /* amber-50 */
    color: #f97316 !important; /* mnet-orange / orange */
}

/* Dropdown separator line */
.absolute.bg-white ul li.border-t,
.group .absolute.bg-white ul li.border-t {
    border-top: 1px solid #e5e7eb !important; /* gray-200 */
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    height: 0 !important;
    padding: 0 !important;
}

/* Highlight first item in dropdown (active state) */
.absolute.bg-white ul li:first-child a.text-mnet-orange,
.group .absolute.bg-white ul li:first-child a.text-mnet-orange,
.absolute.bg-white ul li:first-child a.bg-amber-50 {
    color: #f97316 !important; /* mnet-orange */
    background-color: #fffbeb !important; /* amber-50 */
    font-weight: 500 !important;
}

/* Remove underline effect for Masuk button */
nav a[href*="loginClient"]::after,
nav li a[href*="loginClient"]::after,
#mobile-menu a[href*="loginClient"]::after {
    display: none !important;
    content: none !important;
}

/* Tailwind CSS utilities */
@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-mnet-orange to-amber-400;
  }
  .animate-underline {
    @apply relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-white after:transition-all after:duration-300 hover:after:w-full;
  }
  /* Remove underline effect for Masuk button */
  nav a[href*="loginClient"]::after,
  #mobile-menu a[href*="loginClient"]::after {
    display: none !important;
    content: none !important;
  }
}