/* Apply fonts to body and all elements */
body {
    font-family: 'Poppins', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Hide old header from frontend-master layout */
.header-area {
    display: none !important;
}

/* Hide footer from frontend-master layout - hanya yang 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;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
}

/* Ensure new header is visible */
header.shadow-md {
    display: block !important;
}
.frame {
    height: 65px;
    width: 160px;
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.img-aja {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0.25rem;
    background-color: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
    z-index: 10 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.special-card {
    background-color: #f9fafb !important;
}

/* Update card styling untuk background putih */
.cek-tagihan-page .card.bg-primary {
    background-color: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb;
}

.cek-tagihan-page .card-header {
    /* background-color will be set inline based on template */
    color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
}

.cek-tagihan-page .card-body input.form-control {
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    color: #374151 !important;
}

.cek-tagihan-page .card-body input.form-control::placeholder {
    color: #9ca3af !important;
}

.cek-tagihan-page .btn {
    /* background-color will be set inline based on template */
    color: #ffffff !important;
    border: none;
}

.cek-tagihan-page .btn:hover {
    /* background-color will be set inline based on template via onmouseover */
}

.ribbon {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 93px;
    height: 93px;
    text-align: right;
}

.ribbon span {
    font-size: 0.7rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 32px;
    transform: rotate(45deg);
    width: 125px;
    display: block;
    background: #79a70a;
    background: linear-gradient(#9bc90d 0%, #79a70a 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 17px;
    right: -29px;
}

.ribbon span::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #79A70A;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
}

.ribbon span::after {
    content: '';
    position: absolute;
    right: 0%;
    top: 100%;
    z-index: -1;
    border-right: 3px solid #79A70A;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #79A70A;
}

.red span {
    background: linear-gradient(#f70505 0%, #8f0808 100%);
}

.red span::before {
    border-left-color: #8f0808;
    border-top-color: #8f0808;
}

.red span::after {
    border-right-color: #8f0808;
    border-top-color: #8f0808;
}

/* Background halaman putih seperti template-2 */
.cek-tagihan-page {
    background: #ffffff !important;
    background-color: #ffffff !important;
    min-height: 100vh;
    padding: 80px 0 50px 0;
    position: relative;
    margin: 0;
    width: 100%;
}

/* Dropdown menu styles */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu,
.group .absolute.bg-white.rounded-lg.shadow-lg {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.5rem;
    width: 12rem;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 50;
}

.nav-dropdown:hover .nav-dropdown-menu,
.group:hover .group-hover\:opacity-100,
.group:hover .group-hover\:visible,
.group:hover .absolute.bg-white.rounded-lg.shadow-lg.opacity-0.invisible {
    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,
.group .absolute.bg-white a,
.group .absolute.bg-white ul,
.group .absolute.bg-white li {
    color: #000000 !important; /* black */
}

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

/* Override any Tailwind classes */
.nav-dropdown-menu a.hover\:text-mnet-orange:hover {
    color: #f97316 !important;
}

/* Override body background hanya untuk halaman ini */
body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-attachment: fixed;
}

/* Remove any gradient background */
html {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Remove gradient from any section */
section {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Update card styling untuk kontras dengan background putih */
.cek-tagihan-page .card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Update text color in card body */
.cek-tagihan-page .card-body {
    color: #374151 !important;
}

.cek-tagihan-page .card-body center,
.cek-tagihan-page .card-body h5,
.cek-tagihan-page .card-body p,
.cek-tagihan-page .card-body b,
.cek-tagihan-page .card-body td,
.cek-tagihan-page .card-body th,
.cek-tagihan-page .card-body small,
.cek-tagihan-page .card-body table {
    color: #374151 !important;
}

/* Ensure table text is visible */
.cek-tagihan-page .table td,
.cek-tagihan-page .table th {
    color: #374151 !important;
}

/* Accordion text */
.cek-tagihan-page .accordion-button {
    color: #374151 !important;
}

.cek-tagihan-page .accordion-body {
    color: #374151 !important;
}

/* Fix untuk logo payment method di accordion - pastikan tidak hilang saat collapse */
.cek-tagihan-page .accordion-collapse {
    overflow: visible !important;
}

.cek-tagihan-page .accordion-collapse.collapse {
    overflow: visible !important;
}

.cek-tagihan-page .accordion-collapse.collapsing {
    overflow: visible !important;
}

.cek-tagihan-page .accordion-collapse.show {
    overflow: visible !important;
}

.cek-tagihan-page .accordion-body {
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cek-tagihan-page .accordion-body .card,
.cek-tagihan-page .accordion-body .card-body {
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

/* Pastikan row tetap menggunakan flexbox untuk grid */
.cek-tagihan-page .accordion-body .row {
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

/* Pastikan col-md-3 tetap menggunakan grid Bootstrap */
.cek-tagihan-page .accordion-body .col-md-3 {
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

@media (min-width: 768px) {
    .cek-tagihan-page .accordion-body .col-md-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* Pastikan card di accordion tidak hilang saat diklik */
.cek-tagihan-page .accordion-body .small-box,
.cek-tagihan-page .accordion-body .small-box:active,
.cek-tagihan-page .accordion-body .small-box:focus,
.cek-tagihan-page .accordion-body .small-box:hover,
.cek-tagihan-page .accordion-body a[href*="bayar"] .small-box,
.cek-tagihan-page .accordion-body a[href*="bayar"]:active .small-box,
.cek-tagihan-page .accordion-body a[href*="bayar"]:focus .small-box,
.cek-tagihan-page .accordion-body a[href*="bayar"]:hover .small-box {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    transform: translateY(-2px) !important;
}

/* Pastikan tidak ada transition yang menyembunyikan card */
.cek-tagihan-page .small-box,
.cek-tagihan-page .small-box * {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Pastikan frame dan img tetap terlihat tapi tidak menutupi text */
.cek-tagihan-page .frame {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    margin-bottom: 10px !important;
}

.cek-tagihan-page .img-aja {
    z-index: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* Pastikan seluruh area payment method bisa diklik */
.cek-tagihan-page .small-box {
    position: relative !important;
    z-index: 1 !important;
    cursor: pointer !important;
    min-height: 120px !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.cek-tagihan-page .small-box:hover,
.cek-tagihan-page .small-box:active,
.cek-tagihan-page .small-box:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Pastikan card tidak hilang saat link diklik */
.cek-tagihan-page a[href*="bayar"]:active .small-box,
.cek-tagihan-page a[href*="bayar"]:focus .small-box,
.cek-tagihan-page a[href*="bayar"]:hover .small-box {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    transform: translateY(-2px) !important;
}

/* Pastikan frame dan img tetap terlihat saat diklik */
.cek-tagihan-page a[href*="bayar"]:active .frame,
.cek-tagihan-page a[href*="bayar"]:focus .frame,
.cek-tagihan-page a[href*="bayar"]:hover .frame,
.cek-tagihan-page a[href*="bayar"]:active .img-aja,
.cek-tagihan-page a[href*="bayar"]:focus .img-aja,
.cek-tagihan-page a[href*="bayar"]:hover .img-aja {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.cek-tagihan-page .small-box:hover .small-box-footer {
    visibility: visible !important;
    opacity: 1 !important;
}

.cek-tagihan-page .small-box:hover .small-box-footer b,
.cek-tagihan-page .small-box:hover .small-box-footer i {
    visibility: visible !important;
    opacity: 1 !important;
}

.cek-tagihan-page .small-box-footer {
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #2563eb !important;
    margin-top: 10px !important;
    padding: 10px !important;
    background-color: transparent !important;
}

.cek-tagihan-page .small-box-footer b {
    color: #2563eb !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: inline !important;
    font-weight: bold !important;
    position: relative !important;
    z-index: 101 !important;
}

.cek-tagihan-page .small-box-footer i {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline !important;
    margin-left: 5px !important;
    position: relative !important;
    z-index: 101 !important;
}

/* Pastikan text tidak hilang saat click atau hover */
.cek-tagihan-page a[href*="bayar"]:active .small-box-footer,
.cek-tagihan-page a[href*="bayar"]:focus .small-box-footer,
.cek-tagihan-page a[href*="bayar"]:hover .small-box-footer {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.cek-tagihan-page a[href*="bayar"]:active .small-box-footer b,
.cek-tagihan-page a[href*="bayar"]:focus .small-box-footer b,
.cek-tagihan-page a[href*="bayar"]:hover .small-box-footer b,
.cek-tagihan-page a[href*="bayar"]:active .small-box-footer i,
.cek-tagihan-page a[href*="bayar"]:focus .small-box-footer i,
.cek-tagihan-page a[href*="bayar"]:hover .small-box-footer i {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline !important;
}

/* Pastikan link wrapper bisa diklik dan text tetap terlihat */
.cek-tagihan-page a[href*="bayar"] {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cek-tagihan-page a[href*="bayar"]:active,
.cek-tagihan-page a[href*="bayar"]:focus,
.cek-tagihan-page a[href*="bayar"]:hover {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.cek-tagihan-page a[href*="bayar"]:hover .small-box-footer {
    color: #1d4ed8 !important;
}

.cek-tagihan-page a[href*="bayar"]:hover .small-box-footer b {
    color: #1d4ed8 !important;
}

/* Pastikan text tidak tertutup oleh elemen lain */
.cek-tagihan-page .small-box center {
    position: relative !important;
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Pastikan col-md-3 tidak menyembunyikan card dan tetap menggunakan grid */
.cek-tagihan-page .col-md-3 {
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: relative !important;
}

.cek-tagihan-page .col-md-3 a {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Pastikan row menggunakan flexbox untuk grid horizontal */
.cek-tagihan-page .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Ensure card inside accordion doesn't hide images */
.cek-tagihan-page .accordion-body .card {
    overflow: visible !important;
    position: relative !important;
}

.cek-tagihan-page .accordion-body .card-body {
    overflow: visible !important;
    position: relative !important;
}

.cek-tagihan-page .accordion-body .small-box {
    overflow: visible !important;
    position: relative !important;
}

/* Fix untuk row dan col di dalam accordion */
.cek-tagihan-page .accordion-body .row {
    overflow: visible !important;
}

.cek-tagihan-page .accordion-body [class*="col-"] {
    overflow: visible !important;
}

/* Ensure navbar text is white */
header.shadow-md nav a,
header.shadow-md nav li a,
header nav a,
header nav li a {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
    position: relative !important;
    text-decoration: none !important;
}

header.shadow-md nav a::after,
header.shadow-md nav li a::after,
header nav a::after,
header nav li a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #fef3c7 !important; /* amber-100 */
    transition: width 0.3s ease !important;
}

header.shadow-md nav a:hover,
header.shadow-md nav li a:hover,
header nav a:hover,
header nav li a:hover {
    color: #fef3c7 !important; /* amber-100 */
}

header.shadow-md nav a:hover::after,
header.shadow-md nav li a:hover::after,
header nav a:hover::after,
header nav li a:hover::after {
    width: 100% !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;
}

/* Mobile menu hover */
#mobile-menu a {
    position: relative !important;
    text-decoration: none !important;
}

#mobile-menu a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #ffffff !important;
    transition: width 0.3s ease !important;
}

#mobile-menu a:hover {
    color: #fef3c7 !important;
}

#mobile-menu a:hover::after {
    width: 100% !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;
  }
}