/* CanHost WHMCS Child Theme
   Matches marketing site design system (canhost-www.pages.dev)
   Inspired by Lagom spacing and polish
   Inherits from TwentyOne - CSS overrides only
   ------------------------------------------------------------- */

/* -- Hide reCAPTCHA badge (attribution in footer per Google T&Cs) -- */
.grecaptcha-badge { visibility: hidden !important; }

/* -- Google Fonts: Inter (matching marketing site) -- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* -- Design tokens from marketing site -- */
:root {
    --ch-blue: #00AEEF;
    --ch-blue-hover: #0095CC;
    --ch-blue-light: #E6F7FE;
    --ch-blue-glow: rgba(0, 174, 239, 0.15);
    --ch-grey: #6D6E71;
    --ch-dark: #0A0A1A;
    --ch-dark-mid: #12122A;
    --ch-white: #FFFFFF;
    --ch-text: #1A1A2E;
    --ch-text-muted: #6B7280;
    --ch-border: #E5E7EB;
    --ch-border-subtle: #F3F4F6;
    --ch-success: #10B981;
    --ch-radius-btn: 0.5rem;
    --ch-radius-card: 1rem;
    --ch-radius-pill: 50rem;
    --ch-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --ch-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --ch-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
    --ch-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */

body,
body.primary-bg-color {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ch-text);
    background-color: #FAFAFA;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--ch-text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ================================================================
   LINKS
   ================================================================ */

a {
    color: var(--ch-blue);
    text-decoration: none;
    transition: color var(--ch-transition);
}
a:hover {
    color: var(--ch-blue-hover);
}

/* ================================================================
   BUTTONS - Lagom-inspired: slightly taller, pill-ish radius
   ================================================================ */

.btn {
    border-radius: var(--ch-radius-btn) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    transition: all var(--ch-transition);
}
.btn-primary,
.btn-primary:focus {
    background-color: var(--ch-blue) !important;
    border-color: var(--ch-blue) !important;
    color: var(--ch-white) !important;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--ch-blue-hover) !important;
    border-color: var(--ch-blue-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 174, 239, 0.3);
}
.btn-outline-primary {
    color: var(--ch-blue) !important;
    border-color: var(--ch-blue) !important;
    background-color: transparent;
    font-weight: 500;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--ch-blue) !important;
    border-color: var(--ch-blue) !important;
    color: var(--ch-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 174, 239, 0.15);
}
.btn-default {
    background-color: var(--ch-white);
    border-color: var(--ch-border);
}
.btn-default:hover {
    border-color: var(--ch-blue);
    color: var(--ch-blue);
}

/* ================================================================
   HEADER / NAVBAR - Single-row light frosted glass
   ================================================================ */

header.header.ch-header-light {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ch-border-subtle);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Unified single-row navbar */
.ch-unified-nav {
    background-color: transparent !important;
    padding: 0.75rem 0;
}
.ch-unified-nav .navbar-brand .logo-img {
    height: 48px;
    width: auto;
}
.ch-unified-nav .navbar-brand {
    color: var(--ch-text) !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
}

/* Nav links */
.ch-unified-nav .navbar-nav .nav-link {
    color: var(--ch-text) !important;
    font-weight: 500;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.9375rem;
    transition: color var(--ch-transition);
    padding: 0.5rem 1rem;
}
.ch-unified-nav .navbar-nav .nav-link:hover,
.ch-unified-nav .navbar-nav .nav-link.active {
    color: var(--ch-blue) !important;
}

/* Cart button */
.ch-unified-nav .cart-btn {
    color: var(--ch-text-muted) !important;
    padding: 0.375rem 0.5rem;
}
.ch-unified-nav .cart-btn:hover {
    color: var(--ch-blue) !important;
}
.ch-unified-nav .cart-btn .badge {
    background-color: var(--ch-blue) !important;
}

/* Hamburger toggle */
.ch-unified-nav .navbar-toggler {
    border: 1px solid var(--ch-border) !important;
    padding: 0.375rem 0.625rem;
    color: var(--ch-text) !important;
}

/* Account dropdown - styled as blue pill button */
.ch-unified-nav .navbar-nav:last-child > li > a {
    background-color: var(--ch-blue) !important;
    color: var(--ch-white) !important;
    border-radius: var(--ch-radius-btn);
    padding: 0.375rem 1rem !important;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 0.25rem;
}
.ch-unified-nav .navbar-nav:last-child > li > a:hover {
    background-color: var(--ch-blue-hover) !important;
    color: var(--ch-white) !important;
}
/* Account dropdown menu items */
.ch-unified-nav .navbar-nav:last-child .dropdown-menu .dropdown-item {
    background-color: transparent !important;
    color: var(--ch-text) !important;
    border-radius: var(--ch-radius-btn);
    font-size: 0.9375rem;
    padding: 0.5rem 0.75rem;
    font-weight: 400;
    margin-left: 0;
}
.ch-unified-nav .navbar-nav:last-child .dropdown-menu .dropdown-item:hover {
    background-color: var(--ch-blue-light) !important;
    color: var(--ch-blue) !important;
}

/* Logged-in topbar - subtle light */
header.header.ch-header-light .topbar {
    background-color: #F7F8FA !important;
    border-bottom: 1px solid var(--ch-border-subtle);
}
.ch-header-light .topbar .active-client .input-group-text {
    color: var(--ch-text-muted);
    background: transparent;
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
}
.ch-header-light .topbar .active-client .btn-active-client {
    color: var(--ch-text);
}
.ch-header-light .topbar .btn {
    color: var(--ch-text-muted);
}

/* Mobile collapsed nav */
@media (max-width: 991px) {
    .ch-unified-nav .navbar-collapse {
        background-color: var(--ch-white);
        border-top: 1px solid var(--ch-border-subtle);
        margin-top: 0.75rem;
        padding: 1rem 0;
    }
    .ch-unified-nav .navbar-nav .nav-link {
        padding: 0.625rem 0;
    }
    .ch-unified-nav .navbar-nav:last-child > li > a {
        display: inline-block;
        margin-top: 0.5rem;
        margin-left: 0;
    }
}

/* ================================================================
   BREADCRUMB - hide on homepage
   ================================================================ */

.ch-homepage .master-breadcrumb {
    display: none !important;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */

.master-breadcrumb {
    background-color: var(--ch-white) !important;
    border-bottom: 1px solid var(--ch-border);
    font-family: 'Inter', system-ui, sans-serif;
    padding: 0.5rem 0;
}

/* ================================================================
   DOMAIN SEARCH - Lagom-inspired: generous padding, clean input
   ================================================================ */

.domain-search-container,
.home-domain-search {
    background-color: var(--ch-dark) !important;
    padding: 3rem 0 !important;
}
.domain-search-container h2,
.home-domain-search h2 {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ch-white) !important;
    letter-spacing: -0.02em;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}
.domain-search-container .form-control,
.home-domain-search .form-control {
    border-radius: var(--ch-radius-pill) !important;
    font-family: 'Inter', system-ui, sans-serif;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border: 2px solid var(--ch-border);
}
.domain-search-container .form-control:focus,
.home-domain-search .form-control:focus {
    border-color: var(--ch-blue);
    box-shadow: 0 0 0 4px var(--ch-blue-glow);
}
.home-domain-search .input-group-wrapper .btn {
    border-radius: var(--ch-radius-btn) !important;
    font-weight: 600;
}
/* Domain search captcha text */
.home-domain-search .captcha-container,
.home-domain-search p {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* TLD pricing row below search */
.home-domain-search .domain-pricing-container {
    margin-top: 1rem;
}

/* ================================================================
   HOMEPAGE SECTIONS - Lagom-inspired: generous vertical spacing
   ================================================================ */

#main-body {
    padding-top: 0;
}
#main-body .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Section headings - centred, larger, more space */
#main-body h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 2rem;
}
#main-body h3 {
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* ================================================================
   CARDS - Lagom-inspired: generous padding, clean borders
   ================================================================ */

.card {
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-card) !important;
    box-shadow: var(--ch-shadow-sm);
    transition: all var(--ch-transition);
    font-family: 'Inter', system-ui, sans-serif;
    overflow: hidden;
}
.card:hover {
    box-shadow: var(--ch-shadow-md);
    transform: translateY(-2px);
}
.card-body {
    font-family: 'Inter', system-ui, sans-serif;
    padding: 1.5rem;
}
.card .card-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 1.1rem;
}

/* Homepage product/service cards */
.card-columns.home .card {
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-card) !important;
    text-align: center;
    padding: 2rem 1.5rem;
}
.card-columns.home .card .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/* ================================================================
   ACTION ICON BUTTONS - Lagom-inspired: circular icons, clean cards
   ================================================================ */

.action-icon-btns {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.action-icon-btns a {
    border-radius: var(--ch-radius-card) !important;
    transition: all var(--ch-transition);
    font-family: 'Inter', system-ui, sans-serif;
    border: 1px solid var(--ch-border) !important;
    background: var(--ch-white);
    padding: 1.5rem 1rem !important;
}
.action-icon-btns a:hover {
    transform: translateY(-4px);
    box-shadow: var(--ch-shadow-md);
    border-color: var(--ch-blue) !important;
}
/* Icon circle styling - Lagom-inspired */
.action-icon-btns a .ico-container {
    transition: all var(--ch-transition);
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--ch-blue-light) !important;
    margin: 0 auto 1rem !important;
}
.action-icon-btns a .ico-container i,
.action-icon-btns a .ico-container .fas,
.action-icon-btns a .ico-container .far,
.action-icon-btns a .ico-container .fal {
    color: var(--ch-blue) !important;
    font-size: 1.5rem !important;
}
.action-icon-btns a:hover .ico-container {
    background-color: var(--ch-blue) !important;
}
.action-icon-btns a:hover .ico-container i,
.action-icon-btns a:hover .ico-container .fas,
.action-icon-btns a:hover .ico-container .far,
.action-icon-btns a:hover .ico-container .fal {
    color: var(--ch-white) !important;
}
/* Card label text */
.action-icon-btns a span,
.action-icon-btns a .card-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ch-text);
}

/* Unify all accent colours to CanHost blue */
.action-icon-btns a[class*="card-accent-"] {
    border-top-color: var(--ch-blue) !important;
}
.action-icon-btns a:hover[class*="card-accent-"] {
    border-top-color: var(--ch-blue) !important;
}

/* ================================================================
   FORMS
   ================================================================ */

.form-control,
.form-select {
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-btn) !important;
    font-family: 'Inter', system-ui, sans-serif;
    transition: all var(--ch-transition);
    padding: 0.5rem 0.875rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ch-blue);
    box-shadow: 0 0 0 3px var(--ch-blue-glow);
}

/* Login form */
.login-form .card {
    border-radius: var(--ch-radius-card) !important;
    overflow: hidden;
    box-shadow: var(--ch-shadow-md);
}

/* ================================================================
   SIDEBAR
   ================================================================ */

.sidebar .list-group-item {
    font-family: 'Inter', system-ui, sans-serif;
    border-radius: var(--ch-radius-btn) !important;
    transition: all var(--ch-transition);
    padding: 0.625rem 1rem;
    border: none;
    margin-bottom: 2px;
}
.sidebar .list-group-item.active {
    background-color: var(--ch-blue);
    border-color: var(--ch-blue);
    font-weight: 600;
}
.sidebar .list-group-item:hover:not(.active) {
    background-color: var(--ch-blue-light);
    color: var(--ch-blue);
}

/* ================================================================
   TABLES
   ================================================================ */

.table thead th {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ch-text-muted);
    border-bottom: 2px solid var(--ch-border);
}
.table td {
    vertical-align: middle;
}

/* ================================================================
   BADGES
   ================================================================ */

.badge-info,
.badge.bg-info {
    background-color: var(--ch-blue) !important;
}
.badge-success,
.badge.bg-success {
    background-color: var(--ch-success) !important;
}
.badge {
    font-weight: 600;
    border-radius: var(--ch-radius-btn) !important;
    padding: 0.35em 0.65em;
}

/* ================================================================
   PAGINATION
   ================================================================ */

.page-item.active .page-link {
    background-color: var(--ch-blue);
    border-color: var(--ch-blue);
}
.page-link {
    border-radius: var(--ch-radius-btn) !important;
    font-family: 'Inter', system-ui, sans-serif;
}

/* ================================================================
   PROGRESS BARS
   ================================================================ */

.progress {
    border-radius: var(--ch-radius-pill);
    height: 0.5rem;
}
.progress-bar {
    background-color: var(--ch-blue);
}

/* ================================================================
   DROPDOWNS
   ================================================================ */

.dropdown-menu {
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-btn) !important;
    box-shadow: var(--ch-shadow-lg);
    font-family: 'Inter', system-ui, sans-serif;
    padding: 0.5rem;
}
.dropdown-item {
    border-radius: var(--ch-radius-btn);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ch-blue);
}
.dropdown-item:hover:not(.active) {
    background-color: var(--ch-blue-light);
    color: var(--ch-blue);
}

/* ================================================================
   MODALS
   ================================================================ */

.modal-content {
    border-radius: var(--ch-radius-card) !important;
    border: 1px solid var(--ch-border);
    font-family: 'Inter', system-ui, sans-serif;
    box-shadow: var(--ch-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--ch-border);
    padding: 1.25rem 1.5rem;
}
.modal-body {
    padding: 1.5rem;
}
.modal-footer {
    border-top: 1px solid var(--ch-border);
    padding: 1rem 1.5rem;
}

/* ================================================================
   ALERTS
   ================================================================ */

.alert {
    border-radius: var(--ch-radius-btn);
    font-family: 'Inter', system-ui, sans-serif;
}

/* ================================================================
   FOOTER - 3-column matching marketing site
   ================================================================ */

footer.footer.ch-footer,
footer.footer,
#footer {
    background-color: var(--ch-dark) !important;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Inter', system-ui, sans-serif;
    padding: 3.5rem 0 1.5rem !important;
}

/* Column headings */
.ch-footer-heading {
    color: var(--ch-white) !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

/* Link lists */
.ch-footer-links li {
    margin-bottom: 0.625rem;
}
.ch-footer-links a {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.9375rem;
    transition: color var(--ch-transition);
}
.ch-footer-links a:hover {
    color: var(--ch-white) !important;
}

/* Social icons */
.ch-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 1rem;
    margin-right: 0.5rem;
    transition: all var(--ch-transition);
}
.ch-footer-social a:hover {
    background-color: var(--ch-blue);
    color: var(--ch-white) !important;
}

/* Divider */
.ch-footer-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 2rem 0 0;
}

/* Copyright */
.ch-footer-copyright {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8125rem;
    margin-bottom: 0;
}

/* CanMarket family line */
.ch-footer-family {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
}
.ch-footer-family a {
    color: rgba(255, 255, 255, 0.35) !important;
}
.ch-footer-family a:hover {
    color: var(--ch-white) !important;
}
.ch-footer-legal {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.6875rem;
    margin-top: 0.25rem;
}
.ch-footer-recaptcha {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.6875rem;
    margin-top: 0.25rem;
}
.ch-footer-recaptcha a {
    color: rgba(255, 255, 255, 0.35) !important;
}
.ch-footer-recaptcha a:hover {
    color: var(--ch-white) !important;
}

/* Locale button */
.ch-footer-locale-btn {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.8125rem;
}
.ch-footer-locale-btn:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--ch-white) !important;
}

/* Legacy footer link overrides (non-homepage pages) */
footer.footer a,
#footer a {
    color: rgba(255, 255, 255, 0.55) !important;
    transition: color var(--ch-transition);
}
footer.footer a:hover,
#footer a:hover {
    color: var(--ch-white) !important;
}

/* ================================================================
   POWERED BY WHMCS - suppress
   ================================================================ */

.primary-content > p[style*="text-align:center"] {
    display: none !important;
}

/* ================================================================
   ACCORDION
   ================================================================ */

.accordion-item {
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-card) !important;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.accordion-button {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    padding: 1rem 1.25rem;
}
.accordion-button:not(.collapsed) {
    color: var(--ch-blue);
    background-color: var(--ch-white);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: none;
    border-color: var(--ch-border);
}

/* ================================================================
   CART / ORDER FORM
   ================================================================ */

.order-summary .card,
.order-summary .panel {
    border-radius: var(--ch-radius-card) !important;
}

/* ================================================================
   CLIENT AREA HEADINGS
   ================================================================ */

#main-body h2,
#main-body h3 {
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* ================================================================
   POPOVER / TOOLTIP
   ================================================================ */

.popover {
    border-radius: var(--ch-radius-btn);
    border: 1px solid var(--ch-border);
    box-shadow: var(--ch-shadow-md);
    font-family: 'Inter', system-ui, sans-serif;
}
.tooltip-inner {
    font-family: 'Inter', system-ui, sans-serif;
    border-radius: var(--ch-radius-btn);
}

/* ================================================================
   CLIENT HOME CARDS (logged-in dashboard)
   ================================================================ */

.client-home-panels .card,
.client-home-cards .card {
    border-radius: var(--ch-radius-card) !important;
    border: 1px solid var(--ch-border);
}
.client-home-cards .card-header {
    background-color: var(--ch-white) !important;
    border-bottom: 1px solid var(--ch-border);
    font-weight: 600;
    padding: 1rem 1.5rem;
}

/* ================================================================
   MOBILE REFINEMENTS
   ================================================================ */

@media (max-width: 767px) {
    .home-domain-search {
        padding: 2rem 0 !important;
    }
    .home-domain-search h2 {
        font-size: 1.375rem;
    }
    .action-icon-btns a {
        padding: 1rem 0.75rem !important;
    }
    .action-icon-btns a .ico-container {
        width: 48px !important;
        height: 48px !important;
    }
    #main-body h2 {
        font-size: 1.375rem;
    }
    footer.footer,
    #footer {
        padding: 2.5rem 0 1rem !important;
    }
    .ch-footer-cols {
        text-align: center;
    }
}

/* ================================================================
   HOMEPAGE TEMPLATE OVERRIDE
   Premium cards, trust signals, and improved section layout
   ================================================================ */

/* -- Homepage sections -- */
.ch-hp-section {
    padding: 4rem 0;
    background-color: var(--ch-white);
}

.ch-hp-section-alt {
    padding: 4rem 0;
    background-color: #F7F8FA;
}

.ch-hp-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.ch-hp-section-header h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ch-text);
    margin-bottom: 0.75rem;
}

.ch-hp-section-header p {
    color: var(--ch-text-muted);
    font-size: 1.0625rem;
    margin-bottom: 0;
}

/* -- Premium product cards -- */
.ch-hp-card {
    background: var(--ch-white);
    border: 1px solid var(--ch-border);
    border-radius: var(--ch-radius-card);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all var(--ch-transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ch-hp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ch-shadow-lg);
    border-color: rgba(0, 174, 239, 0.2);
}

/* Gradient accent bar at top */
.ch-hp-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ch-blue), rgba(0, 174, 239, 0.3));
}

.ch-hp-card-accent-alt {
    background: linear-gradient(90deg, rgba(0, 174, 239, 0.3), var(--ch-blue));
}

/* Card header: icon + title row */
.ch-hp-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ch-hp-card-header h3 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    color: var(--ch-text);
}

/* Icon circle */
.ch-hp-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background-color: var(--ch-blue-light);
    color: var(--ch-blue);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all var(--ch-transition);
}

.ch-hp-card:hover .ch-hp-icon-circle {
    background-color: var(--ch-blue);
    color: var(--ch-white);
}

/* Card description */
.ch-hp-card-desc {
    color: var(--ch-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

/* Card CTA button */
.ch-hp-card-btn {
    background-color: var(--ch-blue) !important;
    border-color: var(--ch-blue) !important;
    color: var(--ch-white) !important;
    font-weight: 600 !important;
    border-radius: var(--ch-radius-btn) !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.9375rem;
    transition: all var(--ch-transition);
    margin-top: auto;
}

.ch-hp-card-btn:hover {
    background-color: var(--ch-blue-hover) !important;
    border-color: var(--ch-blue-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 174, 239, 0.3);
}

/* -- Trust signals / stats -- */
.ch-hp-stat {
    padding: 1.5rem 1rem;
}

.ch-hp-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background-color: var(--ch-blue-light);
    color: var(--ch-blue);
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.ch-hp-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ch-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ch-hp-stat-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--ch-text-muted);
    margin-top: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* -- Homepage: remove WHMCS container padding so sections breathe -- */
.ch-homepage #main-body {
    padding-top: 0 !important;
}
.ch-homepage #main-body > .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.ch-homepage #main-body > .container > .row {
    margin-left: 0;
    margin-right: 0;
}
.ch-homepage #main-body > .container > .row > .col-12 {
    padding-left: 0;
    padding-right: 0;
}

/* -- Homepage responsive -- */
@media (max-width: 767px) {
    .ch-hp-section,
    .ch-hp-section-alt {
        padding: 2.5rem 0;
    }

    .ch-hp-section-header {
        margin-bottom: 1.5rem;
    }

    .ch-hp-section-header h2 {
        font-size: 1.375rem;
    }

    .ch-hp-card {
        padding: 1.5rem;
    }

    .ch-hp-stat-number {
        font-size: 1.5rem;
    }

    .ch-hp-stat {
        padding: 1rem 0.5rem;
    }

    .ch-hp-stat-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
}