/* Novasean customer portal. Native Nexus templates and order-form scripts remain inherited. */
@font-face {
    font-family: Manrope;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --nova-ink: #0e1726;
    --nova-muted: #4b5b6d;
    --nova-blue: #2563eb;
    --nova-blue-dark: #1d4ed8;
    --nova-navy: #0d1b2a;
    --nova-paper: #f6f8fa;
    --nova-white: #fff;
    --nova-border: #d9e1ea;
    --nova-soft: #eef2f6;
    --nova-wrap: 1240px;
    --nova-font: Manrope, Arial, sans-serif;

    /* Documented Nexus variables also reach its native SPA surfaces. */
    --white: var(--nova-white);
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: var(--nova-blue);
    --primary-700: var(--nova-blue-dark);
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-950: #172554;
    --primary: var(--nova-blue);
    --primary-lifted: var(--nova-blue-dark);
    --primary-accented: #1e40af;
    --secondary: var(--nova-muted);
    --secondary-lifted: #3d4c5d;
    --secondary-accented: var(--nova-ink);
    --text: var(--nova-ink);
    --text-muted: var(--nova-muted);
    --text-lifted: var(--nova-muted);
    --text-accented: var(--nova-ink);
    --text-inverted: var(--nova-white);
    --border-muted: var(--nova-border);
    --border: var(--nova-border);
    --border-lifted: #adbac8;
    --border-accented: var(--nova-muted);
    --bg: var(--nova-white);
    --bg-muted: var(--nova-paper);
    --bg-lifted: var(--nova-soft);
    --bg-accented: #e4ebf3;
    --bg-inverted: var(--nova-navy);
    --rounding-sm: 6px;
    --rounding-md: 12px;
    --rounding-lg: 12px;
    --letter-spacing: 0;
    --disabled-opacity: 55%;
}

body {
    font-family: var(--nova-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--nova-ink);
    background-color: var(--nova-white);
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea, .btn, .form-control {
    font-family: var(--nova-font);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    color: var(--nova-ink);
    font-family: var(--nova-font);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.035em;
    overflow-wrap: break-word;
}

h1, .h1 { font-size: clamp(2rem, 3.2vw, 3rem); }
h2, .h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.1rem; }

a { color: var(--nova-blue-dark); text-underline-offset: 4px; }
a:hover { color: #1e40af; }
.text-muted, .help-block, .form-text { color: var(--nova-muted) !important; }
.text-primary { color: var(--nova-blue) !important; }
.bg-primary { background-color: var(--nova-blue) !important; }

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--nova-blue);
    outline-offset: 3px;
}

#header {
    color: var(--nova-ink);
    background: var(--nova-white);
    border-bottom: 1px solid var(--nova-border);
}

#header .topbar { color: var(--nova-white); background-color: var(--nova-navy); }
#header .topbar .btn,
#header .topbar .active-client .btn,
#header .topbar .active-client .input-group-text { color: var(--nova-white); }
#header .topbar .d-flex { flex-wrap: wrap; }
#header .topbar .ml-auto { max-width: 100%; }
#header .topbar .active-client { flex-wrap: nowrap; }
#header .topbar .btn-group { min-width: 0; max-width: 100%; }
#header .topbar .btn-active-client { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.label.status-suspended { color: #7a2e0e; background-color: #fef0c7; }

#header .navbar-light { background: var(--nova-white); }
#header .navbar-brand {
    color: var(--nova-navy);
    font-family: var(--nova-font);
    font-size: 1.65rem;
    font-weight: 750;
    letter-spacing: -.045em;
}

#header .main-navbar-wrapper { background: var(--nova-paper); }
#header .main-navbar-wrapper .navbar-nav > li > a {
    color: var(--nova-ink);
    font-size: .9rem;
    font-weight: 600;
}
#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:focus-visible {
    color: var(--nova-blue-dark);
    background: var(--nova-soft);
}

.dropdown-menu {
    color: var(--nova-ink);
    background: var(--nova-white);
    border: 1px solid var(--nova-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgb(13 27 42 / 10%);
}
.dropdown-item { color: var(--nova-ink); }
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--nova-blue-dark);
    background-color: var(--nova-paper);
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--nova-white);
    background-color: var(--nova-blue);
}

body #main-body { padding-top: 2.75rem; padding-bottom: 3.5rem; background-color: var(--nova-paper); }
#main-body .header-lined h1 { border-color: var(--nova-border); }
.breadcrumb { color: var(--nova-muted); background: transparent; }
.breadcrumb a { color: var(--nova-muted); }

.card, .panel, .modal-content {
    border-color: var(--nova-border);
    border-radius: 12px;
    background-color: var(--nova-white);
}
.card-header, .panel-default > .panel-heading {
    color: var(--nova-ink);
    background-color: var(--nova-paper);
    border-color: var(--nova-border);
}
.card-header:first-child, .panel-heading {
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}
.card-footer, .panel-footer {
    background-color: var(--nova-paper);
    border-color: var(--nova-border);
}
.card-title, .panel-title { font-weight: 650; }
.list-group-item { border-color: var(--nova-border); }
.list-group-item.active {
    color: var(--nova-white);
    background-color: var(--nova-blue);
    border-color: var(--nova-blue);
}

.btn, body #main-body .btn, body #order-standard_cart .btn {
    /* Native Nexus includes important per-form radius rules. */
    border-radius: 6px !important;
    min-height: 44px;
    padding: .65rem 1rem;
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.4;
    transition: background-color .16s, border-color .16s, color .16s;
}
body #frmDomainHomepage .btn { border-radius: 6px !important; }
.btn-primary, body #order-standard_cart .btn-primary {
    color: var(--nova-white);
    background-color: var(--nova-blue);
    border-color: var(--nova-blue);
}
.btn-primary:hover, .btn-primary:focus,
body #order-standard_cart .btn-primary:hover, body #order-standard_cart .btn-primary:focus {
    color: var(--nova-white);
    background-color: var(--nova-blue-dark);
    border-color: var(--nova-blue-dark);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: #1e40af;
    border-color: #1e40af;
}
.btn-default, .btn-outline-primary, body #order-standard_cart .btn-default {
    color: var(--nova-ink);
    background-color: var(--nova-white);
    border-color: #adbac8;
}
.btn-default:hover, .btn-outline-primary:hover, body #order-standard_cart .btn-default:hover {
    color: var(--nova-ink);
    background-color: var(--nova-soft);
    border-color: var(--nova-muted);
}
.btn-lg, body #order-standard_cart .btn-lg { min-height: 52px; padding: .9rem 1.3rem; }
.btn-sm, .btn-group-sm > .btn, body #order-standard_cart .btn-sm {
    min-height: 36px;
    padding: .4rem .7rem;
    font-size: .8125rem;
}
.btn.disabled, .btn:disabled { opacity: .55; }

.form-control, .custom-select, body #order-standard_cart .form-control {
    color: var(--nova-ink);
    background-color: var(--nova-white);
    border-color: var(--nova-border);
    border-radius: 6px;
    min-height: 46px;
    font-size: 1rem;
}
.form-control:focus, .custom-select:focus, body #order-standard_cart .form-control:focus {
    color: var(--nova-ink);
    background-color: var(--nova-white);
    border-color: var(--nova-blue);
    box-shadow: 0 0 0 .2rem rgb(37 99 235 / 14%);
}
.form-control::placeholder { color: #64748b; opacity: 1; }
.form-control:disabled, .form-control[readonly] {
    color: var(--nova-muted);
    background-color: var(--nova-paper);
}
label, .col-form-label { font-weight: 600; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--nova-blue); }
textarea.form-control { min-height: 120px; }
.input-group-text { background-color: var(--nova-paper); border-color: var(--nova-border); }

/* Validation retains semantic colours and messages supplied by WHMCS. */
.form-control.is-invalid, .was-validated .form-control:invalid,
body #order-standard_cart .form-control.is-invalid { border-color: #b42318; }
.form-control.is-valid, .was-validated .form-control:valid,
body #order-standard_cart .form-control.is-valid { border-color: #12805c; }
.invalid-feedback { color: #b42318; }
.valid-feedback { color: #0f684b; }
.alert { border-radius: 12px; }
.alert-info { color: #163c72; background: #eff6ff; border-color: #bfdbfe; }
.alert-success { color: #0f5132; background: #eefaf3; border-color: #b8dfc7; }
.alert-warning { color: #714b08; background: #fff8e8; border-color: #f2d59a; }
.alert-danger { color: #842029; background: #fff1f2; border-color: #f1bcc3; }

.table { color: var(--nova-ink); }
.table th, .table td { border-color: var(--nova-border); }
.table thead th { color: var(--nova-muted); background-color: var(--nova-paper); font-weight: 650; }
.table-striped tbody tr:nth-of-type(odd) { background-color: #fafbfd; }
.table-hover tbody tr:hover { background-color: var(--nova-soft); }
.page-link { color: var(--nova-blue-dark); border-color: var(--nova-border); }
.page-item.active .page-link { background-color: var(--nova-blue); border-color: var(--nova-blue); }
.nav-tabs { border-color: var(--nova-border); }
.nav-tabs .nav-link { color: var(--nova-muted); }
.nav-tabs .nav-link.active { color: var(--nova-blue-dark); border-color: var(--nova-border) var(--nova-border) var(--nova-white); }
.progress { background-color: var(--nova-soft); border-radius: 6px; }

/* Existing novasean_cart markup. No order-form assets or bindings are replaced. */
body #order-standard_cart { color: var(--nova-ink); font-family: var(--nova-font); }
body #order-standard_cart .sub-heading { border-color: var(--nova-border); }
body #order-standard_cart .sub-heading span { color: var(--nova-ink); font-weight: 650; }
body #order-standard_cart .products .product,
body #order-standard_cart .view-cart-items,
body #order-standard_cart .order-summary,
body #order-standard_cart .summary-container {
    border-color: var(--nova-border);
    border-radius: 12px;
}
body #order-standard_cart .products .product header,
body #order-standard_cart .view-cart-items-header,
body #order-standard_cart .order-summary {
    color: var(--nova-white);
    background-color: var(--nova-navy);
}
body #order-standard_cart .order-summary h2,
body #order-standard_cart .order-summary h3,
body #order-standard_cart .order-summary h4,
body #order-standard_cart .products .product header h3,
body #order-standard_cart .products .product header span { color: inherit; }
body #order-standard_cart .summary-container { background-color: var(--nova-navy); }
/* Nexus scopes this inner panel more tightly than the inherited cart stylesheet. */
body #order-standard_cart .order-summary .summary-container {
    color: var(--nova-white);
    background-color: var(--nova-navy);
    font-size: .9375rem;
}
body #order-standard_cart .order-summary .recurring-charges { color: #d8e3ee; }
body #order-standard_cart .order-summary .btn-continue-shopping { color: #a9c9f8; }
body #order-standard_cart .order-summary .btn-checkout,
body #order-standard_cart .panel-addon .panel-add,
body #order-standard_cart .already-registered .btn-info {
    color: var(--nova-white);
    background-color: var(--nova-blue);
    border-color: var(--nova-blue);
}
body #order-standard_cart .order-summary .btn-checkout:hover,
body #order-standard_cart .order-summary .btn-checkout:focus,
body #order-standard_cart .already-registered .btn-info:hover,
body #order-standard_cart .already-registered .btn-info:focus {
    color: var(--nova-white);
    background-color: var(--nova-blue-dark);
    border-color: var(--nova-blue-dark);
}
body #order-standard_cart .panel-addon .panel-add { padding: .65rem 1rem; }
@media (max-width: 575px) {
    body #order-standard_cart .already-registered { display: flex; flex-direction: column; gap: .75rem; }
    body #order-standard_cart .already-registered > p { order: -1; margin: 0; }
}
body #order-standard_cart .order-summary .text-muted { color: #d8e3ee !important; }
body #order-standard_cart .order-summary a:not(.btn) { color: #a9c9f8; }
body #order-standard_cart .order-summary :focus-visible { outline-color: #acd0ff; }
body #order-standard_cart .view-cart-items .item,
body #order-standard_cart .view-cart-tabs .tab-content { border-color: var(--nova-border); }
body #order-standard_cart .field, body #order-standard_cart .form-group label { color: var(--nova-ink); }
body #order-standard_cart .domain-selection-options .option {
    border-color: var(--nova-border);
    border-radius: 12px;
}
body #order-standard_cart .domain-selection-options .option-selected {
    background-color: #eff6ff;
    border-color: var(--nova-blue);
}

#footer {
    color: #d8e3ee;
    background-color: var(--nova-navy);
    border-top: 1px solid #263b50;
    padding-top: 2.75rem;
    padding-bottom: 2rem;
}
#footer p, #footer .copyright { color: #d8e3ee; }
#footer a, #footer .nav-link { color: var(--nova-white); }
#footer a:hover { color: #a9c9f8; }
#footer .nav { gap: .25rem .75rem; }
#footer :focus-visible { outline-color: #acd0ff; }
#footer .btn-outline-light { color: var(--nova-white); border-color: #4b6178; }
#footer .btn-outline-light:hover { background: #1b2e43; color: var(--nova-white); }

/* Native account lists retain their columns within a local scroll area. */
.table-container .listtable {
    max-width: 100%;
    overflow-x: auto;
}
.table-container .dataTables_filter,
.table-container .dataTables_filter label { max-width: 100%; }
.table-container .dataTables_filter input { max-width: calc(100% - 10px); }

/* Account verification and ownership labels retain readable semantic colours. */
.primary-content .label.label-default { color: var(--nova-ink); background: var(--nova-soft); }
.primary-content .label.label-success { color: #166534; background: #dcfce7; }
.primary-content .label.label-info { color: #1e40af; background: #dbeafe; }
.novasean-account-table table { min-width: 600px; }

/* Domain state labels remain visible, including disabled protection/renewal. */
.primary-content .label.label-danger { color: #991b1b; background: #fee2e2; }

/* Domain forwarding and service changes retain readable fields and all columns. */
.novasean-service-table table { min-width: 640px; }
.novasean-service-table input.form-control,
.novasean-service-table select { min-width: 160px; }
.primary-content form[action*="action=domainregisterns"] .input-group-append { max-width: 100%; }
.primary-content form[action*="action=domainregisterns"] .input-group-text {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Native upgrade cards use the same palette as the service catalogue. */
.upgrade .products .product { border-color: var(--nova-border); border-radius: 12px; overflow: hidden; }
.upgrade .products .product .header { background: var(--nova-navy); }
.upgrade .products .product .header h4 { color: var(--nova-white); }
.upgrade .products .product .header p { color: #d8e1ec; }
.upgrade .products .product ul li { color: var(--nova-ink); }
.upgrade .products .product ul li span { color: var(--nova-muted); }
.upgrade .products .product .current { color: #7a2e0e; background: #fef0c7; }
.upgrade .products .product .recommended { color: #166534; background: #dcfce7; }
.upgrade .products .product .footer .btn {
    color: var(--nova-white);
    background: var(--nova-blue);
    border-color: var(--nova-blue);
}
.upgrade .products .product .footer .btn:not(:disabled):hover,
.upgrade .products .product .footer .btn:not(:disabled):focus {
    background: var(--nova-blue-dark);
    border-color: var(--nova-blue-dark);
}

/* DNS fields keep readable widths inside their labelled scroll region. */
.novasean-dns-table table { min-width: 640px; }
.novasean-dns-table input[name="dnsrecordaddress[]"] { min-width: 220px; }
.novasean-dns-table select { min-width: 150px; }
@media (max-width: 767px) {
    #domainForm > .btn-group { display: flex; flex-wrap: wrap; gap: .5rem; }
    #domainForm > .btn-group > .btn,
    #domainForm > .btn-group > .btn-group { flex: 1 1 120px; }
    #domainForm > .btn-group > .btn-group > .btn { width: 100%; }
}

/* Standalone quote and invoice documents do not use the portal container. */
.invoice-container {
    display: flow-root;
    width: calc(100% - 32px);
    max-width: 850px;
    margin: 16px auto;
    padding: clamp(20px, 5vw, 56px);
    border: 1px solid var(--nova-border);
    border-radius: 12px;
}
.invoice-container address { overflow-wrap: anywhere; }
.invoice-container .card-body { padding: clamp(12px, 3vw, 24px); }
.invoice-container .table td, .invoice-container .table th { overflow-wrap: anywhere; }
.invoice-container .table td:last-child { white-space: nowrap; }

@media (min-width: 1280px) {
    #header .container, #main-body > .container, #footer > .container,
    body > section > .container { max-width: var(--nova-wrap); }
}

@media (max-width: 1199px) {
    /* The native collapsed navigation otherwise reserves an empty 70px row. */
    #header .main-navbar-wrapper { min-height: 0; }
}

@media (max-width: 767px) {
    body #main-body { padding-top: 1.75rem; padding-bottom: 2.5rem; }
    #header .navbar-brand { font-size: 1.45rem; }
    #footer { padding-top: 2rem; padding-bottom: 1.5rem; }
    h1, .h1 { font-size: 2rem; }
    .modal-dialog { margin: .75rem; }
    body #order-standard_cart { padding-inline: 16px; }
    /* Native catalogue rows otherwise extend 15px beyond each mobile edge. */
    #main-body .row.row-eq-height { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, body #order-standard_cart .btn { transition: none; }
}

@media print {
    body { color: #000; background: #fff; }
    .card, .panel, .table th, .table td { border-color: #b4b4b4; }
    #footer { color: #000; background: #fff; }
    #footer p, #footer .copyright, #footer a, #footer .nav-link { color: #000; }
    html:has(.invoice-container), body:has(.invoice-container) {
        width: auto !important;
        min-width: 0 !important;
        background: #fff;
    }
    .invoice-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 15px;
        border: 0;
        border-radius: 0;
    }
    .invoice-container .table-responsive { overflow: visible; }
    .invoice-container .card { break-inside: avoid; }
    .invoice-container .payment-btn-container,
    body:has(.invoice-container) .modal,
    body:has(.invoice-container) .modal-backdrop { display: none !important; }
}