/*
 * BulletHost WHMCS dark-theme completion layer.
 *
 * This file is intentionally loaded from footer.tpl after $footeroutput. Some
 * payment gateways and server modules insert their own styles in the rendered
 * page, so this final layer keeps their generic Bootstrap surfaces consistent.
 */

body.bh-whmcs-atmo #main-body {
    --bh-dark-surface: #0d1522;
    --bh-dark-surface-2: #111b2b;
    --bh-dark-surface-3: #162235;
    --bh-dark-border: #2b3950;
    --bh-dark-text: #dcecff;
    --bh-dark-muted: #97aac6;
    --bh-dark-link: #62d7e4;
}

/* Generic Bootstrap/WHMCS containers that commonly retain light defaults. */
body.bh-whmcs-atmo #main-body .panel,
body.bh-whmcs-atmo #main-body .card,
body.bh-whmcs-atmo #main-body .panel-body,
body.bh-whmcs-atmo #main-body .card-body,
body.bh-whmcs-atmo #main-body .panel-footer,
body.bh-whmcs-atmo #main-body .card-footer,
body.bh-whmcs-atmo #main-body .well,
body.bh-whmcs-atmo #main-body .jumbotron,
body.bh-whmcs-atmo #main-body .list-group-item,
body.bh-whmcs-atmo #main-body .table-responsive,
body.bh-whmcs-atmo #main-body .modal-content,
body.bh-whmcs-atmo #main-body .modal-header,
body.bh-whmcs-atmo #main-body .modal-body,
body.bh-whmcs-atmo #main-body .modal-footer,
body.bh-whmcs-atmo #main-body .popover,
body.bh-whmcs-atmo #main-body .popover-content,
body.bh-whmcs-atmo #main-body .dropdown-menu,
body.bh-whmcs-atmo #main-body .tab-content,
body.bh-whmcs-atmo #main-body .md-editor,
body.bh-whmcs-atmo #main-body .md-editor > .md-header,
body.bh-whmcs-atmo #main-body .md-editor > textarea,
body.bh-whmcs-atmo #main-body .md-editor > .md-preview,
body.bh-whmcs-atmo #main-body .md-editor.md-fullscreen-mode,
body.bh-whmcs-atmo #main-body .md-editor.md-fullscreen-mode .md-input,
body.bh-whmcs-atmo #main-body .md-editor.md-fullscreen-mode .md-preview,
body.bh-whmcs-atmo #main-body .bootstrap-switch .bootstrap-switch-label,
body.bh-whmcs-atmo #main-body .progress {
    background-color: var(--bh-dark-surface) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body .panel-heading,
body.bh-whmcs-atmo #main-body .card-header,
body.bh-whmcs-atmo #main-body .modal-header,
body.bh-whmcs-atmo #main-body .nav-tabs > li > a,
body.bh-whmcs-atmo #main-body .nav-pills > li > a {
    background-color: var(--bh-dark-surface-2) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body .nav-tabs > li.active > a,
body.bh-whmcs-atmo #main-body .nav-tabs > li.active > a:hover,
body.bh-whmcs-atmo #main-body .nav-tabs > li.active > a:focus,
body.bh-whmcs-atmo #main-body .nav-pills > li.active > a {
    background-color: var(--bh-dark-surface-3) !important;
    border-color: #16b8ca !important;
    color: #fff !important;
}

body.bh-whmcs-atmo #main-body hr,
body.bh-whmcs-atmo #main-body .panel-footer,
body.bh-whmcs-atmo #main-body .card-footer {
    border-color: var(--bh-dark-border) !important;
}

body.bh-whmcs-atmo #main-body .bg-white,
body.bh-whmcs-atmo #main-body .bg-light,
body.bh-whmcs-atmo #main-body [style*="background: white" i],
body.bh-whmcs-atmo #main-body [style*="background-color: white" i],
body.bh-whmcs-atmo #main-body [style*="background: #fff" i],
body.bh-whmcs-atmo #main-body [style*="background-color: #fff" i],
body.bh-whmcs-atmo #main-body [style*="background: rgb(255" i],
body.bh-whmcs-atmo #main-body [style*="background-color: rgb(255" i] {
    background-color: var(--bh-dark-surface) !important;
    color: var(--bh-dark-text) !important;
}

/* Forms, selects and dynamically produced payment controls. */
body.bh-whmcs-atmo #main-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.bh-whmcs-atmo #main-body select,
body.bh-whmcs-atmo #main-body textarea,
body.bh-whmcs-atmo #main-body .form-control,
body.bh-whmcs-atmo #main-body .input-group-addon,
body.bh-whmcs-atmo #main-body .input-group-text {
    background-color: #0a111d !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body input:disabled,
body.bh-whmcs-atmo #main-body select:disabled,
body.bh-whmcs-atmo #main-body textarea:disabled,
body.bh-whmcs-atmo #main-body .form-control[disabled],
body.bh-whmcs-atmo #main-body .form-control[readonly] {
    background-color: #121c2a !important;
    color: var(--bh-dark-muted) !important;
    opacity: 1;
}

body.bh-whmcs-atmo #main-body input::placeholder,
body.bh-whmcs-atmo #main-body textarea::placeholder,
body.bh-whmcs-atmo #main-body .text-muted,
body.bh-whmcs-atmo #main-body small,
body.bh-whmcs-atmo #main-body .help-block {
    color: var(--bh-dark-muted) !important;
}

body.bh-whmcs-atmo #main-body a:not(.btn) {
    color: var(--bh-dark-link);
}

/* Tables and responsive table wrappers. */
body.bh-whmcs-atmo #main-body table,
body.bh-whmcs-atmo #main-body .table,
body.bh-whmcs-atmo #main-body .table > thead > tr > th,
body.bh-whmcs-atmo #main-body .table > tbody > tr > th,
body.bh-whmcs-atmo #main-body .table > tfoot > tr > th,
body.bh-whmcs-atmo #main-body .table > thead > tr > td,
body.bh-whmcs-atmo #main-body .table > tbody > tr > td,
body.bh-whmcs-atmo #main-body .table > tfoot > tr > td {
    background-color: transparent !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body .table-striped > tbody > tr:nth-of-type(odd),
body.bh-whmcs-atmo #main-body .table-hover > tbody > tr:hover {
    background-color: rgba(33, 53, 78, .45) !important;
}

/* Checkout: account selector and gateway-provided blocks. */
body.bh-whmcs-atmo #main-body #containerExistingAccountSelect,
body.bh-whmcs-atmo #main-body .account-select-container,
body.bh-whmcs-atmo #main-body .account-select-container div.account,
body.bh-whmcs-atmo #main-body .account-select-container .account,
body.bh-whmcs-atmo #main-body #paymentGatewayInput,
body.bh-whmcs-atmo #main-body #paymentGatewaysContainer,
body.bh-whmcs-atmo #main-body #paymentGatewayInput > div,
body.bh-whmcs-atmo #main-body #paymentGatewaysContainer > div,
body.bh-whmcs-atmo #main-body #paymentGatewayInput .panel,
body.bh-whmcs-atmo #main-body #paymentGatewayInput .card,
body.bh-whmcs-atmo #main-body .gateway-input-container,
body.bh-whmcs-atmo #main-body .cc-input-container {
    background-color: var(--bh-dark-surface) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body .account-select-container div.account.active,
body.bh-whmcs-atmo #main-body .account-select-container .account.active {
    background-color: rgba(22, 184, 202, .14) !important;
    border-color: #16b8ca !important;
}

body.bh-whmcs-atmo #main-body .account-select-container label,
body.bh-whmcs-atmo #main-body .account-select-container address,
body.bh-whmcs-atmo #main-body .account-select-container div,
body.bh-whmcs-atmo #main-body #paymentGatewayInput label,
body.bh-whmcs-atmo #main-body #paymentGatewayInput p,
body.bh-whmcs-atmo #main-body #paymentGatewaysContainer label,
body.bh-whmcs-atmo #main-body #paymentGatewaysContainer p {
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body #paymentGatewayInput button,
body.bh-whmcs-atmo #main-body #paymentGatewayInput .btn,
body.bh-whmcs-atmo #main-body #paymentGatewaysContainer button,
body.bh-whmcs-atmo #main-body #paymentGatewaysContainer .btn {
    background-color: var(--bh-dark-surface-3) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

/* Add Funds and ticket attachment strips. */
body.bh-whmcs-atmo #main-body .panel > .panel-footer,
body.bh-whmcs-atmo #main-body .card > .card-footer,
body.bh-whmcs-atmo #main-body .ticket-reply .attachments,
body.bh-whmcs-atmo #main-body .ticket-reply .attachment,
body.bh-whmcs-atmo #main-body .ticket-attachments,
body.bh-whmcs-atmo #main-body .attachments {
    background-color: var(--bh-dark-surface-2) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-muted) !important;
}

/* Product modules: catch generic output as well as ModulesGarden dservermanager. */
body.bh-whmcs-atmo #main-body .bh-module-client-area .panel,
body.bh-whmcs-atmo #main-body .bh-module-client-area .card,
body.bh-whmcs-atmo #main-body .bh-module-client-area .panel-body,
body.bh-whmcs-atmo #main-body .bh-module-client-area .card-body,
body.bh-whmcs-atmo #main-body .bh-module-client-area .panel-footer,
body.bh-whmcs-atmo #main-body .bh-module-client-area .card-footer,
body.bh-whmcs-atmo #main-body .dservermanager-main-content .panel,
body.bh-whmcs-atmo #main-body .dservermanager-main-content .card,
body.bh-whmcs-atmo #main-body .dservermanager-main-content .panel-body,
body.bh-whmcs-atmo #main-body .dservermanager-main-content .card-body,
body.bh-whmcs-atmo #main-body .dservermanager-main-content .panel-footer,
body.bh-whmcs-atmo #main-body .dservermanager-main-content .card-footer {
    background-color: var(--bh-dark-surface) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body .bh-module-client-area .panel-heading,
body.bh-whmcs-atmo #main-body .bh-module-client-area .card-header,
body.bh-whmcs-atmo #main-body .dservermanager-main-content .panel-heading,
body.bh-whmcs-atmo #main-body .dservermanager-main-content .card-header {
    background-color: var(--bh-dark-surface-2) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body .bh-module-client-area hr,
body.bh-whmcs-atmo #main-body .dservermanager-main-content hr {
    border-color: var(--bh-dark-border) !important;
}

/* Common plugin overlays rendered under the main WHMCS content node. */
body.bh-whmcs-atmo #main-body .dtr-modal-display,
body.bh-whmcs-atmo #main-body .dtr-modal-content,
body.bh-whmcs-atmo #main-body .dtr-modal-close,
body.bh-whmcs-atmo #main-body .select2-dropdown,
body.bh-whmcs-atmo #main-body .select2-results__option,
body.bh-whmcs-atmo #main-body .daterangepicker,
body.bh-whmcs-atmo #main-body .bootstrap-datetimepicker-widget,
body.bh-whmcs-atmo #main-body .captcha-overlay-popup {
    background-color: var(--bh-dark-surface) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body .select2-results__option--highlighted,
body.bh-whmcs-atmo #main-body .select2-results__option[aria-selected="true"],
body.bh-whmcs-atmo #main-body .daterangepicker td.active,
body.bh-whmcs-atmo #main-body .daterangepicker td.active:hover {
    background-color: #16b8ca !important;
    color: #061019 !important;
}

/* Several libraries append overlays directly under body instead of #main-body. */
body.bh-whmcs-atmo .modal-content,
body.bh-whmcs-atmo .modal-header,
body.bh-whmcs-atmo .modal-body,
body.bh-whmcs-atmo .modal-footer,
body.bh-whmcs-atmo .popover,
body.bh-whmcs-atmo .popover-content,
body.bh-whmcs-atmo .dtr-modal-display,
body.bh-whmcs-atmo .dtr-modal-content,
body.bh-whmcs-atmo .dtr-modal-close,
body.bh-whmcs-atmo .select2-dropdown,
body.bh-whmcs-atmo .daterangepicker,
body.bh-whmcs-atmo .bootstrap-datetimepicker-widget,
body.bh-whmcs-atmo .captcha-overlay-popup {
    background-color: #0d1522 !important;
    border-color: #2b3950 !important;
    color: #dcecff !important;
}

/* Invoice payment page and its right-hand invoice preview. */
body.bh-whmcs-atmo #main-body .invoice-summary {
    background: linear-gradient(180deg, #111b2b 0%, #0d1522 100%) !important;
    border: 1px solid #2b455f !important;
    border-radius: 10px !important;
    color: var(--bh-dark-text) !important;
    box-shadow: 0 18px 42px rgba(2, 7, 14, .42);
}

body.bh-whmcs-atmo #main-body .invoice-summary h2,
body.bh-whmcs-atmo #main-body .invoice-summary p,
body.bh-whmcs-atmo #main-body .invoice-summary strong,
body.bh-whmcs-atmo #main-body .invoice-summary-table td,
body.bh-whmcs-atmo #main-body .invoice-summary-table th {
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body .invoice-summary-table td,
body.bh-whmcs-atmo #main-body .invoice-summary-table td.total-row {
    background-color: transparent !important;
    border-color: var(--bh-dark-border) !important;
}

body.bh-whmcs-atmo #main-body .invoice-summary-table td.total-row {
    background-color: rgba(22, 34, 53, .72) !important;
}

/* PayPal Payments module surfaces loaded after the base WHMCS theme. */
body.bh-whmcs-atmo #main-body #frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields,
body.bh-whmcs-atmo #main-body #frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields ul,
body.bh-whmcs-atmo #main-body #frmPayment.paypal_ppcpv-payment-form .paymethod-info,
body.bh-whmcs-atmo #main-body .paypal_ppcpv-payment-form .selected,
body.bh-whmcs-atmo #main-body #paypal_ppcpv_input_container,
body.bh-whmcs-atmo #main-body #paypal_ppcpv_input_container_button {
    background-color: var(--bh-dark-surface) !important;
    border-color: var(--bh-dark-border) !important;
    color: var(--bh-dark-text) !important;
}

body.bh-whmcs-atmo #main-body #frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]) {
    background-color: var(--bh-dark-surface-2) !important;
    border-color: var(--bh-dark-border) !important;
}

body.bh-whmcs-atmo #main-body .paypal_ppcpv-payment-form .selected {
    background: linear-gradient(90deg, rgba(22, 184, 202, .18), var(--bh-dark-surface-2)) !important;
    border-color: #16b8ca !important;
}

body.bh-whmcs-atmo #main-body .paypal_ppcpv-payment-form .payer-email,
body.bh-whmcs-atmo #main-body .paypal_ppcpv-payment-form .payer-label,
body.bh-whmcs-atmo #main-body .paypal_ppcpv-payment-form label {
    color: var(--bh-dark-text) !important;
}

/* PayPal renders its smart button inside a cross-origin iframe. CSS cannot
 * reach that document directly, so the iframe is colour-mapped into the
 * theme's navy palette while preserving PayPal's layout and interaction. */
body.bh-whmcs-atmo #main-body #paypal_ppcpv_input_container_button {
    background:
        linear-gradient(135deg, #16b8ca, #0f8296) content-box,
        linear-gradient(180deg, var(--bh-dark-surface-2), var(--bh-dark-surface)) padding-box !important;
    border: 1px solid #245066 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(2, 7, 14, .28);
    padding: 10px !important;
}

body.bh-whmcs-atmo #main-body #paypal_ppcpv_input_container_button iframe,
body.bh-whmcs-atmo #main-body .paypal_ppcpv-payment-form iframe[id^="jsx-iframe-"],
body.bh-whmcs-atmo #main-body .paypal_ppcpv-payment-form iframe[title*="PayPal" i] {
    background-color: transparent !important;
    border: 1px solid #2b5268 !important;
    border-radius: 6px !important;
    filter: invert(1) hue-rotate(180deg) saturate(.9);
    opacity: .72;
}

/* Keep intentional brand artwork and icons unaffected by the surface rules. */
body.bh-whmcs-atmo #main-body img,
body.bh-whmcs-atmo #main-body svg,
body.bh-whmcs-atmo #main-body canvas {
    background-color: transparent;
}

/* The theme mixes Bootstrap 3 and 4 container rules. Force mobile containers
 * to include their padding in their declared width to prevent a 15px spill. */
@media (max-width: 575.98px) {
    body.bh-whmcs-atmo #header .top-header-nav-home {
        box-sizing: border-box !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    body.bh-whmcs-atmo #main-body > .container,
    body.bh-whmcs-atmo #header .top-header-nav-home .container,
    body.bh-whmcs-atmo .footer-coodiv-thm > .container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.bh-whmcs-atmo #main-body .main-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}