/* =========================================================================
   HostForY — client area theme (child of WHMCS Twenty-One)
   Own design system: dark surfaces, green accent, Inter + JetBrains Mono.
   ========================================================================= */
:root {
    --hf-bg-0: #0a0d10;
    --hf-bg-1: #11161b;
    --hf-bg-2: #161c23;
    --hf-bg-3: #1d242c;
    --hf-line: #232a32;
    --hf-line-soft: #1a2027;
    --hf-fg-0: #e7edf2;
    --hf-fg-1: #b6bfc8;
    --hf-fg-2: #7d8893;
    --hf-fg-3: #545d66;
    --hf-accent: #30d882;
    --hf-accent-press: #24c070;
    --hf-accent-soft: rgba(48, 216, 130, .12);
    --hf-accent-fg: #062012;
    --hf-warn: #f2a618;
    --hf-danger: #f94144;
    --hf-info: #4abaf4;
    --hf-radius: 12px;
    --hf-radius-sm: 8px;
    --hf-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hf-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
html, body, body.primary-bg-color { background: var(--hf-bg-0) !important; }
body { color: var(--hf-fg-1); font-family: var(--hf-sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--hf-fg-0); font-family: var(--hf-sans); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--hf-accent); }
a:hover, a:focus { color: var(--hf-accent-2, #46eeb3); text-decoration: none; }
hr { border-color: var(--hf-line); }
.text-muted, small.text-muted { color: var(--hf-fg-2) !important; }
.text-success { color: var(--hf-accent) !important; }
.text-danger { color: var(--hf-danger) !important; }
.text-warning { color: var(--hf-warn) !important; }
.text-info { color: var(--hf-info) !important; }
.bg-white, .bg-light { background: var(--hf-bg-1) !important; }
.border, .border-top, .border-bottom { border-color: var(--hf-line) !important; }
::selection { background: rgba(48, 216, 130, .3); color: #fff; }
code, pre, kbd { font-family: var(--hf-mono); }
pre { background: var(--hf-bg-0); color: var(--hf-fg-1); border: 1px solid var(--hf-line); border-radius: var(--hf-radius-sm); padding: 12px; }

/* ---------- header ---------- */
.hf-header { background: var(--hf-bg-0); border-bottom: 1px solid var(--hf-line); position: relative; z-index: 1030; }
.hf-top { height: 73px; display: flex; align-items: center; border-bottom: 1px solid var(--hf-line-soft); }
.hf-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--hf-fg-0) !important; text-decoration: none !important; }
.hf-logo__mark { width: 28px; height: 28px; border-radius: 7px; background: var(--hf-accent); color: var(--hf-accent-fg); display: inline-flex; align-items: center; justify-content: center; }
.hf-logo__text { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.hf-logo__text span { color: var(--hf-accent); }
.hf-logo .logo-img { max-height: 32px; }
.hf-top__right { gap: 14px; }
.hf-cartbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: var(--hf-radius-sm); background: var(--hf-bg-2); border: 1px solid var(--hf-line); color: var(--hf-fg-1) !important; font-size: 14px; }
.hf-cartbtn:hover { border-color: #2f3842; color: var(--hf-fg-0) !important; }
.hf-cartbtn__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hf-accent); color: var(--hf-accent-fg); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hf-iconbtn { position: relative; background: transparent; border: 0; color: var(--hf-fg-2); padding: 6px; border-radius: var(--hf-radius-sm); line-height: 0; }
.hf-iconbtn:hover, .hf-iconbtn:focus { color: var(--hf-fg-0); outline: 0; }
.hf-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--hf-accent); }
.hf-user__btn { display: inline-flex; align-items: center; gap: 8px; color: var(--hf-fg-1) !important; font-size: 14px; padding: 6px 2px; }
.hf-user__btn:hover { color: var(--hf-fg-0) !important; }
.hf-user__btn.dropdown-toggle::after { border-top-color: currentColor; margin-left: 2px; }

.hf-nav.main-navbar-wrapper { background: transparent !important; padding: 0; min-height: 76px; }
.hf-nav .navbar-collapse { min-height: 76px; }
.hf-nav .navbar-nav > li > a { display: flex; align-items: center; height: 76px; padding: 0 6px !important; margin-right: 36px; color: var(--hf-fg-2) !important; font-size: 16px; font-weight: 400; position: relative; white-space: nowrap; }
.hf-nav .navbar-nav > li > a:hover, .hf-nav .navbar-nav > li.show > a { color: var(--hf-fg-0) !important; }
.hf-nav #hfnav > li.hf-active > a { color: var(--hf-fg-0) !important; }
.hf-nav #hfnav > li.hf-active > a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hf-accent); border-radius: 2px; }
.hf-nav .navbar-nav > li > a.dropdown-toggle::after { border-top-color: currentColor; margin-left: 8px; vertical-align: middle; }
.hf-nav .hf-nav__right > li > a { margin-right: 0; margin-left: 24px; }
.hf-nav .hf-nav__right > li.hf-nav__btn > a.btn { height: 44px; display: inline-flex; align-items: center; padding: 0 18px !important; margin-left: 16px; font-size: 14px; }
.hf-nav .hf-nav__right > li.hf-nav__btn > a.btn-primary { color: var(--hf-accent-fg) !important; }
.hf-nav .hf-nav__right > li.hf-nav__btn > a.btn-default { color: var(--hf-fg-0) !important; }
.hf-nav .collapsable-dropdown > a { color: var(--hf-fg-2) !important; }

/* dropdowns */
.dropdown-menu { background: var(--hf-bg-1); border: 1px solid var(--hf-line); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); padding: 6px; min-width: 220px; }
.dropdown-menu > li.dropdown-item { padding: 0; background: transparent !important; }
.dropdown-item, .dropdown-menu > li > a.dropdown-item { color: var(--hf-fg-1) !important; border-radius: 6px; padding: 8px 12px !important; font-size: 14px; background: transparent; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .dropdown-item:active { background: var(--hf-bg-2) !important; color: var(--hf-fg-0) !important; }
.dropdown-divider { border-top-color: var(--hf-line); margin: 6px 0; }
.popover { background: var(--hf-bg-1); border: 1px solid var(--hf-line); border-radius: 10px; }
.popover .arrow::after { border-bottom-color: var(--hf-bg-1) !important; }
.popover-body { color: var(--hf-fg-1); }
.client-alerts li a { color: var(--hf-fg-1); }
.client-alerts li a:hover { background: var(--hf-bg-2); }

/* ---------- page head ---------- */
.hf-pagehead { padding: 48px 0 36px; }
.hf-pagehead__title { font-size: 56px; line-height: 1.12; font-weight: 600; letter-spacing: -.025em; margin: 0 0 10px; color: var(--hf-fg-0); }
.master-breadcrumb { background: transparent !important; border: 0 !important; }
.hf-pagehead .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 13px; }
.hf-pagehead .breadcrumb-item, .hf-pagehead .breadcrumb-item a { color: var(--hf-fg-2); }
.hf-pagehead .breadcrumb-item a { color: #8fa3bd; }
.hf-pagehead .breadcrumb-item + .breadcrumb-item::before { color: var(--hf-fg-1); content: "/"; }
.hf-pagehead .breadcrumb-item.active { color: #8fa3bd; }

#main-body { background: transparent; padding: 24px 0 64px; min-height: 50vh; }
#main-body.hf-main--home { padding: 0; }
.hf-main--home > div > .row > .primary-content { padding: 0; }

/* ---------- cards & sidebar ---------- */
.card, .panel, .card-sidebar, .well { background: var(--hf-bg-1); border: 1px solid var(--hf-line); border-radius: var(--hf-radius); color: var(--hf-fg-1); box-shadow: none; }
.card-header, .panel-heading { background: transparent; border-bottom: 1px solid var(--hf-line-soft); padding: 18px 20px; }
.card-header .card-title, .card-title, .card-header h3, .panel-title { color: var(--hf-fg-0); font-size: 16px; font-weight: 600; margin: 0; }
.card-header .card-title i, .card-sidebar .card-title i { display: none; }
.card-body { padding: 20px; }
.card-footer, .panel-footer { background: transparent; border-top: 1px solid var(--hf-line-soft); padding: 14px 16px; }
.sidebar .card { margin-bottom: 32px; }
.card-sidebar .list-group, .sidebar .list-group { padding: 6px; }
.list-group-item { background: transparent; border: 0; color: var(--hf-fg-1); padding: 10px 12px; border-radius: var(--hf-radius-sm) !important; }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--hf-bg-2); color: var(--hf-fg-0); }
.list-group-item.active, .list-group-item.active:hover { background: var(--hf-accent-soft); color: var(--hf-fg-0); border: 0; }
.list-group-item .sidebar-menu-item-icon, .list-group-item i { color: var(--hf-accent); }
.list-group-item .badge { background: var(--hf-bg-3); color: var(--hf-fg-1); }
.sidebar .card-body { color: var(--hf-fg-1); }
.sidebar .card-body .btn, .sidebar .card-footer .btn { width: 100%; }

/* ---------- buttons ---------- */
.btn { border-radius: var(--hf-radius-sm); font-weight: 500; font-size: 14px; box-shadow: none !important; transition: background .15s, border-color .15s, color .15s; }
.btn-primary, .btn-success, .btn-info, .btn-order-now, .btn-checkout { background: var(--hf-accent) !important; border: 1px solid var(--hf-accent) !important; color: var(--hf-accent-fg) !important; font-weight: 600; }
.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-order-now:hover, .btn-checkout:hover,
.btn-primary:focus, .btn-success:focus, .btn-primary:not(:disabled):not(.disabled):active { background: var(--hf-accent-press) !important; border-color: var(--hf-accent-press) !important; color: var(--hf-accent-fg) !important; }
.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-outline-success { background: transparent !important; border: 1px solid var(--hf-line) !important; color: var(--hf-fg-0) !important; }
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover { background: var(--hf-bg-2) !important; border-color: #2f3842 !important; }
.btn-danger { background: transparent !important; border: 1px solid rgba(249, 65, 68, .5) !important; color: #ff7a7c !important; }
.btn-danger:hover { background: rgba(249, 65, 68, .12) !important; }
.btn-warning { background: var(--hf-warn) !important; border-color: var(--hf-warn) !important; color: #1d1300 !important; }
.btn-link { color: var(--hf-accent); }
.btn-lg { height: 52px; font-size: 15px; }
.btn-group .btn.active, .btn-group-toggle .btn.active { background: var(--hf-accent-soft) !important; color: var(--hf-fg-0) !important; border-color: var(--hf-accent) !important; }

/* ---------- forms ---------- */
.form-control, .custom-select, select.form-control, .input-group-text, .iti input, .field, textarea.form-control {
    background-color: var(--hf-bg-0) !important; border: 1px solid var(--hf-line) !important; color: var(--hf-fg-0) !important; border-radius: var(--hf-radius-sm); box-shadow: none !important; }
.form-control, .custom-select, select.form-control { min-height: 46px; }
.form-control:focus, .custom-select:focus { border-color: var(--hf-accent) !important; box-shadow: 0 0 0 3px rgba(48, 216, 130, .14) !important; }
.form-control::placeholder { color: var(--hf-fg-3); }
.form-control:disabled, .form-control[readonly] { background-color: var(--hf-bg-2) !important; color: var(--hf-fg-2) !important; }
.input-group-text { color: var(--hf-fg-2) !important; }
label, .control-label, .col-form-label { color: var(--hf-fg-0); font-weight: 500; font-size: 13px; }
.custom-control-label::before { background: var(--hf-bg-0); border-color: var(--hf-line); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--hf-accent); border-color: var(--hf-accent); }
.form-check-input { accent-color: var(--hf-accent); }
.iti__country-list { background: var(--hf-bg-1); border-color: var(--hf-line); color: var(--hf-fg-1); }
.iti__country.iti__highlight { background: var(--hf-bg-2); }
.bootstrap-switch { border-color: var(--hf-line) !important; background: var(--hf-bg-0); border-radius: 999px !important; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--hf-accent); color: var(--hf-accent-fg); }
.bootstrap-switch .bootstrap-switch-label { background: var(--hf-fg-0); }
.bootstrap-switch .bootstrap-switch-handle-off { background: var(--hf-bg-2); color: var(--hf-fg-2); }
.sub-heading, .sub-heading-borderless { border-color: var(--hf-line) !important; }
.sub-heading span, .primary-bg-color .sub-heading span, .sub-heading-borderless span { background: var(--hf-bg-1) !important; color: var(--hf-fg-2) !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 14px; }

/* ---------- tables / datatables ---------- */
.table { color: var(--hf-fg-1); background: transparent; }
.table thead th, .table-list thead th, table.dataTable thead th { background: transparent !important; border-top: 0 !important; border-bottom: 1px solid var(--hf-line-soft) !important; color: var(--hf-fg-3) !important; font-family: var(--hf-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 18px 20px !important; }
.table td, .table-list td, table.dataTable td { border-top: 1px solid var(--hf-line-soft) !important; padding: 18px 20px !important; vertical-align: middle !important; background: transparent !important; color: var(--hf-fg-1); }
.table-list > tbody > tr:hover > td, .table-hover tbody tr:hover > td { background: var(--hf-bg-2) !important; cursor: pointer; }
.table-list { border: 0 !important; border-radius: 0 !important; }
.table-container { background: var(--hf-bg-1); border: 1px solid var(--hf-line); border-radius: var(--hf-radius); padding: 0; overflow: hidden; }
.table-container .table-list { margin: 0 !important; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--hf-fg-2); padding: 16px 20px; }
.dataTables_wrapper .dataTables_length select { background: var(--hf-bg-0); border: 1px solid var(--hf-line); color: var(--hf-fg-0); border-radius: var(--hf-radius-sm); height: 36px; }
.dataTables_wrapper .dataTables_filter input { background: var(--hf-bg-0); border: 1px solid var(--hf-line); color: var(--hf-fg-0); border-radius: var(--hf-radius-sm); }
.dataTables_wrapper .dataTables_paginate { padding: 12px 20px; }
.page-link, .pagination > li > a { background: transparent; border: 1px solid var(--hf-line-soft); color: var(--hf-fg-2); border-radius: 6px !important; margin: 0 3px; }
.page-item.active .page-link, .pagination > .active > a { background: var(--hf-accent); border-color: var(--hf-accent); color: var(--hf-accent-fg); }
.page-item.disabled .page-link { background: transparent; border-color: var(--hf-line-soft); color: var(--hf-fg-3); }
.table-container .dataTables_wrapper .listtable { border: 0; }
.view-filter-btns .btn, .view-filter-btns .dropdown-toggle { background: var(--hf-bg-1) !important; }

/* status labels as dot + text */
.label.status, .badge.status, span.label.status { background: transparent !important; color: var(--hf-fg-1) !important; font-weight: 500; font-size: 14px; padding: 0 0 0 14px !important; position: relative; border: 0 !important; text-transform: none; }
.label.status::before, .badge.status::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--hf-fg-3); }
.status-active::before, .status-paid::before, .status-completed::before, .status-open::before, .status-accepted::before, .status-delivered::before { background: var(--hf-accent) !important; }
.status-pending::before, .status-unpaid::before, .status-answered::before, .status-customer-reply::before, .status-in-progress::before, .status-on-hold::before, .status-draft::before { background: var(--hf-warn) !important; }
.status-suspended::before, .status-overdue::before, .status-fraud::before, .status-dead::before, .status-collections::before { background: var(--hf-danger) !important; }
.status-unpaid, .status-overdue { color: var(--hf-fg-0) !important; }
.status-terminated, .status-cancelled, .status-closed, .status-expired, .status-refunded { color: var(--hf-fg-2) !important; }
.badge-success, .label-success { background: var(--hf-accent-soft); color: var(--hf-accent); }
.badge-info { background: rgba(74, 186, 244, .14); color: var(--hf-info); }
.badge-warning { background: rgba(242, 166, 24, .14); color: var(--hf-warn); }
.badge-danger { background: rgba(249, 65, 68, .14); color: #ff7a7c; }
.badge-secondary, .badge-default { background: var(--hf-bg-3); color: var(--hf-fg-1); }

/* ---------- alerts / modals ---------- */
.alert { border-radius: var(--hf-radius-sm); border: 1px solid var(--hf-line); background: var(--hf-bg-1); color: var(--hf-fg-0); border-left-width: 3px; }
.alert-success { border-left-color: var(--hf-accent); }
.alert-info { border-left-color: var(--hf-info); }
.alert-warning { border-left-color: var(--hf-warn); }
.alert-danger, .alert-error { border-left-color: var(--hf-danger); }
.alert a { color: var(--hf-accent); }
.alert .close, .close { color: var(--hf-fg-1); text-shadow: none; opacity: .8; }
.modal-content { background: var(--hf-bg-1); border: 1px solid var(--hf-line); border-radius: 14px; color: var(--hf-fg-1); }
.modal-header, .modal-footer { border-color: var(--hf-line-soft); }
.modal-title { color: var(--hf-fg-0); }
.modal-backdrop.show { opacity: .7; }
.modal-localisation .modal-content { background: var(--hf-bg-1); }
.modal-localisation .item-selector .item { color: var(--hf-fg-1); border-radius: 6px; }
.modal-localisation .item-selector .item.active, .modal-localisation .item-selector .item:hover { background: var(--hf-accent-soft); color: var(--hf-fg-0); }
.tooltip-inner { background: var(--hf-bg-3); color: var(--hf-fg-0); }
.nav-tabs { border-bottom-color: var(--hf-line); }
.nav-tabs .nav-link { color: var(--hf-fg-2); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: transparent; color: var(--hf-fg-0); border-bottom-color: var(--hf-accent); }
.nav-tabs .nav-link:hover { color: var(--hf-fg-0); border-color: transparent; }
.tab-content { color: var(--hf-fg-1); }
.progress { background: var(--hf-bg-3); }
.progress-bar { background: var(--hf-accent); }

/* ---------- client area home ---------- */
.tiles { margin-bottom: 32px; }
.tiles .row { margin: 0 -12px; }
.tiles .tile { background: var(--hf-bg-1); border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius); margin: 0 12px; padding: 28px 16px 36px !important; text-align: center; height: 182px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.tiles .col-6, .tiles .col-xl-3 { padding: 0 !important; }
.tiles .tile:hover { background: var(--hf-bg-2); }
.tiles .tile .stat { color: var(--hf-accent); font-size: 56px; font-weight: 400; line-height: 1; margin: 0 0 14px; }
.tiles .tile .title { color: var(--hf-fg-0); font-size: 17px; text-transform: none; letter-spacing: 0; }
.tiles .tile i { position: absolute; top: 14px; right: 16px; font-size: 12px; color: var(--hf-fg-0); opacity: .9; }
.tiles .tile .highlight { display: none; }
.client-home-cards .card { margin-bottom: 24px; }
.client-home-cards .card-header { padding: 20px; }
.client-home-cards .card-header .card-title { font-size: 16px; }
.client-home-cards .card-header .btn { font-size: 12px; }
.client-home-cards .list-group-item { padding: 14px 20px; border-top: 1px solid var(--hf-line-soft); border-radius: 0 !important; }
.client-home-cards .card-body { text-align: center; color: var(--hf-fg-0); }
.client-home-panels .card-body p { color: var(--hf-fg-0); }

/* ---------- login / register / password ---------- */
.login-form, .hf-page-login .card, .hf-page-password-reset-container .card { max-width: 452px; margin: 64px auto 32px; border-radius: 16px; }
.hf-page-login .card-body, .hf-page-password-reset-container .card-body { padding: 72px 88px 48px !important; }
.hf-page-login h6, .hf-page-login .h3, .hf-page-login h1, .hf-page-login .card-body h3 { font-size: 30px; font-weight: 700; color: var(--hf-fg-0); text-align: left; }
.hf-page-login .card-footer { background: transparent; text-align: center; padding: 28px; color: var(--hf-fg-2); }
.hf-page-login .btn-primary { width: 100%; height: 52px; }
.hf-page-clientregister #main-body .card { max-width: 722px; margin: 44px auto 32px; border-radius: 16px; }
.hf-page-clientregister #main-body .card-body { padding: 56px 60px; }
.hf-page-clientregister #registration .card-title { font-size: 30px; }
.hf-page-clientregister .btn-primary[type=submit] { width: 100%; height: 48px; }
.hf-page-clientregister .generate-password { width: 100%; }

/* ---------- product details ---------- */
.product-details-tab-container, .product-status { background: var(--hf-bg-1); border: 1px solid var(--hf-line); border-radius: var(--hf-radius); }
.product-status .product-icon { color: var(--hf-fg-0); }
.product-status .product-icon i, .product-icon .fa-stack { color: var(--hf-accent); }
.product-details .product-status-text, .product-status-text { background: var(--hf-bg-2) !important; color: var(--hf-fg-0) !important; border-radius: 0 0 var(--hf-radius) var(--hf-radius); }
.product-status-active { background: var(--hf-bg-1); }
.product-status-active .product-status-text { background: var(--hf-accent-soft) !important; color: var(--hf-accent) !important; }
.module-client-area, .module-client-area .card { color: var(--hf-fg-1); }

/* ---------- tickets / kb / announcements ---------- */
.ticket-reply, .ticket-reply .message { background: var(--hf-bg-1); border-color: var(--hf-line); color: var(--hf-fg-1); }
.ticket-reply.staff .posted-by { background: var(--hf-accent-soft); }
.ticket-reply .posted-by { background: var(--hf-bg-2); color: var(--hf-fg-1); border-bottom: 1px solid var(--hf-line-soft); }
.kb-category, .kb-article-item, .announcement-single, .kb-search { color: var(--hf-fg-1); }
.kb-category .card, .knowledgebase .card { background: var(--hf-bg-1); }
.announcement-single h3 a, .kb-article-title a { color: var(--hf-fg-0); }
.home-kb-search, .kb-search .input-group { background: transparent; }

/* ---------- store (standard_cart) ---------- */
#order-standard_cart { color: var(--hf-fg-1); }
#order-standard_cart .header-lined { margin: 24px 0 40px; border: 0; }
#order-standard_cart .header-lined h1, #order-standard_cart .header-lined .font-size-36 { font-size: 56px !important; font-weight: 600; letter-spacing: -.025em; color: var(--hf-fg-0); margin: 0 0 14px; }
#order-standard_cart .header-lined p { color: var(--hf-fg-1); font-size: 14px; }
#order-standard_cart .cart-sidebar .card, #order-standard_cart .sidebar .card { background: var(--hf-bg-1); border: 1px solid var(--hf-line); border-radius: var(--hf-radius); margin-bottom: 16px; }
#order-standard_cart .cart-sidebar .list-group-item { font-size: 14px; }
#order-standard_cart .products .product { background: var(--hf-bg-1); border: 1px solid var(--hf-line); border-radius: var(--hf-radius); padding: 0 !important; margin-bottom: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: none; }
#order-standard_cart .products .product header { background: transparent; border-bottom: 1px solid var(--hf-line-soft); padding: 18px 21px; margin: 0; }
#order-standard_cart .products .product header span { color: var(--hf-fg-0); font-size: 22px; font-weight: 600; }
#order-standard_cart .products .product header .qty { font-size: 12px; color: var(--hf-fg-2); }
#order-standard_cart .products .product div.product-desc { float: none; width: 100%; padding: 20px; font-size: 14px; color: var(--hf-fg-1); line-height: 1.7; flex: 1; }
#order-standard_cart .products .product div.product-desc ul { padding-left: 0; list-style: none; }
#order-standard_cart .products .product div.product-desc ul li { padding: 2px 0; border: 0; }
#order-standard_cart .products .product div.product-desc .feature-value { color: var(--hf-fg-0); }
#order-standard_cart .products .product footer { float: none; width: auto; margin: 0; padding: 0 20px 20px; text-align: left; }
#order-standard_cart .products .product div.product-pricing { background: var(--hf-bg-2); border: 1px solid var(--hf-line-soft); border-radius: var(--hf-radius); margin: 0 -21px 16px; padding: 22px 21px 26px; color: var(--hf-fg-1); font-size: 11px; text-align: left; }
#order-standard_cart .products .product div.product-pricing span.price { display: block; font-family: var(--hf-mono); font-size: 22px; font-weight: 600; color: var(--hf-fg-0); margin: 8px 0 26px; }
#order-standard_cart .products .product .btn-order-now { width: 100%; height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; border-radius: var(--hf-radius-sm); }
#order-standard_cart .products .product .btn-order-now i { color: var(--hf-accent-fg); }
#order-standard_cart .view-cart-items-header, #order-standard_cart .view-cart-items, #order-standard_cart .summary-container, #order-standard_cart .order-summary { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius); color: var(--hf-fg-1); }
#order-standard_cart .view-cart-items-header { background: var(--hf-bg-2) !important; color: var(--hf-fg-2); border-bottom: 0 !important; border-radius: var(--hf-radius) var(--hf-radius) 0 0; }
#order-standard_cart .view-cart-items .item { border-bottom: 1px solid var(--hf-line-soft); }
#order-standard_cart .view-cart-items .item-title, #order-standard_cart .view-cart-items .item-price span { color: var(--hf-fg-0); }
#order-standard_cart .order-summary h2 { background: transparent !important; color: var(--hf-fg-0); border-bottom: 1px solid var(--hf-line-soft); font-size: 18px; }
#order-standard_cart .summary-container .subtotal, #order-standard_cart .summary-container .bordered-totals, #order-standard_cart .summary-container .recurring-totals { border-color: var(--hf-line-soft); color: var(--hf-fg-1); }
#order-standard_cart .summary-container .total-due-today .amt, #order-standard_cart .total-due-today .amt { color: var(--hf-fg-0); font-family: var(--hf-mono); }
#order-standard_cart .total-due-today span:not(.amt) { color: var(--hf-fg-2); }
#order-standard_cart .order-summary .loader { background: var(--hf-bg-1); }
#order-standard_cart .product-info { background: var(--hf-bg-2); border-color: var(--hf-line); color: var(--hf-fg-1); border-radius: var(--hf-radius); }
#order-standard_cart .product-info .product-title { color: var(--hf-fg-0); }
#order-standard_cart .field-container, #order-standard_cart .sub-heading { color: var(--hf-fg-1); }
#order-standard_cart .panel-addon, #order-standard_cart .addon-promo-container, #order-standard_cart .domain-checker-container, #order-standard_cart .domain-selection-options .option, #order-standard_cart .account, #order-standard_cart .cc-input-container, #order-standard_cart .paymethod-info { background: var(--hf-bg-1) !important; border-color: var(--hf-line) !important; color: var(--hf-fg-1); border-radius: var(--hf-radius); }
#order-standard_cart .domain-selection-options .option-selected { background: var(--hf-bg-2) !important; border-color: var(--hf-accent) !important; }
#order-standard_cart .panel-addon .panel-price { background: var(--hf-bg-2); color: var(--hf-fg-0); }
#order-standard_cart .panel-addon .panel-add { background: var(--hf-accent); color: var(--hf-accent-fg); }
#order-standard_cart .empty-cart { color: var(--hf-fg-2); }
#order-standard_cart .btn-remove-from-cart { color: var(--hf-danger); }
#order-standard_cart .secondary-cart-sidebar, #order-standard_cart .secondary-cart-body { color: var(--hf-fg-1); }
#order-standard_cart .prepend-icon .field-icon { color: var(--hf-fg-3); }
#order-standard_cart label.radio-inline, #order-standard_cart .gateway-errors { color: var(--hf-fg-1); }
.domain-checker-bg, .domain-checker-container { background: var(--hf-bg-1) !important; }

/* ---------- footer ---------- */
.hf-footer, #footer.footer { background: var(--hf-bg-0) !important; border-top: 1px solid var(--hf-line); padding: 26px 0 28px; color: var(--hf-fg-3); margin: 0; }
.hf-footer .copyright { font-family: var(--hf-mono); font-size: 12px; color: var(--hf-fg-2); }
.hf-footer__right { gap: 30px; }
.hf-footer__lang { background: transparent; border: 0; color: var(--hf-fg-0); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.hf-footer__lang .iti-flag { display: inline-block; }
.hf-totop { color: var(--hf-fg-0) !important; line-height: 0; }
.hf-footer .list-inline-item a, .hf-footer .social-icons a { color: var(--hf-fg-2); }

/* ---------- misc twenty-one leftovers ---------- */
.primary-content > h2:first-child, .header-lined h1 { color: var(--hf-fg-0); }
.header-lined { border-bottom: 0; }
#fullpage-overlay { background: rgba(10, 13, 16, .85); }
.domain-pricing .tld-pricing-header div, .domain-pricing .tld-row { background: var(--hf-bg-1); border-color: var(--hf-line); color: var(--hf-fg-1); }
.domain-pricing .tld-row.highlighted { background: var(--hf-bg-2); }
.card.bg-light, .bg-light .card { background: var(--hf-bg-1) !important; }
.w-hidden { display: none; }
.cart-btn .badge { background: var(--hf-accent); }
.btn-return-to-admin { background: var(--hf-bg-3); color: var(--hf-fg-0); border: 1px solid var(--hf-line); }
.invoice-container, .quote-container { color: #333; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .hf-nav .navbar-collapse { min-height: 0; padding: 8px 0 16px; }
    .hf-nav .navbar-nav > li > a { height: 44px; margin-right: 0; }
    .hf-nav .hf-nav__right > li > a { margin-left: 0; }
    .hf-nav .hf-nav__right > li.hf-nav__btn > a.btn { margin: 8px 0 0; width: 100%; justify-content: center; }
    .hf-nav #hfnav > li.hf-active > a::before { display: none; }
    .hf-nav.main-navbar-wrapper { min-height: 0; }
}
@media (max-width: 767.98px) {
    .hf-top { height: 60px; }
    .hf-pagehead { padding: 28px 0 20px; }
    .hf-pagehead__title { font-size: 34px; }
    #order-standard_cart .header-lined h1, #order-standard_cart .header-lined .font-size-36 { font-size: 34px !important; }
    .hf-page-login .card-body, .hf-page-password-reset-container .card-body { padding: 40px 24px 32px !important; }
    .hf-page-clientregister #main-body .card-body { padding: 32px 20px; }
    .tiles .tile { height: 140px; margin: 0 6px 12px; }
    .tiles .tile .stat { font-size: 40px; }
    .hf-footer .container { justify-content: center; gap: 16px; text-align: center; }
    .hf-footer .copyright { margin: 0 auto !important; }
}

/* =========================================================================
   v2 — stronger overrides over twenty-one / standard_cart defaults
   ========================================================================= */
@media (min-width: 1200px) { .container { max-width: 1280px; } }
header.header.hf-header, .hf-header .hf-top, .hf-header .navbar, .hf-header .main-navbar-wrapper, .hf-header .navbar-light { background: var(--hf-bg-0) !important; box-shadow: none !important; }
.hf-header .main-navbar-wrapper { border: 0 !important; }
.hf-logo__text { color: var(--hf-fg-0) !important; }
.hf-nav .navbar-nav > li { display: block !important; }
.hf-nav .navbar-nav .collapsable-dropdown { display: none !important; }
.hf-cartbtn { background: var(--hf-bg-2) !important; }
.hf-nav .hf-nav__right > li.hf-nav__btn > a.btn-default { background: transparent !important; border-color: var(--hf-line) !important; }

/* cards everywhere */
html body .card, html body .card-sidebar, html body .client-home-cards .card { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line) !important; }
html body .card-header, html body .client-home-cards .card .card-header, html body .card-sidebar .card-header { background: transparent !important; border-bottom: 1px solid var(--hf-line-soft) !important; }
html body .card-header .card-title, html body .client-home-cards .card .card-header .card-title { color: var(--hf-fg-0) !important; }
html body .client-home-cards .card-header .btn { background: transparent !important; border: 1px solid var(--hf-line) !important; color: var(--hf-fg-1) !important; }
html body .card-footer { background: transparent !important; color: var(--hf-fg-2); }
html body .card-footer a { color: var(--hf-fg-2); }
.client-home-cards .card-body, .client-home-cards .list-group { color: var(--hf-fg-0); }
.client-home-cards .card .card-body .input-group .form-control { height: 52px; }

/* breadcrumb-free sidebar header icons hidden, collapse chevrons tidy */
.card-sidebar .card-header .card-minimise { color: var(--hf-fg-2); }

/* store (standard_cart) — win over the order-form stylesheet */
html body #order-standard_cart .products .product { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius) !important; padding: 0 !important; display: flex !important; flex-direction: column; box-shadow: none !important; }
html body #order-standard_cart .products .product header { background: transparent !important; border-bottom: 1px solid var(--hf-line-soft) !important; padding: 18px 21px !important; margin: 0 !important; }
html body #order-standard_cart .products .product header span { color: var(--hf-fg-0) !important; font-size: 22px !important; font-weight: 600; }
html body #order-standard_cart .products .product div.product-desc { float: none !important; width: 100% !important; padding: 20px 20px 24px !important; color: var(--hf-fg-1) !important; font-size: 14px !important; line-height: 1.75 !important; flex: 1 1 auto; }
html body #order-standard_cart .products .product div.product-desc ul,
html body #order-standard_cart .products .product div.product-desc h4,
html body #order-standard_cart .products .product div.product-desc h3,
html body #order-standard_cart .products .product div.product-desc h5 { display: none !important; }
html body #order-standard_cart .products .product div.product-desc p { margin: 0 0 4px; color: var(--hf-fg-1); }
html body #order-standard_cart .products .product div.product-desc strong { color: var(--hf-fg-0); font-weight: 500; }
html body #order-standard_cart .products .product footer { float: none !important; width: auto !important; margin: 0 !important; padding: 0 20px 40px !important; text-align: left !important; font-size: 11px !important; }
html body #order-standard_cart .products .product div.product-pricing { background: var(--hf-bg-2) !important; border: 1px solid var(--hf-line-soft) !important; border-radius: var(--hf-radius) !important; margin: 0 -21px 16px !important; padding: 22px 21px 26px !important; color: var(--hf-fg-1) !important; font-size: 11px !important; text-align: left !important; }
html body #order-standard_cart .products .product div.product-pricing span.price { display: block; font-family: var(--hf-mono) !important; font-size: 22px !important; font-weight: 600 !important; color: var(--hf-fg-0) !important; margin: 10px 0 26px !important; }
html body #order-standard_cart .products .product .btn-order-now { display: flex !important; width: 100% !important; height: 36px; align-items: center; justify-content: center; gap: 8px; font-size: 13px !important; padding: 0 !important; }
html body #order-standard_cart .products .row-eq-height > [class*=col-] { display: flex; flex-direction: column; }
html body #order-standard_cart .products .row-eq-height .product { flex: 1 1 auto; }
html body #order-standard_cart .products .col-md-6 { padding: 0 12px; }
html body #order-standard_cart .header-lined h1 { font-size: 56px !important; line-height: 1.12; }
html body #order-standard_cart .cart-sidebar .card-header .card-title i, html body #order-standard_cart .sidebar-collapsed .card-title i { display: none; }
html body #order-standard_cart .cart-sidebar .list-group-item.active, html body #order-standard_cart .list-group-item.active { background: var(--hf-accent-soft) !important; color: var(--hf-fg-0) !important; }
html body #order-standard_cart .cart-sidebar, html body #order-standard_cart .cart-body { padding-top: 0; }
html body #order-standard_cart .cart-body .pull-right.form-inline, html body #order-standard_cart .cart-body > .float-right.form-inline { display: none !important; }

/* WHMCS branding line (required by licence) — keep it, but quiet */
#main-body > div > .row > p[style*="text-align:center"], p[style="text-align:center;"] { color: var(--hf-fg-3); font-size: 12px; margin: 24px 0 0; }
p[style="text-align:center;"] a { color: var(--hf-fg-2); }
html body .list-group-item .badge, html body .card-sidebar .badge { background: var(--hf-bg-3) !important; color: var(--hf-fg-1) !important; border: 0; }
.dataTables_wrapper .dataTables_filter input { background-image: none !important; padding-left: 14px !important; }
#tableServicesList thead th:first-child, #tableServicesList tbody td:first-child { display: none; }
.table-list td, .table-list th { white-space: nowrap; }
.table-list td:first-child, .table-list td.text-left { white-space: normal; }
.table-list td .text-muted, .table-list td small { color: var(--hf-fg-2) !important; font-size: 13px; }
.table-list td strong { color: var(--hf-fg-0); font-weight: 600; }
/* v4 polish */
.hf-nav.navbar, .hf-nav.main-navbar-wrapper { padding: 0 !important; }
.hf-nav .container { padding-left: 15px; padding-right: 15px; }
.hf-nav #hfnav > li > a { padding: 0 !important; }
.hf-nav #hfnav > li.hf-active > a::before { left: -6px; right: -6px; }
html body .sidebar .list-group-item.active, html body .card-sidebar .list-group-item.active, html body .list-group-item.active { background: var(--hf-accent-soft) !important; color: var(--hf-fg-0) !important; border-color: transparent !important; }
html body .sidebar .list-group-item { color: var(--hf-fg-1) !important; }
html body .sidebar .list-group-item:hover { background: var(--hf-bg-2) !important; color: var(--hf-fg-0) !important; }
.hf-footer .copyright { margin: 0 !important; }
.hf-footer .container { min-height: 40px; }
.hf-footer ul.list-inline { margin: 0 !important; }
/* v5 */
.hf-footer .copyright { margin: 0 auto 0 0 !important; }
@media (max-width: 767.98px) {
  .hf-footer .copyright { margin: 0 auto !important; width: 100%; text-align: center; }
  .hf-footer__right { width: 100%; justify-content: center; }
  .hf-portal { overflow-x: hidden; }
  .hf-portal .container, .hf-hero__inner { padding-left: 16px !important; padding-right: 16px !important; max-width: 100%; }
  .hf-hero h1 { font-size: 38px !important; }
}
/* cart: promo tabs, summary */
html body #order-standard_cart .view-cart-tabs .nav-tabs { border-bottom: 0; }
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link { background: var(--hf-bg-2) !important; color: var(--hf-fg-1) !important; border: 1px solid var(--hf-line) !important; border-bottom: 0 !important; border-radius: 8px 8px 0 0; }
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active { background: var(--hf-bg-1) !important; color: var(--hf-fg-0) !important; }
html body #order-standard_cart .view-cart-tabs .tab-content { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line) !important; border-radius: 0 var(--hf-radius) var(--hf-radius) var(--hf-radius); padding: 16px; }
html body #order-standard_cart .view-cart-tabs .btn-block, html body #order-standard_cart .view-cart-tabs .btn { background: transparent !important; color: var(--hf-fg-0) !important; border: 1px solid var(--hf-line) !important; }
html body #order-standard_cart .order-summary { border-radius: var(--hf-radius) !important; overflow: hidden; }
html body #order-standard_cart .order-summary .btn-continue-shopping, html body #order-standard_cart #continueShopping { color: var(--hf-fg-2) !important; }
html body #order-standard_cart .order-summary .summary-container { border: 0 !important; }
/* domain checker */
html body .domain-checker-container, html body #order-standard_cart .domain-checker-container { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line); border-radius: var(--hf-radius); }
html body .domain-checker-container .input-group-box, html body #order-standard_cart .domain-checker-container .input-group-box { background: var(--hf-bg-2) !important; border: 1px solid var(--hf-line) !important; border-radius: 10px; }
html body .captcha-container, html body #order-standard_cart .captcha-container, html body .domain-checker-container .captcha-container { background: var(--hf-bg-2) !important; border: 1px solid var(--hf-line) !important; color: var(--hf-fg-2) !important; border-radius: 10px; }
html body .domain-promo-box, html body #order-standard_cart .domain-promo-box { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius) !important; color: var(--hf-fg-1) !important; }
html body .domain-promo-box h3 { color: var(--hf-fg-0) !important; }
html body .domain-promo-box i, html body .domain-promo-box .fas, html body .domain-promo-box .far { color: var(--hf-fg-2) !important; }
html body .domain-promo-box .btn-warning { background: var(--hf-accent) !important; border-color: var(--hf-accent) !important; color: var(--hf-accent-fg) !important; }
html body .domain-pricing .tld-pricing-header, html body #order-standard_cart .domain-pricing .tld-pricing-header, html body .tld-pricing-header div { background: var(--hf-bg-2) !important; color: var(--hf-fg-2) !important; border-color: var(--hf-line) !important; }
html body .domain-pricing .tld-filters a, html body .tld-filters .badge { background: var(--hf-bg-2) !important; color: var(--hf-fg-1) !important; }
html body .domain-pricing .tld-filters a.badge-success { background: var(--hf-accent) !important; color: var(--hf-accent-fg) !important; }
/* markdown editor (tickets) */
html body .md-editor, html body .markdown-editor, html body .md-editor > textarea, html body .md-editor .md-input { background: var(--hf-bg-0) !important; color: var(--hf-fg-0) !important; border-color: var(--hf-line) !important; }
html body .md-editor .btn-toolbar, html body .md-editor > .md-header, html body .md-editor .md-footer { background: var(--hf-bg-2) !important; border-color: var(--hf-line) !important; }
html body .md-editor .btn-toolbar .btn, html body .md-editor .md-header .btn { background: transparent !important; color: var(--hf-fg-1) !important; border-color: var(--hf-line) !important; }
html body .md-editor .md-preview { background: var(--hf-bg-1) !important; color: var(--hf-fg-1) !important; }
html body .markdown-editor-status, html body .md-editor .md-footer { color: var(--hf-fg-2) !important; }
/* v6 */
html body .default-captcha, html body .captchaimage, html body .domain-checker-container .default-captcha { background: var(--hf-bg-2) !important; border: 1px solid var(--hf-line) !important; color: var(--hf-fg-2) !important; border-radius: 10px; }
html body .default-captcha p, html body .default-captcha label { color: var(--hf-fg-2) !important; }
html body .custom-file-label, html body .custom-file-label::after { background: var(--hf-bg-0) !important; color: var(--hf-fg-2) !important; border-color: var(--hf-line) !important; }
html body .custom-file-label::after { background: var(--hf-bg-2) !important; color: var(--hf-fg-1) !important; }
/* v7 — configure product / cart */
html body #order-standard_cart .product-info { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius) !important; color: var(--hf-fg-1) !important; padding: 20px 22px !important; }
html body #order-standard_cart .product-info .product-title, html body #order-standard_cart .product-info h1, html body #order-standard_cart .product-info h2, html body #order-standard_cart .product-info h3, html body #order-standard_cart .product-info h4 { color: var(--hf-fg-0) !important; }
html body #order-standard_cart .product-info .product-title { font-size: 22px; font-weight: 600; }
html body #order-standard_cart .product-info h3, html body #order-standard_cart .product-info h4 { font-size: 18px; margin: 18px 0 8px; }
html body #order-standard_cart .product-info p, html body #order-standard_cart .product-info li, html body #order-standard_cart .product-info td, html body #order-standard_cart .product-info th { color: var(--hf-fg-1) !important; }
html body #order-standard_cart .product-info strong, html body #order-standard_cart .product-info th { color: var(--hf-fg-0) !important; }
html body #order-standard_cart .product-info table { width: 100%; }
html body #order-standard_cart .product-info td, html body #order-standard_cart .product-info th { border-color: var(--hf-line-soft) !important; padding: 4px 8px 4px 0; }
.sub-heading span, html body #order-standard_cart .sub-heading span { background: var(--hf-bg-0) !important; }
.card .sub-heading span, .card .sub-heading-borderless span, html body #order-standard_cart .card .sub-heading span { background: var(--hf-bg-1) !important; }
/* ion range slider */
html body .irs--modern .irs-line, html body .irs .irs-line { background: var(--hf-bg-3) !important; border-color: var(--hf-line) !important; }
html body .irs--modern .irs-bar, html body .irs .irs-bar { background: var(--hf-accent) !important; }
html body .irs--modern .irs-handle, html body .irs .irs-handle { background: var(--hf-fg-0) !important; border-color: var(--hf-accent) !important; }
html body .irs--modern .irs-single, html body .irs .irs-single, html body .irs--modern .irs-from, html body .irs--modern .irs-to { background: var(--hf-accent) !important; color: var(--hf-accent-fg) !important; }
html body .irs--modern .irs-min, html body .irs--modern .irs-max, html body .irs .irs-min, html body .irs .irs-max { background: var(--hf-bg-3) !important; color: var(--hf-fg-1) !important; }
html body .irs--modern .irs-grid-text, html body .irs .irs-grid-text { color: var(--hf-fg-2) !important; }
html body .irs--modern .irs-grid-pol { background: var(--hf-line) !important; }
/* view cart items */
html body #order-standard_cart .view-cart-items { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line) !important; border-top: 0 !important; border-radius: 0 0 var(--hf-radius) var(--hf-radius) !important; }
html body #order-standard_cart .view-cart-items .item { background: transparent !important; border-bottom: 1px solid var(--hf-line-soft) !important; color: var(--hf-fg-1) !important; }
html body #order-standard_cart .view-cart-items .item-title { color: var(--hf-fg-0) !important; font-size: 18px; }
html body #order-standard_cart .view-cart-items .item-group { color: var(--hf-fg-2) !important; }
html body #order-standard_cart .view-cart-items .item-domain { color: var(--hf-accent) !important; }
html body #order-standard_cart .view-cart-items small, html body #order-standard_cart .view-cart-items .item-title small { color: var(--hf-fg-2) !important; }
html body #order-standard_cart .view-cart-items .item-price span, html body #order-standard_cart .view-cart-items .item-price { color: var(--hf-fg-0) !important; font-family: var(--hf-mono); }
html body #order-standard_cart .view-cart-items .item-price .cycle { color: var(--hf-fg-2) !important; font-family: var(--hf-sans); }
html body #order-standard_cart .view-cart-items .btn-remove-from-cart { color: var(--hf-fg-2) !important; }
html body #order-standard_cart .view-cart-items .btn-link, html body #order-standard_cart .view-cart-items a { color: var(--hf-accent); }
html body #order-standard_cart .empty-cart .btn, html body #order-standard_cart #btnEmptyCart { background: transparent !important; border: 1px solid var(--hf-line) !important; color: var(--hf-fg-2) !important; }
html body #order-standard_cart .empty-cart .btn:hover, html body #order-standard_cart #btnEmptyCart:hover { color: #ff7a7c !important; border-color: rgba(249,65,68,.5) !important; }
html body #order-standard_cart .view-cart-items-header { border-radius: var(--hf-radius) var(--hf-radius) 0 0 !important; }
/* checkout bits */
html body #order-standard_cart .alert-warning.checkout-security-msg, html body .checkout-security-msg { background: var(--hf-bg-1) !important; color: var(--hf-fg-1) !important; }
html body #order-standard_cart .already-registered .btn { font-size: 13px; }
html body .password-strength-meter .progress { background: var(--hf-bg-3) !important; }
/* v8 — product details */
html body .product-details .product-icon, html body .product-icon { background: var(--hf-bg-2) !important; color: var(--hf-fg-0) !important; border-radius: var(--hf-radius) var(--hf-radius) 0 0 !important; }
html body .product-details .product-icon h3, html body .product-details .product-icon h4, html body .product-icon h3, html body .product-icon h4 { color: var(--hf-fg-0) !important; }
html body .product-details .product-icon .fa-stack .fa-circle, html body .product-icon .fa-circle { color: var(--hf-accent) !important; }
html body .product-details .product-icon .fa-inverse { color: var(--hf-accent-fg) !important; }
html body .product-details .product-status-text, html body .product-status-text { border-radius: 0 0 var(--hf-radius) var(--hf-radius) !important; }
html body .product-details .product-status { border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius) !important; overflow: hidden; }
html body .product-details h4 { font-size: 12px !important; color: var(--hf-fg-2) !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 500 !important; margin: 16px 0 4px !important; font-family: var(--hf-mono); }
html body .product-details .text-center, html body .product-details .col-md-6.text-center { color: var(--hf-fg-0); font-size: 15px; }
html body .list-group-item.disabled, html body .list-group-item:disabled, html body .sidebar .list-group-item.disabled { background: transparent !important; color: var(--hf-fg-3) !important; opacity: 1; }
html body .list-group-item.disabled i { color: var(--hf-fg-3) !important; }
html body .tab-content.bg-white, html body .product-details-tab-container, html body .tab-content.product-details-tab-container { background: var(--hf-bg-1) !important; border: 1px solid var(--hf-line) !important; border-radius: var(--hf-radius) !important; color: var(--hf-fg-1) !important; }
html body .nav-tabs.responsive-tabs-sm .nav-link, html body .responsive-tabs-sm .nav-link { background: transparent !important; color: var(--hf-fg-2) !important; }
html body .responsive-tabs-sm .nav-link.active { color: var(--hf-fg-0) !important; border-bottom: 2px solid var(--hf-accent) !important; }
html body .product-details-tab-container strong, html body .tab-content strong { color: var(--hf-fg-0); }

/* ---------- v9 — dservermanager (TenantOS) product page ---------- */
html body .table-bordered { border: 1px solid var(--hf-line) !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: var(--hf-radius-sm) !important; overflow: hidden; background: transparent !important; }
html body .table-bordered > * > tr > td, html body .table-bordered > * > tr > th { border: 0 !important; border-top: 1px solid var(--hf-line-soft) !important; }
html body .table-bordered > *:first-child > tr:first-child > td, html body .table-bordered > *:first-child > tr:first-child > th { border-top: 0 !important; }
html body .table-bordered > * > tr > td + td, html body .table-bordered > * > tr > th + td, html body .table-bordered > * > tr > th + th { border-left: 1px solid var(--hf-line-soft) !important; }
html body .ds-table-td-vertical:not(:has(td:nth-child(3))) td:first-child { width: 34%; color: var(--hf-fg-2) !important; background: rgba(255, 255, 255, .015) !important; }
html body .ds-table-td-vertical:not(:has(td:nth-child(3))) td:last-child { color: var(--hf-fg-0) !important; }
html body .table-bordered.ds-table-td-vertical td { padding: 14px 20px !important; vertical-align: middle !important; }
/* OS / rescue tiles: equal heights, select pinned to the bottom, no jump while logos load */
html body .row > .col-md-4:has(> .panel-less-margin-bottom) { display: flex; flex-direction: column; }
html body .col-md-4 > .panel-less-margin-bottom { flex: 1 1 auto; display: flex; flex-direction: column; transition: border-color .15s ease; }
html body .col-md-4 > .panel-less-margin-bottom:hover { border-color: var(--hf-fg-3) !important; }
html body .col-md-4 > .panel-less-margin-bottom > .card-body:first-child { flex: 1 1 auto; }
html body .panel-less-margin-bottom > .card-body:first-child > .text-center:first-child { min-height: 60px; }
html body .panel-less-margin-bottom > hr { border-color: var(--hf-line-soft) !important; opacity: 1; }
html body .panel-less-margin-bottom select.form-control { background-color: var(--hf-bg-0) !important; cursor: pointer; }
@media (max-width: 767.98px) {
    html body .table-bordered.ds-table-td-vertical td { display: block; width: 100% !important; border-left: 0 !important; }
    html body .table-bordered.ds-table-td-vertical td:first-child { padding-bottom: 4px !important; font-size: 12px; background: transparent !important; }
    html body .ds-table-no-top-border:has(td:nth-child(3)) td, html body .ds-table-no-top-border:has(td:nth-child(3)) th { white-space: nowrap; }
    html body .table-bordered.ds-table-td-vertical td:last-child { border-top: 0 !important; padding-top: 4px !important; }
}
/* module loading skeletons: dark shimmer instead of white blocks */
html body .dsSkeletonImageSmallCircle, html body .dsSkeletonImageSmallSquare, html body .dsSkeletonSmallText, html body .dsSkeletonDropdown { background: linear-gradient(90deg, var(--hf-bg-2) 25%, var(--hf-bg-3) 50%, var(--hf-bg-2) 75%) repeat !important; background-size: 200% 100% !important; border-radius: var(--hf-radius-sm); }
html body .dsSkeletonImageSmallCircle { border-radius: 50%; }
html body .dsSkeletonDropdown { height: 38px !important; }
html body *:has(> .ds-table-no-top-border) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- v10 — client-area sweep ---------- */
html { color-scheme: dark; }                       /* native checkboxes, radios, file inputs, scrollbars render dark */
html body .list-group, html body .list-group-item { border-color: var(--hf-line-soft) !important; }
html body .table > thead > tr > th, html body table.dataTable > thead > tr > th, html body .table th { border-top-color: transparent !important; border-bottom-color: var(--hf-line) !important; }
/* datatables: headings line up with the cells below */
html body table.dataTable > thead > tr > th, html body .table-list > thead > tr > th { text-align: left !important; padding-left: 20px !important; }
html body table.dataTable > thead > tr > th.sorting_disabled:last-child { text-align: right !important; }
/* heading follows the alignment of its column's cells */
html body table.dataTable:has(> tbody > tr > td:nth-child(1).text-center) > thead > tr > th:nth-child(1) { text-align: center !important; padding-left: 10px !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(1).text-right) > thead > tr > th:nth-child(1) { text-align: right !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(2).text-center) > thead > tr > th:nth-child(2) { text-align: center !important; padding-left: 10px !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(2).text-right) > thead > tr > th:nth-child(2) { text-align: right !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(3).text-center) > thead > tr > th:nth-child(3) { text-align: center !important; padding-left: 10px !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(3).text-right) > thead > tr > th:nth-child(3) { text-align: right !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(4).text-center) > thead > tr > th:nth-child(4) { text-align: center !important; padding-left: 10px !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(4).text-right) > thead > tr > th:nth-child(4) { text-align: right !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(5).text-center) > thead > tr > th:nth-child(5) { text-align: center !important; padding-left: 10px !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(5).text-right) > thead > tr > th:nth-child(5) { text-align: right !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(6).text-center) > thead > tr > th:nth-child(6) { text-align: center !important; padding-left: 10px !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(6).text-right) > thead > tr > th:nth-child(6) { text-align: right !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(7).text-center) > thead > tr > th:nth-child(7) { text-align: center !important; padding-left: 10px !important; }
html body table.dataTable:has(> tbody > tr > td:nth-child(7).text-right) > thead > tr > th:nth-child(7) { text-align: right !important; }
html body .dataTables_filter input, html body .table-container .dataTables_filter input { padding-left: 34px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d8893' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 12px 50% !important; }
/* mailing-list switch knob */
html body .bootstrap-switch .bootstrap-switch-label { background: var(--hf-bg-3) !important; border-left: 1px solid var(--hf-line) !important; }
html body .bootstrap-switch { border-color: var(--hf-line) !important; border-radius: 999px !important; overflow: hidden; }
/* add funds: use the full content width instead of a centred narrow column */
html body.hf-page-clientareaaddfunds .primary-content .offset-md-2 { margin-left: 0 !important; flex: 0 0 100% !important; max-width: 100% !important; }
html body .client-home-cards .list-group, html body .client-home-cards .list-group-item { border-color: var(--hf-line-soft) !important; }
/* order form: "Configure Server" (hostname / root pw / NS prefixes) is auto-filled by hooks/hostfory_autofill.php — keep it out of sight */
html body .sub-heading:has(+ .field-container #inputHostname), html body .field-container:has(#inputHostname) { display: none !important; }

/* v12 (2026-10-19): invoice "Make Payment" — saved/linked pay methods (PayPal, cards) were a light box with light text */
html body .paymethod-info { background: var(--hf-bg-2) !important; border: 1px solid var(--hf-line) !important; color: var(--hf-fg-0) !important; border-radius: var(--hf-radius-sm) !important; box-shadow: none !important; transition: border-color .15s ease, background .15s ease; }
html body .paymethod-info:hover { border-color: var(--hf-fg-3) !important; }
html body .paymethod-info.selected { background: var(--hf-accent-soft) !important; border-color: var(--hf-accent) !important; }
html body .paymethod-info, html body .paymethod-info label, html body .paymethod-info span, html body .paymethod-info div { color: var(--hf-fg-0) !important; }
html body .paymethod-info .text-muted, html body .paymethod-info small { color: var(--hf-fg-2) !important; }
html body .payment-instructions { color: var(--hf-fg-1) !important; }
/* invoice summary on the payment page: show every line (incl. the PayPal fee) instead of a 300px inner scroll */
html body .invoice-summary-table { max-height: none !important; overflow: visible !important; }
html body .invoice-summary .table td:first-child, html body .invoice-summary .table th:first-child { text-align: left !important; }
html body .invoice-summary .table td:last-child { white-space: nowrap; vertical-align: top; }