/*
 * KIZO dark navy UI.
 * Presentation-only overrides inspired by a compact game top-up storefront.
 * No route, form, balance or purchase logic is changed here.
 */
:root {
    --ng-bg: #030712;
    --ng-bg-soft: #050b16;
    --ng-surface: #07101f;
    --ng-surface-2: #0b1628;
    --ng-surface-3: #111d31;
    --ng-border: #20304a;
    --ng-border-soft: rgba(148, 163, 184, .16);
    --ng-blue: #3b82f6;
    --ng-blue-bright: #60a5fa;
    --ng-cyan: #38bdf8;
    --ng-text: #f8fafc;
    --ng-muted: #91a1b7;
    --ng-success: #22c55e;
    --ng-danger: #fb4966;
    --ng-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

html,
html body {
    background: var(--ng-bg) !important;
    color: var(--ng-text) !important;
}

html body::before {
    background:
        radial-gradient(circle at 15% 0, rgba(59, 130, 246, .08), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(14, 165, 233, .05), transparent 34%),
        var(--ng-bg) !important;
    opacity: 1 !important;
}

html body main,
html body .main,
html body .main-content,
html body .content-wrapper,
html body .page-wrapper,
html body .kizo-catalog-page,
html body .service-request-page,
html body .game-coin-page,
html body .profile-page,
html body .deposit-page,
html body .cart-page {
    background:
        radial-gradient(circle at 10% 0, rgba(59, 130, 246, .06), transparent 26%),
        var(--ng-bg) !important;
    color: var(--ng-text) !important;
}

html body a {
    color: var(--ng-blue-bright);
}

html body a:hover {
    color: #93c5fd;
}

/* Header */
html body .header-custom {
    background: rgba(3, 7, 18, .96) !important;
    border-bottom: 1px solid var(--ng-border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .24) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html body .header-logo img {
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .45));
}

html body .header-nav a {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
    border-radius: 8px !important;
}

html body .header-nav a:hover,
html body .header-nav a.active {
    background: rgba(59, 130, 246, .1) !important;
    color: var(--ng-text) !important;
    -webkit-text-fill-color: var(--ng-text) !important;
}

html body .header-nav a.active::after {
    background: var(--ng-blue) !important;
    box-shadow: 0 0 16px rgba(59, 130, 246, .55) !important;
}

html body .header-search-btn,
html body .header-cart-icon,
html body .header-notification-bell,
html body .header-user-summary,
html body .btn-glass,
html body .menu-toggle {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    color: var(--ng-text) !important;
    box-shadow: none !important;
}

html body .header-user-menu,
html body .search-panel {
    background: rgba(7, 16, 31, .98) !important;
    border: 1px solid var(--ng-border) !important;
    color: var(--ng-text) !important;
    box-shadow: var(--ng-shadow) !important;
}

html body .header-user-menu a,
html body .header-user-menu button {
    color: #d8e2f0 !important;
}

html body .header-user-menu a:hover,
html body .header-user-menu button:hover {
    background: rgba(59, 130, 246, .1) !important;
    color: #fff !important;
}

html body .header-user-menu__title {
    color: var(--ng-blue-bright) !important;
}

html body .titan-notice-bar {
    min-height: 34px !important;
    background: linear-gradient(90deg, #0b1d3b, #0c2855, #0b1d3b) !important;
    border-bottom: 1px solid rgba(96, 165, 250, .22) !important;
    color: #dbeafe !important;
    box-shadow: none !important;
}

html body .titan-notice-bar span {
    color: #dbeafe !important;
    -webkit-text-fill-color: #dbeafe !important;
}

/* Universal storefront surfaces */
html body .card,
html body .glass-card,
html body .kizo-catalog-panel,
html body .kizo-catalog-card,
html body .category__item,
html body .account-card,
html body .random-card,
html body .random-account-card,
html body .service-card,
html body .wheel-card,
html body .lucky-card,
html body .blog-card,
html body .review-card,
html body .post-card,
html body .profile-content,
html body .profile-sidebar,
html body .account-content,
html body .account-sidebar,
html body .service-request-intro,
html body .service-request-card,
html body .service-request-history,
html body .game-coin-hero,
html body .game-coin-card,
html body .game-coin-side > div,
html body .game-coin-history {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    color: var(--ng-text) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .24) !important;
}

html body .kizo-catalog-panel__head,
html body .card-header,
html body .account-header,
html body .service-card__header {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
}

html body .kizo-catalog-title,
html body .kizo-catalog-card__title,
html body .category__title,
html body .account-card h1,
html body .account-card h2,
html body .account-card h3,
html body .random-card h1,
html body .random-card h2,
html body .random-card h3,
html body .service-card h1,
html body .service-card h2,
html body .service-card h3,
html body .service-request-page h1,
html body .service-request-page h2,
html body .service-request-page h3,
html body .game-coin-page h1,
html body .game-coin-page h2,
html body .game-coin-page h3 {
    background: none !important;
    color: var(--ng-text) !important;
    -webkit-text-fill-color: var(--ng-text) !important;
}

html body .kizo-catalog-card__meta,
html body .kizo-catalog-empty,
html body .category__desc,
html body .service-card__desc,
html body .service-request-page p,
html body .service-request-page small,
html body .game-coin-page p,
html body .game-coin-page small {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

html body .kizo-catalog-card:hover,
html body .category__item:hover,
html body .account-card:hover,
html body .random-card:hover,
html body .service-card:hover {
    border-color: rgba(96, 165, 250, .58) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .34), 0 0 0 1px rgba(59, 130, 246, .1) !important;
    transform: translateY(-3px);
}

html body .kizo-catalog-more,
html body .kizo-catalog-badge,
html body .btn-primary,
html body .btn-glass-primary,
html body .category__action,
html body .service-card__btn,
html body .service-request-submit,
html body .game-coin-submit {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border: 1px solid #60a5fa !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .24) !important;
}

/* Forms and tables */
html body input:not([type="checkbox"]):not([type="radio"]),
html body textarea,
html body select,
html body .form-control,
html body .form-select,
html body .search-input {
    background: #050b16 !important;
    border: 1px solid var(--ng-border) !important;
    color: var(--ng-text) !important;
    -webkit-text-fill-color: var(--ng-text) !important;
    box-shadow: none !important;
}

html body input::placeholder,
html body textarea::placeholder {
    color: #66758a !important;
    -webkit-text-fill-color: #66758a !important;
}

html body input:focus,
html body textarea:focus,
html body select:focus,
html body .form-control:focus,
html body .form-select:focus {
    border-color: var(--ng-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14) !important;
}

html body option {
    background: var(--ng-surface) !important;
    color: var(--ng-text) !important;
}

html body table,
html body .table,
html body .game-coin-table {
    color: #dce6f4 !important;
}

html body table thead th,
html body .table thead th,
html body .game-coin-table th {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
    color: #f8fafc !important;
}

html body table tbody td,
html body .table tbody td,
html body .game-coin-table td {
    background: var(--ng-surface) !important;
    border-color: var(--ng-border-soft) !important;
    color: #dce6f4 !important;
}

/* Added service/coin modules */
html body .service-request-balance,
html body .game-coin-rate {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    border: 1px solid #60a5fa !important;
}

html body .service-request-total,
html body .game-coin-summary,
html body .service-request-empty,
html body .game-coin-login {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
    color: var(--ng-text) !important;
}

html body .game-coin-quick button {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
    color: #dbeafe !important;
}

html body .game-coin-quick button.is-active,
html body .game-coin-quick button:hover {
    background: var(--ng-blue) !important;
    border-color: var(--ng-blue-bright) !important;
    color: #fff !important;
}

/* Modals, alerts, pagination */
html body .modal-content,
html body .service-modal__content,
html body .note-modal__content,
html body .alert,
html body .service-request-alert,
html body .game-coin-alert {
    background: var(--ng-surface) !important;
    border-color: var(--ng-border) !important;
    color: var(--ng-text) !important;
}

html body .pagination .page-link,
html body .pagination .pagination-item {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

html body .pagination .page-item.active .page-link,
html body .pagination .pagination-item.active {
    background: var(--ng-blue) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Footer */
html body .footer {
    background: #020611 !important;
    border-top: 1px solid var(--ng-border) !important;
    color: var(--ng-muted) !important;
}

html body .footer__cta,
html body .footer__content--compact {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    box-shadow: none !important;
}

html body .footer__title,
html body .footer__cta h3 {
    color: var(--ng-text) !important;
    -webkit-text-fill-color: var(--ng-text) !important;
}

html body .footer__desc,
html body .footer__cta p,
html body .footer__link,
html body .footer__copyright {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

/* Keep headings readable against the navy storefront. */
html body main h1,
html body main h2,
html body main h3,
html body main h4,
html body main h5,
html body main h6,
html body main .section-title,
html body main .section-title__text,
html body main .card-title {
    background: none !important;
    color: var(--ng-text) !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--ng-text) !important;
}

html body main .section-subtitle,
html body main .section-description,
html body main .card-description,
html body main .text-muted {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

/* Support widget */
html body .support-widget__toggle,
html body .support-chat-button,
html body .floating-chat-button {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    box-shadow: 0 14px 32px rgba(37, 99, 235, .3) !important;
}

/* Mobile bottom navigation */
@media (max-width: 768px) {
    html body .menu-mobile {
        background: rgba(3, 7, 18, .97) !important;
        border-top: 1px solid var(--ng-border) !important;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, .3) !important;
    }

    html body .menu-mobile__link,
    html body .menu-mobile__link i,
    html body .menu-mobile__link span {
        color: #91a1b7 !important;
        -webkit-text-fill-color: #91a1b7 !important;
    }

    html body .menu-mobile__link.active,
    html body .menu-mobile__link.active i,
    html body .menu-mobile__link.active span,
    html body .menu-mobile__link:hover {
        color: var(--ng-blue-bright) !important;
        -webkit-text-fill-color: var(--ng-blue-bright) !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html body .kizo-catalog-card,
    html body .category__item,
    html body .account-card,
    html body .random-card,
    html body .service-card {
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
    }
}

/* ==========================================================
   V2 READABILITY HOTFIX
   White typography on navy surfaces, with page-specific rules
   strong enough to override the historical white skin safely.
   ========================================================== */

/* Desktop header: keep navigation and search from overlapping. */
@media (min-width: 992px) {
    html body header.header-custom {
        gap: 12px !important;
    }

    html body header.header-custom .header-nav {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        gap: clamp(10px, 1vw, 17px) !important;
        overflow: hidden !important;
    }

    html body header.header-custom .header-nav a {
        flex: 0 0 auto !important;
        font-size: 13px !important;
    }

    html body header.header-custom .header-actions {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    html body header.header-custom .header-utils-group {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body header.header-custom .header-search-btn {
        width: clamp(210px, 16vw, 275px) !important;
        max-width: 275px !important;
        flex: 0 0 auto !important;
    }
}

html body header.header-custom .header-search-btn {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
    color: var(--ng-text) !important;
    -webkit-text-fill-color: var(--ng-text) !important;
}

html body header.header-custom .header-search-btn::after {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

html body header.header-custom .header-search-btn i {
    color: var(--ng-blue-bright) !important;
    -webkit-text-fill-color: var(--ng-blue-bright) !important;
}

/* Home catalog and section headings. */
html body .feature-section,
html body .kizo-catalog-section,
html body .bento-section,
html body .account-section,
html body .random-page,
html body .service-page,
html body .wheel-page,
html body .reviews-section {
    background: var(--ng-bg) !important;
    color: var(--ng-text) !important;
}

html body .feature-section .section-header,
html body .feature-section .kizo-catalog-panel,
html body .kizo-catalog-section .kizo-catalog-panel {
    background: var(--ng-surface) !important;
    border-color: var(--ng-border) !important;
    color: var(--ng-text) !important;
}

html body .feature-section .section-title,
html body .feature-section .section-title *,
html body .feature-section .kizo-catalog-title,
html body .kizo-catalog-section .kizo-catalog-title,
html body .kizo-catalog-section .kizo-catalog-title *,
html body .feature-section .feature-card__title,
html body .kizo-catalog-section .kizo-catalog-card__title {
    background: none !important;
    color: #fff !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
}

html body .feature-section .section-link,
html body .feature-section .kizo-catalog-more,
html body .kizo-catalog-section .kizo-catalog-more {
    display: inline-flex !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 7px 12px !important;
    border: 1px solid #2f68bf !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: #132747 !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

html body .feature-section .section-link:hover,
html body .feature-section .kizo-catalog-more:hover,
html body .kizo-catalog-section .kizo-catalog-more:hover {
    border-color: #5d96f5 !important;
    color: #fff !important;
    background: #2467d1 !important;
    -webkit-text-fill-color: #fff !important;
}

html body .feature-section .section-link::selection,
html body .feature-section .kizo-catalog-more::selection,
html body .kizo-catalog-section .kizo-catalog-more::selection {
    color: #fff !important;
    background: transparent !important;
}

html body .kizo-catalog-section .kizo-catalog-card,
html body .feature-section .feature-card {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
    color: var(--ng-text) !important;
}

html body .kizo-catalog-section .kizo-catalog-card__meta,
html body .kizo-catalog-section .kizo-catalog-card__meta *,
html body .feature-section .feature-card__stats,
html body .feature-section .feature-card__stat {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

/* Discord/server cards are part of the same navy storefront. */
html body .titan-social-server {
    background: var(--ng-bg) !important;
}

html body .titan-social-server .titan-social-server__box {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    color: var(--ng-text) !important;
}

html body .titan-social-server .titan-social-server__discord,
html body .titan-social-server .titan-social-server__discord > span:last-child {
    color: #a5b4fc !important;
    -webkit-text-fill-color: #a5b4fc !important;
}

html body .titan-social-server .titan-copy-card {
    background: var(--ng-surface-2) !important;
    border: 1px solid var(--ng-border) !important;
    color: var(--ng-text) !important;
    box-shadow: none !important;
}

html body .titan-social-server .titan-copy-card__label {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

html body .titan-social-server .titan-copy-card strong {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .titan-social-server .titan-copy-card em {
    color: var(--ng-blue-bright) !important;
    -webkit-text-fill-color: var(--ng-blue-bright) !important;
}

html body .live-ticker .live-ticker__item,
html body .live-ticker .live-ticker__item span,
html body .live-ticker .live-ticker__user,
html body .live-ticker .live-ticker__amount,
html body .live-ticker .live-ticker__time {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Provider logos were dark artwork on a dark card. */
html body .hero-modern .hero-modern__sidebar .kizo-provider-card span {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
}

html body .hero-modern .hero-modern__sidebar .kizo-provider-card img {
    opacity: .92 !important;
    filter: grayscale(1) brightness(0) invert(1) !important;
}

/* Login/register: use one complete navy treatment instead of white-on-white. */
html body .auth-modal-page {
    background:
        radial-gradient(circle at 50% 0, rgba(59, 130, 246, .09), transparent 36%),
        var(--ng-bg) !important;
}

html body .auth-modal-page .auth-card.register-container {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    color: var(--ng-text) !important;
    box-shadow: var(--ng-shadow) !important;
}

html body .auth-modal-page .auth-card__title.register-title,
html body .auth-modal-page .auth-card__title.register-title * {
    background: none !important;
    color: #fff !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
}

html body .auth-modal-page .auth-card__close {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

html body .auth-modal-page .auth-form__input.form-input,
html body .auth-modal-page .auth-form__input.form-input:focus {
    background: var(--ng-bg-soft) !important;
    border: 1px solid var(--ng-border) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
}

html body .auth-modal-page .auth-form__input.form-input:focus {
    border-color: var(--ng-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14) !important;
}

html body .auth-modal-page .auth-form__input.form-input::placeholder {
    color: #718096 !important;
    -webkit-text-fill-color: #718096 !important;
}

html body .auth-modal-page .auth-form__eye {
    color: var(--ng-muted) !important;
}

html body .auth-modal-page .auth-card__primary-btn.register-btn {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border: 1px solid #60a5fa !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .auth-modal-page .auth-card__secondary-btn {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
    color: #dbeafe !important;
    -webkit-text-fill-color: #dbeafe !important;
}

html body .auth-modal-page .auth-card__secondary-btn:hover {
    background: rgba(59, 130, 246, .12) !important;
    border-color: var(--ng-blue) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .auth-modal-page .auth-social-login .social-login-text {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

/* Profile/account pages: navy cards and white typography. */
html body .profile-section {
    background:
        radial-gradient(circle at 12% 0, rgba(59, 130, 246, .07), transparent 30%),
        var(--ng-bg) !important;
}

html body .profile-section .profile-container,
html body .profile-section .profile-content,
html body .profile-section .profile-main,
html body .profile-section .profile-info-card,
html body .profile-section .info-header,
html body .profile-section .info-content {
    background: var(--ng-surface) !important;
    border-color: var(--ng-border) !important;
    color: var(--ng-text) !important;
    box-shadow: none !important;
}

html body .profile-section .profile-container {
    box-shadow: var(--ng-shadow) !important;
}

html body .profile-section .profile-sidebar,
html body .profile-section .sidebar-header {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
    color: var(--ng-text) !important;
}

html body .profile-section .sidebar-link,
html body .profile-section .sidebar-link span,
html body .profile-section .sidebar-link small {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

html body .profile-section .sidebar-item {
    border-color: var(--ng-border) !important;
}

html body .profile-section .sidebar-item.active .sidebar-link,
html body .profile-section .sidebar-item.active .sidebar-link span,
html body .profile-section .sidebar-item.active .sidebar-link i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .profile-section .balance-label,
html body .profile-section .balance-label *,
html body .profile-section .info-title,
html body .profile-section .info-title *,
html body .profile-section .info-header h1,
html body .profile-section .info-header h2,
html body .profile-section .info-header h3,
html body .profile-section .info-header h4,
html body .profile-section .info-header h5,
html body .profile-section .info-header span,
html body .profile-section .info-header i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .profile-section .info-row {
    background: var(--ng-surface-2) !important;
    border-color: var(--ng-border) !important;
    color: var(--ng-text) !important;
}

html body .profile-section .info-row:hover {
    background: var(--ng-surface-3) !important;
    border-color: var(--ng-blue) !important;
    box-shadow: none !important;
}

html body .profile-section .info-label,
html body .profile-section .info-label *,
html body .profile-section .info-value,
html body .profile-section .info-value *,
html body .profile-section .info-content p,
html body .profile-section .info-content span,
html body .profile-section .info-content div,
html body .profile-section .info-content strong,
html body .profile-section .info-content b,
html body .profile-section .info-content small,
html body .profile-section label,
html body .profile-section .form-label,
html body .profile-section .text-dark {
    color: var(--ng-text) !important;
    -webkit-text-fill-color: var(--ng-text) !important;
}

html body .profile-section .text-muted,
html body .profile-section .text-secondary {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

html body .profile-section .profile-main input,
html body .profile-section .profile-main select,
html body .profile-section .profile-main textarea,
html body .profile-section .profile-main .form-control,
html body .profile-section .profile-main .form-select {
    background: var(--ng-bg-soft) !important;
    border-color: var(--ng-border) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Notification cards: never allow black copy on an unread dark card. */
html body .profile-section .notification-list {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .profile-section .notification-card,
html body .profile-section .notification-card.unread-bg {
    background: var(--ng-surface-2) !important;
    border: 1px solid var(--ng-border) !important;
    border-left: 4px solid var(--ng-blue) !important;
    color: var(--ng-text) !important;
    box-shadow: none !important;
}

html body .profile-section .notification-card:hover {
    background: var(--ng-surface-3) !important;
    border-color: var(--ng-blue) !important;
}

html body .profile-section .notification-card .notification-body h5,
html body .profile-section .notification-card .notification-body p,
html body .profile-section .notification-card .text-dark {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .profile-section .notification-card small,
html body .profile-section .notification-card .text-muted {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

/* Blog/list/detail pages. */
html body .posts-section {
    background: var(--ng-bg) !important;
    color: var(--ng-text) !important;
}

html body .posts-section .posts-header,
html body .posts-section .posts-main,
html body .posts-section .posts-list,
html body .posts-section .posts-sidebar {
    background: transparent !important;
    color: var(--ng-text) !important;
}

html body .posts-section .posts-title,
html body .posts-section .posts-title *,
html body .posts-section .post-card__title,
html body .posts-section .sidebar-widget__title,
html body .posts-section .sidebar-post__title,
html body .posts-section .posts-empty p {
    background: none !important;
    color: #fff !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
}

html body .posts-section .posts-subtitle,
html body .posts-section .post-card__excerpt,
html body .posts-section .post-card__meta,
html body .posts-section .sidebar-widget__empty,
html body .posts-section .sidebar-post__date,
html body .posts-section .posts-empty {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

html body .posts-section .post-card,
html body .posts-section .posts-empty,
html body .posts-section .posts-sidebar .sidebar-widget,
html body .post-detail .post-detail__card,
html body .post-detail .post-comments {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    color: var(--ng-text) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
}

html body .post-detail .post-detail__title,
html body .post-detail .post-detail__content,
html body .post-detail .post-detail__content h1,
html body .post-detail .post-detail__content h2,
html body .post-detail .post-detail__content h3,
html body .post-detail .post-comments__title,
html body .post-detail .comment-item__username,
html body .post-detail .comment-item__text {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .post-detail .post-detail__meta,
html body .post-detail .comment-item__time,
html body .post-detail .comments-empty {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
}

html body .post-detail .comment-item {
    background: var(--ng-surface-2) !important;
    border: 1px solid var(--ng-border) !important;
}

html body .post-detail .comment-form__input {
    background: var(--ng-bg-soft) !important;
    border-color: var(--ng-border) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

@media (max-width: 991px) {
    html body header.header-custom .header-search-btn {
        width: 42px !important;
        max-width: 42px !important;
    }
}

/* ==========================================================
   V3 HOME QUICK SERVICES
   Keep Game Top-up and Service Order in the Top Deposit area.
   These are route launchers only; checkout logic stays on the
   existing feature pages.
   ========================================================== */
html body .hero-modern__sidebar .kizo-home-quick-services {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 10px !important;
    background:
        linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(8, 18, 36, .98)) !important;
    border: 1px solid var(--ng-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
}

html body .hero-modern__sidebar form#cardDepositForm,
html body .hero-modern__sidebar form#cardDepositForm .form-group-modern,
html body .hero-modern__sidebar form#cardDepositForm .kizo-provider-group,
html body .hero-modern__sidebar form#cardDepositForm .kizo-card-fields-two,
html body .hero-modern__sidebar form#cardDepositForm .kizo-card-captcha-row {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 12px !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 10px !important;
    overflow: hidden !important;
    background: var(--ng-surface-2) !important;
    border: 1px solid var(--ng-border) !important;
    border-radius: 10px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 3px !important;
    background: var(--ng-blue) !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service--order::before {
    background: #22c55e !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(96, 165, 250, .72) !important;
    box-shadow: 0 9px 20px rgba(37, 99, 235, .16) !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service--order:hover {
    border-color: rgba(74, 222, 128, .66) !important;
    box-shadow: 0 9px 20px rgba(34, 197, 94, .14) !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(59, 130, 246, .15) !important;
    border: 1px solid rgba(96, 165, 250, .28) !important;
    color: #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
    font-size: 16px !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service--order .kizo-home-quick-service__icon {
    background: rgba(34, 197, 94, .13) !important;
    border-color: rgba(74, 222, 128, .25) !important;
    color: #4ade80 !important;
    -webkit-text-fill-color: #4ade80 !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service__content {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service__content strong {
    overflow: hidden !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service__content small {
    margin-top: 3px !important;
    overflow: hidden !important;
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .hero-modern__sidebar .kizo-home-quick-service__arrow {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-size: 11px !important;
}

@media (max-width: 420px) {
    html body .hero-modern__sidebar .kizo-home-quick-services {
        gap: 8px !important;
        padding: 8px !important;
    }

    html body .hero-modern__sidebar .kizo-home-quick-service {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        min-height: 58px !important;
        padding: 8px !important;
    }

    html body .hero-modern__sidebar .kizo-home-quick-service__icon {
        width: 34px !important;
        height: 34px !important;
    }

    html body .hero-modern__sidebar .kizo-home-quick-service__arrow {
        display: none !important;
    }
}

/* ==========================================================
   V7 STOREFRONT READABILITY
   Scope every override to the account/service pages so legacy
   modules and all purchase/service actions remain unchanged.
   ========================================================== */
html body main .kizo-category-page,
html body main .kizo-category-page .account-section {
    background: var(--ng-bg) !important;
    color: var(--ng-text) !important;
}

html body main .kizo-category-page .kizo-category-heading {
    background: transparent !important;
    color: var(--ng-text) !important;
}

html body main .kizo-category-page .kizo-category-heading__label {
    color: var(--ng-blue-bright) !important;
    -webkit-text-fill-color: var(--ng-blue-bright) !important;
}

html body main .kizo-category-page .kizo-category-heading__title {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body main .kizo-category-page .account-filter,
html body main .kizo-category-page .kizo-category-description {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    border-radius: 12px !important;
    color: var(--ng-text) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important;
}

html body main .kizo-category-page .account-filter__label,
html body main .kizo-category-page .kizo-category-description,
html body main .kizo-category-page .kizo-category-description * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body main .kizo-category-page .account-filter__input,
html body main .kizo-category-page .account-filter__input--select {
    background-color: var(--ng-bg-soft) !important;
    border: 1px solid var(--ng-border) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body main .kizo-category-page .account-filter__input::placeholder {
    color: var(--ng-muted) !important;
    -webkit-text-fill-color: var(--ng-muted) !important;
    opacity: 1 !important;
}

html body main .kizo-category-page .account-filter__input option {
    background: var(--ng-surface) !important;
    color: #fff !important;
}

html body main .kizo-category-page .account-filter__input:focus {
    background-color: var(--ng-bg-soft) !important;
    border-color: var(--ng-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .16) !important;
}

html body main .kizo-category-page .account-filter__button {
    border-radius: 7px !important;
}

html body main .kizo-category-page .account-filter__button--primary {
    background: var(--ng-blue) !important;
    border-color: var(--ng-blue) !important;
}

html body main .kizo-category-page .account-filter__button--outline {
    background: var(--ng-surface-3) !important;
    border-color: var(--ng-border) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body main .kizo-category-page .account-filter__button--bulk {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #07111f !important;
    -webkit-text-fill-color: #07111f !important;
}

html body main .kizo-category-page .account-card {
    background: var(--ng-surface) !important;
    border: 1px solid var(--ng-border) !important;
    border-radius: 10px !important;
    color: var(--ng-text) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2) !important;
}

html body main .kizo-category-page .account-card .account-header,
html body main .kizo-category-page .account-card .account-info,
html body main .kizo-category-page .account-card .account-row,
html body main .kizo-category-page .account-card .info-item,
html body main .kizo-category-page .account-card .account-description {
    background: var(--ng-surface) !important;
    border-color: var(--ng-border) !important;
    color: #fff !important;
}

html body main .kizo-category-page .account-card .account-id,
html body main .kizo-category-page .account-card .info-item,
html body main .kizo-category-page .account-card .info-item span,
html body main .kizo-category-page .account-card .info-value,
html body main .kizo-category-page .account-card .account-description,
html body main .kizo-category-page .account-card .account-description * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body main .kizo-category-page .account-card .account-price {
    color: #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
}

html body main .kizo-category-page .account-card .account-buy-now {
    background: var(--ng-blue) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Service pages use the same navy storefront palette. */
html body main .kizo-service-page {
    background: var(--ng-bg) !important;
    color: var(--ng-text) !important;
}

html body main .kizo-service-page .kizo-service-note,
html body main .kizo-service-page .kizo-package-card,
html body main .kizo-service-page .kizo-empty-service {
    background: var(--ng-surface) !important;
    border-color: var(--ng-border) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2) !important;
}

html body main .kizo-service-page .kizo-service-note *,
html body main .kizo-service-page .kizo-package-card__title,
html body main .kizo-service-page .kizo-empty-service {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body main .kizo-service-page .kizo-package-card__img {
    background: var(--ng-surface-2) !important;
}

html body main .kizo-service-page .kizo-package-card__badge {
    background: var(--ng-surface-2) !important;
    border: 1px solid var(--ng-border) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body main .kizo-service-page .kizo-package-card__price {
    color: #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
}

html body main .kizo-service-page .kizo-package-card__btn {
    background: var(--ng-blue) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Account detail intentionally keeps its white commerce card. Force dark
   text inside those light surfaces to prevent white-on-white headings. */
html body main .account-sale-page,
html body main .account-sale-page .account-sale-card,
html body main .account-sale-page .same-price-box,
html body main .account-sale-page .same-price-card {
    color: #111827 !important;
}

html body main .account-sale-page .same-price-box h2,
html body main .account-sale-page .same-price-card h3,
html body main .account-sale-page .same-price-card p,
html body main .account-sale-page .same-price-card span {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html body main .account-sale-page .same-price-card strong {
    color: #ef2028 !important;
    -webkit-text-fill-color: #ef2028 !important;
}

html body main .account-sale-page .same-price-card del {
    display: inline-block !important;
    margin-right: 7px !important;
    color: #8b95a5 !important;
    -webkit-text-fill-color: #8b95a5 !important;
    font-size: 11px !important;
}

html body main .account-sale-page .same-price-card .same-price-value,
html body main .account-sale-page .same-price-card .account-price {
    color: #ef2028 !important;
    -webkit-text-fill-color: #ef2028 !important;
}

html body main .kizo-category-page .account-card .account-price del {
    display: block !important;
    margin-bottom: 2px !important;
    color: #8fa0b8 !important;
    -webkit-text-fill-color: #8fa0b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

html body main .cart-page .cart-card-price del,
html body main .cart-container .cart-card-price del {
    display: block !important;
    color: #8fa0b8 !important;
    -webkit-text-fill-color: #8fa0b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

@media (max-width: 768px) {
    html body main .kizo-category-page .account-filter,
    html body main .kizo-category-page .kizo-category-description {
        border-radius: 9px !important;
    }
}

/* v8 auth/search contrast hotfix.
   Auth inputs intentionally stay light inside the navy card, therefore their
   text must be dark. The autofill rules prevent browsers from restoring pale
   text on the light autofill background. */
html body .auth-modal-page .auth-form__input.form-input,
html body .auth-modal-page .auth-form__input.form-input:focus {
    background: #eaf2ff !important;
    border: 1px solid #8eb8f3 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important;
}

html body .auth-modal-page .auth-form__input.form-input::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}

html body .auth-modal-page .auth-form__input.form-input:-webkit-autofill,
html body .auth-modal-page .auth-form__input.form-input:-webkit-autofill:hover,
html body .auth-modal-page .auth-form__input.form-input:-webkit-autofill:focus,
html body .auth-modal-page .auth-form__input.form-input:-webkit-autofill:active {
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important;
    -webkit-box-shadow: 0 0 0 1000px #eaf2ff inset !important;
    box-shadow: 0 0 0 1000px #eaf2ff inset !important;
    transition: background-color 9999s ease-out 0s !important;
}

/* Search overlay follows the navy storefront instead of inheriting the old
   white/red skin. This also fixes the invisible empty-state heading. */
html body .search-panel .search-input-wrapper {
    background: transparent !important;
    border: 0 !important;
    color: var(--ng-text) !important;
}

html body .search-panel .search-input {
    background: #050b16 !important;
    border: 1px solid #27405f !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    caret-color: #60a5fa !important;
}

html body .search-panel .search-input::placeholder {
    color: #7f8da3 !important;
    -webkit-text-fill-color: #7f8da3 !important;
    opacity: 1 !important;
}

html body .search-panel .search-filter-btn {
    background: #0d192d !important;
    border: 1px solid #2b405d !important;
    color: #dbeafe !important;
    -webkit-text-fill-color: #dbeafe !important;
    box-shadow: none !important;
}

html body .search-panel .search-filter-btn:hover,
html body .search-panel .search-filter-btn.active {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-color: #60a5fa !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .search-panel .search-placeholder,
html body .search-panel .search-placeholder h3,
html body .search-panel .search-placeholder p,
html body .search-panel .search-no-results,
html body .search-panel .search-no-results p {
    color: #dbeafe !important;
    -webkit-text-fill-color: #dbeafe !important;
}

html body .search-panel .search-placeholder i,
html body .search-panel .search-no-results i,
html body .search-panel .search-input-icon {
    color: #38bdf8 !important;
    -webkit-text-fill-color: #38bdf8 !important;
    opacity: 1 !important;
}

/* v9 desktop header fit: preserve every configured label instead of clipping
   "Trang chủ" or "Mini Football" when the search/auth area is present. */
@media (min-width: 1200px) {
    html body header.header-custom {
        width: min(1480px, calc(100% - 24px)) !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
        gap: 10px !important;
    }

    html body header.header-custom .header-logo img {
        width: auto !important;
        max-width: 132px !important;
        height: 40px !important;
        object-fit: contain !important;
    }

    html body header.header-custom .header-nav {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: clamp(7px, .7vw, 12px) !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }

    html body header.header-custom .header-nav a {
        min-width: max-content !important;
        padding: 8px 2px !important;
        overflow: visible !important;
        font-size: clamp(11px, .78vw, 13px) !important;
        letter-spacing: 0 !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    html body header.header-custom .header-actions {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        gap: 7px !important;
    }

    html body header.header-custom .header-utils-group {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    html body header.header-custom .header-search-btn {
        width: clamp(170px, 14vw, 230px) !important;
        max-width: 230px !important;
    }

    html body header.header-custom .header-auth-buttons {
        gap: 7px !important;
    }

    html body header.header-custom .header-auth-buttons .btn-glass {
        padding-right: 11px !important;
        padding-left: 11px !important;
        font-size: 11px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    html body header.header-custom {
        width: calc(100% - 16px) !important;
        padding: 8px !important;
        gap: 6px !important;
    }

    html body header.header-custom .header-logo img {
        max-width: 104px !important;
        height: 36px !important;
    }

    html body header.header-custom .header-nav {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 5px !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }

    html body header.header-custom .header-nav a {
        min-width: max-content !important;
        padding: 7px 1px !important;
        font-size: 10.5px !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }

    html body header.header-custom .header-actions {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        gap: 5px !important;
    }

    html body header.header-custom .header-utils-group {
        flex: 0 1 145px !important;
        min-width: 90px !important;
    }

    html body header.header-custom .header-search-btn {
        width: 145px !important;
        max-width: 145px !important;
    }

    html body header.header-custom .header-auth-buttons {
        gap: 4px !important;
    }

    html body header.header-custom .header-auth-buttons .btn-glass {
        padding: 8px !important;
        font-size: 9.5px !important;
    }
}

html body .search-panel .search-result-item {
    background: #0d192d !important;
    border-color: #2b405d !important;
    color: #f8fafc !important;
}

html body .search-panel .search-result-name,
html body .search-panel .search-result-category,
html body .search-panel .search-result-excerpt {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}