/**
 * InfinitoHost visual layer for the WHMCS Twenty-One child theme.
 *
 * Presentation only: this file deliberately avoids structural overrides and
 * does not hide or alter WHMCS forms, validation, security controls, or scripts.
 */

:root {
    --infinito-bg: #080808;
    --infinito-bg-elevated: #11110f;
    --infinito-bg-soft: #191712;
    --infinito-text: #fffdf8;
    --infinito-text-muted: #b8b2a6;
    --infinito-gold: #e7a132;
    --infinito-gold-hover: #f0bf63;
    --infinito-border: #c87920;
    --infinito-border-muted: #4b3420;
    --infinito-focus: rgba(255, 195, 94, 0.38);
    --infinito-danger: #ffb4ab;
    --infinito-danger-bg: #351411;
    --infinito-success: #b8e6c2;
    --infinito-success-bg: #102a18;
    --infinito-info: #f2d18a;
    --infinito-info-bg: #292010;
    --infinito-radius: 0.5rem;
    --infinito-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.3);
}

html,
body {
    background: var(--infinito-bg);
    color: var(--infinito-text);
}

/* Twenty-One assigns a light background through this utility class on portal home. */
body.primary-bg-color {
    background-color: var(--infinito-bg) !important;
}

#frmDomainHomepage {
    background-color: var(--infinito-bg) !important;
    color: var(--infinito-text);
}

section#main-body,
.main-content,
#order-standard_cart {
    background-color: var(--infinito-bg) !important;
    color: var(--infinito-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4 {
    color: var(--infinito-text);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

body a {
    color: var(--infinito-gold);
    text-decoration-color: rgba(217, 164, 65, 0.55);
    text-underline-offset: 0.18em;
}

body a:hover,
body a:focus {
    color: var(--infinito-gold-hover);
}

/* Header and navigation */
.header,
.topbar,
.navbar,
.main-navbar-wrapper,
section#header,
section#main-menu {
    background-color: var(--infinito-bg-elevated) !important;
    color: var(--infinito-text);
    border-color: var(--infinito-border-muted) !important;
}

/* Twenty-One's header rules use a more specific header.header selector. */
header#header.header,
header#header.header .navbar,
header#header.header .main-navbar-wrapper {
    background-color: var(--infinito-bg-elevated) !important;
    color: var(--infinito-text);
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.header .nav-link,
.topbar a,
.main-navbar-wrapper .nav-link {
    color: var(--infinito-text) !important;
}

header#header.header .navbar a.navbar-brand,
header#header.header .navbar-nav > .nav-item > .nav-link {
    color: var(--infinito-text) !important;
}

/* Twenty-One uses plain links and a separate default button in the header. */
#mainNavbar .navbar-nav > li > a {
    color: var(--infinito-text) !important;
}

#mainNavbar .navbar-nav > li > a:hover,
#mainNavbar .navbar-nav > li > a:focus {
    color: var(--infinito-gold-hover) !important;
}

header#header .input-group.search .btn-default {
    background-color: var(--infinito-bg-soft) !important;
    border-color: var(--infinito-border-muted) !important;
    color: var(--infinito-gold-hover) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .active > .nav-link,
.header .nav-link:hover,
.header .nav-link:focus,
.topbar a:hover,
.topbar a:focus,
.main-navbar-wrapper .nav-link:hover,
.main-navbar-wrapper .nav-link:focus {
    color: var(--infinito-gold-hover) !important;
}

header#header.header .navbar a.navbar-brand:hover,
header#header.header .navbar a.navbar-brand:focus,
header#header.header .navbar-nav > .nav-item > .nav-link:hover,
header#header.header .navbar-nav > .nav-item > .nav-link:focus,
header#header.header .navbar-nav > .nav-item.active > .nav-link {
    color: var(--infinito-gold-hover) !important;
}

.navbar-toggler {
    border-color: var(--infinito-border) !important;
}

.dropdown-menu {
    background-color: var(--infinito-bg-elevated);
    border: 1px solid var(--infinito-border-muted);
    box-shadow: var(--infinito-shadow);
}

.dropdown-item {
    color: var(--infinito-text);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--infinito-bg-soft);
    color: var(--infinito-gold-hover);
}

.breadcrumb {
    background-color: var(--infinito-bg-soft);
    color: var(--infinito-text-muted);
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--infinito-text-muted);
}

/* Twenty-One uses plain anchors in its main navigation and a light breadcrumb wrapper. */
#mainNavbar > .navbar-nav > li > a {
    color: var(--infinito-text) !important;
}

#mainNavbar > .navbar-nav > li > a:hover,
#mainNavbar > .navbar-nav > li > a:focus {
    color: var(--infinito-gold-hover) !important;
}

.master-breadcrumb {
    background-color: var(--infinito-bg-soft) !important;
}

.master-breadcrumb .breadcrumb {
    background-color: var(--infinito-bg-soft) !important;
}

/* Standard Cart's domain choices otherwise retain light cards and dim labels. */
#order-standard_cart .domain-selection-options .option {
    background-color: var(--infinito-bg-elevated) !important;
    border-color: var(--infinito-border-muted) !important;
    color: var(--infinito-text) !important;
}

#order-standard_cart .domain-selection-options .option label {
    color: var(--infinito-text) !important;
}

/* Portal home only: override Twenty-One's bg-white utility behind its heading. */
#frmDomainHomepage > .home-domain-search.bg-white {
    background-color: var(--infinito-bg) !important;
    color: var(--infinito-text);
}

#frmDomainHomepage > .home-domain-search > .container h2 {
    color: var(--infinito-text) !important;
}

/* The domain search wrapper and its option row have their own white surfaces. */
#frmDomainHomepage .input-group-wrapper {
    background-color: var(--infinito-bg-elevated) !important;
    border-color: var(--infinito-border-muted) !important;
    color: var(--infinito-text) !important;
}

#frmDomainHomepage .input-group-wrapper > .input-group,
#frmDomainHomepage .input-group-wrapper > .input-group > label {
    color: var(--infinito-text-muted) !important;
}

#frmDomainHomepage .input-group-wrapper .multiselect.dropdown-toggle.btn-default {
    background-color: var(--infinito-bg-soft) !important;
    border-color: var(--infinito-border-muted) !important;
    color: var(--infinito-text) !important;
}

#frmDomainHomepage .input-group-wrapper .multiselect.dropdown-toggle.btn-default:hover,
#frmDomainHomepage .input-group-wrapper .multiselect.dropdown-toggle.btn-default:focus {
    border-color: var(--infinito-gold-hover) !important;
    color: var(--infinito-gold-hover) !important;
}

#frmDomainHomepage .input-group-wrapper .multiselect-container a,
#frmDomainHomepage .input-group-wrapper .multiselect-container label {
    color: var(--infinito-text) !important;
}

/* Standard Cart keeps its promotion tab on a light surface by default. */
#order-standard_cart .view-cart-tabs .nav-tabs,
#order-standard_cart .view-cart-tabs .nav-link,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-tabs .tab-pane {
    background-color: var(--infinito-bg-elevated) !important;
    border-color: var(--infinito-border-muted) !important;
    color: var(--infinito-text) !important;
}

#order-standard_cart .view-cart-tabs .nav-link.active {
    color: var(--infinito-gold-hover) !important;
    border-bottom-color: var(--infinito-bg-elevated) !important;
}

#order-standard_cart .view-cart-tabs .btn-default {
    background-color: var(--infinito-bg-soft) !important;
    border-color: var(--infinito-border) !important;
    color: var(--infinito-text) !important;
}

/* Primary and outline actions */
.btn-primary,
#order-standard_cart .btn-primary {
    background-color: var(--infinito-gold) !important;
    border-color: var(--infinito-gold) !important;
    color: #16100a !important;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-primary:focus {
    background-color: var(--infinito-gold-hover) !important;
    border-color: var(--infinito-gold-hover) !important;
    color: #16100a !important;
}

/* WHMCS uses btn-success for product and checkout actions. */
.btn-success,
#order-standard_cart .btn-success {
    background-color: var(--infinito-gold) !important;
    border-color: var(--infinito-gold) !important;
    color: #16100a !important;
    font-weight: 700;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-success:focus {
    background-color: var(--infinito-gold-hover) !important;
    border-color: var(--infinito-gold-hover) !important;
    color: #16100a !important;
}

.btn-outline-primary,
.btn-outline-secondary,
#order-standard_cart .btn-outline-primary,
#order-standard_cart .btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--infinito-border) !important;
    color: var(--infinito-gold-hover) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
#order-standard_cart .btn-outline-primary:hover,
#order-standard_cart .btn-outline-primary:focus,
#order-standard_cart .btn-outline-secondary:hover,
#order-standard_cart .btn-outline-secondary:focus {
    background-color: var(--infinito-bg-soft) !important;
    border-color: var(--infinito-gold-hover) !important;
    color: var(--infinito-text) !important;
}

.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem var(--infinito-focus) !important;
}

/* Cards, panels, and cart summaries */
.card,
.panel,
.list-group-item,
.modal-content,
.popover,
.client-home-panels .panel,
#order-standard_cart .product,
#order-standard_cart .products .product,
#order-standard_cart .summary-container,
#order-standard_cart .view-cart-items,
#order-standard_cart .order-summary {
    background-color: var(--infinito-bg-elevated) !important;
    border-color: var(--infinito-border-muted) !important;
    color: var(--infinito-text) !important;
}

.card,
.panel,
.modal-content,
#order-standard_cart .product,
#order-standard_cart .summary-container,
#order-standard_cart .view-cart-items,
#order-standard_cart .order-summary {
    border-radius: var(--infinito-radius) !important;
    box-shadow: var(--infinito-shadow);
}

.card-header,
.card-footer,
.panel-heading,
.panel-footer,
.modal-header,
.modal-footer,
#order-standard_cart .product header,
#order-standard_cart .view-cart-items-header,
#order-standard_cart .order-summary h2 {
    background-color: var(--infinito-bg-soft) !important;
    border-color: var(--infinito-border-muted) !important;
    color: var(--infinito-text) !important;
}

.card-title,
.panel-title,
.modal-title,
#order-standard_cart .product-title,
#order-standard_cart .product header span,
#order-standard_cart .summary-container .subtotal {
    color: var(--infinito-text) !important;
}

.text-muted,
.card-subtitle,
.panel .small,
#order-standard_cart .product .product-desc,
#order-standard_cart .text-muted {
    color: var(--infinito-text-muted) !important;
}

/* Forms: appearance and visible keyboard focus only */
.form-control,
.custom-select,
.input-group-text,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: var(--infinito-bg-soft) !important;
    border-color: var(--infinito-border-muted) !important;
    color: var(--infinito-text) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--infinito-text-muted) !important;
    opacity: 0.85;
}

.form-control:focus,
.custom-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    background-color: var(--infinito-bg-soft) !important;
    border-color: var(--infinito-gold-hover) !important;
    color: var(--infinito-text) !important;
    box-shadow: 0 0 0 0.2rem var(--infinito-focus) !important;
    outline: 2px solid transparent;
}

label,
.form-label,
.col-form-label,
.custom-control-label {
    color: var(--infinito-text);
}

.custom-control-input:focus ~ .custom-control-label::before,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--infinito-gold-hover);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem var(--infinito-focus);
}

.invalid-feedback,
.field-error-msg,
.form-control.is-invalid ~ .invalid-feedback {
    color: var(--infinito-danger) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--infinito-danger) !important;
}

/* Alerts retain their native semantic meaning with dark, readable colors. */
.alert {
    background-color: var(--infinito-bg-soft);
    border-color: var(--infinito-border-muted);
    border-left: 0.25rem solid var(--infinito-gold);
    color: var(--infinito-text);
}

.alert-info,
.alert-warning {
    background-color: var(--infinito-info-bg) !important;
    border-color: var(--infinito-gold) !important;
    color: var(--infinito-info) !important;
}

.alert-success {
    background-color: var(--infinito-success-bg) !important;
    border-color: #4f9b62 !important;
    color: var(--infinito-success) !important;
}

.alert-danger,
.alert-error {
    background-color: var(--infinito-danger-bg) !important;
    border-color: #b85c52 !important;
    color: var(--infinito-danger) !important;
}

.alert a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* Tables and responsive data lists */
.table,
.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter {
    color: var(--infinito-text) !important;
}

.table th,
.table td {
    border-color: var(--infinito-border-muted) !important;
}

.table thead th,
.table-active,
.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover,
.dataTable thead th {
    background-color: var(--infinito-bg-soft) !important;
    color: var(--infinito-text) !important;
}

.page-link {
    background-color: var(--infinito-bg-elevated);
    border-color: var(--infinito-border-muted);
    color: var(--infinito-gold);
}

.page-link:hover,
.page-link:focus,
.page-item.active .page-link {
    background-color: var(--infinito-bg-soft);
    border-color: var(--infinito-gold);
    color: var(--infinito-gold-hover);
}

/* Native WHMCS badges and status chips */
.badge,
.label,
[class*="status-"] {
    border: 1px solid currentColor;
    border-radius: 999px;
    font-weight: 700;
}

.badge-primary,
.badge-info,
.label-primary,
.label-info,
.status-pending,
.status-inprogress,
.status-open {
    background-color: var(--infinito-info-bg) !important;
    color: var(--infinito-info) !important;
}

.badge-success,
.label-success,
.status-active,
.status-paid,
.status-answered {
    background-color: var(--infinito-success-bg) !important;
    color: var(--infinito-success) !important;
}

.badge-danger,
.label-danger,
.status-overdue,
.status-unpaid,
.status-fraud {
    background-color: var(--infinito-danger-bg) !important;
    color: var(--infinito-danger) !important;
}

.badge-secondary,
.badge-light,
.label-default,
.status-closed,
.status-cancelled,
.status-terminated {
    background-color: var(--infinito-bg-soft) !important;
    color: var(--infinito-text-muted) !important;
}

/* Footer */
.footer,
footer,
section#footer {
    background-color: var(--infinito-bg-elevated) !important;
    border-top: 1px solid var(--infinito-border-muted);
    color: var(--infinito-text-muted) !important;
}

.footer a,
footer a,
section#footer a {
    color: var(--infinito-gold) !important;
}

@media (max-width: 767.98px) {
    .navbar-collapse {
        padding: 0.75rem 0;
    }

    .navbar-nav .nav-link {
        padding: 0.65rem 0.75rem;
    }

    .card,
    .panel,
    #order-standard_cart .product,
    #order-standard_cart .summary-container,
    #order-standard_cart .view-cart-items,
    #order-standard_cart .order-summary {
        border-radius: 0.375rem !important;
    }

    .table-responsive {
        border-color: var(--infinito-border-muted);
    }

    #order-standard_cart .btn {
        max-width: 100%;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Navigation dropdown links need contrast over the dark menu. */
#mainNavbar .dropdown-menu .dropdown-item {
    color: var(--infinito-text) !important;
}

#mainNavbar .dropdown-menu .dropdown-item:hover,
#mainNavbar .dropdown-menu .dropdown-item:focus,
#mainNavbar .dropdown-menu .dropdown-item.active {
    background-color: var(--infinito-bg-soft) !important;
    color: var(--infinito-gold-hover) !important;
}