/*
 * HyperCloudHost production design system
 * WHMCS target: 8.10.1 / Twenty-One child theme
 */

:root {
    --hch-primary: #0491f5;
    --hch-primary-hover: #0377d2;
    --hch-primary-soft: #e7f5ff;
    --hch-primary-light: #55c4ff;
    --hch-primary-deep: #0377d2;
    --hch-gradient-primary: linear-gradient(135deg, #0377d2 0%, #0491f5 58%, #55c4ff 100%);
    --hch-background: #f3f9fe;
    --hch-surface: #ffffff;
    --hch-surface-muted: #f7fbfe;
    --hch-surface-strong: #111827;
    --hch-text: #171a24;
    --hch-text-muted: #687083;
    --hch-border: #e5e7ef;
    --hch-border-strong: #d6d9e4;
    --hch-success: #0f9f6e;
    --hch-success-soft: #e8f8f2;
    --hch-warning: #c87505;
    --hch-warning-soft: #fff4df;
    --hch-danger: #d33f49;
    --hch-danger-soft: #fff0f1;
    --hch-info: #0491f5;
    --hch-info-soft: #e7f5ff;
    --hch-sidebar-width: 252px;
    --hch-topbar-height: 72px;
    --hch-radius-sm: 8px;
    --hch-radius-md: 12px;
    --hch-radius-lg: 18px;
    --hch-radius-xl: 24px;
    --hch-shadow-sm: 0 1px 2px rgba(18, 23, 38, 0.04);
    --hch-shadow-md: 0 14px 40px rgba(28, 32, 51, 0.08);
    --hch-focus: 0 0 0 3px rgba(4, 145, 245, 0.22);
    --hch-transition: 180ms ease;
}

/* Application shell */

.hch-app,
.hch-auth-shell,
.hch-cart-shell {
    color: var(--hch-text);
    background: var(--hch-background);
    font-family: "Open Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hch-app,
.hch-app *,
.hch-auth-shell,
.hch-auth-shell *,
.hch-cart-shell,
.hch-cart-shell * {
    box-sizing: border-box;
}

.hch-svg-icon {
    display: block;
}

.hch-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--hch-sidebar-width) minmax(0, 1fr);
}

.hch-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: var(--hch-sidebar-width);
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    color: var(--hch-text);
    background: var(--hch-surface);
    border-right: 1px solid var(--hch-border);
}

.hch-sidebar__header {
    min-height: var(--hch-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 0 20px;
    border-bottom: 1px solid var(--hch-border);
}

.hch-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--hch-text);
    text-decoration: none;
}

.hch-brand:hover,
.hch-brand:focus {
    color: var(--hch-text);
    text-decoration: none;
}

.hch-brand__mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--hch-primary);
    border-radius: 10px;
}

.hch-brand__mark svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.hch-brand__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hch-brand__name {
    font-size: 15px;
    font-weight: 760;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.hch-brand__tagline {
    margin-top: 4px;
    color: var(--hch-text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hch-brand__logo {
    display: block;
    width: auto;
    max-width: 176px;
    height: auto;
    max-height: 46px;
    object-fit: contain;
}

.hch-brand__fallback {
    color: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.hch-sidebar__close {
    display: none;
}

.hch-sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 14px 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--hch-border-strong) transparent;
}

.hch-nav-section + .hch-nav-section {
    margin-top: 24px;
}

.hch-nav-section__label {
    margin: 0 10px 8px;
    color: #9198a8;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hch-nav-list,
.hch-nav-submenu,
.hch-action-list,
.hch-timeline,
.hch-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hch-nav-list {
    display: grid;
    gap: 4px;
}

.hch-sidebar__item,
.hch-sidebar__disclosure {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    color: #4c5364;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--hch-transition), background var(--hch-transition), transform var(--hch-transition);
}

.hch-sidebar__item:hover,
.hch-sidebar__disclosure:hover {
    color: var(--hch-text);
    background: var(--hch-surface-muted);
    text-decoration: none;
}

.hch-sidebar__item:focus-visible,
.hch-sidebar__disclosure:focus-visible,
.hch-icon-button:focus-visible,
.hch-button:focus-visible,
.hch-field:focus-visible,
.hch-select:focus-visible,
.hch-toast__dismiss:focus-visible,
.hch-fixture-link:focus-visible {
    outline: none;
    box-shadow: var(--hch-focus);
}

.hch-sidebar__item.is-active,
.hch-sidebar__item.active,
.hch-sidebar__disclosure.is-active {
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
}

.hch-sidebar__icon,
.hch-action-card__icon,
.hch-stat-card__icon,
.hch-icon-button__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.hch-sidebar__icon {
    width: 20px;
    height: 20px;
}

.hch-sidebar__icon i {
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.hch-sidebar__icon svg,
.hch-action-card__icon svg,
.hch-stat-card__icon svg,
.hch-avatar svg,
.hch-icon-button svg,
.hch-button svg,
.hch-empty-state svg,
.hch-state-panel svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hch-sidebar__label {
    min-width: 0;
    flex: 1 1 auto;
}

.hch-sidebar__chevron {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    font-size: 9px;
    transition: transform var(--hch-transition);
}

.hch-sidebar__disclosure[aria-expanded="true"] .hch-sidebar__chevron {
    transform: rotate(180deg);
}

.hch-nav-submenu {
    margin: 4px 0 5px 31px;
    padding-left: 11px;
    border-left: 1px solid var(--hch-border);
}

.hch-nav-submenu[hidden] {
    display: none;
}

.hch-nav-submenu .hch-sidebar__item {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
}

.hch-nav-submenu .hch-sidebar__label {
    overflow-wrap: anywhere;
}

.hch-cart-page #order-standard_cart .cart-sidebar [menuItemName="Categories"],
.hch-cart-page #order-standard_cart .cart-sidebar [menuItemName="Product Categories"] {
    display: none !important;
}

.hch-nav-submenu .hch-sidebar__icon,
.hch-nav-submenu .hch-sidebar__icon i {
    width: 18px;
    height: 18px;
    font-size: 11px;
}

.hch-nav-badge {
    min-width: 22px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    color: var(--hch-primary);
    background: #fff;
    border: 1px solid #dcd9ff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}

.hch-sidebar__footer {
    flex: 0 0 auto;
    padding: 14px;
    border-top: 1px solid var(--hch-border);
}

.hch-account-chip {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
}

.hch-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: #252938;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.hch-account-chip__copy {
    min-width: 0;
    flex: 1;
}

.hch-account-chip__name,
.hch-account-chip__email {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-account-chip__name {
    font-size: 12px;
    font-weight: 720;
}

.hch-account-chip__email {
    margin-top: 2px;
    color: var(--hch-text-muted);
    font-size: 10px;
}

.hch-shell {
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.hch-app-page {
    margin: 0;
    background: var(--hch-background);
}

.hch-app-breadcrumb {
    min-width: 0;
}

.hch-app-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 12px;
    white-space: nowrap;
}

.hch-app-breadcrumb .breadcrumb-item {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hch-app-breadcrumb .breadcrumb-item.active {
    color: var(--hch-text);
    font-weight: 700;
}

.hch-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--hch-topbar-height);
    min-height: var(--hch-topbar-height);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 30px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--hch-border);
    backdrop-filter: blur(12px);
}

.hch-topbar__start,
.hch-topbar__actions {
    display: flex;
    align-items: center;
}

.hch-topbar__start {
    min-width: 0;
    gap: 12px;
}

.hch-topbar__actions {
    height: 100%;
    margin-left: auto;
    gap: 8px;
}

.hch-app-notices:empty {
    display: none;
}

.hch-app-notices .network-issue-alert .container,
.hch-app-notices .verification-banner .container {
    width: 100%;
    max-width: none;
    padding-right: clamp(22px, 3vw, 46px);
    padding-left: clamp(22px, 3vw, 46px);
}

.hch-topbar__menu {
    display: none;
}

.hch-breadcrumb {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hch-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.hch-breadcrumb__current {
    overflow: hidden;
    color: var(--hch-text);
    font-weight: 700;
    text-overflow: ellipsis;
}

.hch-search {
    position: relative;
    width: min(320px, 28vw);
}

.hch-search__icon {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 17px;
    height: 17px;
    color: #8a91a2;
    transform: translateY(-50%);
    pointer-events: none;
}

.hch-search__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.hch-search .hch-field {
    min-height: 40px;
    padding-left: 39px;
    background: var(--hch-surface-muted);
}

.hch-icon-button {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #555d6f;
    background: var(--hch-surface);
    border: 1px solid var(--hch-border);
    border-radius: 12px;
    cursor: pointer;
    transition: color var(--hch-transition), border-color var(--hch-transition), background var(--hch-transition), transform var(--hch-transition);
}

.hch-icon-button.hch-sidebar__close,
.hch-icon-button.hch-topbar__menu {
    display: none;
}

.hch-icon-button:hover {
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    border-color: #d8d4ff;
}

.hch-icon-button svg {
    width: 18px;
    height: 18px;
}

.hch-icon-button__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    color: #fff;
    background: var(--hch-danger);
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.hch-account-menu {
    position: relative;
    width: 68px;
    height: 42px;
    flex: 0 0 68px;
    display: flex;
    align-items: center;
}

.hch-account-trigger {
    width: 68px;
    min-width: 68px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 9px 3px 4px;
    color: var(--hch-text);
    background: var(--hch-surface);
    border: 1px solid var(--hch-border);
    border-radius: 12px;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: color var(--hch-transition), background var(--hch-transition), border-color var(--hch-transition);
}

.hch-account-trigger:hover,
.hch-account-trigger[aria-expanded="true"] {
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    border-color: #d8d4ff;
}

.hch-account-trigger:focus-visible {
    outline: none;
    box-shadow: var(--hch-focus);
}

.hch-account-menu--guest .hch-account-trigger {
    text-decoration: none;
}

.hch-account-trigger .hch-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.hch-avatar svg {
    width: 17px;
    height: 17px;
}

.hch-account-trigger__copy {
    display: none;
}

.hch-account-trigger__copy strong,
.hch-account-trigger__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-account-trigger__copy strong {
    font-size: 11px;
    font-weight: 760;
}

.hch-account-trigger__copy small {
    margin-top: 1px;
    color: var(--hch-text-muted);
    font-size: 9px;
}

.hch-account-trigger__chevron {
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    transition: transform var(--hch-transition);
}

.hch-account-trigger__chevron svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hch-account-trigger[aria-expanded="true"] .hch-account-trigger__chevron {
    transform: rotate(180deg);
}

.hch-account-dropdown {
    position: absolute;
    z-index: 80;
    top: calc(100% + 10px);
    right: 0;
    width: min(310px, calc(100vw - 24px));
    max-height: min(620px, calc(100vh - 96px));
    overflow-y: auto;
    padding: 8px;
    color: var(--hch-text);
    background: #fff;
    border: 1px solid var(--hch-border);
    border-radius: 14px;
    box-shadow: var(--hch-shadow-md);
}

.hch-account-dropdown[hidden] {
    display: none;
}

.hch-account-dropdown__header {
    display: grid;
    gap: 3px;
    padding: 11px 12px 13px;
    border-bottom: 1px solid var(--hch-border);
}

.hch-account-dropdown__header strong,
.hch-account-dropdown__header span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-account-dropdown__header strong {
    font-size: 12px;
}

.hch-account-dropdown__header span {
    color: var(--hch-text-muted);
    font-size: 10px;
}

.hch-account-nav,
.hch-account-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hch-account-nav {
    padding-top: 6px;
}

.hch-account-nav__heading {
    display: block;
    padding: 9px 10px 5px;
    color: #9198a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hch-account-nav__item {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: #4c5364;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}

.hch-account-nav__item:hover,
.hch-account-nav__item.is-active {
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    text-decoration: none;
}

.hch-account-nav__item > span:first-child {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.hch-account-nav__item svg {
    width: 17px;
    height: 17px;
}

.hch-account-nav__item > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.hch-account-nav__divider,
.hch-nav-divider {
    height: 1px;
    margin: 6px 9px;
    background: var(--hch-border);
}

.hch-admin-return svg {
    width: 15px;
    height: 15px;
}

.hch-main {
    width: 100%;
    min-width: 0;
    max-width: 1540px;
    margin: 0 auto;
    padding: 32px clamp(22px, 3vw, 46px) 52px;
}

.hch-content-grid {
    min-width: 0;
}

.hch-content-grid--with-context {
    display: grid;
    grid-template-columns: minmax(250px, 286px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.hch-content-grid > .primary-content {
    min-width: 0;
}

.hch-context-sidebar {
    min-width: 0;
}

.hch-context-sidebar .sidebar + .sidebar {
    margin-top: 18px;
}

.hch-context-sidebar .card,
.hch-context-sidebar .panel {
    overflow: hidden;
    border: 1px solid var(--hch-border);
    border-radius: var(--hch-radius-md);
    box-shadow: var(--hch-shadow-sm);
}

.hch-context-sidebar .card-sidebar {
    margin-bottom: 12px !important;
    overflow: hidden;
    background: var(--hch-surface);
    border: 1px solid #dbeafe;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(14, 116, 144, 0.08);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.hch-context-sidebar .card-sidebar > .card-header {
    min-height: 54px;
    padding: 0;
    color: #334155;
    background: linear-gradient(135deg, #ffffff 0%, #f8fdff 100%);
    border: 0;
}

.hch-context-sidebar .card-sidebar > .hch-context-card-toggle {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.hch-context-sidebar .card-sidebar > .hch-context-card-toggle:hover {
    background: linear-gradient(135deg, #f0f9ff 0%, #e8f7ff 100%);
}

.hch-context-sidebar .card-sidebar:has(> .hch-context-card-toggle:hover) {
    border-color: #7dd3fc;
    box-shadow: 0 9px 24px rgba(4, 145, 245, 0.13);
    transform: translateY(-1px);
}

.hch-context-sidebar .card-sidebar:focus-within {
    border-color: #7dd3fc;
    box-shadow: 0 9px 24px rgba(4, 145, 245, 0.13);
}

.hch-context-sidebar .hch-context-card-toggle:focus-visible {
    outline: 3px solid rgba(85, 196, 255, 0.28);
    outline-offset: -3px;
}

.hch-context-sidebar .card-sidebar.is-expanded {
    border-color: #7dd3fc;
    box-shadow: 0 10px 28px rgba(4, 145, 245, 0.12);
}

.hch-context-sidebar .card-sidebar.is-expanded > .card-header {
    color: #0377d2;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
}

.hch-context-sidebar .card-sidebar > .card-header .card-title {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 11px 13px;
    gap: 10px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.hch-context-sidebar .card-sidebar > .card-header .card-title > i:not(.card-minimise) {
    display: inline-grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    margin: 0 !important;
    color: #0491f5;
    background: #e0f2fe;
    border-radius: 10px;
    font-size: 13px;
}

.hch-context-sidebar .card-sidebar.is-expanded > .card-header .card-title > i:not(.card-minimise) {
    color: #ffffff;
    background: linear-gradient(135deg, #55c4ff, #0491f5);
    box-shadow: 0 5px 12px rgba(4, 145, 245, 0.22);
}

.hch-context-sidebar .card-sidebar > .card-header .card-minimise {
    display: inline-grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0 0 0 auto !important;
    place-items: center;
    color: #64748b;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #dbeafe;
    border-radius: 9px;
    float: none !important;
    font-size: 10px;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.hch-context-sidebar .card-sidebar > .hch-context-card-toggle:hover .card-minimise,
.hch-context-sidebar .card-sidebar.is-expanded > .card-header .card-minimise {
    color: #0274c7;
    background: #ffffff;
    border-color: #bae6fd;
}

.hch-context-sidebar .card-sidebar .collapsable-card-body {
    background: #ffffff;
    border-top: 1px solid #dbeafe;
}

.hch-context-sidebar .card-sidebar .list-group-item {
    padding: 11px 14px;
    color: #475569;
    border-color: #edf6fb;
    font-size: 11px;
    transition: color 160ms ease, background-color 160ms ease, padding-left 160ms ease;
}

.hch-context-sidebar .card-sidebar a.list-group-item:hover,
.hch-context-sidebar .card-sidebar a.list-group-item:focus {
    padding-left: 17px;
    color: #0274c7;
    background: #f0f9ff;
}

.hch-context-sidebar .card-sidebar a.list-group-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, #55c4ff, #0491f5);
    border-color: #0491f5;
}

.hch-app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding: 19px clamp(22px, 3vw, 46px);
    color: var(--hch-text-muted);
    background: var(--hch-surface);
    border-top: 1px solid var(--hch-border);
    font-size: 10px;
}

.hch-app-footer__links {
    display: flex;
    gap: 16px;
}

.hch-app-footer a {
    color: var(--hch-text-muted);
}

.hch-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.hch-page-header__copy {
    min-width: 0;
}

.hch-eyebrow {
    margin: 0 0 7px;
    color: var(--hch-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hch-page-title {
    margin: 0;
    color: var(--hch-text);
    font-size: clamp(25px, 2.4vw, 36px);
    font-weight: 770;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.hch-page-subtitle {
    max-width: 720px;
    margin: 9px 0 0;
    color: var(--hch-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.hch-page-actions,
.hch-card__actions,
.hch-form-actions,
.hch-inline-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buttons and fields */

.hch-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    color: #fff;
    background: var(--hch-primary);
    border: 1px solid var(--hch-primary);
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 730;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--hch-transition), border-color var(--hch-transition), color var(--hch-transition), transform var(--hch-transition);
}

.hch-button:hover {
    color: #fff;
    background: var(--hch-primary-hover);
    border-color: var(--hch-primary-hover);
    text-decoration: none;
}

.hch-button:active {
    transform: translateY(1px);
}

.hch-button--secondary {
    color: var(--hch-text);
    background: #fff;
    border-color: var(--hch-border-strong);
}

.hch-button--secondary:hover {
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    border-color: #d8d4ff;
}

.hch-button--danger {
    color: var(--hch-danger);
    background: var(--hch-danger-soft);
    border-color: #f7cdd1;
}

.hch-button--danger:hover {
    color: #fff;
    background: var(--hch-danger);
    border-color: var(--hch-danger);
}

.hch-button--sm {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 11px;
}

.hch-button svg {
    width: 16px;
    height: 16px;
}

.hch-button--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.hch-button--loading::after {
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: #fff;
    content: "";
    animation: hch-spin 700ms linear infinite;
}

.hch-button--secondary.hch-button--loading::after {
    color: var(--hch-primary);
}

.hch-field,
.hch-select,
.hch-textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--hch-text);
    background: #fff;
    border: 1px solid var(--hch-border-strong);
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    transition: border-color var(--hch-transition), box-shadow var(--hch-transition), background var(--hch-transition);
}

.hch-field::placeholder,
.hch-textarea::placeholder {
    color: #a1a7b4;
}

.hch-field:hover,
.hch-select:hover,
.hch-textarea:hover {
    border-color: #bcc1cf;
}

.hch-field:focus,
.hch-select:focus,
.hch-textarea:focus {
    outline: none;
    border-color: var(--hch-primary);
    box-shadow: var(--hch-focus);
}

.hch-textarea {
    min-height: 126px;
    resize: vertical;
}

.hch-field-group {
    display: grid;
    gap: 7px;
}

.hch-field-label {
    color: #343947;
    font-size: 12px;
    font-weight: 700;
}

.hch-field-help,
.hch-field-error {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}

.hch-field-help {
    color: var(--hch-text-muted);
}

.hch-field-error {
    color: var(--hch-danger);
    font-weight: 650;
}

.hch-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    color: #414757;
    font-size: 12px;
    line-height: 1.45;
    cursor: pointer;
}

.hch-check input {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 1px 0 0;
    accent-color: var(--hch-primary);
}

/* Cards, metrics, and quick actions */

.hch-stat-grid,
.hch-action-grid,
.hch-grid,
.hch-form-grid,
.hch-product-grid {
    display: grid;
    gap: 16px;
}

.hch-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.hch-stat-card,
.hch-card,
.hch-action-card,
.hch-product-card,
.hch-auth-card {
    background: var(--hch-surface);
    border: 1px solid var(--hch-border);
    box-shadow: var(--hch-shadow-sm);
}

.hch-stat-card {
    min-width: 0;
    min-height: 152px;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: var(--hch-radius-lg);
}

a.hch-stat-card {
    color: var(--hch-text);
    text-decoration: none;
    transition: transform var(--hch-transition), border-color var(--hch-transition), box-shadow var(--hch-transition);
}

a.hch-stat-card:hover,
a.hch-stat-card:focus {
    color: var(--hch-text);
    border-color: #d8d4ff;
    box-shadow: 0 14px 34px rgba(58, 52, 145, 0.1);
    text-decoration: none;
    transform: translateY(-2px);
}

.hch-stat-card__arrow {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    margin-top: 4px;
    color: #a4a9b7;
}

.hch-stat-card__arrow svg {
    width: 16px;
    height: 16px;
}

.hch-stat-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hch-stat-card__icon {
    width: 38px;
    height: 38px;
    padding: 9px;
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    border-radius: 11px;
}

.hch-stat-card--success .hch-stat-card__icon {
    color: var(--hch-success);
    background: var(--hch-success-soft);
}

.hch-stat-card--info .hch-stat-card__icon {
    color: var(--hch-info);
    background: var(--hch-info-soft);
}

.hch-stat-card--warning .hch-stat-card__icon {
    color: var(--hch-warning);
    background: var(--hch-warning-soft);
}

.hch-stat-card__value {
    margin-top: 16px;
    font-size: 27px;
    font-weight: 780;
    letter-spacing: -0.04em;
    line-height: 1;
}

.hch-stat-card__label {
    margin-top: 7px;
    color: #555d6f;
    font-size: 11px;
    font-weight: 740;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hch-stat-card__meta {
    margin-top: auto;
    padding-top: 14px;
    color: var(--hch-text-muted);
    border-top: 1px solid var(--hch-border);
    font-size: 10px;
    line-height: 1.3;
}

.hch-action-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0 0 18px;
}

.hch-action-card {
    min-width: 0;
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px;
    color: var(--hch-text);
    border-radius: 14px;
    text-align: center;
    text-decoration: none;
    transition: transform var(--hch-transition), border-color var(--hch-transition), box-shadow var(--hch-transition), color var(--hch-transition);
}

.hch-action-card:hover {
    color: var(--hch-primary);
    border-color: #d8d4ff;
    box-shadow: 0 12px 30px rgba(58, 52, 145, 0.09);
    text-decoration: none;
    transform: translateY(-2px);
}

.hch-action-card__icon {
    width: 24px;
    height: 24px;
    color: var(--hch-primary);
}

.hch-action-card__label {
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.3;
}

.hch-card {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--hch-radius-lg);
}

.hch-card + .hch-card {
    margin-top: 18px;
}

.hch-card__header,
.hch-card__body,
.hch-card__footer {
    padding: 18px 20px;
}

.hch-dashboard-panels {
    margin-top: 20px;
}

.hch-dashboard-panels .hch-whmcs-panel {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid var(--hch-border);
    border-radius: var(--hch-radius-lg);
    box-shadow: var(--hch-shadow-sm);
}

.hch-dashboard-panels .card-header {
    min-height: 61px;
    display: flex;
    align-items: center;
    padding: 16px 19px;
    background: var(--hch-surface);
    border-bottom: 1px solid var(--hch-border);
}

.hch-dashboard-panels .card-title {
    width: 100%;
    color: var(--hch-text);
    font-size: 14px;
    font-weight: 760;
}

.hch-dashboard-panels .list-group-item {
    padding: 13px 18px;
    color: #4c5364;
    border-color: var(--hch-border);
    font-size: 12px;
}

.hch-dashboard-panels .card-footer:empty {
    display: none;
}

.hch-dashboard-overview-grid {
    margin-top: 20px;
}

.hch-dashboard-service-overview,
.hch-dashboard-account-card {
    min-width: 0;
}

.hch-dashboard-panel-stack {
    margin: 0;
    padding: 0;
}

.hch-dashboard-panel-stack .hch-whmcs-panel {
    margin: 0;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--hch-border);
    border-radius: 0;
    box-shadow: none;
}

.hch-dashboard-panel-stack .hch-whmcs-panel:last-child {
    border-bottom: 0;
}

.hch-dashboard-panel-stack .card-header {
    min-height: 52px;
    padding: 13px 20px;
    background: #f8fbff;
}

.hch-dashboard-panel-stack .card-title {
    font-size: 12px;
}

.hch-dashboard-panel-stack .card-body {
    padding: 16px 20px;
}

.hch-dashboard-panel-stack .list-group-item {
    min-width: 0;
    padding: 13px 20px;
    background: #fff;
    overflow-wrap: anywhere;
}

.hch-dashboard-panel-stack .card-footer {
    padding: 10px 20px;
    background: var(--hch-surface-muted);
    border-top-color: var(--hch-border);
}

.hch-dashboard-account-card {
    position: sticky;
    top: calc(var(--hch-topbar-height) + 20px);
}

.hch-dashboard-account-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hch-border);
}

.hch-dashboard-account-identity .hch-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: #fff;
    background: linear-gradient(135deg, #0491f5, #55c4ff);
    border: 0;
    font-size: 12px;
}

.hch-dashboard-account-avatar {
    position: relative;
    isolation: isolate;
}

.hch-dashboard-account-avatar__fallback,
.hch-dashboard-account-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hch-dashboard-account-avatar__fallback {
    z-index: 0;
    display: grid;
    place-items: center;
}

.hch-dashboard-account-avatar img {
    z-index: 1;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.hch-dashboard-account-identity > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hch-dashboard-account-identity strong,
.hch-dashboard-account-identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-dashboard-account-identity strong {
    color: var(--hch-text);
    font-size: 12px;
}

.hch-dashboard-account-identity > div span {
    color: var(--hch-text-muted);
    font-size: 10px;
}

.hch-dashboard-account-card .hch-detail-list__item {
    grid-template-columns: minmax(72px, 0.55fr) minmax(0, 1.45fr);
    gap: 12px;
}

.hch-dashboard-account-card .hch-card__footer .hch-form-actions {
    justify-content: flex-end;
}

.hch-addon-output + .hch-addon-output {
    margin-top: 18px;
}

.hch-card__header {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--hch-border);
}

.hch-card__title {
    margin: 0;
    font-size: 14px;
    font-weight: 760;
    letter-spacing: -0.01em;
}

.hch-card__subtitle {
    margin: 4px 0 0;
    color: var(--hch-text-muted);
    font-size: 11px;
}

.hch-card__body {
    min-width: 0;
}

.hch-card__footer {
    background: var(--hch-surface-muted);
    border-top: 1px solid var(--hch-border);
}

.hch-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hch-grid--sidebar {
    grid-template-columns: minmax(0, 1.65fr) minmax(270px, 0.75fr);
    align-items: start;
}

.hch-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hch-form-grid .hch-field-group--full {
    grid-column: 1 / -1;
}

.hch-divider {
    height: 1px;
    margin: 20px 0;
    background: var(--hch-border);
    border: 0;
}

/* Tables and lists */

.hch-table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.hch-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px;
}

.hch-table th,
.hch-table td {
    padding: 13px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--hch-border);
}

.hch-table th {
    color: #747c8e;
    background: var(--hch-surface-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hch-table tbody tr {
    transition: background var(--hch-transition);
}

.hch-table tbody tr:hover {
    background: #fbfbfe;
}

.hch-table tbody tr:last-child td {
    border-bottom: 0;
}

.hch-table__primary {
    min-width: 160px;
    color: var(--hch-text);
    font-weight: 720;
}

.hch-table__secondary {
    display: block;
    max-width: 320px;
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: var(--hch-text-muted);
    font-size: 10px;
    font-weight: 500;
}

.hch-table__actions {
    text-align: right !important;
    white-space: nowrap;
}

.hch-badge {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    color: #50586a;
    background: #f0f1f5;
    border: 1px solid #e4e6ec;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.hch-badge::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: currentColor;
    border-radius: 50%;
    content: "";
}

.hch-badge--success {
    color: var(--hch-success);
    background: var(--hch-success-soft);
    border-color: #c8ebdd;
}

.hch-badge--warning {
    color: var(--hch-warning);
    background: var(--hch-warning-soft);
    border-color: #f2dbb0;
}

.hch-badge--danger {
    color: var(--hch-danger);
    background: var(--hch-danger-soft);
    border-color: #f6cdd1;
}

.hch-badge--info {
    color: var(--hch-info);
    background: var(--hch-info-soft);
    border-color: #cfe5fb;
}

.hch-detail-list {
    display: grid;
}

.hch-detail-list__item {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hch-border);
}

.hch-detail-list__item:last-child {
    border-bottom: 0;
}

.hch-detail-list__label {
    color: var(--hch-text-muted);
    font-size: 11px;
}

.hch-detail-list__value {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--hch-text);
    font-size: 12px;
    font-weight: 680;
}

/* Product and cart surfaces */

.hch-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hch-product-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--hch-radius-lg);
}

.hch-product-card.is-featured {
    border-color: var(--hch-primary);
    box-shadow: 0 16px 36px rgba(79, 70, 229, 0.11);
}

.hch-product-card__flag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 8px;
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hch-product-card__body {
    flex: 1;
    padding: 22px;
}

.hch-product-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 780;
}

.hch-product-card__description {
    min-height: 42px;
    margin: 8px 0 16px;
    color: var(--hch-text-muted);
    font-size: 11px;
    line-height: 1.55;
}

.hch-product-card__price {
    margin-bottom: 18px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hch-product-card__price small {
    color: var(--hch-text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
}

.hch-feature-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #454c5c;
    font-size: 11px;
}

.hch-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.hch-feature-list li::before {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    display: grid;
    place-items: center;
    color: var(--hch-success);
    background: var(--hch-success-soft);
    border-radius: 50%;
    content: "✓";
    font-size: 9px;
    font-weight: 900;
}

.hch-product-card__footer {
    padding: 16px 22px 22px;
}

.hch-product-card__footer .hch-button {
    width: 100%;
}

.hch-order-summary {
    position: sticky;
    top: calc(var(--hch-topbar-height) + 18px);
}

.hch-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    color: var(--hch-text-muted);
    font-size: 11px;
}

.hch-summary-row strong {
    color: var(--hch-text);
    font-weight: 720;
    text-align: right;
}

.hch-summary-row--total {
    margin-top: 8px;
    padding-top: 17px;
    color: var(--hch-text);
    border-top: 1px solid var(--hch-border-strong);
    font-size: 13px;
    font-weight: 750;
}

.hch-summary-row--total strong {
    color: var(--hch-primary);
    font-size: 19px;
}

.hch-domain-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 18px;
    background: var(--hch-surface-muted);
    border: 1px solid var(--hch-border);
    border-radius: 14px;
}

.hch-cart-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid var(--hch-border);
}

.hch-cart-item:last-child {
    border-bottom: 0;
}

.hch-cart-item__title {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 740;
}

.hch-cart-item__meta {
    margin: 4px 0 0;
    color: var(--hch-text-muted);
    font-size: 10px;
    line-height: 1.5;
}

.hch-cart-item__price {
    font-size: 13px;
    font-weight: 760;
    text-align: right;
    white-space: nowrap;
}

/* Alerts, empty states, skeletons, and tickets */

.hch-alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 16px;
    padding: 13px 14px;
    color: var(--hch-info);
    background: var(--hch-info-soft);
    border: 1px solid #cfe5fb;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.5;
}

.hch-alert--success {
    color: #087b55;
    background: var(--hch-success-soft);
    border-color: #c8ebdd;
}

.hch-alert--warning {
    color: #965805;
    background: var(--hch-warning-soft);
    border-color: #f2dbb0;
}

.hch-alert--danger {
    color: #a72c36;
    background: var(--hch-danger-soft);
    border-color: #f6cdd1;
}

.hch-empty-state,
.hch-state-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 34px 20px;
    text-align: center;
}

.hch-empty-state__icon,
.hch-state-panel__icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    padding: 13px;
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    border-radius: 15px;
}

.hch-empty-state__title,
.hch-state-panel__title {
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 760;
}

.hch-empty-state__message,
.hch-state-panel__message {
    max-width: 440px;
    margin: 7px 0 18px;
    color: var(--hch-text-muted);
    font-size: 11px;
    line-height: 1.55;
}

.hch-skeleton {
    position: relative;
    overflow: hidden;
    background: #eceef3;
    border-radius: 7px;
}

.hch-skeleton::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    content: "";
    transform: translateX(-100%);
    animation: hch-shimmer 1.3s infinite;
}

.hch-skeleton--title {
    width: 42%;
    height: 18px;
}

.hch-skeleton--line {
    width: 100%;
    height: 11px;
}

.hch-skeleton--line + .hch-skeleton--line {
    margin-top: 10px;
}

.hch-skeleton--line.is-short {
    width: 64%;
}

.hch-ticket-thread {
    display: grid;
    gap: 14px;
}

.hch-ticket-message {
    min-width: 0;
    padding: 17px;
    background: var(--hch-surface-muted);
    border: 1px solid var(--hch-border);
    border-radius: 14px;
}

.hch-ticket-message--staff {
    background: #f1f0ff;
    border-color: #dcd9ff;
}

.hch-ticket-message__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.hch-ticket-message__author {
    font-size: 11px;
    font-weight: 750;
}

.hch-ticket-message__date {
    color: var(--hch-text-muted);
    font-size: 9px;
    white-space: nowrap;
}

.hch-ticket-message__body {
    overflow-wrap: anywhere;
    color: #3f4656;
    font-size: 12px;
    line-height: 1.65;
}

.hch-attachment {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin-top: 13px;
    padding: 7px 9px;
    color: var(--hch-primary);
    background: #fff;
    border: 1px solid #dcd9ff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Authentication */

.hch-auth-page,
.hch-auth-page #main-body,
.hch-auth-main {
    margin: 0;
    padding: 0;
    background: var(--hch-background);
}

.hch-auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 0.85fr) minmax(500px, 1.15fr);
}

.hch-auth-shell__intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: 40px clamp(34px, 5vw, 74px);
    color: #fff;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.2), transparent 34%),
        linear-gradient(145deg, #0377d2 0%, #0491f5 48%, #55c4ff 100%);
    overflow: hidden;
}

/* Registration v2: original HyperCloudHost sky canvas with the native WHMCS form flow. */

.hch-registration-page,
.hch-registration-page #main-body,
.hch-register-main {
    background: #f5fbff;
}

.hch-register-v2 {
    min-height: 100vh;
    display: block;
    color: var(--hch-text);
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.34), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(186, 230, 253, 0.56), transparent 28%),
        radial-gradient(circle at 54% 50%, rgba(224, 242, 254, 0.82), transparent 38%),
        linear-gradient(135deg, #ffffff 0%, #f0f9ff 54%, #e0f2fe 100%);
}

.hch-register-topbar {
    width: min(100% - 40px, 1180px);
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 auto;
    padding: 16px 0;
}

.hch-register-topbar__brand {
    max-width: 190px;
}

.hch-register-topbar__brand .hch-brand__logo {
    width: auto;
    max-width: 176px;
    max-height: 48px;
}

.hch-register-topbar > p {
    margin: 0;
    color: #475569;
    font-size: 12px;
}

.hch-register-topbar > p a {
    color: var(--hch-primary-hover);
    font-weight: 760;
}

.hch-register-v2 .hch-register-content {
    display: block;
    padding: 28px 20px 72px;
}

.hch-register-hero {
    width: min(100%, 980px);
    margin: 0 auto 28px;
    text-align: center;
}

.hch-register-hero .hch-eyebrow {
    color: var(--hch-primary-hover);
}

.hch-register-hero h1 {
    margin: 4px 0 0;
    color: #0f172a;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.hch-register-hero > p:not(.hch-eyebrow) {
    max-width: 650px;
    margin: 12px auto 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.hch-register-steps {
    width: min(100%, 720px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 28px auto 0;
    padding: 0;
    list-style: none;
}

.hch-register-steps li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #64748b;
    font-size: 11px;
}

.hch-register-steps li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    left: calc(50% + 70px);
    width: calc(100% - 140px);
    height: 1px;
    background: #bae6fd;
    content: "";
}

.hch-register-steps span {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    color: #0274c7;
    background: #fff;
    border: 1px solid #7dd3fc;
    border-radius: 50%;
    font-weight: 800;
    box-shadow: 0 5px 18px rgba(27, 167, 250, 0.12);
}

.hch-register-steps .is-active {
    color: #0377d2;
}

.hch-register-steps .is-active span {
    color: #fff;
    background: linear-gradient(135deg, #0491f5, #55c4ff);
    border-color: transparent;
}

.hch-register-v2 .hch-register-card {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 46px);
    border: 1px solid rgba(125, 211, 252, 0.45);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(3, 105, 161, 0.1);
}

.hch-register-v2 .hch-register-heading {
    padding-bottom: 22px;
    border-bottom: 1px solid #e0f2fe;
}

.hch-register-v2 .hch-register-section {
    border-top-color: #e0f2fe;
}

.hch-register-v2 .hch-register-section__icon {
    color: #0491f5;
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
}

#registration.hch-register-v2 .hch-register-form .field,
#registration.hch-register-v2 .hch-register-form .form-control,
#registration.hch-register-v2 .hch-register-form select,
#registration.hch-register-v2 .hch-register-form textarea {
    min-height: 47px;
    border-color: #cbd5e1;
    border-radius: 11px;
}

#registration.hch-register-v2 .hch-register-form .prepend-icon .field-icon {
    height: 47px;
    color: #0491f5;
    line-height: 47px;
}

.hch-register-v2 .hch-register-consent {
    background: #f0f9ff;
    border-color: #bae6fd;
}

#registration.hch-register-v2 .hch-register-submit {
    min-height: 50px;
    background: linear-gradient(110deg, #0491f5, #55c4ff);
    border: 0;
    box-shadow: 0 12px 28px rgba(27, 167, 250, 0.25);
}

#registration.hch-register-v2 .hch-register-submit:hover,
#registration.hch-register-v2 .hch-register-submit:focus {
    background: linear-gradient(110deg, #0274c7, #1ba7fa);
}

/* Add-funds page */

.hch-addfunds {
    max-width: 980px;
    margin: 0 auto;
}

.hch-addfunds__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: clamp(22px, 3vw, 34px);
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.22), transparent 32%),
        linear-gradient(120deg, #0274c7 0%, #1ba7fa 58%, #7dd3fc 100%);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(4, 145, 245, 0.2);
    overflow: hidden;
}

.hch-addfunds__hero h2 {
    margin: 3px 0 8px;
    color: #fff;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hch-addfunds__hero p {
    max-width: 590px;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    line-height: 1.6;
}

.hch-addfunds__hero .hch-eyebrow {
    color: #e0f2fe;
}

.hch-addfunds__hero-icon {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: grid;
    place-items: center;
    color: #0274c7;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    font-size: 25px;
}

.hch-addfunds__limits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.hch-addfunds__limit {
    min-width: 0;
    padding: 18px;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    box-shadow: var(--hch-shadow-sm);
}

.hch-addfunds__limit span {
    display: block;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.hch-addfunds__limit strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.hch-addfunds__limit--balance {
    border-color: #7dd3fc;
    background: linear-gradient(135deg, #f0f9ff, #fff);
}

.hch-addfunds__limit--balance strong {
    color: #0274c7;
    font-size: 18px;
}

.hch-addfunds__form-card {
    display: grid;
    grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.hch-addfunds__form-intro {
    padding: 26px;
    background: linear-gradient(160deg, #f0f9ff, #e0f2fe);
    border-right: 1px solid #bae6fd;
}

.hch-addfunds__form-intro h3 {
    margin: 12px 0 8px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 780;
}

.hch-addfunds__form-intro p {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.65;
}

.hch-addfunds__form-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #0491f5;
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(4, 145, 245, 0.12);
}

.hch-addfunds__form {
    display: grid;
    gap: 18px;
    padding: 26px;
}

.hch-addfunds__form fieldset {
    min-width: 0;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    border: 0;
}

.hch-addfunds__form .form-group {
    margin: 0;
}

.hch-addfunds__form label {
    margin-bottom: 7px;
    color: #334155;
    font-size: 11px;
    font-weight: 750;
}

.hch-addfunds__input-wrap {
    position: relative;
}

.hch-addfunds__input-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    color: #0491f5;
    transform: translateY(-50%);
    pointer-events: none;
}

.hch-addfunds__input-wrap .form-control {
    min-height: 48px;
    padding-left: 42px;
    border-color: #cbd5e1;
    border-radius: 11px;
}

.hch-addfunds__submit {
    min-height: 48px;
    margin-top: 2px;
    color: #fff;
    background: linear-gradient(110deg, #0491f5, #55c4ff);
    border: 0;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 760;
    box-shadow: 0 10px 24px rgba(27, 167, 250, 0.22);
}

.hch-addfunds__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #64748b;
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .hch-register-topbar {
        width: min(100% - 28px, 1180px);
        min-height: 66px;
    }

    .hch-register-topbar__brand .hch-brand__logo {
        max-width: 136px;
        max-height: 40px;
    }

    .hch-register-topbar > p {
        font-size: 10px;
    }

    .hch-register-v2 .hch-register-content {
        padding: 20px 14px 38px;
        background: transparent;
    }

    .hch-register-hero {
        margin-bottom: 22px;
    }

    .hch-register-steps {
        margin-top: 22px;
    }

    .hch-register-steps li {
        flex-direction: column;
        gap: 6px;
        font-size: 9px;
    }

    .hch-register-steps li:not(:last-child)::after {
        top: 15px;
        left: calc(50% + 24px);
        width: calc(100% - 48px);
    }

    .hch-register-v2 .hch-register-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .hch-addfunds__limits,
    .hch-addfunds__form-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-addfunds__form-intro {
        border-right: 0;
        border-bottom: 1px solid #bae6fd;
    }
}

/* Footer language chooser, powered by the native Twenty-One localisation form. */
.hch-app-footer__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.hch-app-footer__links {
    align-items: center;
}

.hch-language-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    margin: 0;
    padding: 7px 11px;
    color: #17658f !important;
    background: #ffffff !important;
    border: 1px solid #c7e0ed !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 14px rgba(17, 90, 126, .06) !important;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hch-language-trigger:hover,
.hch-language-trigger:focus-visible {
    color: #047fc9 !important;
    border-color: #81ccef !important;
    box-shadow: 0 8px 18px rgba(5, 139, 213, .12) !important;
    outline: 0;
    transform: translateY(-1px);
}

.hch-language-trigger .hch-svg-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    stroke-width: 1.8;
}

.hch-language-trigger .hch-svg-icon:last-child {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
}

.hch-language-trigger__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    flex: 0 0 22px;
    overflow: hidden;
    background: #f4f8fb;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(7, 59, 96, .12);
}

.hch-language-trigger .iti-flag {
    margin: 0;
    box-shadow: none;
}

.hch-language-modal-shell .modal-dialog {
    width: min(720px, calc(100% - 28px));
    max-width: 720px;
    margin: 42px auto;
}

.hch-language-modal-shell .hch-language-modal {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #c9e3ef;
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(4, 49, 78, .22);
}

.hch-language-modal__header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 21px 24px;
    background: linear-gradient(122deg, #eaf9ff 0%, #d7f3ff 56%, #e8faf4 100%);
    border-bottom: 1px solid #cde8f3;
}

.hch-language-modal__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: #087fd0;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #b8e0f1;
    border-radius: 12px;
}

.hch-language-modal__icon .hch-svg-icon {
    width: 20px;
    height: 20px;
    stroke-width: 1.7;
}

.hch-language-modal__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #078ce5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
}

.hch-language-modal__header h5 {
    margin: 0;
    color: #073d60;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.hch-language-modal__close {
    position: static !important;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    color: #3f7694 !important;
    background: rgba(255, 255, 255, .74) !important;
    border: 1px solid #bcddea !important;
    border-radius: 10px !important;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    opacity: 1 !important;
}

.hch-language-modal .modal-body {
    padding: 23px 24px 26px;
    color: #5d7f93;
    background: #f8fcfe;
}

.hch-language-modal__description {
    margin: 0 0 15px;
    color: #648396;
    font-size: 12px;
    line-height: 1.55;
}

.hch-language-modal__section-title {
    margin: 23px 0 12px;
    color: #164d6d;
    font-size: 13px;
    font-weight: 800;
}

.hch-language-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.hch-language-grid__item {
    min-width: 0;
}

.hch-language-option {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px 10px !important;
    color: #37667f !important;
    background: #ffffff !important;
    border: 1px solid #d7e8f0 !important;
    border-radius: 11px !important;
    box-shadow: 0 4px 12px rgba(15, 80, 112, .04);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hch-language-option:hover,
.hch-language-option:focus-visible {
    color: #087abb !important;
    border-color: #8fd2ee !important;
    box-shadow: 0 7px 16px rgba(6, 127, 193, .09);
    outline: 0;
    transform: translateY(-1px);
}

.hch-language-option.active {
    color: #0679bd !important;
    background: #eef9ff !important;
    border-color: #4ab8eb !important;
    box-shadow: 0 0 0 3px rgba(27, 167, 240, .1);
}

.hch-language-option__flag,
.hch-language-option__currency {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #0785cf;
    background: #e8f7fe;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}

.hch-language-option__flag .iti-flag {
    display: block;
    margin: 0;
    box-shadow: 0 0 0 1px rgba(7, 59, 96, .08);
}

.hch-language-option__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-language-option__check {
    color: #079bd9;
    font-size: 10px;
    opacity: 0;
}

.hch-language-option.active .hch-language-option__check {
    opacity: 1;
}

.hch-language-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 15px 24px !important;
    background: #ffffff;
    border-top: 1px solid #dfebf1 !important;
}

.hch-language-modal__footer .hch-button {
    min-width: 105px;
    min-height: 40px;
    margin: 0;
    border-radius: 10px;
}

@media (max-width: 767.98px) {
    .hch-app-footer__actions {
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
    }

    .hch-language-modal-shell .modal-dialog {
        width: calc(100% - 20px);
        margin: 18px auto;
    }

    .hch-language-modal-shell .hch-language-modal {
        border-radius: 17px;
    }

    .hch-language-modal__header,
    .hch-language-modal .modal-body,
    .hch-language-modal__footer {
        padding-right: 17px !important;
        padding-left: 17px !important;
    }

    .hch-language-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .hch-app-footer__actions {
        flex-direction: column;
        gap: 12px;
    }

    .hch-app-footer__links {
        flex-wrap: wrap;
    }

    .hch-language-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-language-modal__footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hch-language-modal__footer .hch-button {
        width: 100%;
        min-width: 0;
    }
}

/* Shared 404 and unavailable-store experience. */
.hch-error-page {
    display: grid;
    place-items: center;
    width: min(100% - 32px, 980px);
    min-height: min(66vh, 620px);
    margin: 0 auto;
    padding: 38px 0;
}

.hch-error-page__card {
    display: grid;
    grid-template-columns: minmax(260px, .84fr) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfe6f4;
    border-radius: 24px;
    box-shadow: 0 20px 48px rgba(25, 90, 130, .12);
}

.hch-error-page__visual {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 340px;
    padding: 42px;
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .66) 0 6%, transparent 6.4%),
        linear-gradient(145deg, #eaf8ff 0%, #d7f3ff 52%, #dff8ef 100%);
}

.hch-error-page__visual svg {
    width: min(100%, 310px);
    height: auto;
    overflow: visible;
}

.hch-error-page__visual text {
    fill: url(#hch-error-gradient);
    font-family: inherit;
    font-size: 53px;
    font-weight: 800;
    letter-spacing: -3px;
}

.hch-error-page--store .hch-error-page__visual text {
    fill: url(#hch-store-error-gradient);
}

.hch-error-page__orbit,
.hch-error-page__cloud,
.hch-error-page__store-mark,
.hch-error-page__route {
    fill: none;
    stroke: #79c8ed;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hch-error-page__orbit { stroke-width: 3; stroke-dasharray: 6 9; }
.hch-error-page__cloud { stroke-width: 3.5; }
.hch-error-page__store-mark { stroke-width: 3; }
.hch-error-page__route { stroke-width: 2; }
.hch-error-page__orbit-dot,
.hch-error-page__route-dot { fill: #0b99e9; }

.hch-error-page__content {
    min-width: 0;
    padding: 54px clamp(30px, 5vw, 72px);
}

.hch-error-page__eyebrow {
    display: block;
    margin-bottom: 11px;
    color: #078be8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hch-error-page__number {
    margin: 0 0 4px;
    color: #0a91df;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .12em;
}

.hch-error-page h1 {
    margin: 0;
    color: #063d62;
    font-size: clamp(27px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
}

.hch-error-page__description {
    max-width: 510px;
    margin: 16px 0 0;
    color: #62829a;
    font-size: 14px;
    line-height: 1.7;
}

.hch-error-page__reference {
    margin: 12px 0 0;
    color: #397092;
    font-size: 12px;
    font-weight: 700;
}

.hch-error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 27px;
}

.hch-error-page .hch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    gap: 8px;
    padding: 10px 17px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.hch-error-page .hch-button:hover,
.hch-error-page .hch-button:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
}

.hch-error-page .hch-button--primary {
    color: #fff;
    background: linear-gradient(112deg, #087edc 0%, #24aeef 100%);
    box-shadow: 0 10px 22px rgba(9, 142, 223, .22);
}

.hch-error-page .hch-button--secondary {
    color: #0878bd;
    background: #fff;
    border-color: #b9dced;
}

.hch-error-page .hch-button--secondary:hover,
.hch-error-page .hch-button--secondary:focus-visible {
    color: #056da9;
    background: #eef9ff;
}

.hch-error-page .hch-svg-icon {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
}

.hch-error-page__notice {
    width: min(100% - 32px, 760px);
    margin: -22px auto 38px;
    padding: 12px 16px;
    color: #4f7990;
    background: #f2fbff;
    border: 1px solid #cfe8f5;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 767.98px) {
    .hch-error-page {
        width: min(100% - 24px, 520px);
        min-height: auto;
        padding: 24px 0 34px;
    }

    .hch-error-page__card {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .hch-error-page__visual {
        min-height: 214px;
        padding: 26px 42px;
    }

    .hch-error-page__visual svg { width: min(100%, 230px); }

    .hch-error-page__content { padding: 31px 24px 28px; }

    .hch-error-page h1 { font-size: 27px; }

    .hch-error-page__description { font-size: 13px; }

    .hch-error-page__actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 22px;
    }

    .hch-error-page .hch-button { width: 100%; }

    .hch-error-page__notice {
        width: min(100% - 24px, 520px);
        margin: -16px auto 26px;
    }
}

/* Unified status alerts --------------------------------------------------- */
body .alert:not(.hch-auth-provider-feedback) {
    position: relative;
    min-width: 0;
    margin: 0 0 16px;
    padding: 14px 16px 14px 50px;
    overflow: hidden;
    color: #31566b;
    background: #f2f9fc;
    border: 1px solid #cbe5f0;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 80, 112, .055);
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    text-align: left;
}

body .alert:not(.hch-auth-provider-feedback)::before {
    position: absolute;
    top: 13px;
    left: 14px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: #087dad;
    background: #dff3fb;
    border: 1px solid #bae3f2;
    border-radius: 8px;
    content: "i";
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

body .alert.alert-danger:not(.hch-auth-provider-feedback) {
    color: #9f2d2d;
    background: #fff5f5;
    border-color: #fecaca;
}

body .alert.alert-danger:not(.hch-auth-provider-feedback)::before {
    color: #b4232e;
    background: #fee7e7;
    border-color: #fecaca;
    content: "!";
}

body .alert.alert-success:not(.hch-auth-provider-feedback) {
    color: #176448;
    background: #effbf5;
    border-color: #a7e8ca;
}

body .alert.alert-success:not(.hch-auth-provider-feedback)::before {
    color: #08785b;
    background: #dcf8ea;
    border-color: #a7e8ca;
    content: "\2713";
}

body .alert.alert-warning:not(.hch-auth-provider-feedback) {
    color: #7a5310;
    background: #fffbeb;
    border-color: #f7d98b;
}

body .alert.alert-warning:not(.hch-auth-provider-feedback)::before {
    color: #946200;
    background: #fff2c7;
    border-color: #f7d98b;
    content: "!";
}

body .alert:not(.hch-auth-provider-feedback) > :first-child {
    margin-top: 0;
}

body .alert:not(.hch-auth-provider-feedback) > :last-child {
    margin-bottom: 0;
}

body .alert:not(.hch-auth-provider-feedback) > strong:first-child,
body .alert:not(.hch-auth-provider-feedback) > p:first-child {
    display: block;
    margin: 0 0 7px;
    color: currentColor;
    font-weight: 820;
}

body .alert:not(.hch-auth-provider-feedback) h2,
body .alert:not(.hch-auth-provider-feedback) h3,
body .alert:not(.hch-auth-provider-feedback) h4 {
    margin: 0 0 7px;
    color: currentColor;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}

body .alert:not(.hch-auth-provider-feedback) ul,
body .alert:not(.hch-auth-provider-feedback) ol {
    display: grid;
    gap: 5px;
    margin: 7px 0 0;
    padding-left: 18px;
}

body .alert:not(.hch-auth-provider-feedback) li {
    padding-left: 2px;
}

body .alert:not(.hch-auth-provider-feedback) a,
body .alert:not(.hch-auth-provider-feedback) .alert-link {
    color: currentColor;
    font-weight: 820;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body .alert:not(.hch-auth-provider-feedback) > i:first-child {
    display: none;
}

body .alert.alert-dismissible:not(.hch-auth-provider-feedback) {
    padding-right: 52px;
}

body .alert.alert-dismissible:not(.hch-auth-provider-feedback) .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    color: currentColor;
    background: rgba(255, 255, 255, .7);
    border: 1px solid currentColor;
    border-radius: 9px;
    font-size: 17px;
    line-height: 1;
    opacity: .55;
}

@media (max-width: 575.98px) {
    body .alert:not(.hch-auth-provider-feedback) {
        margin-bottom: 12px;
        padding: 12px 12px 12px 45px;
        border-radius: 12px;
        font-size: 10.5px;
        line-height: 1.55;
    }

    body .alert:not(.hch-auth-provider-feedback)::before {
        top: 11px;
        left: 11px;
        width: 24px;
        height: 24px;
    }

    body .alert.alert-dismissible:not(.hch-auth-provider-feedback) {
        padding-right: 46px;
    }
}

/* Final cascade guard: later page-specific legacy rules may set alert
   padding or colours, but status alerts should remain visually consistent. */
body .alert:not(.hch-auth-provider-feedback) {
    min-width: 0;
    padding: 14px 16px 14px 50px;
    border-width: 1px;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(15, 80, 112, .055);
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
}

/* Registration required indicators */
#registration .hch-field-label .hch-required {
    display: inline;
    margin-left: 2px;
    color: #dc2626;
    font-size: 12px;
    font-weight: 900;
}

#registration .hch-field-label .hch-field-optional,
#registration .hch-field-help {
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

#registration .hch-field-help {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
}

#registration .hch-register-form :is(input, select, textarea):required:invalid:not(:placeholder-shown) {
    border-color: #fca5a5;
}

/* Email verification notice */
.hch-app-page .hch-email-verification {
    position: relative;
    margin: 12px clamp(20px, 2.7vw, 42px) 0;
    padding: 0;
    color: #7c4a03;
    background: #fffaf0;
    border: 1px solid #f8d99a;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(146, 94, 10, .06);
    overflow: hidden;
}

.hch-app-page .hch-email-verification .container {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 10px 8px 14px;
}

.hch-email-verification__message {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 9px;
}

.hch-email-verification__message > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hch-email-verification__message strong {
    color: #713f12;
    font-size: 12px;
    font-weight: 850;
}

.hch-email-verification__message .text {
    color: #8a5b15;
    font-size: 11px;
    line-height: 1.45;
}

.hch-email-verification__icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 9px;
    line-height: 1;
}

.hch-email-verification__icon > i {
    font-size: 15px !important;
    line-height: 1;
}

.hch-email-verification__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.hch-app-page .hch-email-verification__resend {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #0383dc, #1ba7fa);
    border: 0;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 5px 12px rgba(27, 167, 250, .16);
}

.hch-app-page .hch-email-verification__resend > :is(i, .loader i) {
    width: 14px;
    margin: 0;
    font-size: 14px !important;
    line-height: 1;
}

.hch-app-page .hch-email-verification__resend:hover,
.hch-app-page .hch-email-verification__resend:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #0273c2, #0491f5);
}

.hch-app-page .hch-email-verification__close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #9a6418;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #f3d28f;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1;
}

.hch-app-page .hch-email-verification__close > i {
    font-size: 13px !important;
    line-height: 1;
}

.hch-app-page .hch-email-verification__close:hover,
.hch-app-page .hch-email-verification__close:focus-visible {
    color: #7c2d12;
    background: #ffffff;
    border-color: #eab968;
}

@media (max-width: 767.98px) {
    .hch-app-page .hch-email-verification {
        margin: 10px 12px 0;
    }

    .hch-app-page .hch-email-verification .container {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .hch-email-verification__message {
        align-items: flex-start;
        padding-right: 34px;
    }

    .hch-email-verification__actions {
        width: 100%;
    }

    .hch-app-page .hch-email-verification__resend {
        width: 100%;
        flex: 1 1 auto;
    }

    .hch-app-page .hch-email-verification__close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 429.98px) {
    .hch-register-topbar > p {
        max-width: 128px;
        text-align: right;
    }

    .hch-register-hero h1 {
        font-size: 31px;
    }

    .hch-register-steps strong {
        font-size: 8px;
    }

    .hch-addfunds__hero {
        align-items: flex-start;
    }

    .hch-addfunds__hero-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
        font-size: 18px;
    }
}

.hch-auth-shell__intro .hch-brand {
    position: relative;
    z-index: 1;
    color: #fff;
}

.hch-auth-shell__intro .hch-brand__tagline {
    color: #aeb5cc;
}

.hch-auth-intro__copy {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: auto 0;
    padding: 70px 0;
}

.hch-auth-intro__copy h1 {
    margin: 0;
    font-size: clamp(34px, 4.6vw, 64px);
    font-weight: 760;
    letter-spacing: -0.055em;
    line-height: 1.04;
}

.hch-auth-intro__copy p {
    max-width: 430px;
    margin: 20px 0 0;
    color: #b8bfd2;
    font-size: 13px;
    line-height: 1.7;
}

.hch-auth-intro__footer {
    position: relative;
    z-index: 1;
    color: #8f97ad;
    font-size: 10px;
}

.hch-auth-shell__main {
    min-width: 0;
    display: grid;
    place-items: center;
    padding: 42px clamp(24px, 5vw, 78px);
}

.hch-auth-stack {
    width: min(100%, 480px);
}

.hch-auth-card {
    width: min(100%, 480px);
    padding: clamp(25px, 4vw, 40px);
    border-radius: var(--hch-radius-xl);
    box-shadow: var(--hch-shadow-md);
}

.hch-auth-stack .hch-auth-card {
    width: 100%;
}

.hch-auth-card__title {
    margin: 0;
    font-size: 26px;
    font-weight: 780;
    letter-spacing: -0.035em;
}

.hch-auth-card__subtitle {
    margin: 8px 0 25px;
    color: var(--hch-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.hch-auth-form {
    display: grid;
    gap: 16px;
}

.hch-auth-form .hch-button {
    width: 100%;
    min-height: 46px;
}

.hch-auth-input-wrap {
    position: relative;
}

.hch-auth-input-wrap .hch-field {
    padding-right: 44px;
    padding-left: 42px;
}

.hch-auth-input-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    width: 17px;
    height: 17px;
    color: var(--hch-primary);
    transform: translateY(-50%);
    pointer-events: none;
}

.hch-auth-input-icon svg,
.hch-auth-password-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hch-auth-password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--hch-text-muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    transform: translateY(-50%);
    cursor: pointer;
}

.hch-auth-password-toggle:hover,
.hch-auth-password-toggle:focus {
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    outline: none;
}

.hch-auth-label-row,
.hch-auth-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hch-auth-label-row .hch-link {
    font-size: 10px;
}

.hch-auth-remember {
    justify-content: flex-start;
}

.hch-auth-linked-accounts {
    width: 100%;
    margin-top: 14px;
}

.hch-auth-linked-accounts:empty {
    display: none;
}

.hch-auth-card__footer {
    margin-top: 20px;
    color: var(--hch-text-muted);
    font-size: 11px;
    text-align: center;
}

.hch-auth-card__footer a,
.hch-link {
    color: var(--hch-primary);
    font-weight: 700;
    text-decoration: none;
}

.hch-auth-card__footer a:hover,
.hch-link:hover {
    color: var(--hch-primary-hover);
    text-decoration: underline;
}

/* Password recovery and two-factor authentication share the login shell. */
.hch-auth-card--recovery,
.hch-auth-card--twofactor {
    display: grid;
    gap: 18px;
}

.hch-auth-card--recovery .hch-auth-card__header,
.hch-auth-card--twofactor .hch-auth-card__header {
    margin-bottom: 2px;
}

.hch-auth-card--recovery .hch-auth-card__subtitle,
.hch-auth-card--twofactor .hch-auth-card__subtitle {
    margin-bottom: 0;
}

.hch-auth-card--recovery .alert,
.hch-auth-card--twofactor .alert {
    margin: 0;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.5;
}

.hch-auth-card--recovery .alert-danger,
.hch-auth-card--twofactor .alert-danger {
    color: #b42318;
    background: #fff3f2;
    border: 1px solid #fecdca;
}

.hch-auth-card--recovery .alert-success,
.hch-auth-card--twofactor .alert-success {
    color: #087443;
    background: #ecfdf3;
    border: 1px solid #abefc6;
}

.hch-auth-card--twofactor .alert-warning {
    color: #8a5a00;
    background: #fffaeb;
    border: 1px solid #fedf89;
}

.hch-auth-recovery-form .hch-button,
.hch-auth-card--twofactor .hch-button {
    width: 100%;
    min-height: 47px;
}

.hch-auth-form__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hch-auth-form__actions .hch-button {
    width: 100%;
    min-height: 46px;
}

.hch-auth-strength {
    display: grid;
    gap: 7px;
    padding: 12px;
    background: #f5fafc;
    border: 1px solid #dceaf1;
    border-radius: 12px;
}

.hch-auth-strength .progress {
    height: 7px;
    margin: 0;
    overflow: hidden;
    background: #dbeaf1;
    border-radius: 999px;
}

.hch-auth-strength .small {
    margin: 0;
    color: #698296 !important;
    font-size: 10px;
}

.hch-auth-card--twofactor [hidden] {
    display: none !important;
}

.hch-twofactor-challenge {
    display: grid;
    gap: 12px;
}

.hch-twofactor-challenge :is(input[type="text"], input[type="number"], input[type="tel"], input[type="password"], select) {
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    color: #203b4d;
    background: #fafdff;
    border: 1px solid #cfdee7;
    border-radius: 11px;
    font-size: 13px;
}

.hch-twofactor-challenge :is(input[type="text"], input[type="number"], input[type="tel"], input[type="password"], select):focus {
    border-color: #0491f5;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, .12);
    outline: 0;
}

.hch-twofactor-challenge :is(button[type="submit"], input[type="submit"]) {
    width: 100%;
    min-height: 47px;
    color: #ffffff;
    background: linear-gradient(135deg, #0377d2, #1ba7fa);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 11px 24px rgba(4, 145, 245, .22);
    font-size: 12px;
    font-weight: 800;
}

.hch-auth-backup-code {
    margin: 0;
    padding: 14px;
    color: #0377d2;
    background: #eaf7fd;
    border: 1px dashed #7dd3fc;
    border-radius: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: .07em;
    text-align: center;
}

.hch-code-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.hch-code-inputs .hch-field,
.hch-code-inputs .hch-twofactor-digit {
    min-width: 0;
    min-height: 52px;
    padding: 8px 4px;
    color: #12344a;
    background: #f9fcfe;
    border: 1px solid #c9dde8;
    border-radius: 11px;
    box-shadow: none;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    caret-color: #0491f5;
    appearance: none;
    -moz-appearance: textfield;
}

.hch-code-inputs .hch-twofactor-digit::-webkit-outer-spin-button,
.hch-code-inputs .hch-twofactor-digit::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.hch-code-inputs .hch-twofactor-digit:focus {
    background: #ffffff;
    border-color: #1ba7fa;
    box-shadow: 0 0 0 3px rgba(27, 167, 250, 0.13);
    outline: 0;
}

.hch-code-inputs.is-invalid .hch-twofactor-digit:invalid,
.hch-code-inputs.is-invalid .hch-twofactor-digit:placeholder-shown {
    border-color: #f04438;
    box-shadow: 0 0 0 2px rgba(240, 68, 56, 0.1);
}

.hch-twofactor-error {
    margin: -4px 0 0;
    color: #c43228;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.hch-twofactor-error[hidden] {
    display: none !important;
}

.hch-twofactor-challenge input[type="hidden"] {
    display: none !important;
}

.hch-twofactor-challenge :is(button[type="submit"], input[type="submit"]) i {
    margin-right: 7px;
}

.hch-twofactor-actions {
    display: grid;
    gap: 12px;
    padding-top: 0 !important;
    border-top: 0 !important;
    text-align: center;
}

.hch-twofactor-actions .hch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.hch-twofactor-cancel {
    color: #0876aa;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}

.hch-twofactor-cancel:hover,
.hch-twofactor-cancel:focus {
    color: #0377d2;
    text-decoration: underline;
}

/* Full registration experience; all WHMCS field IDs and runtime hooks remain intact. */

.hch-registration-page,
.hch-registration-page #main-body,
.hch-register-main {
    margin: 0;
    padding: 0;
    background: #f7f7fc;
}

.hch-register-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 38%) minmax(0, 62%);
    color: var(--hch-text);
    background: #f7f7fc;
    font-family: "Open Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hch-register-shell,
.hch-register-shell * {
    box-sizing: border-box;
}

.hch-register-intro {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    min-height: 650px;
    padding: 40px clamp(34px, 4.2vw, 72px);
    color: #fff;
    background: linear-gradient(145deg, #4636ff 0%, #4d3cff 58%, #5d4aff 100%);
}

.hch-register-intro .hch-eyebrow {
    color: #d7ff3f;
}

.hch-register-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.hch-register-back:hover,
.hch-register-back:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    text-decoration: none;
}

.hch-register-back svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.hch-register-brand {
    position: absolute;
    top: 43px;
    right: clamp(30px, 4vw, 68px);
    max-width: 180px;
    color: #fff;
}

.hch-register-brand .hch-brand__logo {
    max-width: 150px;
    max-height: 42px;
}

.hch-register-intro__copy {
    max-width: 530px;
    margin: auto 0;
    padding: 70px 0;
}

.hch-register-intro__copy h1 {
    max-width: 560px;
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 4.2vw, 66px);
    font-weight: 790;
    letter-spacing: -0.055em;
    line-height: 1.03;
}

.hch-register-intro__copy > p:not(.hch-eyebrow) {
    max-width: 455px;
    margin: 20px 0 0;
    color: #dddafe;
    font-size: 13px;
    line-height: 1.7;
}

.hch-register-benefits {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.hch-register-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 680;
}

.hch-register-benefits i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    color: #d7ff3f;
    background: rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    font-size: 12px;
}

.hch-register-content {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 34px clamp(22px, 4.5vw, 76px) 54px;
}

.hch-register-card {
    width: min(100%, 790px);
    padding: clamp(25px, 3.3vw, 43px);
    background: #fff;
    border: 1px solid #ececf5;
    border-radius: 24px;
    box-shadow: 0 18px 55px rgba(39, 37, 90, 0.07);
}

.hch-register-heading {
    margin-bottom: 24px;
}

.hch-register-heading h2 {
    margin: 0;
    color: var(--hch-text);
    font-size: 30px;
    font-weight: 790;
    letter-spacing: -0.04em;
}

.hch-register-heading > p:last-child {
    margin: 8px 0 0;
    color: var(--hch-text-muted);
    font-size: 12px;
}

.hch-register-social {
    margin-bottom: 22px;
}

.hch-register-social:empty {
    display: none;
}

.hch-register-section {
    padding: 23px 0 25px;
    border-top: 1px solid var(--hch-border);
}

.hch-register-section__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.hch-register-section__header .hch-eyebrow {
    margin-bottom: 3px;
}

.hch-register-section__header h3 {
    margin: 0;
    color: var(--hch-text);
    font-size: 14px;
    font-weight: 770;
}

.hch-register-section__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: var(--hch-primary);
    background: var(--hch-primary-soft);
    border-radius: 10px;
    font-size: 12px;
}

.hch-register-section__icon svg,
#registration .hch-register-form .field-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.hch-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.hch-register-grid__full {
    grid-column: 1 / -1;
}

#registration .hch-register-form .form-group {
    min-width: 0;
    margin: 0;
}

#registration .hch-field-label {
    display: block;
    margin: 0 0 7px;
    color: #303442;
    font-size: 10px;
    font-weight: 760;
}

#registration .hch-field-label span {
    color: var(--hch-text-muted);
    font-weight: 500;
}

#registration .hch-register-form .field,
#registration .hch-register-form .form-control,
#registration .hch-register-form select,
#registration .hch-register-form textarea {
    width: 100%;
    height: 43px;
    color: var(--hch-text);
    background: #fff;
    border: 1px solid var(--hch-border-strong);
    border-radius: 12px;
    font-size: 12px;
    box-shadow: none;
}

#registration .hch-register-form .field:focus,
#registration .hch-register-form .form-control:focus,
#registration .hch-register-form select:focus,
#registration .hch-register-form textarea:focus {
    border-color: var(--hch-primary);
    box-shadow: var(--hch-focus);
}

#registration .hch-register-form .prepend-icon .field {
    padding-left: 40px;
}

#registration .hch-register-form .prepend-icon .field-icon {
    top: 27px;
    width: 40px;
    height: 43px;
    color: var(--hch-primary);
    line-height: 43px;
}

#registration .hch-register-form .prepend-icon .field-icon i {
    color: var(--hch-primary);
    font-size: 12px;
}

#registration .hch-register-form .iti {
    width: 100%;
}

.hch-register-form .password-strength-meter {
    align-self: center;
}

.hch-register-form .password-strength-meter .progress {
    height: 5px;
    margin: 0 0 7px;
    background: #eceef3;
    border-radius: 99px;
}

.hch-register-form #passwordStrengthTextLabel {
    margin: 0;
    text-align: left !important;
}

.hch-register-security-question {
    margin-top: 17px;
}

.hch-register-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    margin: 18px 0 0;
    padding: 15px;
    color: var(--hch-text);
    background: #f7f6ff;
    border: 1px solid #e4e1ff;
    border-radius: 13px;
}

.hch-register-consent input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--hch-primary);
}

#registration .hch-register-consent label,
#registration label.hch-register-consent {
    margin: 0;
    color: var(--hch-text);
    font-size: 10px;
    font-weight: 550;
}

.hch-register-consent strong,
.hch-register-consent span {
    display: block;
}

.hch-register-consent span {
    margin-top: 3px;
    color: var(--hch-text-muted);
    line-height: 1.5;
}

.hch-register-consent--tos {
    margin-bottom: 14px !important;
}

.hch-register-captcha {
    margin-top: 18px;
}

#registration .hch-register-submit {
    width: 100%;
    min-height: 48px;
    color: #fff;
    background: var(--hch-primary);
    border-color: var(--hch-primary);
    border-radius: 13px;
    font-size: 12px;
    font-weight: 760;
}

#registration .hch-register-submit:hover,
#registration .hch-register-submit:focus {
    background: var(--hch-primary-hover);
    border-color: var(--hch-primary-hover);
}

/* Toasts and loading */

.hch-toast-region {
    position: fixed;
    z-index: 1200;
    top: 18px;
    right: 18px;
    width: min(390px, calc(100vw - 28px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.hch-toast {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 10px;
    align-items: start;
    padding: 13px;
    color: var(--hch-text);
    background: #fff;
    border: 1px solid var(--hch-border);
    border-left: 3px solid var(--hch-info);
    border-radius: 13px;
    box-shadow: 0 18px 44px rgba(25, 30, 47, 0.16);
    pointer-events: auto;
    animation: hch-toast-in 220ms ease both;
}

.hch-toast--success { border-left-color: var(--hch-success); }
.hch-toast--danger { border-left-color: var(--hch-danger); }
.hch-toast--warning { border-left-color: var(--hch-warning); }

.hch-toast--closing {
    animation: hch-toast-out 180ms ease both;
}

.hch-toast__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 8px;
    color: var(--hch-info);
    background: var(--hch-info-soft);
    border-radius: 10px;
}

.hch-toast--success .hch-toast__icon { color: var(--hch-success); background: var(--hch-success-soft); }
.hch-toast--danger .hch-toast__icon { color: var(--hch-danger); background: var(--hch-danger-soft); }
.hch-toast--warning .hch-toast__icon { color: var(--hch-warning); background: var(--hch-warning-soft); }

.hch-toast__icon svg,
.hch-toast__dismiss svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hch-toast__content {
    min-width: 0;
    padding-top: 1px;
}

.hch-toast__title,
.hch-toast__message {
    display: block;
    overflow-wrap: anywhere;
}

.hch-toast__title {
    font-size: 11px;
    font-weight: 780;
}

.hch-toast__message {
    margin-top: 3px;
    color: var(--hch-text-muted);
    font-size: 10px;
    line-height: 1.45;
}

.hch-toast__dismiss {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 9px;
    color: #8b92a1;
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.hch-toast__dismiss:hover {
    color: var(--hch-text);
    background: var(--hch-surface-muted);
}

.hch-loading-overlay {
    position: fixed;
    z-index: 1190;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(20, 23, 34, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--hch-transition), visibility var(--hch-transition);
}

.hch-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* The core request loader and theme transition loader intentionally share one
   overlay node so navigation never produces two consecutive loading screens. */
#fullpage-overlay.hch-loading-overlay {
    z-index: 99999;
    color: var(--hch-text);
    background: rgba(235, 247, 252, 0.78);
    backdrop-filter: blur(6px);
}

#fullpage-overlay.hch-loading-overlay.w-hidden:not(.is-visible) {
    display: none;
}

#fullpage-overlay.hch-loading-overlay.is-visible,
#fullpage-overlay.hch-loading-overlay[style]:not([style*="display: none"]) {
    display: grid !important;
    opacity: 1;
    visibility: visible;
}

#fullpage-overlay.hch-loading-overlay .outer-wrapper {
    position: static;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 20px;
}

#fullpage-overlay.hch-loading-overlay .inner-wrapper {
    position: static;
    inset: auto;
    width: min(100%, 520px);
    height: auto;
    margin: 0;
}

#fullpage-overlay.hch-loading-overlay .msg {
    max-width: none;
    display: block;
    padding: 0;
}

.hch-loading-overlay__panel {
    width: min(100%, 520px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    color: #111827;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

.hch-loading-overlay__panel strong {
    margin: 0;
    color: #111827;
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.hch-loading-overlay__panel [data-hch-loading-message] {
    display: none !important;
}

.hch-page-progress {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.hch-page-progress__track {
    width: 100%;
    height: 18px;
    display: block;
    overflow: hidden;
    padding: 3px;
    background: #e0efff;
    border: 2px solid #0491f5;
    border-radius: 999px;
    box-sizing: border-box;
}

.hch-page-progress__fill {
    width: 0;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #0377d2 0%, #0491f5 56%, #45c1ff 100%);
    background-size: 220% 100%;
    border-radius: 999px;
    box-shadow: 0 0 16px rgba(4, 145, 245, 0.32);
    transition: width 160ms ease-out;
    transform: translateZ(0);
    will-change: width, background-position;
}

.hch-loading-overlay.is-visible .hch-page-progress__fill {
    min-width: 8px;
    animation: hch-progress-shimmer 850ms linear infinite;
}

@keyframes hch-progress-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

.hch-page-progress__value {
    color: #111827;
    font-size: 12px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.hch-loader {
    width: 34px;
    height: 34px;
    border: 3px solid #dfdefb;
    border-top-color: var(--hch-primary);
    border-radius: 50%;
    animation: hch-spin 700ms linear infinite;
}

.hch-is-loading {
    cursor: progress;
}

.hch-sidebar-backdrop {
    display: none;
}

/* Additive WHMCS compatibility styling; functional selectors stay intact. */

.hch-app .alert,
.hch-cart-shell .alert {
    border-radius: 11px;
}

.hch-app .card,
.hch-cart-shell #order-standard_cart .panel,
.hch-cart-shell #order-standard_cart .product {
    border-color: var(--hch-border);
}

.hch-app .table-list,
.hch-cart-shell #order-standard_cart .table {
    color: var(--hch-text);
}

.hch-app .form-control,
.hch-cart-shell #order-standard_cart .form-control {
    border-color: var(--hch-border-strong);
    border-radius: 9px;
}

.hch-app .form-control:focus,
.hch-cart-shell #order-standard_cart .form-control:focus {
    border-color: var(--hch-primary);
    box-shadow: var(--hch-focus);
}

/* WHMCS Twenty-One initializes list pages with jQuery DataTables. This block
   styles its generated DOM without replacing sorting, filtering, or paging. */

.hch-app .dataTables_wrapper {
    position: relative;
    width: 100%;
    color: var(--hch-text);
}

.hch-app .dataTables_wrapper .listtable {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    background: var(--hch-surface);
    border: 1px solid var(--hch-border);
    border-radius: var(--hch-radius-lg);
    box-shadow: var(--hch-shadow-sm);
}

.hch-app .dataTables_wrapper .dataTables_filter {
    grid-column: 2;
    grid-row: 1;
    float: none;
    margin: 0;
    padding: 14px 16px;
}

.hch-app .dataTables_wrapper .dataTables_filter label {
    position: relative;
    display: block;
    margin: 0;
}

.hch-app .dataTables_wrapper .dataTables_filter label::before {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    color: #8a91a2;
    content: "\f002";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.hch-app .dataTables_wrapper .dataTables_filter input {
    width: min(290px, 32vw);
    height: 42px;
    margin: 0;
    padding: 8px 13px 8px 39px !important;
    color: var(--hch-text);
    background: var(--hch-surface-muted) !important;
    border: 1px solid var(--hch-border-strong);
    border-radius: 11px;
    font-size: 12px;
    outline: 0;
}

.hch-app .dataTables_wrapper .dataTables_filter input:focus {
    background: #fff !important;
    border-color: var(--hch-primary);
    box-shadow: var(--hch-focus);
}

.hch-app .dataTables_wrapper .dataTables_info {
    grid-column: 1;
    grid-row: 1;
    float: none;
    margin: 0;
    padding: 14px 16px;
    color: var(--hch-text-muted);
    font-size: 10px;
}

.hch-app .dataTables_wrapper .table-list,
.hch-app .dataTables_wrapper table.dataTable {
    grid-column: 1 / -1;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--hch-border) !important;
    border-radius: 0 !important;
}

.hch-app .dataTables_wrapper .table-list thead th,
.hch-app .dataTables_wrapper table.dataTable thead th {
    padding: 11px 13px;
    color: #62697a;
    background: var(--hch-surface-muted);
    border-bottom: 1px solid var(--hch-border);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hch-app .dataTables_wrapper .table-list tbody td,
.hch-app .dataTables_wrapper table.dataTable tbody td {
    padding: 13px;
    background: #fff;
    border-top: 1px solid var(--hch-border);
    font-size: 12px;
    vertical-align: middle;
}

.hch-app .dataTables_wrapper .dataTables_length {
    float: left;
    padding: 14px 4px 0;
    color: var(--hch-text-muted);
    font-size: 10px;
}

.hch-app .dataTables_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.hch-app .dataTables_wrapper .dataTables_length select {
    width: auto;
    min-width: 68px;
    height: 36px;
    padding: 5px 26px 5px 9px;
    color: var(--hch-text);
    background-color: #fff;
    border: 1px solid var(--hch-border-strong);
    border-radius: 9px;
    font-size: 11px;
}

.hch-app .dataTables_wrapper .dataTables_paginate {
    float: right;
    margin: 0;
    padding: 14px 0 0;
}

.hch-app .dataTables_wrapper .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
}

.hch-app .dataTables_wrapper .page-link,
.hch-app .dataTables_wrapper .paginate_button {
    min-width: 36px;
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 6px 10px;
    color: #596173;
    background: #fff;
    border: 1px solid var(--hch-border);
    border-radius: 9px !important;
    font-size: 10px;
    text-decoration: none;
}

.hch-app .dataTables_wrapper .page-item.active .page-link,
.hch-app .dataTables_wrapper .paginate_button.current {
    color: #fff;
    background: var(--hch-primary);
    border-color: var(--hch-primary);
}

.hch-app .dataTables_wrapper::after {
    display: block;
    clear: both;
    content: "";
}

/* The services table keeps every column available on compact screens. It
   scrolls inside its card instead of squeezing text or overflowing the page. */
.hch-services-table .dataTables_wrapper .dataTables_scroll {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border-top: 1px solid var(--hch-border);
}

.hch-services-table .dataTables_wrapper .dataTables_scrollHead {
    overflow: hidden !important;
}

.hch-services-table .dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #9dcfe8 transparent;
    scrollbar-width: thin;
}

.hch-services-table .dataTables_wrapper .dataTables_scrollHeadInner,
.hch-services-table .dataTables_wrapper .dataTables_scrollHead table,
.hch-services-table .dataTables_wrapper .dataTables_scrollBody table {
    min-width: 860px !important;
}

.hch-services-table .dataTables_wrapper .dataTables_scrollHead table,
.hch-services-table .dataTables_wrapper .dataTables_scrollBody table {
    width: 100% !important;
}

.hch-services-table .dataTables_wrapper .dataTables_scrollHead th:first-child,
.hch-services-table .dataTables_wrapper .dataTables_scrollBody td:first-child {
    width: 44px !important;
    min-width: 44px;
}

.hch-services-table .dataTables_wrapper .dataTables_scrollHead th:last-child,
.hch-services-table .dataTables_wrapper .dataTables_scrollBody td:last-child {
    width: 128px !important;
    min-width: 128px;
}

.hch-services-table .hch-service-row-icon {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    font-size: 13px;
}

.hch-services-table .hch-service-row-icon--deleted {
    color: #dc2626;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}

.hch-services-table .hch-status-deleted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hch-services-table .hch-status-deleted i {
    font-size: 9px;
}

.hch-service-detail-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    color: #0274c7;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.hch-service-detail-button:hover,
.hch-service-detail-button:focus {
    color: #ffffff;
    background: #0491f5;
    border-color: #0491f5;
    text-decoration: none;
}

/* Responsive behavior */

@media (max-width: 1279.98px) {
    .hch-account-trigger__copy,
    .hch-admin-return span {
        display: none;
    }

    .hch-account-trigger {
        padding-right: 7px;
    }

    .hch-admin-return {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .hch-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hch-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hch-search {
        width: min(250px, 25vw);
    }

    .hch-content-grid--with-context {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-context-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .hch-context-sidebar .sidebar + .sidebar {
        margin-top: 0;
    }
}

@media (max-width: 1023.98px) {
    .hch-app {
        display: block;
    }

    .hch-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        width: min(88vw, 320px);
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        transform: translateX(-102%);
        transition: transform 220ms ease;
        box-shadow: var(--hch-shadow-md);
    }

    .hch-drawer-open .hch-sidebar {
        transform: translateX(0);
    }

    .hch-icon-button.hch-sidebar__close,
    .hch-icon-button.hch-topbar__menu {
        display: inline-grid;
    }

    .hch-sidebar-backdrop {
        position: fixed;
        z-index: 1000;
        inset: 0;
        display: block;
        background: rgba(22, 25, 38, 0.42);
        border: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 220ms ease, visibility 220ms ease;
    }

    .hch-sidebar__header {
        padding-top: env(safe-area-inset-top);
    }

    .hch-sidebar__nav {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .hch-sidebar__footer {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
        background: #fff;
    }

    .hch-drawer-open .hch-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.hch-drawer-open {
        overflow: hidden;
    }

    .hch-topbar {
        padding: 0 20px;
    }

    .hch-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hch-grid--sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-order-summary {
        position: static;
    }

    .hch-dashboard-account-card {
        position: static;
    }

    .hch-auth-shell {
        grid-template-columns: minmax(300px, 0.72fr) minmax(420px, 1.28fr);
    }

    .hch-register-shell {
        grid-template-columns: minmax(300px, 34%) minmax(0, 66%);
    }

    .hch-register-intro {
        padding-right: 30px;
        padding-left: 30px;
    }

    .hch-register-brand {
        position: static;
        display: block;
        margin-top: 24px;
    }

    .hch-register-intro__copy h1 {
        font-size: 42px;
    }
}

/* Clear active hierarchy for the primary and nested client navigation. */

.hch-app-page .hch-nav-list > li > .hch-sidebar__item.is-active,
.hch-app-page .hch-nav-list > li > .hch-sidebar__item.active,
.hch-app-page .hch-nav-list > li > .hch-sidebar__disclosure.is-active {
    color: #0377d2;
    background: #dff3fc;
    background-image: none;
    border: 1px solid #b9e3f5;
    box-shadow: 0 8px 20px rgba(4, 145, 245, 0.09);
    font-weight: 820;
}

.hch-app-page .hch-nav-list > li > .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-app-page .hch-nav-list > li > .hch-sidebar__item.active .hch-sidebar__icon,
.hch-app-page .hch-nav-list > li > .hch-sidebar__disclosure.is-active .hch-sidebar__icon,
.hch-app-page .hch-nav-list > li > .hch-sidebar__disclosure.is-active .hch-sidebar__chevron {
    color: #111827;
}

.hch-app-page .hch-nav-submenu {
    margin-top: 5px;
    margin-bottom: 7px;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item {
    color: #52697a;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    font-weight: 620;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item:hover,
.hch-app-page .hch-nav-submenu .hch-sidebar__item:focus-visible {
    color: #0274c7;
    background: #f7fbfd;
    border-color: #e0edf3;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item.is-active,
.hch-app-page .hch-nav-submenu .hch-sidebar__item.active {
    color: #0274c7;
    background: #f0f9fd;
    background-image: none;
    border-color: #d5eaf4;
    box-shadow: inset 3px 0 0 #55c4ff;
    font-weight: 760;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-app-page .hch-nav-submenu .hch-sidebar__item.active .hch-sidebar__icon {
    color: #111827;
}

/* Font Awesome menu glyphs inherit the current sidebar colour. */
.hch-app-page .hch-sidebar .hch-sidebar__icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 16px;
    line-height: 1;
}

/* Categories and Actions already live in the global navigation. Keep a CSS
   fallback for installations that still have an older compiled Smarty view. */
.hch-cart-page #order-standard_cart .cart-sidebar [menuItemName="Categories"],
.hch-cart-page #order-standard_cart .cart-sidebar [menuItemName="Product Categories"],
.hch-cart-page #order-standard_cart .cart-sidebar [menuItemName="Actions"],
.hch-cart-page #order-standard_cart .cart-sidebar [menuItemName="Action"] {
    display: none !important;
}

.hch-cart-page #order-standard_cart > .row.hch-cart-row--without-sidebar {
    grid-template-columns: minmax(0, 1fr) !important;
}

.hch-cart-page #order-standard_cart .cart-sidebar.hch-cart-sidebar--empty {
    display: none !important;
}

/* Final quick-email layout: compact password and action, while the account
 * name remains physically joined to its domain suffix. */
.hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px !important;
}

.hch-service-detail .hch-quick-email-card .hch-quick-email__address,
.hch-service-detail .hch-quick-email-card .input-group {
    flex: 0 1 260px;
    margin: 0 !important;
}

.hch-service-detail .hch-quick-email-card .hch-quick-email__address > :first-child,
.hch-service-detail .hch-quick-email-card .input-group > :first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] > input[type="password"] {
    width: 185px !important;
    min-width: 0;
    flex: 0 1 185px;
    margin: 0 !important;
}

.hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] > :is(button, .btn, input[type="submit"]) {
    width: auto !important;
    min-width: 112px;
    flex: 0 0 auto;
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    .hch-service-detail .hch-quick-email-card .hch-quick-email__address,
    .hch-service-detail .hch-quick-email-card .input-group {
        flex-basis: min(100%, 300px);
    }

.hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] > input[type="password"] {
        flex: 1 1 min(100%, 220px);
    }
}

/* Account pages: profile, users, contacts, security and email history use
 * the same compact cards and controls as the client dashboard. */
.hch-account-page .card,
.hch-account-page .alert > form {
    background: #fff;
    border: 1px solid #d7e7ee;
    border-radius: 17px;
    box-shadow: 0 11px 28px rgba(15, 80, 112, .055);
}

.hch-account-page .card {
    overflow: hidden;
    margin-bottom: 16px;
}

.hch-account-page .card-body {
    padding: clamp(18px, 3vw, 26px);
}

.hch-account-page .card-title,
.hch-account-page h3.card-title {
    margin: 0 0 18px;
    color: #143b55;
    font-size: 18px;
    font-weight: 830;
    letter-spacing: -.025em;
}

.hch-account-page .form-group {
    margin-bottom: 15px;
}

.hch-account-page .col-form-label,
.hch-account-page .form-group > label {
    margin-bottom: 6px;
    color: #426176;
    font-size: 11px;
    font-weight: 760;
}

.hch-account-page .controls.form-check {
    display: grid;
    gap: 8px;
}

.hch-account-page .controls.form-check > label,
.hch-account-page label.form-check,
.hch-account-page .form-check-inline {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 8px 11px;
    color: #294b61;
    background: #f9fcfe;
    border: 1px solid #dceaf0;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
}

.hch-account-page .controls.form-check input[type="hidden"] {
    display: none;
}

.hch-account-page .controls.form-check input[type="checkbox"],
.hch-account-page .form-check-input:not(.toggle-switch-success) {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    position: static !important;
    float: none !important;
    display: block;
    align-self: center;
    margin: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background: #fff;
    border: 1.5px solid #a9cbd9;
    border-radius: 6px;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.hch-account-page .controls.form-check input[type="checkbox"]:checked,
.hch-account-page .form-check-input:not(.toggle-switch-success):checked {
    background: #0491f5;
    border-color: #0491f5;
    box-shadow: 0 4px 10px rgba(4, 145, 245, .18);
}

.hch-account-page .controls.form-check input[type="checkbox"]:checked::after,
.hch-account-page .form-check-input:not(.toggle-switch-success):checked::after {
    display: block;
    color: #fff;
    content: "✓";
    font-size: 12px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
}

.hch-account-page .controls.form-check input[type="checkbox"]:focus-visible,
.hch-account-page .form-check-input:not(.toggle-switch-success):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, .16);
}

.hch-account-page .bootstrap-switch {
    min-width: 78px !important;
    overflow: hidden;
    background: #f7fbfd !important;
    border: 1px solid #bcdde9 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.hch-account-page .bootstrap-switch .bootstrap-switch-container {
    border-radius: inherit;
}

.hch-account-page .bootstrap-switch .bootstrap-switch-handle-on,
.hch-account-page .bootstrap-switch .bootstrap-switch-handle-off,
.hch-account-page .bootstrap-switch .bootstrap-switch-label {
    min-height: 30px;
    padding: 7px 10px !important;
    border: 0 !important;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
}

.hch-account-page .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.hch-account-page .bootstrap-switch .bootstrap-switch-handle-on {
    color: #fff !important;
    background: #0491f5 !important;
}

.hch-account-page .bootstrap-switch .bootstrap-switch-handle-off,
.hch-account-page .bootstrap-switch .bootstrap-switch-label {
    color: #527084 !important;
    background: #f4f9fb !important;
}

.hch-account-page .table-container,
.hch-account-page .table-responsive {
    overflow: auto;
    background: #fff;
    border: 1px solid #d7e7ee;
    border-radius: 14px;
}

.hch-account-page .table {
    margin: 0;
    color: #36566c;
    font-size: 12px;
}

.hch-account-page .table thead th {
    padding: 13px 15px;
    color: #658095;
    background: #f5fafc;
    border-top: 0;
    border-bottom: 1px solid #dcebf1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hch-account-page .table td {
    padding: 13px 15px;
    border-color: #e5eff3;
    vertical-align: middle;
}

.hch-account-page .table tbody tr:hover {
    background: #f8fcfe;
}

.hch-account-page .form-group.text-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
}

@media (max-width: 575.98px) {
    .hch-account-page .card-body {
        padding: 16px;
    }

    .hch-account-page .controls.form-check > label,
    .hch-account-page label.form-check,
    .hch-account-page .form-check-inline {
        align-items: flex-start;
    }
}

/* Dashboard domain action: the WHMCS panel supplies an inline input group.
 * Turn it into the same spaced, tactile form surface used by the new shell. */
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group {
    width: 100%;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group > .form-control,
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group > input[type="text"],
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form > .form-control,
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form > input[type="text"] {
    min-width: 0;
    min-height: 44px;
    flex: 1 1 220px;
    margin: 0 !important;
    padding: 0 14px;
    color: #24475f;
    background: #f8fcfe;
    border: 1px solid #c8e0ec;
    border-radius: 10px !important;
    box-shadow: none;
    font-size: 12px;
}

.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group-btn,
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group-append,
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group-prepend {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form .btn,
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form input[type="submit"],
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form button {
    min-width: 84px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 15px;
    border-radius: 10px !important;
    box-shadow: none;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form .btn-success,
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form input[type="submit"] {
    color: #fff !important;
    background: #0491f5 !important;
    border-color: #0491f5 !important;
    box-shadow: 0 7px 16px rgba(4, 145, 245, .16) !important;
}

.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form .btn:not(.btn-success) {
    color: #0377d2 !important;
    background: #fff !important;
    border: 1px solid #bcdcea !important;
}

.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form .btn:hover,
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form input[type="submit"]:hover,
.hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form button:hover {
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group {
        flex-wrap: wrap;
    }

    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group > .form-control,
    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group > input[type="text"] {
        flex-basis: 100%;
    }

    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group-btn,
    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group-append,
    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body .input-group-prepend {
        width: 100%;
    }

    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form .btn,
    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form input[type="submit"],
    .hch-dashboard-page .hch-dashboard-table-grid .hch-whmcs-panel .card-body form button {
        flex: 1 1 0;
    }
}

/* Billing module output can be generated by different WHMCS modules. Render
 * the information as a stable label/value grid instead of loose columns. */
.hch-billing-overview-card .panel-body,
.hch-billing-overview-card .card-body {
    padding: 18px !important;
}

.hch-billing-overview__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.hch-billing-overview__facts > div {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 12px 13px;
    background: #f8fcfe;
    border: 1px solid #d8e9f1;
    border-radius: 11px;
}

.hch-billing-overview__facts dt {
    margin: 0;
    color: #7890a0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hch-billing-overview__facts dd {
    min-width: 0;
    margin: 0;
    color: #173e58;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Dynamic WHMCS forms are also rendered after the first page load. Keep all
 * controls in the main app surface on the active blue-and-white design. */
.hch-app-page .hch-main :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea) {
    min-height: 43px;
    color: #24475f !important;
    background: #fff !important;
    border: 1px solid #c6dde8 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 12px;
}

.hch-app-page .hch-main textarea {
    min-height: 104px;
    padding: 11px 13px;
}

.hch-app-page .hch-main :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea):focus {
    border-color: #0491f5 !important;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, .12) !important;
    outline: 0;
}

.hch-app-page .hch-main :is(.btn, button, input[type="submit"], input[type="button"]) {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px !important;
    box-shadow: none;
    font-size: 11px;
    font-weight: 760;
    line-height: 1.2;
}

.hch-app-page .hch-main :is(.btn-primary, .btn-success, .btn-info, button.btn-primary, button.btn-success, button.btn-info, input[type="submit"], input[type="button"]) {
    color: #fff !important;
    background: #0491f5 !important;
    background-image: none !important;
    border-color: #0491f5 !important;
    box-shadow: 0 7px 16px rgba(4, 145, 245, .16) !important;
}

.hch-app-page .hch-main :is(.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary) {
    color: #0377d2 !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #bddce9 !important;
}

.hch-app-page .hch-main :is(.btn, button, input[type="submit"], input[type="button"]):not(:disabled):hover {
    transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    .hch-billing-overview__facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-app-page .hch-main :is(.btn, button, input[type="submit"], input[type="button"]) {
        min-height: 42px;
    }
}

/* Keep breadcrumbs in the content canvas instead of stacking them in the
 * sticky topbar. */
.hch-main-breadcrumb {
    width: 100%;
    min-width: 0;
    margin: -10px 0 18px;
    padding: 0;
}

.hch-main-breadcrumb .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 8px;
    margin: 0;
    padding: 0;
    color: #7890a1;
    background: transparent;
    font-size: 10px;
}

.hch-main-breadcrumb .breadcrumb-item {
    max-width: min(300px, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-main-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 8px;
    color: #a5b6c2;
}

.hch-main-breadcrumb .breadcrumb-item a {
    color: #39769a;
}

.hch-main-breadcrumb .breadcrumb-item.active {
    color: #183b53;
    font-weight: 750;
}

/* Compact usage charts used by the hosting detail Resource Usage tab. */
.hch-usage-dashboard {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dce8ee;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15, 80, 112, 0.06);
}

.hch-usage-dashboard__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf3f6;
}

.hch-usage-dashboard__header h3 {
    margin: 3px 0 0;
    color: #123a55;
    font-size: 18px;
    font-weight: 820;
}

.hch-usage-dashboard__header .hch-eyebrow {
    margin: 0;
    color: #0491f5;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hch-usage-dashboard__updated {
    color: #8499a8;
    font-size: 9px;
    text-align: right;
}

.hch-usage-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.hch-usage-chart-card {
    min-width: 0;
    padding: 16px;
    background: #f8fcfe;
    border: 1px solid #dcebf2;
    border-radius: 13px;
}

.hch-usage-chart-card__top {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.hch-usage-chart-card__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #0491f5;
    border-radius: 10px;
    font-size: 13px;
}

.hch-usage-chart-card__icon--sky {
    background: #1ba7fa;
}

.hch-usage-chart-card h4 {
    margin: 0;
    color: #244a62;
    font-size: 12px;
    font-weight: 800;
}

.hch-usage-chart-card p {
    margin: 3px 0 0;
    color: #42667b;
    font-size: 10px;
}

.hch-usage-chart-card p span {
    color: #8297a6;
}

.hch-usage-chart-card__top > strong {
    color: #0377d2;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.04em;
}

.hch-usage-progress {
    height: 8px;
    overflow: hidden;
    margin-top: 18px;
    background: #dceef5;
    border-radius: 999px;
}

.hch-usage-progress span {
    width: 0;
    height: 100%;
    display: block;
    background: #0491f5;
    border-radius: inherit;
}

.hch-usage-progress--sky span {
    background: #1ba7fa;
}

.hch-usage-bars {
    height: 58px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 15px;
    padding-top: 4px;
    border-bottom: 1px solid #d8e9f1;
}

.hch-usage-bars i {
    min-width: 0;
    flex: 1 1 0;
    display: block;
    background: #7dd3fc;
    border-radius: 4px 4px 0 0;
}

.hch-usage-bars i:nth-child(2n) {
    background: #0491f5;
}

.hch-usage-bars--sky i {
    background: #bae6fd;
}

.hch-usage-bars--sky i:nth-child(2n) {
    background: #1ba7fa;
}

@media (max-width: 767.98px) {
    .hch-main-breadcrumb {
        margin: -4px 0 14px;
    }

    .hch-main-breadcrumb .breadcrumb {
        gap: 2px 5px;
        font-size: 9px;
    }

    .hch-main-breadcrumb .breadcrumb-item {
        max-width: 42vw;
    }

    .hch-usage-dashboard {
        padding: 15px;
        border-radius: 14px;
    }

    .hch-usage-dashboard__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .hch-usage-dashboard__updated {
        text-align: left;
    }

    .hch-usage-chart-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    :root {
        --hch-topbar-height: 64px;
    }

    .hch-topbar {
        gap: 10px;
        padding: 0 14px;
    }

    .hch-topbar__start {
        min-width: 0;
        flex: 1 1 auto;
    }

    .hch-topbar__actions {
        flex: 0 0 auto;
        gap: 6px;
    }

    .hch-topbar .hch-icon-button,
    .hch-topbar .hch-avatar {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .hch-account-menu,
    .hch-account-trigger {
        width: 42px;
        min-width: 42px;
        flex-basis: 42px;
    }

    .hch-account-trigger {
        justify-content: center;
        padding: 3px;
    }

    .hch-topbar .hch-account-trigger .hch-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .hch-account-trigger__chevron {
        display: none;
    }

    .hch-breadcrumb__parent,
    .hch-breadcrumb__divider,
    .hch-search,
    .hch-topbar__profile {
        display: none;
    }

    .hch-main {
        padding: 24px 15px 40px;
    }

    .hch-app-breadcrumb {
        max-width: calc(100vw - 168px);
        overflow: hidden;
    }

    .hch-app-breadcrumb .breadcrumb-item {
        max-width: 145px;
    }

    .hch-page-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 18px;
    }

    .hch-page-actions,
    .hch-page-actions .hch-button {
        width: 100%;
    }

    .hch-stat-grid,
    .hch-grid--2,
    .hch-form-grid,
    .hch-product-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-stat-card {
        min-height: 138px;
    }

    .hch-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hch-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .hch-card__actions,
    .hch-card__actions .hch-button {
        width: 100%;
    }

    .hch-card__header,
    .hch-card__body,
    .hch-card__footer {
        padding-right: 15px;
        padding-left: 15px;
    }

    .hch-app .dataTables_wrapper .listtable {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
    }

    .hch-app .dataTables_wrapper .dataTables_filter,
    .hch-app .dataTables_wrapper .dataTables_info {
        grid-column: 1;
    }

    .hch-app .dataTables_wrapper .dataTables_filter {
        grid-row: 1;
        width: 100%;
        padding: 13px;
    }

    .hch-app .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }

    .hch-app .dataTables_wrapper .dataTables_info {
        grid-row: 2;
        padding: 0 13px 13px;
    }

    .hch-app .dataTables_wrapper .table-list,
    .hch-app .dataTables_wrapper table.dataTable {
        grid-row: 3;
    }

    .hch-app .dataTables_wrapper .dataTables_length,
    .hch-app .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        padding-top: 12px;
    }

    .hch-app .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: flex-start;
    }

    .hch-app .dataTables_wrapper .table-responsive,
    .hch-app .dataTables_wrapper .dataTables_scroll {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hch-services-table .dataTables_wrapper .listtable,
    .hch-services-table .dataTables_wrapper .dataTables_scroll {
        overflow: hidden;
    }

    .hch-services-table .dataTables_wrapper .dataTables_scrollBody {
        overflow-x: auto !important;
    }

    .hch-button--sm,
    .hch-nav-submenu .hch-sidebar__item {
        min-height: 44px;
    }

    .hch-table--stacked {
        min-width: 0;
    }

    .hch-table--stacked thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .hch-table--stacked,
    .hch-table--stacked tbody,
    .hch-table--stacked tr,
    .hch-table--stacked td {
        display: block;
        width: 100%;
    }

    .hch-table--stacked tr {
        padding: 13px 0;
        border-bottom: 1px solid var(--hch-border);
    }

    .hch-table--stacked tr:last-child {
        border-bottom: 0;
    }

    .hch-table--stacked td {
        display: grid;
        grid-template-columns: minmax(90px, 0.72fr) minmax(0, 1.28fr);
        gap: 12px;
        padding: 5px 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }

    .hch-table--stacked td::before {
        grid-column: 1;
        grid-row: 1 / span 10;
        color: var(--hch-text-muted);
        content: attr(data-label);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
    }

    .hch-table--stacked td > * {
        grid-column: 2;
    }

    .hch-table--stacked .hch-table__primary {
        min-width: 0;
    }

    .hch-table--stacked .hch-table__secondary {
        margin-left: auto;
        text-align: right;
    }

    .hch-table--stacked .hch-table__actions {
        text-align: right !important;
    }

    .hch-detail-list__item {
        grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
        gap: 12px;
    }

    .hch-domain-search {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-domain-search .hch-button {
        width: 100%;
    }

    .hch-ticket-message__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .hch-auth-shell {
        display: block;
        min-height: 100vh;
    }

    .hch-auth-shell__intro {
        min-height: auto;
        padding: 24px 20px 30px;
    }

    .hch-auth-intro__copy {
        padding: 42px 0 10px;
    }

    .hch-auth-intro__copy h1 {
        font-size: 34px;
    }

    .hch-auth-intro__copy p {
        margin-top: 13px;
    }

    .hch-auth-intro__footer {
        display: none;
    }

    .hch-auth-shell__main {
        display: block;
        padding: 0 14px 30px;
        background: #171a2c;
    }

    .hch-auth-card {
        width: 100%;
        padding: 25px 19px;
        border-radius: 20px;
    }

    .hch-context-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-app-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .hch-register-shell {
        display: block;
        min-height: 100vh;
    }

    .hch-register-intro {
        position: relative;
        min-height: auto;
        height: auto;
        padding: 24px 20px 30px;
    }

    .hch-register-brand {
        margin-top: 22px;
    }

    .hch-register-intro__copy {
        padding: 44px 0 12px;
    }

    .hch-register-intro__copy h1 {
        font-size: 35px;
    }

    .hch-register-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hch-register-intro .hch-auth-intro__footer {
        display: none;
    }

    .hch-register-content {
        padding: 0 14px 32px;
        background: #4d3cff;
    }

    .hch-register-card {
        padding: 25px 19px;
        border-radius: 20px;
    }

    .hch-register-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-register-grid__full {
        grid-column: auto;
    }
}

@media (max-width: 429.98px) {
    .hch-account-dropdown {
        position: fixed;
        top: calc(var(--hch-topbar-height) + 8px);
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - var(--hch-topbar-height) - 20px);
    }

    .hch-page-title {
        font-size: 26px;
    }

    .hch-stat-grid {
        gap: 12px;
    }

    .hch-stat-card {
        min-height: 128px;
        padding: 15px;
    }

    .hch-stat-card__value {
        margin-top: 13px;
        font-size: 24px;
    }

    .hch-action-grid {
        gap: 10px;
    }

    .hch-action-card {
        min-height: 86px;
    }

    .hch-cart-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .hch-cart-item__price {
        text-align: left;
    }

    .hch-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hch-form-actions .hch-button {
        width: 100%;
    }

    .hch-code-inputs {
        gap: 5px;
    }

    .hch-code-inputs .hch-field,
    .hch-code-inputs .hch-twofactor-digit {
        min-height: 42px;
        padding-right: 2px;
        padding-left: 2px;
        font-size: 17px;
    }

    .hch-register-benefits {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-register-heading h2 {
        font-size: 27px;
    }

    .hch-toast-region {
        top: 10px;
        right: 10px;
        width: calc(100vw - 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hch-app *,
    .hch-auth-shell *,
    .hch-cart-shell *,
    .hch-toast,
    .hch-loading-overlay,
    .hch-sidebar,
    .hch-sidebar-backdrop {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 2026-08-30: white pricing cards, flat domain search and invoice workspace. */

.hch-cart-page #order-standard_cart .cart-sidebar .card-header.hch-context-card-toggle {
    cursor: pointer;
    user-select: none;
}

.hch-cart-page #order-standard_cart .cart-sidebar .card-header,
.hch-cart-page #order-standard_cart .cart-sidebar .card-sidebar.is-expanded > .card-header {
    background: #ffffff;
}

.hch-cart-page #order-standard_cart .cart-sidebar .card-header.hch-context-card-toggle:hover,
.hch-cart-page #order-standard_cart .cart-sidebar .card-header.hch-context-card-toggle:focus-visible {
    background: #f5fbfe;
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(27, 167, 250, 0.12);
}

.hch-cart-page #order-standard_cart .cart-sidebar .card-header.hch-context-card-toggle .card-minimise {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    margin: 0 0 0 auto !important;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    pointer-events: none;
}

/* Pricing list inspired by the supplied reference, adapted to the white theme. */

.hch-cart-products-page #order-standard_cart .products > .row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px !important;
}

.hch-cart-products-page #order-standard_cart .products .product {
    min-height: 430px;
    overflow: visible;
    padding: 0 !important;
    background: #ffffff;
    border: 1px solid #dce8ee;
    border-radius: 17px;
    box-shadow: 0 12px 32px rgba(15, 80, 112, 0.07);
    cursor: pointer;
}

.hch-cart-products-page #order-standard_cart .products .product:focus-visible {
    outline: none;
    border-color: #55c4ff;
    box-shadow: 0 0 0 4px rgba(85, 196, 255, .16), 0 16px 38px rgba(4, 145, 245, .1);
}

.hch-cart-products-page #order-standard_cart .products .product header {
    min-height: 0;
    padding: 22px 20px 4px;
    color: #132f44;
    background: #ffffff !important;
    border: 0;
    border-radius: 17px 17px 0 0;
}

.hch-cart-products-page #order-standard_cart .products .product header span {
    color: #132f44;
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.hch-cart-products-page #order-standard_cart .products .product header .qty {
    color: #0377d2;
    background: #e0f2fe;
    font-size: 8px;
}

.hch-cart-products-page #order-standard_cart .products .product div.product-desc {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 9px 20px 21px !important;
    color: #5f7485;
    font-size: 10px;
}

.hch-cart-products-page #order-standard_cart .products .product div.product-desc > p {
    min-height: 42px;
    margin: 0 0 13px;
    color: #687d8d;
    line-height: 1.55;
}

.hch-cart-products-page #order-standard_cart .products .product div.product-pricing {
    min-height: 46px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 5px;
    margin: 0 0 14px;
    color: #74899a;
}

.hch-cart-products-page #order-standard_cart .products .product div.product-pricing .product-pricing__prefix {
    flex: 0 0 100%;
    color: #8295a4;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.hch-cart-products-page #order-standard_cart .products .product div.product-pricing span.price {
    color: #102f46;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
}

.hch-cart-products-page #order-standard_cart .products .product .product-pricing__cycle {
    color: #718697;
    font-size: 9px;
}

.hch-cart-products-page #order-standard_cart .products .product .btn-order-now {
    width: 100%;
    min-height: 45px;
    margin: 0 0 17px;
    color: #ffffff !important;
    background: #0491f5 !important;
    border-color: #0491f5 !important;
    border-radius: 11px !important;
    box-shadow: 0 9px 20px rgba(4, 145, 245, .17);
}

.hch-cart-products-page #order-standard_cart .products .product .btn-order-now:hover,
.hch-cart-products-page #order-standard_cart .products .product .btn-order-now:focus {
    background: #0274c7 !important;
    border-color: #0274c7 !important;
}

.hch-cart-products-page #order-standard_cart .products .product div.product-desc ul {
    gap: 9px;
    margin-top: 0;
    padding-top: 1px;
    border-top: 0;
}

.hch-cart-products-page #order-standard_cart .products .product div.product-desc li {
    min-height: 18px;
    display: flex;
    align-items: flex-start;
    padding-left: 22px;
    color: #263f52;
    font-size: 10px;
    line-height: 1.5;
}

.hch-cart-products-page #order-standard_cart .products .product div.product-desc li::before {
    top: 1px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: #059669;
    background: #e7f8f1;
    content: "\2713";
    border-radius: 50%;
    font-size: 9px;
    font-weight: 900;
    transform: none;
}

/* Domain order search: flat white surface, with no orange edge or gradient. */

.hch-cart-domain-page #order-standard_cart .domain-checker-bg,
.hch-cart-page #order-standard_cart .domain-checker-bg {
    padding: 31px 24px !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(15, 80, 112, 0.11) !important;
    outline: 0 !important;
}

.hch-cart-page #order-standard_cart .domain-checker-bg::before,
.hch-cart-page #order-standard_cart .domain-checker-bg::after {
    display: none !important;
    content: none !important;
}

.hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box {
    background: #ffffff;
    border: 1px solid #d2e4ed;
    box-shadow: 0 9px 24px rgba(15, 80, 112, .075);
}

.hch-cart-page #order-standard_cart .spotlight-tlds {
    padding: 0;
    background: transparent;
}

.hch-cart-page #order-standard_cart .spotlight-tld {
    min-height: 125px;
    padding: 19px 15px;
    background: #ffffff;
    border: 1px solid #d9e8ef;
    border-radius: 15px;
    box-shadow: 0 10px 27px rgba(15, 80, 112, .055);
}

.hch-cart-page #order-standard_cart .spotlight-tld .btn-add-to-cart,
.hch-cart-page #order-standard_cart .suggested-domains .btn-add-to-cart {
    min-height: 34px;
    color: #ffffff !important;
    background: #0491f5 !important;
    border: 1px solid #0491f5 !important;
    border-radius: 9px !important;
    box-shadow: 0 7px 16px rgba(4, 145, 245, .14);
    font-size: 9px;
    font-weight: 800;
}

.hch-cart-page #order-standard_cart .spotlight-tld .btn-add-to-cart:hover,
.hch-cart-page #order-standard_cart .suggested-domains .btn-add-to-cart:hover {
    background: #0274c7 !important;
    border-color: #0274c7 !important;
}

/* Invoice list */

.hch-invoices {
    display: grid;
    gap: 16px;
}

.hch-invoices-page .hch-content-grid--with-context {
    grid-template-columns: minmax(0, 1fr);
}

.hch-invoices-page .hch-content-grid--with-context > .hch-context-sidebar {
    display: none;
}

.hch-invoices__header {
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 26px;
    background: #ffffff;
    border: 1px solid #dceaf1;
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(15, 80, 112, .065);
}

.hch-invoices__heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.hch-invoices__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    color: #0491f5;
    background: #e0f2fe;
    border-radius: 15px;
}

.hch-invoices__icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
}

.hch-invoices__eyebrow {
    display: block;
    color: #0491f5;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hch-invoices__header h1 {
    margin: 4px 0 3px;
    color: #102f46;
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -.035em;
}

.hch-invoices__header p {
    margin: 0;
    color: #71899b;
    font-size: 10px;
}

.hch-invoices__actions .btn {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    color: #ffffff;
    background: #0491f5;
    border-color: #0491f5;
    border-radius: 11px;
    box-shadow: 0 9px 20px rgba(4, 145, 245, .16);
    font-size: 10px;
    font-weight: 800;
}

.hch-invoices__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.hch-invoices__summary > div {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 17px 19px;
    background: #ffffff;
    border: 1px solid #dceaf1;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(15, 80, 112, .05);
}

.hch-invoices__summary span {
    color: #668196;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hch-invoices__summary strong {
    color: #12324a;
    font-size: 20px;
    font-weight: 850;
}

.hch-invoices__summary strong i {
    color: #059669;
    font-size: 15px;
}

.hch-invoices__summary small {
    color: #8397a6;
    font-size: 9px;
}

.hch-invoices__table-card {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9e8ef;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 80, 112, .065);
}

.hch-invoices__table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e1edf3;
}

.hch-invoices__table-heading h2 {
    margin: 3px 0 0;
    color: #12324a;
    font-size: 17px;
    font-weight: 820;
}

.hch-invoices__table-heading > span {
    color: #8095a5;
    font-size: 9px;
}

.hch-invoices__table-card .dataTables_wrapper {
    padding: 15px 18px 18px;
}

.hch-invoices__table-wrap {
    overflow-x: auto;
}

.hch-invoices__table-card table {
    min-width: 760px;
    margin: 0 !important;
    border: 0;
}

.hch-invoices__table-card table thead th {
    padding: 13px 14px;
    color: #668196;
    background: #f4f9fb;
    border: 0;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.hch-invoices__table-card table tbody tr {
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.hch-invoices__table-card table tbody tr:hover,
.hch-invoices__table-card table tbody tr:focus {
    background: #f0f9ff;
    outline: none;
    box-shadow: inset 3px 0 0 #1ba7fa;
}

.hch-invoices__table-card table tbody td {
    padding: 14px;
    color: #36566c;
    border-color: #e7f0f4;
    font-size: 10px;
}

.hch-invoices__table-card table tbody td strong {
    color: #153a53;
    font-weight: 800;
}

.hch-invoices__loader {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 30px;
    color: #71899b;
}

.hch-invoices__loader .hch-loader {
    width: 28px;
    height: 28px;
}

.hch-invoices__loader p {
    margin: 0;
    font-size: 10px;
}

/* Quotes workspace: preserves WHMCS DataTables and turns quote rows into
   readable cards on phones instead of allowing the table to leave the viewport. */
.hch-quotes-page {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.hch-quotes-hero {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 25px 27px;
    color: #ffffff;
    background: linear-gradient(118deg, #0377d2 0%, #0491f5 62%, #48bcfb 100%);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(4, 145, 245, .16);
}

.hch-quotes-hero__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.hch-quotes-hero__icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 15px;
}

.hch-quotes-hero__icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
}

.hch-quotes-hero__eyebrow,
.hch-quotes-card__eyebrow {
    display: block;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hch-quotes-hero__eyebrow {
    color: #dff5ff;
}

.hch-quotes-hero h1 {
    margin: 4px 0 3px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -.035em;
}

.hch-quotes-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .86);
    font-size: 10px;
}

.hch-quotes-hero__count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 10px 13px;
    color: #e9f8ff;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.hch-quotes-hero__count strong {
    color: #ffffff;
    font-size: 16px;
}

.hch-quotes-card {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9e8ef;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 80, 112, .065);
}

.hch-quotes-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e1edf3;
}

.hch-quotes-card__eyebrow {
    color: #0491f5;
}

.hch-quotes-card__header h2 {
    margin: 3px 0 0;
    color: #12324a;
    font-size: 17px;
    font-weight: 820;
}

.hch-quotes-card__header p {
    margin: 0;
    color: #8095a5;
    font-size: 9px;
}

.hch-quotes-card .dataTables_wrapper {
    min-width: 0;
    padding: 15px 18px 18px;
}

.hch-quotes-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hch-quotes-card table {
    min-width: 760px;
    margin: 0 !important;
    border: 0;
}

.hch-quotes-card table thead th {
    padding: 13px 14px;
    color: #668196;
    background: #f4f9fb;
    border: 0;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.hch-quotes-card table tbody tr {
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
}

.hch-quotes-card table tbody tr:hover,
.hch-quotes-card table tbody tr:focus {
    background: #f0f9ff;
    outline: none;
    box-shadow: inset 3px 0 0 #1ba7fa;
}

.hch-quotes-card table tbody td {
    padding: 14px;
    color: #36566c;
    border-color: #e7f0f4;
    font-size: 10px;
    vertical-align: middle;
}

.hch-quotes-card table tbody td strong {
    color: #153a53;
    font-weight: 800;
}

.hch-quotes-table__subject {
    min-width: 180px;
    overflow-wrap: anywhere;
}

.hch-quotes-table__action form {
    margin: 0;
}

.hch-quotes-table__action .btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    color: #0377d2;
    border-color: #b8dced;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
}

.hch-quotes-loader {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 30px;
    color: #71899b;
}

.hch-quotes-loader .hch-loader {
    width: 28px;
    height: 28px;
}

.hch-quotes-loader p {
    margin: 0;
    font-size: 10px;
}

@media (max-width: 1399.98px) {
    .hch-cart-products-page #order-standard_cart .products > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .hch-cart-products-page #order-standard_cart .products > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-cart-products-page #order-standard_cart .products .product {
        min-height: 0;
    }

    .hch-cart-page #order-standard_cart .domain-checker-bg {
        padding: 17px 12px !important;
    }

    .hch-invoices__header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .hch-invoices__actions,
    .hch-invoices__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hch-invoices__summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-invoices__table-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .hch-quotes-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .hch-quotes-hero__count {
        align-self: stretch;
        justify-content: center;
    }

    .hch-quotes-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .hch-quotes-card .dataTables_wrapper {
        padding: 12px;
    }

    .hch-quotes-card .dataTables_wrapper .listtable {
        overflow: visible;
    }

    .hch-quotes-table-wrap {
        overflow: visible;
    }

    .hch-quotes-card table,
    .hch-quotes-card table.dataTable,
    .hch-quotes-card table tbody,
    .hch-quotes-card table tbody tr,
    .hch-quotes-card table tbody td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
    }

    .hch-quotes-card table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .hch-quotes-card table tbody tr {
        display: grid;
        gap: 0;
        margin: 0 0 10px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid #dceaf1;
        border-radius: 12px;
        box-shadow: none;
    }

    .hch-quotes-card table tbody tr:last-child {
        margin-bottom: 0;
    }

    .hch-quotes-card table tbody td {
        min-height: 38px;
        display: grid;
        grid-template-columns: minmax(88px, 42%) minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid #edf4f7;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .hch-quotes-card table tbody td::before {
        color: #71899b;
        content: attr(data-label);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    .hch-quotes-card table tbody td:last-child {
        border-bottom: 0;
    }

    .hch-quotes-card table tbody td > * {
        justify-self: end;
    }

    .hch-quotes-card table tbody .hch-quotes-table__subject {
        min-width: 0;
    }

    .hch-quotes-card table tbody .hch-quotes-table__action form {
        display: flex;
        justify-content: flex-end;
    }

    .hch-quotes-card table tbody tr:hover,
    .hch-quotes-card table tbody tr:focus {
        background: #f0f9ff;
        box-shadow: inset 3px 0 0 #1ba7fa;
    }
}

/* Keep the v2 canvas authoritative over the legacy registration layout above. */
#registration.hch-register-v2 {
    display: block;
    grid-template-columns: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.34), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(186, 230, 253, 0.56), transparent 28%),
        radial-gradient(circle at 54% 50%, rgba(224, 242, 254, 0.82), transparent 38%),
        linear-gradient(135deg, #ffffff 0%, #f0f9ff 54%, #e0f2fe 100%);
}

.hch-registration-page #main-body.hch-register-main {
    background: #f5fbff;
}

/* Service details */

.hch-service-detail {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    color: var(--hch-text);
}

.hch-service-detail > .tab-content {
    margin-bottom: 0 !important;
}

.hch-service-overview-card {
    margin: 0 0 20px;
    background: #fff;
    border: 1px solid #dbeafe !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 48px rgba(4, 145, 245, 0.08);
    overflow: hidden;
}

.hch-service-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: clamp(24px, 3.5vw, 38px);
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.22), transparent 34%),
        linear-gradient(120deg, #0377d2 0%, #0491f5 52%, #55c4ff 100%);
}

.hch-service-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}

.hch-service-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    color: #0274c7;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 19px;
    font-size: 24px;
    box-shadow: 0 14px 34px rgba(3, 105, 161, 0.2);
}

.hch-service-identity .hch-eyebrow {
    margin: 0 0 5px;
    color: #dff6ff;
}

.hch-service-identity h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.hch-service-domain {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.hch-service-domain:hover,
.hch-service-domain:focus {
    color: #fff;
    text-decoration: underline;
}

.hch-service-detail .hch-service-status {
    min-width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 9px 13px;
    color: #0377d2;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(3, 105, 161, 0.14);
}

.hch-service-detail .hch-service-status .product-status-text {
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hch-service-status__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.hch-service-status.product-status-pending .hch-service-status__dot {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

.hch-service-status.product-status-suspended .hch-service-status__dot,
.hch-service-status.product-status-terminated .hch-service-status__dot,
.hch-service-status.product-status-cancelled .hch-service-status__dot,
.hch-service-status.product-status-fraud .hch-service-status__dot {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

.hch-service-status__deleted-icon {
    color: #dc2626;
    font-size: 12px;
}

.hch-service-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.hch-service-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 9px 14px;
    color: #0377d2;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 760;
    box-shadow: none;
}

.hch-service-actions .btn:hover,
.hch-service-actions .btn:focus {
    color: #0377d2;
    background: #f0f9ff;
    border-color: #fff;
}

.hch-service-actions .btn-danger {
    color: #b91c1c;
    background: #fff7f7;
}

.hch-service-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 8px clamp(16px, 2vw, 26px);
    background: #fff;
}

.hch-service-fact {
    min-width: 0;
    padding: 17px 15px;
    border-right: 1px solid #e0f2fe;
}

.hch-service-fact:nth-child(4n),
.hch-service-fact:last-child {
    border-right: 0;
}

.hch-service-fact span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #64748b;
    font-size: 9px;
    font-weight: 740;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hch-service-fact span i {
    color: #1ba7fa;
}

.hch-service-fact strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 760;
    overflow-wrap: anywhere;
}

.hch-service-fact--danger {
    background: #fff7f7;
}

.hch-service-fact--danger span,
.hch-service-fact--danger span i,
.hch-service-fact--danger strong {
    color: #b91c1c;
}

.hch-service-hook-output {
    margin: 0 0 18px;
}

.hch-service-hook-output:empty {
    display: none;
}

.hch-service-hook-output--terminated .hch-service-terminated-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 13px 16px;
    color: #b91c1c !important;
    background: #fff1f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(185, 28, 28, 0.07);
    font-size: 12px;
    font-weight: 700;
}

.hch-service-hook-output--terminated .hch-service-terminated-alert::before {
    display: none !important;
}

.hch-service-hook-output--terminated .hch-service-terminated-alert > i {
    color: #dc2626;
    font-size: 14px;
}

.hch-service-detail .responsive-tabs-sm {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0 0 10px;
    padding: 7px;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    box-shadow: var(--hch-shadow-sm);
    overflow-x: auto;
    scrollbar-width: thin;
}

.hch-service-detail .responsive-tabs-sm .nav-item {
    flex: 0 0 auto;
    margin: 0;
}

.hch-service-detail .responsive-tabs-sm .nav-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    color: #475569;
    background: transparent;
    border: 0;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 730;
    white-space: nowrap;
}

.hch-service-detail .responsive-tabs-sm .nav-link:hover {
    color: #0274c7;
    background: #f0f9ff;
}

.hch-service-detail .responsive-tabs-sm .nav-link.active {
    color: #fff;
    background: linear-gradient(110deg, #0491f5, #55c4ff);
    box-shadow: 0 7px 18px rgba(27, 167, 250, 0.18);
}

.hch-service-detail .responsive-tabs-sm-connector {
    display: none !important;
}

.hch-service-detail .product-details-tab-container {
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.hch-service-detail .product-details-tab-container > .tab-pane {
    min-width: 0;
    padding: clamp(20px, 3vw, 30px);
}

.hch-service-detail .product-details-tab-container > .tab-pane > .row {
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
    gap: 14px;
    align-items: start;
    margin: 0;
    padding: 13px 0;
    border-bottom: 1px solid #eef2f7;
}

.hch-service-detail .product-details-tab-container > .tab-pane > .row:last-of-type {
    border-bottom: 0;
}

.hch-service-detail .product-details-tab-container > .tab-pane > .row > [class*="col-"] {
    max-width: none;
    padding: 0;
    text-align: left !important;
}

.hch-service-detail .product-details-tab-container strong {
    color: #334155;
    font-size: 11px;
}

.hch-service-detail .module-client-area {
    min-width: 0;
    max-width: 100%;
    margin-top: 18px;
    overflow-x: auto;
}

.hch-service-detail .hch-service-tab--module {
    padding: 16px;
    background: #f8fbff;
}

.hch-service-detail .module-client-area[data-hch-module-layout="ready"],
.hch-service-detail .hch-module-overview-output[data-hch-module-layout="ready"] {
    margin-top: 12px;
    overflow: visible;
    text-align: left !important;
}

.hch-service-detail .hch-module-overview-output {
    min-width: 0;
    max-width: 100%;
}

.hch-module-card-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.hch-module-card-grid .hch-module-card,
.hch-service-detail .hch-module-card--usage {
    min-width: 0;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #dbeafe !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045) !important;
    overflow: hidden;
}

.hch-module-card--summary {
    grid-column: 1;
}

.hch-module-card--builder {
    grid-column: 2;
}

.hch-module-card--usage,
.hch-module-card--shortcuts {
    grid-column: 1 / -1;
}

.hch-module-card-grid--single .hch-module-card {
    grid-column: 1 / -1;
}

.hch-module-card-grid .panel-heading,
.hch-module-card-grid .card-header {
    min-height: 52px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 13px 17px;
    color: #0f172a;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
    font-weight: 760;
    line-height: 1.25;
}

.hch-module-card-grid .panel-heading h1,
.hch-module-card-grid .panel-heading h2,
.hch-module-card-grid .panel-heading h3,
.hch-module-card-grid .panel-heading h4,
.hch-module-card-grid .card-header h1,
.hch-module-card-grid .card-header h2,
.hch-module-card-grid .card-header h3,
.hch-module-card-grid .card-header h4 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.hch-module-card-grid .panel-body,
.hch-module-card-grid .card-body {
    min-width: 0;
    padding: 17px;
}

.hch-module-card-grid .panel-footer,
.hch-module-card-grid .card-footer {
    padding: 12px 17px;
    background: #f8fbff;
    border-top: 1px solid #e2e8f0;
}

.hch-module-card-grid .btn {
    min-height: 38px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 720;
}

.hch-module-card-grid .btn-primary,
.hch-module-card-grid .btn-info {
    color: #fff;
    background: linear-gradient(110deg, #0491f5, #55c4ff);
    border-color: transparent;
}

.hch-module-card-grid img {
    max-width: 100%;
    height: auto;
}

.hch-module-card--usage .row {
    display: block;
    margin: 0;
}

.hch-module-card--usage .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.hch-module-card--usage .panel-body,
.hch-module-card--usage .card-body {
    padding: 17px !important;
}

.hch-module-card--usage canvas,
.hch-module-card--usage svg {
    max-width: 100%;
}

/* The module exposes only current percentages. The two metrics are combined
 * into one honest 0-current-100 Chart.js line visual without fake history. */
.hch-module-usage-chart {
    position: relative;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 9% 0%, rgba(27, 167, 250, .1), transparent 30%),
        radial-gradient(circle at 91% 0%, rgba(16, 185, 129, .08), transparent 28%),
        linear-gradient(180deg, #fbfdff 0%, #f7fbfd 100%);
    border: 1px solid #dcebf2;
    border-radius: 14px;
}

.hch-module-usage-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.hch-module-usage-summary__item {
    position: relative;
    min-width: 0;
    padding: 12px 14px 12px 17px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e0edf3;
    border-radius: 11px;
}

.hch-module-usage-summary__item::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #0491f5;
    content: "";
}

.hch-module-usage-summary__item--bandwidth::before {
    background: #0f9f7a;
}

.hch-module-usage-summary__label,
.hch-module-usage-summary__detail {
    display: block;
}

.hch-module-usage-summary__label {
    margin-bottom: 3px;
    color: #486579;
    font-size: 10px;
    font-weight: 750;
}

.hch-module-usage-summary__value {
    display: block;
    color: #0377d2;
    font-size: 21px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.hch-module-usage-summary__item--bandwidth .hch-module-usage-summary__value {
    color: #0f9f7a;
}

.hch-module-usage-summary__detail {
    margin-top: 5px;
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-module-usage-chart__canvas {
    position: relative;
    width: 100%;
    height: clamp(230px, 28vw, 310px);
    min-height: 230px;
    padding-top: 2px;
}

.hch-module-usage-chart__canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.hch-module-usage-chart__fallback {
    margin: 24px 0 0;
    padding: 13px;
    color: #64748b;
    background: #ffffff;
    border: 1px dashed #bfdbfe;
    border-radius: 10px;
    font-size: 11px;
    text-align: center;
}

@media (max-width: 575.98px) {
    .hch-module-card--usage .panel-body,
    .hch-module-card--usage .card-body {
        padding: 12px !important;
    }

    .hch-module-usage-chart {
        padding: 12px;
        border-radius: 12px;
    }

    .hch-module-usage-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .hch-module-usage-summary__item {
        padding: 10px 12px 10px 15px;
    }

    .hch-module-usage-chart__canvas {
        height: 220px;
        min-height: 220px;
    }
}

/* Normalize module-provided forms (quick email access, billing details and
 * similar cards) so Bootstrap's tiny inline controls do not collapse. */
.hch-module-card-grid .hch-module-card:not(.hch-module-card--usage):not(.hch-module-card--shortcuts) .panel-body,
.hch-module-card-grid .hch-module-card:not(.hch-module-card--usage):not(.hch-module-card--shortcuts) .card-body {
    padding: 18px !important;
}

.hch-module-card-grid .hch-module-card:not(.hch-module-card--usage):not(.hch-module-card--shortcuts) .row {
    margin-right: -8px;
    margin-left: -8px;
}

.hch-module-card-grid .hch-module-card:not(.hch-module-card--usage):not(.hch-module-card--shortcuts) .row > [class*="col-"] {
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
}

/* Module output is not consistent between service modules. Keep the access
 * and billing cards legible even when the module supplies compact Bootstrap
 * columns or input groups. */
.hch-module-card-grid .hch-module-card--extra .panel-body,
.hch-module-card-grid .hch-module-card--extra .card-body {
    min-width: 0;
    padding: 20px !important;
}

.hch-module-card-grid .hch-module-card--extra .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0 !important;
}

.hch-module-card-grid .hch-module-card--extra .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
}

.hch-module-card-grid .hch-module-card--extra .input-group {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.hch-module-card-grid .hch-module-card--extra .input-group .form-control,
.hch-module-card-grid .hch-module-card--extra .input-group input {
    min-width: 0;
    flex: 1 1 auto;
}

.hch-module-card-grid .hch-module-card--extra .input-group-append,
.hch-module-card-grid .hch-module-card--extra .input-group-prepend {
    display: flex;
    flex: 0 0 auto;
}

.hch-module-card-grid .hch-module-card .form-control,
.hch-module-card-grid .hch-module-card input,
.hch-module-card-grid .hch-module-card select {
    width: 100%;
    min-height: 40px;
    max-width: 100%;
    border-color: #cfe1ea;
    border-radius: 9px;
    font-size: 11px;
}

.hch-module-card-grid .hch-module-card .form-group {
    margin-bottom: 10px;
}

.hch-module-card-grid .hch-module-card .btn {
    min-height: 40px;
    white-space: nowrap;
}

.hch-module-card--shortcuts .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.hch-module-card--shortcuts .row > [class*="col-"] {
    width: auto;
    max-width: none;
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: #f8fbff;
    border: 1px solid transparent;
    border-radius: 12px;
    text-align: center;
    transition: border-color var(--hch-transition), background var(--hch-transition), transform var(--hch-transition);
}

.hch-module-card--shortcuts .row > [class*="col-"]:hover {
    background: #f0f9ff;
    border-color: #bae6fd;
    transform: translateY(-1px);
}

.hch-module-card--shortcuts a {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #334155;
    font-size: 10px;
    font-weight: 680;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.hch-module-card--shortcuts a:hover {
    color: #0491f5;
    text-decoration: none;
}

.hch-module-card--shortcuts img {
    max-width: 42px;
    max-height: 42px;
    object-fit: contain;
}

.hch-service-detail .module-client-area[data-hch-module-layout="ready"] > .btn,
.hch-service-detail .module-client-area[data-hch-module-layout="ready"] > a.btn,
.hch-service-detail .hch-module-overview-output[data-hch-module-layout="ready"] > .btn,
.hch-service-detail .hch-module-overview-output[data-hch-module-layout="ready"] > a.btn {
    margin-top: 12px;
}

.hch-service-detail #tabDownloads,
.hch-service-detail #tabAddons,
.hch-service-detail #tabChangepw {
    padding: clamp(20px, 3vw, 30px);
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
}

.hch-service-detail #tabDownloads > h3,
.hch-service-detail #tabAddons > h3,
.hch-service-detail #tabChangepw .card-title {
    color: #0f172a;
    font-size: 20px;
    font-weight: 780;
}

.hch-service-detail #tabDownloads > .row > [class*="col-"],
.hch-service-detail #tabAddons > .row > [class*="col-"] {
    max-width: none;
    flex: 0 0 100%;
    margin: 0;
    padding: 0;
}

.hch-service-detail #tabDownloads > .row > [class*="col-"] {
    margin-top: 12px;
    padding: 18px;
    background: #f8fbff;
    border: 1px solid #e0f2fe;
    border-radius: 13px;
}

.hch-service-detail #tabAddons .card,
.hch-service-detail #tabChangepw > .card {
    border-color: #dbeafe;
    border-radius: 14px;
    box-shadow: none;
}

.hch-service-detail #tabChangepw > .card {
    margin: 0;
    border: 0;
}

.hch-service-detail #tabChangepw > .card > .card-body {
    padding: 0;
}

.hch-service-detail #tabChangepw .form-control {
    min-height: 44px;
    border-color: #cbd5e1;
    border-radius: 10px;
}

@media (max-width: 1023.98px) {
    .hch-service-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hch-service-fact:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 767.98px) {
    .hch-service-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-service-status {
        justify-self: start;
    }

    .hch-service-actions .btn {
        flex: 1 1 calc(50% - 5px);
    }

    .hch-service-detail .product-details-tab-container > .tab-pane > .row {
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }

    .hch-service-detail #tabChangepw .form-group.row {
        gap: 8px;
    }

    .hch-service-detail #tabChangepw [class*="col-xl-"] {
        max-width: none;
        flex: 0 0 100%;
        margin-left: 0;
    }

    .hch-module-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-module-card--summary,
    .hch-module-card--builder,
    .hch-module-card--usage,
    .hch-module-card--shortcuts {
        grid-column: 1;
    }

    .hch-module-card--shortcuts .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hch-module-card--usage .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-module-card-grid .hch-module-card--extra .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 479.98px) {
    .hch-service-identity {
        align-items: flex-start;
    }

    .hch-service-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
        font-size: 18px;
    }

    .hch-service-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-service-fact,
    .hch-service-fact:nth-child(2n),
    .hch-service-fact:nth-child(4n) {
        border-right: 0;
        border-bottom: 1px solid #e0f2fe;
    }

    .hch-service-fact:last-child {
        border-bottom: 0;
    }

    .hch-service-actions .btn {
        flex-basis: 100%;
    }

    .hch-service-detail .hch-service-tab--module {
        padding: 10px;
    }

    .hch-module-card--usage .row,
    .hch-module-card--shortcuts .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hch-module-card--usage .row > [class*="col-"] {
        padding: 10px;
    }

    .hch-module-card-grid .hch-module-card--extra .panel-body,
    .hch-module-card-grid .hch-module-card--extra .card-body {
        padding: 15px !important;
    }
}

/* Keep the account name and its domain suffix visually joined in the quick
 * email form. They form one address, so only the outer corners are rounded. */
.hch-quick-email-card .hch-quick-email__address,
.hch-quick-email-card .input-group {
    min-width: 0;
    display: inline-flex;
    align-items: stretch;
    gap: 0 !important;
    vertical-align: top;
}

.hch-quick-email-card .hch-quick-email__address > :first-child,
.hch-quick-email-card .input-group > :first-child {
    min-width: 0;
    margin: 0 !important;
    border-right: 0 !important;
    border-radius: 10px 0 0 10px !important;
}

.hch-quick-email-card .hch-quick-email__address > :nth-child(2),
.hch-quick-email-card .input-group > :nth-child(2) {
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding-right: 12px;
    padding-left: 12px;
    color: #36596f;
    background: #edf3f7 !important;
    border-left: 1px solid #cbdbe4 !important;
    border-radius: 0 10px 10px 0 !important;
    white-space: nowrap;
}

.hch-quick-email-card .hch-quick-email__address > input:nth-child(2),
.hch-quick-email-card .input-group > input:nth-child(2),
.hch-quick-email-card .input-group > select:nth-child(2) {
    width: auto !important;
    flex: 0 1 auto;
    color: #36596f !important;
}

.hch-quick-email-card .hch-quick-email__address:focus-within,
.hch-quick-email-card .input-group:focus-within {
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, .12);
}

@media (max-width: 575.98px) {
    .hch-quick-email-card .hch-quick-email__address,
    .hch-quick-email-card .input-group {
        width: 100%;
    }
}

/* Dashboard reference-aligned shell and components */

.hch-dashboard-topbar-heading {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.hch-dashboard-topbar-heading strong {
    color: #0f2740;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.hch-dashboard-topbar-heading span {
    color: #7890a5;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hch-dashboard-page {
    --hch-sidebar-width: 280px;
    --hch-dashboard-deep: #0377d2;
    --hch-dashboard-blue: #0491f5;
    --hch-dashboard-sky: #55c4ff;
    --hch-dashboard-canvas: #eef9ff;
}

.hch-dashboard-page .hch-sidebar__header {
    padding-right: 20px;
    padding-left: 20px;
}

.hch-dashboard-page .hch-brand__logo {
    width: auto;
    max-width: 148px;
    max-height: 44px;
    object-fit: contain;
}

.hch-dashboard-page .hch-sidebar__nav {
    padding: 16px 13px 22px;
}

.hch-dashboard-page .hch-nav-section__label {
    margin-right: 11px;
    margin-left: 11px;
    color: #8ca0b3;
    font-size: 9px;
}

.hch-dashboard-page .hch-sidebar__item,
.hch-dashboard-page .hch-sidebar__disclosure {
    min-height: 46px;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.hch-dashboard-page .hch-sidebar__icon {
    width: 20px;
    height: 20px;
}

.hch-dashboard-page .hch-sidebar__icon svg {
    stroke-width: 1.7;
}

.hch-dashboard-page .hch-sidebar__item.is-active,
.hch-dashboard-page .hch-sidebar__item.active,
.hch-dashboard-page .hch-sidebar__disclosure.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--hch-dashboard-deep), var(--hch-dashboard-sky));
    box-shadow: 0 10px 22px rgba(4, 145, 245, 0.22);
}

.hch-dashboard-page .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-dashboard-page .hch-sidebar__item.active .hch-sidebar__icon,
.hch-dashboard-page .hch-sidebar__disclosure.is-active .hch-sidebar__icon,
.hch-dashboard-page .hch-sidebar__disclosure.is-active .hch-sidebar__chevron {
    color: #ffffff;
}

.hch-dashboard-page .hch-nav-submenu {
    margin-left: 27px;
    border-left-color: #cce9f7;
}

.hch-dashboard-page .hch-topbar {
    padding-right: 24px;
    padding-left: 24px;
    border-bottom-color: #e2edf3;
}

.hch-dashboard-page .hch-topbar .hch-icon-button,
.hch-dashboard-page .hch-account-trigger {
    border-color: #deebf2;
    border-radius: 13px;
}

.hch-dashboard-page .hch-search .hch-field {
    background: #f7fbfd;
    border-color: #deebf2;
    border-radius: 13px;
}

.hch-dashboard-page .hch-main {
    max-width: none;
    padding: 26px clamp(20px, 2.6vw, 38px) 40px;
    background:
        radial-gradient(circle at 78% 8%, rgba(85, 196, 255, 0.12), transparent 30%),
        linear-gradient(145deg, #f2f9fd 0%, var(--hch-dashboard-canvas) 100%);
    border-radius: 28px 0 0;
}

.hch-dashboard-surface {
    display: grid;
    gap: 16px;
}

.hch-dashboard-page .hch-dashboard-header {
    align-items: center;
    margin-bottom: 2px;
}

.hch-dashboard-page .hch-dashboard-header .hch-eyebrow {
    margin-bottom: 5px;
    color: var(--hch-dashboard-blue);
}

.hch-dashboard-page .hch-dashboard-header .hch-page-title {
    color: #0c2940;
    font-size: clamp(24px, 2vw, 32px);
}

.hch-dashboard-page .hch-dashboard-header .hch-page-subtitle {
    margin-top: 6px;
    color: #698296;
    font-size: 12px;
}

.hch-dashboard-page .hch-button {
    background: linear-gradient(135deg, var(--hch-dashboard-deep), var(--hch-dashboard-blue));
    border-color: var(--hch-dashboard-blue);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(4, 145, 245, 0.14);
}

.hch-dashboard-page .hch-button:hover {
    background: linear-gradient(135deg, #0167b7, #0274c7);
    border-color: #0274c7;
}

.hch-dashboard-page .hch-button--secondary {
    color: #17415e;
    background: #ffffff;
    border-color: #cfe3ee;
    box-shadow: none;
}

.hch-dashboard-page .hch-button--secondary:hover {
    color: #0274c7;
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.hch-dashboard-stat-grid {
    gap: 14px;
    margin: 0;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 154px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 67, 96, 0.07);
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card:hover,
.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card:focus {
    border-color: #7dd3fc;
    box-shadow: 0 16px 34px rgba(4, 145, 245, 0.14);
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__icon {
    position: absolute;
    top: 50%;
    right: -6px;
    width: clamp(88px, 6.4vw, 112px);
    height: clamp(88px, 6.4vw, 112px);
    padding: 0;
    color: #0b6f9b;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: .09;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 180ms ease, transform 180ms ease;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__top {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: .8;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card--warning .hch-stat-card__icon {
    right: -6px;
    width: clamp(88px, 6.4vw, 112px);
    height: clamp(88px, 6.4vw, 112px);
    opacity: .09;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card--warning .hch-svg-icon--invoice-receipt {
    fill: currentColor;
    stroke: none;
    stroke-width: 0;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card--warning:hover .hch-stat-card__icon,
.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card--warning:focus .hch-stat-card__icon {
    opacity: .115;
    transform: translate(-2px, -50%);
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card:hover .hch-stat-card__icon,
.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card:focus .hch-stat-card__icon {
    opacity: .115;
    transform: translate(-2px, -50%);
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__label,
.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__value,
.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__meta {
    position: relative;
    z-index: 1;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card--suspended:hover,
.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card--suspended:focus {
    border-color: #fdba74;
    box-shadow: 0 16px 34px rgba(194, 65, 12, 0.12);
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__label {
    margin-top: 12px;
    color: #5f778b;
    font-size: 9px;
    letter-spacing: 0.09em;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__value {
    margin-top: 6px;
    color: #0d2940;
    font-size: 25px;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__value--currency {
    overflow: hidden;
    font-size: clamp(18px, 1.7vw, 24px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__meta {
    padding-top: 10px;
    color: #8296a7;
    border-top-color: #e4eef3;
    font-size: 9px;
}

.hch-dashboard-work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 16px;
    align-items: stretch;
}

.hch-dashboard-page .hch-dashboard-feature-card,
.hch-dashboard-page .hch-dashboard-activity-card,
.hch-dashboard-page .hch-dashboard-domain-card,
.hch-dashboard-page .hch-dashboard-news-card {
    margin: 0;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(15, 67, 96, 0.075);
}

.hch-dashboard-discovery-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .72fr);
    gap: 16px;
    align-items: stretch;
}

.hch-dashboard-page .hch-dashboard-domain-card,
.hch-dashboard-page .hch-dashboard-news-card {
    min-width: 0;
    overflow: hidden;
}

.hch-dashboard-domain-card__header-icon .hch-svg-icon,
.hch-dashboard-domain-form__icon .hch-svg-icon,
.hch-dashboard-domain-form button .hch-svg-icon,
.hch-dashboard-domain-card__meta-icon .hch-svg-icon,
.hch-dashboard-news-item__icon .hch-svg-icon,
.hch-dashboard-news-item__arrow .hch-svg-icon,
.hch-dashboard-news-empty .hch-svg-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hch-dashboard-domain-card__header-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    color: #0491f5;
    background: linear-gradient(135deg, #e2f6ff, #eefbff);
    border: 1px solid #c9eaf7;
    border-radius: 13px;
}

.hch-dashboard-domain-card__header-icon .hch-svg-icon {
    width: 21px;
    height: 21px;
}

.hch-dashboard-domain-card__body {
    position: relative;
    min-height: 254px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px;
    overflow: hidden;
    background: linear-gradient(112deg, #f7fcff 0%, #eaf8ff 55%, #dff4ff 100%);
}

.hch-dashboard-domain-card__body::after {
    position: absolute;
    right: -45px;
    bottom: -74px;
    width: 210px;
    height: 210px;
    border: 28px solid rgba(4, 145, 245, .055);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.hch-dashboard-domain-card__copy,
.hch-dashboard-domain-form,
.hch-dashboard-domain-card__meta {
    position: relative;
    z-index: 1;
}

.hch-dashboard-domain-card__copy {
    max-width: 720px;
}

.hch-dashboard-domain-card__eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: #0787c9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hch-dashboard-domain-card__copy h3 {
    max-width: 660px;
    margin: 0;
    color: #0d2e45;
    font-size: clamp(20px, 2vw, 29px);
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: -.035em;
}

.hch-dashboard-domain-card__copy p {
    max-width: 690px;
    margin: 9px 0 0;
    color: #658096;
    font-size: 11px;
    line-height: 1.6;
}

.hch-dashboard-domain-form {
    width: min(100%, 760px);
    min-width: 0;
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 7px;
    padding-left: 14px;
    background: #ffffff;
    border: 1px solid #c8e3ef;
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(16, 89, 127, .09);
    box-sizing: border-box;
}

.hch-dashboard-domain-form:focus-within {
    border-color: #42b8ee;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, .1), 0 14px 28px rgba(16, 89, 127, .1);
}

.hch-dashboard-domain-form.is-invalid,
.hch-dashboard-domain-form.is-invalid:focus-within {
    border-color: #e86c72;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .1), 0 14px 28px rgba(127, 16, 27, .08);
}

.hch-dashboard-domain-form__icon {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    color: #0491f5;
}

.hch-dashboard-domain-form__icon .hch-svg-icon {
    width: 18px;
    height: 18px;
}

.hch-dashboard-domain-form input {
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 3px;
    color: #173d55;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    font-size: 13px;
    box-sizing: border-box;
}

.hch-dashboard-domain-form input::placeholder {
    color: #93a6b5;
    opacity: 1;
}

.hch-dashboard-domain-form button {
    min-width: 142px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 10px 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #078ce5 0%, #24b5f2 100%);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(4, 145, 245, .22);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.hch-dashboard-domain-form button:hover,
.hch-dashboard-domain-form button:focus-visible {
    color: #ffffff;
    filter: saturate(1.08);
    transform: translateY(-1px);
    box-shadow: 0 11px 23px rgba(4, 145, 245, .28);
}

.hch-dashboard-domain-form button .hch-svg-icon {
    width: 15px;
    height: 15px;
}

.hch-dashboard-domain-form__feedback {
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    min-height: 0;
    margin: 6px 0 0;
    color: #c83e49;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

.hch-dashboard-domain-form__feedback:empty {
    display: none;
    margin: 0;
}

.hch-dashboard-domain-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 13px;
    color: #5c788d;
    font-size: 9px;
    font-weight: 700;
}

.hch-dashboard-domain-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hch-dashboard-domain-card__meta-icon {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    color: #0f9f7a;
    background: rgba(16, 185, 129, .09);
    border: 1px solid rgba(16, 185, 129, .15);
    border-radius: 7px;
}

.hch-dashboard-domain-card__meta-icon .hch-svg-icon {
    width: 12px;
    height: 12px;
}

.hch-dashboard-news-card {
    display: flex;
    flex-direction: column;
}

.hch-dashboard-news-card > .hch-card__header {
    flex: 0 0 auto;
}

.hch-dashboard-news-card > .hch-card__header .hch-button {
    flex: 0 0 auto;
}

.hch-dashboard-news-list {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px;
}

.hch-dashboard-news-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 11px;
    color: #24475f;
    background: #f8fbfd;
    border: 1px solid #e1edf3;
    border-radius: 12px;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.hch-dashboard-news-item:hover,
.hch-dashboard-news-item:focus-visible {
    color: #087cc0;
    background: #f0faff;
    border-color: #a9dff2;
    text-decoration: none;
    transform: translateY(-1px);
}

.hch-dashboard-news-item__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #0491f5;
    background: #e4f6fd;
    border-radius: 10px;
}

.hch-dashboard-news-item__icon .hch-svg-icon {
    width: 16px;
    height: 16px;
}

.hch-dashboard-news-item__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.hch-dashboard-news-item__copy strong {
    min-width: 0;
    overflow: hidden;
    color: #24475f;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-dashboard-news-item__copy small {
    color: #8397a7;
    font-size: 8px;
    font-weight: 650;
}

.hch-dashboard-news-item__arrow {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #8aa4b5;
}

.hch-dashboard-news-item__arrow .hch-svg-icon {
    width: 14px;
    height: 14px;
}

.hch-dashboard-news-empty {
    min-height: 190px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 24px;
    color: #70889a;
    background: #f8fbfd;
    border: 1px dashed #cfe3ed;
    border-radius: 13px;
    text-align: center;
}

.hch-dashboard-news-empty > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #0491f5;
    background: #e4f6fd;
    border-radius: 12px;
}

.hch-dashboard-news-empty .hch-svg-icon {
    width: 18px;
    height: 18px;
}

.hch-dashboard-news-empty strong {
    color: #24475f;
    font-size: 11px;
}

.hch-dashboard-news-empty p {
    max-width: 240px;
    margin: 0;
    font-size: 9px;
    line-height: 1.5;
}

.hch-dashboard-page .hch-card__header {
    min-height: 70px;
    padding: 16px 18px;
    border-bottom-color: #e3eef4;
}

.hch-card__kicker {
    margin: 0 0 4px;
    color: #0491f5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hch-dashboard-page .hch-card__title {
    color: #102a40;
    font-size: 15px;
    font-weight: 800;
}

.hch-dashboard-page .hch-card__subtitle {
    color: #7a90a2;
    font-size: 10px;
}

.hch-dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
}

.hch-dashboard-shortcut {
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 10px;
    padding: 11px;
    color: #24435b;
    background: #f8fbfd;
    border: 1px solid #e3eef4;
    border-radius: 14px;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.hch-dashboard-shortcut:hover,
.hch-dashboard-shortcut:focus {
    color: #0274c7;
    background: #f0f9ff;
    border-color: #7dd3fc;
    box-shadow: 0 9px 20px rgba(4, 145, 245, 0.1);
    text-decoration: none;
    transform: translateY(-1px);
}

.hch-dashboard-shortcut__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 9px;
    color: #0491f5;
    background: #e0f2fe;
    border-radius: 11px;
}

.hch-dashboard-shortcut__icon svg,
.hch-dashboard-shortcut__arrow svg,
.hch-dashboard-balance-banner__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.hch-dashboard-shortcut > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hch-dashboard-shortcut strong,
.hch-dashboard-shortcut small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-dashboard-shortcut strong {
    color: #18364d;
    font-size: 10px;
    font-weight: 780;
}

.hch-dashboard-shortcut small {
    color: #8296a7;
    font-size: 8px;
}

.hch-dashboard-shortcut__arrow {
    width: 15px;
    height: 15px;
    color: #9bb0bf;
}

/* Dashboard account timeline: smooth filled Chart.js series. */
.hch-dashboard-page .hch-dashboard-chart-card {
    min-width: 0;
    overflow: hidden;
}

.hch-dashboard-page .hch-dashboard-chart-card > .hch-card__header {
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #f7fcfe);
}

.hch-dashboard-chart-card__period {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 29px;
    padding: 6px 10px;
    color: #087aa8;
    background: #e7f7fd;
    border: 1px solid #c8e9f5;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}

.hch-dashboard-chart-card__body {
    display: grid;
    gap: 12px;
    padding: 12px 16px 16px;
}

.hch-dashboard-chart-card__canvas {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 240px;
}

.hch-dashboard-chart-card__canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.hch-dashboard-chart-card__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    color: #7890a3;
    background: #f8fbfd;
    border: 1px dashed #cfe3ed;
    border-radius: 13px;
    font-size: 10px;
    text-align: center;
}

.hch-dashboard-chart-card__fallback[hidden] {
    display: none;
}

.hch-dashboard-chart-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.hch-dashboard-chart-summary__item {
    min-width: 0;
    min-height: 43px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    color: #274b62;
    background: #f8fbfd;
    border: 1px solid #e0edf3;
    border-radius: 11px;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.hch-dashboard-chart-summary__item:hover,
.hch-dashboard-chart-summary__item:focus-visible {
    color: #0377d2;
    background: #f0f9ff;
    border-color: #9bdcf3;
    text-decoration: none;
}

.hch-dashboard-chart-summary__item > span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, .1);
}

.hch-dashboard-chart-summary__item--active > span {
    background: #0491f5;
}

.hch-dashboard-chart-summary__item--suspended > span {
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .1);
}

.hch-dashboard-chart-summary__item--domains > span {
    background: #0f9f7a;
    box-shadow: 0 0 0 3px rgba(15, 159, 122, .1);
}

.hch-dashboard-chart-summary__item small {
    min-width: 0;
    overflow: hidden;
    color: #668196;
    font-size: 8px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-dashboard-chart-summary__item strong {
    color: #173d55;
    font-size: 13px;
    font-weight: 850;
}

.hch-dashboard-page .hch-dashboard-account-card {
    position: relative;
    top: auto;
}

.hch-dashboard-page .hch-dashboard-account-card .hch-card__body {
    padding: 16px;
}

.hch-dashboard-balance-banner {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    color: #ffffff;
    background:
        radial-gradient(circle at 88% 15%, rgba(125, 211, 252, 0.42), transparent 31%),
        linear-gradient(135deg, #0377d2, #0491f5 60%, #1ba7fa);
    border-radius: 16px;
    box-shadow: 0 13px 26px rgba(4, 145, 245, 0.2);
}

.hch-dashboard-balance-banner__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 11px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 13px;
}

.hch-dashboard-balance-banner > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hch-dashboard-balance-banner small {
    color: rgba(255, 255, 255, 0.76);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hch-dashboard-balance-banner strong {
    overflow: hidden;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-dashboard-balance-banner a {
    padding: 8px 10px;
    color: #0377d2;
    background: #ffffff;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.hch-dashboard-page .hch-dashboard-account-identity {
    margin: 14px 0 12px;
    padding: 0;
    border: 0;
}

.hch-dashboard-page .hch-dashboard-account-identity .hch-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    background: linear-gradient(135deg, #026dbb, #55c4ff);
}

.hch-dashboard-profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.hch-dashboard-profile-field {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    background: #f8fbfd;
    border: 1px solid #e3eef4;
    border-radius: 12px;
}

.hch-dashboard-profile-field > span {
    color: #8296a7;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hch-dashboard-profile-field > strong {
    overflow: hidden;
    color: #24435b;
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-dashboard-page .hch-dashboard-activity-card > .hch-card__header {
    background: rgba(255, 255, 255, 0.9);
}

.hch-dashboard-table-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 8px;
    gap: 14px;
    align-items: start;
    margin: 0;
    padding: 14px;
    background: #f5fafc;
}

.hch-dashboard-table-grid .hch-whmcs-panel {
    min-width: 0;
    align-self: start;
    overflow: hidden;
    margin: 0;
    background: #ffffff;
    border: 1px solid #e0edf3;
    border-radius: 15px;
    box-shadow: none;
}

/* Dashboard statistic cards stay fully clickable without decorative arrows. */
.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__arrow {
    display: none !important;
}

.hch-dashboard-table-grid .hch-whmcs-panel--wide {
    grid-column: 1 / -1;
}

.hch-dashboard-table-grid .card-header {
    min-height: 54px;
    padding: 13px 15px;
    background: #ffffff;
    border-bottom-color: #e3eef4;
}

.hch-dashboard-table-grid .card-title {
    color: #15364e;
    font-size: 11px;
    font-weight: 800;
}

.hch-dashboard-table-grid .card-title > i:not(.float-right) {
    margin-right: 5px;
    color: #0491f5;
}

.hch-dashboard-table-grid .card-title .btn {
    padding: 5px 8px;
    color: #0274c7;
    background: #e0f2fe !important;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 750;
}

.hch-dashboard-table-grid .card-body {
    min-width: 0;
    padding: 14px 15px;
    color: #466174;
    font-size: 10px;
}

.hch-dashboard-table-grid .list-group-item {
    min-width: 0;
    padding: 11px 15px;
    color: #496579;
    background: #ffffff;
    border-color: #edf4f7;
    font-size: 9px;
    overflow-wrap: anywhere;
}

.hch-dashboard-table-grid a.list-group-item:hover {
    color: #0274c7;
    background: #f0f9ff;
}

.hch-dashboard-table-grid .card-footer {
    min-height: 0;
    padding: 9px 15px;
    color: #7890a3;
    background: #f8fbfd;
    border-top-color: #e3eef4;
    font-size: 9px;
}

.hch-dashboard-table-grid .card-footer:empty {
    display: none;
}

.hch-dashboard-table-grid .table-responsive,
.hch-dashboard-table-grid .dataTables_wrapper,
.hch-dashboard-table-grid .table-list {
    max-width: 100%;
    overflow-x: auto;
}

.hch-dashboard-table-grid table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 9px;
}

.hch-dashboard-table-grid table th,
.hch-dashboard-table-grid table td {
    padding: 10px 11px;
    border-bottom: 1px solid #edf4f7;
    vertical-align: middle;
}

.hch-dashboard-table-grid table th {
    color: #71899b;
    background: #f8fbfd;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hch-dashboard-table-grid table tbody tr:hover {
    background: #f0f9ff;
}

.hch-dashboard-table-grid .form-control,
.hch-dashboard-table-grid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.hch-dashboard-table-grid select,
.hch-dashboard-table-grid textarea {
    min-height: 38px;
    border-color: #d7e7ef;
    border-radius: 10px;
    font-size: 10px;
}

@media (min-width: 1024px) {
    body.hch-dashboard-page {
        box-sizing: border-box;
        min-height: 100vh;
        padding: 0;
        background: #edf7fc !important;
    }

    .hch-dashboard-page .hch-app {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        overflow: visible;
        background: #ffffff;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .hch-dashboard-page .hch-sidebar {
        top: 0;
        height: 100vh;
        min-height: 0;
    }

    .hch-dashboard-page .hch-topbar {
        top: 0;
    }
}

@media (max-width: 1199.98px) {
    .hch-dashboard-work-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-dashboard-discovery-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
    }
}

@media (max-width: 991.98px) {
    .hch-dashboard-discovery-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1023.98px) {
    .hch-dashboard-page {
        --hch-sidebar-width: min(88vw, 300px);
    }

    .hch-dashboard-page .hch-app {
        border-radius: 0;
    }

    .hch-dashboard-page .hch-sidebar {
        top: 0;
        height: 100vh;
        height: 100dvh;
    }

    .hch-dashboard-page .hch-topbar {
        top: 0;
    }

    .hch-dashboard-page .hch-main {
        border-radius: 24px 24px 0 0;
    }
}

@media (max-width: 767.98px) {
    .hch-dashboard-topbar-heading {
        flex: 1 1 auto;
    }

    .hch-dashboard-topbar-heading span {
        display: none;
    }

    .hch-dashboard-page .hch-topbar {
        padding-right: 12px;
        padding-left: 12px;
    }

    .hch-dashboard-page .hch-main {
        padding: 20px 13px 32px;
        border-radius: 20px 20px 0 0;
    }

    .hch-dashboard-surface {
        gap: 12px;
    }

    .hch-dashboard-page .hch-dashboard-header {
        gap: 13px;
    }

    .hch-dashboard-page .hch-dashboard-header .hch-page-title {
        font-size: 23px;
    }

    .hch-dashboard-page .hch-dashboard-header .hch-page-subtitle {
        font-size: 11px;
    }

    .hch-dashboard-page .hch-dashboard-header .hch-page-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .hch-dashboard-page .hch-dashboard-header .hch-button {
        min-width: 0;
        padding-right: 9px;
        padding-left: 9px;
        font-size: 10px;
    }

    .hch-dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card {
        min-height: 142px;
        padding: 14px;
    }

    .hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__icon {
        right: -6px;
        width: clamp(68px, 22vw, 86px);
        height: clamp(68px, 22vw, 86px);
        opacity: .085;
    }

    .hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card--warning .hch-stat-card__icon {
        right: -6px;
        width: clamp(68px, 22vw, 86px);
        height: clamp(68px, 22vw, 86px);
        opacity: .085;
    }

    .hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__value {
        font-size: 22px;
    }

    .hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__value--currency {
        font-size: 17px;
    }

    .hch-dashboard-shortcuts,
    .hch-dashboard-profile-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-dashboard-domain-card__body {
        min-height: 0;
        padding: 20px 16px;
    }

    .hch-dashboard-domain-card__copy h3 {
        font-size: 21px;
    }

    .hch-dashboard-domain-form {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
        padding-left: 12px;
    }

    .hch-dashboard-domain-form button {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .hch-dashboard-domain-card__meta {
        gap: 8px 14px;
    }

    .hch-dashboard-news-list {
        padding: 10px;
    }

    .hch-dashboard-news-item {
        grid-template-columns: 32px minmax(0, 1fr) 16px;
        gap: 8px;
        padding: 10px;
    }

    .hch-dashboard-news-item__icon {
        width: 32px;
        height: 32px;
    }

    .hch-dashboard-chart-card__canvas {
        height: 220px;
    }

    .hch-dashboard-chart-card__body {
        padding: 10px 12px 13px;
    }

    .hch-dashboard-chart-summary {
        gap: 6px;
    }

    .hch-dashboard-chart-summary__item {
        grid-template-columns: 7px minmax(0, 1fr);
        gap: 6px;
        padding: 8px;
    }

    .hch-dashboard-chart-summary__item > strong {
        grid-column: 2;
        font-size: 12px;
    }

    .hch-dashboard-table-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    .hch-dashboard-table-grid .hch-whmcs-panel--wide {
        grid-column: 1;
    }

    .hch-dashboard-page .hch-card__header {
        min-height: 0;
        gap: 10px;
    }

    .hch-dashboard-page .hch-dashboard-activity-card > .hch-card__header .hch-button {
        width: auto;
    }

    .hch-dashboard-balance-banner {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .hch-dashboard-balance-banner__icon {
        width: 38px;
        height: 38px;
    }

    .hch-dashboard-balance-banner a {
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (max-width: 359.98px) {
    .hch-dashboard-stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__icon {
        right: -4px;
        width: 78px;
        height: 78px;
    }

    .hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card--warning .hch-stat-card__icon {
        right: -4px;
        width: 78px;
        height: 78px;
    }

    .hch-dashboard-chart-card__period {
        display: none;
    }

    .hch-dashboard-chart-card__canvas {
        height: 200px;
    }
}

/* Unified full-screen client shell */

body.hch-app-page {
    --hch-sidebar-width: 280px;
    margin: 0;
    padding: 0 !important;
    background: #edf7fc !important;
}

.hch-app-page .hch-app {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    overflow: visible;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.hch-app-page .hch-shell {
    min-height: 100vh;
    background: #edf7fc;
}

.hch-app-page .hch-sidebar {
    top: 0;
    height: 100vh;
    min-height: 0;
    background: #ffffff;
    border-right: 0;
    box-shadow: none;
}

.hch-app-page .hch-sidebar__header {
    padding-right: 20px;
    padding-left: 20px;
    background: #ffffff;
    border-bottom: 0;
}

.hch-app-page .hch-brand__logo {
    width: auto;
    max-width: 148px;
    max-height: 44px;
    object-fit: contain;
}

.hch-app-page .hch-sidebar__nav {
    padding: 14px 13px 22px;
}

.hch-app-page .hch-nav-section__label {
    margin-right: 11px;
    margin-left: 11px;
    color: #8ca0b3;
    font-size: 9px;
}

.hch-app-page .hch-sidebar__item,
.hch-app-page .hch-sidebar__disclosure {
    min-height: 46px;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.hch-app-page .hch-sidebar__icon {
    width: 20px;
    height: 20px;
}

.hch-app-page .hch-sidebar__item.is-active,
.hch-app-page .hch-sidebar__item.active,
.hch-app-page .hch-sidebar__disclosure.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, #0377d2, #1ba7fa);
    box-shadow: 0 9px 20px rgba(4, 145, 245, 0.2);
}

.hch-app-page .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-app-page .hch-sidebar__item.active .hch-sidebar__icon,
.hch-app-page .hch-sidebar__disclosure.is-active .hch-sidebar__icon,
.hch-app-page .hch-sidebar__disclosure.is-active .hch-sidebar__chevron {
    color: #ffffff;
}

.hch-app-page .hch-nav-submenu {
    margin: 4px 0 6px 26px;
    padding: 2px 0 2px 7px;
    border-left: 0;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item {
    min-height: 41px;
    padding: 8px 10px;
    border-radius: 10px;
}

.hch-app-page .hch-sidebar .hch-nav-divider {
    display: none;
}

.hch-app-page .hch-topbar {
    top: 0;
    z-index: 100;
    padding-right: 24px;
    padding-left: 24px;
    background: #ffffff;
    border-bottom: 0;
    box-shadow: 0 1px 0 #e3eef4, 0 8px 24px rgba(15, 67, 96, 0.035);
    backdrop-filter: none;
}

.hch-app-page .hch-search .hch-field {
    background: #f7fbfd;
    border-color: #dceaf1;
    border-radius: 13px;
}

.hch-app-page .hch-topbar .hch-icon-button,
.hch-app-page .hch-account-trigger {
    background: #ffffff;
    border-color: #dceaf1;
    border-radius: 13px;
}

.hch-app-page .hch-main {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - var(--hch-topbar-height));
    margin: 0;
    padding: 28px clamp(20px, 2.7vw, 42px) 44px;
    background:
        radial-gradient(circle at 82% 5%, rgba(85, 196, 255, 0.12), transparent 31%),
        linear-gradient(145deg, #f3f9fc 0%, #eaf6fb 100%);
    border-radius: 26px 0 0;
}

.hch-app-page .hch-app-notices {
    position: relative;
    z-index: 20;
    background: #ffffff;
}

.hch-app-page .hch-app-footer {
    margin: 0;
    background: #edf7fc;
    border-top: 1px solid #dceaf1;
}

.hch-app-page .primary-content > .card,
.hch-app-page .primary-content > .panel,
.hch-app-page .primary-content .card:not(.hch-stat-card):not(.hch-action-card) {
    border-color: #dceaf1;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 67, 96, 0.06);
}

.hch-app-page .primary-content .card-header,
.hch-app-page .primary-content .panel-heading {
    background: #ffffff;
    border-bottom-color: #e3eef4;
}

.hch-app-page .primary-content .form-control,
.hch-app-page .primary-content input[type="text"],
.hch-app-page .primary-content input[type="email"],
.hch-app-page .primary-content input[type="password"],
.hch-app-page .primary-content input[type="search"],
.hch-app-page .primary-content input[type="tel"],
.hch-app-page .primary-content input[type="number"],
.hch-app-page .primary-content select,
.hch-app-page .primary-content textarea {
    border-color: #cfdee7;
    border-radius: 11px;
    box-shadow: none;
}

.hch-app-page .primary-content .form-control:focus,
.hch-app-page .primary-content input[type="text"]:focus,
.hch-app-page .primary-content input[type="email"]:focus,
.hch-app-page .primary-content input[type="password"]:focus,
.hch-app-page .primary-content input[type="search"]:focus,
.hch-app-page .primary-content input[type="tel"]:focus,
.hch-app-page .primary-content input[type="number"]:focus,
.hch-app-page .primary-content select:focus,
.hch-app-page .primary-content textarea:focus {
    border-color: #1ba7fa;
    box-shadow: 0 0 0 3px rgba(27, 167, 250, 0.14);
}

.hch-app-page .primary-content .btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #0377d2, #1ba7fa);
    border-color: #0491f5;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(4, 145, 245, 0.14);
}

.hch-app-page .primary-content .btn-primary:hover,
.hch-app-page .primary-content .btn-primary:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #0167b7, #0274c7);
    border-color: #0274c7;
}

.hch-app-page .primary-content .btn-default,
.hch-app-page .primary-content .btn-secondary {
    color: #17415e;
    background: #ffffff;
    border-color: #cfdee7;
    border-radius: 10px;
}

.hch-app-page .primary-content .btn-default:hover,
.hch-app-page .primary-content .btn-secondary:hover {
    color: #0274c7;
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.hch-app-page .primary-content .table,
.hch-app-page .primary-content table.dataTable {
    background: #ffffff;
}

.hch-app-page .primary-content .table thead th,
.hch-app-page .primary-content table.dataTable thead th {
    color: #668096;
    background: #f5fafc;
    border-bottom-color: #dceaf1;
}

/* Login and registration use the same dark-sky design system. */

.hch-auth-page,
.hch-auth-page #main-body,
.hch-auth-main,
.hch-registration-page,
.hch-registration-page #main-body,
.hch-register-main {
    background: #edf7fc;
}

.hch-auth-shell {
    min-height: 100vh;
    grid-template-columns: minmax(340px, 0.8fr) minmax(500px, 1.2fr);
    background: #edf7fc;
}

.hch-auth-shell__intro {
    padding: 36px clamp(30px, 4.5vw, 68px);
    background:
        radial-gradient(circle at 18% 16%, rgba(125, 211, 252, 0.38), transparent 31%),
        radial-gradient(circle at 88% 86%, rgba(85, 196, 255, 0.28), transparent 34%),
        linear-gradient(145deg, #026dbb 0%, #0274c7 54%, #1ba7fa 100%);
}

.hch-auth-shell__intro .hch-brand__logo {
    max-width: 136px;
    max-height: 42px;
}

.hch-auth-shell__intro .hch-eyebrow,
.hch-auth-intro__copy p,
.hch-auth-intro__footer {
    color: rgba(255, 255, 255, 0.78);
}

.hch-auth-shell__main {
    padding: 42px clamp(24px, 5vw, 76px);
    background:
        radial-gradient(circle at 85% 10%, rgba(85, 196, 255, 0.18), transparent 28%),
        linear-gradient(145deg, #f5fbfe 0%, #eaf6fb 100%);
}

.hch-auth-card {
    background: #ffffff;
    border: 1px solid #d8e9f2;
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(3, 105, 161, 0.12);
}

.hch-auth-card .hch-eyebrow,
.hch-auth-input-icon,
.hch-auth-card__footer a,
.hch-auth-label-row .hch-link {
    color: #0491f5;
}

.hch-auth-card .hch-field {
    min-height: 47px;
    background: #fafdff;
    border-color: #cfdee7;
    border-radius: 11px;
}

.hch-auth-form .hch-button {
    background: linear-gradient(135deg, #0377d2, #1ba7fa);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 11px 24px rgba(4, 145, 245, 0.22);
}

#registration.hch-register-v2 {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 12%, rgba(85, 196, 255, 0.22), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(27, 167, 250, 0.16), transparent 30%),
        linear-gradient(145deg, #f5fbfe 0%, #eaf6fb 100%);
}

.hch-register-topbar {
    width: 100%;
    min-height: 72px;
    padding: 13px clamp(20px, 4vw, 56px);
    background: #ffffff;
    border-bottom: 1px solid #dceaf1;
}

.hch-register-topbar__brand .hch-brand__logo {
    max-width: 132px;
    max-height: 40px;
}

.hch-register-v2 .hch-register-content {
    padding: 30px 20px 64px;
}

.hch-register-hero h1 {
    color: #0c2940;
}

.hch-register-hero > p:not(.hch-eyebrow) {
    color: #698296;
}

.hch-register-v2 .hch-register-card {
    width: min(100%, 1040px);
    background: #ffffff;
    border: 1px solid #d8e9f2;
    border-radius: 22px;
    box-shadow: 0 22px 65px rgba(3, 105, 161, 0.11);
}

.hch-register-v2 .hch-register-section {
    border-top-color: #e0edf3;
}

#registration.hch-register-v2 .hch-register-form .field,
#registration.hch-register-v2 .hch-register-form .form-control,
#registration.hch-register-v2 .hch-register-form select,
#registration.hch-register-v2 .hch-register-form textarea {
    background: #fafdff;
    border-color: #cfdee7;
}

.hch-register-v2 .hch-register-consent {
    background: #f0f9ff;
    border-color: #bae6fd;
}

#registration.hch-register-v2 .hch-register-submit {
    background: linear-gradient(135deg, #0377d2, #1ba7fa);
    box-shadow: 0 12px 28px rgba(4, 145, 245, 0.22);
}

@media (max-width: 1023.98px) {
    body.hch-app-page {
        --hch-sidebar-width: min(88vw, 300px);
    }

    .hch-app-page .hch-sidebar {
        height: 100vh;
        height: 100dvh;
        box-shadow: 18px 0 44px rgba(15, 67, 96, 0.16);
    }

    .hch-app-page .hch-main {
        border-radius: 22px 22px 0 0;
    }
}

@media (max-width: 767.98px) {
    .hch-app-page .hch-topbar {
        padding-right: 12px;
        padding-left: 12px;
    }

    .hch-app-page .hch-main {
        padding: 22px 13px 34px;
        border-radius: 18px 18px 0 0;
    }

    .hch-auth-shell__intro {
        padding: 24px 20px 32px;
    }

    .hch-auth-shell__main {
        padding: 0 14px 32px;
        background: linear-gradient(180deg, #0274c7 0, #eaf6fb 110px);
    }

    .hch-auth-card {
        border-radius: 18px;
    }

    .hch-register-topbar {
        min-height: 64px;
        padding: 11px 16px;
    }

    .hch-register-v2 .hch-register-content {
        padding: 24px 13px 38px;
    }

    .hch-register-v2 .hch-register-card {
        padding: 24px 17px;
        border-radius: 18px;
    }
}

/* Domain list toolbar */

.hch-domains-page #domainForm > .btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px !important;
}

.hch-domains-page #domainForm > .btn-group > .btn,
.hch-domains-page #domainForm > .btn-group > .btn-group,
.hch-domains-page #domainForm > .btn-group > .btn-group > .btn {
    float: none;
    margin: 0 !important;
    border-radius: 10px !important;
}

.hch-domains-page #domainForm > .btn-group .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    color: #244a63;
    background: #ffffff;
    border: 1px solid #cfe3ee;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.hch-domains-page #domainForm > .btn-group .btn:hover,
.hch-domains-page #domainForm > .btn-group .btn:focus {
    color: #0274c7;
    background: #f0f9ff;
    border-color: #7dd3fc;
    box-shadow: 0 0 0 3px rgba(85, 196, 255, 0.13);
}

.hch-domains-page #domainForm > .btn-group .btn > i {
    width: 15px;
    margin: 0 !important;
    color: #0491f5;
    text-align: center;
}

.hch-domains-page #domainForm > .btn-group .dropdown-menu {
    margin-top: 7px;
    padding: 7px;
    border-color: #dceaf1;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 67, 96, 0.12);
}

.hch-domains-page #domainForm > .btn-group .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 11px;
}

/* Domain details overview */

.hch-domain-details-page #tabOverview > .card {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #d7e9f2;
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(15, 80, 112, 0.08);
}

.hch-domain-details-page #tabOverview > .card > .card-body {
    padding: 22px;
}

.hch-domain-details-page #tabOverview > .card > .card-body > .card-title:first-child {
    margin: -22px -22px 18px !important;
    padding: 17px 20px;
    color: #ffffff;
    background:
        radial-gradient(circle at 90% 0, rgba(125, 211, 252, 0.34), transparent 34%),
        linear-gradient(135deg, #0377d2, #0491f5);
    border-bottom: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hch-domain-details-page #tabOverview > .card > .card-body > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin: 0 0 11px !important;
}

.hch-domain-details-page #tabOverview > .card > .card-body > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
    padding: 14px 15px;
    color: #36556b;
    background: #f7fbfd;
    border: 1px solid #e0edf3;
    border-radius: 13px;
    overflow-wrap: anywhere;
}

.hch-domain-details-page #tabOverview > .card > .card-body > .row h5 {
    margin: 0 0 6px;
    color: #7890a3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.35;
    text-transform: uppercase;
}

.hch-domain-details-page #tabOverview > .card > .card-body > .row a,
.hch-domain-details-page #tabOverview > .card > .card-body > .row span,
.hch-domain-details-page #tabOverview > .card > .card-body > .row > [class*="col-"] {
    font-size: 12px;
    line-height: 1.55;
}

.hch-domain-details-page #tabOverview > .card > .card-body > .row a {
    color: #0491f5;
    font-weight: 750;
}

.hch-domain-details-page #tabOverview #statusDisplayLabel {
    margin-left: 5px;
}

.hch-domain-details-page #tabOverview > .card > .card-body > br {
    display: none;
}

.hch-domain-details-page #tabOverview > .card > .card-body > .card-title:not(:first-child) {
    margin: 22px 0 11px;
    color: #153a53;
    font-size: 15px;
    font-weight: 800;
}

.hch-domain-details-page #tabOverview > .card > .card-body > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hch-domain-details-page #tabOverview > .card > .card-body > ul li {
    min-width: 0;
    margin: 0;
}

.hch-domain-details-page #tabOverview > .card > .card-body > ul a {
    min-height: 43px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #24516b;
    background: #f0f9ff;
    border: 1px solid #d5ebf5;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.hch-domain-details-page #tabOverview > .card > .card-body > ul a:hover,
.hch-domain-details-page #tabOverview > .card > .card-body > ul a:focus {
    color: #0274c7;
    background: #e0f2fe;
    border-color: #7dd3fc;
    text-decoration: none;
}

/* Native WHMCS messages/alerts in the topbar. */

.popover-user-notifications {
    width: min(390px, calc(100vw - 24px));
    max-width: 390px;
    padding: 8px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d7e7ef;
    border-radius: 15px;
    box-shadow: 0 18px 46px rgba(15, 67, 96, 0.16);
    font-family: "Open Sans", Inter, sans-serif;
}

.popover-user-notifications ul li {
    min-height: 58px;
    padding: 0;
    border-bottom-color: #e7f1f6;
}

.popover-user-notifications ul li a {
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    color: #36566c;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}

.popover-user-notifications ul li a:hover {
    color: #0377d2;
    background: #f0f9ff;
}

.popover-user-notifications ul li i.fas,
.popover-user-notifications ul li i.far {
    width: 22px;
    flex: 0 0 22px;
    float: none;
    padding-top: 2px;
    color: #0491f5;
    font-size: 17px;
    text-align: center;
}

.popover-user-notifications ul li .message {
    min-width: 0;
    margin-left: 0;
    overflow-wrap: anywhere;
}

.popover-user-notifications ul li.none {
    min-height: 0;
    padding: 17px 12px;
    color: #71899b;
    font-size: 11px;
}

@media (max-width: 767.98px) {
    .hch-domains-page #domainForm > .btn-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-domains-page #domainForm > .btn-group > .btn,
    .hch-domains-page #domainForm > .btn-group > .btn-group,
    .hch-domains-page #domainForm > .btn-group > .btn-group > .btn {
        width: 100%;
    }

    .hch-domain-details-page #tabOverview > .card > .card-body {
        padding: 16px;
    }

    .hch-domain-details-page #tabOverview > .card > .card-body > .card-title:first-child {
        margin: -16px -16px 14px !important;
        padding: 15px 16px;
    }

    .hch-domain-details-page #tabOverview > .card > .card-body > .row,
    .hch-domain-details-page #tabOverview > .card > .card-body > ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Production cart and domain-order design.
   Scoped to the native WHMCS Standard Cart DOM so pricing/AJAX logic remains untouched. */

.hch-cart-page #order-standard_cart {
    --hch-order-deep: #0377d2;
    --hch-order-blue: #0491f5;
    --hch-order-sky: #55c4ff;
    --hch-order-ink: #102f46;
    --hch-order-muted: #6d8597;
    --hch-order-line: #d8e9f2;
    --hch-order-soft: #f2f9ff;
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 0 34px;
    color: var(--hch-order-ink);
    font-family: inherit;
    font-size: 12px;
}

.hch-cart-page #order-standard_cart,
.hch-cart-page #order-standard_cart * {
    box-sizing: border-box;
}

.hch-cart-page #order-standard_cart > .row {
    display: grid !important;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin: 0 !important;
}

.hch-cart-page #order-standard_cart .cart-sidebar,
.hch-cart-page #order-standard_cart .cart-body {
    position: relative;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    float: none !important;
    padding: 0 !important;
}

.hch-cart-page #order-standard_cart .cart-sidebar {
    position: sticky;
    top: calc(var(--hch-topbar-height) + 18px);
    max-height: calc(100vh - var(--hch-topbar-height) - 36px);
    overflow-y: auto;
    padding-right: 4px !important;
    scrollbar-width: thin;
    scrollbar-color: #c5dce7 transparent;
}

.hch-cart-page #order-standard_cart .cart-sidebar .card-sidebar {
    overflow: hidden;
    margin: 0 0 12px !important;
    background: #ffffff;
    border: 1px solid var(--hch-order-line);
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(15, 80, 112, 0.07);
}

.hch-cart-page #order-standard_cart .cart-sidebar .card-header {
    padding: 14px 15px;
    color: #153a53;
    background: linear-gradient(135deg, #ffffff, #f1f9fd);
    border: 0;
    border-bottom: 1px solid #e2eef4;
}

.hch-cart-page #order-standard_cart .cart-sidebar .panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 12px;
    font-weight: 800;
}

.hch-cart-page #order-standard_cart .cart-sidebar .panel-title > i:first-child {
    width: 30px;
    height: 30px;
    display: inline-grid;
    flex: 0 0 30px;
    place-items: center;
    margin: 0 !important;
    color: #ffffff;
    background: linear-gradient(135deg, var(--hch-order-deep), var(--hch-order-sky));
    border-radius: 9px;
    box-shadow: 0 6px 14px rgba(4, 145, 245, 0.2);
    font-size: 12px;
}

.hch-cart-page #order-standard_cart .cart-sidebar .card-minimise {
    margin: 8px 0 0 auto !important;
    color: #7c93a4;
    font-size: 9px;
}

.hch-cart-page #order-standard_cart .cart-sidebar .list-group-item {
    min-height: 39px;
    display: flex;
    align-items: center;
    padding: 9px 14px;
    color: #49677b;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #edf4f7;
    border-radius: 0;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.4;
}

.hch-cart-page #order-standard_cart .cart-sidebar .list-group-item:hover,
.hch-cart-page #order-standard_cart .cart-sidebar .list-group-item:focus,
.hch-cart-page #order-standard_cart .cart-sidebar .list-group-item.active {
    color: #0274c7;
    background: #eef9fe;
    box-shadow: inset 3px 0 0 #1ba7fa;
    text-decoration: none;
}

.hch-cart-page #order-standard_cart .header-lined {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.hch-cart-page #order-standard_cart .header-lined h1,
.hch-cart-page #order-standard_cart h1.font-size-36 {
    margin: 0;
    color: var(--hch-order-ink);
    font-size: clamp(26px, 2.3vw, 36px) !important;
    font-weight: 820;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.hch-cart-page #order-standard_cart .header-lined p,
.hch-cart-page #order-standard_cart .secondary-cart-body > p:first-child {
    margin: 7px 0 0;
    color: var(--hch-order-muted);
    font-size: 11px;
    line-height: 1.55;
}

.hch-cart-page #order-standard_cart .alert {
    border-width: 1px;
    border-radius: 13px;
    font-size: 11px;
}

/* Modern product pricing cards */

.hch-cart-page #order-standard_cart .products {
    margin: 0;
}

.hch-cart-page #order-standard_cart .products > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    margin: 0 0 17px !important;
}

.hch-cart-page #order-standard_cart .products > .row:empty {
    display: none !important;
}

.hch-cart-page #order-standard_cart .products > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    flex: none !important;
    padding: 0 !important;
}

.hch-cart-page #order-standard_cart .products .product {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff;
    border: 1px solid var(--hch-order-line);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 80, 112, 0.075);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hch-cart-page #order-standard_cart .products .product:hover {
    border-color: #7dd3fc;
    box-shadow: 0 18px 38px rgba(4, 145, 245, 0.13);
    transform: translateY(-2px);
}

.hch-cart-page #order-standard_cart .products .product header {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 17px 18px;
    color: #ffffff;
    background:
        radial-gradient(circle at 92% 0, rgba(125, 211, 252, 0.38), transparent 36%),
        linear-gradient(135deg, var(--hch-order-deep), var(--hch-order-blue));
    border: 0;
    border-radius: 0;
}

.hch-cart-page #order-standard_cart .products .product header span {
    margin: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 800;
}

.hch-cart-page #order-standard_cart .products .product header .qty {
    padding: 5px 8px;
    color: #0377d2;
    background: #e0f2fe;
    border-radius: 999px;
    font-size: 8px;
    font-style: normal;
}

.hch-cart-page #order-standard_cart .products .product div.product-desc {
    width: 100% !important;
    min-height: 148px;
    flex: 1 1 auto;
    float: none !important;
    padding: 18px !important;
    color: #567185;
    font-size: 10px;
    line-height: 1.65;
}

.hch-cart-page #order-standard_cart .products .product div.product-desc p {
    margin: 0 0 11px;
}

.hch-cart-page #order-standard_cart .products .product div.product-desc ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hch-cart-page #order-standard_cart .products .product div.product-desc li {
    position: relative;
    padding-left: 16px;
}

.hch-cart-page #order-standard_cart .products .product div.product-desc li::before {
    position: absolute;
    top: 0.65em;
    left: 1px;
    width: 6px;
    height: 6px;
    content: "";
    background: #55c4ff;
    border-radius: 50%;
    transform: translateY(-50%);
}

.hch-cart-page #order-standard_cart .products .product footer {
    width: 100% !important;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    float: none !important;
    margin: 0 !important;
    padding: 14px 18px;
    background: #f5fafc;
    border-top: 1px solid #e4eff4;
    text-align: left;
}

.hch-cart-page #order-standard_cart .products .product div.product-pricing {
    margin: 0;
    color: #7a91a2;
    font-size: 9px;
    line-height: 1.4;
}

.hch-cart-page #order-standard_cart .products .product div.product-pricing span.price {
    color: #102f46;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.035em;
}

/* Shared buttons and form controls */

.hch-cart-page #order-standard_cart .btn-primary,
.hch-cart-page #order-standard_cart .btn-success,
.hch-cart-page #order-standard_cart .btn-warning,
.hch-cart-page #order-standard_cart .btn-order-now {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--hch-order-deep), var(--hch-order-blue)) !important;
    border: 1px solid var(--hch-order-blue) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 18px rgba(4, 145, 245, 0.18);
    font-size: 11px;
    font-weight: 780;
}

.hch-cart-page #order-standard_cart .btn-primary:hover,
.hch-cart-page #order-standard_cart .btn-success:hover,
.hch-cart-page #order-standard_cart .btn-warning:hover,
.hch-cart-page #order-standard_cart .btn-order-now:hover {
    background: linear-gradient(135deg, #0167b7, #0274c7) !important;
    border-color: #0274c7 !important;
    transform: translateY(-1px);
}

.hch-cart-page #order-standard_cart .btn-default,
.hch-cart-page #order-standard_cart .btn-secondary {
    min-height: 38px;
    color: #24526d;
    background: #ffffff;
    border: 1px solid #cfe3ee;
    border-radius: 10px !important;
    font-size: 10px;
    font-weight: 700;
}

.hch-cart-page #order-standard_cart .form-control,
.hch-cart-page #order-standard_cart input[type="text"],
.hch-cart-page #order-standard_cart input[type="email"],
.hch-cart-page #order-standard_cart input[type="password"],
.hch-cart-page #order-standard_cart input[type="number"],
.hch-cart-page #order-standard_cart select,
.hch-cart-page #order-standard_cart textarea {
    min-height: 44px;
    color: var(--hch-order-ink);
    background: #fbfdfe;
    border: 1px solid #cfe3ee;
    border-radius: 11px;
    box-shadow: none;
    font-size: 11px;
}

.hch-cart-page #order-standard_cart .form-control:focus,
.hch-cart-page #order-standard_cart input:focus,
.hch-cart-page #order-standard_cart select:focus,
.hch-cart-page #order-standard_cart textarea:focus {
    background: #ffffff;
    border-color: var(--hch-order-sky);
    box-shadow: 0 0 0 3px rgba(85, 196, 255, 0.15);
}

.hch-cart-page #order-standard_cart label {
    margin: 0 0 7px;
    color: #577287;
    font-size: 10px;
    font-weight: 750;
}

.hch-cart-page #order-standard_cart input[type="checkbox"],
.hch-cart-page #order-standard_cart input[type="radio"] {
    accent-color: var(--hch-order-blue);
}

/* Product configuration flow */

.hch-cart-page #order-standard_cart #frmConfigureProduct > .row,
.hch-cart-page #order-standard_cart .cart-body > .row:has(> .secondary-cart-body) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 20px;
    margin: 0 !important;
}

.hch-cart-page #order-standard_cart .secondary-cart-body,
.hch-cart-page #order-standard_cart .secondary-cart-sidebar {
    position: relative;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    float: none !important;
    padding: 0 !important;
}

.hch-cart-page #order-standard_cart .product-info {
    min-height: 0;
    margin: 14px 0 16px;
    padding: 18px 20px;
    color: #36576d;
    background:
        radial-gradient(circle at 92% 0, rgba(125, 211, 252, 0.28), transparent 34%),
        linear-gradient(135deg, #eff9fe, #ffffff);
    border: 1px solid #cfe8f4;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(15, 80, 112, 0.055);
    font-size: 10px;
    line-height: 1.65;
}

.hch-cart-page #order-standard_cart .product-info .product-title {
    margin: 0 0 10px;
    color: #0f3852;
    font-size: 17px;
    font-weight: 820;
    letter-spacing: -0.02em;
}

.hch-cart-page #order-standard_cart .product-info p:last-child,
.hch-cart-page #order-standard_cart .product-info ul:last-child {
    margin-bottom: 0;
}

.hch-cart-page #order-standard_cart .product-info ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 18px;
    margin: 10px 0 0;
    padding-left: 18px;
}

.hch-cart-page #order-standard_cart .field-container,
.hch-cart-page #order-standard_cart .product-configurable-options,
.hch-cart-page #order-standard_cart #productAddonsContainer {
    margin: 0 0 16px;
    padding: 17px;
    background: #ffffff;
    border: 1px solid var(--hch-order-line);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(15, 80, 112, 0.045);
}

.hch-cart-page #order-standard_cart .field-container > .form-group:last-child,
.hch-cart-page #order-standard_cart .field-container > .row:last-child .form-group,
.hch-cart-page #order-standard_cart .product-configurable-options .form-group {
    margin-bottom: 0;
}

.hch-cart-page #order-standard_cart .sub-heading,
.hch-cart-page #order-standard_cart .sub-heading-borderless {
    height: auto;
    display: flex;
    align-items: center;
    margin: 21px 0 11px;
    padding: 0;
    border: 0;
    text-align: left;
}

.hch-cart-page #order-standard_cart .sub-heading span,
.hch-cart-page #order-standard_cart .sub-heading-borderless span {
    position: static;
    top: auto;
    display: block;
    padding: 0;
    color: #153a53;
    background: transparent !important;
    font-size: 13px;
    font-weight: 820;
    letter-spacing: -0.01em;
}

.hch-cart-page #order-standard_cart #scrollingPanelContainer {
    position: sticky;
    top: calc(var(--hch-topbar-height) + 18px);
}

.hch-cart-page #order-standard_cart .order-summary {
    overflow: hidden;
    margin: 0 0 14px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #cfe3ee;
    border-radius: 17px;
    box-shadow: 0 14px 36px rgba(15, 80, 112, 0.1);
}

.hch-cart-page #order-standard_cart .order-summary h2 {
    margin: 0;
    padding: 16px 17px;
    color: #ffffff;
    background:
        radial-gradient(circle at 88% 0, rgba(125, 211, 252, 0.34), transparent 40%),
        linear-gradient(135deg, var(--hch-order-deep), var(--hch-order-blue));
    border: 0;
    font-size: 16px !important;
    font-weight: 820;
    text-align: left;
}

.hch-cart-page #order-standard_cart .summary-container {
    min-height: 100px;
    margin: 0;
    padding: 16px;
    color: #4a687d;
    background: #ffffff;
    border-radius: 0;
    font-size: 9px;
    line-height: 1.55;
}

.hch-cart-page #order-standard_cart .order-summary .product-name {
    color: #173c55;
    font-size: 12px;
    font-weight: 820;
}

.hch-cart-page #order-standard_cart .order-summary .product-group {
    color: #8095a5;
    font-style: normal;
}

.hch-cart-page #order-standard_cart .order-summary .summary-totals,
.hch-cart-page #order-standard_cart .bordered-totals,
.hch-cart-page #order-standard_cart .recurring-totals {
    margin: 10px 0;
    padding: 10px 0;
    border-color: #e3eef4;
}

.hch-cart-page #order-standard_cart .order-summary .total-due-today {
    margin: 12px -16px -16px;
    padding: 14px 16px;
    background: #eff9fe;
    border-top: 1px solid #d7eaf3;
}

.hch-cart-page #order-standard_cart .order-summary .total-due-today .amt {
    color: #0377d2;
    font-size: 25px;
    font-weight: 850;
    letter-spacing: -0.04em;
}

.hch-cart-page #order-standard_cart #btnCompleteProductConfig,
.hch-cart-page #order-standard_cart #btnCheckout {
    width: 100%;
    min-height: 47px;
}

/* Register and transfer domain */

.hch-cart-page #order-standard_cart .domain-checker-container {
    margin: 15px 0 22px;
}

.hch-cart-page #order-standard_cart .domain-checker-bg {
    position: relative;
    overflow: hidden;
    padding: 38px 24px !important;
    background:
        radial-gradient(circle at 88% 8%, rgba(125, 211, 252, 0.42), transparent 29%),
        radial-gradient(circle at 8% 95%, rgba(27, 167, 250, 0.15), transparent 34%),
        linear-gradient(135deg, #e5f6fd 0%, #f8fcfe 72%) !important;
    border: 1px solid #c6e5f3;
    border-radius: 19px;
    box-shadow: 0 13px 34px rgba(15, 80, 112, 0.07);
}

.hch-cart-page #order-standard_cart .domain-checker-bg .row {
    margin: 0 !important;
}

.hch-cart-page #order-standard_cart .domain-checker-bg .row > div {
    width: min(100%, 820px);
    max-width: 820px;
    flex: 0 0 auto;
    margin: 0 auto;
    padding: 0;
}

.hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box {
    margin: 0;
    padding: 6px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #b9ddeb;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(4, 145, 245, 0.12);
}

.hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box .form-control {
    height: 48px;
    min-height: 48px;
    padding: 0 14px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    font-size: 13px;
}

.hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box .btn {
    min-width: 118px;
    min-height: 48px;
    margin: 0;
}

.hch-cart-page #order-standard_cart .spotlight-tlds-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.hch-cart-page #order-standard_cart .spotlight-tld-container,
.hch-cart-page #order-standard_cart .spotlight-tld-container-1,
.hch-cart-page #order-standard_cart .spotlight-tld-container-2,
.hch-cart-page #order-standard_cart .spotlight-tld-container-3,
.hch-cart-page #order-standard_cart .spotlight-tld-container-4,
.hch-cart-page #order-standard_cart .spotlight-tld-container-5,
.hch-cart-page #order-standard_cart .spotlight-tld-container-6,
.hch-cart-page #order-standard_cart .spotlight-tld-container-7,
.hch-cart-page #order-standard_cart .spotlight-tld-container-8 {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}

.hch-cart-page #order-standard_cart .spotlight-tld,
.hch-cart-page #order-standard_cart .featured-tld {
    min-height: 118px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--hch-order-line);
    border-radius: 15px;
    box-shadow: 0 9px 25px rgba(15, 80, 112, 0.06);
}

.hch-cart-page #order-standard_cart .spotlight-tld:hover,
.hch-cart-page #order-standard_cart .featured-tld:hover {
    border-color: #7dd3fc;
    box-shadow: 0 14px 30px rgba(4, 145, 245, 0.11);
}

.hch-cart-page #order-standard_cart .featured-tlds-container > .row {
    row-gap: 13px;
}

.hch-cart-page #order-standard_cart .tld-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 14px;
}

.hch-cart-page #order-standard_cart .tld-filters .badge {
    margin: 0;
    padding: 7px 10px;
    color: #547087;
    background: #ffffff;
    border: 1px solid #cfdee7;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 750;
}

.hch-cart-page #order-standard_cart .tld-filters .badge:hover,
.hch-cart-page #order-standard_cart .tld-filters .badge.active,
.hch-cart-page #order-standard_cart .tld-filters .badge-success {
    color: #ffffff;
    background: linear-gradient(135deg, var(--hch-order-deep), var(--hch-order-blue));
    border-color: var(--hch-order-blue);
}

.hch-cart-page #order-standard_cart .domain-pricing .bg-white,
.hch-cart-page #order-standard_cart .suggested-domains {
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid var(--hch-order-line);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 80, 112, 0.06);
}

.hch-cart-page #order-standard_cart .tld-pricing-header {
    min-height: 48px;
    align-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--hch-order-deep), var(--hch-order-blue));
    border: 0;
    font-size: 10px;
    font-weight: 800;
}

.hch-cart-page #order-standard_cart .tld-row {
    min-height: 58px;
    align-items: center;
    margin: 0;
    color: #3d5e74;
    background: #ffffff;
    border-bottom: 1px solid #e8f1f5;
    font-size: 10px;
}

.hch-cart-page #order-standard_cart .tld-row:nth-child(odd) {
    background: #f9fcfd;
}

.hch-cart-page #order-standard_cart .tld-row:hover {
    background: #eef9fe;
}

.hch-cart-page #order-standard_cart .tld-row strong {
    color: #153a53;
    font-size: 12px;
}

.hch-cart-page #order-standard_cart .tld-row small {
    color: #8498a7;
    font-size: 8px;
}

.hch-cart-page #order-standard_cart .domain-promo-box,
.hch-cart-page #order-standard_cart #frmDomainTransfer .card {
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--hch-order-line);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 80, 112, 0.06);
}

/* Cart review and checkout */

.hch-cart-page #order-standard_cart .view-cart-items-header {
    padding: 13px 16px;
    color: #607b8e;
    background: #f2f8fb;
    border: 1px solid var(--hch-order-line);
    border-radius: 14px 14px 0 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hch-cart-page #order-standard_cart .view-cart-items {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--hch-order-line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 9px 26px rgba(15, 80, 112, 0.05);
}

.hch-cart-page #order-standard_cart .view-cart-items .item {
    padding: 16px;
    border-bottom-color: #e8f1f5;
}

.hch-cart-page #order-standard_cart .view-cart-items .item-title {
    color: #173c55;
    font-size: 12px;
    font-weight: 800;
}

.hch-cart-page #order-standard_cart .view-cart-items .item-price {
    color: #0377d2;
    font-weight: 800;
}

.hch-cart-page #order-standard_cart .view-cart-tabs,
.hch-cart-page #order-standard_cart .checkout-security-msg,
.hch-cart-page #order-standard_cart .checkout-details {
    overflow: hidden;
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid var(--hch-order-line);
    border-radius: 15px;
    box-shadow: 0 9px 26px rgba(15, 80, 112, 0.05);
}

.hch-cart-page #order-standard_cart .view-cart-tabs .nav-tabs {
    padding: 0 12px;
    background: #f5fafc;
    border-bottom-color: #dceaf1;
}

.hch-cart-page #order-standard_cart .view-cart-tabs .nav-link {
    padding: 12px 10px;
    color: #668196;
    border: 0;
    font-size: 10px;
    font-weight: 750;
}

.hch-cart-page #order-standard_cart .view-cart-tabs .nav-link.active {
    color: #0491f5;
    background: transparent;
    box-shadow: inset 0 -2px 0 #1ba7fa;
}

.hch-cart-page #order-standard_cart .view-cart-tabs .tab-content {
    padding: 16px;
}

@media (max-width: 1199.98px) {
    .hch-cart-page #order-standard_cart > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-cart-page #order-standard_cart > .row > .cart-sidebar {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .hch-cart-page #order-standard_cart #frmConfigureProduct > .row,
    .hch-cart-page #order-standard_cart .cart-body > .row:has(> .secondary-cart-body) {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-cart-page #order-standard_cart #scrollingPanelContainer {
        position: static;
    }

    .hch-cart-page #order-standard_cart .products > .row,
    .hch-cart-page #order-standard_cart .spotlight-tlds-container {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .hch-cart-page #order-standard_cart {
        padding-bottom: 24px;
    }

    .hch-cart-page #order-standard_cart .header-lined h1,
    .hch-cart-page #order-standard_cart h1.font-size-36 {
        font-size: 25px !important;
    }

    .hch-cart-page #order-standard_cart .product-info ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-cart-page #order-standard_cart .domain-checker-bg {
        padding: 18px 12px !important;
    }

    .hch-cart-page #order-standard_cart .domain-checker-bg .row > div {
        width: 100%;
        max-width: none;
        flex: 0 0 100%;
    }

    .hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box {
        display: grid;
        gap: 7px;
    }

    .hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box .form-control,
    .hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box .input-group-append,
    .hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box .input-group-btn,
    .hch-cart-page #order-standard_cart .domain-checker-bg .input-group-box .btn {
        width: 100%;
        border-radius: 9px;
    }

    .hch-cart-page #order-standard_cart .products .product footer {
        align-items: stretch;
        flex-direction: column;
    }

    .hch-cart-page #order-standard_cart .products .product footer .btn {
        width: 100%;
    }

    .hch-cart-page #order-standard_cart .domain-pricing .bg-white {
        overflow-x: auto;
    }

    .hch-cart-page #order-standard_cart .tld-pricing-header,
    .hch-cart-page #order-standard_cart .tld-row {
        min-width: 620px;
    }
}

/* Native authentication controls */

.hch-native-check,
.hch-native-switch {
    position: relative;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    background-image: none !important;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.hch-native-check {
    width: 20px !important;
    height: 20px !important;
    display: inline-grid;
    place-items: center;
    background: #ffffff !important;
    border: 1.5px solid #b9cfdb !important;
    border-radius: 6px !important;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hch-native-check::after {
    width: 9px;
    height: 5px;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    content: "";
    opacity: 0;
    transform: translateY(-1px) rotate(-45deg) scale(0.7);
    transition: opacity 140ms ease, transform 140ms ease;
}

.hch-native-check:checked {
    background: linear-gradient(135deg, #0377d2, #1ba7fa) !important;
    border-color: #0491f5 !important;
    box-shadow: 0 5px 12px rgba(4, 145, 245, 0.2);
}

.hch-native-check:checked::after {
    opacity: 1;
    transform: translateY(-1px) rotate(-45deg) scale(1);
}

.hch-native-check:focus-visible,
.hch-native-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(27, 167, 250, 0.18);
}

.hch-auth-remember {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    gap: 11px;
    padding: 10px 12px;
    color: #36546a;
    background: #f5fafc;
    border: 1px solid #dceaf1;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.hch-auth-remember:hover {
    color: #0274c7;
    background: #f0f9ff;
    border-color: #7dd3fc;
}

.hch-auth-password-toggle {
    color: #668096;
    border-radius: 9px;
}

.hch-auth-password-toggle:hover,
.hch-auth-password-toggle:focus,
.hch-auth-password-toggle.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, #0377d2, #1ba7fa);
}

.hch-auth-password-toggle.is-active svg {
    transform: scale(0.92);
}

.hch-auth-password-toggle.is-active::after {
    position: absolute;
    width: 16px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
    content: "";
    transform: rotate(-45deg);
}

.hch-register-consent--marketing {
    min-height: 86px;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    padding: 17px 18px;
    background:
        radial-gradient(circle at 95% 10%, rgba(85, 196, 255, 0.13), transparent 32%),
        #f5fbfe !important;
    border: 1px solid #cce8f5 !important;
    border-radius: 15px;
    box-shadow: 0 8px 22px rgba(15, 67, 96, 0.045);
}

.hch-native-switch {
    width: 46px !important;
    height: 26px !important;
    background: #c9d9e2 !important;
    border: 0 !important;
    border-radius: 999px !important;
    transition: background 170ms ease, box-shadow 170ms ease;
}

.hch-native-switch::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(15, 67, 96, 0.2);
    content: "";
    transition: transform 170ms ease;
}

.hch-native-switch:checked {
    background: linear-gradient(135deg, #0377d2, #1ba7fa) !important;
    box-shadow: 0 6px 15px rgba(4, 145, 245, 0.2);
}

.hch-native-switch:checked::after {
    transform: translateX(20px);
}

#registration .hch-register-consent--marketing label {
    min-width: 0;
    display: grid;
    gap: 4px;
    cursor: pointer;
}

#registration .hch-register-consent--marketing label strong {
    color: #15364e;
    font-size: 11px;
    font-weight: 800;
}

#registration .hch-register-consent--marketing label span {
    margin: 0;
    color: #6f8799;
    font-size: 9px;
    line-height: 1.55;
}

#registration label.hch-register-consent--tos {
    min-height: 54px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: #36546a;
    background: #ffffff;
    border: 1px solid #cfe3ee;
    border-radius: 14px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

#registration label.hch-register-consent--tos:hover {
    background: #f5fbfe;
    border-color: #7dd3fc;
    box-shadow: 0 8px 20px rgba(4, 145, 245, 0.06);
}

#registration label.hch-register-consent--tos > span {
    margin: 0;
    color: #456276;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.5;
}

#registration label.hch-register-consent--tos a {
    color: #0491f5;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .hch-auth-shell__intro {
        display: none !important;
    }

    .hch-auth-shell {
        display: block;
        min-height: 100vh;
        background: #edf7fc;
    }

    .hch-auth-shell__main {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 20px 14px;
        background:
            radial-gradient(circle at 82% 8%, rgba(85, 196, 255, 0.2), transparent 30%),
            linear-gradient(145deg, #f5fbfe 0%, #eaf6fb 100%);
    }

    .hch-auth-stack {
        width: min(100%, 460px);
    }

    .hch-auth-card {
        padding: 25px 19px;
        border-radius: 18px;
    }

    .hch-auth-form__actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-register-consent--marketing {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 15px;
    }

    .hch-native-switch {
        width: 42px !important;
        height: 24px !important;
    }

    .hch-native-switch::after {
        width: 18px;
        height: 18px;
    }

    .hch-native-switch:checked::after {
        transform: translateX(18px);
    }
}

@keyframes hch-spin {
    to { transform: rotate(360deg); }
}

@keyframes hch-shimmer {
    to { transform: translateX(100%); }
}

@keyframes hch-toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hch-toast-out {
    to { opacity: 0; transform: translateX(12px) scale(.98); }
}

/* Compact production navigation, live ticket replies, cart review and affiliates. */

body.hch-app-page {
    --hch-sidebar-width: 284px;
}

.hch-app-page .hch-sidebar__header {
    padding-right: 20px;
    padding-left: 20px;
}

.hch-app-page .hch-brand__logo,
.hch-dashboard-page .hch-brand__logo {
    max-width: 168px;
    max-height: 48px;
}

.hch-app-page .hch-sidebar__nav {
    padding-right: 14px;
    padding-left: 14px;
}

.hch-app-page .hch-sidebar__item,
.hch-app-page .hch-sidebar__disclosure {
    min-height: 45px;
    gap: 12px;
    padding: 9px 12px;
    color: #172033;
    font-size: 13px;
}

.hch-app-page .hch-sidebar__icon,
.hch-app-page .hch-sidebar__icon i,
.hch-app-page .hch-sidebar__chevron {
    color: #111827;
}

.hch-app-page .hch-sidebar__icon {
    width: 20px;
    height: 20px;
}

.hch-app-page .hch-sidebar__icon i {
    width: 20px;
    font-size: 14px;
}

.hch-app-page .hch-nav-submenu {
    margin-left: 30px;
    padding-left: 10px;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item {
    min-height: 40px;
    font-size: 12px;
}

.hch-app-page .hch-sidebar__item.is-active,
.hch-app-page .hch-sidebar__item.active,
.hch-app-page .hch-sidebar__disclosure.is-active,
.hch-dashboard-page .hch-sidebar__item.is-active,
.hch-dashboard-page .hch-sidebar__item.active,
.hch-dashboard-page .hch-sidebar__disclosure.is-active {
    color: #0377d2;
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
    box-shadow: inset 0 0 0 1px #bae6fd, 0 8px 18px rgba(4, 145, 245, 0.08);
}

.hch-app-page .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-app-page .hch-sidebar__item.active .hch-sidebar__icon,
.hch-app-page .hch-sidebar__disclosure.is-active .hch-sidebar__icon,
.hch-app-page .hch-sidebar__disclosure.is-active .hch-sidebar__chevron,
.hch-dashboard-page .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-dashboard-page .hch-sidebar__item.active .hch-sidebar__icon,
.hch-dashboard-page .hch-sidebar__disclosure.is-active .hch-sidebar__icon,
.hch-dashboard-page .hch-sidebar__disclosure.is-active .hch-sidebar__chevron {
    color: #111827;
}

.popover-user-notifications .hch-ticket-alerts .message {
    display: grid;
    gap: 2px;
}

.popover-user-notifications .hch-ticket-alerts .message strong {
    color: #15364e;
    font-size: 12px;
    font-weight: 800;
}

.popover-user-notifications .hch-ticket-alerts .message span {
    color: #71899b;
    font-size: 10px;
}

.popover-user-notifications ul li.hch-ticket-alerts__footer {
    min-height: 0;
    border-bottom: 0;
}

.popover-user-notifications ul li.hch-ticket-alerts__footer a {
    min-height: 38px;
    justify-content: center;
    padding: 9px 12px;
    color: #0491f5;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.hch-loading-overlay--navigation {
    z-index: 99999;
    background: rgba(235, 247, 252, 0.78);
    backdrop-filter: blur(6px);
}

.hch-loading-overlay--navigation .hch-loading-overlay__panel {
    width: min(100%, 520px);
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    #fullpage-overlay.hch-loading-overlay .outer-wrapper {
        padding: 18px;
    }

    #fullpage-overlay.hch-loading-overlay .inner-wrapper {
        width: min(100%, 290px);
    }

    .hch-loading-overlay__panel,
    .hch-loading-overlay--navigation .hch-loading-overlay__panel {
        width: min(100%, 290px);
        padding: 0;
        border-radius: 0;
    }

    .hch-loading-overlay__panel strong {
        font-size: 17px;
    }

    .hch-page-progress {
        grid-template-columns: minmax(0, 1fr) 36px;
        gap: 7px;
        margin-top: 12px;
    }

    .hch-page-progress__track {
        height: 14px;
        padding: 2px;
        border-width: 2px;
    }

    .hch-loading-overlay.is-visible .hch-page-progress__fill {
        transition: width 140ms linear;
    }

    .hch-page-progress__value {
        font-size: 10px;
    }
}

/* Affiliate dashboard */

.hch-affiliates {
    display: grid;
    gap: 18px;
}

.hch-affiliates__hero {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 28px 30px;
    color: #ffffff;
    background:
        radial-gradient(circle at 84% 25%, rgba(255, 255, 255, 0.2), transparent 26%),
        linear-gradient(135deg, #0377d2 0%, #0491f5 56%, #55c4ff 100%);
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(4, 145, 245, 0.16);
}

.hch-affiliates__eyebrow,
.hch-affiliate-card__eyebrow {
    display: block;
    color: #7dd3fc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hch-affiliates__hero h1 {
    margin: 5px 0 4px;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.hch-affiliates__hero p {
    max-width: 620px;
    margin: 0;
    color: #d9f3ff;
    font-size: 12px;
}

.hch-affiliates__hero-icon {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    transform: rotate(-5deg);
}

.hch-affiliates__hero-icon svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
}

.hch-affiliates__notice {
    margin: 0;
}

.hch-affiliate-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.hch-affiliate-stat {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas: "icon label" "icon value" "icon hint";
    column-gap: 13px;
    padding: 19px;
    background: #ffffff;
    border: 1px solid #dceaf1;
    border-radius: 17px;
    box-shadow: 0 10px 28px rgba(15, 80, 112, 0.055);
}

.hch-affiliate-stat__icon {
    grid-area: icon;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #0491f5;
    background: #e0f2fe;
    border-radius: 13px;
    font-size: 16px;
}

.hch-affiliate-stat__label {
    grid-area: label;
    color: #668196;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hch-affiliate-stat strong {
    grid-area: value;
    color: #102f47;
    font-size: 24px;
    line-height: 1.2;
}

.hch-affiliate-stat small {
    grid-area: hint;
    color: #8095a5;
    font-size: 9px;
}

.hch-affiliate-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 16px;
}

.hch-affiliate-card {
    min-width: 0;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #dceaf1;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 80, 112, 0.055);
}

.hch-affiliate-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.hch-affiliate-card__eyebrow {
    color: #0491f5;
}

.hch-affiliate-card__header h2 {
    margin: 4px 0 0;
    color: #12324a;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.hch-affiliate-card__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    color: #0491f5;
    background: #e0f2fe;
    border-radius: 12px;
}

.hch-affiliate-referral-card > p {
    margin: -5px 0 17px;
    color: #71899b;
    font-size: 11px;
}

.hch-copy-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

.hch-copy-field .form-control {
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    color: #36566c;
    background: #f6fbfd;
    border-color: #cfe3ed;
    border-radius: 12px;
    font-size: 11px;
}

.hch-copy-field .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 12px;
}

.hch-affiliate-balance-list {
    display: grid;
    gap: 7px;
    margin: 0 0 13px;
}

.hch-affiliate-balance-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    background: #f7fbfd;
    border: 1px solid #e2eef3;
    border-radius: 11px;
}

.hch-affiliate-balance-list > div.is-highlight {
    background: #eaf8fe;
    border-color: #bae6fd;
}

.hch-affiliate-balance-list dt {
    color: #668196;
    font-size: 10px;
    font-weight: 650;
}

.hch-affiliate-balance-list dd {
    margin: 0;
    color: #12324a;
    font-size: 12px;
    font-weight: 800;
}

.hch-affiliate-balance-card .btn-primary {
    min-height: 43px;
    border-radius: 11px;
}

.hch-affiliate-balance-card__hint {
    margin: 9px 0 0;
    color: #8095a5;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

.hch-affiliate-table-card {
    padding: 0;
    overflow: hidden;
}

.hch-affiliate-table-card > .hch-affiliate-card__header {
    margin: 0;
    padding: 19px 21px;
    border-bottom: 1px solid #e1edf3;
}

.hch-affiliate-table-card .dataTables_wrapper {
    padding: 15px 18px 18px;
}

.hch-affiliate-table-wrap {
    overflow-x: auto;
}

.hch-affiliate-table-card table {
    min-width: 720px;
    margin: 0 !important;
}

.hch-affiliate-table-card table thead th {
    padding: 12px 13px;
    color: #698296;
    background: #f4f9fb;
    border: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hch-affiliate-table-card table tbody td {
    padding: 13px;
    color: #36566c;
    border-color: #e7f0f4;
    font-size: 10px;
}

.hch-affiliate-table-loader {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 26px;
    color: #71899b;
}

.hch-affiliate-table-loader .hch-loader {
    width: 26px;
    height: 26px;
}

.hch-affiliate-table-loader p {
    margin: 0;
    font-size: 10px;
}

.hch-affiliate-links-card__content {
    overflow-x: auto;
}

/* Cart review: explicit layout without relying on :has(). */

body.hch-cart-view-page #order-standard_cart .cart-body > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
    gap: 20px;
    margin: 0 !important;
}

body.hch-cart-view-page #order-standard_cart .secondary-cart-body,
body.hch-cart-view-page #order-standard_cart .secondary-cart-sidebar {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items-header {
    margin: 0 0 8px;
    padding: 14px 18px;
    color: #597489;
    background: #ffffff;
    border: 1px solid #d6e7ef;
    border-radius: 14px;
    box-shadow: 0 7px 20px rgba(15, 80, 112, .045);
}

body.hch-cart-view-page #order-standard_cart .view-cart-items {
    display: grid;
    gap: 10px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .item {
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid #dbe9f0;
    border-radius: 15px;
    box-shadow: 0 9px 25px rgba(15, 80, 112, .05);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .item:hover {
    border-color: #7dd3fc;
    box-shadow: 0 13px 30px rgba(4, 145, 245, .09);
    transform: translateY(-1px);
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .item > .row {
    align-items: center;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .item-title {
    display: block;
    margin-bottom: 4px;
    color: #102f47;
    font-size: 13px;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .item-group,
body.hch-cart-view-page #order-standard_cart .view-cart-items .item-domain,
body.hch-cart-view-page #order-standard_cart .view-cart-items small {
    color: #71899b;
    font-size: 10px;
    line-height: 1.55;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .item-price {
    color: #0377d2;
    font-size: 13px;
    text-align: right;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .item-price .cycle {
    display: block;
    margin-top: 3px;
    color: #7e93a3;
    font-size: 9px;
    font-weight: 600;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .btn-link {
    min-height: 30px;
    margin-left: 6px;
    padding: 6px 9px;
    color: #0491f5;
    background: #f0f9ff;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 750;
}

body.hch-cart-view-page #order-standard_cart .view-cart-items .btn-remove-from-cart {
    color: #dc4651;
    background: #fff1f2;
}

body.hch-cart-view-page #order-standard_cart .empty-cart {
    margin-top: 9px;
    text-align: right;
}

body.hch-cart-view-page #order-standard_cart #btnEmptyCart {
    padding: 8px 11px;
    color: #b4232e;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 750;
}

body.hch-cart-view-page #order-standard_cart .view-cart-empty {
    padding: 48px 20px;
    color: #71899b;
    background: #ffffff;
    border: 1px dashed #bcd9e7;
    border-radius: 16px;
    font-size: 12px;
    text-align: center;
}

body.hch-cart-view-page #order-standard_cart #scrollingPanelContainer {
    position: sticky;
    top: calc(var(--hch-topbar-height) + 18px);
}

body.hch-cart-view-page #order-standard_cart .order-summary {
    overflow: hidden;
    border: 1px solid #cfe3ed;
    border-radius: 18px;
    box-shadow: 0 16px 38px rgba(3, 105, 161, .11);
}

body.hch-cart-view-page #order-standard_cart .order-summary h2 {
    margin: 0;
    padding: 17px 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #0377d2, #1ba7fa);
    font-size: 17px !important;
    font-weight: 800;
    text-align: left;
}

body.hch-cart-view-page #order-standard_cart .order-summary .summary-container {
    padding: 19px;
    background: #ffffff;
}

body.hch-cart-view-page #order-standard_cart .order-summary .subtotal,
body.hch-cart-view-page #order-standard_cart .order-summary .recurring-totals,
body.hch-cart-view-page #order-standard_cart .order-summary .bordered-totals {
    padding: 10px 0;
    color: #526e82;
    border-color: #e3eef3;
    font-size: 10px;
}

body.hch-cart-view-page #order-standard_cart .order-summary .total-due-today {
    margin: 10px 0 15px;
    padding: 16px;
    color: #0377d2;
    background: #eaf8fe;
    border: 1px solid #bae6fd;
    border-radius: 13px;
}

body.hch-cart-view-page #order-standard_cart .order-summary .total-due-today .amt {
    font-size: 25px;
    font-weight: 850;
}

body.hch-cart-view-page #order-standard_cart #checkout {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-size: 12px;
}

body.hch-cart-view-page #order-standard_cart #continueShopping {
    width: 100%;
    display: block;
    margin-top: 5px;
    color: #607d90;
    font-size: 10px;
    text-align: center;
}

body.hch-cart-view-page #order-standard_cart .view-cart-tabs {
    border-radius: 16px;
}

@media (max-width: 1023.98px) {
    body.hch-app-page {
        --hch-sidebar-width: min(88vw, 284px);
    }

    body.hch-cart-view-page #order-standard_cart .cart-body > .row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hch-cart-view-page #order-standard_cart #scrollingPanelContainer {
        position: static;
    }

    .hch-affiliate-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .hch-affiliates__hero {
        min-height: 0;
        padding: 22px 20px;
        border-radius: 18px;
    }

    .hch-affiliates__hero-icon {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 16px;
    }

    .hch-affiliates__hero-icon svg {
        width: 27px;
        height: 27px;
    }

    .hch-affiliate-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-copy-field {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-copy-field .btn {
        justify-content: center;
    }

    .hch-affiliate-card {
        padding: 18px;
        border-radius: 16px;
    }

    body.hch-cart-view-page #order-standard_cart .view-cart-items-header {
        display: none;
    }

    body.hch-cart-view-page #order-standard_cart .view-cart-items .item {
        padding: 15px;
    }

    body.hch-cart-view-page #order-standard_cart .view-cart-items .item > .row {
        row-gap: 10px;
    }

    body.hch-cart-view-page #order-standard_cart .view-cart-items .item-price {
        margin-top: 7px;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hch-loading-overlay--navigation,
    .hch-page-progress__fill {
        animation: none;
        transition: none;
    }
}

/* Solid application canvas and curved navbar/sidebar junction. */

body.hch-app-page {
    background: #f5f6f8 !important;
}

.hch-app-page .hch-app,
.hch-app-page .hch-shell {
    background: #ffffff;
}

.hch-app-page .hch-topbar {
    background: #ffffff;
    border-bottom: 0;
    box-shadow: none;
}

.hch-app-page .hch-main,
.hch-dashboard-page .hch-main {
    position: relative;
    background: #f5f6f8 !important;
    background-image: none !important;
    border-radius: 32px 0 0 0;
}

@media (min-width: 1024px) {
    .hch-app-page .hch-shell::before {
        position: fixed;
        top: var(--hch-topbar-height);
        left: var(--hch-sidebar-width);
        z-index: 99;
        width: 34px;
        height: 34px;
        pointer-events: none;
        content: "";
        background: radial-gradient(circle at 100% 100%, transparent 33px, #ffffff 33.6px);
    }

}

.hch-app-page .hch-app-footer {
    background: #f5f6f8;
}

@media (max-width: 1023.98px) {
    .hch-app-page .hch-main,
    .hch-dashboard-page .hch-main {
        border-radius: 24px 0 0 0;
    }

    /* This fixed mask retains the navbar/content curve while the page scrolls. */
    .hch-app-page .hch-shell::before,
    .hch-dashboard-page .hch-shell::before {
        position: fixed;
        top: var(--hch-topbar-height);
        left: 0;
        z-index: 99;
        display: block;
        width: 26px;
        height: 26px;
        pointer-events: none;
        content: "";
        background: radial-gradient(circle at 100% 100%, transparent 25px, #ffffff 25.6px);
    }

}

@media (max-width: 767.98px) {
    .hch-app-page .hch-main,
    .hch-dashboard-page .hch-main {
        border-radius: 22px 22px 0 0;
    }

    .hch-app-page .hch-shell::after,
    .hch-dashboard-page .hch-shell::after {
        position: fixed;
        top: var(--hch-topbar-height);
        right: 0;
        z-index: 99;
        display: block;
        width: 26px;
        height: 26px;
        pointer-events: none;
        content: "";
        background: radial-gradient(circle at 0 100%, transparent 25px, #ffffff 25.6px);
    }
}

/* Keep every application scrollbar quiet and consistent. The actual content
 * scrolls underneath the fixed corner masks, so the curved header junction
 * stays visible instead of travelling upward with the page. */
html,
body.hch-app-page,
body.hch-app-page * {
    scrollbar-width: thin;
    scrollbar-color: rgba(85, 196, 255, 0.38) transparent;
}

html::-webkit-scrollbar,
body.hch-app-page::-webkit-scrollbar,
body.hch-app-page *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

html::-webkit-scrollbar-track,
body.hch-app-page::-webkit-scrollbar-track,
body.hch-app-page *::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body.hch-app-page::-webkit-scrollbar-thumb,
body.hch-app-page *::-webkit-scrollbar-thumb {
    background: rgba(85, 196, 255, 0.38);
    border: 1px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body.hch-app-page::-webkit-scrollbar-thumb:hover,
body.hch-app-page *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(27, 167, 250, 0.62);
}

html::-webkit-scrollbar-corner,
body.hch-app-page::-webkit-scrollbar-corner,
body.hch-app-page *::-webkit-scrollbar-corner {
    background: transparent;
}

/* Final sidebar active-state cascade (kept last intentionally). */

/* Sidebar brand: preserve the source logo ratio and align it cleanly. */
.hch-app-page .hch-sidebar__header,
.hch-dashboard-page .hch-sidebar__header {
    align-items: center;
}

.hch-app-page .hch-sidebar__header .hch-brand,
.hch-dashboard-page .hch-sidebar__header .hch-brand {
    display: flex;
    width: auto;
    max-width: 146px;
    min-height: 0;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.hch-app-page .hch-sidebar__header .hch-brand__logo,
.hch-dashboard-page .hch-sidebar__header .hch-brand__logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 142px !important;
    max-height: 38px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    transform: none !important;
}

/* Stronger figures for the primary dashboard summary cards. */
.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__value {
    color: #082942;
    font-size: clamp(26px, 2vw, 31px);
    font-weight: 900 !important;
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-variant-numeric: lining-nums tabular-nums;
    -webkit-font-smoothing: antialiased;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__value--currency {
    font-size: clamp(23px, 1.75vw, 28px);
    letter-spacing: -0.035em;
}

.hch-dashboard-page .hch-dashboard-stat-grid .hch-stat-card__value--currency[data-hch-currency-ready="1"],
.hch-dashboard-page .hch-dashboard-balance-banner strong[data-hch-currency-ready="1"] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Upgrade and downgrade */
.hch-upgrade-page .hch-upgrade-page-content {
    width: min(100%, 1240px);
    margin: 0 auto;
}

.hch-upgrade-heading {
    margin: 0 0 16px;
}

.hch-upgrade-heading .hch-eyebrow {
    margin-bottom: 6px;
}

.hch-upgrade-heading h1 {
    margin: 0;
    color: #123a55;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 850;
    letter-spacing: -.045em;
}

.hch-upgrade-heading > p:last-child {
    max-width: 720px;
    margin: 8px 0 0;
    color: #587287;
    font-size: 13px;
    line-height: 1.55;
}

.hch-upgrade-current,
.hch-upgrade-options,
.hch-upgrade-notice {
    background: #fff;
    border: 1px solid #d7e7ee;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 80, 112, .06);
}

.hch-upgrade-current {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    padding: 16px 18px;
}

.hch-upgrade-current__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #0491f5;
    border-radius: 13px;
    box-shadow: 0 8px 17px rgba(4, 145, 245, .2);
    font-size: 16px;
}

.hch-upgrade-current > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hch-upgrade-current__label,
.hch-upgrade-current small {
    color: #6a8293;
    font-size: 10px;
    font-weight: 700;
}

.hch-upgrade-current strong {
    overflow: hidden;
    color: #173e58;
    font-size: 15px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-upgrade-current small > i {
    margin-right: 5px;
    color: #0491f5;
}

.hch-upgrade-current__back {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    color: #0377d2;
    background: #f4fbfe;
    border: 1px solid #c7e5f1;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 760;
    text-decoration: none;
}

.hch-upgrade-current__back:hover {
    color: #0377d2;
    background: #eaf7fc;
    text-decoration: none;
}

.hch-upgrade-options {
    overflow: hidden;
}

.hch-upgrade-options__heading {
    padding: 19px 21px 16px;
    border-bottom: 1px solid #e4eff4;
}

.hch-upgrade-options__heading .hch-card__kicker {
    margin-bottom: 4px;
}

.hch-upgrade-options__heading h2 {
    margin: 0;
    color: #173e58;
    font-size: 18px;
    font-weight: 820;
    letter-spacing: -.025em;
}

.hch-upgrade-options__heading p:last-child {
    margin: 5px 0 0;
    color: #6a8293;
    font-size: 11px;
}

.hch-upgrade-package-list {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.hch-upgrade-package {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(225px, 280px);
    gap: 18px;
    align-items: start;
    padding: 18px;
    background: #f9fcfe;
    border: 1px solid #d8e8ef;
    border-radius: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hch-upgrade-package:hover {
    border-color: #9fd5ea;
    box-shadow: 0 10px 24px rgba(15, 80, 112, .07);
    transform: translateY(-1px);
}

.hch-upgrade-package__content {
    min-width: 0;
}

.hch-upgrade-package__group {
    display: block;
    margin-bottom: 4px;
    color: #0582bd;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hch-upgrade-package h3 {
    margin: 0;
    color: #173e58;
    font-size: 17px;
    font-weight: 830;
    letter-spacing: -.025em;
}

.hch-upgrade-package__description {
    margin-top: 12px;
    color: #426176;
    font-size: 12px;
    line-height: 1.5;
}

.hch-upgrade-package__description p {
    margin: 0 0 8px;
}

.hch-upgrade-package__description ul,
.hch-upgrade-package__description ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.hch-upgrade-package__description li {
    position: relative;
    min-width: 0;
    padding-left: 21px;
    color: #2f5268;
    font-size: 11px;
    line-height: 1.4;
}

.hch-upgrade-package__description li::before {
    position: absolute;
    top: 1px;
    left: 0;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    color: #078572;
    background: #e4f7f2;
    border-radius: 50%;
    content: "✓";
    font-size: 8px;
    font-weight: 900;
}

.hch-upgrade-package__action {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 13px;
    background: #fff;
    border: 1px solid #d7e7ee;
    border-radius: 12px;
}

.hch-upgrade-package__price {
    min-height: 46px;
    display: grid;
    align-content: center;
    color: #0377d2;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.03em;
}

.hch-upgrade-package__price small {
    margin-top: 2px;
    color: #7890a0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
}

.hch-upgrade-package__select {
    position: relative;
}

.hch-upgrade-package__select select {
    width: 100%;
    min-height: 46px;
    padding: 0 37px 0 12px;
    color: #264b63;
    background: #f8fcfe;
    border: 1px solid #bddce9;
    border-radius: 10px;
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
}

.hch-upgrade-package__select > i {
    position: absolute;
    top: 50%;
    right: 13px;
    color: #0491f5;
    pointer-events: none;
    font-size: 10px;
    transform: translateY(-50%);
}

.hch-upgrade-package__action .hch-button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.hch-upgrade-notice {
    padding: 20px;
}

.hch-upgrade-notice .alert {
    margin-bottom: 14px;
}

.hch-upgrade-notice__actions,
.hch-upgrade-config-form__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hch-upgrade-config-form {
    display: grid;
    gap: 16px;
}

.hch-upgrade-config-list {
    display: grid;
    gap: 9px;
    padding: 14px;
}

.hch-upgrade-config-item {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(220px, 1.3fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: #f9fcfe;
    border: 1px solid #d8e8ef;
    border-radius: 12px;
}

.hch-upgrade-config-item > strong {
    color: #193f58;
    font-size: 12px;
    font-weight: 800;
}

.hch-upgrade-config-item > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.hch-upgrade-config-item span {
    color: #7890a0;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hch-upgrade-config-item b {
    overflow: hidden;
    color: #3d6076;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
}

.hch-upgrade-config-item select,
.hch-upgrade-config-item input.form-control {
    width: 100%;
    min-height: 42px;
    color: #264b63;
    border: 1px solid #bddce9;
    border-radius: 9px;
    box-shadow: none;
    font-size: 11px;
}

.hch-upgrade-check,
.hch-upgrade-quantity {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #31566d;
    font-size: 11px;
}

.hch-upgrade-check input {
    width: 17px;
    height: 17px;
    accent-color: #0491f5;
}

.hch-upgrade-quantity input {
    width: 84px !important;
    flex: 0 0 84px;
}

@media (max-width: 767.98px) {
    .hch-upgrade-current {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px;
    }

    .hch-upgrade-current__icon {
        width: 40px;
        height: 40px;
    }

    .hch-upgrade-current__back {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .hch-upgrade-package {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
        padding: 14px;
    }

    .hch-upgrade-package__description ul,
    .hch-upgrade-package__description ol,
    .hch-upgrade-config-item {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 479.98px) {
    .hch-upgrade-heading h1 {
        font-size: 26px;
    }

    .hch-upgrade-options__heading,
    .hch-upgrade-package-list,
    .hch-upgrade-config-list {
        padding: 12px;
    }
}

/* Upgrade confirmation: this stage is rendered through upgradesummary.tpl,
 * separate from the package/configuration selector above. */
.hch-upgrade-summary-page {
    display: grid;
    gap: 16px;
}

.hch-upgrade-summary-heading {
    margin-bottom: 0;
}

.hch-upgrade-summary-alert .alert {
    margin: 0;
}

.hch-upgrade-summary-current,
.hch-upgrade-summary-card,
.hch-upgrade-promo-card,
.hch-upgrade-payment-card {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #d7e7ee;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 80, 112, .06);
}

.hch-upgrade-summary-current {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f4fbfe 0%, #ffffff 68%);
    border-color: #c9e5f1;
}

.hch-upgrade-summary-current__icon,
.hch-upgrade-action-card__icon {
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #0377d2, #0491f5);
    box-shadow: 0 8px 17px rgba(4, 145, 245, .2);
}

.hch-upgrade-summary-current__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 16px;
}

.hch-upgrade-summary-current > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hch-upgrade-summary-current > div > span,
.hch-upgrade-summary-current small {
    color: #6a8293;
    font-size: 10px;
    font-weight: 700;
}

.hch-upgrade-summary-current strong {
    overflow: hidden;
    color: #173e58;
    font-size: 15px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-upgrade-summary-current small > i {
    margin-right: 5px;
    color: #0491f5;
}

.hch-upgrade-summary-current__back {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    color: #0377d2;
    background: #ffffff;
    border: 1px solid #c7e5f1;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 760;
    text-decoration: none;
}

.hch-upgrade-summary-current__back:hover {
    color: #0377d2;
    background: #eaf7fc;
    text-decoration: none;
}

.hch-upgrade-summary-card {
    overflow: hidden;
}

.hch-upgrade-summary-card__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 19px 21px 16px;
    border-bottom: 1px solid #e4eff4;
}

.hch-upgrade-summary-card__heading .hch-card__kicker,
.hch-upgrade-action-card__heading .hch-card__kicker {
    margin-bottom: 4px;
}

.hch-upgrade-summary-card__heading h2,
.hch-upgrade-action-card__heading h2 {
    margin: 0;
    color: #173e58;
    font-size: 18px;
    font-weight: 820;
    letter-spacing: -.025em;
}

.hch-upgrade-summary-card__secure {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    color: #08795d;
    background: #eaf9f4;
    border: 1px solid #c1ebdc;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.hch-upgrade-summary-table-wrap {
    padding: 14px;
    overflow-x: auto;
}

.hch-upgrade-summary-table {
    width: 100%;
    min-width: 480px;
    margin: 0;
    border: 1px solid #d9e8ef;
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.hch-upgrade-summary-table th,
.hch-upgrade-summary-table td {
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid #e4edf2;
    font-size: 12px;
    line-height: 1.45;
}

.hch-upgrade-summary-table th {
    color: #557286;
    background: #f4f9fc;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.hch-upgrade-summary-table th:last-child,
.hch-upgrade-summary-table td:last-child {
    width: 34%;
    color: #173e58;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.hch-upgrade-summary-table td:first-child {
    color: #31566d;
}

.hch-upgrade-summary-table__arrow {
    margin: 0 5px;
    color: #0491f5;
    font-size: 10px;
}

.hch-upgrade-summary-table__line td {
    color: #567286 !important;
    background: #fbfdfe;
}

.hch-upgrade-summary-table__discount td {
    color: #08795d !important;
    background: #f4fcf8;
}

.hch-upgrade-summary-table__total td {
    padding-top: 16px;
    padding-bottom: 16px;
    color: #0377d2 !important;
    background: #edf9fe;
    border-bottom: 0;
    font-size: 13px;
    font-weight: 850;
}

.hch-upgrade-summary-table__total td:last-child {
    font-size: 19px;
    letter-spacing: -.025em;
}

.hch-upgrade-summary-proration {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 14px 14px;
    padding: 11px 13px;
    color: #8b6418;
    background: #fffaf0;
    border: 1px solid #f5d99b;
    border-radius: 11px;
    font-size: 10px;
    line-height: 1.5;
}

.hch-upgrade-summary-proration > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #d49419;
}

.hch-upgrade-summary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.hch-upgrade-promo-card,
.hch-upgrade-payment-card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 19px;
}

.hch-upgrade-action-card__heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.hch-upgrade-action-card__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    font-size: 14px;
}

.hch-upgrade-promo-card > p,
.hch-upgrade-payment-card > p {
    margin: -3px 0 0;
    color: #6a8293;
    font-size: 11px;
    line-height: 1.5;
}

.hch-upgrade-promo-card__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

.hch-upgrade-promo-card .form-control,
.hch-upgrade-payment-card .form-control {
    min-width: 0;
    min-height: 44px;
    margin: 0;
    color: #244b63;
    background: #fbfdfe;
    border: 1px solid #c6e0ec;
    border-radius: 10px;
    box-shadow: none;
    font-size: 11px;
}

.hch-upgrade-promo-card .form-control:focus,
.hch-upgrade-payment-card .form-control:focus {
    border-color: #0491f5;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, .12);
}

.hch-upgrade-promo-card__field .hch-button {
    min-height: 44px;
    justify-content: center;
    padding: 0 14px;
    border: 0;
    white-space: nowrap;
}

.hch-upgrade-payment-card__submit {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    margin-top: 2px;
    border: 0;
}

@media (max-width: 767.98px) {
    .hch-upgrade-summary-current {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px;
    }

    .hch-upgrade-summary-current__icon {
        width: 40px;
        height: 40px;
    }

    .hch-upgrade-summary-current__back {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .hch-upgrade-summary-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .hch-upgrade-summary-card__heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px 14px 14px;
    }

    .hch-upgrade-summary-table-wrap {
        padding: 10px;
    }

    .hch-upgrade-summary-table {
        min-width: 430px;
    }

    .hch-upgrade-summary-table th,
    .hch-upgrade-summary-table td {
        padding: 11px;
        font-size: 11px;
    }

    .hch-upgrade-summary-table__total td:last-child {
        font-size: 17px;
    }

    .hch-upgrade-summary-proration {
        margin: 0 10px 10px;
    }

    .hch-upgrade-promo-card,
    .hch-upgrade-payment-card {
        padding: 16px 14px;
    }

    .hch-upgrade-promo-card__field {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-upgrade-promo-card__field .hch-button {
        width: 100%;
    }
}

.hch-dashboard-page .hch-dashboard-balance-banner strong {
    font-weight: 900;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -0.03em;
}

/* Account menu: compact trigger with a modern, structured profile card. */
.hch-app-page .hch-account-menu,
.hch-dashboard-page .hch-account-menu {
    width: 64px;
    height: 40px;
    flex: 0 0 64px;
}

.hch-app-page .hch-account-trigger,
.hch-dashboard-page .hch-account-trigger {
    width: 64px;
    min-width: 64px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    gap: 5px;
    padding: 3px 6px 3px 4px;
    color: #52697a;
    background: #ffffff;
    border: 1px solid #d7e7ef;
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(15, 67, 96, 0.03);
}

.hch-app-page .hch-account-trigger:hover,
.hch-app-page .hch-account-trigger[aria-expanded="true"],
.hch-dashboard-page .hch-account-trigger:hover,
.hch-dashboard-page .hch-account-trigger[aria-expanded="true"] {
    color: #0377d2;
    background: #ffffff;
    border-color: #7dd3fc;
    box-shadow: 0 0 0 3px rgba(85, 196, 255, 0.13);
}

.hch-app-page .hch-account-trigger .hch-avatar,
.hch-dashboard-page .hch-account-trigger .hch-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: #ffffff;
    background: #0c5f87;
    border: 0;
    border-radius: 11px;
}

.hch-app-page .hch-account-trigger .hch-avatar svg,
.hch-dashboard-page .hch-account-trigger .hch-avatar svg {
    width: 16px;
    height: 16px;
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 1.8;
}

.hch-app-page .hch-account-trigger__chevron,
.hch-dashboard-page .hch-account-trigger__chevron {
    color: #7890a1;
}

.hch-app-page .hch-account-dropdown,
.hch-dashboard-page .hch-account-dropdown {
    top: calc(100% + 9px);
    width: min(300px, calc(100vw - 20px));
    max-height: min(560px, calc(100vh - 84px));
    padding: 8px;
    background: #ffffff;
    border: 1px solid #d9e8ef;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15, 67, 96, 0.14);
    scrollbar-color: #bae6fd transparent;
    scrollbar-width: thin;
}

.hch-app-page .hch-account-dropdown__header,
.hch-dashboard-page .hch-account-dropdown__header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    background: #f1f9fd;
    border: 1px solid #d9edf6;
    border-radius: 11px;
}

.hch-account-dropdown__avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #0377d2;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(7, 89, 133, 0.14);
}

.hch-account-dropdown__avatar svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
}

.hch-account-dropdown__identity {
    min-width: 0;
    display: grid;
    flex: 1;
    gap: 2px;
}

.hch-account-dropdown__identity small {
    color: #0491f5;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hch-account-dropdown__identity strong {
    color: #102f46;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.hch-account-dropdown__identity > span {
    color: #72899a;
    font-size: 9px;
    line-height: 1.3;
}

.hch-app-page .hch-account-nav,
.hch-dashboard-page .hch-account-nav {
    padding-top: 6px;
}

.hch-app-page .hch-account-nav__heading,
.hch-dashboard-page .hch-account-nav__heading {
    padding: 7px 8px 4px;
    color: #7890a1;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .12em;
}

.hch-app-page .hch-account-nav__item,
.hch-dashboard-page .hch-account-nav__item {
    min-height: 40px;
    gap: 8px;
    margin: 2px 0;
    padding: 5px 7px;
    color: #344f62;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}

.hch-app-page .hch-account-nav__item:hover,
.hch-app-page .hch-account-nav__item:focus-visible,
.hch-dashboard-page .hch-account-nav__item:hover,
.hch-dashboard-page .hch-account-nav__item:focus-visible {
    color: #0377d2;
    background: #f5fbfe;
    border-color: #d9edf6;
    outline: none;
}

.hch-app-page .hch-account-nav__item.is-active,
.hch-dashboard-page .hch-account-nav__item.is-active {
    color: #0377d2;
    background: #eaf7fd;
    border-color: #c8e8f5;
}

.hch-app-page .hch-account-nav__item > span:first-child,
.hch-dashboard-page .hch-account-nav__item > span:first-child {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    color: #087bad;
    background: #e9f7fd;
    border-radius: 8px;
}

.hch-app-page .hch-account-nav__item > span:first-child svg,
.hch-dashboard-page .hch-account-nav__item > span:first-child svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.hch-account-nav__arrow {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    display: grid !important;
    place-items: center !important;
    color: #9ab0be !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: rotate(-90deg);
}

.hch-account-nav__arrow svg {
    width: 11px !important;
    height: 11px !important;
}

.hch-app-page .hch-account-nav__divider,
.hch-dashboard-page .hch-account-nav__divider,
.hch-app-page .hch-account-nav .hch-nav-divider,
.hch-dashboard-page .hch-account-nav .hch-nav-divider {
    margin: 6px 7px;
    background: #e3eef3;
}

/* Ticket conversation: chat-style thread with distinct staff/client bubbles. */
.hch-ticket-view-page .hch-ticket-chat,
.hch-ticket-view-page .hch-ticket-composer {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce9ef;
    border-radius: 20px;
    box-shadow: 0 16px 42px rgba(15, 67, 96, 0.08);
}

.hch-ticket-view-page .hch-ticket-chat__header {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    background: #ffffff;
    border-bottom: 1px solid #e1edf2;
}

.hch-ticket-chat__title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.hch-ticket-chat__title-icon,
.hch-ticket-composer__header > span {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #0377d2;
    border-radius: 13px;
    box-shadow: 0 8px 18px rgba(7, 89, 133, 0.16);
}

.hch-ticket-chat__title-icon svg,
.hch-ticket-composer__header > span svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.hch-ticket-chat__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #0491f5;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hch-ticket-chat__title h1 {
    margin: 0;
    color: #102f46;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.18;
}

.hch-ticket-chat__title p {
    margin: 5px 0 0;
    color: #61798b;
    font-size: 11px;
    line-height: 1.45;
}

.hch-ticket-chat__title p strong {
    color: #28475c;
    font-weight: 750;
}

.hch-ticket-chat__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hch-ticket-chat__actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 780;
}

.hch-ticket-chat__close {
    color: #b42335;
    background: #fff5f6;
    border: 1px solid #f3c9cf;
}

.hch-ticket-chat__close:hover,
.hch-ticket-chat__close:focus {
    color: #ffffff;
    background: #d63c4f;
    border-color: #d63c4f;
}

.hch-ticket-chat__thread {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(20px, 3vw, 34px);
    background: #f5f6f8;
}

.hch-ticket-chat__entry {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.hch-ticket-chat__entry--client {
    flex-direction: row-reverse;
}

.hch-ticket-chat__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #0377d2;
    background: #dff3fc;
    border: 1px solid #c2e7f6;
    border-radius: 12px;
}

.hch-ticket-chat__entry--staff .hch-ticket-chat__avatar {
    color: #ffffff;
    background: #0377d2;
    border-color: #0377d2;
}

.hch-ticket-chat__avatar svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.hch-ticket-chat__content {
    width: min(78%, 820px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.hch-ticket-chat__entry--client .hch-ticket-chat__content {
    align-items: flex-end;
}

.hch-ticket-chat__meta {
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    padding: 0 4px;
    color: #7890a1;
    font-size: 9px;
    line-height: 1.35;
}

.hch-ticket-chat__entry--client .hch-ticket-chat__meta {
    justify-content: flex-end;
}

.hch-ticket-chat__meta strong {
    color: #29495f;
    font-size: 10px;
    font-weight: 800;
}

.hch-ticket-chat__role {
    padding: 3px 7px;
    color: #0377d2;
    background: #e4f5fc;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.hch-ticket-chat__entry--client .hch-ticket-chat__role {
    color: #52697a;
    background: #e8edf0;
}

.hch-ticket-view-page .hch-ticket-chat__bubble {
    width: fit-content;
    min-width: min(240px, 100%);
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: #203f54;
    background: #ffffff;
    border: 1px solid #d9e7ee;
    border-radius: 5px 17px 17px 17px;
    box-shadow: 0 9px 24px rgba(15, 67, 96, 0.07);
}

.hch-ticket-view-page .hch-ticket-chat__entry--client .hch-ticket-chat__bubble {
    background: #dff3fc;
    border-color: #bae3f3;
    border-radius: 17px 5px 17px 17px;
}

.hch-ticket-view-page .hch-ticket-chat__bubble .message {
    padding: 15px 17px;
    color: inherit;
    font-size: 12px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    text-align: left;
}

.hch-ticket-view-page .hch-ticket-chat__bubble .message > :first-child {
    margin-top: 0;
}

.hch-ticket-view-page .hch-ticket-chat__bubble .message > :last-child {
    margin-bottom: 0;
}

.hch-ticket-chat__ip {
    margin-top: 12px;
    padding-top: 9px;
    color: #8095a4;
    border-top: 1px solid rgba(115, 151, 171, 0.22);
    font-size: 9px;
}

.hch-ticket-chat__attachments {
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(115, 151, 171, 0.2);
}

.hch-ticket-chat__attachments > strong {
    color: #36596e;
    font-size: 10px;
}

.hch-ticket-chat__attachments .attachment-list {
    margin-bottom: 0;
}

.hch-ticket-chat__rating {
    min-height: 44px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 14px;
    border-top: 1px solid rgba(115, 151, 171, 0.2);
}

.hch-ticket-composer {
    margin-top: 20px;
}

.hch-ticket-composer__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #e1edf2;
}

.hch-ticket-composer__header h2 {
    margin: 0;
    color: #102f46;
    font-size: 18px;
    font-weight: 830;
}

.hch-ticket-composer form {
    padding: 20px;
}

.hch-ticket-composer__identity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.hch-ticket-composer .form-group {
    margin-bottom: 15px;
}

.hch-ticket-composer label {
    margin-bottom: 7px;
    color: #29495f;
    font-size: 10px;
    font-weight: 760;
}

.hch-ticket-composer .form-control,
.hch-ticket-composer .custom-file-label {
    min-height: 44px;
    color: #29495f;
    background: #fbfdfe;
    border: 1px solid #d7e7ef;
    border-radius: 11px;
    font-size: 11px;
}

.hch-ticket-composer textarea.form-control {
    min-height: 170px;
    padding: 13px 14px;
    line-height: 1.65;
    resize: vertical;
}

.hch-ticket-composer .form-control:focus {
    background: #ffffff;
    border-color: #55c4ff;
    box-shadow: 0 0 0 3px rgba(85, 196, 255, 0.13);
}

.hch-ticket-composer__attachment > small {
    display: block;
    margin-top: 7px;
    color: #7890a1;
    font-size: 9px;
}

.hch-ticket-composer__attachment .hch-button {
    min-height: 44px;
    border-radius: 0 11px 11px 0;
}

.hch-ticket-composer__actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 3px;
}

.hch-ticket-composer__actions .hch-button {
    min-width: 120px;
    min-height: 43px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
}

.hch-ticket-composer__attachment .attachment-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 0 !important;
}

.hch-ticket-composer__attachment .custom-file {
    min-width: 0;
    height: 44px;
}

.hch-ticket-composer__attachment .custom-file-label {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 8px 100px 8px 13px;
    overflow: hidden;
    color: #60798a;
    background: #fbfdfe;
    border: 1px solid #cfe1ea;
    border-radius: 11px;
    font-size: 10px;
    line-height: 1.3;
}

.hch-ticket-composer__attachment .custom-file-label::after {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 13px;
    color: #31566c;
    background: #eaf4f8;
    border: 0;
    border-left: 1px solid #cfe1ea;
    border-radius: 0 10px 10px 0;
    font-size: 10px;
    font-weight: 750;
}

.hch-ticket-composer__attachment .custom-file-input {
    height: 44px;
    cursor: pointer;
}

.hch-ticket-composer__attachment .input-group-append {
    display: flex;
}

.hch-ticket-composer__attachment .input-group-append .hch-button {
    min-width: 158px;
    min-height: 44px;
    padding: 8px 14px;
    color: #0377d2;
    background: #ffffff;
    border: 1px solid #bcddea;
    border-radius: 11px;
    font-size: 10px;
    font-weight: 800;
}

.hch-ticket-composer__attachment .input-group-append .hch-button:hover,
.hch-ticket-composer__attachment .input-group-append .hch-button:focus {
    color: #0274c7;
    background: #f0f9fd;
    border-color: #7dd3fc;
}

.hch-ticket-composer__attachment #fileUploadsContainer {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.hch-ticket-composer__attachment #fileUploadsContainer .attachment-group {
    margin: 0 !important;
}

.hch-ticket-composer__attachment > small {
    margin-left: 2px;
}

@media (max-width: 767.98px) {
    .hch-app-page .hch-sidebar__header .hch-brand,
    .hch-dashboard-page .hch-sidebar__header .hch-brand {
        max-width: 134px;
    }

    .hch-app-page .hch-sidebar__header .hch-brand__logo,
    .hch-dashboard-page .hch-sidebar__header .hch-brand__logo {
        max-width: 130px !important;
        max-height: 35px !important;
    }

    .hch-app-page .hch-account-menu,
    .hch-dashboard-page .hch-account-menu,
    .hch-app-page .hch-account-trigger,
    .hch-dashboard-page .hch-account-trigger {
        width: 40px;
        min-width: 40px;
        flex-basis: 40px;
    }

    .hch-app-page .hch-account-trigger,
    .hch-dashboard-page .hch-account-trigger {
        justify-content: center;
        padding: 3px;
    }

    .hch-app-page .hch-account-trigger .hch-avatar,
    .hch-dashboard-page .hch-account-trigger .hch-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .hch-app-page .hch-account-trigger__chevron,
    .hch-dashboard-page .hch-account-trigger__chevron {
        display: none;
    }

    .hch-ticket-view-page .hch-ticket-chat__header {
        align-items: flex-start;
        flex-direction: column;
        padding: 17px;
    }

    .hch-ticket-chat__actions {
        width: 100%;
    }

    .hch-ticket-chat__actions .btn {
        flex: 1;
    }

    .hch-ticket-chat__thread {
        gap: 18px;
        padding: 17px 13px;
    }

    .hch-ticket-chat__avatar {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 10px;
    }

    .hch-ticket-chat__content {
        width: calc(100% - 43px);
    }

    .hch-ticket-view-page .hch-ticket-chat__bubble {
        min-width: min(190px, 100%);
    }

    .hch-ticket-view-page .hch-ticket-chat__bubble .message {
        padding: 13px 14px;
        font-size: 11px;
    }

    .hch-ticket-composer__identity {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .hch-ticket-composer form {
        padding: 16px;
    }

    .hch-ticket-composer__actions {
        flex-direction: column;
    }

    .hch-ticket-composer__actions .hch-button {
        width: 100%;
    }

    .hch-ticket-composer__attachment .attachment-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-ticket-composer__attachment .input-group-append,
    .hch-ticket-composer__attachment .input-group-append .hch-button {
        width: 100%;
    }

    .hch-ticket-composer__attachment .custom-file-label {
        padding-right: 84px;
    }
}

@media (max-width: 429.98px) {
    .hch-app-page .hch-account-dropdown,
    .hch-dashboard-page .hch-account-dropdown {
        position: fixed;
        top: calc(var(--hch-topbar-height) + 6px);
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - var(--hch-topbar-height) - 14px);
        border-radius: 14px;
    }
}

.hch-app-page .hch-nav-list > li > .hch-sidebar__item.is-active,
.hch-app-page .hch-nav-list > li > .hch-sidebar__item.active,
.hch-app-page .hch-nav-list > li > .hch-sidebar__disclosure.is-active {
    color: #0377d2;
    background: #dff3fc;
    background-image: none;
    border: 1px solid #b9e3f5;
    box-shadow: 0 8px 20px rgba(4, 145, 245, 0.09);
    font-weight: 820;
}

.hch-app-page .hch-nav-list > li > .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-app-page .hch-nav-list > li > .hch-sidebar__item.active .hch-sidebar__icon,
.hch-app-page .hch-nav-list > li > .hch-sidebar__disclosure.is-active .hch-sidebar__icon,
.hch-app-page .hch-nav-list > li > .hch-sidebar__disclosure.is-active .hch-sidebar__chevron {
    color: #111827;
}

.hch-app-page .hch-nav-submenu {
    margin: 5px 0 8px 28px;
    padding: 2px 0 2px 6px;
    border: 0 !important;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item {
    min-height: 40px;
    padding: 8px 10px;
    color: #52697a;
    background: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    font-weight: 620;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item:hover,
.hch-app-page .hch-nav-submenu .hch-sidebar__item:focus-visible {
    color: #0274c7;
    background: #f7fbfd;
    border-color: #e0edf3;
    box-shadow: none;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item.is-active,
.hch-app-page .hch-nav-submenu .hch-sidebar__item.active {
    color: #0274c7;
    background: rgba(27, 167, 250, 0.075);
    background-image: none;
    border-color: rgba(27, 167, 250, 0.16);
    box-shadow: none;
    font-weight: 760;
}

.hch-app-page .hch-nav-submenu .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-app-page .hch-nav-submenu .hch-sidebar__item.active .hch-sidebar__icon {
    color: #111827;
}

.hch-app-page .hch-sidebar .hch-sidebar__icon,
.hch-app-page .hch-sidebar .hch-sidebar__icon i {
    color: #111827;
}

.hch-app-page .hch-sidebar .hch-nav-submenu .hch-sidebar__icon,
.hch-app-page .hch-sidebar .hch-nav-submenu .hch-sidebar__icon i {
    color: #111827;
}

.hch-app-page .hch-sidebar .hch-nav-list > li > .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-app-page .hch-sidebar .hch-nav-list > li > .hch-sidebar__item.active .hch-sidebar__icon,
.hch-app-page .hch-sidebar .hch-nav-list > li > .hch-sidebar__disclosure.is-active .hch-sidebar__icon,
.hch-app-page .hch-sidebar .hch-nav-list > li > .hch-sidebar__disclosure.is-active .hch-sidebar__chevron,
.hch-app-page .hch-sidebar .hch-nav-submenu .hch-sidebar__item.is-active .hch-sidebar__icon,
.hch-app-page .hch-sidebar .hch-nav-submenu .hch-sidebar__item.active .hch-sidebar__icon {
    color: #111827;
}

/* Flaticon UIcons Thin: keep every sidebar glyph light, crisp and black. */
.hch-sidebar .hch-sidebar__icon > .fi[class*="fi-tr-"],
.hch-sidebar .hch-sidebar__icon > .fi[class*="fi-ts-"] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827 !important;
    font-size: 15px;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1;
}

.hch-sidebar .hch-nav-submenu .hch-sidebar__icon > .fi[class*="fi-tr-"],
.hch-sidebar .hch-nav-submenu .hch-sidebar__icon > .fi[class*="fi-ts-"] {
    width: 17px;
    height: 17px;
    font-size: 13px;
}

.hch-sidebar .hch-sidebar__icon > .fi[class*="fi-tr-"]::before,
.hch-sidebar .hch-sidebar__icon > .fi[class*="fi-ts-"]::before {
    display: block;
    line-height: 1;
}

/* Dropdown controls use a lighter outlined chevron than the navigation icons. */
.hch-app-page .hch-sidebar .hch-sidebar__chevron,
.hch-app-page .hch-sidebar .hch-sidebar__chevron > .fi.fi-ts-angle-down {
    width: 14px;
    height: 14px;
    display: inline-grid;
    place-items: center;
    color: #7890a0 !important;
    font-size: 10px;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1;
}

.hch-app-page .hch-sidebar .hch-sidebar__disclosure.is-active .hch-sidebar__chevron,
.hch-app-page .hch-sidebar .hch-sidebar__disclosure[aria-expanded="true"] .hch-sidebar__chevron {
    color: #0377d2 !important;
}

.hch-app-page .hch-sidebar .hch-sidebar__icon i.far {
    font-weight: 400;
}

.hch-app-page .hch-sidebar .hch-nav-list > .hch-nav-divider {
    display: block !important;
    width: auto;
    height: 1px;
    margin: 11px 14px;
    background: #dfeaf0;
    border: 0;
}

.hch-app-page .hch-sidebar .hch-nav-submenu > .hch-nav-divider {
    display: none !important;
}

/* Compatibility fallback when an older compiled sidebar still renders the
   account separator as a normal menu item. */
.hch-app-page .hch-sidebar .hch-nav-list > li[menuItemName="HCH Account Divider"] {
    display: block !important;
    width: auto;
    height: 1px;
    min-height: 1px;
    margin: 11px 14px;
    overflow: hidden;
    background: #dfeaf0;
    border: 0;
}

.hch-app-page .hch-sidebar .hch-nav-list > li[menuItemName="HCH Account Divider"] > * {
    display: none !important;
}

@media (max-width: 767.98px) {
    .hch-app-page .hch-sidebar .hch-nav-submenu {
        margin-left: 24px;
        padding-left: 5px;
    }

    .hch-app-page .hch-sidebar .hch-nav-submenu .hch-sidebar__item {
        min-height: 42px;
        padding: 9px;
    }
}

/* Support centre: tickets, announcements, knowledgebase, downloads and
   network status share one responsive dashboard workspace. */
.hch-support-page .hch-main {
    background: #edf7fc;
}

.hch-support-workspace {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 18px;
}

.hch-support-hero {
    min-width: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    color: #ffffff;
    background: linear-gradient(135deg, #0379d5 0%, #0797e9 57%, #2bb9f2 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    box-shadow: 0 16px 30px rgba(4, 126, 213, 0.17);
    overflow: hidden;
}

.hch-support-hero__icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 15px;
}

.hch-support-hero__icon .hch-svg-icon {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hch-support-hero__copy {
    min-width: 0;
}

.hch-support-hero__eyebrow,
.hch-support-card__eyebrow {
    display: block;
    margin: 0 0 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hch-support-hero__eyebrow {
    color: rgba(255, 255, 255, 0.76);
}

.hch-support-hero h1,
.hch-support-hero p,
.hch-support-card h2,
.hch-support-section h2,
.hch-network-issue h3 {
    margin: 0;
}

.hch-support-hero h1 {
    color: #ffffff;
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.hch-support-hero p {
    max-width: 680px;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    line-height: 1.55;
}

.hch-support-hero__action {
    min-height: 42px;
    gap: 7px;
    padding-right: 15px;
    padding-left: 15px;
    color: #057acb;
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 74, 128, 0.14);
    white-space: nowrap;
}

.hch-support-hero__action:hover,
.hch-support-hero__action:focus-visible {
    color: #026db7;
    background: #f7fcff;
    border-color: #ffffff;
}

.hch-support-hero__action .hch-svg-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.hch-support-card,
.hch-support-empty-state {
    min-width: 0;
    background: #ffffff;
    border: 1px solid #d8eaf3;
    border-radius: 18px;
    box-shadow: 0 11px 28px rgba(31, 95, 126, 0.055);
}

.hch-support-card__header,
.hch-support-section__header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hch-support-card__header {
    padding: 17px 19px;
    border-bottom: 1px solid #e2eef4;
}

.hch-support-card__eyebrow {
    color: #078ee2;
}

.hch-support-card h2,
.hch-support-section h2 {
    color: #123c58;
    font-size: 16px;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.hch-support-card__hint {
    flex: 0 0 auto;
    color: #7891a3;
    font-size: 10px;
    line-height: 1.4;
    text-align: right;
}

.hch-support-section {
    min-width: 0;
}

.hch-support-section__header {
    margin: 0 2px 10px;
}

.hch-support-search {
    min-width: 0;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 7px 7px 14px;
    background: #ffffff;
    border: 1px solid #cfe7f2;
    border-radius: 14px;
    box-shadow: 0 9px 20px rgba(26, 94, 124, 0.05);
}

.hch-support-search:focus-within {
    border-color: #35afea;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, 0.1), 0 10px 22px rgba(26, 94, 124, 0.07);
}

.hch-support-search__icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #068bdb;
}

.hch-support-search__icon .hch-svg-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
}

.hch-support-search input {
    width: 100%;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 3px;
    color: #163d56;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    font-size: 12px;
    outline: 0;
}

.hch-support-search input::placeholder {
    color: #91a7b6;
    opacity: 1;
}

.hch-support-search .hch-button {
    min-width: 104px;
    min-height: 42px;
    justify-content: center;
}

.hch-support-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hch-support-category-card {
    min-width: 0;
    min-height: 106px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
    padding: 15px;
    color: #163d56;
    background: #ffffff;
    border: 1px solid #d7eaf3;
    border-radius: 16px;
    box-shadow: 0 9px 22px rgba(31, 95, 126, 0.05);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hch-support-category-card:hover,
.hch-support-category-card:focus-visible {
    color: #163d56;
    border-color: #9bdcf7;
    box-shadow: 0 14px 27px rgba(4, 145, 245, 0.1);
    text-decoration: none;
    transform: translateY(-2px);
}

.hch-support-category-card__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #078ee2;
    background: #e8f7ff;
    border: 1px solid #c9ebfa;
    border-radius: 12px;
}

.hch-support-category-card__icon .hch-svg-icon {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.hch-support-category-card__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding-top: 2px;
}

.hch-support-category-card__copy strong {
    color: #173e59;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.hch-support-category-card__copy small {
    display: -webkit-box;
    overflow: hidden;
    color: #71899a;
    font-size: 10px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hch-support-category-card__count,
.hch-support-restricted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    min-height: 24px;
    padding: 4px 7px;
    color: #087bc4;
    background: #edf8fe;
    border: 1px solid #cceafa;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
}

.hch-support-popular {
    overflow: hidden;
}

.hch-support-popular__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #078ee2;
    background: #e9f8ff;
    border-radius: 11px;
}

.hch-support-popular__icon .hch-svg-icon {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

.hch-support-article-list {
    display: grid;
}

.hch-support-article-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px 18px;
    color: #173e59;
    border-top: 1px solid #e5eff4;
    text-decoration: none;
    transition: background 180ms ease;
}

.hch-support-article-item:hover,
.hch-support-article-item:focus-visible {
    color: #173e59;
    background: #f8fcfe;
    text-decoration: none;
}

.hch-support-article-item__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #078ee2;
    background: #edf8fe;
    border-radius: 9px;
    font-size: 13px;
}

.hch-support-article-item__icon img {
    max-width: 18px;
    max-height: 18px;
    object-fit: contain;
}

.hch-support-article-item__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hch-support-article-item__copy strong {
    color: #173e59;
    font-size: 12px;
    font-weight: 730;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.hch-support-article-item__copy small,
.hch-support-article-item__copy em {
    overflow-wrap: anywhere;
    color: #748d9e;
    font-size: 10px;
    font-style: normal;
    line-height: 1.45;
}

.hch-support-article-item__copy em {
    color: #3d718d;
    font-weight: 700;
}

.hch-support-article-item__arrow {
    width: 18px;
    height: 18px;
    color: #3e9fd5;
}

.hch-support-article-item__arrow .hch-svg-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.hch-support-card__edit {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    color: #507289;
    background: #ffffff;
    border: 1px solid #d8eaf3;
    border-radius: 8px;
    font-size: 11px;
}

.hch-support-card__edit:hover,
.hch-support-card__edit:focus-visible {
    color: #047cc9;
    border-color: #a9ddf4;
}

.hch-support-empty-state {
    min-height: 180px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 28px;
    color: #70899a;
    text-align: center;
}

.hch-support-empty-state > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #078ee2;
    background: #e9f8ff;
    border-radius: 13px;
}

.hch-support-empty-state .hch-svg-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

.hch-support-empty-state strong {
    color: #20445d;
    font-size: 14px;
    font-weight: 750;
}

.hch-support-empty-state p {
    max-width: 460px;
    margin: 0;
    font-size: 11px;
    line-height: 1.55;
}

.hch-announcement-list,
.hch-network-issue-list {
    display: grid;
    gap: 12px;
}

.hch-announcement-card {
    display: grid;
    grid-template-columns: 114px minmax(0, 1fr);
    overflow: hidden;
}

.hch-announcement-card__date {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 7px;
    padding: 21px 14px;
    color: #087fd0;
    background: linear-gradient(180deg, #e8f7ff 0%, #f6fbfd 100%);
    border-right: 1px solid #d9edf6;
    font-size: 10px;
    font-weight: 760;
    text-align: center;
}

.hch-announcement-card__date i {
    font-size: 18px;
}

.hch-announcement-card__content {
    min-width: 0;
    padding: 20px;
}

.hch-announcement-card__title-row {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hch-announcement-card h2 {
    min-width: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.hch-announcement-card h2 a {
    color: #173e59;
    text-decoration: none;
}

.hch-announcement-card h2 a:hover,
.hch-announcement-card h2 a:focus-visible {
    color: #047fce;
}

.hch-announcement-card__body {
    margin-top: 9px;
    color: #607b8e;
    font-size: 11px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.hch-announcement-card__body > :last-child {
    margin-bottom: 0;
}

.hch-announcement-card__edit {
    flex: 0 0 auto;
}

.hch-support-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: #047fce;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.hch-support-text-link:hover,
.hch-support-text-link:focus-visible {
    color: #026cad;
    text-decoration: none;
}

.hch-support-text-link .hch-svg-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.hch-support-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.hch-support-pagination .page-link {
    min-width: 36px;
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    padding: 6px 10px;
    color: #477188;
    background: #ffffff;
    border: 1px solid #d6e9f2;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
}

.hch-support-pagination .page-item.active .page-link {
    color: #ffffff;
    background: #078ee2;
    border-color: #078ee2;
}

.hch-support-pagination .page-item.disabled .page-link {
    color: #a3b7c3;
    background: #f7fafb;
}

.hch-support-ticket-table .dataTables_wrapper .listtable {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.hch-support-ticket-table .dataTables_wrapper table.dataTable {
    border-top-color: #e1edf3 !important;
}

.hch-support-ticket-table .dataTables_wrapper table.dataTable tbody tr {
    cursor: pointer;
}

.hch-support-ticket-table .dataTables_wrapper table.dataTable tbody tr:hover td {
    background: #f8fcfe;
}

.hch-support-ticket-table .ticket-number {
    display: inline-block;
    margin-right: 6px;
    color: #748fa0;
    font-size: 10px;
    font-weight: 700;
}

.hch-support-ticket-table .ticket-subject {
    color: #173e59;
    font-weight: 700;
}

.hch-support-ticket-table .ticket-subject.unread {
    color: #047fce;
    font-weight: 800;
}

.hch-support-ticket-table .label.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.2;
}

.hch-support-table-loading {
    padding: 28px 16px;
    color: #71899a;
    font-size: 11px;
}

.hch-support-table-loading p {
    margin: 0;
}

.hch-status-notices {
    display: grid;
    gap: 10px;
}

.hch-status-notice {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 13px;
    font-size: 11px;
    line-height: 1.5;
}

.hch-status-notice > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
}

.hch-status-notice > span .hch-svg-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.hch-status-notice p {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
}

.hch-status-notice a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: inherit;
    font-weight: 750;
    text-decoration: none;
}

.hch-status-notice a .hch-svg-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.hch-status-notice--success {
    color: #16733f;
    background: #effcf4;
    border-color: #b8ebcc;
}

.hch-status-notice--success > span {
    background: #d8f6e4;
}

.hch-status-notice--info {
    color: #176c9e;
    background: #edf9ff;
    border-color: #bee8fa;
}

.hch-status-notice--info > span {
    background: #d9f2fd;
}

.hch-server-status-card {
    overflow: hidden;
}

.hch-server-status-card__intro {
    margin: 0;
    padding: 14px 19px 4px;
    color: #70899a;
    font-size: 11px;
    line-height: 1.55;
}

.hch-server-status-card__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #18834b;
    font-size: 10px;
    font-weight: 750;
}

.hch-server-status-card__live i {
    color: #2fc469;
    font-size: 7px;
}

.hch-server-status-table {
    margin-top: 12px;
}

.hch-server-status-table .hch-table {
    min-width: 820px;
}

.hch-server-status-table .hch-table th,
.hch-server-status-table .hch-table td {
    text-align: center;
}

.hch-server-status-table .hch-table th:first-child,
.hch-server-status-table .hch-table td:first-child {
    text-align: left;
}

.hch-server-status-table .fas.fa-spinner {
    color: #35a7df;
}

.hch-server-status-table__link {
    color: #087fc9;
    font-weight: 700;
    text-decoration: none;
}

.hch-network-issue {
    overflow: hidden;
}

.hch-network-issue__header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: #fbfdfe;
    border-bottom: 1px solid #e3eef4;
}

.hch-network-issue__header h3 {
    color: #173e59;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.35;
}

.hch-network-issue__header h3 + span {
    display: block;
    margin-top: 3px;
    color: #70899a;
    font-size: 10px;
}

.hch-network-issue__priority {
    flex: 0 0 auto;
    min-height: 24px;
    display: inline-grid;
    place-items: center;
    padding: 4px 8px;
    color: #2d7197;
    background: #e9f7ff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 760;
}

.hch-network-issue__priority--critical,
.hch-network-issue__priority--high {
    color: #b02b38;
    background: #fff0f1;
}

.hch-network-issue__priority--medium {
    color: #9a6500;
    background: #fff7dc;
}

.hch-network-issue__priority--low {
    color: #1c7c4a;
    background: #effcf4;
}

.hch-network-issue__body {
    padding: 16px 18px;
    color: #647e90;
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.hch-network-issue__affecting {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin: 0 0 11px;
    color: #315b74;
}

.hch-network-issue__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 12px;
    color: #71899a;
    font-size: 10px;
}

.hch-network-issue__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.hch-network-issue__meta i {
    color: #078ee2;
}

.hch-network-issue__affected {
    margin: 0 0 11px;
    padding: 7px 9px;
    color: #9a6500;
    background: #fff8e3;
    border: 1px solid #f6dc91;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
}

.hch-network-issue__description > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .hch-support-workspace {
        gap: 14px;
    }

    .hch-support-hero {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 11px;
        padding: 17px 15px;
        border-radius: 17px;
    }

    .hch-support-hero__icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .hch-support-hero__icon .hch-svg-icon {
        width: 23px;
        height: 23px;
    }

    .hch-support-hero h1 {
        font-size: 21px;
    }

    .hch-support-hero p {
        font-size: 10px;
    }

    .hch-support-hero__action {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hch-support-card__header {
        align-items: flex-start;
        padding: 15px;
    }

    .hch-support-card__hint {
        display: none;
    }

    .hch-support-search {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 8px;
        padding: 7px 8px 7px 12px;
    }

    .hch-support-search .hch-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hch-support-category-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .hch-support-category-card {
        min-height: 88px;
        padding: 13px;
    }

    .hch-support-category-card__count {
        max-width: 92px;
    }

    .hch-support-article-item {
        grid-template-columns: 30px minmax(0, 1fr) 16px;
        gap: 9px;
        padding: 12px 14px;
    }

    .hch-support-article-item__icon {
        width: 30px;
        height: 30px;
    }

    .hch-support-restricted {
        grid-column: 2;
        justify-self: start;
    }

    .hch-support-download-item .hch-support-article-item__arrow {
        grid-column: 3;
        grid-row: 1;
    }

    .hch-announcement-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-announcement-card__date {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        padding: 10px 14px;
        border-right: 0;
        border-bottom: 1px solid #d9edf6;
        text-align: left;
    }

    .hch-announcement-card__date i {
        font-size: 13px;
    }

    .hch-announcement-card__content {
        padding: 15px;
    }

    .hch-announcement-card h2 {
        font-size: 15px;
    }

    .hch-status-notice {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hch-status-notice a {
        width: 100%;
        margin-left: 38px;
    }

    .hch-network-issue__header,
    .hch-network-issue__body {
        padding: 14px;
    }
}

@media (max-width: 399.98px) {
    .hch-support-hero h1 {
        font-size: 20px;
    }

    .hch-support-category-card {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
    }

    .hch-support-category-card__icon {
        width: 38px;
        height: 38px;
    }

    .hch-support-category-card__count {
        grid-column: 2;
        justify-self: start;
    }
}

/* Ticket creation follows the support-centre components while retaining
   WHMCS' native departments, captcha, custom fields and attachment hooks. */
.hch-ticket-submit__back {
    min-height: 40px;
    gap: 7px;
    padding-right: 13px;
    padding-left: 13px;
    color: #057bc9;
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 9px 18px rgba(0, 73, 126, 0.13);
    white-space: nowrap;
}

.hch-ticket-submit__back:hover,
.hch-ticket-submit__back:focus-visible {
    color: #026caf;
    background: #f7fcff;
    border-color: #ffffff;
}

.hch-ticket-departments {
    overflow: hidden;
}

.hch-ticket-departments__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 17px;
}

.hch-ticket-department-card {
    min-width: 0;
    min-height: 102px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    padding: 14px;
    color: #173e59;
    background: #fbfdfe;
    border: 1px solid #d8eaf3;
    border-radius: 14px;
    text-decoration: none;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hch-ticket-department-card:hover,
.hch-ticket-department-card:focus-visible {
    color: #173e59;
    background: #ffffff;
    border-color: #9bdcf7;
    box-shadow: 0 12px 24px rgba(4, 145, 245, 0.09);
    text-decoration: none;
    transform: translateY(-2px);
}

.hch-ticket-department-card__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #078ee2;
    background: #e9f8ff;
    border: 1px solid #caebfa;
    border-radius: 11px;
}

.hch-ticket-department-card__icon .hch-svg-icon {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

.hch-ticket-department-card__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.hch-ticket-department-card__copy strong {
    color: #173e59;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.hch-ticket-department-card__copy small {
    color: #71899a;
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.hch-ticket-department-card__arrow {
    width: 18px;
    height: 18px;
    color: #3d9fd4;
}

.hch-ticket-department-card__arrow .hch-svg-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.hch-ticket-departments__empty {
    grid-column: 1 / -1;
}

.hch-ticket-compose-card {
    overflow: hidden;
}

.hch-ticket-compose-card__required {
    color: #7e94a3;
    font-size: 10px;
    white-space: nowrap;
}

.hch-ticket-compose-card__body {
    display: grid;
    gap: 16px;
    padding: 19px;
}

.hch-ticket-form__grid {
    display: grid;
    gap: 14px;
}

.hch-ticket-form__grid--contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hch-ticket-form__grid--settings {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.hch-ticket-form-field {
    min-width: 0;
    display: grid;
    gap: 6px;
    margin: 0;
}

.hch-ticket-form-field label {
    margin: 0;
    color: #31566e;
    font-size: 10px;
    font-weight: 760;
    line-height: 1.35;
}

.hch-ticket-form-field label em {
    color: #d84b56;
    font-style: normal;
}

.hch-ticket-form-field :is(input.form-control, select.form-control, textarea.form-control),
.hch-ticket-custom-fields :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    color: #173e59;
    background: #fbfdfe;
    border: 1px solid #cfe3ee;
    border-radius: 10px;
    box-shadow: none;
    font-size: 12px;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.hch-ticket-form-field :is(input.form-control, select.form-control),
.hch-ticket-custom-fields :is(input, select):not([type="checkbox"]):not([type="radio"]) {
    height: 43px;
    padding: 9px 11px;
}

.hch-ticket-form-field textarea.form-control,
.hch-ticket-custom-fields textarea {
    min-height: 190px;
    padding: 11px;
    line-height: 1.55;
    resize: vertical;
}

.hch-ticket-form-field :is(input.form-control, select.form-control, textarea.form-control):focus,
.hch-ticket-custom-fields :is(input, select, textarea):focus {
    color: #173e59;
    background: #ffffff;
    border-color: #38b2eb;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, 0.1);
    outline: 0;
}

.hch-ticket-form-field input.disabled,
.hch-ticket-form-field input:disabled {
    color: #758d9d;
    background: #f1f7fa;
    cursor: not-allowed;
}

.hch-ticket-form-field small,
.hch-ticket-custom-fields small {
    color: #7890a0;
    font-size: 10px;
    line-height: 1.5;
}

.hch-ticket-form-field--message .markdown-editor + .md-editor,
.hch-ticket-form-field--message .md-editor {
    width: 100%;
    min-width: 0;
    border: 1px solid #cfe3ee;
    border-radius: 10px;
    overflow: hidden;
}

.hch-ticket-form-field--message .md-editor .md-header {
    background: #f4fafc;
    border-bottom-color: #dcebf2;
}

.hch-ticket-form-field--message .md-editor textarea {
    min-height: 190px;
    border: 0;
    border-radius: 0;
}

.hch-ticket-form__error {
    padding: 11px 13px;
    color: #aa313c;
    background: #fff2f3;
    border: 1px solid #f4c3c8;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.55;
}

.hch-ticket-upload {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.hch-ticket-upload--extra {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 8px;
}

.hch-ticket-upload .custom-file {
    min-width: 0;
    height: 43px;
}

.hch-ticket-upload .custom-file-input {
    width: 100%;
    height: 43px;
    cursor: pointer;
}

.hch-ticket-upload .custom-file-label {
    height: 43px;
    display: flex;
    align-items: center;
    padding: 9px 11px;
    color: #70899a;
    background: #fbfdfe;
    border: 1px solid #cfe3ee;
    border-radius: 10px;
    font-size: 11px;
}

.hch-ticket-upload .custom-file-label::after {
    height: 41px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    color: #087dc7;
    background: #eaf8ff;
    border: 0;
    border-left: 1px solid #cfe3ee;
    border-radius: 0 9px 9px 0;
    content: "Pilih file";
    font-size: 10px;
    font-weight: 750;
}

.hch-ticket-upload .custom-file-input:focus ~ .custom-file-label {
    color: #173e59;
    background: #ffffff;
    border-color: #38b2eb;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, 0.1);
}

.hch-ticket-upload__add {
    min-height: 43px;
    gap: 6px;
    padding-right: 12px;
    padding-left: 12px;
    white-space: nowrap;
}

.hch-ticket-upload__hint {
    display: block;
    margin-top: 1px;
}

.hch-ticket-custom-fields {
    display: grid;
    gap: 16px;
}

.hch-ticket-custom-fields :is(input[type="checkbox"], input[type="radio"]) {
    width: auto;
    accent-color: #078ee2;
}

.hch-ticket-form__captcha {
    display: flex;
    justify-content: center;
    min-width: 0;
    padding-top: 2px;
}

.hch-ticket-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 3px;
}

.hch-ticket-form__actions .hch-button {
    min-height: 43px;
}

.hch-ticket-form__actions .hch-button--primary {
    gap: 7px;
}

.hch-ticket-form__actions .hch-svg-icon,
.hch-ticket-confirmation .hch-svg-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.hch-ticket-suggestions {
    display: grid;
    gap: 11px;
    margin-top: 2px;
    padding: 14px;
    background: #f0faff;
    border: 1px solid #cbeafa;
    border-radius: 12px;
}

.hch-ticket-suggestions__header {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

.hch-ticket-suggestions__header > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #087fc9;
    background: #dff4ff;
    border-radius: 9px;
}

.hch-ticket-suggestions__header .hch-svg-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.hch-ticket-suggestions__header strong {
    display: block;
    color: #24516b;
    font-size: 12px;
}

.hch-ticket-suggestions__header p {
    margin: 3px 0 0;
    color: #658294;
    font-size: 10px;
    line-height: 1.45;
}

.hch-ticket-suggestions__list {
    display: grid;
    gap: 6px;
}

.hch-ticket-suggestions__list a {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    gap: 8px;
    align-items: center;
    padding: 9px;
    color: #285b78;
    background: #ffffff;
    border: 1px solid #d8edf7;
    border-radius: 9px;
    text-decoration: none;
}

.hch-ticket-suggestions__list a:hover,
.hch-ticket-suggestions__list a:focus-visible {
    color: #027ac7;
    border-color: #a9ddf4;
    text-decoration: none;
}

.hch-ticket-suggestions__list a > span:first-child {
    color: #078ee2;
    font-size: 12px;
    text-align: center;
}

.hch-ticket-suggestions__list a > span:nth-child(2) {
    min-width: 0;
}

.hch-ticket-suggestions__list strong,
.hch-ticket-suggestions__list small {
    display: block;
    overflow-wrap: anywhere;
}

.hch-ticket-suggestions__list strong {
    font-size: 10px;
    line-height: 1.35;
}

.hch-ticket-suggestions__list small {
    margin-top: 2px;
    color: #7891a1;
    font-size: 9px;
    line-height: 1.4;
}

.hch-ticket-suggestions__list .hch-svg-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #399bd1;
    stroke-width: 1.8;
}

.hch-ticket-confirmation {
    min-height: 250px;
}

.hch-ticket-confirmation strong {
    font-size: 16px;
}

.hch-ticket-confirmation strong a {
    color: #0784d3;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .hch-ticket-submit__back {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hch-ticket-departments__grid,
    .hch-ticket-compose-card__body {
        padding: 14px;
    }

    .hch-ticket-departments__grid,
    .hch-ticket-form__grid--contact {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .hch-ticket-department-card {
        min-height: 86px;
        padding: 12px;
    }

    .hch-ticket-form__grid {
        gap: 12px;
    }

    .hch-ticket-form-field textarea.form-control,
    .hch-ticket-custom-fields textarea,
    .hch-ticket-form-field--message .md-editor textarea {
        min-height: 165px;
    }

    .hch-ticket-upload {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-ticket-upload__add {
        width: 100%;
    }

    .hch-ticket-form__captcha {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .hch-ticket-form__actions {
        flex-direction: column-reverse;
    }

    .hch-ticket-form__actions .hch-button {
        width: 100%;
    }
}

/* Global table controls: DataTables emits different markup between pages.
   Remove its outer button wrappers and keep each actionable page as one card. */
.hch-app .dataTables_wrapper .dataTables_paginate,
#order-standard_cart .dataTables_wrapper .dataTables_paginate {
    max-width: 100%;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hch-app .dataTables_wrapper .dataTables_paginate .pagination,
#order-standard_cart .dataTables_wrapper .dataTables_paginate .pagination {
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hch-app .dataTables_wrapper .dataTables_paginate li,
#order-standard_cart .dataTables_wrapper .dataTables_paginate li {
    display: block;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hch-app .dataTables_wrapper .dataTables_paginate .page-link,
#order-standard_cart .dataTables_wrapper .dataTables_paginate .page-link,
.hch-app .dataTables_wrapper .dataTables_paginate > .paginate_button,
#order-standard_cart .dataTables_wrapper .dataTables_paginate > .paginate_button {
    min-width: 34px;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    margin: 0 !important;
    padding: 5px 9px;
    color: #527087;
    background: #ffffff !important;
    border: 1px solid #d6e4eb !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.hch-app .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
#order-standard_cart .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.hch-app .dataTables_wrapper .dataTables_paginate > .paginate_button.current,
#order-standard_cart .dataTables_wrapper .dataTables_paginate > .paginate_button.current {
    color: #ffffff;
    background: #0b98d1 !important;
    border-color: #0b98d1 !important;
}

.hch-app .dataTables_wrapper .dataTables_paginate .disabled .page-link,
#order-standard_cart .dataTables_wrapper .dataTables_paginate .disabled .page-link,
.hch-app .dataTables_wrapper .dataTables_paginate > .paginate_button.disabled,
#order-standard_cart .dataTables_wrapper .dataTables_paginate > .paginate_button.disabled {
    opacity: 0.48;
    pointer-events: none;
}

/* Ticket attachments are grouped as a single, clear field instead of a row
   of disconnected browser controls. */
.hch-ticket-composer__attachment {
    padding: 14px;
    background: #f7fbfd;
    border: 1px solid #dbeaf0;
    border-radius: 13px;
}

.hch-ticket-composer__attachment > label {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hch-ticket-composer__attachment > label::before {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    color: #0785bb;
    background: #e5f6fc;
    border-radius: 7px;
    font-family: "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 900;
    content: "\\f0c6";
}

.hch-ticket-composer__attachment .attachment-group {
    width: 100%;
}

.hch-ticket-composer__attachment .custom-file {
    width: 100%;
    overflow: hidden;
    border-radius: 11px;
}

.hch-ticket-composer__attachment .custom-file-label {
    color: #58758a;
    background: #ffffff;
}

.hch-ticket-composer__attachment .custom-file-label::after {
    color: #0377d2;
    background: #edf8fc;
}

.hch-ticket-composer__attachment .input-group-append .hch-button {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .hch-app .dataTables_wrapper .dataTables_paginate,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hch-app .dataTables_wrapper .dataTables_paginate::-webkit-scrollbar,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate::-webkit-scrollbar {
        display: none;
    }

    .hch-app .dataTables_wrapper .dataTables_paginate .pagination,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate .pagination {
        width: max-content;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .hch-app .dataTables_wrapper .dataTables_paginate .page-link,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate .page-link,
    .hch-app .dataTables_wrapper .dataTables_paginate > .paginate_button,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate > .paginate_button {
        min-width: 29px;
        min-height: 29px;
        padding: 4px 7px;
        border-radius: 7px !important;
        font-size: 9px;
    }

    .hch-app .dataTables_wrapper .dataTables_paginate .previous .page-link,
    .hch-app .dataTables_wrapper .dataTables_paginate .next .page-link,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate .previous .page-link,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate .next .page-link,
    .hch-app .dataTables_wrapper .dataTables_paginate > .paginate_button.previous,
    .hch-app .dataTables_wrapper .dataTables_paginate > .paginate_button.next,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate > .paginate_button.previous,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate > .paginate_button.next {
        min-width: 29px;
        padding: 0;
        font-size: 0;
    }

    .hch-app .dataTables_wrapper .dataTables_paginate .previous .page-link::before,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate .previous .page-link::before,
    .hch-app .dataTables_wrapper .dataTables_paginate > .paginate_button.previous::before,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate > .paginate_button.previous::before {
        font-size: 17px;
        line-height: 1;
        content: "‹";
    }

    .hch-app .dataTables_wrapper .dataTables_paginate .next .page-link::before,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate .next .page-link::before,
    .hch-app .dataTables_wrapper .dataTables_paginate > .paginate_button.next::before,
    #order-standard_cart .dataTables_wrapper .dataTables_paginate > .paginate_button.next::before {
        font-size: 17px;
        line-height: 1;
        content: "›";
    }

    .hch-ticket-composer__attachment {
        padding: 12px;
        border-radius: 12px;
    }

    .hch-ticket-composer__attachment .input-group-append .hch-button {
        min-width: 0;
    }
}

/* Dashboard active services ------------------------------------------------ */
.hch-dashboard-services-panel .list-group-item {
    min-height: 66px;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 11px 14px !important;
    overflow: visible;
}

.hch-dashboard-services-panel .list-group-item > .row {
    width: 100%;
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
}

.hch-dashboard-services-panel .list-group-item > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 190px;
    padding: 0;
}

.hch-dashboard-services-panel .list-group-item > .row > [class*="col-"]:first-child,
.hch-dashboard-services-panel .list-group-item > .row > [class*="col-"]:last-child {
    flex: 0 0 auto;
}

.hch-dashboard-services-panel .list-group-item > .row > [class*="col-"]:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-left: auto;
}

.hch-dashboard-services-panel .list-group-item .btn,
.hch-dashboard-services-panel .list-group-item .btn-group > .btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 12px;
    color: #0377d2;
    background: #ffffff;
    border: 1px solid #bcddea;
    border-radius: 9px;
    box-shadow: none;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.hch-dashboard-services-panel .list-group-item .btn:hover,
.hch-dashboard-services-panel .list-group-item .btn:focus {
    color: #ffffff;
    background: #078bc3;
    border-color: #078bc3;
}

.hch-dashboard-services-panel .list-group-item .btn-group {
    display: inline-flex;
    align-items: stretch;
    margin: 0 !important;
}

.hch-dashboard-services-panel .list-group-item .btn-group > .btn:first-child {
    border-radius: 9px 0 0 9px;
}

.hch-dashboard-services-panel .list-group-item .btn-group > .dropdown-toggle {
    width: 36px;
    min-width: 36px;
    padding: 0;
    border-left: 0;
    border-radius: 0 9px 9px 0;
}

.hch-dashboard-services-panel .list-group-item .dropdown-menu {
    z-index: 30;
    min-width: 170px;
    margin-top: 6px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #d7e7ef;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(15, 67, 96, 0.14);
}

.hch-dashboard-services-panel .list-group-item .dropdown-menu a {
    display: block;
    padding: 8px 10px;
    color: #34566d;
    border-radius: 7px;
    font-size: 10px;
    text-decoration: none;
}

.hch-dashboard-services-panel .list-group-item .dropdown-menu a:hover,
.hch-dashboard-services-panel .list-group-item .dropdown-menu a:focus {
    color: #0274c7;
    background: #eef9fd;
}

/* Pending remains the internal service state; the client-facing state is a
   live processing indicator on both dashboard and service-list views. */
.hch-status-processing {
    min-height: 25px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 9px !important;
    color: #9a5b00 !important;
    background: #fff6d8 !important;
    border: 1px solid #f5d77d !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.hch-status-processing i {
    font-size: 11px;
}

/* Account chooser --------------------------------------------------------- */
.hch-account-switch-card {
    width: min(100%, 760px);
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8e7ee;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(15, 67, 96, 0.08);
}

.hch-account-switch-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 19px;
    background: linear-gradient(135deg, #f8fcfe, #eef9fd);
    border-bottom: 1px solid #dcebf1;
}

.hch-account-switch-card__icon,
.hch-account-switch-item__avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: #0788be;
    background: #dff4fc;
}

.hch-account-switch-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.hch-account-switch-card__icon svg,
.hch-account-switch-item__avatar svg,
.hch-account-switch-item__arrow svg {
    width: 18px;
    height: 18px;
}

.hch-account-switch-card__header h1 {
    margin: 2px 0 6px;
    color: #0b304a;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 820;
    line-height: 1.2;
}

.hch-account-switch-card__header p:last-child {
    margin: 0;
    color: #71899b;
    font-size: 11px;
}

.hch-account-switch-list {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.hch-account-switch-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 18px;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    color: #21465e;
    background: #ffffff;
    border: 1px solid #d9e8ef;
    border-radius: 13px;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.hch-account-switch-item:hover,
.hch-account-switch-item:focus {
    color: #0377d2;
    border-color: #7dd3fc;
    box-shadow: 0 10px 22px rgba(4, 145, 245, 0.1);
    outline: 0;
    text-decoration: none;
    transform: translateY(-1px);
}

.hch-account-switch-item.disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.hch-account-switch-item__avatar {
    width: 42px;
    height: 42px;
    border-radius: 11px;
}

.hch-account-switch-item__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.hch-account-switch-item__copy strong,
.hch-account-switch-item__copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-account-switch-item__copy strong {
    color: #153d56;
    font-size: 12px;
    font-weight: 800;
}

.hch-account-switch-item__copy > span {
    color: #70899b;
    font-size: 10px;
}

.hch-account-switch-item__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.hch-account-switch-badge {
    padding: 5px 8px;
    color: #06739f;
    background: #e1f5fc;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
}

.hch-account-switch-badge--muted {
    color: #64748b;
    background: #eef2f6;
}

.hch-account-switch-item__arrow {
    display: inline-grid;
    place-items: center;
    color: #87a2b3;
}

.hch-account-switch-empty {
    padding: 24px;
    color: #607b8d;
    text-align: center;
}

@media (max-width: 767.98px) {
    .hch-dashboard-services-panel .list-group-item {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

    .hch-dashboard-services-panel .list-group-item > .row {
        align-items: stretch;
        flex-direction: column;
    }

    .hch-dashboard-services-panel .list-group-item > .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 auto;
    }

    .hch-dashboard-services-panel .list-group-item > .row > [class*="col-"]:last-child {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .hch-dashboard-services-panel .list-group-item .btn-group {
        flex: 1 1 auto;
    }

    .hch-dashboard-services-panel .list-group-item .btn-group > .btn:first-child {
        flex: 1 1 auto;
    }

    .hch-account-switch-card__header {
        padding: 18px;
    }

    .hch-account-switch-list {
        padding: 13px;
    }

    .hch-account-switch-item {
        grid-template-columns: 38px minmax(0, 1fr) 16px;
        padding: 12px;
    }

    .hch-account-switch-item__avatar {
        width: 38px;
        height: 38px;
    }

    .hch-account-switch-item__badges {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .hch-account-switch-item__arrow {
        grid-column: 3;
        grid-row: 1;
    }
}

/* Registration password controls and password generator */
#registration .hch-register-password-control {
    position: relative;
}

#registration .hch-register-form .hch-register-password-control .field {
    width: 100%;
    padding-right: 48px;
}

#registration .hch-register-form .hch-register-password-control .field-icon {
    top: 0;
}

.hch-register-password-toggle,
.hch-password-generator__output > button {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #668096;
    background: #eff8fc;
    border: 0;
    border-radius: 9px;
    transform: translateY(-50%);
    cursor: pointer;
}

.hch-register-password-toggle:hover,
.hch-register-password-toggle:focus-visible,
.hch-register-password-toggle.is-visible,
.hch-password-generator__output > button:hover,
.hch-password-generator__output > button:focus-visible,
.hch-password-generator__output > button.is-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #0274c7, #1ba7fa);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(27, 167, 250, .16);
}

#registration .hch-register-form .generate-password {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    color: #0274c7;
    background: #eef9fe;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    box-shadow: none;
}

#registration .hch-register-form .generate-password:hover,
#registration .hch-register-form .generate-password:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #0274c7, #1ba7fa);
    border-color: transparent;
    outline: 0;
}

#modalGeneratePassword.hch-password-generator .modal-dialog {
    width: min(92vw, 590px);
    max-width: 590px;
    margin-right: auto;
    margin-left: auto;
}

#modalGeneratePassword.hch-password-generator .modal-content {
    background: #ffffff;
    border: 1px solid #cfe8f5;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(7, 89, 128, .2);
    overflow: hidden;
}

#modalGeneratePassword.hch-password-generator .modal-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    color: #123b54;
    background: linear-gradient(135deg, #edf9fe, #dff4fc);
    border-bottom: 1px solid #cdeaf6;
}

.hch-password-generator__heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.hch-password-generator__heading-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    flex: 0 0 38px;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, #0477a8, #19b5e9);
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(27, 167, 250, .2);
}

.hch-password-generator__heading > div {
    min-width: 0;
}

.hch-password-generator__heading span:not(.hch-password-generator__heading-icon) {
    display: block;
    margin-bottom: 2px;
    color: #0781b7;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#modalGeneratePassword.hch-password-generator .modal-title {
    margin: 0;
    color: #123b54;
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -.025em;
}

.hch-password-generator__close {
    width: 34px;
    height: 34px;
    display: inline-grid;
    flex: 0 0 34px;
    place-items: center;
    padding: 0;
    color: #527487;
    background: rgba(255, 255, 255, .75);
    border: 1px solid #b9deed;
    border-radius: 9px;
    cursor: pointer;
}

.hch-password-generator__close .hch-svg-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.hch-password-generator__close:hover,
.hch-password-generator__close:focus-visible {
    color: #0273c2;
    background: #ffffff;
    outline: 0;
}

#modalGeneratePassword.hch-password-generator .modal-body {
    display: grid;
    gap: 17px;
    padding: 22px;
}

.hch-password-generator__field {
    display: grid;
    gap: 7px;
}

.hch-password-generator__field > label {
    margin: 0;
    color: #234d65;
    font-size: 11px;
    font-weight: 800;
}

.hch-password-generator__field > small {
    color: #7690a1;
    font-size: 9px;
    line-height: 1.5;
}

#modalGeneratePassword.hch-password-generator .form-control {
    min-height: 46px;
    color: #173f58;
    background: #fafdff;
    border: 1px solid #c8e0ed;
    border-radius: 11px;
    font-size: 13px;
}

#modalGeneratePassword.hch-password-generator #inputGeneratePasswordLength {
    width: 120px;
}

.hch-password-generator__output {
    position: relative;
}

.hch-password-generator__output .form-control {
    padding-right: 50px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em;
}

.hch-password-generator__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.hch-password-generator__actions .btn,
#modalGeneratePassword.hch-password-generator .modal-footer .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
}

.hch-password-generator__generate {
    color: #ffffff;
    background: linear-gradient(135deg, #0477a8, #13afe4);
    border: 0;
}

.hch-password-generator__copy,
.hch-password-generator__cancel {
    color: #315d74;
    background: #ffffff;
    border: 1px solid #c8e0ed;
}

#modalGeneratePassword.hch-password-generator .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 22px 18px;
    background: #f8fcfe;
    border-top: 1px solid #e0f0f7;
}

#modalGeneratePassword.hch-password-generator .hch-password-generator__insert {
    color: #ffffff;
    background: linear-gradient(135deg, #0274c7, #1ba7fa);
    border: 0;
    box-shadow: 0 7px 16px rgba(27, 167, 250, .18);
}

/* Exact icon alignment for the verification notice. */
.hch-email-verification__icon {
    display: grid;
    place-items: center;
}

.hch-email-verification__icon > svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hch-app-page .hch-email-verification__resend > i,
.hch-app-page .hch-email-verification__resend > .loader,
.hch-app-page .hch-email-verification__resend > .loader i {
    color: #ffffff !important;
}

@media (max-width: 575.98px) {
    #registration .hch-register-form .generate-password {
        width: 100%;
    }

    #modalGeneratePassword.hch-password-generator .modal-dialog {
        width: calc(100vw - 24px);
        margin: 12px auto;
    }

    #modalGeneratePassword.hch-password-generator .modal-header,
    #modalGeneratePassword.hch-password-generator .modal-body,
    #modalGeneratePassword.hch-password-generator .modal-footer {
        padding-right: 15px;
        padding-left: 15px;
    }

    #modalGeneratePassword.hch-password-generator .modal-title {
        font-size: 17px;
    }

    .hch-password-generator__actions,
    #modalGeneratePassword.hch-password-generator .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hch-password-generator__actions .btn,
    #modalGeneratePassword.hch-password-generator .modal-footer .btn {
        width: 100%;
    }
}

/* Google/remote-auth feedback belongs to the login card, not the page top. */
.hch-auth-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hch-auth-card > .hch-auth-provider-feedback {
    box-sizing: border-box;
    max-width: none;
    border-radius: 12px;
}

.hch-auth-card > .hch-auth-provider-feedback.alert-info {
    position: absolute;
    z-index: 20;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(22px, 7vw, 42px);
    align-content: center;
    justify-items: center;
    color: #0273c2;
    background: rgba(245, 252, 255, .94);
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-align: center;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.65;
}

.hch-auth-card > .hch-auth-provider-feedback.alert-info:not([style*="display: none"]) {
    display: grid !important;
}

.hch-auth-card > .hch-auth-provider-feedback.alert-info > .fa-spinner {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #0477a8, #18b5e8);
    border-radius: 12px;
    box-shadow: 0 9px 22px rgba(27, 167, 250, .22);
    font-size: 16px;
}

.hch-auth-card > .hch-auth-provider-feedback:is(.alert-warning, .alert-danger, .alert-success) {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0 0 18px;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    .hch-auth-card > .hch-auth-provider-feedback.alert-info {
        padding: 20px;
        font-size: 11px;
    }

    .hch-auth-card > .hch-auth-provider-feedback.alert-info > .fa-spinner {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hch-auth-card > .hch-auth-provider-feedback .fa-spinner {
        animation-duration: 1.4s;
    }
}

/* Unified account workspace ------------------------------------------------ */
.hch-account-page .primary-content {
    min-width: 0;
}

.hch-account-page .primary-content > .alert,
.hch-account-page .primary-content > .card,
.hch-account-page .primary-content > form > .card,
.hch-account-page .hch-account-section > .card {
    width: 100%;
}

.hch-account-page .card,
.hch-account-page .alert > form,
.hch-account-page .table-container {
    border-color: #cfe5ef;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 75, 105, .065);
}

.hch-account-page .card-body {
    padding: clamp(20px, 2.6vw, 30px);
}

.hch-account-page .card-title,
.hch-account-page h3.card-title {
    margin-bottom: 18px;
    color: #123b54;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 840;
    line-height: 1.25;
}

.hch-account-page .card-body > p,
.hch-account-page .card-body > form > p,
.hch-account-page .primary-content > p {
    color: #627e90;
    font-size: 12px;
    line-height: 1.65;
}

.hch-account-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: -4px 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #deedf3;
}

.hch-account-card__header > div {
    min-width: 0;
}

.hch-account-card__header .hch-eyebrow {
    margin: 0 0 4px;
    color: #0786bb;
}

.hch-account-card__header .card-title {
    margin: 0 0 6px;
}

.hch-account-card__header p:last-child {
    margin: 0;
    color: #6c8596;
    font-size: 11px;
    line-height: 1.55;
}

.hch-account-card__icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    flex: 0 0 40px;
    place-items: center;
    color: #0788be;
    background: #e2f5fc;
    border: 1px solid #c6eaf7;
    border-radius: 12px;
    font-size: 15px;
}

.hch-account-page :is(input.form-control, select.form-control, textarea.form-control, .custom-select) {
    width: 100%;
    min-height: 45px;
    padding: 10px 12px;
    color: #234b62;
    background-color: #fbfdfe;
    border: 1px solid #c8dfe9;
    border-radius: 11px;
    font-size: 12px;
    box-shadow: none;
}

.hch-account-page textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.hch-account-page :is(input.form-control, select.form-control, textarea.form-control, .custom-select):focus {
    background-color: #ffffff;
    border-color: #55c4ff;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(27, 167, 250, .14);
}

.hch-account-page :is(input.form-control, select.form-control, textarea.form-control):disabled {
    color: #718899;
    background: #eef4f7;
    cursor: not-allowed;
}

.hch-account-page .iti,
.hch-account-page .input-group {
    width: 100%;
}

.hch-account-page .form-group {
    min-width: 0;
    margin-bottom: 17px;
}

.hch-account-page .form-group > label,
.hch-account-page .col-form-label,
.hch-account-page fieldset > legend {
    margin: 0 0 7px;
    color: #35596e;
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .015em;
}

.hch-account-page .btn {
    min-height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    white-space: normal;
    box-shadow: none;
}

.hch-account-page .btn-primary,
.hch-account-page .btn-info {
    color: #ffffff;
    background: linear-gradient(135deg, #0384dd, #1ba7fa);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(27, 167, 250, .16);
}

.hch-account-page .btn-default,
.hch-account-page .btn-secondary {
    color: #315d74;
    background: #ffffff;
    border-color: #c7dfe9;
}

.hch-account-page .btn-danger {
    color: #b4232e;
    background: #fff5f5;
    border-color: #fecdd3;
}

.hch-account-page .btn-success {
    color: #08785b;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.hch-account-page .btn:hover,
.hch-account-page .btn:focus-visible {
    transform: translateY(-1px);
    outline: 0;
    box-shadow: 0 8px 18px rgba(15, 83, 116, .13);
}

.hch-account-page .btn.disabled,
.hch-account-page .btn:disabled {
    opacity: .48;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.hch-account-page form > p:last-child,
.hch-account-page .hch-account-actions,
.hch-account-page .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 20px 0 0;
}

.hch-account-page .hch-account-actions--start {
    justify-content: flex-start;
}

.hch-account-page form > p:last-child > .btn + .btn,
.hch-account-page form > input.btn + input.btn {
    margin-left: 8px;
}

.hch-account-page .controls.form-check {
    display: grid;
    gap: 10px;
}

.hch-account-page .controls.form-check > br,
.hch-account-page .hch-account-permission-list > br {
    display: none;
}

.hch-account-page .controls.form-check > label,
.hch-account-page label.form-check,
.hch-account-page label.form-check-inline,
.hch-account-page .hch-account-permission,
.hch-account-page .hch-account-choice {
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 !important;
    padding: 11px 13px;
    color: #294e64;
    background: #f8fcfe;
    border: 1px solid #d7e9f1;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.45;
    cursor: pointer;
}

.hch-account-page :is(.controls.form-check > label, label.form-check, label.form-check-inline, .hch-account-permission, .hch-account-choice):hover {
    background: #f0faff;
    border-color: #9ddcf4;
}

.hch-account-page :is(.hch-account-permission, .hch-account-choice) > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.hch-account-page :is(.hch-account-permission, .hch-account-choice) strong {
    color: #244b62;
    font-size: 11px;
    font-weight: 810;
}

.hch-account-page :is(.hch-account-permission, .hch-account-choice) small,
.hch-account-page .form-check-inline .text-muted {
    color: #718a9b !important;
    font-size: 9px;
    line-height: 1.5;
}

.hch-account-page input.form-check-input:not(.toggle-switch-success) {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    display: grid;
    place-items: center;
    align-self: flex-start;
    margin: 0 !important;
    padding: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1.5px solid #9dc5d6;
    cursor: pointer;
}

.hch-account-page input[type="checkbox"].form-check-input:not(.toggle-switch-success) {
    border-radius: 6px;
}

.hch-account-page input[type="radio"].form-check-input {
    border-radius: 50%;
}

.hch-account-page input[type="checkbox"].form-check-input:not(.toggle-switch-success):checked {
    background: #078cc4;
    border-color: #078cc4;
}

.hch-account-page input[type="checkbox"].form-check-input:not(.toggle-switch-success):checked::after {
    color: #ffffff;
    content: "✓";
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.hch-account-page input[type="radio"].form-check-input:checked {
    background: #ffffff;
    border: 5px solid #078cc4;
    box-shadow: 0 0 0 3px rgba(27, 167, 250, .12);
}

.hch-account-page input[type="radio"].form-check-input:checked::after {
    content: none;
}

.hch-account-page .hch-account-choice-grid,
.hch-account-page .hch-account-permission-list {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.hch-account-page .hch-account-permission-list.w-hidden {
    display: none;
}

.hch-account-page .hch-account-permission-list--visible {
    display: grid;
}

.hch-account-page .hch-account-permission-list > legend,
.hch-account-page .hch-account-choice-grid > legend {
    grid-column: 1 / -1;
}

.hch-account-user-list {
    display: grid;
    gap: 10px;
}

.hch-account-user-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    background: #f9fcfe;
    border: 1px solid #dcebf2;
    border-radius: 13px;
}

.hch-account-user-row__avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #0787bd;
    background: #e3f5fc;
    border-radius: 11px;
}

.hch-account-user-row__identity {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.hch-account-user-row__identity > strong,
.hch-account-user-row__email > strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #214b63;
    font-size: 12px;
    font-weight: 810;
}

.hch-account-user-row__email {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.hch-account-user-row__identity small {
    color: #71899a;
    font-size: 9px;
}

.hch-account-badge {
    padding: 4px 7px;
    color: #0577a5;
    background: #dff4fc;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
}

.hch-account-user-row__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.hch-account-user-list__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 7px 0 0;
    color: #6f8798;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hch-account-user-list__divider::after {
    height: 1px;
    flex: 1;
    background: #deedf3;
    content: "";
}

.hch-account-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 15px 0 0 !important;
    padding: 10px 12px;
    color: #607d90 !important;
    background: #f2f9fc;
    border-radius: 10px;
    font-size: 10px !important;
}

.hch-account-note i {
    margin-top: 3px;
    color: #0a8bc2;
}

.hch-account-page .alert.alert-info > form {
    padding: 15px;
}

.hch-account-page .alert.alert-info > form .row {
    align-items: center;
    row-gap: 10px;
}

.hch-account-page .label,
.hch-account-page .badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850;
}

.hch-account-page .label-success,
.hch-account-page .badge-success {
    color: #08785b;
    background: #dff8ed;
}

.hch-account-page .label-default,
.hch-account-page .badge-secondary {
    color: #7a5a13;
    background: #fff4d4;
}

.hch-account-page .dataTables_wrapper {
    width: 100%;
}

.hch-account-page .dataTables_wrapper > :is(.row, .dataTables_length, .dataTables_filter) {
    margin-bottom: 12px;
}

.hch-account-page .dataTables_wrapper .dataTables_filter input,
.hch-account-page .dataTables_wrapper .dataTables_length select {
    min-height: 40px;
    border: 1px solid #c8dfe9;
    border-radius: 10px;
}

.hch-account-page .table-container {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(27, 167, 250, .28) transparent;
}

.hch-account-page .table-container::-webkit-scrollbar {
    height: 5px;
}

.hch-account-page .table-container::-webkit-scrollbar-thumb {
    background: rgba(27, 167, 250, .28);
    border-radius: 999px;
}

.hch-account-page .modal-content {
    border: 1px solid #cfe5ef;
    border-radius: 17px;
    box-shadow: 0 22px 62px rgba(15, 66, 92, .2);
    overflow: hidden;
}

.hch-account-page .modal-header {
    align-items: center;
    padding: 16px 18px;
    color: #163f57;
    background: #edf9fd;
    border-bottom: 1px solid #d8ebf3;
}

.hch-account-page .modal-title {
    font-size: 17px;
    font-weight: 830;
}

.hch-account-page .modal-header .close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    color: #55778b;
    background: #ffffff;
    border: 1px solid #c7e1eb;
    border-radius: 9px;
    font-size: 20px;
    opacity: 1;
}

.hch-account-page .modal-body {
    padding: 20px;
    color: #567487;
    font-size: 12px;
    line-height: 1.65;
}

.hch-account-page .modal-footer {
    justify-content: flex-end;
    margin: 0;
    padding: 14px 18px 18px;
    background: #f9fcfd;
    border-top: 1px solid #e0edf2;
}

.hch-account-page .social-signin-btns,
.hch-account-page .providerPreLinking {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hch-account-page .twofa-config-link.btn {
    margin-top: 8px;
}

.hch-account-section {
    display: grid;
    gap: 18px;
}

.hch-account-status {
    margin: 0 0 14px !important;
}

.hch-account-password-form {
    max-width: 760px;
}

.hch-account-password-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.hch-account-password-grid .generate-password {
    min-height: 45px;
}

.hch-account-page .password-strength-meter {
    margin-top: 8px;
    border-radius: 999px;
    overflow: hidden;
}

.hch-account-page .twofa-config-link:not(.btn) {
    margin: 0 !important;
    color: #627e90 !important;
}

@media (max-width: 767.98px) {
    .hch-account-page .card-body {
        padding: 17px;
    }

    .hch-account-page .hch-account-choice-grid,
    .hch-account-page .hch-account-permission-list {
        grid-template-columns: 1fr;
    }

    .hch-account-user-row {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: start;
    }

    .hch-account-user-row__actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .hch-account-user-row__actions .btn {
        min-width: 0;
        flex: 1 1 calc(50% - 4px);
    }

    .hch-account-page form > p:last-child,
    .hch-account-page .hch-account-actions,
    .hch-account-page .form-group.text-center {
        align-items: stretch;
        flex-direction: column;
    }

    .hch-account-page form > p:last-child > .btn,
    .hch-account-page .hch-account-actions > .btn,
    .hch-account-page .form-group.text-center > .btn,
    .hch-account-page form > input.btn {
        width: 100%;
        margin: 0 !important;
    }

    .hch-account-page .alert.alert-info > form .row > [class*="col-"] {
        width: 100%;
        max-width: none;
        flex: 0 0 100%;
    }

    .hch-account-page .alert.alert-info > form .btn {
        width: 100%;
    }

    .hch-account-page .dataTables_wrapper .dataTables_filter,
    .hch-account-page .dataTables_wrapper .dataTables_length,
    .hch-account-page .dataTables_wrapper .dataTables_info,
    .hch-account-page .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        float: none;
        margin: 8px 0;
        text-align: left;
    }

    .hch-account-page .dataTables_wrapper .dataTables_filter label,
    .hch-account-page .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin: 0;
    }

    .hch-account-page .table {
        min-width: 620px;
    }

    .hch-account-page .modal-dialog {
        width: calc(100vw - 24px);
        margin: 12px auto;
    }

    .hch-account-password-grid {
        grid-template-columns: 1fr;
    }

    .hch-account-password-grid .generate-password {
        width: 100%;
    }
}

@media (max-width: 419.98px) {
    .hch-account-card__header {
        gap: 12px;
    }

    .hch-account-card__icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .hch-account-user-row__actions {
        flex-direction: column;
    }

    .hch-account-user-row__actions .btn {
        width: 100%;
        flex-basis: auto;
    }
}

/* Prevent iOS Safari from auto-zooming focused form controls. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 767.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    select,
    textarea,
    [contenteditable="true"] {
        font-size: 16px !important;
    }

    input,
    select,
    textarea,
    button,
    .btn {
        touch-action: manipulation;
    }
}

/* Global alert final cascade guard. Keep this at the end of the stylesheet. */
body .alert:not(.hch-auth-provider-feedback) {
    position: relative;
    min-width: 0;
    margin: 0 0 16px;
    padding: 14px 16px 14px 50px !important;
    overflow-wrap: anywhere;
    border: 1px solid #b9ddf0 !important;
    border-radius: 14px !important;
    background: #f2faff !important;
    color: #24536a !important;
    box-shadow: 0 8px 24px rgba(23, 91, 126, 0.06) !important;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
}

body .alert.alert-danger:not(.hch-auth-provider-feedback) {
    border-color: #ffc9c6 !important;
    background: #fff5f4 !important;
    color: #b42318 !important;
}

body .alert.alert-success:not(.hch-auth-provider-feedback) {
    border-color: #a9e7cd !important;
    background: #f0fcf7 !important;
    color: #087b55 !important;
}

body .alert.alert-warning:not(.hch-auth-provider-feedback) {
    border-color: #f3d48a !important;
    background: #fffaf0 !important;
    color: #956000 !important;
}

body .alert:not(.hch-auth-provider-feedback) > :last-child,
body .alert:not(.hch-auth-provider-feedback) ul:last-child,
body .alert:not(.hch-auth-provider-feedback) p:last-child {
    margin-bottom: 0;
}

body .alert.alert-dismissible:not(.hch-auth-provider-feedback) {
    padding-right: 50px !important;
}

@media (max-width: 575.98px) {
    body .alert:not(.hch-auth-provider-feedback) {
        margin-bottom: 14px;
        padding: 13px 14px 13px 46px !important;
        border-radius: 12px !important;
        font-size: 12px;
        line-height: 1.55;
    }

    body .alert.alert-dismissible:not(.hch-auth-provider-feedback) {
        padding-right: 44px !important;
    }
}

/* Static preview counterpart for effective monthly catalogue pricing. */
.hch-product-card__price-comparison {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin: 6px 0 13px;
    font-size: 10px;
    line-height: 1.35;
}

.hch-product-card__price-comparison del {
    color: #91a1ad;
    font-weight: 650;
    text-decoration-color: #ef6b72;
    text-decoration-thickness: 1.5px;
}

.hch-product-card__price-comparison span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    color: #08785b;
    background: #e8f9f1;
    border: 1px solid #bcebd6;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.hch-product-card__price-comparison--term span {
    color: #12668a;
    background: #eaf7fc;
    border-color: #c4e7f4;
}

/* Dashboard active-service actions. Keep the detail action at the edge and
   use one compact menu for cPanel and webmail module links. */
.hch-dashboard-services-panel .list-group-item > .hch-dashboard-service-row {
    width: 100%;
    min-width: 0;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.hch-dashboard-services-panel .hch-dashboard-service-row > [class*="col-"] {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-status {
    flex: 0 0 auto;
}

.hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-info {
    flex: 1 1 160px;
}

.hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-menu-column,
.hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-detail-column {
    flex: 0 0 auto;
}

.hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-menu-column {
    margin-left: auto;
}

.hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-detail-column + .hch-dashboard-service-menu-column {
    margin-left: 0;
}

.hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-detail-column {
    order: 3;
}

.hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-menu-column {
    order: 2;
}

.hch-dashboard-services-panel .hch-dashboard-service-actions-host {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto !important;
}

.hch-dashboard-services-panel .hch-dashboard-service-menu {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.hch-dashboard-services-panel .hch-dashboard-service-menu > .hch-dashboard-service-menu-toggle {
    width: 38px;
    min-width: 38px;
    padding: 0 !important;
    color: #0877a9 !important;
    background: #edf9fd !important;
    border: 1px solid #b9e1f1 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.hch-dashboard-services-panel .hch-dashboard-service-menu-toggle > i {
    margin: 0;
    font-size: 11px;
    transition: transform 160ms ease;
}

.hch-dashboard-services-panel .hch-dashboard-service-menu.show .hch-dashboard-service-menu-toggle > i,
.hch-dashboard-services-panel .hch-dashboard-service-menu-toggle[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.hch-dashboard-services-panel .hch-dashboard-service-menu .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 176px;
}

.hch-dashboard-services-panel .hch-dashboard-service-detail-button {
    min-width: 96px;
}

@media (max-width: 575.98px) {
    .hch-dashboard-services-panel .list-group-item > .hch-dashboard-service-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-info {
        flex: 1 1 190px;
        min-width: 0;
    }

    .hch-dashboard-services-panel .hch-dashboard-service-row > .hch-dashboard-service-menu-column {
        margin-left: auto;
    }

    .hch-dashboard-services-panel .hch-dashboard-service-actions-host {
        width: 100%;
        flex-basis: 100%;
    }

    .hch-dashboard-services-panel .hch-dashboard-service-detail-button {
        min-width: 0;
    }
}

/* Native Twenty-One service rows: one action menu and one right-aligned detail button. */
.hch-dashboard-services-panel .list-group-item > .hch-dashboard-service-item {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.hch-dashboard-services-panel .hch-dashboard-service-item__status,
.hch-dashboard-services-panel .hch-dashboard-service-item__identity,
.hch-dashboard-services-panel .hch-dashboard-service-actions {
    min-width: 0;
    margin: 0 !important;
}

.hch-dashboard-services-panel .hch-dashboard-service-item__status {
    display: flex;
    align-items: center;
}

.hch-dashboard-services-panel .hch-dashboard-service-item__identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    line-height: 1.35;
}

.hch-dashboard-services-panel .hch-dashboard-service-item__identity > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-dashboard-services-panel .hch-dashboard-service-item__identity .text-domain {
    color: #668296;
    font-size: 12px;
}

.hch-dashboard-services-panel .hch-dashboard-service-actions {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    justify-self: end;
    white-space: nowrap;
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu > .hch-dashboard-service-menu-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: #0877a9 !important;
    background: #edf9fd !important;
    border: 1px solid #b9e1f1 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu > .hch-dashboard-service-menu-toggle::after {
    display: none !important;
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu > .hch-dashboard-service-menu-toggle > i {
    width: 7px;
    height: 7px;
    display: block;
    margin: 0;
    line-height: 1;
    pointer-events: none;
    transition: transform 160ms ease;
}

.hch-dashboard-services-panel .hch-dashboard-service-menu-toggle > *,
.hch-dashboard-services-panel .hch-dashboard-service-unified-menu .btn-custom-action > * {
    pointer-events: none;
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu > .hch-dashboard-service-menu-toggle > i::before {
    content: "" !important;
    width: 7px;
    height: 7px;
    display: block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
}

.hch-dashboard-services-panel .hch-dashboard-service-menu-toggle > .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu.show > .hch-dashboard-service-menu-toggle > i,
.hch-dashboard-services-panel .hch-dashboard-service-menu-toggle[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu > .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1050;
    display: none;
    min-width: 190px;
    margin-top: 7px;
    padding: 6px;
    border-color: #cfe4ee;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(17, 71, 97, 0.16);
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu.show > .dropdown-menu,
.hch-dashboard-services-panel .hch-dashboard-service-unified-menu > .dropdown-menu.show {
    display: block;
}

.hch-dashboard-services-panel .hch-dashboard-service-unified-menu .dropdown-item {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.hch-dashboard-services-panel .hch-dashboard-service-detail-button {
    min-width: 116px;
    height: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px !important;
    color: #086f9d !important;
    background: #fff !important;
    border: 1px solid #b9dceb !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

.hch-dashboard-services-panel .hch-dashboard-service-detail-button:hover,
.hch-dashboard-services-panel .hch-dashboard-service-detail-button:focus-visible {
    color: #fff !important;
    background: #0789c3 !important;
    border-color: #0789c3 !important;
}

.hch-dashboard-services-panel .hch-dashboard-service-detail-button > i {
    margin: 0;
    font-size: 11px;
}

.hch-dashboard-services-panel .hch-dashboard-service-detail-button > i::before {
    content: "\2192" !important;
    font-family: inherit !important;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .hch-dashboard-services-panel .list-group-item > .hch-dashboard-service-item {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 9px 10px;
    }

    .hch-dashboard-services-panel .hch-dashboard-service-item__status {
        padding-top: 2px;
    }

    .hch-dashboard-services-panel .hch-dashboard-service-actions {
        width: 100%;
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .hch-dashboard-services-panel .hch-dashboard-service-detail-button {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* Domain workspace: replaces the remaining Twenty-One table presentation. */
.hch-domains-page .hch-domain-list-page {
    display: grid;
    gap: 18px;
}

.hch-domains-page .hch-domain-list-hero {
    min-width: 0;
    align-items: flex-end;
}

.hch-domains-page .hch-domain-list-hero .hch-page-actions {
    flex: 0 0 auto;
}

.hch-domains-page .hch-domain-list-hero .hch-button {
    min-height: 42px;
    gap: 8px;
    border-radius: 11px;
}

.hch-domains-page .hch-domain-list-content,
.hch-domains-page .hch-domain-list-content > .tab-pane {
    min-width: 0;
}

.hch-domains-page .hch-domain-list-card {
    min-width: 0;
    margin: 0;
    overflow: visible;
    background: #ffffff;
    border: 1px solid #d6e8f1;
    border-radius: 18px;
    box-shadow: 0 14px 38px rgba(15, 80, 112, .075);
}

.hch-domains-page .hch-domain-list-card__header {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(540px, 1.8fr);
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: linear-gradient(135deg, #f8fcfe, #eef9fd);
    border-bottom: 1px solid #dcebf2;
    border-radius: 18px 18px 0 0;
}

.hch-domains-page .hch-domain-list-card__header .hch-card__kicker,
.hch-domains-page .hch-domain-list-card__header .hch-card__title,
.hch-domains-page .hch-domain-list-card__header .hch-card__subtitle {
    margin-right: 0;
    margin-left: 0;
}

.hch-domains-page .hch-domain-list-card__header .hch-card__title {
    font-size: 16px;
}

.hch-domains-page .hch-domain-bulk-toolbar {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(145px, 1fr)) minmax(108px, .62fr);
    align-items: stretch;
    gap: 8px;
}

.hch-domains-page .hch-domain-bulk-toolbar > .btn,
.hch-domains-page .hch-domain-more-menu > .btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 9px 11px;
    overflow: hidden;
    color: #28536b;
    background: #ffffff;
    border: 1px solid #c8e1ed;
    border-radius: 11px !important;
    box-shadow: none;
    font-size: 10px;
    font-weight: 780;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-domains-page .hch-domain-bulk-toolbar > .btn:hover,
.hch-domains-page .hch-domain-bulk-toolbar > .btn:focus,
.hch-domains-page .hch-domain-more-menu > .btn:hover,
.hch-domains-page .hch-domain-more-menu > .btn:focus,
.hch-domains-page .hch-domain-more-menu.show > .btn {
    color: #0274c7;
    background: #eaf8fd;
    border-color: #7ccff0;
    box-shadow: 0 0 0 3px rgba(27, 167, 250, .11);
}

.hch-domains-page .hch-domain-bulk-toolbar .btn > i {
    flex: 0 0 auto;
    margin: 0 !important;
    color: #0795cc;
    font-size: 13px;
}

.hch-domains-page .hch-domain-more-menu {
    position: relative;
    min-width: 0;
}

.hch-domains-page .hch-domain-more-menu > .dropdown-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 230px;
    margin: 0;
    padding: 7px;
    background: #ffffff;
    border: 1px solid #d3e7f0;
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(15, 67, 96, .16);
    transform: none !important;
}

.hch-domains-page .hch-domain-more-menu .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    color: #345b72;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: normal;
}

.hch-domains-page .hch-domain-more-menu .dropdown-item:hover,
.hch-domains-page .hch-domain-more-menu .dropdown-item:focus {
    color: #0274c7;
    background: #edf9fd;
}

.hch-domains-page .hch-domain-table-scroll {
    min-width: 0;
    padding: 0;
    overflow-x: auto;
    border-radius: 0 0 18px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(27, 167, 250, .35) transparent;
}

.hch-domains-page .hch-domain-table-scroll::-webkit-scrollbar {
    height: 5px;
}

.hch-domains-page .hch-domain-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(27, 167, 250, .35);
    border-radius: 999px;
}

.hch-domains-page #tableDomainsList_wrapper {
    min-width: 760px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 0;
}

.hch-domains-page #tableDomainsList_wrapper .listtable {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px 16px 0;
}

.hch-domains-page #tableDomainsList_filter {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 12px;
}

.hch-domains-page #tableDomainsList_filter label {
    position: relative;
    margin: 0;
}

.hch-domains-page #tableDomainsList_filter label::before {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: #7d98aa;
    content: "\f002";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-size: 12px;
    font-weight: 900;
    transform: translateY(-50%);
}

.hch-domains-page #tableDomainsList_filter input {
    width: min(260px, 32vw);
    min-height: 40px;
    margin: 0;
    padding: 8px 12px 8px 36px;
    background: #f9fcfe;
    border: 1px solid #cee2ec;
    border-radius: 10px;
    box-shadow: none;
    font-size: 11px;
}

.hch-domains-page #tableDomainsList_info {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 12px;
    padding: 0;
    color: #6f8797;
    font-size: 10px;
}

.hch-domains-page .hch-domain-table {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 760px;
    margin: 0 !important;
    border: 0;
}

.hch-domains-page .hch-domain-table thead th {
    padding: 12px 14px !important;
    color: #668497;
    background: #f2f8fb;
    border-top: 1px solid #e1edf3 !important;
    border-bottom: 1px solid #d8e8f0 !important;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hch-domains-page .hch-domain-table tbody td {
    padding: 13px 14px !important;
    color: #49697d;
    background: #ffffff;
    border-top: 1px solid #e7f0f4 !important;
    font-size: 10.5px;
    line-height: 1.45;
    vertical-align: middle;
}

.hch-domains-page .hch-domain-table tbody tr {
    cursor: pointer;
    transition: background-color .16s ease;
}

.hch-domains-page .hch-domain-table tbody tr:hover td {
    background: #f6fbfd;
}

.hch-domains-page .hch-domain-table input.domids {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #0797cb;
}

.hch-domains-page .hch-domain-table__identity > a {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    color: #0273c2;
    font-size: 11.5px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hch-domains-page .hch-domain-table__identity > small {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    color: #758e9f;
    font-size: 9px;
}

.hch-domains-page .hch-domain-table__identity > small.is-enabled i { color: #0a9a74; }
.hch-domains-page .hch-domain-table__identity > small.is-disabled i { color: #d65a65; }

.hch-domains-page .hch-domain-table .status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 5px 9px;
    border: 0;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 850;
    line-height: 1;
}

.hch-domains-page .hch-domain-table-loading {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #668597;
    font-size: 11px;
}

.hch-domains-page #tableDomainsList_wrapper > .dataTables_length,
.hch-domains-page #tableDomainsList_wrapper > .dataTables_paginate {
    margin: 0;
    padding: 13px 16px 16px;
    color: #6c8597;
    font-size: 10px;
}

.hch-domains-page #tableDomainsList_wrapper .dataTables_length select {
    min-height: 36px;
    margin: 0 6px;
    border: 1px solid #cfe3ed;
    border-radius: 9px;
}

.hch-domains-page #tableDomainsList_wrapper .paginate_button {
    min-width: 36px;
    min-height: 36px;
    margin-left: 5px;
    border: 1px solid #d2e5ee !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 10px;
}

/* Domain-related Bootstrap dialogs use the same compact design language. */
.hch-domains-page .modal-dialog {
    width: min(92vw, 620px);
    max-width: 620px;
    margin: 24px auto;
}

.hch-domains-page .modal-content {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #cfe5ef;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 66, 92, .22);
}

.hch-domains-page .modal-header {
    align-items: center;
    padding: 16px 18px;
    background: #eef9fd;
    border-bottom: 1px solid #d8ebf3;
}

.hch-domains-page .modal-title {
    color: #153e57;
    font-size: 17px;
    font-weight: 850;
}

.hch-domains-page .modal-body {
    padding: 20px;
    color: #567487;
    font-size: 12px;
    line-height: 1.65;
}

.hch-domains-page .modal-footer {
    gap: 9px;
    padding: 14px 18px 18px;
    background: #f9fcfd;
    border-top: 1px solid #e0edf2;
}

@media (max-width: 1199.98px) {
    .hch-domains-page .hch-domain-list-card__header {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .hch-domains-page .hch-domain-list-hero {
        align-items: stretch;
    }

    .hch-domains-page .hch-domain-list-hero .hch-page-actions,
    .hch-domains-page .hch-domain-list-hero .hch-button {
        width: 100%;
    }

    .hch-domains-page .hch-domain-list-card__header {
        padding: 15px;
        border-radius: 15px 15px 0 0;
    }

    .hch-domains-page .hch-domain-bulk-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hch-domains-page .hch-domain-bulk-toolbar > .btn,
    .hch-domains-page .hch-domain-more-menu > .btn {
        min-height: 44px;
        white-space: normal;
    }

    .hch-domains-page .hch-domain-more-menu > .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        width: min(260px, calc(100vw - 56px));
    }

    .hch-domains-page .hch-domain-list-card {
        border-radius: 15px;
    }

    .hch-domains-page .modal-dialog {
        width: calc(100vw - 24px);
        margin: 12px auto;
    }

    .hch-domains-page .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hch-domains-page .modal-footer .btn {
        width: 100%;
        margin: 0 !important;
    }
}

/* Website-primary palette final cascade guard.
   Keeps legacy WHMCS buttons aligned with hypercloudhost.com's #0491F5 blue. */
body .hch-button:not(.hch-button--secondary):not(.hch-button--danger),
body .btn.btn-primary,
body button.btn-primary,
body input.btn-primary {
    color: #ffffff !important;
    background: var(--hch-gradient-primary) !important;
    border-color: #0491f5 !important;
    box-shadow: 0 9px 20px rgba(4, 145, 245, .18);
}

body .hch-button:not(.hch-button--secondary):not(.hch-button--danger):hover,
body .hch-button:not(.hch-button--secondary):not(.hch-button--danger):focus,
body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body button.btn-primary:hover,
body button.btn-primary:focus,
body input.btn-primary:hover,
body input.btn-primary:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0268bb 0%, #037fdc 52%, #28adfb 100%) !important;
    border-color: #0377d2 !important;
    box-shadow: 0 10px 24px rgba(4, 145, 245, .25) !important;
}

/* Global responsive table containment ------------------------------------
   Keep WHMCS/DataTables controls inside their card. Only the tabular data
   becomes horizontally scrollable on compact screens. */
:where(.hch-app, .hch-app-page) .primary-content :where(
    .table-container,
    .table-responsive,
    .hch-global-table-scroll,
    .dataTables_wrapper,
    .dataTables_wrapper .listtable,
    .dataTables_scroll,
    .dataTables_scrollBody
),
.hch-cart-shell #order-standard_cart :where(
    .table-container,
    .table-responsive,
    .hch-global-table-scroll,
    .dataTables_wrapper,
    .dataTables_wrapper .listtable,
    .dataTables_scroll,
    .dataTables_scrollBody
) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

:where(.hch-app, .hch-app-page) .primary-content :where(
    .table-container,
    .table-responsive,
    .hch-global-table-scroll
),
.hch-cart-shell #order-standard_cart :where(
    .table-container,
    .table-responsive,
    .hch-global-table-scroll
) {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(4, 145, 245, .42) transparent;
}

:where(.hch-app, .hch-app-page) .primary-content :where(
    .table-container,
    .table-responsive,
    .hch-global-table-scroll
)::-webkit-scrollbar,
.hch-cart-shell #order-standard_cart :where(
    .table-container,
    .table-responsive,
    .hch-global-table-scroll
)::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

:where(.hch-app, .hch-app-page) .primary-content :where(
    .table-container,
    .table-responsive,
    .hch-global-table-scroll
)::-webkit-scrollbar-thumb,
.hch-cart-shell #order-standard_cart :where(
    .table-container,
    .table-responsive,
    .hch-global-table-scroll
)::-webkit-scrollbar-thumb {
    background: rgba(4, 145, 245, .42);
    border-radius: 999px;
}

:where(.hch-app, .hch-app-page) .primary-content .hch-global-table-scroll:focus-visible,
.hch-cart-shell #order-standard_cart .hch-global-table-scroll:focus-visible {
    outline: 3px solid rgba(4, 145, 245, .18);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    :where(.hch-app, .hch-app-page) .primary-content,
    :where(.hch-app, .hch-app-page) .primary-content > *,
    :where(.hch-app, .hch-app-page) .primary-content :where([class*="col-"], .card-body, .panel-body, form),
    .hch-cart-shell #order-standard_cart,
    .hch-cart-shell #order-standard_cart :where([class*="col-"], .card-body, .panel-body, form) {
        min-width: 0;
        max-width: 100%;
    }

    /* Fallback for legacy/module tables that are not supplied with a WHMCS
       .table-responsive wrapper. DataTables and redesigned tables keep their
       own dedicated containers. */
    :where(.hch-app, .hch-app-page) .primary-content :where(.card-body, .panel-body, form) > table.table:not(.dataTable):not(.table-list),
    .hch-cart-shell #order-standard_cart :where(.card-body, .panel-body, form) > table.table:not(.dataTable):not(.table-list) {
        width: 100%;
        max-width: 100%;
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(4, 145, 245, .42) transparent;
    }

    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper,
    .hch-domains-page #tableDomainsList_wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper .listtable,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper .listtable,
    .hch-domains-page #tableDomainsList_wrapper .listtable {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: visible !important;
    }

    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper .dataTables_filter,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper .dataTables_filter,
    .hch-domains-page #tableDomainsList_filter {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
    }

    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper .dataTables_filter label,
    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper .dataTables_filter input,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper .dataTables_filter label,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper .dataTables_filter input,
    .hch-domains-page #tableDomainsList_filter label,
    .hch-domains-page #tableDomainsList_filter input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper .dataTables_info,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper .dataTables_info,
    .hch-domains-page #tableDomainsList_info {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 12px 12px !important;
    }

    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper table.table-list,
    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper table.dataTable,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper table.table-list,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper table.dataTable {
        grid-column: 1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        min-width: 640px;
        margin: 0 !important;
    }

    .hch-domains-page #tableDomainsList_wrapper .hch-domain-table {
        min-width: 720px !important;
    }

    :where(.hch-app, .hch-app-page) .primary-content table :where(th, td),
    .hch-cart-shell #order-standard_cart table :where(th, td) {
        max-width: 280px;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper > :where(.dataTables_length, .dataTables_paginate),
    .hch-cart-shell #order-standard_cart .dataTables_wrapper > :where(.dataTables_length, .dataTables_paginate) {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    .hch-services-table {
        overflow: hidden !important;
    }

    .hch-services-table .dataTables_scrollBody {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .hch-upgrade-summary-table-wrap .hch-upgrade-summary-table {
        min-width: 520px;
    }

    .hch-invoice-card .table-responsive .hch-invoice-table,
    .hch-global-table-scroll .renewals,
    .hch-global-table-scroll #tableLinkedAccounts {
        width: 100%;
        min-width: 640px;
    }
}

@media (max-width: 419.98px) {
    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper table.table-list,
    :where(.hch-app, .hch-app-page) .primary-content .dataTables_wrapper table.dataTable,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper table.table-list,
    .hch-cart-shell #order-standard_cart .dataTables_wrapper table.dataTable {
        min-width: 600px;
    }

    .hch-domains-page #tableDomainsList_wrapper .hch-domain-table {
        min-width: 680px !important;
    }
}

/* Compact global context cards: filters and quick actions in client pages. */
@media (min-width: 1280px) {
    .hch-content-grid--with-context {
        grid-template-columns: minmax(210px, 232px) minmax(0, 1fr);
        gap: 20px;
    }
}

.hch-context-sidebar .sidebar + .sidebar {
    margin-top: 10px;
}

.hch-context-sidebar .card-sidebar {
    margin-bottom: 10px !important;
    border-color: #d2dce6;
    border-radius: 9px;
    box-shadow: 0 6px 16px rgba(15, 80, 112, 0.055);
}

.hch-context-sidebar .card-sidebar > .card-header {
    min-height: 46px;
    background: #ffffff;
}

.hch-context-sidebar .card-sidebar.is-expanded > .card-header {
    color: #21587f;
    background: #ffffff;
}

.hch-context-sidebar .card-sidebar > .card-header .card-title {
    min-height: 46px;
    padding: 8px 10px;
    gap: 8px;
    font-size: 12px;
    font-weight: 750;
}

.hch-context-sidebar .card-sidebar > .card-header .card-title > i:not(.card-minimise) {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: 11px;
}

.hch-context-sidebar .card-sidebar > .card-header .card-minimise {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 9px;
}

.hch-context-sidebar .card-sidebar .collapsable-card-body {
    border-top-color: #e1e8ef;
}

.hch-context-sidebar .card-sidebar .list-group-item {
    min-height: 36px;
    padding: 8px 11px;
    color: #50657a;
    border-color: #edf1f5;
    font-size: 11px;
    line-height: 1.25;
}

.hch-context-sidebar .card-sidebar .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

.hch-context-sidebar .card-sidebar .sidebar-menu-item-icon-wrapper {
    display: inline-flex;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: #285b80;
    font-size: 11px;
}

.hch-context-sidebar .card-sidebar .sidebar-menu-item-label {
    min-width: 0;
}

.hch-context-sidebar .card-sidebar .sidebar-menu-item-badge,
.hch-context-sidebar .card-sidebar > .card-header .badge {
    margin-left: auto;
}

.hch-context-sidebar .card-sidebar .badge {
    min-width: 18px;
    padding: 3px 5px;
    color: #1672aa;
    background: #dff2ff;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.hch-context-sidebar .card-sidebar a.list-group-item:hover,
.hch-context-sidebar .card-sidebar a.list-group-item:focus {
    padding-left: 13px;
    color: #0879bd;
    background: #f1f9fe;
}

.hch-context-sidebar .card-sidebar a.list-group-item.active {
    color: #0879bd;
    background: #e1f3ff;
    border-color: #bce4f8;
}

.hch-context-sidebar .card-sidebar a.list-group-item.active .badge {
    color: #0879bd;
    background: #ffffff;
}

/* Account avatar: use the signed-in email's Gravatar image. */
.hch-avatar--gravatar,
.hch-account-dropdown__avatar--gravatar {
    overflow: hidden;
    background: #eaf6fc;
}

.hch-avatar--gravatar img,
.hch-account-dropdown__avatar--gravatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Mobile domain registration: keep the editable field distinct from its card. */
.hch-cart-domain-page #order-standard_cart .domain-checker-bg .input-group-box .form-control,
.hch-domain-register-page .domain-checker-bg .input-group-box .form-control {
    color: #073b60 !important;
    background: #ffffff !important;
    border: 1px solid #9dcfe5 !important;
    caret-color: #0377d2;
    -webkit-text-fill-color: #073b60;
    box-shadow: inset 0 1px 1px rgba(7, 59, 96, 0.04) !important;
}

.hch-cart-domain-page #order-standard_cart .domain-checker-bg .input-group-box .form-control::placeholder,
.hch-domain-register-page .domain-checker-bg .input-group-box .form-control::placeholder {
    color: #6688a2 !important;
    opacity: 1;
}

.hch-cart-domain-page #order-standard_cart .domain-checker-bg .input-group-box:focus-within,
.hch-domain-register-page .domain-checker-bg .input-group-box:focus-within {
    border-color: #0491f5 !important;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, 0.17), 0 10px 24px rgba(4, 145, 245, 0.12) !important;
}

.hch-cart-domain-page #order-standard_cart .domain-checker-bg .input-group-box .form-control:focus,
.hch-domain-register-page .domain-checker-bg .input-group-box .form-control:focus {
    color: #073b60 !important;
    background: #ffffff !important;
    border-color: #0491f5 !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(4, 145, 245, 0.18) !important;
}

@media (max-width: 767.98px) {
    .hch-cart-domain-page #order-standard_cart .domain-checker-bg .input-group-box,
    .hch-domain-register-page .domain-checker-bg .input-group-box {
        padding: 8px !important;
        background: #edf9ff !important;
        border: 1px solid #8ccde8 !important;
        border-radius: 13px !important;
    }

    .hch-cart-domain-page #order-standard_cart .domain-checker-bg .input-group-box .form-control,
    .hch-domain-register-page .domain-checker-bg .input-group-box .form-control {
        min-height: 54px !important;
        height: 54px !important;
        padding: 0 15px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }

    .hch-cart-domain-page #order-standard_cart .domain-checker-bg .input-group-box .btn,
    .hch-domain-register-page .domain-checker-bg .input-group-box .btn {
        min-height: 50px;
        border-radius: 10px !important;
    }
}

/* Domain register fallback: the JavaScript enhancer applies these dashboard
   classes even when WHMCS still serves an older compiled order-form template. */
.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin: 0 0 20px;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro__eyebrow,
.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__eyebrow {
    display: block;
    color: #078ce5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro h1 {
    margin: 7px 0 6px;
    color: #063d62;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.1;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro p {
    max-width: 650px;
    margin: 0;
    color: #66849a;
    font-size: 14px;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro__icon,
.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #078ce5;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #a9dff2;
    border-radius: 14px;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro__icon {
    width: 50px;
    height: 50px;
    font-size: 19px;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .domain-checker-container.hch-domain-search-card {
    overflow: hidden !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 94% 104%, transparent 0 66px, rgba(255, 255, 255, .5) 67px 94px, transparent 95px),
        linear-gradient(122deg, #e9f9ff 0%, #c9efff 54%, #e3faf3 100%) !important;
    border: 1px solid #b9e4ef !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 42px rgba(20, 88, 125, .1) !important;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 28px 28px 10px;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__top h2 {
    max-width: 760px;
    margin: 8px 0 7px;
    color: #073c60;
    font-size: clamp(23px, 2.2vw, 31px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__top p {
    max-width: 770px;
    margin: 0;
    color: #557d95;
    font-size: 12px;
    line-height: 1.6;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__icon {
    width: 42px;
    height: 42px;
    font-size: 15px;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .domain-checker-bg {
    padding: 12px 28px 10px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .domain-checker-bg .row > [class*="col-"] {
    width: 100% !important;
    max-width: 820px;
    float: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .hch-domain-search-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 10px;
    padding: 7px;
    background: #ffffff;
    border: 1px solid #97d6ee;
    border-radius: 14px;
    box-shadow: 0 9px 22px rgba(19, 132, 183, .12);
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .hch-domain-search-controls .form-control,
.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .hch-domain-search-controls .btn {
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    border-radius: 9px !important;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .hch-domain-search-controls .form-control {
    padding: 0 16px !important;
    color: #073b60 !important;
    background: #ffffff !important;
    border: 1px solid #cae5f0 !important;
    font-size: 15px !important;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .hch-domain-search-controls .btn {
    color: #ffffff !important;
    background: linear-gradient(112deg, #087edc 0%, #24aeef 100%) !important;
    border-color: transparent !important;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 3px 28px 20px;
    color: #52758a;
    font-size: 10px;
    font-weight: 700;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__benefits span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__benefits i {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    color: #0aa676;
    background: #def9ef;
    border: 1px solid #b9eedc;
    border-radius: 6px;
    font-size: 9px;
}

@media (max-width: 767.98px) {
    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro {
        align-items: flex-start;
        gap: 12px;
    }

    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro h1 {
        font-size: 29px;
    }

    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-register-intro__icon {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }

    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .domain-checker-container.hch-domain-search-card {
        border-radius: 17px !important;
    }

    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__top {
        gap: 12px;
        padding: 20px 18px 8px;
    }

    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__top h2 {
        font-size: 23px;
    }

    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .domain-checker-bg {
        padding: 12px 18px 9px !important;
    }

    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card .hch-domain-search-controls {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hch-cart-domain-page #order-standard_cart.hch-domain-register-page .hch-domain-search-card__benefits {
        gap: 10px 14px;
        padding: 3px 18px 17px;
        font-size: 9px;
    }
}

/* Keep localisation visuals authoritative on account and domain pages that
   provide their own generic modal styling later in this stylesheet. */
#modalChooseLanguage.hch-language-modal-shell .modal-content.hch-language-modal {
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #c9e3ef !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 70px rgba(4, 49, 78, .22) !important;
}

#modalChooseLanguage.hch-language-modal-shell .hch-language-modal__header {
    background: linear-gradient(122deg, #eaf9ff 0%, #d7f3ff 56%, #e8faf4 100%) !important;
    border-bottom: 1px solid #cde8f3 !important;
}

#modalChooseLanguage.hch-language-modal-shell .hch-language-modal .modal-body {
    padding: 23px 24px 26px !important;
    color: #5d7f93 !important;
    background: #f8fcfe !important;
}

#modalChooseLanguage.hch-language-modal-shell .hch-language-option {
    color: #37667f !important;
    background: #ffffff !important;
    border: 1px solid #d7e8f0 !important;
    border-radius: 11px !important;
}

#modalChooseLanguage.hch-language-modal-shell .hch-language-option.active {
    color: #0679bd !important;
    background: #eef9ff !important;
    border-color: #4ab8eb !important;
}

#modalChooseLanguage.hch-language-modal-shell .hch-language-modal__footer {
    background: #ffffff !important;
    border-top: 1px solid #dfebf1 !important;
}

@media (max-width: 767.98px) {
    #modalChooseLanguage.hch-language-modal-shell .modal-content.hch-language-modal {
        border-radius: 17px !important;
    }

    #modalChooseLanguage.hch-language-modal-shell .hch-language-modal .modal-body {
        padding-right: 17px !important;
        padding-left: 17px !important;
    }
}

/* Quick email account: the address and credentials use separate rows. This
   prevents the provider's inline form controls from crowding one another. */
.hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] {
    width: min(100%, 400px);
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px !important;
}

.hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] > .hch-quick-email__address {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 !important;
}

.hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] > input[type="password"] {
    width: 100% !important;
    max-width: 205px;
    min-width: 0;
    grid-column: 1;
    grid-row: 2;
    margin: 0 !important;
}

.hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] > :is(button, .btn, input[type="submit"]) {
    min-width: 116px;
    min-height: 42px;
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    white-space: nowrap;
}

.hch-service-detail .hch-quick-email-card .hch-quick-email__credentials {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    gap: 10px;
}

.hch-service-detail .hch-quick-email-card .hch-quick-email__credentials > input[type="password"],
.hch-service-detail .hch-quick-email-card .hch-quick-email__credentials > .input-group {
    width: 100% !important;
    max-width: 205px;
    min-width: 0;
    margin: 0 !important;
}

.hch-service-detail .hch-quick-email-card .hch-quick-email__credentials input[type="password"] {
    width: 100% !important;
    min-width: 0;
    min-height: 42px;
}

.hch-service-detail .hch-quick-email-card .hch-quick-email__credentials > .input-group > :first-child {
    border-right: 1px solid #cbdbe4 !important;
    border-radius: 10px !important;
}

.hch-service-detail .hch-quick-email-card .hch-quick-email__credentials > :is(button, .btn, input[type="submit"]) {
    min-width: 116px;
    min-height: 42px;
    margin: 0 !important;
    white-space: nowrap;
}

@media (max-width: 399.98px) {
    .hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] > input[type="password"],
    .hch-service-detail .hch-quick-email-card form[data-hch-quick-email-ready="1"] > :is(button, .btn, input[type="submit"]) {
        width: 100% !important;
        max-width: none;
        grid-column: 1;
        grid-row: auto;
    }

    .hch-service-detail .hch-quick-email-card .hch-quick-email__credentials {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .hch-service-detail .hch-quick-email-card .hch-quick-email__credentials > :is(button, .btn, input[type="submit"]) {
        width: 100%;
    }
}