/*
 * Silverhost client area pages (child of Nexus). Loaded after silverhost.css.
 * Tokens (--sh-*) and the shared components (.sh-btn, .sh-card, .sh-chip...) live
 * in silverhost.css; this file only restyles WHMCS pages.
 *
 *   1. Page heading and layout
 *   2. Guest pages (login, register, password reset, 2FA, contact)
 *   3. Sidebar
 *   4. Tables (DataTables lists) and status pills
 *   5. Dashboard (clientareahome)
 *   6. Account pages (services, product details, invoices, tickets, domains, forms)
 *   7. Knowledgebase, announcements, server status, domain pricing
 *   8. Footer and small screens
 */

/* ---------- 1. Page heading and layout ---------- */
.sh-pagehead { padding-top: 8px; padding-bottom: 8px; }
.sh .sh-page-title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); letter-spacing: -0.03em; margin: 0; }
.sh-page-tagline { color: var(--sh-muted); margin: 6px 0 0; max-width: 65ch; }
.sh .primary-content > .card:first-child, .sh .primary-content > form > .card:first-child { margin-top: 0; }
.sh:not(.sh-in-cart) .card-body { padding: 24px; }
.sh .card > .card-body.extra-padding { padding: 32px; }
.sh h3.card-title, .sh .card-title { letter-spacing: -0.01em; }
.sh .primary-content .card { margin-bottom: 24px; }
.sh .primary-content .card .card { margin-bottom: 16px; }
.sh .header-lined { border: 0; padding: 0; margin-bottom: 16px; }
.sh hr { border-top-color: var(--sh-hairline); }
.sh:not(.sh-in-cart) .btn-sm, .sh:not(.sh-in-cart) .btn-xs { border-radius: 8px; }
.sh:not(.sh-in-cart) .btn-xs { padding: 4px 10px; font-size: .8125rem; }
.sh:not(.sh-in-cart) .btn { min-height: 40px; }
.sh:not(.sh-in-cart) .btn.btn-sm, .sh:not(.sh-in-cart) .btn.btn-xs, .sh:not(.sh-in-cart) .input-group .btn-reveal-pw { min-height: 32px; }
.sh:not(.sh-in-cart) .input-group > .input-group-append > .btn { min-height: 44px; }
.sh .text-danger { color: var(--sh-danger) !important; }
.sh .text-success { color: var(--sh-ok) !important; }
.sh .text-info { color: var(--sh-cyan-ink) !important; }
.sh .bg-white { background-color: var(--sh-surface) !important; }
.sh .border-bottom, .sh .border-top { border-color: var(--sh-hairline) !important; }

/* ---------- 2. Guest pages ---------- */
/* Login: form + photo panel */
.sh-auth {
    display: grid; gap: 24px; align-items: stretch; max-width: 1080px; margin: 8px auto 24px;
}
@media (min-width: 992px) { .sh-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 16px; } }
.sh-auth-form {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    padding: 32px 24px; display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 576px) { .sh-auth-form { padding: 48px; } }
.sh-auth-head { margin-bottom: 28px; }
.sh .sh-auth-title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.03em; margin-bottom: 8px; }
.sh-auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.sh .sh-auth-row .custom-control-label { font-weight: 400; color: var(--sh-ink); line-height: 1.6; }
.sh-auth-forgot { font-size: .875rem; display: inline-flex; align-items: center; min-height: 32px; }
.sh-auth .sh-btn-block { margin-top: 8px; justify-content: space-between; }
.sh-auth-alt { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--sh-hairline); font-size: .9375rem; color: var(--sh-muted); }
.sh-auth-alt a { font-weight: 500; }
.sh-auth-aside {
    position: relative; overflow: hidden; border-radius: var(--sh-r-panel); min-height: 520px;
    background: var(--sh-panel); display: none;
}
@media (min-width: 992px) { .sh-auth-aside { display: block; } }
.sh-auth-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sh-auth-aside::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgb(10 44 54 / .55) 100%);
}
.sh-auth-card {
    position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1;
    background: var(--sh-panel); color: var(--sh-on-panel); border-radius: 16px; padding: 20px 24px;
    box-shadow: var(--sh-shadow-lift); max-width: 340px;
}
.sh-auth-card-title { font-weight: 600; font-size: 1.0625rem; margin: 0 0 12px; color: var(--sh-on-panel); }
.sh-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sh-checklist li { display: flex; align-items: center; gap: 12px; font-size: .9375rem; color: var(--sh-on-panel); }
.sh-checklist .sh-icon {
    width: 32px; height: 32px; padding: 7px; border-radius: 8px; background: rgb(81 206 233 / .14); color: var(--sh-cyan);
}

/* Single-card guest pages (password reset, 2FA, user invite, verify...) */
.sh .card.mw-540 { max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; }
.sh .card.mw-540 .card-body { padding: 40px 32px; }
@media (max-width: 575.98px) { .sh .card.mw-540 .card-body { padding: 28px 20px; } }
.sh .card.mw-540 .card-footer { padding: 16px 32px; color: var(--sh-muted); }
.sh .card .h3, .sh .card h6.h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.sh-page-password-reset-container .primary-content > .row { margin: 0; }
.sh-page-two-factor-challenge .card-title { font-size: 1.5rem; }

/* Registration: section cards with a calmer heading */
.sh-page-clientregister .card-title { font-size: 1.25rem; margin-bottom: 20px; }
.sh-page-clientregister #registration { max-width: 960px; margin: 0 auto; }
.sh-page-clientregister .card-body.p-4 { padding: 28px !important; }
.sh-page-clientregister #registration .prepend-icon .field-icon { height: 44px; line-height: 44px; width: 44px; color: var(--sh-muted); }
.sh-page-clientregister #registration .prepend-icon .field { padding-left: 42px; }
.sh-page-clientregister #registration .form-control { min-height: 44px; font-size: 1rem; }
.sh-page-clientregister #registration label:not(.field-icon):not(.custom-control-label) { color: var(--sh-ink); font-size: .875rem; }
.sh-page-clientregister #registration .card-title i, .sh-page-clientregister #registration .card-title small { font-size: .875rem; font-weight: 400; color: var(--sh-muted); }
.sh .intl-tel-input, .sh .iti { width: 100%; }
.sh #registration .btn-primary[type="submit"], .sh #registration input[type="submit"] { min-height: 48px; padding: 12px 28px; font-size: 1rem; }
.sh .marketing-email-optin { background: var(--sh-tint); border-color: transparent; }

/* Contact page */
.sh-page-contact .card-body.extra-padding { padding: 40px; }
@media (max-width: 575.98px) { .sh-page-contact .card-body.extra-padding { padding: 24px 20px; } }
.sh-page-contact textarea.form-control { min-height: 180px; }

/* Logout / generic message pages */
.sh-page-logout .primary-content, .sh-page-access-denied .primary-content { max-width: 640px; margin: 0 auto; }

/* ---------- 3. Sidebar ---------- */
.sh .sidebar .card { background: var(--sh-surface); margin-bottom: 16px; }
.sh .sidebar .card-header { border-bottom-color: var(--sh-hairline); }
.sh .sidebar .card-header .card-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; margin: 0; }
.sh .sidebar .card-header .card-minimise { margin-left: auto; color: var(--sh-muted); font-size: .8rem; }
.sh .sidebar .card-header .card-title > i:not(.card-minimise) { color: var(--sh-muted); width: 1.25em; }
.sh .sidebar .card-body { padding: 16px 18px; font-size: .9375rem; color: var(--sh-ink); }
.sh .sidebar .card-footer { padding: 12px 18px; }
.sh .sidebar .card-footer .btn { min-height: 40px; font-size: .875rem; }
.sh .sidebar .list-group-item {
    display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sh-ink);
    border-top: 0; border-bottom: 1px solid var(--sh-hairline);
}
.sh .sidebar .list-group-item:last-child { border-bottom: 0; }
.sh .sidebar .list-group-item i, .sh .sidebar .list-group-item .sidebar-menu-item-icon { color: var(--sh-muted); width: 1.25em; text-align: center; }
.sh .sidebar .list-group-item.active { font-weight: 500; }
.sh .sidebar .list-group-item.active i { color: var(--sh-cyan-ink); }
.sh .sidebar .list-group-item .badge, .sh .sidebar .list-group-item .sidebar-menu-item-badge {
    margin-left: auto; background: none; color: var(--sh-muted); border: 0; padding: 0 2px; min-width: 0;
    font-variant-numeric: tabular-nums; font-weight: 500; font-size: .875rem;
}
.sh .sidebar .list-group-item .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sh .sidebar .list-group-item .sidebar-menu-item-label { flex: 1; min-width: 0; }
.sh .sidebar .card-body strong:first-child { font-weight: 600; }
.sh .sidebar .card-body .btn-block { margin-top: 4px; }
/* Collapsed sidebars on phones: a single tappable header row */
@media (max-width: 991.98px) {
    .sh .sidebar .card { margin-bottom: 12px; }
    .sh .sidebar .card-header { padding: 12px 18px; min-height: 48px; display: flex; align-items: center; cursor: pointer; }
    .sh .sidebar .card-header .card-title { width: 100%; }
}

/* ---------- 4. Tables and status pills ---------- */
.sh .table-container { position: relative; }
.sh .dataTables_wrapper { width: 100%; }
.sh .dataTables_wrapper .listtable {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    padding: 12px; overflow-x: auto;
}
.sh .dataTables_wrapper .listtable { position: relative; }
.sh .dataTables_wrapper .dataTables_filter::after { display: none; }
.sh .dataTables_wrapper .dataTables_filter { position: relative; }
.sh .dataTables_wrapper .dataTables_filter { float: right; margin: 4px 4px 8px; }
.sh .dataTables_wrapper .dataTables_filter label { margin: 0; display: block; }
.sh .dataTables_wrapper .dataTables_filter label .form-control {
    min-height: 40px; width: 260px; max-width: 100%; margin: 0;
    background: var(--sh-canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%234e6169'%3E%3Cpath d='M229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32ZM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72Z'/%3E%3C/svg%3E") no-repeat 12px 50% / 16px !important;
    padding: 8px 12px 8px 38px !important; font-size: .9375rem; border-color: var(--sh-hairline);
}
.sh .dataTables_wrapper .dataTables_info {
    float: left; padding: 12px 8px 8px; font-size: .875rem; color: var(--sh-muted);
}
.sh .dataTables_wrapper table.table-list {
    margin: 0 !important; border: 0; border-radius: 0; clear: both; font-variant-numeric: tabular-nums;
}
.sh .dataTables_wrapper table.table-list thead th, .sh table.table-list thead th {
    background: transparent; border: 0; border-bottom: 1px solid var(--sh-hairline) !important;
    color: var(--sh-muted); font-size: .8125rem; font-weight: 500; text-align: left; padding: 10px 12px; white-space: nowrap;
}
.sh .dataTables_wrapper table.table-list thead th.sorting_asc,
.sh .dataTables_wrapper table.table-list thead th.sorting_desc { background: transparent; color: var(--sh-ink); }
.sh table.table-list tbody td {
    background: transparent; padding: 14px 12px; font-size: .9375rem; border-top: 1px solid var(--sh-hairline); text-align: left;
}
.sh table.table-list tbody tr:first-child td { border-top: 0; }
.sh .table-list > tbody > tr:hover > td { background: var(--sh-canvas); }
.sh .table-list > tbody > tr > td:first-child { border-radius: 10px 0 0 10px; }
.sh .table-list > tbody > tr > td:last-child { border-radius: 0 10px 10px 0; }
.sh table.table-list tbody td.dataTables_empty { text-align: center; color: var(--sh-muted); padding: 40px 12px; }
.sh table.table-list .text-center { text-align: left !important; }
.sh table.table-list td strong { font-weight: 600; }
.sh table.table-list td a { font-weight: 500; }
.sh .dataTables_wrapper .dataTables_paginate { float: right; margin-top: 12px; }
.sh .dataTables_wrapper .dataTables_length { margin-top: 12px; color: var(--sh-muted); font-size: .875rem; }
.sh .dataTables_wrapper .dataTables_length select { min-height: 40px; width: auto; display: inline-block; margin: 0 6px; }
.sh .pagination { gap: 4px; }
.sh .pagination .page-link { border-radius: 8px !important; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.sh .pagination .page-item.disabled .page-link { color: var(--sh-hairline-strong); background: transparent; }
/* DataTables responsive: the expand control and child rows */
.sh table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
.sh table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before {
    background: var(--sh-tint); color: var(--sh-cyan-ink); border: 0; box-shadow: none; font-family: var(--sh-font); font-weight: 600;
}
.sh table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
.sh table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--sh-hairline); padding: 8px 0; display: flex; justify-content: space-between; gap: 16px; }
.sh table.dataTable > tbody > tr.child span.dtr-title { color: var(--sh-muted); font-weight: 500; min-width: 0; }
/* Plain .table outside DataTables scrolls inside its card on narrow screens */
.sh .table-responsive { border-radius: 12px; }
@media (max-width: 767.98px) {
    .sh .card-body > .table, .sh .tab-content > .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Status pills: calm tints with a dot, the same language everywhere */
.sh .label.status, .sh span.status, .sh:not(.sh-in-cart) .label {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 4px 10px 4px 9px;
    font-size: .8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; margin: 0;
    background: var(--sh-neutral-bg); color: var(--sh-muted); border: 1px solid transparent; text-shadow: none;
}
.sh .label.status::before, .sh span.status::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.sh .status-active, .sh .status-paid, .sh .status-completed, .sh .status-accepted, .sh .label-success {
    background: var(--sh-ok-bg) !important; color: var(--sh-ok-ink) !important;
}
.sh .status-pending, .sh .status-pending-transfer, .sh .status-pending-registration, .sh .status-customer-reply,
.sh .status-inprogress, .sh .status-payment-pending, .sh .status-grace, .sh .status-redemption,
.sh .status-draft, .sh .status-refunded, .sh .label-warning {
    background: var(--sh-notice-bg) !important; color: var(--sh-notice) !important;
}
.sh .status-unpaid, .sh .status-suspended, .sh .status-fraud, .sh .status-collections, .sh .status-overdue, .sh .label-danger {
    background: var(--sh-danger-bg) !important; color: var(--sh-danger) !important;
}
.sh .status-open, .sh .status-answered, .sh .status-onhold, .sh .status-delivered, .sh .label-info, .sh .label-primary {
    background: var(--sh-tint) !important; color: var(--sh-cyan-ink) !important;
}
.sh .status-cancelled, .sh .status-terminated, .sh .status-closed, .sh .status-expired, .sh .status-transferred-away,
.sh .status-lost, .sh .status-dead, .sh .label-default {
    background: var(--sh-neutral-bg) !important; color: var(--sh-muted) !important;
}
/* Custom ticket statuses come with an inline colour: keep it, but as a tinted outline */
.sh .status-custom { color: var(--sh-ink) !important; background: var(--sh-surface) !important; border-color: var(--sh-hairline) !important; }

/* ---------- 5. Dashboard ---------- */
.sh-dash { display: grid; gap: 20px; }
.sh-dash > * { min-width: 0; }
.sh-dash-hello h1 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); letter-spacing: -0.03em; margin: 0 0 6px; }
.sh-dash-hello p { color: var(--sh-muted); margin: 0; font-size: 1.0625rem; }

.sh-paybar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--sh-surface); border: 1px solid var(--sh-danger-line); border-left: 4px solid var(--sh-danger);
    border-radius: 16px; padding: 16px 16px 16px 20px;
}
.sh-paybar-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sh-danger-bg); color: var(--sh-danger); display: inline-flex; align-items: center; justify-content: center; font-size: 1.375rem; flex-shrink: 0; }
.sh-paybar-text { flex: 1 1 220px; display: flex; flex-direction: column; line-height: 1.35; }
.sh-paybar-text strong { font-weight: 600; font-size: 1.0625rem; }
.sh-paybar-text span { color: var(--sh-muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.sh-paybar .sh-btn { min-height: 48px; }
@media (max-width: 575.98px) { .sh-paybar .sh-btn { width: 100%; } }

.sh-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .sh-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sh-tile {
    position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "stat icon" "title title" "sub sub";
    align-items: start; gap: 2px 8px; padding: 18px 18px 16px; min-height: 132px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    color: var(--sh-ink) !important; text-decoration: none !important;
    transition: border-color .2s, box-shadow .25s var(--sh-ease), transform .25s var(--sh-ease);
}
.sh-tile:hover { border-color: var(--sh-hairline-strong); box-shadow: var(--sh-shadow-float); }
@media (prefers-reduced-motion: no-preference) { .sh-tile:hover { transform: translateY(-2px); } }
.sh-tile-icon { grid-area: icon; width: 40px; height: 40px; border-radius: 10px; background: var(--sh-tint); color: var(--sh-cyan-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.sh-tile-stat { grid-area: stat; font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sh-tile-title { grid-area: title; font-weight: 600; font-size: .9375rem; margin-top: 6px; }
.sh-tile-sub { grid-area: sub; font-size: .8125rem; color: var(--sh-muted); }
.sh-tile.is-due { border-color: var(--sh-danger-line); }
.sh-tile.is-due .sh-tile-icon { background: var(--sh-danger-bg); color: var(--sh-danger); }
.sh-tile.is-due .sh-tile-sub { color: var(--sh-danger); font-weight: 500; }
@media (max-width: 575.98px) {
    .sh-tile { min-height: 116px; padding: 14px; }
    .sh-tile-stat { font-size: 1.75rem; }
    .sh-tile-icon { width: 34px; height: 34px; font-size: 1.0625rem; }
}

/* Hook panels (active services, tickets, news, domain search...) */
.sh .client-home-cards .card { border-top: 1px solid var(--sh-hairline); overflow: hidden; margin-bottom: 20px; }
.sh .client-home-cards .card-header { padding: 16px 20px; display: block; }
.sh .client-home-cards .card-header .card-title {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 1.0625rem; line-height: 1.3;
}
.sh .client-home-cards .card-header .card-title > i { color: var(--sh-cyan-ink); width: 1.25em; }
.sh .client-home-cards .card-header .card-title .float-right { order: 2; float: none !important; margin-left: auto; }
.sh .client-home-cards .card-header .btn {
    background: var(--sh-surface) !important; color: var(--sh-ink) !important; border: 1px solid var(--sh-hairline-strong);
    font-size: .8125rem; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
}
.sh .client-home-cards .card-header .btn:hover { background: var(--sh-tint) !important; border-color: var(--sh-petrol); }
.sh .client-home-cards .card-body { padding: 20px; font-size: .9375rem; }
.sh .client-home-cards .card-body p:last-child { margin-bottom: 0; }
.sh .client-home-cards .list-group-item { padding: 12px 20px; border-left: 0; border-right: 0; font-size: .9375rem; color: var(--sh-ink); }
.sh .client-home-cards .list-group-item:hover { background: var(--sh-canvas); }
.sh .client-home-cards .card-footer { padding: 0 20px; min-height: 0; border-top: 0; font-size: .875rem; }
.sh .client-home-cards .card-footer:not(:empty) { padding: 10px 20px; border-top: 1px solid var(--sh-hairline); }
.sh .client-home-cards .card-footer:empty { display: none; }
.sh .client-home-cards .card-footer a { color: var(--sh-cyan-ink); font-weight: 500; }
.sh .client-home-cards [class*="card-accent-"] { border-top-width: 1px; }
.sh .client-home-cards .card-body .text-center { text-align: left !important; }
/* Domain search panel: field on its own row, the two actions below, captcha last */
.sh .client-home-cards form > .input-group { flex-wrap: wrap; gap: 8px 0; padding: 0 !important; }
.sh .client-home-cards form > .input-group > .form-control { flex: 1 1 100%; border-radius: 10px !important; }
.sh .client-home-cards form > .input-group > .input-group-append { display: flex; flex: 1 1 100%; margin: 0; }
.sh .client-home-cards form > .input-group .btn { flex: 1 1 50%; min-height: 44px; border-radius: 0; margin: 0; }
.sh .client-home-cards form > .input-group .btn:first-child { border-radius: 10px 0 0 10px; }
.sh .client-home-cards form > .input-group .btn:last-child { border-radius: 0 10px 10px 0; margin-left: -1px; }
.sh .client-home-cards form > .input-group .google-recaptcha-align { flex: 1 1 100%; }
.sh .client-home-cards form > .input-group .google-recaptcha-align .row { margin: 0; }
.sh .client-home-cards .g-recaptcha, .sh .client-home-cards .captcha-container { margin-top: 12px; }
.sh .client-home-cards .row > [class*="col-"] { min-width: 0; }

/* Promo + support cards */
.sh-dash-extras { display: grid; gap: 20px; }
@media (min-width: 1200px) { .sh-dash-extras { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.sh-promo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 32px; }
.sh-promo-eyebrow { font-size: .8125rem; font-weight: 500; color: var(--sh-cyan) !important; margin: 0; }
.sh .sh-promo h2 { font-size: 1.625rem; letter-spacing: -0.02em; margin: 4px 0 8px; position: relative; }
.sh-promo p:not(.sh-promo-eyebrow) { margin: 0 0 20px; max-width: 42ch; position: relative; }
.sh-promo .sh-btn { margin-top: auto; position: relative; }
.sh-promo :focus-visible { outline-color: var(--sh-cyan); box-shadow: none; }

.sh-help { display: grid; padding: 0; overflow: hidden; }
@media (min-width: 576px) { .sh-help { grid-template-columns: 180px minmax(0, 1fr); } }
.sh-help-photo { width: 100%; height: 160px; object-fit: cover; object-position: 50% 25%; display: block; }
@media (min-width: 576px) { .sh-help-photo { height: 100%; } }
.sh-help-body { padding: 24px; }
.sh .sh-help h2 { font-size: 1.375rem; letter-spacing: -0.01em; margin: 0 0 4px; }
.sh-help-body > p { color: var(--sh-muted); margin: 0 0 12px; }
.sh-help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sh-help-list a {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: 12px; min-height: 52px;
    color: var(--sh-ink) !important; text-decoration: none !important; transition: background .15s;
}
.sh-help-list a:hover { background: var(--sh-tint); }
.sh-help-list strong { display: block; font-weight: 500; font-size: .9375rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.sh-help-list small { display: block; color: var(--sh-muted); font-size: .8125rem; }
.sh-help-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--sh-tint); color: var(--sh-cyan-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; }

/* ---------- 6. Account pages ---------- */
/* Service / domain / invoice lists: a few columns matter most on phones */
.sh table.table-list td .text-domain, .sh table.table-list td small { color: var(--sh-muted); }
.sh table.table-list td .ssl-info img { width: 20px; }
.sh .view-filter-btns .list-group-item i.fa-circle, .sh .view-filter-btns .list-group-item i.fa-dot-circle { color: var(--sh-hairline-strong); }
.sh .view-filter-btns .list-group-item.active i { color: var(--sh-cyan-ink); }
.sh-invoice-pay { white-space: nowrap; text-align: right !important; }
.sh-invoice-pay .btn { min-height: 36px; padding: 6px 14px; font-size: .875rem; }

/* Product details */
.sh .product-status { border-radius: 16px; background: var(--sh-canvas); padding: 24px 16px; }
.sh .product-status .product-icon .fa-circle { color: var(--sh-petrol); }
.sh .product-status-active .product-icon .fa-circle { color: var(--sh-ok); }
.sh .product-status-suspended .product-icon .fa-circle, .sh .product-status-pending .product-icon .fa-circle { color: var(--sh-notice); }
.sh .product-status-terminated .product-icon .fa-circle, .sh .product-status-cancelled .product-icon .fa-circle { color: var(--sh-hairline-strong); }
.sh .product-status h3 { font-size: 1.375rem; margin-top: 12px; }
.sh .product-status h4 { font-size: 1rem; color: var(--sh-muted); font-weight: 500; }
.sh .product-status-text { border-radius: 9999px; display: inline-block; padding: 4px 14px; font-weight: 500; font-size: .875rem; background: var(--sh-surface); }
.sh .product-details h4 { font-size: .8125rem; font-weight: 500; color: var(--sh-muted); margin: 16px 0 2px; letter-spacing: 0; }
.sh .product-details-tab-container { background: var(--sh-surface) !important; border: 1px solid var(--sh-hairline); border-top: 0; border-radius: 0 0 var(--sh-r-panel) var(--sh-r-panel); padding: 24px; }
.sh .nav-tabs { border-bottom-color: var(--sh-hairline); gap: 4px; }
.sh .nav-tabs .nav-link { border-radius: 10px 10px 0 0; min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.sh .nav-tabs .nav-link i { color: var(--sh-muted); }
.sh .nav-tabs .nav-link.active { background: var(--sh-surface); }
.sh .nav-tabs .nav-link.active i { color: var(--sh-cyan-ink); }
.sh .responsive-tabs-sm-connector .channel, .sh .responsive-tabs-sm-connector .bottom-border { border-color: var(--sh-hairline); background: var(--sh-surface); }
.sh .module-client-area .btn, .sh #cPanelQuickShortcutsPanel .btn { white-space: normal; }
.sh .cpanel-feature-row a, .sh .cpanel-usage-stats { color: var(--sh-ink); }
.sh .cpanel-feature-row img { filter: saturate(.9); }
.sh .product-actions-wrapper .btn { margin-bottom: 8px; min-height: 44px; }
.sh .product-actions-wrapper .btn-success { background: var(--sh-petrol); border-color: var(--sh-petrol); }
.sh .product-actions-wrapper .btn-danger { background: var(--sh-surface); color: var(--sh-danger); border: 1px solid var(--sh-danger-line); }
.sh .product-actions-wrapper .btn-danger:hover { background: var(--sh-danger-bg); }
.sh .alert .float-right .btn { min-height: 32px; }

/* Tickets */
.sh .ticket-reply, .sh .ticket-reply .posted-by { border-color: var(--sh-hairline); }
.sh .ticket-reply { border-radius: 16px; border: 1px solid var(--sh-hairline); background: var(--sh-surface); margin-bottom: 16px; overflow: hidden; }
.sh .ticket-reply.staff { border-color: var(--sh-info-line); }
.sh .ticket-reply .posted-by { background: var(--sh-canvas); padding: 12px 20px; font-size: .875rem; color: var(--sh-muted); }
.sh .ticket-reply.staff .posted-by { background: var(--sh-tint); }
.sh .ticket-reply .message { padding: 20px; line-height: 1.65; }
.sh .ticket-reply .requestor-badge, .sh .requestor-type-operator { background: var(--sh-petrol); color: var(--sh-on-petrol); border-radius: 9999px; font-weight: 500; }
.sh .ticket-subject { font-weight: 600; color: var(--sh-ink); }
.sh .ticket-number { color: var(--sh-muted); }
.sh .unread .ticket-subject::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sh-cyan-ink); margin-left: 8px; vertical-align: 2px; }
.sh .md-editor, .sh .markdown-editor { border-radius: 10px; border-color: var(--sh-hairline-strong); }
.sh .md-editor > .md-header, .sh .markdown-editor .md-header { background: var(--sh-canvas); border-radius: 10px 10px 0 0; }
.sh .md-editor.active { border-color: var(--sh-petrol); box-shadow: 0 0 0 3px rgb(81 206 233 / .35); }
.sh .kb-suggestions, .sh #autoAnswerSuggestions { border-radius: 16px; background: var(--sh-tint); border-color: transparent; }
.sh .department-list .card, .sh .supportticketsubmit-stepone .card { transition: border-color .2s; }

/* Forms on account pages */
.sh:not(.sh-in-cart) .form-group label:not(.custom-control-label):not(.form-check-label) { margin-bottom: 6px; }
.sh:not(.sh-in-cart) .custom-select { padding-right: 42px; }
.sh:not(.sh-in-cart) .form-check-input { margin-top: .4rem; }
.sh:not(.sh-in-cart) .custom-control-label { line-height: 1.6; }
.sh:not(.sh-in-cart) .custom-control-label::before { border-color: var(--sh-hairline-strong); }
.sh:not(.sh-in-cart) .custom-checkbox .custom-control-label::before { border-radius: 5px; }
.sh .bootstrap-switch { border-radius: 9999px; border-color: var(--sh-hairline-strong); }
.sh .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.sh .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--sh-petrol); color: var(--sh-on-petrol); }
.sh .form-control[readonly], .sh .form-control:disabled { background: var(--sh-canvas); color: var(--sh-muted); }
.sh:not(.sh-in-cart) .card .card-footer .btn + .btn, .sh .text-center .btn + .btn { margin-left: 6px; }
.sh .password-strength-meter .progress { height: 6px; }

/* Quotes, emails, user management, security */
.sh .email-history-message, .sh .view-email .card-body { overflow-wrap: anywhere; }
.sh .two-factor-container, .sh .security-question { border-radius: 16px; }
.sh .table.table-striped tbody tr:nth-of-type(odd) { background: var(--sh-canvas); }
.sh .user-management .badge, .sh .ox-table-accounts .badge { background: var(--sh-tint); color: var(--sh-cyan-ink); }

/* Add funds, upgrade, cancel request */
.sh-page-clientareacancelrequest .alert-danger { background: var(--sh-notice-bg); color: var(--sh-notice); border-color: var(--sh-notice-line); }
.sh-page-upgrade .table td, .sh-page-upgradesummary .table td { vertical-align: middle; }
.sh .upgrade-product-card, .sh .upgrade .card { border-radius: var(--sh-r-panel); }

/* Masspay / pay methods */
.sh .paymethod-info, .sh .pay-method-icon { color: var(--sh-muted); }

/* ---------- 7. Knowledgebase, announcements, server status, domain pricing ---------- */
.sh .kb-search .form-control, .sh .search-form .form-control, .sh #frmDomainChecker .form-control { min-height: 48px; }
.sh .kb-category .card, .sh .kbcategories .list-group-item { border-radius: 16px; }
.sh .kb-article-content, .sh .announcement-single { line-height: 1.7; max-width: 72ch; }
.sh .announcement-single h1, .sh .announcement-single h2 { letter-spacing: -0.02em; }
.sh .announcements .announcement { padding: 20px 0; border-bottom: 1px solid var(--sh-hairline); }
.sh .announcements .announcement h1 { font-size: 1.375rem; }
.sh .announcements .announcement h1 a { color: var(--sh-ink); }
.sh .announcements .announcement h1 a:hover { color: var(--sh-cyan-ink); }
.sh .label-date, .sh .article-items small { color: var(--sh-muted); }
.sh .server-status-list .label, .sh .network-issue .label { font-size: .75rem; }
.sh .domain-pricing .tld-pricing-header, .sh .tld-pricing-header { background: var(--sh-canvas); border-radius: 12px 12px 0 0; color: var(--sh-ink); }
.sh .domain-pricing .tld-row:nth-child(even), .sh .tld-row.highlighted { background: var(--sh-canvas); }
.sh .domain-pricing .tld-filters a, .sh .tld-filters .badge { border-radius: 9999px; background: var(--sh-surface); color: var(--sh-ink); border: 1px solid var(--sh-hairline); padding: 6px 12px; font-weight: 500; }
.sh .tld-filters a.badge-success, .sh .tld-filters .badge.active { background: var(--sh-petrol); color: var(--sh-on-petrol); border-color: var(--sh-petrol); }
.sh .tld-sale-group, .sh .tld-sale-group-hot, .sh .tld-sale-group-new, .sh .tld-sale-group-sale { border-radius: 9999px; font-weight: 500; }

/* Domain search band (homepage only) and the domain checker */
.sh .home-domain-search, .sh .domain-checker-container { background: var(--sh-tint); border-radius: var(--sh-r-panel); }
.sh .domain-checker-bg { background-image: none !important; }

/* ---------- 8. Footer and small screens ---------- */
@media (max-width: 575.98px) {
    .sh-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .sh-footer-brand { grid-column: 1 / -1; }
    .sh-footer-panel { padding: 32px 20px 20px; }
    .sh-footer-row { flex-direction: column; align-items: stretch; }
    .sh-wa-card { width: 100%; }
    .sh section#main-body.sh-main { padding-top: 16px; }
    .sh .sh-breadcrumb .breadcrumb { font-size: .8125rem; }
    .sh .dataTables_wrapper .listtable { padding: 8px; border-radius: 16px; }
    .sh .dataTables_wrapper .dataTables_filter { float: none; margin: 4px 4px 4px; }
    .sh .dataTables_wrapper .dataTables_filter label .form-control { width: 100%; }
    .sh .dataTables_wrapper .dataTables_info { float: none; padding: 6px 8px; }
    .sh .dataTables_wrapper .dataTables_length { float: left; }
    .sh table.table-list tbody td { padding: 12px 8px; font-size: .875rem; }
    .sh:not(.sh-in-cart) .card-body { padding: 20px; }
}
/* Phones: the page content comes before the sidebar menus (they stay reachable below) */
@media (max-width: 991.98px) {
    .sh #main-body > .container > .row, .sh #main-body > div > .row { display: flex; flex-wrap: wrap; }
    .sh #main-body .primary-content { order: -1; margin-bottom: 8px; }
}
/* Never let a wide child push the page sideways */
.sh .primary-content { min-width: 0; }
.sh #main-body .row > [class*="col-"] { min-width: 0; }

/* ---------- 9. Public invoice page (viewinvoice.tpl, standalone document) ---------- */
.sh-invoice-page { padding: 0 0 32px; }
.sh-inv-top {
    max-width: 880px; margin: 12px auto 0; padding: 0 16px 0 20px; min-height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-nav); box-shadow: var(--sh-shadow-float);
}
@media (max-width: 911.98px) { .sh-inv-top { margin: 8px 8px 0; } }
.sh-inv-theme { display: flex; justify-content: center; margin: 12px 0 0; }
.sh-inv-brand { color: var(--sh-ink) !important; display: inline-flex; min-height: 44px; align-items: center; }
.sh-inv-back {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--sh-r-control);
    color: var(--sh-ink) !important; font-weight: 500; font-size: .9375rem; text-decoration: none !important;
}
.sh-inv-back:hover { background: var(--sh-tint); }
.sh .invoice-container {
    width: auto; max-width: 880px; margin: 16px auto; padding: 48px; border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-panel); background: var(--sh-surface); color: var(--sh-ink);
}
@media (max-width: 911.98px) { .sh .invoice-container { margin: 12px 8px; } }
@media (max-width: 767.98px) { .sh .invoice-container { padding: 28px 20px 40px; } }
.sh-inv-logo { color: var(--sh-ink); margin: 0 0 16px; }
.sh-inv-logo .sh-logo { height: 26px; }
.sh .sh-inv-title { font-size: 1.75rem; letter-spacing: -0.02em; margin: 0 0 8px; }
.sh .invoice-container .invoice-status { margin: 0 0 8px; text-transform: none; font-size: 1rem; font-weight: 500; }
.sh .invoice-container .invoice-status span {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px;
    background: var(--sh-neutral-bg); color: var(--sh-muted);
}
.sh .invoice-container .invoice-status span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sh .invoice-container .invoice-status .unpaid { background: var(--sh-danger-bg); color: var(--sh-danger); }
.sh .invoice-container .invoice-status .paid { background: var(--sh-ok-bg); color: var(--sh-ok-ink); }
.sh .invoice-container .invoice-status .refunded, .sh .invoice-container .invoice-status .collections { background: var(--sh-notice-bg); color: var(--sh-notice); }
/* Billed to: the billed party first (company or person), the contact last */
.sh-inv-billto-name { display: block; color: var(--sh-ink); font-weight: 600; font-size: .9375rem; margin-bottom: 2px; }
.sh-inv-billto-attn { display: block; margin-top: 8px; color: var(--sh-muted); }
.sh-inv-due { color: var(--sh-muted); }
.sh-inv-due strong { color: var(--sh-ink); font-weight: 600; }
.sh-inv-amount { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 4px 0 12px; line-height: 1.1; }
.sh-inv-amount span { display: block; font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--sh-muted); }
.sh .invoice-container .payment-btn-container { margin: 8px 0 0; }
.sh .invoice-container .payment-btn-container form { margin: 0; }
.sh .invoice-container .payment-btn-container input[type="submit"],
.sh .invoice-container .payment-btn-container input[type="button"],
.sh .invoice-container .payment-btn-container button,
.sh .invoice-container .payment-btn-container .btn,
.sh .invoice-container .payment-btn-container a.btn {
    min-height: 48px; padding: 12px 24px; border-radius: var(--sh-r-control); border: 1px solid var(--sh-petrol);
    background: var(--sh-petrol); color: var(--sh-on-petrol); font: 500 1rem/1.2 var(--sh-font); cursor: pointer;
    transition: background-color .2s, box-shadow .2s;
}
.sh .invoice-container .payment-btn-container input[type="submit"]:hover,
.sh .invoice-container .payment-btn-container button:hover,
.sh .invoice-container .payment-btn-container .btn:hover { background: var(--sh-petrol-strong); box-shadow: var(--sh-shadow-float); }
.sh .invoice-container .payment-btn-container input[type="image"] { max-width: 100%; height: auto; }
.sh .invoice-container hr { margin: 28px 0; }
.sh .invoice-container strong { font-weight: 600; }
.sh .invoice-container address { color: var(--sh-muted); line-height: 1.6; margin-top: 4px; }
.sh .invoice-container [data-role="paymethod-info"] .custom-select { min-height: 44px; max-width: 280px; }
.sh .invoice-container .card { border-radius: 16px; overflow: hidden; }
.sh .invoice-container .card-header { padding: 14px 20px; }
.sh .invoice-container .card-header .card-title, .sh .invoice-container .font-size-24 { font-size: 1.125rem !important; }
.sh .invoice-container .card-title.bg-info {
    background: var(--sh-canvas) !important; color: var(--sh-ink) !important; padding: 14px 20px !important;
    border-bottom: 1px solid var(--sh-hairline); font-size: 1.125rem; font-weight: 600 !important;
}
.sh .invoice-container .table { margin: 0; font-variant-numeric: tabular-nums; }
.sh .invoice-container .table td { padding: 12px 20px; vertical-align: middle; border-color: var(--sh-hairline); }
.sh .invoice-container .table thead td { color: var(--sh-muted); font-size: .8125rem; border-top: 0; }
.sh .invoice-container .table thead td strong { font-weight: 500; }
.sh .invoice-container .table td.text-center:last-child { text-align: right !important; white-space: nowrap; }
.sh .invoice-container td.total-row { background: var(--sh-canvas); }
.sh .invoice-container tr:last-child td.total-row { font-weight: 600; font-size: 1.0625rem; }
.sh .invoice-container .transactions-container td.text-center { text-align: left !important; }
.sh .invoice-container .btn-group .btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.sh .invoice-container .card-header.bg-success { background: var(--sh-ok-bg) !important; color: var(--sh-ok-ink) !important; }
.sh-inv-foot { font-size: .875rem; color: var(--sh-muted); padding: 0 16px; }
@media print {
    .sh-invoice-page { background: #fff; }
    .sh .invoice-container { border: 0; padding: 0; margin: 0; }
}

/* Ticket department picker (supportticketsubmit-stepone.tpl) */
.sh-dept-list { display: grid; gap: 12px; }
@media (min-width: 768px) { .sh-dept-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-dept {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 72px;
    border: 1px solid var(--sh-hairline); border-radius: 16px; background: var(--sh-surface);
    color: var(--sh-ink) !important; text-decoration: none !important;
    transition: border-color .2s, background-color .2s, box-shadow .25s var(--sh-ease);
}
.sh-dept:hover { border-color: var(--sh-petrol); background: var(--sh-tint); }
.sh-dept-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--sh-tint); color: var(--sh-cyan-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.sh-dept:hover .sh-dept-ic { background: var(--sh-surface); }
.sh-dept-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sh-dept-text strong { font-weight: 600; font-size: 1.0625rem; }
.sh-dept-text small { color: var(--sh-muted); font-size: .875rem; }
.sh-dept-go { color: var(--sh-muted); transition: transform .2s var(--sh-ease); }
.sh-dept:hover .sh-dept-go { transform: translateX(3px); color: var(--sh-ink); }
.sh-dept-alt { margin: 24px 0 0; color: var(--sh-muted); font-size: .9375rem; }
.sh .card-body h2.card-title { font-size: 1.375rem; }

/* includes/panel.tpl message cards (invoice results, errors): tinted headers, never loud */
.sh .card > .card-title.text-white { padding: 12px 20px !important; margin: 0; font-size: 1rem; border-bottom: 1px solid transparent; }
.sh .card > .card-title.bg-danger { background: var(--sh-danger-bg) !important; color: var(--sh-danger) !important; border-color: var(--sh-danger-line); }
.sh .card > .card-title.bg-success { background: var(--sh-ok-bg) !important; color: var(--sh-ok-ink) !important; border-color: var(--sh-ok-line); }
.sh .card > .card-title.bg-info { background: var(--sh-tint) !important; color: var(--sh-cyan-ink) !important; border-color: var(--sh-info-line); }
.sh .card > .card-title.bg-warning { background: var(--sh-notice-bg) !important; color: var(--sh-notice) !important; border-color: var(--sh-notice-line); }
.sh .card > .card-title.text-white + .card-text { padding: 16px 12px 4px; }

/* Nexus paints .btn-success near-black with a stronger selector; bring it back to petrol */
.sh:not(.sh-in-cart) .btn.btn-success { background-color: var(--sh-petrol) !important; border-color: var(--sh-petrol) !important; color: var(--sh-on-petrol) !important; }
.sh:not(.sh-in-cart) .btn.btn-success:hover, .sh:not(.sh-in-cart) .btn.btn-success:focus { background-color: var(--sh-petrol-strong) !important; border-color: var(--sh-petrol-strong) !important; }
/* Mobile sheet: every top-level entry at the same size */
@media (max-width: 1279.98px) {
    .sh .sh-nav-collapse .navbar-nav > li > a, .sh .sh-nav-collapse .navbar-nav > li > a.dropdown-toggle { font-size: 1rem; font-weight: 500; }
}

/* Empty states */
.sh-empty {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center;
}
.sh-empty-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--sh-tint); color: var(--sh-cyan-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.625rem; margin-bottom: 16px; }
.sh .sh-empty h2 { font-size: 1.375rem; margin: 0 0 8px; }
.sh-empty p { color: var(--sh-muted); max-width: 46ch; margin: 0 0 20px; }
/* An empty DataTable shows only its message, not a row of column headers */
.sh .dataTables_wrapper table.table-list:has(td.dataTables_empty) thead { display: none; }

/* Knowledgebase details */
.sh .badge-info, .sh .badge.badge-info { background: var(--sh-tint); color: var(--sh-cyan-ink); }
.sh .kb-article-item small, .sh .kb-article-item .text-muted, .sh .kbarticles .text-muted { color: var(--sh-muted) !important; opacity: 1; }
.sh .list-group-item .text-muted, .sh .card-body .text-muted.small { opacity: 1; }
@media (max-width: 991.98px) { .sh-auth { max-width: 560px; } }

/* ---------- Forward page (after checkout / start payment) ---------- */
.sh-forward { max-width: 760px; margin: 8px auto 0; display: grid; gap: 24px; }
.sh-forward-card {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    padding: 40px 24px 32px; text-align: center;
}
@media (min-width: 768px) { .sh-forward-card { padding: 48px 56px 40px; } }
.sh-forward-check { width: 64px; height: 64px; margin: 0 auto 16px; }
.sh-forward-check svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sh-forward-check circle { fill: var(--sh-tint); stroke: var(--sh-cyan); stroke-width: 2; }
.sh-forward-check path { stroke: var(--sh-petrol); stroke-width: 3.5; stroke-dasharray: 40; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
    .sh-forward-check circle { animation: sh-pop .6s var(--sh-ease) both; }
    .sh-forward-check path { --len: 40; animation: sh-draw .5s .35s var(--sh-ease) both; }
}
.sh .sh-forward-title { font-size: 2rem; margin: 4px 0 8px; letter-spacing: -0.03em; }
.sh-forward-lead { color: var(--sh-muted); max-width: 52ch; margin: 0 auto 8px; }
.sh-forward-redirect { margin: 16px auto 0; max-width: 360px; }
.sh-forward-bar { height: 6px; border-radius: 9999px; background: var(--sh-hairline); overflow: hidden; margin-bottom: 8px; }
.sh-forward-bar span { display: block; height: 100%; width: 100%; background: var(--sh-petrol); transform-origin: left; animation: sh-forward-fill 3.5s linear both; }
@keyframes sh-forward-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sh-forward-redirect p { font-size: .875rem; }
.sh-forward-gateway { margin: 24px auto 0; text-align: left; }
.sh-forward-gateway.is-offline {
    max-width: 440px; background: var(--sh-canvas); border: 1px solid var(--sh-hairline);
    border-radius: 14px; padding: 20px 24px; line-height: 1.7;
}
.sh-forward-gateway img { max-width: 160px; height: auto; margin-bottom: 8px; }
.sh .sh-forward-gateway h3 { font-size: 1.125rem; margin: 4px 0 8px; }
.sh-forward-gateway p { margin-bottom: 12px; }
.sh-forward-gateway.is-redirecting { text-align: center; }
.sh-forward-gateway.is-redirecting img { margin: 0 auto 8px; display: block; }
.sh-forward-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sh-forward-next {
    list-style: none; margin: 0; padding: 24px; display: grid; gap: 16px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
}
@media (min-width: 768px) { .sh-forward-next { grid-template-columns: repeat(4, 1fr); } }
.sh-forward-next li { display: flex; gap: 12px; align-items: flex-start; }
.sh-forward-next li div { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.sh-forward-next strong { font-weight: 600; color: var(--sh-ink); }
.sh-forward-next span:not(.sh-forward-dot) { color: var(--sh-muted); }
.sh-forward-dot { flex: 0 0 12px; height: 12px; border-radius: 50%; margin-top: 4px; border: 2px solid var(--sh-hairline-strong); background: var(--sh-surface); }
.sh-forward-dot.is-done { background: var(--sh-petrol); border-color: var(--sh-petrol); }
.sh-forward-dot.is-now { border-color: var(--sh-cyan-ink); box-shadow: 0 0 0 4px rgb(81 206 233 / .3); }
.sh-page-forwardpage .sh-page-head { display: none; }

/* ---------- New ticket (supportticketsubmit-steptwo) ---------- */
.sh .sh-ticket-title { font-size: 1.625rem; margin-bottom: 6px; }
.sh-ticket-lead { color: var(--sh-muted); margin-bottom: 20px; max-width: 62ch; }
.sh-ticket-guest {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 24px;
    padding: 14px 16px; border-radius: 14px; background: var(--sh-tint); border: 1px solid var(--sh-info-line);
}
.sh-ticket-guest > .sh-icon { font-size: 1.25rem; color: var(--sh-cyan-ink); flex-shrink: 0; }
.sh-ticket-guest p { flex: 1 1 280px; margin: 0; font-size: .9375rem; }
.sh-ticket-guest strong { font-weight: 600; }
.sh-optional { font-weight: 400; color: var(--sh-muted); }

/* Attachments: each row is a tappable picker; the Bootstrap "Browse" suffix is replaced */
.sh .sh-attach-label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: 6px; }
.sh .sh-attach-row { margin-bottom: 8px; }
.sh .sh-attach .custom-file { position: relative; display: block; width: 100%; height: auto; min-height: 52px; }
.sh .sh-attach .custom-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; cursor: pointer; margin: 0; }
.sh .sh-attach .custom-file-label {
    position: relative; display: flex; align-items: center; gap: 10px; height: auto; min-height: 52px; margin: 0;
    padding: 12px 16px 12px 46px; border: 1px dashed var(--sh-hairline-strong); border-radius: var(--sh-r-control);
    background: var(--sh-surface); color: var(--sh-muted); font-weight: 400; font-size: .9375rem; cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.sh .sh-attach .custom-file-label::before {
    content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M209.66 122.34a8 8 0 0 1 0 11.32l-82.05 82a56 56 0 0 1-79.2-79.21l99.26-100.72a40 40 0 1 1 56.61 56.55L105 193a24 24 0 1 1-34-34l83.3-84.62a8 8 0 1 1 11.4 11.22L82.39 170.43a8 8 0 1 0 11.27 11.36l99.27-100.74a24 24 0 1 0-33.94-33.94L59.73 147.83a40 40 0 1 0 56.53 56.62l82.06-82a8 8 0 0 1 11.34-.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M209.66 122.34a8 8 0 0 1 0 11.32l-82.05 82a56 56 0 0 1-79.2-79.21l99.26-100.72a40 40 0 1 1 56.61 56.55L105 193a24 24 0 1 1-34-34l83.3-84.62a8 8 0 1 1 11.4 11.22L82.39 170.43a8 8 0 1 0 11.27 11.36l99.27-100.74a24 24 0 1 0-33.94-33.94L59.73 147.83a40 40 0 1 0 56.53 56.62l82.06-82a8 8 0 0 1 11.34-.11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sh .sh-attach .custom-file-label::after {
    content: "Buscar"; position: static; margin-left: auto; height: auto; padding: 6px 12px; order: 2;
    border: 1px solid var(--sh-hairline-strong); border-radius: 8px; background: var(--sh-surface);
    color: var(--sh-ink); font-size: .8125rem; font-weight: 500; line-height: 1.2;
}
.sh .sh-attach .custom-file:hover .custom-file-label,
.sh .sh-attach .custom-file-input:focus-visible ~ .custom-file-label { border-color: var(--sh-petrol); background: var(--sh-tint); color: var(--sh-ink); }
.sh .sh-attach .custom-file-input:focus-visible ~ .custom-file-label { outline: 3px solid var(--sh-cyan-ink); outline-offset: 2px; }
.sh .sh-attach-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 4px; }
.sh .sh-attach-add {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px;
    color: var(--sh-cyan-ink); font-weight: 500; text-decoration: none; cursor: pointer;
}
.sh .sh-attach-add:hover { color: var(--sh-petrol); text-decoration: underline; }

/* Knowledgebase suggestions while typing */
.sh #autoAnswerSuggestions { background: none; border: 0; border-radius: 0; margin: -4px 0 20px; }
.sh-kbsuggest { background: var(--sh-tint); border: 1px solid var(--sh-info-line); border-radius: 16px; padding: 18px 20px; }
.sh .sh-kbsuggest-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 600; color: var(--sh-ink); }
.sh-kbsuggest-title .sh-icon { color: var(--sh-cyan-ink); }
.sh-kbsuggest-lead { margin: 0 0 12px; font-size: .875rem; color: var(--sh-muted); }
.sh-kbsuggest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sh-kbsuggest-list a {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); text-decoration: none; color: var(--sh-ink);
    transition: border-color .15s, transform .15s;
}
.sh-kbsuggest-list a:hover { border-color: var(--sh-petrol); }
.sh-kbsuggest-list strong { font-weight: 500; color: var(--sh-cyan-ink); }
.sh-kbsuggest-list span { font-size: .8125rem; color: var(--sh-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.sh-ticket-captcha { display: flex; justify-content: center; margin: 8px 0 16px; }
.sh-ticket-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 575.98px) { .sh-ticket-actions .sh-btn { width: 100%; } }

/* Sidebar items hidden by WHMCS (CC template row, empty-state rows) must stay hidden:
   the flex rule above would otherwise override .w-hidden / .hidden. Inline styles set
   by WHMCS JS (.show()) still win, so the rows appear when they should. */
.sh .sidebar .list-group-item.w-hidden, .sh .sidebar .list-group-item.hidden,
.sh .sidebar .w-hidden, .sh .card-footer .w-hidden { display: none; }

/* Ticket information: label above value, one block per row */
.sh .sidebar .list-group-item.ticket-details-children { display: block; padding: 12px 18px; line-height: 1.45; }
.sh .sidebar .ticket-details-children .title { display: block; margin-bottom: 2px; font-size: .8125rem; color: var(--sh-muted); }
.sh .sidebar .ticket-details-children br { display: none; }
.sh .sidebar .ticket-details-children .label { margin-left: 4px; vertical-align: 1px; }
.sh .sidebar .ticket-details-children .label[style] { color: #fff; }
.sh #sidebarTicketCc .card-footer { padding: 14px 18px; }
.sh #sidebarTicketCc .ticket-cc-item:not(.w-hidden):not(.hidden), .sh #sidebarTicketCc .ticket-cc-email { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.sh #sidebarTicketCc .ticket-cc-email .email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.sh #sidebarTicketCc .delete-cc-email { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; }
.sh #sidebarTicketCc .delete-cc-email:hover { background: var(--sh-danger-bg); }
.sh #containerAddCcEmail .form-control { min-width: 0; font-size: .9375rem; }

/* Ticket actions in the sidebar: Responder primary, Cerrar quiet (not a red block) */
.sh .sidebar .card-footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.sh .sidebar .card-footer .btn-danger {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline-strong); color: var(--sh-danger);
}
.sh .sidebar .card-footer .btn-danger:hover { background: var(--sh-danger-bg); border-color: var(--sh-danger); color: var(--sh-danger); }
.sh-page-viewticket .btn-danger { background: var(--sh-surface); border: 1px solid var(--sh-hairline-strong); color: var(--sh-danger); }
.sh-page-viewticket .btn-danger:hover, .sh-page-viewticket .btn-danger:focus { background: var(--sh-danger-bg); border-color: var(--sh-danger); color: var(--sh-danger); }

/* Dashboard panels: empty state and paging link */
.sh .sh-panel-empty { padding: 20px 24px; }
.sh .sh-panel-empty p { margin: 0; color: var(--sh-muted); font-size: .9375rem; }
.sh .client-home-cards .btn-view-more { font-size: .875rem; color: var(--sh-cyan-ink); }

/* ---------- cPanel service overview (modules/servers/cpanel/overview.tpl override) ---------- */
.sh .sh-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sh .sh-usage-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sh .sh-usage-title { font-weight: 600; font-size: .9375rem; min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; line-height: 1.3; }
.sh .sh-usage-value { font-size: .875rem; color: var(--sh-muted); font-variant-numeric: tabular-nums; }
.sh .cpanel-usage-stats .limit-near { margin-top: 16px; font-size: .8125rem; color: var(--sh-muted) !important; }
.sh .cpanel-usage-stats .limit-near.text-danger { color: var(--sh-danger) !important; }

.sh .sh-email-lead { color: var(--sh-muted); margin-bottom: 16px; font-size: .9375rem; }
.sh .sh-email-grid { display: grid; gap: 12px 16px; grid-template-columns: 1fr; align-items: end; }
/* Two fields side by side from 768px (button below); all three in one row only from 1200px, when the
   card is wide enough for the name field next to the @domain addon */
@media (min-width: 768px) { .sh .sh-email-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sh .sh-email-submit { grid-column: 1 / -1; justify-self: start; } }
@media (min-width: 1200px) { .sh .sh-email-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; } .sh .sh-email-submit { grid-column: auto; } }
.sh .sh-email-field label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 500; }
.sh .sh-email-field .input-group-text { font-size: .875rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sh .sh-email-submit .sh-btn { min-height: 44px; gap: 8px; }
.sh .sh-email-help { margin: 10px 0 0; font-size: .8125rem; color: var(--sh-muted); }

.sh .sh-billing { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.sh .sh-billing-item {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px;
    background: var(--sh-canvas); border: 1px solid var(--sh-hairline);
}
.sh .sh-billing-item span { font-size: .8125rem; color: var(--sh-muted); }
.sh .sh-billing-item strong { font-size: 1.0625rem; font-weight: 600; color: var(--sh-ink); }
.sh .sh-billing-item small { font-size: .8125rem; color: var(--sh-muted); }
.sh .sh-billing-item.is-key { background: var(--sh-tint); border-color: var(--sh-info-line); }
@media (min-width: 768px) {
    .sh .sh-billing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sh .sh-billing-item.is-key { grid-column: span 2; }
}

/* Sidebar counters: plain muted number (no grey box); the active row's counter in ink */
.sh .sidebar .list-group-item.active .badge { color: var(--sh-ink); font-weight: 600; }

/* ---------- Cambiar cuenta (user-switch-account) ---------- */
.sh-accounts { max-width: 760px; }
.sh-accounts-intro p { color: var(--sh-muted); margin-bottom: 16px; max-width: 64ch; }
.sh-accounts-intro strong { color: var(--sh-ink); font-weight: 500; }
.sh-accounts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sh-account-card {
    display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
    padding: 18px 20px; background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    transition: border-color .15s, box-shadow .2s;
}
.sh-account-card:hover { border-color: var(--sh-hairline-strong); }
.sh-account-card.is-current { border: 2px solid var(--sh-petrol); padding: 17px 19px; background: linear-gradient(0deg, var(--sh-surface), var(--sh-surface)), var(--sh-tint); }
.sh-account-card.is-closed { opacity: .6; }
.sh-account-avatar {
    width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sh-tint); color: var(--sh-petrol); font-weight: 600; font-size: 1.125rem;
}
.sh-account-card.is-current .sh-account-avatar { background: var(--sh-petrol); color: var(--sh-on-petrol); }
.sh .sh-account-name { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--sh-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sh .sh-account-sub { margin: 2px 0 8px; font-size: .875rem; color: var(--sh-muted); overflow-wrap: anywhere; }
.sh-pill-current { background: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-on-petrol); font-size: .75rem; padding: 2px 10px; }
.sh-account-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; color: var(--sh-muted); }
.sh-account-facts li { position: relative; }
.sh-account-facts li + li::before { content: "·"; position: absolute; left: -10px; color: var(--sh-hairline-strong); }
.sh-account-facts li.is-due { color: var(--sh-danger); font-weight: 500; }
@media (max-width: 575.98px) {
    .sh-account-card { grid-template-columns: auto 1fr; }
    .sh-account-go { grid-column: 1 / -1; }
    .sh-account-go .sh-btn { width: 100%; }
}

/* ---------- Service page: Pending (includes/sh-service-pending.tpl) ---------- */
.sh-pending { display: grid; gap: 16px; }
.sh-pending-hero {
    position: relative; overflow: hidden; padding: 28px; border-radius: var(--sh-r-panel);
    background: var(--sh-tint); border: 1px solid var(--sh-info-line);
}
.sh-pill-pending { background: var(--sh-surface); border-color: var(--sh-notice-line); color: var(--sh-notice); }
.sh-pending-dot { width: 8px; height: 8px; border-radius: 50%; background: #d99a00; box-shadow: 0 0 0 3px rgb(217 154 0 / .2); }
.sh .sh-pending-title { font-size: 1.75rem; margin: 12px 0 6px; letter-spacing: -0.02em; }
.sh-pending-lead { color: var(--sh-muted); max-width: 60ch; margin-bottom: 12px; }
.sh .sh-pending-domain { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 12px; border-radius: 9999px; background: var(--sh-surface); border: 1px solid var(--sh-hairline); font-family: var(--sh-mono); font-size: .875rem; }
.sh-pending-chips { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sh-pending-chips li { padding: 4px 12px; border-radius: 9999px; background: var(--sh-surface); border: 1px solid var(--sh-hairline); font-size: .8125rem; }
.sh-pending-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sh-pending-steps {
    list-style: none; margin: 0; padding: 20px 24px; display: grid; gap: 16px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
}
@media (min-width: 992px) { .sh-pending-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sh-pending-steps { grid-template-columns: repeat(4, 1fr); } }
.sh-pending-steps li { display: flex; gap: 12px; align-items: flex-start; }
.sh-pending-steps li div { display: flex; flex-direction: column; gap: 2px; font-size: .875rem; }
.sh-pending-steps strong { color: var(--sh-ink); font-weight: 600; }
.sh-pending-steps span:not(.sh-step-dot) { color: var(--sh-muted); }
.sh-step-dot {
    flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .8125rem; font-weight: 600; border: 2px solid var(--sh-hairline-strong); color: var(--sh-muted); background: var(--sh-surface);
}
.sh-pending-steps .is-done .sh-step-dot { background: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-petrol-mark); }
.sh-pending-steps .is-now .sh-step-dot { border-color: var(--sh-cyan-ink); color: var(--sh-cyan-ink); box-shadow: 0 0 0 4px rgb(81 206 233 / .3); }
@media (prefers-reduced-motion: no-preference) {
    .sh-pending-steps .is-now .sh-step-dot { animation: sh-pending-pulse 2s var(--sh-ease) infinite; }
    @keyframes sh-pending-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgb(81 206 233 / .3); } 50% { box-shadow: 0 0 0 7px rgb(81 206 233 / .12); } }
}
.sh-order-rows { margin: 0; display: grid; }
.sh-order-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--sh-hairline); font-size: .9375rem; }
.sh-order-rows > div:last-child { border-bottom: 0; }
.sh-order-rows dt { font-weight: 400; color: var(--sh-muted); }
.sh-order-rows dd { margin: 0; text-align: right; font-weight: 500; color: var(--sh-ink); }

/* Service actions only work on an active service: show them as unavailable otherwise */
.sh[class*="sh-svc-"]:not(.sh-svc-active) .sidebar [menuitemname="Service Details Actions"] .list-group-item {
    opacity: .45; pointer-events: none; cursor: not-allowed;
}
.sh[class*="sh-svc-"]:not(.sh-svc-active) .sidebar [menuitemname="Service Details Actions"] .collapsable-card-body::after {
    content: "Se habilitan cuando tu servicio esté activo."; display: block; padding: 10px 18px 14px; font-size: .8125rem; color: var(--sh-muted);
}

/* ---------- Package / domain card (cPanel overview override) ---------- */
.sh .sh-package { text-align: left; }
.sh-package-head { display: flex; align-items: center; gap: 14px; }
.sh-package-icon { flex: 0 0 48px; height: 48px; border-radius: 14px; background: var(--sh-tint); color: var(--sh-petrol); display: inline-flex; align-items: center; justify-content: center; font-size: 1.375rem; }
.sh .sh-package-group { margin: 0; font-size: .8125rem; color: var(--sh-muted); }
.sh .sh-package-name { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--sh-ink); letter-spacing: -0.01em; }
.sh-package-head .sh-status-pill { margin-left: auto; }
.sh-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: var(--sh-canvas); color: var(--sh-muted); }
.sh-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sh-status-pill.is-active { background: var(--sh-ok-bg); color: var(--sh-ok); }
.sh-status-pill.is-suspended { background: var(--sh-danger-bg); color: var(--sh-danger); }
.sh-status-pill.is-pending { background: var(--sh-notice-bg); color: var(--sh-notice); }
.sh .sh-package-domain { display: flex; align-items: center; gap: 8px; margin: 16px 0; padding: 10px 14px; border-radius: var(--sh-r-control); background: var(--sh-canvas); border: 1px solid var(--sh-hairline); font-family: var(--sh-mono); font-size: .9375rem; }
.sh-package-domain a { color: var(--sh-ink); }
.sh-package-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Package and usage cards side by side share the same height */
.sh .row:has(> .col-md-6 > #cPanelPackagePanel) > .col-md-6 { display: flex; flex-direction: column; }
.sh .row:has(> .col-md-6 > #cPanelPackagePanel) > .col-md-6 > .card:last-child { flex: 1 1 auto; }
.sh #cPanelUsagePanel .card-body { display: flex; flex-direction: column; justify-content: center; }

/* SSL status (padlock) icons: SSL certificates are not sold, so they only confuse customers */
.sh .ssl-info img, .sh .ssl-state, .sh img[src*="/ssl/"] { display: none !important; }
.sh #tableServicesList th:first-child, .sh #tableServicesList td:first-child { display: none; }

/* ---------- Cancellation ---------- */
.sh-btn-danger { background: var(--sh-surface); color: var(--sh-danger) !important; border-color: var(--sh-danger); }
.sh-btn-danger:hover { background: var(--sh-danger); color: var(--sh-on-danger) !important; }
.sh-cancel-intro { padding: 28px; border-radius: var(--sh-r-panel); background: var(--sh-surface); border: 1px solid var(--sh-hairline); margin-bottom: 16px; }
.sh .sh-cancel-intro h2 { font-size: 1.625rem; margin: 6px 0 4px; }
.sh-cancel-options { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 1200px) { .sh-cancel-options { grid-template-columns: repeat(3, 1fr); } }
.sh .sh-cancel-options a {
    display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 16px; border-radius: 14px;
    border: 1px solid var(--sh-hairline); background: var(--sh-canvas); color: var(--sh-ink); text-decoration: none; transition: border-color .15s, background-color .15s;
}
.sh .sh-cancel-options a:hover { border-color: var(--sh-petrol); background: var(--sh-tint); }
.sh-cancel-ic { flex: 0 0 40px; height: 40px; border-radius: var(--sh-r-control); background: var(--sh-surface); border: 1px solid var(--sh-hairline); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--sh-petrol); }
.sh-cancel-options strong { display: block; font-weight: 600; }
.sh-cancel-options small { display: block; color: var(--sh-muted); font-size: .8125rem; line-height: 1.45; margin-top: 2px; }
.sh-cancel-form > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 500; color: var(--sh-muted); }
.sh-cancel-form > summary::-webkit-details-marker { display: none; }
.sh-cancel-form[open] > summary .sh-icon { transform: rotate(180deg); }
.sh .sh-cancel-type legend { font-size: .875rem; font-weight: 500; margin-bottom: 8px; }
.sh-cancel-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--sh-hairline-strong); border-radius: var(--sh-r-control); cursor: pointer; font-weight: 400 !important; }
.sh-cancel-choice:has(input:checked) { border-color: var(--sh-petrol); background: var(--sh-tint); }
.sh-cancel-choice input { margin-top: 2px; width: 20px; height: 20px; flex: none; accent-color: var(--sh-petrol); }
.sh-cancel-choice strong { display: block; font-weight: 600; }
.sh-cancel-choice small { display: block; color: var(--sh-muted); font-size: .8125rem; }
.sh-cancel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.sh-cancel-done { max-width: 680px; padding: 32px; border-radius: var(--sh-r-panel); background: var(--sh-surface); border: 1px solid var(--sh-hairline); }
.sh-cancel-done-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--sh-tint); color: var(--sh-petrol); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.sh .sh-cancel-done h2 { font-size: 1.5rem; margin: 14px 0 6px; }
.sh-cancel-done > p { color: var(--sh-muted); }
.sh-cancel-undo { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--sh-canvas); border: 1px solid var(--sh-hairline); }
.sh-cancel-undo p { margin-bottom: 12px; }
.sh-cancel-pending {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; padding: 16px 18px;
    border-radius: 14px; background: var(--sh-notice-bg); border: 1px solid var(--sh-notice-line);
}
.sh-cancel-pending > div { flex: 1 1 320px; }
.sh-cancel-pending strong { color: var(--sh-ink); }
.sh-cancel-pending p { margin: 2px 0 0; color: var(--sh-muted); font-size: .9375rem; }
.sh-cancel-pending-ic { font-size: 1.5rem; color: var(--sh-notice); }
.sh .sh-pw-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; font-family: var(--sh-mono); }
.sh .sh-pw-gen { display: inline-flex; align-items: center; gap: 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; min-height: 44px; }

/* Email password: field + WHMCS generator button share one row; generator icon only on small widths */
.sh .sh-email-grid .sh-pw-group { flex-wrap: nowrap; }
.sh .sh-email-grid .sh-pw-group .form-control { min-width: 0; }
@media (min-width: 768px) and (max-width: 1199.98px) { .sh .sh-pw-gen span { display: none; } }

/* ---------- Cambiar de plan (upgrade.tpl) ---------- */
.sh-upgrade.card { background: transparent; border: 0; }
.sh-upgrade > .card-body { padding: 0; }
.sh-up-head { display: grid; gap: 16px; align-items: end; margin-bottom: 20px; }
@media (min-width: 992px) { .sh-up-head { grid-template-columns: 1fr 300px; } }
.sh .sh-up-title { font-size: 1.75rem; margin: 6px 0 6px; letter-spacing: -0.02em; }
.sh-up-head .sh-muted { max-width: 60ch; margin: 0; }
.sh-up-current { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--sh-tint); border: 1px solid var(--sh-info-line); }
.sh-up-current-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sh-cyan-ink); }
.sh-up-current strong { font-size: 1.125rem; }
.sh-up-current span:last-child { font-size: .875rem; color: var(--sh-muted); }
.sh-up-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sh-up-card {
    display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--sh-surface);
    border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); transition: border-color .15s, box-shadow .2s, transform .2s var(--sh-ease);
}
.sh-up-card:hover { border-color: var(--sh-hairline-strong); box-shadow: var(--sh-shadow-float); }
.sh-up-card.is-featured { border: 2px solid var(--sh-petrol); padding: 19px; }
.sh-up-card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-up-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.sh-up-badge.is-up { background: var(--sh-ok-bg); color: var(--sh-ok); }
.sh-up-badge.is-down { background: var(--sh-canvas); color: var(--sh-muted); border: 1px solid var(--sh-hairline); }
.sh-up-reco { padding: 3px 10px; border-radius: 9999px; font-size: .75rem; font-weight: 600; background: var(--sh-cyan); color: var(--sh-on-cyan); }
.sh .sh-up-name { font-size: 1.25rem; margin: 2px 0 0; }
.sh-up-for { margin: 0; font-size: .875rem; color: var(--sh-muted); min-height: 2.8em; }
.sh-up-specs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.sh-up-specs li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--sh-hairline); font-size: .875rem; }
.sh-up-specs span { color: var(--sh-muted); }
.sh-up-specs strong { font-weight: 600; }
.sh-up-specs em { font-style: normal; font-size: .75rem; font-weight: 600; margin-left: 4px; }
.sh-up-specs em.is-up { color: var(--sh-ok); }
.sh-up-specs em.is-down { color: var(--sh-muted); }
.sh .sh-up-warn { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--sh-notice-bg); color: var(--sh-notice); font-size: .8125rem; }
.sh-up-form { margin-top: auto; display: grid; gap: 10px; padding-top: 6px; }
.sh .sh-up-help { margin: 20px 0 0; text-align: center; color: var(--sh-muted); }

/* Upgrade sidebar: product/domain rows read as label over value; roomier back button */
.sh-page-upgrade .sidebar .list-group-item, .sh-page-upgradesummary .sidebar .list-group-item { display: block; padding: 12px 18px; font-size: .875rem; }
.sh-page-upgrade .sidebar .list-group-item .row, .sh-page-upgradesummary .sidebar .list-group-item .row { margin: 0; display: block; }
.sh-page-upgrade .sidebar .list-group-item [class*="col"], .sh-page-upgradesummary .sidebar .list-group-item [class*="col"] { padding: 0; max-width: none; flex: none; text-align: left !important; }
.sh-page-upgrade .sidebar .list-group-item strong, .sh-page-upgradesummary .sidebar .list-group-item strong { font-weight: 600; color: var(--sh-ink); }
.sh .sidebar .card-footer .btn, .sh .sidebar .card-body .btn { padding: 10px 14px; }

/* ---------- Plan change summary (upgradesummary.tpl) ---------- */
.sh-upsum { display: grid; gap: 18px; }
.sh-upsum .sh-up-title { margin-bottom: 0; }
.sh-upsum-move { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.sh-upsum-plan { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--sh-surface); border: 1px solid var(--sh-hairline); }
.sh-upsum-plan.is-new { background: var(--sh-tint); border: 2px solid var(--sh-petrol); padding: 15px 17px; }
.sh-upsum-plan span { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-muted); }
.sh-upsum-plan.is-new span { color: var(--sh-cyan-ink); }
.sh-upsum-plan strong { font-size: 1.125rem; }
.sh-upsum-plan small { color: var(--sh-muted); font-size: .8125rem; }
.sh-upsum-arrow { align-self: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sh-petrol); color: var(--sh-petrol-mark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
@media (max-width: 575.98px) { .sh-upsum-move { grid-template-columns: 1fr; } .sh-upsum-arrow { transform: rotate(90deg); justify-self: center; } }
.sh-upsum-grid { display: grid; gap: 16px; }
@media (min-width: 992px) { .sh-upsum-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.sh-upsum-bill .card-title { font-size: 1.0625rem; }
.sh-upsum-total { border-top: 2px solid var(--sh-ink) !important; border-bottom: 0 !important; padding-top: 12px !important; }
.sh-upsum-total dt, .sh-upsum-total dd { font-size: 1.25rem; font-weight: 700; color: var(--sh-ink) !important; }
.sh-upsum-why { padding: 18px 20px; border-radius: var(--sh-r-panel); background: var(--sh-canvas); border: 1px solid var(--sh-hairline); }
.sh .sh-upsum-why h3 { font-size: 1rem; margin-bottom: 10px; }
.sh-upsum-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sh-upsum-why li { display: flex; gap: 10px; font-size: .875rem; color: var(--sh-muted); }
.sh-upsum-why .sh-icon { color: var(--sh-ok); margin-top: 3px; flex-shrink: 0; }
.sh-upsum-promo { padding: 0 18px; border-radius: 14px; border: 1px solid var(--sh-hairline); background: var(--sh-surface); }
.sh-upsum-promo > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 52px; cursor: pointer; font-weight: 500; }
.sh-upsum-promo > summary::-webkit-details-marker { display: none; }
.sh-upsum-promo form { padding-bottom: 16px; max-width: 480px; }
.sh .sh-upsum-h { font-size: 1.125rem; margin: 4px 0 10px; }
.sh-upsum-gateways { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sh-upsum-gw { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 0; border: 1px solid var(--sh-hairline-strong); border-radius: 14px; background: var(--sh-surface); cursor: pointer; font-weight: 400 !important; }
.sh-upsum-gw:has(input:checked) { border: 2px solid var(--sh-petrol); background: var(--sh-tint); padding: 13px; }
.sh-upsum-gw input { accent-color: var(--sh-petrol); }
.sh-upsum-gw-ic { flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--sh-canvas); border: 1px solid var(--sh-hairline); display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.sh-upsum-gw strong { display: block; font-weight: 600; font-size: .9375rem; }
.sh-upsum-gw small { display: block; color: var(--sh-muted); font-size: .8125rem; }
.sh-upsum-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sh .payment-btn-container form { margin: 0; }

.sh .sh-upsum-bill .sh-order-rows dd { white-space: nowrap; }
.sh .sh-upsum-bill .shf-discount-code { display: block; font-size: .8125rem; }

/* ---------- Accesos directos (cPanel overview override) ---------- */
.sh-shortcuts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sh .sh-shortcut {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    border: 1px solid var(--sh-hairline); background: var(--sh-surface); color: var(--sh-ink); text-decoration: none;
    transition: border-color .15s, background-color .15s, transform .2s var(--sh-ease);
}
.sh .sh-shortcut:hover { border-color: var(--sh-petrol); background: var(--sh-tint); color: var(--sh-ink); }
@media (prefers-reduced-motion: no-preference) { .sh .sh-shortcut:hover { transform: translateY(-2px); } }
.sh-shortcut-ic { flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--sh-tint); color: var(--sh-petrol); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.sh .sh-shortcut:hover .sh-shortcut-ic { background: var(--sh-surface); }
.sh-shortcut-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sh-shortcut-text strong { font-size: .9375rem; font-weight: 600; }
.sh-shortcut-text small { font-size: .8125rem; color: var(--sh-muted); }
.sh .sh-shortcuts-more { margin: 14px 0 0; font-size: .8125rem; color: var(--sh-muted); }
/* Invoices: below 1200px the issue date column goes (due date stays) so status and Pagar fit */
@media (max-width: 1199.98px) {
    .sh #tableInvoicesList th:nth-child(2), .sh #tableInvoicesList td:nth-child(2) { display: none; }
}
.sh-upsum-actions { margin-bottom: 24px; }
/* Row titles are real links (keyboard and screen readers); the whole row stays clickable */
.sh .sh-row-link { color: var(--sh-ink); text-decoration: none; }
.sh .sh-row-link:hover, .sh .sh-row-link:focus-visible { color: var(--sh-cyan-ink); text-decoration: underline; }
/* Home: the service status pill is never clipped; the row divider follows the tokens (Nexus: #ddd) */
.sh .div-service-status { flex: 0 0 auto; min-width: max-content; }
.sh .div-service-status .label { overflow: visible; }
.sh .client-home-cards .list-group-item { border-color: var(--sh-hairline); }
/* Invoice "Libro mayor" on phones: tighter cells so amount and balance fit */
@media (max-width: 575.98px) {
    .sh .invoice-container .transactions-container table { font-size: .8125rem; }
    .sh .invoice-container .transactions-container th, .sh .invoice-container .transactions-container td { padding: 8px 6px; white-space: normal; }
}