/* StirCrazy IT Management: WHMCS client area, matching the StirCrazy
   Time Machine (crazytime/assets/style.css).

   This is the child theme's custom.css. Nexus loads it after its own
   stylesheets, in place of templates/nexus/css/custom.css, so it must
   define Nexus's whole palette (the :root block) as well as the look.
   Images are in ../img/, relative to this file.

   The look: the clock-monitor photo is the header, with the company
   artwork in the dark upper-left of the monitor and the navigation on
   glass pills; the page continues on smoked-glass panels over a blurred,
   dimmed copy of the same photo. One committed dark look, like the Time
   Machine. Invoices and PDFs use their own stylesheets and stay light. */

/* Fonts are served from this server, not from Google (POPIA: no visitor
   data goes to a third party). Latin set from Google Fonts, SIL OFL 1.1,
   licences next to the files. Cinzel and IBM Plex Sans are variable fonts. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/cinzel-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

:root {
    color-scheme: dark;

    /* Time Machine palette */
    --sc-void:    #050918;   /* deep navy of the empty screen */
    --sc-glass:   rgba(6, 12, 32, .78);
    --sc-glass-2: rgba(0, 0, 0, .28);
    --sc-arc:     #3fa9ff;   /* electric blue of the light trails */
    --sc-ion:     #8fe3ff;   /* hot cyan core of the trails */
    --sc-brass:   #c9a66b;   /* aged clock case */
    --sc-numeral: #ece6d6;   /* clock numerals: body text */
    --sc-mist:    #93a6c4;   /* secondary text */
    --sc-line:    rgba(143, 227, 255, .16);
    --sc-heading: #efe3c8;
    --sc-f-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
    --sc-f-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --sc-f-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

    /* Nexus palette, mapped onto the Time Machine's */
    --white: #fff;

    --neutral-50:  #0b1430;
    --neutral-100: #101c3f;
    --neutral-200: #16244d;
    --neutral-300: #2a3a63;
    --neutral-400: #7f8fab;
    --neutral-500: #93a6c4;
    --neutral-600: #b4c1d8;
    --neutral-700: #c8d3e6;
    --neutral-800: #dfe5ef;
    --neutral-900: #ece6d6;
    --neutral-950: #f6f1e4;

    --primary-50:  #e8f6ff;
    --primary-100: #c8eaff;
    --primary-200: #8fe3ff;
    --primary-300: #66c4ff;
    --primary-400: #3fa9ff;
    --primary-500: #2c8cf0;
    --primary-600: #1f76dd;
    --primary-700: #1560c4;
    --primary-800: #0f4a9a;
    --primary-900: #0b3570;
    --primary-950: #071f45;

    --primary: var(--primary-500);
    --primary-lifted: var(--primary-600);
    --primary-accented: var(--primary-700);

    --secondary: var(--sc-mist);
    --secondary-lifted: #b4c1d8;
    --secondary-accented: #c8d3e6;

    --success: #5fd3a0;
    --success-lifted: #45b886;
    --success-accented: #2f9a6c;

    --info: #3fa9ff;
    --info-lifted: #2c8cf0;
    --info-accented: #1560c4;

    --notice: #a88bff;
    --notice-lifted: #9273f5;
    --notice-accented: #7a5ce0;

    --warning: #f2b35a;
    --warning-lifted: #e09b3c;
    --warning-accented: #c47f22;

    --error: #ff7b88;
    --error-lifted: #f05d6c;
    --error-accented: #d94455;

    /* Nexus uses "grayscale" for its primary buttons and accents */
    --grayscale: #2c8cf0;
    --grayscale-lifted: #1f76dd;
    --grayscale-accented: #0b1430;

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--sc-void);
    --text-muted: #7f8fab;
    --text-lifted: var(--sc-mist);
    --text-accented: #c8d3e6;
    --text: var(--sc-numeral);

    --border-muted: var(--sc-line);
    --border: rgba(147, 166, 196, .3);
    --border-lifted: rgba(143, 227, 255, .45);
    --border-accented: var(--sc-ion);

    --bg: #0b1430;
    --bg-muted: #0d1838;
    --bg-lifted: #101c3f;
    --bg-accented: #16244d;
    --bg-inverted: var(--sc-void);

    --yellow-200: #f6dfa8;
    --yellow-300: var(--sc-brass);
    --teal-300: #8fe3ff;
    --teal-400: #3fa9ff;
    --emerald-300: #5fd3a0;
    --pink-400: #ff7bb6;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: 0.4rem;
    --rounding-md: 0.7rem;
    --rounding-lg: 0.9rem;

    --letter-spacing: 0em;
    --disabled-opacity: 35%;
}

/* ---------- the ground: same photo, blurred and dimmed ---------- */
html, body { background-color: var(--sc-void); }
body {
    position: relative;
    color: var(--sc-numeral);
    font: 15px/1.55 var(--sc-f-body);
}
body::before {
    content: ""; position: fixed; inset: -40px; z-index: -1;
    background: url("../img/bg-clock-monitor-small.jpg") center / cover no-repeat;
    filter: blur(22px) brightness(.32) saturate(1.2);
    pointer-events: none;
}
section#main-body {
    background: transparent; padding-bottom: 48px;
    /* screen minus our taller header, the breadcrumb and the footer, so the
       footer sits at the bottom of the screen on short pages */
    min-height: calc(100vh - clamp(250px, 27vw, 470px) - 40px - 175px);
}
a { color: var(--sc-ion); }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--sc-ion); outline-offset: 3px; }
::selection { background: rgba(63, 169, 255, .4); }
hr { border-color: var(--sc-line); }
.text-muted, .small.text-muted, small.text-muted { color: var(--sc-mist) !important; }
.text-dark { color: var(--sc-numeral) !important; }
.bg-light, .bg-white { background-color: var(--sc-glass-2) !important; }
.border, .border-top, .border-bottom { border-color: var(--sc-line) !important; }

h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--sc-f-display); font-weight: 700;
    letter-spacing: .05em; color: var(--sc-heading);
}
h4, h5, h6, .h4, .h5, .h6 { color: var(--sc-heading); }
code, pre, kbd { font-family: var(--sc-f-mono); }
code { color: var(--sc-ion); }

/* ---------- header: the photo, with the artwork in the monitor's dark corner ---------- */
header.header {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: clamp(250px, 27vw, 470px);
    background: transparent;
}
header.header::before {         /* the photo, edges faded as on the Time Machine */
    content: ""; position: absolute; inset: 0; z-index: 0;
    max-width: 1680px; margin-inline: auto;
    background: var(--sc-void) url("../img/bg-clock-monitor.jpg") center 22% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
header.header::after {          /* fade the photo into the page */
    content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
    background: linear-gradient(180deg, transparent, var(--sc-void));
    pointer-events: none;
}
header.header > * { position: relative; z-index: 1; }

/* the company name artwork replaces the logo; the img keeps its alt text */
header.header .navbar-brand { padding: 0; margin-right: 1rem; }
header.header .navbar-brand .logo-img {
    content: url("../img/brand-it-management-wide.png");
    height: clamp(54px, 6.2vw, 112px); width: auto; max-height: none; max-width: 70vw;
}
header.header .navbar { min-height: 0; background: transparent; }
header.header > .navbar:not(.main-navbar-wrapper) > .container { margin-top: clamp(18px, 4vw, 64px) !important; }

/* signed-in strip */
header.header .topbar {
    background: rgba(5, 9, 24, .7); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sc-line); color: var(--sc-mist);
}
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text { color: var(--sc-mist); }
header.header .topbar .active-client .btn.btn-active-client span { color: var(--sc-numeral); border-bottom-color: var(--sc-mist); }

/* knowledgebase search and cart: glass pills */
header.header .search {
    background: rgba(5, 9, 24, .7); backdrop-filter: blur(6px);
    border: 1px solid rgba(143, 227, 255, .35); border-radius: 999px; overflow: hidden;
}
header.header .search:focus-within { border-color: var(--sc-ion); }
header.header .search .btn, header.header .search .form-control { background: transparent; color: var(--sc-numeral); }
header.header .search .btn { color: var(--sc-mist); }
header.header .toolbar .nav-link {
    background: rgba(5, 9, 24, .7); backdrop-filter: blur(6px);
    border: 1px solid rgba(143, 227, 255, .35); border-radius: 999px; color: var(--sc-numeral);
}
header.header .toolbar .nav-link:hover { color: #fff; border-color: var(--sc-ion); box-shadow: 0 0 16px rgba(63, 169, 255, .5); }
header.header .toolbar .badge { background: var(--sc-arc); color: #fff; }

/* main navigation rides the light trails */
header.header .main-navbar-wrapper { background: transparent; padding: 0 0 18px; }
header.header .main-navbar-wrapper .navbar-nav { gap: 8px; flex-wrap: wrap; }
header.header .main-navbar-wrapper .navbar-nav > li > a,
header.header .main-navbar-wrapper .navbar-nav > .nav-item > a {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .62em 1.15em !important; border-radius: 999px;
    font: 500 14px/1 var(--sc-f-body); letter-spacing: .03em;
    color: var(--sc-numeral) !important;
    background: rgba(5, 9, 24, .78); backdrop-filter: blur(6px);
    border: 1px solid rgba(143, 227, 255, .35);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .45);
    transition: border-color .2s, box-shadow .2s, color .2s;
}
header.header .main-navbar-wrapper .navbar-nav > li > a:hover,
header.header .main-navbar-wrapper .navbar-nav > li.show > a {
    border-color: var(--sc-ion); text-decoration: none;
    box-shadow: 0 0 18px rgba(63, 169, 255, .55), 0 6px 20px rgba(0, 0, 0, .45);
}
header.header .main-navbar-wrapper .navbar-nav > li.active > a {
    border-color: var(--sc-brass); color: #f6ecd6 !important;
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .5), 0 6px 20px rgba(0, 0, 0, .45);
}
header.header .navbar a { color: var(--sc-numeral); }
header.header .navbar-toggler, header.header .toolbar button.nav-link { color: var(--sc-numeral); }

/* dropdown menus everywhere */
.dropdown-menu {
    background: rgba(8, 15, 38, .97); backdrop-filter: blur(14px);
    border: 1px solid var(--sc-line); box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.dropdown-item, header.header .dropdown-item { color: var(--sc-numeral) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(63, 169, 255, .14); color: #fff !important; }
.dropdown-item.active, .dropdown-item:active,
header.header .dropdown-item.active, header.header .dropdown-item:active { background: rgba(63, 169, 255, .28); color: #fff !important; }
.dropdown-divider { border-top-color: var(--sc-line); }
.dropdown-header { color: var(--sc-brass); }

/* breadcrumb */
.master-breadcrumb, .master-breadcrumb .breadcrumb { background: transparent; }
.master-breadcrumb .breadcrumb { font-size: 13px; padding: 4px 0 14px; }
.master-breadcrumb .breadcrumb a { color: var(--sc-ion); }
.master-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--sc-mist); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sc-brass); }

/* ---------- panels: smoked glass ---------- */
.card, .mc-promo-manage, .mc-promo-login {
    background: var(--sc-glass); backdrop-filter: blur(16px);
    border: 1px solid var(--sc-line); border-radius: 14px; color: var(--sc-numeral);
}
.card-header, .card-footer {
    background: rgba(255, 255, 255, .03); border-color: var(--sc-line); color: var(--sc-numeral);
}
.card-header:first-child { border-radius: 13px 13px 0 0; }
.card-footer:last-child { border-radius: 0 0 13px 13px; }
.card-title, .card-header .card-title, .card-sidebar .card-title {
    font: 700 16px/1.25 var(--sc-f-display); letter-spacing: .06em; color: var(--sc-heading);
}
.card-sidebar .card-header { background: transparent; }
.card-sidebar .card-title i, .card-sidebar .card-title .fa, .card-sidebar .card-title .fas { color: var(--sc-brass); }

.list-group-item {
    background: transparent; color: var(--sc-numeral); border-color: var(--sc-line);
}
a.list-group-item, .list-group-item-action { color: var(--sc-numeral); }
.list-group-item-action:hover, .list-group-item-action:focus { background: rgba(63, 169, 255, .08); color: #fff; }
.list-group-item.active {
    background: rgba(63, 169, 255, .16); border-color: var(--sc-line); color: #fff;
    box-shadow: inset 3px 0 0 var(--sc-brass);
}
.sidebar .list-group-item .badge { background: rgba(147, 166, 196, .16); color: var(--sc-numeral); }

/* ---------- buttons: the Time Machine's pills ---------- */
.btn { border-radius: 999px; font-family: var(--sc-f-body); font-weight: 500; letter-spacing: .02em; }
.btn-primary, .btn-success, .btn-info,
#btnDomainContinue {
    color: #fff; background: linear-gradient(180deg, #2c8cf0, #1560c4); border: 1px solid var(--sc-ion);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover, .btn-info:hover, #btnDomainContinue:hover {
    color: #fff; background: linear-gradient(180deg, #3a98f6, #1a6ad3); border-color: var(--sc-ion);
    box-shadow: 0 0 16px rgba(63, 169, 255, .55);
}
.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary {
    color: var(--sc-numeral); background: rgba(5, 9, 24, .7);
    border: 1px solid rgba(143, 227, 255, .35);
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-default:focus, .btn-default.focus {
    color: #fff; background: rgba(5, 9, 24, .85); border-color: var(--sc-ion);
    box-shadow: 0 0 16px rgba(63, 169, 255, .45);
}
.btn-warning { color: #1a1206; background: var(--sc-brass); border-color: #e2c48c; }
.btn-danger { color: #fff; background: #c94352; border-color: var(--error); }
.btn-link { color: var(--sc-ion); }
.btn-link:hover { color: #fff; }
.btn-return-to-admin, .btn-return-to-admin .floating {
    background-color: rgba(201, 166, 107, .2) !important; color: var(--sc-brass) !important;
}

/* ---------- forms ---------- */
label, .col-form-label, .form-control-label { color: var(--sc-mist); }
.form-control, .custom-select, select.form-control, textarea.form-control,
.input-group-text, .intl-tel-input input {
    color: var(--sc-numeral); background-color: rgba(0, 0, 0, .35);
    border: 1px solid rgba(147, 166, 196, .3); border-radius: 7px;
}
.form-control::placeholder { color: #6f7f9c; }
.form-control:focus, .custom-select:focus {
    color: var(--sc-numeral); background-color: rgba(0, 0, 0, .45);
    border-color: var(--sc-ion); box-shadow: 0 0 0 3px rgba(63, 169, 255, .25);
}
.form-control:disabled, .form-control[readonly] { background-color: rgba(255, 255, 255, .04); color: var(--sc-mist); }
select.form-control option, .custom-select option { background: #0b1430; color: var(--sc-numeral); }
.input-group-text { color: var(--sc-mist); }
.input-group .btn-reveal-pw:hover, .input-group .btn-reveal-pw:active { background-color: rgba(0, 0, 0, .45); color: var(--sc-ion); }
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-group-append > .btn, .input-group > .input-group-prepend > .btn { border-radius: 7px; }
.custom-control-label::before { background-color: rgba(0, 0, 0, .35); border-color: rgba(147, 166, 196, .45); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sc-arc); border-color: var(--sc-ion); }
input[type=checkbox], input[type=radio] { accent-color: var(--sc-arc); }
.form-group .field-error-msg, .invalid-feedback { color: var(--error); }

/* ---------- tables ---------- */
.table, .table-list, table.dataTable { color: var(--sc-numeral); }
.table th, .table td, .table thead th, table.dataTable thead th, table.dataTable td { border-color: var(--sc-line); }
.table thead th, table.dataTable thead th {
    font: 600 11px var(--sc-f-body); letter-spacing: .1em; text-transform: uppercase;
    color: var(--sc-mist); border-bottom: 1px solid rgba(201, 166, 107, .35);
}
.table-striped tbody tr:nth-of-type(odd), table.dataTable.stripe tbody tr.odd { background-color: rgba(255, 255, 255, .025); }
.table-hover tbody tr:hover, table.table-list tbody tr:hover, table.dataTable tbody tr:hover { background-color: rgba(63, 169, 255, .07); color: var(--sc-numeral); }
table.dataTable tbody tr { background-color: transparent; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--sc-mist); }
.page-link { background: rgba(5, 9, 24, .7); border-color: var(--sc-line); color: var(--sc-ion); }
.page-link:hover { background: rgba(63, 169, 255, .14); border-color: var(--sc-line); color: #fff; }
.page-item.active .page-link { background: var(--sc-arc); border-color: var(--sc-ion); color: #fff; }
.page-item.disabled .page-link { background: transparent; border-color: var(--sc-line); color: #56637d; }

/* ---------- alerts, badges, labels ---------- */
.alert { border-radius: 10px; backdrop-filter: blur(10px); color: var(--sc-numeral); }
.alert-info, .alert-primary { background: rgba(63, 169, 255, .14); border: 1px solid rgba(143, 227, 255, .45); color: var(--sc-numeral); }
.alert-success { background: rgba(95, 211, 160, .12); border: 1px solid rgba(95, 211, 160, .5); color: #d4f5e6; }
.alert-warning { background: rgba(242, 179, 90, .13); border: 1px solid rgba(242, 179, 90, .5); color: #fbe6c6; }
.alert-danger { background: rgba(255, 123, 136, .12); border: 1px solid var(--error); color: #ffc2c8; }
.alert-secondary, .alert-light, .alert:has(form), .alert:has(small) {
    background: var(--sc-glass-2); border: 1px solid var(--sc-line); color: var(--sc-numeral);
}
.alert a, .alert .alert-link { color: var(--sc-ion); }
.badge { border-radius: 999px; letter-spacing: .04em; }
.badge-dark, .badge-secondary { background: rgba(147, 166, 196, .2); color: var(--sc-numeral); }
.badge-info, .badge-primary { background: rgba(63, 169, 255, .25); color: #d6eeff; }
.badge-success { background: rgba(95, 211, 160, .2); color: var(--success); }
.badge-warning { background: rgba(242, 179, 90, .2); color: var(--warning); }
.badge-danger { background: rgba(255, 123, 136, .2); color: var(--error); }
.label { border-radius: 999px; }

/* ---------- modals, popovers, tooltips ---------- */
.modal-content {
    background: rgba(8, 15, 38, .97); backdrop-filter: blur(16px);
    border: 1px solid var(--sc-line); border-radius: 14px; color: var(--sc-numeral);
}
.modal .modal-header, .modal-header { background: rgba(255, 255, 255, .03); border-color: var(--sc-line); }
.modal-header.bg-primary { background: linear-gradient(180deg, #1f76dd, #0f4a9a) !important; }
.modal-footer { border-color: var(--sc-line); }
.modal-title { font-family: var(--sc-f-display); letter-spacing: .05em; color: var(--sc-heading); }
.close, .close:hover { color: var(--sc-numeral); text-shadow: none; }
.modal-backdrop.show { opacity: .7; }
.modal-localisation .modal-content { background: rgba(8, 15, 38, .97); }
.popover { background: rgba(8, 15, 38, .97); border-color: var(--sc-line); }
.popover-body, .popover-header { color: var(--sc-numeral); background: transparent; border-color: var(--sc-line); }
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: rgba(8, 15, 38, .97); }
.client-alerts li a, .client-alerts .none { color: var(--sc-numeral); }

/* small WHMCS widgets with hard-coded light backgrounds */
.select-account, .select-account a { border-color: var(--sc-line); }
.select-account a:hover { background-color: rgba(63, 169, 255, .08); }
.continue-container, .invite-box { background-color: var(--sc-glass-2); border-color: var(--sc-line); }
#fullpage-overlay { background-color: rgba(5, 9, 24, .85); }
.progress { background: rgba(255, 255, 255, .08); }
.progress-bar { background: var(--sc-arc); }
.nav-tabs { border-color: var(--sc-line); }
.nav-tabs .nav-link { color: var(--sc-mist); }
.nav-tabs .nav-link:hover { border-color: var(--sc-line); color: #fff; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background: var(--sc-glass); border-color: var(--sc-line) var(--sc-line) transparent; color: var(--sc-heading);
}
.nav-pills .nav-link.active { background: var(--sc-arc); }
.tab-content { color: var(--sc-numeral); }

/* knowledge base and announcements */
.kb-search .form-control { border-radius: 999px 0 0 999px; }
.primary-content .card.kb-category { border-radius: 14px; }

/* ---------- shop: standard_cart (basket, checkout, domains) ---------- */
body #order-standard_cart { color: var(--sc-numeral); }
body #order-standard_cart label, body #order-standard_cart p.domain-renewal-desc { color: var(--sc-mist); }
body #order-standard_cart .card-header, body #order-standard_cart .panel-heading,
body #order-standard_cart .cart-sidebar .card-header { background: transparent; color: var(--sc-numeral); }
body #order-standard_cart .cart-sidebar .list-group-item { color: var(--sc-numeral); }
body #order-standard_cart .cart-sidebar .list-group-item .badge { background: rgba(147, 166, 196, .16); color: var(--sc-numeral); }
body #order-standard_cart .field, body #order-standard_cart .form-control {
    color: var(--sc-numeral); background-color: rgba(0, 0, 0, .35); border: 1px solid rgba(147, 166, 196, .3);
}
body #order-standard_cart .form-control:focus { border-color: var(--sc-ion); box-shadow: 0 0 0 3px rgba(63, 169, 255, .25); }
body #order-standard_cart .field[disabled], body #order-standard_cart .field[readonly],
body #order-standard_cart .form-control[disabled], body #order-standard_cart .form-control[readonly] { background-color: rgba(255, 255, 255, .04); }

/* basket */
body #order-standard_cart .cart-body .view-cart-items-header {
    background: rgba(255, 255, 255, .03); color: var(--sc-mist); border-color: var(--sc-line);
    font: 600 11px var(--sc-f-body); letter-spacing: .1em; text-transform: uppercase; border-radius: 14px 14px 0 0;
}
body #order-standard_cart .cart-body .view-cart-items .item,
body #order-standard_cart .cart-body .view-cart-empty {
    background: var(--sc-glass); color: var(--sc-numeral); border-color: var(--sc-line);
}
body #order-standard_cart .cart-body .view-cart-empty { color: var(--sc-mist); border-radius: 0 0 14px 14px; }
body #order-standard_cart .btn-remove-from-cart, body #order-standard_cart .cart-body .empty-cart .btn { color: var(--sc-mist); }
body #order-standard_cart .view-cart-tabs .nav-tabs a { color: var(--sc-mist); }
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true] {
    background: var(--sc-glass); border-color: var(--sc-line) var(--sc-line) transparent; color: var(--sc-heading);
}
body #order-standard_cart .view-cart-tabs .tab-content {
    background: var(--sc-glass); border: 1px solid var(--sc-line); border-radius: 0 14px 14px 14px;
}
body #order-standard_cart .view-cart-promotion-code { background: var(--sc-glass-2); border-color: rgba(201, 166, 107, .5); }
body #order-standard_cart .view-cart-gateway-checkout { background: var(--sc-glass-2); }

/* order summary: a glass panel with a brass total */
body #order-standard_cart .order-summary { background: var(--sc-glass); border: 1px solid var(--sc-line); border-radius: 14px; overflow: hidden; }
body #order-standard_cart .order-summary h2 {
    font: 700 18px/1.2 var(--sc-f-display); letter-spacing: .06em; color: var(--sc-heading);
    background: rgba(255, 255, 255, .03); border: 0; border-bottom: 1px solid var(--sc-line);
}
body #order-standard_cart .order-summary .summary-container { background: transparent; border: 0; color: var(--sc-numeral); }
body #order-standard_cart .order-summary .subtotal, body #order-standard_cart .order-summary .bordered-totals,
body #order-standard_cart .order-summary .summary-totals { border-color: var(--sc-line); }
body #order-standard_cart .order-summary .total-due-today .amt { font-family: var(--sc-f-mono); color: var(--sc-brass); }
body #order-standard_cart .order-summary .recurring-charges { color: var(--sc-mist); }
body #order-standard_cart .order-summary .btn-continue-shopping { color: var(--sc-ion); }
body #order-standard_cart .text-right .btn-checkout, body #order-standard_cart .btn-checkout {
    color: #fff; background: linear-gradient(180deg, #2c8cf0, #1560c4); border: 1px solid var(--sc-ion);
}
body #order-standard_cart .text-right .btn-checkout:hover, body #order-standard_cart .text-right .btn-checkout:focus {
    background: linear-gradient(180deg, #3a98f6, #1a6ad3); border-color: var(--sc-ion); box-shadow: 0 0 16px rgba(63, 169, 255, .55);
}
body #order-standard_cart .btn-checkout.disabled { opacity: .45; }
body #order-standard_cart .sub-heading span { background: var(--sc-void); color: var(--sc-heading); }
body #order-standard_cart .sub-heading { border-color: var(--sc-line); }

/* products, add-ons and domain choices */
body #order-standard_cart .products .product, body #order-standard_cart .cart-body .products .product {
    background: var(--sc-glass); border: 1px solid var(--sc-line); border-radius: 14px;
}
body #order-standard_cart .cart-body .products .product header, body #order-standard_cart .products .product header {
    background: rgba(255, 255, 255, .03); border-color: var(--sc-line);
}
body #order-standard_cart .products .product header span { color: var(--sc-heading); font-family: var(--sc-f-display); }
body #order-standard_cart .products .product div.product-desc { color: var(--sc-mist); }
body #order-standard_cart .products .product footer .btn-order-now {
    color: #fff; background: linear-gradient(180deg, #2c8cf0, #1560c4); border-color: var(--sc-ion);
}
body #order-standard_cart .product-info { background: var(--sc-glass-2); border-color: var(--sc-line); }
body #order-standard_cart .panel-addon { background: var(--sc-glass); border-color: var(--sc-line); }
body #order-standard_cart .panel-addon .panel-body label { color: var(--sc-numeral); }
body #order-standard_cart .panel-addon .panel-price { background: rgba(255, 255, 255, .05); }
body #order-standard_cart .domain-selection-options { background: var(--sc-glass); border-color: var(--sc-line); }
body #order-standard_cart .domain-selection-options .option { background: var(--sc-glass-2); }
body #order-standard_cart .domain-selection-options .option-selected { background: rgba(63, 169, 255, .12); }
body #order-standard_cart .transfer-not-eligible { background: var(--sc-glass-2); color: var(--sc-mist); }
body #order-standard_cart .cc-input-container, body #order-standard_cart #frmCheckout #creditCardInputFields {
    background: var(--sc-glass-2); border-color: var(--sc-line);
}
body #order-standard_cart .account-select-container div.account { background: var(--sc-glass-2); border-color: var(--sc-line); }
body #order-standard_cart .account-select-container div.account.active { background: rgba(63, 169, 255, .12); }
body #order-standard_cart .mc-promo, body .product-recommendations .product-recommendation {
    background: var(--sc-glass); border-color: var(--sc-line);
}
body #order-standard_cart .mc-promo .body, .product-recommendations .product-recommendation .body { background: var(--sc-glass-2); border-color: var(--sc-line); }
body #order-standard_cart .default-captcha { background: var(--sc-glass-2); border-color: var(--sc-line); color: var(--sc-mist); }

/* domain search: the yellow banner becomes a navy glass panel */
body .domain-checker-container {
    background: linear-gradient(135deg, rgba(21, 96, 196, .35), rgba(6, 12, 32, .85)) !important;
    border: 1px solid var(--sc-line); border-radius: 14px;
}
body .domain-checker-bg { background-image: none !important; }
body .domain-checker-container .input-group-box { background: rgba(5, 9, 24, .8); border: 1px solid rgba(143, 227, 255, .35); }
body .domain-checker-container .input-group-box .form-control { background: transparent; border: 0; color: var(--sc-numeral); }
body .spotlight-tlds { background: transparent; }
body .spotlight-tld { background: var(--sc-glass); border-color: var(--sc-line); color: var(--sc-numeral); }
body .spotlight-tld .btn:not(.domain-contact-support) { background: linear-gradient(180deg, #2c8cf0, #1560c4); border-color: var(--sc-ion); }
body .spotlight-tld .invalid, body .spotlight-tld .unavailable { background: var(--sc-glass-2); border-color: var(--sc-line); color: #56637d; }
body .domain-promotion, body .domain-promo-box { background: var(--sc-glass); border-color: var(--sc-line); color: var(--sc-numeral); }
body .tld-filters .badge, body .tld-filters a.badge-secondary {
    background: rgba(5, 9, 24, .7); color: var(--sc-mist); border: 1px solid var(--sc-line); padding: .45em .9em;
}
body .tld-filters .badge.badge-success, body .tld-filters a.badge:hover { background: rgba(63, 169, 255, .2); color: #fff; border-color: var(--sc-ion); }
body .domain-pricing .tld-pricing-header div, body .domain-pricing .tld-pricing-header div:nth-child(odd) {
    background: rgba(255, 255, 255, .04); color: var(--sc-mist); border-color: var(--sc-arc);
}
body .domain-pricing .tld-row { color: var(--sc-numeral); border-color: var(--sc-line); }
body .domain-pricing .tld-row.highlighted { background: rgba(63, 169, 255, .1); }
body .domain-pricing .bg-white { background: transparent !important; }
body div.domainresults div:not(.btn-group) { background: var(--sc-glass); color: var(--sc-numeral); }
body .suggested-domains .domain-lookup-suggestions-loader, body .suggested-domains .domain-lookup-suggestions-message { background: var(--sc-glass-2); }
body .domain-renewals, body .service-renewals, body .addon-renewals .service-renewal { background: var(--sc-glass-2); }
body .addon-renewals .service-renewal:nth-child(even), body .domain-renewals .domain-renewal:nth-child(even),
body .service-renewals .service-renewal:nth-child(even) { background: rgba(255, 255, 255, .03); }

body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link,
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active { background: var(--sc-glass); border-color: var(--sc-line) var(--sc-line) transparent; color: var(--sc-heading); }
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link:not(.active) { background: transparent; color: var(--sc-mist); }

/* ---------- shop: premium_comparison (product tables) ---------- */
body div#order-premium_comparison { color: var(--sc-numeral); }
body #order-premium_comparison h3, body #order-premium_comparison h4, body #order-premium_comparison h5,
body #order-premium_comparison .main-container h2 { color: var(--sc-heading); }
body #order-premium_comparison .price-table-container ul li { background: none; }
body #order-premium_comparison .price-table-container .price-table {
    background: var(--sc-glass); backdrop-filter: blur(16px);
    border: 1px solid var(--sc-line); border-radius: 14px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
body #order-premium_comparison .price-table-container .price-table .top-head {
    background: linear-gradient(180deg, rgba(21, 96, 196, .55), rgba(6, 12, 32, .4)); border-radius: 0;
}
body #order-premium_comparison .price-table-container .price-table .top-head .top-area { border-bottom-color: var(--sc-line); }
body #order-premium_comparison .price-table-container .price-table .top-head .top-area h4 {
    font: 700 19px/1.3 var(--sc-f-display); letter-spacing: .04em; color: var(--sc-heading);
}
body #order-premium_comparison .price-table-container .price-table .top-head .top-area p { color: var(--sc-mist); }
body #order-premium_comparison .price-table-container .price-table .top-head .price-area {
    border-top-color: rgba(255, 255, 255, .06); color: var(--sc-brass);
}
body #order-premium_comparison .price-table-container .price-table .top-head .price-area .price { font-family: var(--sc-f-mono); }
body #order-premium_comparison .price-table-container .order-button,
body #order-premium_comparison .price-table-container .order-button:hover {
    border-radius: 999px; border: 1px solid var(--sc-ion);
    background: linear-gradient(180deg, #2c8cf0, #1560c4); color: #fff;
}
body #order-premium_comparison .price-table-container .order-button:hover { box-shadow: 0 0 16px rgba(63, 169, 255, .55); }
body #order-premium_comparison .price-table-container .order-button.unavailable,
body #order-premium_comparison .price-table-container .order-button.unavailable:hover {
    background: rgba(147, 166, 196, .2); border-color: var(--sc-line); color: var(--sc-mist);
}
body #order-premium_comparison .price-table-container .price-table ul li {
    color: var(--sc-numeral); border-bottom-color: var(--sc-line);
}
body #order-premium_comparison .price-table-container .price-table ul li a { color: var(--sc-ion); }
body #order-premium_comparison .price-table-container .price-table .popular-plan {
    background: rgba(201, 166, 107, .18); border-bottom-color: var(--sc-line); color: var(--sc-brass);
}
body #order-premium_comparison .includes-features .head-area { background: linear-gradient(90deg, transparent, var(--sc-line), transparent) center / 100% 1px no-repeat; }
body #order-premium_comparison .main-container.price-01 .includes-features .head-area span,
body #order-premium_comparison .includes-features .head-area span {
    background: var(--sc-void); color: var(--sc-heading); font: 700 15px var(--sc-f-display); letter-spacing: .06em;
}
body #order-premium_comparison .includes-features ul.list-features li { color: var(--sc-numeral); }

/* ---------- Nexus's own hard-coded light backgrounds ----------
   Same selectors as templates/nexus/css/theme.css; this file loads after
   it, so equal specificity is enough. Covers client-area pages (home
   cards, tickets, upgrades, 2FA, invoices list) too. */
.alert:has(form) { background-color: var(--sc-glass-2); }
form[data-role=json-form] .has-error select.form-control { background-color: rgba(255, 123, 136, .12); }
.btn-default.focus, .open > .dropdown-toggle.btn-default { background-color: rgba(5, 9, 24, .85); color: var(--sc-numeral); }
.responsive-tabs-sm .nav-item a:hover { background-color: rgba(63, 169, 255, .08); }
.tiles .tile { background-color: var(--sc-glass); color: var(--sc-numeral); border-color: var(--sc-line); }
.tiles .tile:hover { background-color: rgba(63, 169, 255, .1); }
.tiles .tile .stat { color: var(--sc-brass); font-family: var(--sc-f-mono); }
.tiles .tile .title { color: var(--sc-mist); }
body .primary-content .client-home-cards .card .card-header .btn,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn,
body .primary-content .client-home-cards .mc-promo-login .card-header .btn {
    background: rgba(5, 9, 24, .7); color: var(--sc-numeral); border: 1px solid rgba(143, 227, 255, .35); border-radius: 999px;
}
body .primary-content .client-home-cards .card .card-header .btn:hover { border-color: var(--sc-ion); background: rgba(5, 9, 24, .85); }
body .primary-content .client-home-cards .card .card-footer,
body .primary-content .client-home-cards .mc-promo-manage .card-footer,
body .primary-content .client-home-cards .mc-promo-login .card-footer { background: rgba(255, 255, 255, .03); }
body .primary-content .client-home-cards .card .card-footer .btn-view-more { color: var(--sc-ion); }
body .secondary-cart-body #domainRenewals { background-color: transparent; }
.twofa-setup .backup-code { background-color: rgba(0, 0, 0, .35); color: var(--sc-brass); font-family: var(--sc-f-mono); }
.popover-user-notifications ul li a:hover { background-color: rgba(63, 169, 255, .1); }
.verification-banner { background-color: rgba(242, 179, 90, .1); color: var(--sc-numeral); border-color: rgba(242, 179, 90, .4); }
.md-preview table > thead > tr > th, .markdown-content table > thead > tr > th { background-color: rgba(255, 255, 255, .04); }
.store-order-container .store-domain-tabs li a { background-color: var(--sc-glass-2); color: var(--sc-mist); }
.upgrade .product-to-be-upgraded { background-color: var(--sc-glass-2); }
.view-ticket .posted-by, .view-ticket .attachment-list li figure { background-color: rgba(255, 255, 255, .04); color: var(--sc-mist); }
.ticketfeedbackstaffcont { background-color: var(--sc-glass-2); }
#registration .form-control[readonly] { background-color: rgba(255, 255, 255, .04); }
div.credit-card { background-color: var(--sc-glass-2); color: var(--sc-numeral); }
.invoice-summary-table td.total-row, tr.masspay-total td { background-color: rgba(201, 166, 107, .14); color: var(--sc-numeral); }
div.product-details div.product-icon { background-color: var(--sc-glass-2); color: var(--sc-brass); }
.featured-tld .price { background-color: rgba(255, 255, 255, .06); color: var(--sc-numeral); }
.domain-pricing .tld-row.highlighted { background: rgba(63, 169, 255, .1); }
.domain-pricing .tld-pricing-header .col-sm-4, .domain-pricing .tld-pricing-header div:nth-child(odd) { background-color: rgba(255, 255, 255, .04); }
.dataTables_wrapper table.table-list thead th.sorting_desc, .dataTables_wrapper table.table-list thead th.sorting_asc { background-color: rgba(63, 169, 255, .08); }
.table-list > tbody > tr:hover > td { background-color: rgba(63, 169, 255, .07); }
body .dataTables_wrapper .dataTables_filter label .form-control { background: rgba(0, 0, 0, .35); color: var(--sc-numeral); }
body #order-standard_cart .products .product,
body #order-standard_cart .cart-body .products .product header,
body #order-standard_cart .domain-selection-options { background: var(--sc-glass); }
body #order-standard_cart .cart-body .view-cart-empty { background-color: var(--sc-glass); }
body #order-standard_cart .domain-selection-options .option-selected { background: rgba(63, 169, 255, .12); }
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true],
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-selected=true] {
    background-color: var(--sc-glass); color: var(--sc-heading); border: 1px solid var(--sc-line); border-bottom: 0;
}
body #order-standard_cart .secondary-cart-body .view-cart-tabs .tab-content { background-color: var(--sc-glass); border-color: var(--sc-line); }
body #order-standard_cart .panel .panel-heading, body #order-standard_cart .panel .panel-footer { background: rgba(255, 255, 255, .03); color: var(--sc-numeral); }
body #order-standard_cart .domain-pricing .tld-filters .badge {
    background: rgba(5, 9, 24, .7); color: var(--sc-mist); border: 1px solid var(--sc-line); border-radius: 999px;
}
body #order-standard_cart .domain-pricing .tld-filters .badge:hover { color: #fff; border-color: var(--sc-ion); }
body #order-standard_cart .domain-pricing .tld-filters .badge.badge-success {
    background: rgba(63, 169, 255, .22); color: #fff; border-color: var(--sc-ion);
}
body #order-standard_cart .domain-pricing .bg-white { background: var(--sc-glass) !important; border-color: var(--sc-line); }
body #order-standard_cart .domain-pricing .bg-white .highlighted { background: rgba(63, 169, 255, .1); }
body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
body #order-standard_cart .domain-pricing .tld-pricing-header div,
body #order-standard_cart .domain-pricing .tld-pricing-header:has(~ .filtered-row) .tld-column {
    background: rgba(255, 255, 255, .04); color: var(--sc-mist);
}
body #order-standard_cart .domain-promo-box { background: var(--sc-glass); color: var(--sc-numeral); border-color: var(--sc-line); }

/* ---------- client area (logged in) ---------- */
/* MarketConnect "Recommended for you" advert on the client home page.
   (Switching promotions off under Setup > MarketConnect does the same
   without loading it.) */
.client-home-cards .promo-container, .promo-container, #promotions-slider { display: none !important; }

/* home page cards: dark glass headers, bronze titles, blue pill buttons */
.client-home-cards .card-header,
body .primary-content .client-home-cards .card .card-header {
    background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--sc-line);
}
.client-home-cards .card-title, .client-home-cards .card-header .card-title { color: var(--sc-heading); }
.client-home-cards .card-title i { color: var(--sc-brass); }
.client-home-cards .card-header .btn,
body .primary-content .client-home-cards .card .card-header .btn,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn,
body .primary-content .client-home-cards .mc-promo-login .card-header .btn {
    color: #fff; background: linear-gradient(180deg, #2c8cf0, #1560c4); border: 1px solid var(--sc-ion);
    border-radius: 999px; font-family: var(--sc-f-body); font-weight: 600; letter-spacing: .02em; text-transform: none;
}
.client-home-cards .card-header .btn:hover,
body .primary-content .client-home-cards .card .card-header .btn:hover {
    color: #fff; background: linear-gradient(180deg, #3a98f6, #1a6ad3); border-color: var(--sc-ion);
    box-shadow: 0 0 14px rgba(63, 169, 255, .55);
}
.client-home-cards small { color: var(--sc-mist); }
body .primary-content .client-home-cards .card .btn-success { color: #fff; background: linear-gradient(180deg, #2c8cf0, #1560c4); border-color: var(--sc-ion); }
body .primary-content .client-home-cards .card .card-footer { background: rgba(255, 255, 255, .03); border-top: 1px solid var(--sc-line); }
.client-home-cards .card-body, .client-home-cards .list-group-item { color: var(--sc-numeral); }
.client-home-cards .list-group-item, body .primary-content .client-home-cards .card .list-group .list-group-item { border-color: var(--sc-line); }

/* stat tiles */
.tiles .tile { background: var(--sc-glass); border-color: var(--sc-line); }
.tiles .tile .title { color: var(--sc-mist); }
.tiles .tile i { color: rgba(143, 227, 255, .3); }
.tiles .tile:hover i { color: var(--sc-ion); }

/* lists: services, domains, invoices, quotes, tickets, emails */
.dataTables_wrapper table.table-list, table.table-list {
    background: var(--sc-glass); border: 1px solid var(--sc-line); border-radius: 14px; color: var(--sc-numeral);
}
table.table-list thead th, .dataTables_wrapper table.table-list thead th {
    background-color: rgba(255, 255, 255, .03); color: var(--sc-mist); border-color: rgba(201, 166, 107, .35);
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc { background-color: rgba(63, 169, 255, .1); color: var(--sc-numeral); }
.table-list > tbody > tr > td, table.table-list tbody td {
    background-color: transparent; color: var(--sc-numeral); border-color: var(--sc-line);
}
.table-list > tbody > tr:hover > td { background-color: rgba(63, 169, 255, .07); }
.table-list > tbody > tr > td .text-muted, table.table-list tbody td small { color: var(--sc-mist) !important; }
.dataTables_wrapper .dataTables_filter label .form-control,
body .dataTables_wrapper .dataTables_filter label .form-control {
    background: rgba(0, 0, 0, .35); color: var(--sc-numeral); border: 1px solid rgba(147, 166, 196, .3);
}
.dataTables_wrapper .dataTables_length select { background: rgba(0, 0, 0, .35); color: var(--sc-numeral); border-color: rgba(147, 166, 196, .3); }

/* navigation: tighter pills so a logged-in menu fits on one row */
header.header .main-navbar-wrapper .navbar-nav > li { margin: 0 !important; padding: 0 !important; }
header.header .main-navbar-wrapper .navbar-nav > li > a { margin: 0 !important; }
header.header .main-navbar-wrapper .navbar-nav > li > a,
header.header .main-navbar-wrapper .navbar-nav > .nav-item > a { padding: .58em 1em !important; font-size: 13.5px; }

/* ---------- footer ---------- */
footer.footer {
    background: rgba(5, 9, 24, .82); backdrop-filter: blur(10px);
    border-top: 1px solid var(--sc-line); color: var(--sc-mist);
}
footer.footer .nav-link { color: var(--sc-mist); }
footer.footer .nav-link:hover { color: var(--sc-ion); }
footer.footer .container { text-align: center; }
footer.footer .list-inline:not(:has(li)) { display: none; }   /* no social links or language switch */
footer.footer .nav { justify-content: center; }
footer.footer .powered-by p { margin: 6px 0 4px; font-size: 13px; color: var(--sc-mist); }
footer.footer .powered-by a { color: var(--sc-ion); }
footer.footer .copyright { color: var(--sc-mist); text-align: center; font-size: 12.5px; margin-top: 4px; }
footer.footer .btn { color: var(--sc-numeral); border-color: rgba(143, 227, 255, .35); background: rgba(5, 9, 24, .7); }

/* ---------- phones and narrow screens ---------- */
@media (max-width: 1199.98px) {
    header.header { min-height: 0; }
    header.header::before {      /* cropped photo, darkened so the artwork and menu stay readable */
        background: linear-gradient(100deg, rgba(5, 9, 24, .9) 30%, rgba(5, 9, 24, .45)),
                    var(--sc-void) url("../img/bg-clock-monitor-small.jpg") 72% center / cover no-repeat;
        -webkit-mask-image: none; mask-image: none;
    }
    header.header > .navbar:not(.main-navbar-wrapper) > .container { margin-top: 18px !important; }
    header.header .navbar-brand .logo-img { height: clamp(40px, 9vw, 72px); }
    header.header .main-navbar-wrapper .navbar-collapse {
        margin-top: 10px; padding: 12px; border-radius: 14px;
        background: rgba(5, 9, 24, .92); border: 1px solid var(--sc-line);
    }
}
@media (max-width: 575.98px) {
    header.header { min-height: 170px; }
    section#main-body { min-height: calc(100vh - 170px - 40px - 175px); }
    header.header > .navbar:not(.main-navbar-wrapper) > .container { flex-wrap: wrap; row-gap: 12px; }
    header.header .navbar-brand { flex: 1 0 100%; margin: 0; }
    header.header .navbar-brand .logo-img { height: auto; width: min(100%, 360px); max-width: 100%; }
    header.header .toolbar { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }