/* ==========================================================================
   Zealous Host — custom.css (Lagom dark theme)
   Tokens follow https://zealous.host/design.html
   Fonts (Inter, JetBrains Mono) are loaded by the link tags in the head
   hook of custom_order_form.php, not by an @import here.

   Sections
     1. Theme overrides
     2. Header, footer and page background grid
     3. Order form option cards (location, software, server IP, storage)
     4. Plan pages (store)
     5. Configure page
     6. Cart
     7. Client area (dashboard and sidebar)
   ========================================================================== */


/* ==========================================================================
   1. THEME OVERRIDES
   Several rules here share specificity and rely on source order, so keep
   this section in this order.
   ========================================================================== */

.lagom-dark-mode {
    --font-family-base: 'Inter', sans-serif;
}

.btn, .btn-primary, .btn-default, .form-control, .selectize-control.form-control .selectize-input {
    border-radius: 8px !important;
}
.item-price,
.item-value {
    font-family: 'JetBrains Mono', monospace !important;
}
.lagom-dark-mode {
  --app-nav-top-bg: #0A1128;
  --app-nav-left-bg: #0A1128;
  --mob-app-nav-header-bg: #0A1128;
  --primary-block-bg: #001F54; /* Surface */
  --ui-block-bg-form: #001F54; /* Surface */
  --panel-bg: #001F54; /* Surface — covers other .panel elements too */
  --input-bg: #0A1128; /* Background */
  --input-focus-bg: #0A1128; /* Background */
  --input-hover-bg: #0A1128; /* Background — covers hover state too */
  --dropdown-link-hover-bg: #034078; /* Surface 2 */
  --dropdown-link-hover-color: #F0F4F8; /* Text */
  --input-focus-border-color: #6fb3d9;
  --panel-summary-bg: #001F54;
  --dark-mode-brand-primary: #1282A2;          /* Accent: recolors the theme's brand blue (links, tile numbers, nav underline, icons) */
  --dark-mode-brand-primary-lighter: #6FB3D9;  /* Accent light */
}
.page-login-secondary.page-login-secondary .main-body {
  background: #0A1128 !important;
}
.main-footer .footer-bottom {
    background: #0A1128;
    border-top: none !important;
}
.login-wrapper,
.login-body {
    background: #001F54;
    border-radius: 16px !important;
}
.panel-switch {
    border: 1px solid #034078 !important;
}
.panel-switch .panel-body {
    background: transparent !important;
}
.panel-switch:hover,
.panel-switch:focus-visible {
    border-color: #034078 !important;
}
.switch--text .switch__checkbox:checked + .switch__container {
    background: #4ADE80 !important;
}
.switch__container {
    background: #EF5350 !important;
}
.switch--text .switch__checkbox + .switch__container::after {
    color: #F0F4F8 !important;
}
.btn-primary {
    background: #1282A2 !important;
    color: #0A1128 !important;
    border-color: transparent !important;
}
.btn-primary:hover {
    background: #16a0c9 !important;
    border-color: transparent !important;
}
.login-footer a {
    color: #6FB3D9 !important;
}
.btn-default.btn-outline.focus, .btn-default.btn-outline:focus, .btn-default.btn-outline:focus-visible, .btn-default.btn-outline:not(:disabled):not(.disabled):active, .btn-default.btn-outline:not(:disabled):not(.disabled):hover, .btn-outline.focus, .btn-outline:focus, .btn-outline:focus-visible, .btn-outline:not(:disabled):not(.disabled):active, .btn-outline:not(:disabled):not(.disabled):hover {
    background-color: transparent !important;
    border-color: #6fb3d9 !important;
}
.btn-default.btn-outline, .btn-outline {
    background-color: transparent !important;
    border-color: #034078 !important;
}
.dropdown-menu {
    background: #001F54 !important;
}
#Primary_Navbar-Domains .dropdown-menu,
#Primary_Navbar-footer_extended\.products .dropdown-menu,
#Primary_Navbar-Support .dropdown-menu {
    padding: 8px;
}
#Primary_Navbar-Domains .dropdown-menu li > a,
#Primary_Navbar-footer_extended\.products .dropdown-menu li > a,
#Primary_Navbar-Support .dropdown-menu li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
#Primary_Navbar-Domains .dropdown-menu li > a:hover,
#Primary_Navbar-footer_extended\.products .dropdown-menu li > a:hover,
#Primary_Navbar-Support .dropdown-menu li > a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
#Primary_Navbar-Domains .dropdown-menu li > a i,
#Primary_Navbar-footer_extended\.products .dropdown-menu li > a i,
#Primary_Navbar-Support .dropdown-menu li > a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 14px;
}
#Primary_Navbar-Domains .dropdown-menu .menu-item-content,
#Primary_Navbar-footer_extended\.products .dropdown-menu .menu-item-content,
#Primary_Navbar-Support .dropdown-menu .menu-item-content {
    font-weight: 500;
}
#Primary_Navbar-Domains .nav-divider,
#Primary_Navbar-footer_extended\.products .nav-divider,
#Primary_Navbar-Support .nav-divider {
    margin: 8px 4px;
    opacity: 0.15;
}
.lagom-layout-top .app-nav-menu .menu > li > a:not(.btn) {
    color: #8FA3BF !important;
}
.lagom-layout-top .app-nav-menu .menu > li.active > a:focus:not(.btn), .lagom-layout-top .app-nav-menu .menu > li.active > a:hover:not(.btn), .lagom-layout-top .app-nav-menu .menu > li.active > a:not(.btn), .lagom-layout-top .app-nav-menu .menu > li.open > a:focus:not(.btn), .lagom-layout-top .app-nav-menu .menu > li.open > a:hover:not(.btn), .lagom-layout-top .app-nav-menu .menu > li.open > a:not(.btn), .lagom-layout-top .app-nav-menu .menu > li > a:focus:not(.btn), .lagom-layout-top .app-nav-menu .menu > li > a:hover:not(.btn) {
    color: #F0F4F8 !important;
}
.ls-caret {
    /* Hide the original font-icon glyph */
    font-size: 0 !important;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;

    /* Replace with Lucide chevron-down SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F0F4F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ls-caret::before {
    content: "" !important;
}
#Secondary_Navbar-Currencies-153 .dropdown-menu {
    background: #001F54 !important; /* Surface */
    border-radius: 10px !important; /* Default radius */
    border: none;
    overflow: hidden;
}

#Secondary_Navbar-Currencies-153 .dropdown-menu-item a {
    color: #F0F4F8 !important; /* Text */
    padding: 10px 16px;
    display: block;
}

#Secondary_Navbar-Currencies-153 .dropdown-menu-item:hover,
#Secondary_Navbar-Currencies-153 .dropdown-menu-item.active {
    background: #034078 !important; /* Surface 2 / border */
}

#Secondary_Navbar-Currencies-153 .dropdown-menu-item.active a {
    color: #F0F4F8 !important; /* Text */
}
#Secondary_Navbar-Currencies-153 .dropdown-menu-item.active,
#Secondary_Navbar-Currencies-153 .dropdown-menu-item:hover {
    background-color: #034078 !important; /* Surface 2 */
}
.package.package {
    background: #001F54 !important;
    border-radius: 16px !important;
}
.panel-summary-primary {
    border-radius: 16px !important; /* Cards/panels radius */
}
.panel,
.panel-form {
    border-radius: 16px !important; /* Cards/panels radius */
}
.login-body .section,
.login-body .section-body {
    overflow: hidden;
    border-radius: 16px;
}
.panel-group-condensed > .panel {
    border-radius: 0 !important;
}

.panel-group-condensed > .panel:first-child {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.panel-group-condensed > .panel:last-child {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* NOTE — still-open conflict: .btn-default:focus/:focus-visible/.focus get border-color #034078
   (rule further down wins, same specificity, declared later). :hover keeps #6fb3d9 from this rule
   since the later rule doesn't include :hover. Left as-is since it wasn't something we resolved. */
.btn-default.focus, .btn-default:focus, .btn-default:focus-visible, .btn-default:hover {
    background-color: transparent !important;
    border-color: #6fb3d9 !important;
}

/* NOTE — still-open conflict: this rule's background (#1282A2) is overridden for focus/focus-visible
   states by the :hover-targeted rule directly below it, since that selector list also matches focus.
   Result: focus and hover currently look identical (#16a0c9). Left as-is. */
.btn-primary-faded.focus, .btn-primary-faded:focus, .btn-primary-faded:focus-visible, .btn-primary-faded {
    background: #1282A2 !important;
    border-color: transparent !important;
}
.btn-primary-faded.focus, .btn-primary-faded:focus, .btn-primary-faded:focus-visible, .btn-primary-faded:hover {
    background: #16a0c9 !important;
    border-color: transparent !important;
}
.btn-primary-faded {
    color: #0A1128 !important;
}
.search-group-combined:not(.domain-search-advanced) .search-field .inline-form-prefix {
    background: #0A1128 !important;
}
.banner-secondary .domain-search-input.search-group-combined, .search-box-secondary .domain-search-input.search-group-combined {
    background: #0A1128 !important;
}
.selectize-control.form-control .selectize-input.items > div {
    background: #034078 !important; /* Surface 2 */
    color: #F0F4F8 !important; /* Text */
    border: 1px solid #034078 !important;
}
.selectize-control.form-control .selectize-dropdown {
    background-color: transparent !important;
    border-radius: 10px !important;
}

.selectize-control.form-control .selectize-dropdown .option {
    color: #F0F4F8 !important; /* Text */
}
.featured-tld {
    background-color: #001F54 !important;
}
.featured-tld-price {
    border-top: 0px !important;
}
.selectize-control.form-control .selectize-dropdown-content {
    background-color: #001F54 !important;
}
.selectize-control.form-control .selectize-dropdown .option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.table > tbody > tr > td, .table > tfoot > tr > td, table > tbody > tr > td, table > tfoot > tr > td {
    background-color: #001F54 !important;
    border-top: 1px solid #034078 !important;
    border-bottom-color: #034078 !important;
}
.table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th, table > caption + thead > tr:first-child > td, table > caption + thead > tr:first-child > th, table > colgroup + thead > tr:first-child > td, table > colgroup + thead > tr:first-child > th, table > thead:first-child > tr:first-child > td, table > thead:first-child > tr:first-child > th {
    background-color: #001F54 !important;
}
.table-container .dataTables_info, .table-container .dataTables_length {
    background-color: #001F54 !important;
    border-top: 1px solid #034078 !important;
}
.pagination > .disabled > .page-link, .pagination > .disabled > .page-link:focus, .pagination > .disabled > .page-link:hover, .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    background: #1282A2 !important;
    color: #0A1128 !important;
}
.pagination > .active .page-link, .pagination > .active .page-link:focus, .pagination > .active .page-link:hover, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background: #001F54 !important;
    color: #F0F4F8 !important;
    border: 1px solid #034078 !important;
}
.table-container {
    background: #001F54 !important;
}
.tld-table .table > tbody > tr:not(:last-child) {
    border-bottom: 1px solid #034078 !important;
}
.selectize-control.form-control .selectize-input,
.selectize-control.form-control .selectize-input:hover,
.selectize-control.form-control .selectize-input.dropdown-active {
    border-color: #034078 !important;
}
select.form-control option {
    background: transparent !important;
}
.form-control:focus, input[type="password"]:not(.form-control):focus, input[type="text"]:not(.form-control):focus, select:not(.form-control):focus {
    border-color: #034078 !important;
}
.form-control:hover, input[type="password"]:not(.form-control):hover, input[type="text"]:not(.form-control):hover, select:not(.form-control):hover {
    border-color: #6fb3d9 !important;
}
.message {
    background: #001F54 !important;
}
.panel-sidebar.panel-client-details {
    background: #001F54 !important;
}
.page-clientareahome .tile {
    background: #001F54 !important;
}
.tld-search-header,
.tld-header,
.tld-search.search-group {
    background: #0A1128 !important; /* matches page Background token */
}
.spotlight {
    background: #001F54 !important;
    border: 1px solid #034078 !important;
}
.form-control:disabled, .form-control:disabled:focus, .form-control:disabled:hover, .form-control[disabled], .form-control[disabled]:focus, .form-control[disabled]:hover, .form-control[readonly], .form-control[readonly]:focus, .form-control[readonly]:hover, fieldset[disabled] .form-control, fieldset[disabled] .form-control:focus, fieldset[disabled] .form-control:hover, fieldset[disabled] input[type="password"]:not(.form-control), fieldset[disabled] input[type="password"]:not(.form-control):focus, fieldset[disabled] input[type="password"]:not(.form-control):hover, fieldset[disabled] input[type="text"]:not(.form-control), fieldset[disabled] input[type="text"]:not(.form-control):focus, fieldset[disabled] input[type="text"]:not(.form-control):hover, fieldset[disabled] select:not(.form-control), fieldset[disabled] select:not(.form-control):focus, fieldset[disabled] select:not(.form-control):hover, input[type="password"]:not(.form-control):disabled, input[type="password"]:not(.form-control):disabled:focus, input[type="password"]:not(.form-control):disabled:hover, input[type="password"]:not(.form-control)[disabled], input[type="password"]:not(.form-control)[disabled]:focus, input[type="password"]:not(.form-control)[disabled]:hover, input[type="password"]:not(.form-control)[readonly], input[type="password"]:not(.form-control)[readonly]:focus, input[type="password"]:not(.form-control)[readonly]:hover, input[type="text"]:not(.form-control):disabled, input[type="text"]:not(.form-control):disabled:focus, input[type="text"]:not(.form-control):disabled:hover, input[type="text"]:not(.form-control)[disabled], input[type="text"]:not(.form-control)[disabled]:focus, input[type="text"]:not(.form-control)[disabled]:hover, input[type="text"]:not(.form-control)[readonly], input[type="text"]:not(.form-control)[readonly]:focus, input[type="text"]:not(.form-control)[readonly]:hover, select:not(.form-control):disabled, select:not(.form-control):disabled:focus, select:not(.form-control):disabled:hover, select:not(.form-control)[disabled], select:not(.form-control)[disabled]:focus, select:not(.form-control)[disabled]:hover, select:not(.form-control)[readonly], select:not(.form-control)[readonly]:focus, select:not(.form-control)[readonly]:hover {
    background: #0A1128 !important;
}
.panel-cart .cart-item:not(:last-child) {
    border-bottom: 1px solid #034078 !important;
}
.panel-cart .cart-heading {
    border-color: #034078 !important;
}
.panel-cart .cart-item {
    background: #001F54 !important;
}
.panel-cart .cart-item-pricing::after {
    background: #034078 !important;
}

.panel-footer {
    border-top: 1px solid #034078 !important;
}
.panel-summary .panel-footer {
    border-top: transparent !important;
}
.panel-sidebar:not(.panel-summary) .panel-footer {
    border-top: none !important;
}
.btn-default.focus, .btn-default:focus, .btn-default:focus-visible, .btn-default {
    border-color: #034078 !important;
}
.bottom-action-sticky {
    background: transparent !important;
    position: static !important;
}
.paymentGatewaysContainer .section-body,
.section {
    border-radius: 16px;
}
.panel-group.panel-group-condensed {
    border-radius: 16px !important;
    overflow: hidden;
}
.panel-group-condensed .panel-heading {
    border-bottom: none !important;
}
.alert.alert-primary.alert-danger::before {
    background: #EF5350 !important;
}
.alert.alert-primary {
    border-radius: 16px !important;
}
.alert.alert-primary::before {
    border-radius: 16px 0 0 16px !important;
}
.alert.alert-primary.alert-danger {
    background: rgba(239, 83, 80, 0.1) !important;
    border: 1px solid rgba(239, 83, 80, 0.3) !important;
}
.lagom:not(.nav-mobile-dropdown) .app-nav-menu {
    background: #0A1128 !important;
}
.dropdown-menu:not(.dropdown-menu-collapse) > li {
    border-left: none !important;
}
.banner-secondary .form-control, .banner-secondary .input-group, .search-box-secondary .form-control, .search-box-secondary .input-group {
    background: #0A1128 !important;
}
.banner-secondary, .search-box-secondary {
    background: #001F54 !important;
}
.panel-default > .panel-heading {
    border-color: #034078 !important;
}
.panel-sidebar.panel-client-details .panel-footer .btn-success,
.panel-sidebar.panel-client-contacts .panel-footer .btn-default {
    background-color: transparent !important;
    border: 1px solid #034078 !important;
    color: #F0F4F8 !important;
}
.panel-sidebar.panel-client-details .panel-footer .btn-success:hover,
.panel-sidebar.panel-client-details .panel-footer .btn-success:focus,
.panel-sidebar.panel-client-contacts .panel-footer .btn-default:hover,
.panel-sidebar.panel-client-contacts .panel-footer .btn-default:focus {
    border-color: #6fb3d9 !important;
    background-color: transparent !important;
}
/* Domain register card */
.client-home-panels .panel-domain-register {
    background: #001F54 !important;
    border: 1px solid #034078 !important;
}

/* Register + Transfer buttons — same treatment */
#registerDomainPanel .input-group-btn .btn-success,
#registerDomainPanel .input-group-btn .btn-default {
    background-color: transparent !important;
    border: 1px solid #034078 !important;
    color: #F0F4F8 !important;
}
#registerDomainPanel .input-group-btn .btn-success:hover,
#registerDomainPanel .input-group-btn .btn-success:focus,
#registerDomainPanel .input-group-btn .btn-default:hover,
#registerDomainPanel .input-group-btn .btn-default:focus {
    border-color: #6fb3d9 !important;
    background-color: transparent !important;
}
.product-details .product-info {
    background: #001F54 !important;
}
.table-top {
    border-bottom: 1px solid #034078 !important;
}
.list-info-bordered li:not(:last-of-type) {
    border-bottom: 1px solid #034078 !important;
}
.invoice {
    background: #001F54 !important;
}
#btnPayNow.btn-success {
    background: #1282A2 !important;
    border-color: transparent !important;
    color: #0A1128 !important;
}
#btnPayNow.btn-success:hover {
    background: #16a0c9 !important;
    border-color: transparent !important;
}
.dropdown-menu-search {
    overflow: visible !important;
    max-height: none !important;
    border: 1px solid #034078 !important;
    border-radius: 10px !important;
}
.ticket-creator {
    background-color: #001F54 !important;
    border: 1px solid #424242 !important;
}
.ticket-creator:hover {
    border: 1px solid #6fb3d9 !important;
}
.panel-sidebar.panel-styled-group .list-group {
    background: #001F54 !important;
}
.list-group-item-link:focus, .list-group-item-link:hover, a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover {
    background-color: #001F54 !important;
}
.ticket-reply::before {
    background: #1282A2 !important;
}
.ticket-reply {
    background: #001F54 !important;
    border: 1px solid #034078 !important;
}
.panel-ticket-reply .tab-no-data {
    background: #0A1128 !important;
    border: 1px solid #034078 !important;
}
.modal-content {
    background: #001F54 !important;
}
.lagom-dark-mode #inputDescription {
    background-color: #0A1128 !important;
    color: #F0F4F8 !important;
}
.form-actions .btn + .btn {
    margin-left: 8px !important;
}

/* Recent News + Active Products/Services hover rows — radius is baked into the base
   element (with overflow: hidden) rather than set only on :hover, so the corner doesn't
   flash/clip during the hover transition. */
#announcementsPanel .list-group-item,
.client-home-panels .panel-active-services .list-group-item {
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    transition: none !important;
}
#announcementsPanel .list-group-item:hover,
.client-home-panels .panel-active-services .list-group-item:hover {
    background: #034078 !important;
}
.client-home-panels .panel-active-services .list-group-item:hover .btn-default {
    border-color: #6fb3d9 !important;
}
.client-home-panels .panel-active-services .list-group-item .btn-default {
    transition: none !important;
}
.feature-boxed {
    background: #001F54 !important;
}
.tile {
    background: #001F54 !important;
}
.input-group-addon {
    background-color: #0A1128 !important;
    border: 1px solid #034078 !important;
}
.banner-secondary .input-group-addon, .search-box-secondary .input-group-addon {
    color: #F0F4F8 !important;
}
.feature-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left;
}

.feature-list li {
    text-align: left;
    padding-left: 0 !important;
    list-style-type: none !important;
}

.feature-list li::marker {
    display: none !important;
    content: "" !important;
}
.main-content {
    display: flex;
    flex-direction: column;
}

.main-content > .section:not(#products) {
    order: -1;
}

.main-content > #products {
    order: 1;
}
.panel-summary {
    background: #001F54 !important;
}
.summary-list-configoptions {
    background: #0A1128 !important;
    border: 1px solid #034078 !important;
    border-radius: 8px !important;
}
.panel-cart .cart-item-config {
    background: #0A1128 !important;
    border: 1px solid #034078 !important;
    border-radius: 8px !important;
}
.search-box {
    background: #001F54 !important;
    border: 1px solid #034078 !important;
}
.country-list {
    background: #001F54 !important; /* Surface */
    border: 1px solid #034078 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 10px !important; /* Default radius */
    border-bottom-right-radius: 10px !important;
    overflow: hidden;
}

.country-list .country {
    color: #F0F4F8 !important; /* Text */
}

.country-list .country:hover,
.country-list .country.active {
    background: #034078 !important; /* Surface 2 / border */
    color: #F0F4F8 !important; /* Text */
}
div[menuitemname="Knowledgebase Suggestions"] {
    display: none !important;
}
.panel-sidebar:not(.panel-summary).panel-register.panel-sidebar-default {
    background: #001F54 !important;
}
form[action="/domainchecker.php"] .input-group-addon {
    border: none !important;
}
.domain-suggestion.list-group-item {
    background: #001F54 !important;
    border-color: #034078 !important;
}

.domain-suggestion.list-group-item:hover {
    background: #034078 !important;
}
.lagom-dark-mode #stripeElements .StripeElement {
    background-color: #0A1128 !important;
}
.tab.tab-boxed {
    background: #001F54 !important;
}
.list-group {
    background: #001F54 !important;
    border: 1px solid #034078 !important;
}
.dropdown-select-list .dropdown-list {
    border: 1px solid #034078 !important;
}


/* ==========================================================================
   2. HEADER, FOOTER AND PAGE BACKGROUND GRID
   ========================================================================== */

/* Logo: larger, pulled left so its edge lines up with the content edge */
img[alt="Zealous Host LLC"] {
    height: 90px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin-left: -30px !important;
}
@media (max-width: 767px) {
    img[alt="Zealous Host LLC"] {
        height: 36px !important;
    }
}

/* Logo and cart/currency controls move down together so they stay level */
a.logo,
ul.top-nav {
    margin-top: 8px;
}

/* Page background grid — matches .hero-grid on zealous.host:
     lines:  rgba(18,130,162,.14) 1px on a 42px cell, anchored top-left
     fade:   mask-image radial-gradient(ellipse 70% 60% at 30% 30%, #000 0, transparent 75%)
   A mask would also fade the page content, so the same fade is done with a cover
   gradient in the page background color (identical result over a solid background).
   --zh-grid-hero is the height of the main-site hero (about 650px) that the
   60% / 30% figures were measured against. Opaque cards and panels sit on top. */
main.app-main {
    --zh-grid-size: 42px;
    --zh-grid-line: rgba(18, 130, 162, 0.14);
    --zh-grid-hero: 650px;
    background:
        radial-gradient(ellipse 70% calc(var(--zh-grid-hero) * 0.6) at 30% calc(var(--zh-grid-hero) * 0.3), rgba(10, 17, 40, 0) 0, #0A1128 75%) no-repeat,
        linear-gradient(var(--zh-grid-line) 1px, transparent 1px) 0 0 / var(--zh-grid-size) var(--zh-grid-size),
        linear-gradient(90deg, var(--zh-grid-line) 1px, transparent 1px) 0 0 / var(--zh-grid-size) var(--zh-grid-size),
        #0A1128 !important;
}
/* If the theme paints its own opaque background on .main-body, the grid is hidden behind it */
.main-body {
    background: transparent !important;
}

/* Footer: on phones, leave room so the floating chat bubble doesn't cover the copyright line */
@media (max-width: 767px) {
    .main-footer .footer-bottom {
        padding-bottom: 72px;
    }
}


/* ==========================================================================
   3. ORDER FORM OPTION CARDS
   ========================================================================== */

/* Location picker — flag + live ping display */
.panel-check .check-title .location-flag {
    margin-right: 8px;
    width: 20px;
    height: 15px;
    border-radius: 2px;
    vertical-align: middle;
    object-fit: cover;
}
.panel-check .location-ping {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #8FA3BF;
    margin-top: 4px;
}
.panel-check .location-ping .value {
    color: #F0F4F8;
}
.panel-check .best-ping-badge {
    display: inline-block;
    background: #4ADE80;
    color: #0A1128;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
}

/* Checkboxes: rounded square with a tick, per the design system.
   Radios (.radio-styled) keep the theme's round dot, so single-choice and
   tick-to-select controls look different. */
.checkbox-styled {
    position: relative;
    border-radius: 6px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.checkbox-styled.checked {
    border-radius: 6px !important;
    background: #1282A2 !important;
    border-color: #1282A2 !important;
}
.checkbox-styled::before {
    content: none !important;
}
.checkbox-styled::after {
    content: "" !important;
    position: absolute !important;
    top: 46% !important;
    left: 50% !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #0A1128 !important;
    border-width: 0 2px 2px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: translate(-50%, -50%) rotate(45deg) scale(0) !important;
    transition: transform 0.15s ease !important;
}
.checkbox-styled.checked::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1) !important;
}

.panel-check-group.row {
    display: flex;
    flex-wrap: wrap;
}
.panel-check-group.row > .col-sm-4 {
    flex: 1 1 0;
    max-width: none;
}

/* Location group grid — 3 columns desktop, collapsing on smaller screens */
.panel-check-group.row.location-group-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.panel-check-group.row.location-group-grid > [class*="col-"] {
    flex: none;
    max-width: none;
    width: auto;
}
.panel-check-group.row.location-group-grid .panel-check {
    min-height: 120px;
}
.location-group-grid .check-subtitle {
    display: none;
}
@media (max-width: 767px) {
    .panel-check-group.row.location-group-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .panel-check-group.row.location-group-grid {
        grid-template-columns: 1fr;
    }
    /* One card per row: no need for the desktop minimum height */
    .panel-check-group.row.location-group-grid .panel-check {
        min-height: 0;
    }
}

/* Software group grid — 3 columns desktop, collapsing on smaller screens */
.panel-check-group.row.software-group-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.panel-check-group.row.software-group-grid > [class*="col-"] {
    flex: none;
    max-width: none;
    width: auto;
}
.software-group-grid .software-icon {
    width: 64px;
    height: 64px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 32px;
    color: #F0F4F8;
    vertical-align: middle;
    margin-right: 8px;
}
.software-group-grid img.software-icon {
    object-fit: contain;
    background: transparent;
}
.software-group-grid .check-subtitle {
    display: none;
}
@media (max-width: 767px) {
    .panel-check-group.row.software-group-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .panel-check-group.row.software-group-grid {
        grid-template-columns: 1fr;
    }
}

/* Server IP + Storage grids */
.panel-check-group.row.ip-group-grid,
.panel-check-group.row.compact-group-grid {
    display: grid !important;
    gap: 12px;
}
.panel-check-group.row.ip-group-grid > [class*="col-"],
.panel-check-group.row.compact-group-grid > [class*="col-"] {
    flex: none;
    max-width: none;
    width: auto;
}

/* Server IP: two wide cards */
.panel-check-group.row.ip-group-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Storage: 3 columns (same width as a Location card), 4 columns when there are 4+ options */
.panel-check-group.row.compact-group-grid {
    grid-template-columns: repeat(3, 1fr);
}
.panel-check-group.row.compact-group-grid:has(> :nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
}

/* Server IP card contents */
.ip-group-grid .check-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.ip-label {
    font-weight: 600;
    font-size: 15px;
}
.ip-note {
    font-size: 13px;
    color: #8FA3BF;
    line-height: 1.4;
}
.ip-address {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #0A1128;
    border: 1px solid #034078;
    color: #F0F4F8;
}

/* Card borders, hover, and selected state (accent used for the active state only) */
.panel-check-group .panel-check {
    border: 1px solid #034078 !important;
    transition: border-color 0.15s ease;
}
.panel-check-group .panel-check:hover {
    border-color: #6fb3d9 !important;
}
.panel-check-group .panel-check:has(input:checked),
.panel-check-group .panel-check:has(.checked) {
    border-color: #1282A2 !important;
}

/* Responsive: Server IP + Storage */
@media (max-width: 767px) {
    .panel-check-group.row.ip-group-grid {
        grid-template-columns: 1fr;
    }
    .panel-check-group.row.compact-group-grid,
    .panel-check-group.row.compact-group-grid:has(> :nth-child(4)) {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .panel-check-group.row.compact-group-grid,
    .panel-check-group.row.compact-group-grid:has(> :nth-child(4)) {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   4. PLAN PAGES (store)
   ========================================================================== */

/* "Included With Every Plan" panel: grid instead of one tall column */
.panel-form > .panel-body > ul.list-features.list-info {
    display: grid !important;
    grid-template-columns: repeat(4, max-content) !important;
    justify-content: space-between;
    gap: 16px 24px;
    margin: 0;
}
.panel-form > .panel-body > ul.list-features.list-info > li {
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}
.panel-form > .panel-body:has(> ul.list-features.list-info) {
    padding: 24px 32px !important;
}
/* Must stay below the base rule above: both use !important, so the later one wins */
@media (max-width: 1199px) {
    .panel-form > .panel-body > ul.list-features.list-info {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-content: stretch;
    }
}
@media (max-width: 480px) {
    .panel-form > .panel-body > ul.list-features.list-info {
        grid-template-columns: 1fr !important;
    }
}

/* Tighten the space between the page title and the first section.
   NOTE: these target generic theme classes, so they apply on every page
   that uses .main-header / .main-body, not only plan pages. The exact
   element holding the remaining gap under the title was never confirmed. */
.main-header-title {
    margin-bottom: 0 !important;
}
.main-body {
    padding-top: 24px !important;
}
.main-header, .main-header .container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.main-content > .section:first-child {
    margin-top: 0 !important;
}

/* Plan cards: transparent border keeps every card the same size as the popular one;
   cards size to their content instead of a fixed minimum */
.package {
    border: 1px solid transparent !important;
    min-height: 0 !important;
    height: auto !important;
}
.package.package-popular {
    position: relative;
    overflow: visible !important;
    border: 1px solid #1282A2 !important;
}
/* "Most Popular" pill on the top border (the script also pins `top` at runtime) */
.popular-pill {
    position: absolute;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    padding: 4px 12px;
    border-radius: 999px;
    background: #1282A2;
    color: #0A1128;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Outline buttons on every plan, filled accent only on the popular one */
.package:not(.package-popular) .btn-primary {
    background: transparent !important;
    border: 1px solid #034078 !important;
    color: #F0F4F8 !important;
}
.package:not(.package-popular) .btn-primary:hover {
    border-color: #6fb3d9 !important;
}

/* Free trial has no "Monthly" line: reserve the same height so bullets line up */
.package:has(a[href*="free-trial"]) .price::after {
    content: "";
    display: block;
    height: 18px;
}

/* Prices: JetBrains Mono per the design system, unit in small muted Inter */
.package .price-amount {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600;
    letter-spacing: -1px;
    align-items: baseline;
}
.package .price-amount .price-currency {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: #8FA3BF;
    margin-left: 8px;
}

/* RAM as the headline spec */
.package-ram {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 600;
    color: #F0F4F8;
    text-align: center;
    padding: 12px 0;
    margin-bottom: 12px;
    border-top: 1px solid #034078;
    border-bottom: 1px solid #034078;
}

/* The theme wraps the bullets in br tags; they create the dead space */
.package .package-content br {
    display: none !important;
}
.package .package-content .feature-list {
    margin: 4px 0 0 !important;
    padding: 0 !important;
}
.package .package-body {
    min-height: 0 !important;
}
.package .package-footer {
    margin-top: 24px;
}
@media (max-width: 767px) {
    .package .package-footer .btn {
        min-width: 220px;
    }
}

/* Plan rows: keep every card one-third wide, center a short last row */
@media (min-width: 992px) {
    .row-eq-height:has(.package) {
        justify-content: center;
    }
    .row-eq-height:has(.package) > .col {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
}


/* ==========================================================================
   5. CONFIGURE PAGE
   ========================================================================== */

/* Option-card prices: JetBrains Mono per the design system */
.panel-check .check-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 500;
}
/* Billing cycle price: JetBrains Mono per the design system */
.check-title .check-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 500;
}
/* Badge and unit labels stay in Inter (design system: mono is for numbers only) */
.panel-check .check-subtitle .label,
.panel-check .check-price-label {
    font-family: 'Inter', sans-serif;
}
.panel-check .check-subtitle .label-save {
    font-weight: 600;
}
.panel-check .check-price-label {
    margin-left: 8px;
    font-size: 13px;
    color: #8FA3BF;
}

/* Server Name: full-width field instead of half the card.
   .server-name-field is added by decorateServerName() in custom_order_form.php. */
.col-sm-6.server-name-field {
    flex: 0 0 100%;
    max-width: 100%;
}
.server-name-field .help-block {
    max-width: 70ch;
}

/* Summary text: 12px minimum (was about 11px) */
.summary-list-configoptions .list-item,
.summary-list-configoptions .item-name,
.summary-list-configoptions .item-value {
    font-size: 12px;
}

/* Summary total: mono amount, small muted Inter unit */
.price-amount-total,
.price-amount-total * {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600;
    letter-spacing: -1px;
}
.price-amount-total {
    align-items: baseline;
}
.price-amount-total .price-currency {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: #8FA3BF;
    margin-left: 8px;
}


/* ==========================================================================
   6. CART
   ========================================================================== */

/* Prices in JetBrains Mono (design system) */
.panel-cart .cart-item-price,
.cart-item-pricing-dropdown .dropdown-menu a {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px;
    font-weight: 500;
}

/* Billing-cycle dropdown: wide enough for "$44.18 USD/3mo", clear of the edit button */
.cart-item-pricing-dropdown .dropdown-toggle {
    min-width: 0 !important;
    width: 180px !important;
    padding-left: 16px;
    padding-right: 12px;
}
.cart-item-pricing-dropdown .dropdown-toggle .cart-item-price {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
}


/* ==========================================================================
   7. CLIENT AREA (dashboard and sidebar)
   Brand blue is recolored through the two --dark-mode-brand-primary variables
   in section 1, not here.
   ========================================================================== */

/* Sidebar lists (Discord Status, Contacts, Shortcuts): rounded like the other cards */
.panel-sidebar .list-group {
    border-radius: 10px !important;
    overflow: hidden;
}
/* Breathing room so text and icons don't touch the left border */
.panel-sidebar .list-group-item {
    padding: 10px 16px !important;
}

/* Dashboard tiles: numbers in JetBrains Mono per the design system */
.tile-stat {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

/* Affiliate Program panel: standard Surface card instead of the theme's info blue.
   Uses the panel's id because the theme misspells its class (panel-affilaite-program). */
#affiliatesPanel {
    background: #001F54 !important;
    border: 1px solid #034078 !important;
}
#affiliatesPanel .panel-heading {
    background: transparent !important;
    border-color: #034078 !important;
}
#affiliatesPanel .panel-title {
    color: #F0F4F8 !important;
}
#affiliatesPanel .panel-body,
#affiliatesPanel .panel-body p {
    color: #8FA3BF !important;
}

/* "Verify Discord" button: accent fill like the other primary actions.
   Scoped to the Discord verification link so other green buttons are unaffected. */
a.btn-success[href*="discord_verification"] {
    background: #1282A2 !important;
    color: #0A1128 !important;
    border-color: transparent !important;
}
a.btn-success[href*="discord_verification"]:hover {
    background: #16a0c9 !important;
    border-color: transparent !important;
}

/* "Not Verified" label: Warning color as a rounded pill (same pattern as the main
   site's status badges). Scoped to the sidebar so other warning labels are unaffected. */
.panel-sidebar .label-warning {
    background: rgba(240, 180, 60, 0.1) !important;
    color: #F0B43C !important;
    border: 1px solid rgba(240, 180, 60, 0.25);
    border-radius: 999px;
    padding: 4px 12px;
}

/* Active Products/Services panel: the panel owns the border, only the last row is rounded
   (the list used to draw square corners over the panel's rounded ones) */
.client-home-panels .panel-active-services .list-group {
    border: 0 !important;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}
.client-home-panels .panel-active-services .list-group-item {
    border-radius: 0;
}
.client-home-panels .panel-active-services .list-group-item:last-child {
    border-radius: 0 0 16px 16px;
}

/* Status labels on the client area home: rounded pills in the design-system colors.
   Scoped to the dashboard panels; other pages (invoices, tickets) are untouched. */
.client-home-panels .label-success,
.client-home-panels .label-warning,
.client-home-panels .label-danger,
.client-home-panels .status-active {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 12px;
}
.client-home-panels .label-success,
.client-home-panels .status-active {
    background: rgba(74, 222, 128, 0.1) !important;
    color: #4ADE80 !important;
    border-color: rgba(74, 222, 128, 0.25) !important;
}
.client-home-panels .label-warning {
    background: rgba(240, 180, 60, 0.1) !important;
    color: #F0B43C !important;
    border-color: rgba(240, 180, 60, 0.25) !important;
}
.client-home-panels .label-danger {
    background: rgba(239, 83, 80, 0.1) !important;
    color: #EF5350 !important;
    border-color: rgba(239, 83, 80, 0.25) !important;
}

/* "Expiring in N days": red for 3-0 days, orange for 10-4 days, muted above 10.
   The classes are added by decorateExpiring() in custom_order_form.php, which reads the
   number of days. The theme sets .text-danger on the same element, so these use
   .status-expiry to be more specific. The alert icon inside the element is recolored too. */
.status-expiry.expiring-later,
.status-expiry.expiring-later * {
    color: #8FA3BF !important;
}
.status-expiry.expiring-warn,
.status-expiry.expiring-warn * {
    color: #F0B43C !important;
}
.status-expiry.expiring-danger,
.status-expiry.expiring-danger * {
    color: #EF5350 !important;
}