@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* *****************************************************

    ** Custom Stylesheet - ehost.ec **

    Brand palette + glassmorphism for the ehost client
    area, matched to the ehost.ec marketing site.

***************************************************** */

html {
    font-size: 14px;
}

/* Same typeface as ehost.ec so the panel and the public
   site read as one product. */
body,
.btn,
.form-control,
.dropdown-menu,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

:root {
    --white: #fff;

    /* Neutral shades - warmed to match the ehost.ec brand (coral + warm ink) */
    --neutral-50: #FBF9F8;
    --neutral-100: #F6F3F2;
    --neutral-200: #E8E1DD;
    --neutral-300: #D6CCC6;
    --neutral-400: #A99E98;
    --neutral-500: #7A716C;
    --neutral-600: #574F4B;
    --neutral-700: #3D3532;
    --neutral-800: #2D2624;
    --neutral-900: #1B1716;
    --neutral-950: #100D0C;

    /* Brand color scale - ehost coral */
    --primary-50: #FEF4F2;
    --primary-100: #FDECEA;
    --primary-200: #FBC9C2;
    --primary-300: #F79286;
    --primary-400: #F2685A;
    --primary-500: #F05243;
    --primary-600: #D8402F;
    --primary-700: #B8341F;
    --primary-800: #8C2A1C;
    --primary-900: #5C1C13;
    --primary-950: #3D120C;

    --primary: var(--primary-500);
    --primary-lifted: var(--primary-600);
    --primary-accented: var(--primary-700);

    --secondary: var(--neutral-900);
    --secondary-lifted: var(--neutral-800);
    --secondary-accented: var(--neutral-700);

    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    --letter-spacing: 0em;
    --disabled-opacity: 25%;

    /* Glassmorphism system - matches ehost.ec marketing site */
    --glass-bg: rgba(255, 255, 255, 0.68);
    --glass-bg-strong: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-border-soft: rgba(27, 23, 22, 0.08);
    --glass-blur: 18px;
    --glass-shadow: 0 8px 30px rgba(27, 23, 22, 0.09), 0 2px 6px rgba(27, 23, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    --glass-shadow-hover: 0 18px 48px rgba(27, 23, 22, 0.16), 0 3px 10px rgba(27, 23, 22, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

/* ══════════════════════════════════════════════════
   1. AMBIENT BACKGROUND
   Warm coral/ink wash so the frosted glass has
   something to refract. Mirrors ehost.ec.
   ══════════════════════════════════════════════════ */

/* Applied to plain `body` too: the cart pages don't carry the
   .primary-bg-color class, and were rendering flat white
   while every other page had the wash. */
body,
body.primary-bg-color {
    background-color: #F1EBE8;
    background-image:
        radial-gradient(900px circle at 4% 4%, rgba(240, 82, 67, 0.20), transparent 55%),
        radial-gradient(760px circle at 98% 8%, rgba(240, 82, 67, 0.11), transparent 55%),
        radial-gradient(820px circle at 50% 100%, rgba(27, 23, 22, 0.09), transparent 60%);
    background-attachment: fixed;
    color: var(--text);
}

/* ══════════════════════════════════════════════════
   2. TOP UTILITY BAR (.topbar)
   Thin strip with "no hay notificaciones / conectado
   como". Its text is light, so the bar stays dark -
   ink instead of the stock flat grey.
   ══════════════════════════════════════════════════ */

.topbar {
    background: rgba(27, 23, 22, 0.94) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.8125rem;
}

.topbar a,
.topbar .btn {
    color: rgba(255, 255, 255, 0.85) !important;
}

.topbar a:hover,
.topbar .btn:hover {
    color: #fff !important;
}

/* ══════════════════════════════════════════════════
   3. LOGO / SEARCH BAR - frosted white
   NOTE: .navbar-light is the LOGO bar, not the utility
   strip. The ehost logo is dark ink, so this bar must
   stay light or the logo disappears.
   ══════════════════════════════════════════════════ */

/* .header-lined is deliberately NOT here - it is a content
   heading block (store group title + blurb), not part of the
   header chrome. It gets its own card treatment in §22. */
#header, .navbar-header,
.navbar.navbar-light,
.main-navbar-wrapper {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}

.navbar.navbar-light a,
.navbar.navbar-light .btn.nav-link {
    color: var(--neutral-700) !important;
}

.navbar.navbar-light a:hover,
.navbar.navbar-light .btn.nav-link:hover {
    color: var(--primary-lifted) !important;
}

/* Cart button in the logo bar */
.navbar.navbar-light .cart-btn {
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-md);
    background: rgba(255, 255, 255, 0.7);
}

/* ══════════════════════════════════════════════════
   4. MAIN MENU
   Matched to the ehost.ec marketing nav: 13.5px / 500,
   slate text, 11px horizontal padding, sticky frosted
   bar. Twenty-One renders these links as plain
   <a class="pr-4">, so nothing styled them at all.
   ══════════════════════════════════════════════════ */

.main-navbar-wrapper {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 4px 24px rgba(31, 41, 55, 0.04);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 67px;
}

.main-navbar-wrapper .navbar-nav > li > a {
    position: relative;
    display: inline-block;
    padding: 0.35rem 11px !important;
    margin-right: 0;
    color: #374151 !important;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: normal;
    text-decoration: none;
    border-radius: 7px;
    transition: color 180ms ease, background-color 180ms ease;
}

.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li > a:focus,
.main-navbar-wrapper .navbar-nav > li.open > a,
.main-navbar-wrapper .navbar-nav > li.show > a {
    color: var(--primary) !important;
    background-color: rgba(240, 82, 67, 0.07);
}

/* Current section. The marketing nav has no active state
   (it is a one-page site); a panel does need one, so keep
   it quiet - weight and colour only, no underline. */
.main-navbar-wrapper .navbar-nav > li.active > a {
    color: var(--primary) !important;
    font-weight: 600;
}

/* Account menu on the right, styled like the site's
   "Iniciar sesión" button: solid coral, 9px radius. */
.main-navbar-wrapper .navbar-nav.ml-auto > li:last-child > a,
.main-navbar-wrapper > .container > .navbar-nav:last-child > li:last-child > a {
    background: var(--primary) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 18px !important;
    border-radius: 9px;
}

.main-navbar-wrapper .navbar-nav.ml-auto > li:last-child > a:hover,
.main-navbar-wrapper > .container > .navbar-nav:last-child > li:last-child > a:hover {
    background: var(--primary-lifted) !important;
    color: #fff !important;
}

/* "Más" is a spill-over menu: the theme's JS moves nav items
   into it when they don't fit the bar. On wide screens
   everything fits, so it renders with an empty menu and
   clicking it opens nothing. Hide it while it holds no items.
   :has() stays reactive, so it reappears on narrow widths as
   soon as the JS moves items in.
   Tested with li rather than :empty - the <ul> contains
   whitespace text nodes, which makes :empty never match. */
.main-navbar-wrapper .navbar-nav > li.collapsable-dropdown:not(:has(.collapsable-dropdown-menu li)) {
    display: none !important;
}

/* caret on dropdown items */
.main-navbar-wrapper .navbar-nav .dropdown-toggle::after {
    margin-left: 0.4rem;
    vertical-align: 0.15em;
    opacity: 0.55;
}

/* "Hola, Roman!" account menu on the right */
.main-navbar-wrapper .navbar-nav.ml-auto > li > a,
.main-navbar-wrapper .navbar-nav:last-child > li > a {
    margin-right: 0;
}

/* ══════════════════════════════════════════════════
   5. BREADCRUMB - was flat grey, now transparent
   ══════════════════════════════════════════════════ */

/* Transparent, not a white slab. The stock bar only spans the
   container width, so any fill reads as a stray rectangle
   floating over the ambient background. */
.master-breadcrumb,
.breadcrumb {
    background: transparent !important;
    border-bottom: none;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    font-size: 0.8125rem;
}

.master-breadcrumb a,
.breadcrumb a {
    color: var(--primary-lifted);
}

.master-breadcrumb .active,
.breadcrumb .active {
    color: var(--neutral-600);
}

/* ══════════════════════════════════════════════════
   5b. STAT TILES (Servicios / Dominios / Entradas / Facturas)
   Stock tiles are flat grey boxes with an oversized grey
   glyph and a random blue/green/red/orange bar. Bring them
   onto the brand and make the number the hero.
   ══════════════════════════════════════════════════ */

.tiles .tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--rounding-lg);
    box-shadow: var(--glass-shadow);
    transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.tiles .row.no-gutters > [class*="col-"] {
    padding: 0 0.5rem;
}

.tiles .tile:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: rgba(240, 82, 67, 0.35);
    transform: translateY(-2px);
}

/* The big glyph: from heavy grey block to a light coral wash */
.tiles .tile > i {
    color: var(--primary) !important;
    opacity: 0.18;
    transition: opacity 220ms ease;
}

.tiles .tile:hover > i {
    opacity: 0.30;
}

.tiles .tile .stat {
    color: var(--neutral-900);
    font-weight: 700;
}

.tiles .tile .title {
    color: var(--neutral-500);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* The four differently-coloured accent bars -> one brand colour */
.tiles .tile .highlight,
.tiles .tile .highlight.bg-color-blue,
.tiles .tile .highlight.bg-color-green,
.tiles .tile .highlight.bg-color-red,
.tiles .tile .highlight.bg-color-orange {
    background: linear-gradient(90deg, var(--primary), var(--primary-300)) !important;
    height: 3px;
}

/* ══════════════════════════════════════════════════
   6. CARDS / PANELS - frosted glass
   ══════════════════════════════════════════════════ */

.card,
.panel {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    /* 18px everywhere - matches .product and .header-lined so
       no panel looks squarer than its neighbour. */
    border-radius: 18px;
    box-shadow: var(--glass-shadow);
    transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.card:hover,
.panel:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: rgba(240, 82, 67, 0.32);
}

.card-header,
.panel-heading {
    background: rgba(255, 255, 255, 0.34) !important;
    border-bottom: 1px solid var(--glass-border-soft) !important;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    font-weight: 600;
    color: var(--neutral-800);
}

.card-footer,
.panel-footer {
    background: rgba(255, 255, 255, 0.28) !important;
    border-top: 1px solid var(--glass-border-soft) !important;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

/* WHMCS colours panel top borders green/red/orange at random.
   Neutralise them so the palette stays on brand. */
.panel-primary, .panel-success, .panel-info,
.panel-warning, .panel-danger, .panel-default {
    border-top-color: var(--glass-border) !important;
}

/* Login / password-reset card: stronger blur so text stays crisp */
.card.mw-540,
.login-wrapper .card {
    background: var(--glass-bg-strong) !important;
    box-shadow: var(--glass-shadow-hover);
}

/* ══════════════════════════════════════════════════
   7. BUTTONS - unify the green/blue/orange mess
   onto the coral + ink brand palette.
   ══════════════════════════════════════════════════ */

.btn {
    border-radius: var(--rounding-md);
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background-color 200ms ease, border-color 200ms ease,
                box-shadow 200ms ease, transform 150ms ease, color 200ms ease;
}

.btn:active {
    transform: translateY(0);
}

/* Primary actions - coral. WHMCS uses success/info/primary
   interchangeably for "do the main thing", so map them all. */
.btn-primary,
.btn-success,
.btn-info {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(240, 82, 67, 0.26);
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-info:hover, .btn-info:focus {
    background-color: var(--primary-lifted) !important;
    border-color: var(--primary-lifted) !important;
    box-shadow: 0 7px 20px rgba(240, 82, 67, 0.36);
    transform: translateY(-1px);
}

/* Secondary actions - quiet glass with ink text */
.btn-default,
.btn-secondary,
.btn-light {
    background-color: rgba(255, 255, 255, 0.72) !important;
    border-color: var(--border-muted) !important;
    color: var(--neutral-800) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(27, 23, 22, 0.05);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
    background-color: #fff !important;
    border-color: var(--primary-300) !important;
    color: var(--primary-accented) !important;
}

/* Warning stays distinct but on-brand (warm amber, not neon orange) */
.btn-warning {
    background-color: #E8890C !important;
    border-color: #E8890C !important;
    color: #fff !important;
}

.btn-warning:hover {
    background-color: #C87407 !important;
    border-color: #C87407 !important;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(240, 82, 67, 0.06);
}

.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ══════════════════════════════════════════════════
   8. STATUS BADGES - keep semantic colour, soften them
   ══════════════════════════════════════════════════ */

.label-success, .badge-success {
    background-color: rgba(0, 166, 62, 0.12) !important;
    color: #016630 !important;
    border: 1px solid rgba(0, 166, 62, 0.25);
    font-weight: 600;
}

.label-danger, .badge-danger {
    background-color: rgba(231, 0, 11, 0.10) !important;
    color: #9f0712 !important;
    border: 1px solid rgba(231, 0, 11, 0.22);
    font-weight: 600;
}

.label-default, .badge-secondary {
    background-color: rgba(27, 23, 22, 0.07) !important;
    color: var(--neutral-600) !important;
    border: 1px solid var(--glass-border-soft);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════
   9. DROPDOWN MENUS - frosted
   ══════════════════════════════════════════════════ */

/* Stacking: backdrop-filter on .card opens a new stacking
   context, and cards come after the navbar in the DOM - so
   without an explicit z-index the open dropdown is painted
   behind them. Lift the whole header chain above the page. */
.topbar,
#header,
.navbar.navbar-light,
.main-navbar-wrapper {
    position: relative;
    z-index: 1030;
}

.dropdown-menu {
    /* Near-opaque: menu text sits over arbitrary page content,
       so readability beats translucency here. */
    background: rgba(255, 255, 255, 0.985) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--rounding-lg);
    box-shadow: 0 12px 40px rgba(27, 23, 22, 0.18), 0 2px 8px rgba(27, 23, 22, 0.08);
    padding: 0.4rem;
    margin-top: 0.25rem;
    min-width: 12rem;
    z-index: 1040;
}

.dropdown-menu .divider,
.dropdown-menu .dropdown-divider {
    background-color: var(--border-muted);
    border-color: var(--border-muted);
}

.dropdown-menu .dropdown-item,
.dropdown-menu > li > a {
    border-radius: var(--rounding-sm);
    padding: 0.5rem 0.75rem;
    color: var(--neutral-700);
    font-size: 0.875rem;
    transition: background-color 160ms ease, color 160ms ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu > li > a:hover {
    background: rgba(240, 82, 67, 0.09);
    color: var(--primary-accented);
}

/* ══════════════════════════════════════════════════
   10. TABLES & LISTS
   ══════════════════════════════════════════════════ */

.table {
    background: transparent;
}

.table thead th {
    border-bottom: 1px solid var(--glass-border-soft);
    color: var(--neutral-600);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table td,
.table th {
    border-color: var(--glass-border-soft);
}

.table-hover tbody tr:hover {
    background-color: rgba(240, 82, 67, 0.05);
}

.list-group-item {
    background: transparent;
    border-color: var(--glass-border-soft);
}

.list-group-item.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* ══════════════════════════════════════════════════
   11. FORMS
   ══════════════════════════════════════════════════ */

.form-control,
.custom-select,
select.form-control {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-md);
    color: var(--neutral-800);
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.form-control:focus,
.custom-select:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(240, 82, 67, 0.15);
}

.form-control::placeholder {
    color: var(--neutral-400);
}

/* Knowledgebase search in the header */
.input-group.search .form-control {
    background: rgba(255, 255, 255, 0.85);
}

/* ══════════════════════════════════════════════════
   12. TYPOGRAPHY & FOCUS
   ══════════════════════════════════════════════════ */

h1, h2, h3, h4, h5 {
    color: var(--neutral-900);
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: var(--primary-lifted);
}

a:hover {
    color: var(--primary-accented);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════
   13. FOOTER
   ══════════════════════════════════════════════════ */

/* The stock footer is a dark bar with white text. An earlier
   revision made it translucent white, which left its links
   invisible - keep it dark, just move it onto brand ink. */
#footer,
.footer {
    background: var(--neutral-900) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);
}

#footer a,
.footer a {
    color: rgba(255, 255, 255, 0.85);
}

#footer a:hover,
.footer a:hover {
    color: #fff;
}

#footer .btn,
.footer .btn {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#footer .btn:hover,
.footer .btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════
   14. SAFARI / OLD-BROWSER FALLBACK
   Without backdrop-filter, translucent panels turn
   into unreadable mush - go opaque instead.
   ══════════════════════════════════════════════════ */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card, .panel, .dropdown-menu,
    .main-navbar-wrapper, .master-breadcrumb {
        background: rgba(255, 255, 255, 0.97) !important;
    }
}

/* ══════════════════════════════════════════════════
   15. HOMEPAGE (index.php)
   ══════════════════════════════════════════════════ */

/* Section headings */
.home-heading,
h2.text-center {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--neutral-900);
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
}

/* --- Domain search hero --- */
.input-group-wrapper {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--rounding-lg);
    box-shadow: var(--glass-shadow);
    padding: 0.4rem;
}

.input-group-wrapper .form-control {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 1rem;
    padding-left: 1rem;
}

.input-group-wrapper .form-control:focus {
    background: transparent;
    box-shadow: none;
}

/* --- Product group cards ---
   Stock markup uses Bootstrap's .card-columns, which is
   CSS multi-column: it balances by column height, so with
   19 cards of wildly different text lengths one column ran
   far past the others and left a huge empty gap. Grid gives
   predictable rows instead. */
.card-columns.home {
    column-count: unset !important;
    column-gap: unset !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.card-columns.home .card {
    display: flex !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

.card-columns.home .card-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card-columns.home .card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 0.75rem;
    min-height: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-columns.home .card-body p {
    color: var(--neutral-600);
    font-size: 0.875rem;
    line-height: 1.65;
    text-align: left;
}

/* Pin every CTA to the bottom so buttons line up across a row */
.card-columns.home .btn {
    margin-top: auto;
}

/* --- "How can we help" / "Your account" icon tiles ---
   Stock classes are card-accent-teal / -pomegranate /
   -sun-flower / -asbestos / -green / -midnight-blue: six
   unrelated colours. Collapse them onto the brand. */
.action-icon-btns > [class*="col-"] {
    margin-bottom: 1.25rem;
}

.action-icon-btns a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1.5rem 0.75rem;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--rounding-lg);
    box-shadow: var(--glass-shadow);
    color: var(--neutral-800);
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    text-decoration: none;
    transition: box-shadow 220ms ease, border-color 220ms ease,
                transform 220ms ease, color 220ms ease;
}

.action-icon-btns a:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: rgba(240, 82, 67, 0.35);
    transform: translateY(-3px);
    color: var(--primary-accented);
    text-decoration: none;
}

.action-icon-btns .ico-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 0 0.85rem;
    background: rgba(240, 82, 67, 0.10);
    border-radius: 50%;
    transition: background-color 220ms ease;
}

.action-icon-btns a:hover .ico-container {
    background: rgba(240, 82, 67, 0.18);
}

.action-icon-btns .ico-container i {
    font-size: 1.35rem;
    color: var(--primary) !important;
    margin: 0;
}

/* ══════════════════════════════════════════════════
   16. LOGIN / PASSWORD RESET
   ══════════════════════════════════════════════════ */

.login-form .card,
.card.mw-540 {
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 60px rgba(27, 23, 22, 0.14),
                0 4px 12px rgba(27, 23, 22, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Don't lift the login card on hover - it isn't clickable */
.login-form .card:hover,
.card.mw-540:hover {
    transform: none;
    border-color: var(--glass-border);
}

.login-form .h3,
.card.mw-540 .h3 {
    font-weight: 700;
    color: var(--neutral-900);
}

.form-control-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-700);
}

/* Icon prefix on the email / password fields */
.input-group-merge .input-group-text {
    background: rgba(240, 82, 67, 0.07);
    border: 1px solid var(--border-muted);
    border-right: none;
    color: var(--primary);
}

.input-group-merge .form-control {
    border-left: none;
}

.btn-reveal-pw {
    border-left: none !important;
    color: var(--neutral-500) !important;
}

/* ══════════════════════════════════════════════════
   17. REGISTRATION FORM
   ══════════════════════════════════════════════════ */

#registration .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--neutral-900);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--glass-border-soft);
}

/* Fields with a leading icon: the stock icon is mid-grey and
   sits flush against the text. */
.form-group.prepend-icon {
    position: relative;
}

.form-group.prepend-icon .field-icon {
    color: var(--primary);
    opacity: 0.65;
    z-index: 2;
}

.form-group.prepend-icon .field {
    padding-left: 2.5rem;
}

#registration .form-control {
    height: auto;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* Password strength meter */
#registration .progress {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--neutral-200);
}

/* ══════════════════════════════════════════════════
   18. DOMAIN PRICING / DOMAIN LISTS
   ══════════════════════════════════════════════════ */

.domain-pricing .table td,
.domain-pricing .table th {
    vertical-align: middle;
}

.tld-name,
.domain-pricing .tld {
    font-weight: 700;
    color: var(--primary-accented);
}

/* ══════════════════════════════════════════════════
   19. PAGE RHYTHM
   Let the ambient background show at the edges instead
   of cards running the full width of the viewport.
   ══════════════════════════════════════════════════ */

@media (min-width: 1400px) {
    #main-body > .container,
    .main-content > .container {
        max-width: 1240px;
    }
}

/* ══════════════════════════════════════════════════
   20. STORE - Nexus Cart product grid
   Stock markup: .row.row-eq-height > .col-md-6 >
   .product > header / .product-desc / footer.
   Two per row, price and CTA floated right leaving a
   large dead area under the feature list. Rebuilt as
   proper pricing cards.
   ══════════════════════════════════════════════════ */

/* Four across on wide screens instead of two, and let the
   grid size the columns rather than Bootstrap's col-md-6. */
.row.row-eq-height {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.15rem 1.25rem;
    margin-left: 0;
    margin-right: 0;
    /* Nexus Cart emits ONE .row per pair of products rather
       than a single grid, so row-gap never applies between
       them - they are sibling containers. The separation
       between stacked rows has to come from margin. */
    margin-bottom: 1.15rem;
    /* Equal-height cards: headers and CTAs line up across the
       row. Shorter plans get some space above the price, which
       reads better than staggered card edges. */
    align-items: stretch;
}

.row.row-eq-height > [class*="col-"] {
    max-width: none;
    flex: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    /* The grid stretches this wrapper; making it a flex parent
       is what lets .product actually fill it. Without this,
       height:100% resolves against an auto-height box and the
       cards stay ragged. */
    display: flex;
}

.product {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 26px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.product:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: rgba(240, 82, 67, 0.35);
    transform: translateY(-3px);
}

/* --- Plan name --- */
.product > header {
    padding: 1.25rem 1.25rem 1rem;
    background: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid var(--glass-border-soft);
    text-align: center;
    /* 1px inside the card radius so the tinted header follows
       the curve instead of squaring off the top corners. */
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.product > header span {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--neutral-900);
    letter-spacing: -0.01em;
}

/* --- Feature list --- */
/* theme.min.css floats the description left at 60% and the
   footer right at 40% (via #order-standard_cart .products
   .product ..., which outranks anything class-based here).
   Undo the float layout so the flex column can stack them. */
.product .product-desc,
.product > footer {
    float: none !important;
    width: auto !important;
}

.product .product-desc {
    flex: 1 1 auto;
    padding: 1.25rem;
}

/* Stray <br> between list items in the stock output */
.product .product-desc br {
    display: none;
}

/* Empty <p>/<ul> WHMCS emits when there is no description */
.product .product-desc > p:empty,
.product .product-desc > ul:empty {
    display: none;
}

.product .package-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product .package-features li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--neutral-600);
}

.product .package-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 0.85rem;
    height: 0.5rem;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}

.product .package-features li b {
    color: var(--neutral-800);
    font-weight: 600;
}

/* Section separator inside the feature list */
.product .package-features li.premium-divider {
    padding-left: 0;
    margin: 0.75rem 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-400);
    border-top: 1px solid var(--glass-border-soft);
    padding-top: 0.85rem;
}

.product .package-features li.premium-divider::before {
    display: none;
}

/* --- Price + CTA --- */
.product > footer {
    margin-top: auto;
    padding: 1.15rem 1.25rem 1.35rem;
    background: rgba(255, 255, 255, 0.35);
    border-top: 1px solid var(--glass-border-soft);
    text-align: center;
    float: none !important;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.product .product-pricing {
    float: none !important;
    margin-bottom: 0.9rem;
    font-size: 0.75rem;
    color: var(--neutral-500);
}

.product .product-pricing .price {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
    letter-spacing: -0.02em;
}

/* theme.min.css pins .btn-order-now to a fixed width, hence
   the !important here - a full-width CTA reads far better at
   the bottom of a pricing card. */
.product > footer .btn,
.product > footer .btn-order-now {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.875rem;
}

/* --- Group header above the grid --- */
#products .product-group-header,
.store-header {
    text-align: center;
}


/* ══════════════════════════════════════════════════
   21. REFINEMENT PASS - depth & light
   Glassmorphism only reads as glass when three things
   are true: something vibrant sits behind it, edges
   catch light, and elevation is layered rather than
   flat. This section adds all three.
   ══════════════════════════════════════════════════ */

:root {
    /* Four-level elevation scale instead of one flat shadow */
    --elev-1: 0 1px 2px rgba(27, 23, 22, 0.04),
              0 1px 3px rgba(27, 23, 22, 0.06);
    --elev-2: 0 4px 6px -1px rgba(27, 23, 22, 0.07),
              0 2px 4px -2px rgba(27, 23, 22, 0.05);
    --elev-3: 0 12px 26px -6px rgba(27, 23, 22, 0.12),
              0 4px 10px -4px rgba(27, 23, 22, 0.06);
    --elev-4: 0 28px 56px -14px rgba(27, 23, 22, 0.20),
              0 10px 20px -10px rgba(27, 23, 22, 0.10);

    /* Coral glow used on hover, so lifting an element also
       warms it instead of only casting a grey shadow */
    --glow-primary: 0 12px 32px -8px rgba(240, 82, 67, 0.35);

    --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Vibrant backdrop ---
   The blur has to refract something. Larger, stronger,
   better-separated colour fields than before. */
body,
body.primary-bg-color {
    background-color: #EFE7E3;
    background-image:
        radial-gradient(1100px circle at -5% -8%, rgba(240, 82, 67, 0.30), transparent 55%),
        radial-gradient(900px circle at 104% 2%, rgba(247, 146, 134, 0.26), transparent 52%),
        radial-gradient(760px circle at 88% 88%, rgba(240, 82, 67, 0.16), transparent 55%),
        radial-gradient(900px circle at 8% 96%, rgba(27, 23, 22, 0.12), transparent 58%);
    background-attachment: fixed;
}

/* --- Glass edge highlight ---
   A 1px gradient rim, bright at the top where the light
   would hit and fading toward the bottom. Painted with a
   masked pseudo-element so it sits above the blur. */
.card,
.panel,
.product,
.tiles .tile,
.action-icon-btns a,
.dropdown-menu {
    position: relative;
}

.card::after,
.panel::after,
.product::after,
.tiles .tile::after,
.action-icon-btns a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.35) 28%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(240, 82, 67, 0.12) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Keep real content above the rim */
.card > *,
.panel > *,
.product > *,
.tiles .tile > *,
.action-icon-btns a > * {
    position: relative;
    z-index: 2;
}

/* --- Layered elevation + warm hover --- */
.card,
.panel,
.tiles .tile,
.action-icon-btns a,
.product {
    box-shadow: var(--elev-2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: box-shadow 420ms var(--ease-fluid),
                transform 420ms var(--ease-fluid),
                border-color 300ms ease;
}

.card:hover,
.panel:hover,
.product:hover {
    box-shadow: var(--elev-3), var(--glow-primary),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.tiles .tile:hover,
.action-icon-btns a:hover {
    box-shadow: var(--elev-4), var(--glow-primary),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.dropdown-menu {
    box-shadow: var(--elev-4);
}

/* Login card floats highest - it is the only thing on screen */
.login-form .card,
.card.mw-540 {
    box-shadow: var(--elev-4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* --- Interaction polish --- */
.tiles .tile,
.action-icon-btns a,
.list-group-item a,
.dropdown-item {
    cursor: pointer;
}

.btn {
    transition: background-color 220ms ease, border-color 220ms ease,
                box-shadow 320ms var(--ease-fluid),
                transform 220ms var(--ease-fluid), color 220ms ease;
}

.btn-primary:active,
.btn-success:active,
.btn-info:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(240, 82, 67, 0.30);
}

/* --- Typography rhythm ---
   Tighter tracking on large headings, comfortable line
   height on body copy (1.5-1.75). */
h1, h2, h3 {
    letter-spacing: -0.022em;
    line-height: 1.2;
}

p, li, td {
    line-height: 1.6;
}

/* Contrast floor: the stock muted grey fails 4.5:1 on our
   warm background, so lift it to a tone that passes. */
.text-muted,
small.text-muted {
    color: var(--neutral-600) !important;
}

/* --- Motion safety ---
   Blur and large shadows are expensive; drop the moving
   parts (not the look) when the user asks for less motion. */
@media (prefers-reduced-motion: reduce) {
    .card:hover,
    .panel:hover,
    .product:hover,
    .tiles .tile:hover,
    .action-icon-btns a:hover {
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════
   22. CONTENT HEADING BLOCK (.header-lined)
   Store group title + description, and the same block
   is reused on other pages. Stock renders it as a
   square white slab; make it a rounded glass panel
   like everything else.
   ══════════════════════════════════════════════════ */

.header-lined {
    position: relative;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--elev-2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

/* Same light-catching rim as the cards */
.header-lined::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.35) 28%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(240, 82, 67, 0.12) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.header-lined > * {
    position: relative;
    z-index: 2;
}

.header-lined h1,
.header-lined .font-size-36 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--neutral-900);
    margin-bottom: 0.65rem;
}

.header-lined p {
    margin-bottom: 0;
    /* 65-75 characters is the comfortable reading range;
       full-width paragraphs here ran well past that. */
    max-width: 68ch;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--neutral-600);
}

/* ══════════════════════════════════════════════════
   24. DOMAIN SELECTION STEP (store/<group>/<product>)
   The screen right after picking a plan. Two problems
   in stock form: the radios are iCheck sprites (a blue
   PNG, so no CSS colour reaches them), and the three
   options are flat grey slabs.
   ══════════════════════════════════════════════════ */

.domain-selection-options .option {
    padding: 1rem 1.15rem !important;
    margin-bottom: 0.75rem !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: 14px !important;
    box-shadow: var(--elev-1);
    cursor: pointer;
    transition: border-color 220ms ease, box-shadow 220ms ease,
                background-color 220ms ease;
}

.domain-selection-options .option:hover {
    border-color: rgba(240, 82, 67, 0.35);
    box-shadow: var(--elev-2);
}

/* Highlight the option whose radio is checked */
.domain-selection-options .option:has(.checked) {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: var(--elev-2), 0 0 0 3px rgba(240, 82, 67, 0.12);
}

.domain-selection-options .option label {
    margin-bottom: 0;
    font-weight: 500;
    color: var(--neutral-800);
    cursor: pointer;
}

/* --- iCheck radios & checkboxes ---
   iCheck hides the real input and paints state with a
   background sprite (blue.png). Kill the sprite and draw
   the control in CSS so it follows the brand. */
.iradio_square-blue,
.icheckbox_square-blue {
    position: relative;
    width: 18px !important;
    height: 18px !important;
    margin-right: 0.6rem !important;
    background: #fff !important;
    background-image: none !important;
    border: 2px solid var(--border-lifted);
    transition: border-color 180ms ease, background-color 180ms ease;
}

.iradio_square-blue {
    border-radius: 50%;
}

.icheckbox_square-blue {
    border-radius: 5px;
}

.iradio_square-blue.checked,
.icheckbox_square-blue.checked {
    background: var(--primary) !important;
    border-color: var(--primary);
}

/* Radio: inner dot. inset is measured from the border box,
   and the 2px border eats into it - at 3px only a sliver of
   coral showed and the control read as a hollow ring. */
.iradio_square-blue.checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

/* Checkbox: tick mark */
.icheckbox_square-blue.checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.iradio_square-blue.hover,
.icheckbox_square-blue.hover {
    border-color: var(--primary-300);
}

.iradio_square-blue.disabled,
.icheckbox_square-blue.disabled {
    opacity: var(--disabled-opacity);
}

/* --- The www. / TLD input row --- */
.domain-input-group .input-group-text,
.domain-input-group .input-group-addon {
    background: rgba(240, 82, 67, 0.07);
    border-color: var(--border-muted);
    color: var(--neutral-600);
    font-size: 0.8125rem;
}

.domain-input-group select,
.domain-input-group .form-control {
    height: auto;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* Heading block on this step holds only a title, so it
   doesn't need the tall content padding. */
.header-lined:has(> h1:only-child),
.header-lined:has(> h2:only-child) {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

/* ══════════════════════════════════════════════════
   25. MOBILE
   ══════════════════════════════════════════════════ */

@media (max-width: 1199.98px) {
    /* The nav bar collapses into the hamburger, but the wrapper
       keeps its 67px min-height and renders as an empty white
       strip under the dark header. Hide it until the menu is
       actually open. */
    .main-navbar-wrapper {
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        box-shadow: none;
    }

    .main-navbar-wrapper:not(:has(.navbar-collapse.show)) {
        display: none;
    }

    /* Open menu: full-width rows, comfortable tap targets
       (44px minimum) instead of the desktop inline pills. */
    .main-navbar-wrapper .navbar-collapse.show {
        padding: 0.5rem 0 1rem;
    }

    .main-navbar-wrapper .navbar-nav > li > a {
        display: block;
        padding: 0.75rem 0.9rem !important;
        min-height: 44px;
        font-size: 0.9375rem;
    }

    .main-navbar-wrapper .navbar-nav.ml-auto > li:last-child > a {
        margin-top: 0.5rem;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    /* No coral wash on phones.
       The desktop backdrop uses 900-1100px colour fields. On a
       360px screen they cover the whole viewport, so instead of
       a subtle tint the page just reads as washed-out pink.
       Scaling them down didn't fix it either - any coral spread
       across a small screen looks like a pink background.
       So: a clean warm-neutral surface. The cards, buttons and
       accents carry the brand; the background stays out of the
       way, which is what it should do on a small screen.
       background-attachment: fixed is also dropped here - it is
       a known scroll-jank problem on iOS Safari. */
    body,
    body.primary-bg-color {
        background-color: #F4F1EF;
        background-image: none;
        background-attachment: scroll;
    }

    /* Nexus Cart pins its checkout CTA to the bottom of the
       viewport on mobile (Lagom does not). Reserve room so it
       never covers the order summary underneath it. */
    #nexus-root,
    #order-standard_cart {
        padding-bottom: 5.5rem;
    }

    /* One column: equal heights just pad short cards with dead
       space, since nothing sits beside them to line up with. */
    .row.row-eq-height {
        align-items: start;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .row.row-eq-height > [class*="col-"] {
        display: block;
    }

    .product {
        height: auto !important;
    }

    /* Headings: 1.75rem is too large at 360px */
    .header-lined {
        padding: 1.15rem 1.15rem;
    }

    .header-lined h1,
    .header-lined .font-size-36,
    h1.font-size-36 {
        font-size: 1.35rem;
    }

    h2.text-center {
        font-size: 1.35rem;
        margin-top: 2rem !important;
        margin-bottom: 1.25rem !important;
    }

    /* Nothing should force the page wider than the screen */
    img, table, pre, iframe {
        max-width: 100%;
    }

    /* Breadcrumbs and tab strips are the usual overflow
       culprits - let them wrap or scroll on their own. */
    .breadcrumb,
    .master-breadcrumb {
        flex-wrap: wrap;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Wide tables scroll inside their own box rather than
       stretching the page. */
    .table-responsive,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tap targets */
    .btn,
    .list-group-item a,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dropdown-item {
        justify-content: flex-start;
    }

    /* Blur is the most expensive part of this design and phones
       feel it most - drop it on the many repeated cards; bars
       and menus keep theirs.
       Cards go solid white with a real border: against the plain
       neutral background above, a translucent white panel has
       almost nothing to separate it from the page. */
    .card,
    .panel,
    .product,
    .tiles .tile,
    .action-icon-btns a,
    .header-lined {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff !important;
        border-color: rgba(27, 23, 22, 0.09);
    }

    /* The light-catching rim needs a vibrant backdrop to make
       sense; without one it just muddies the card edge. */
    .card::after,
    .panel::after,
    .product::after,
    .tiles .tile::after,
    .action-icon-btns a::after,
    .header-lined::after {
        display: none;
    }
}

/* ══════════════════════════════════════════════════
   26. MOBILE POLISH
   Spacing, density and hierarchy for small screens.
   ══════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    /* Breathing room at the page edges. Cards ran nearly
       edge-to-edge, which makes a phone screen feel cramped. */
    .container,
    .cart-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Softer corners at small sizes - 26px on a 328px-wide card
       is proportionally much heavier than on desktop. */
    .product {
        border-radius: 18px;
    }

    .product > header {
        border-top-left-radius: 17px;
        border-top-right-radius: 17px;
        padding: 0.95rem 1rem 0.85rem;
    }

    .product > footer {
        border-bottom-left-radius: 17px;
        border-bottom-right-radius: 17px;
        padding: 1rem;
    }

    .card,
    .panel,
    .header-lined {
        border-radius: 16px;
    }

    /* Tighter card padding so more content fits above the fold */
    .card-body,
    .panel-body {
        padding: 1rem;
    }

    .product .product-desc {
        padding: 1rem;
    }

    /* Feature rows: slightly larger text than desktop. 13px is
       fine on a monitor, cramped on a phone. */
    .product .package-features li {
        font-size: 0.875rem;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    /* Price is the decision point - give it more presence */
    .product .product-pricing .price {
        font-size: 1.75rem;
    }

    /* Sidebar panels (Categorías / Acciones / Divisa) stack
       above the products on mobile and push them far down.
       Compact them. */
    .card-sidebar .card-body,
    .panel-sidebar .panel-body {
        padding: 0.75rem 1rem;
    }

    .card-sidebar,
    .panel-sidebar {
        margin-bottom: 0.75rem !important;
    }

    /* Stat tiles: two per row is right, but they were tall and
       the number/label pairing was loose. */
    .tiles .row.no-gutters > [class*="col-"] {
        padding: 0 0.35rem;
        margin-bottom: 0.7rem;
    }

    .tiles .tile {
        border-radius: 14px;
    }

    .tiles .tile > i {
        opacity: 0.12;
    }

    /* Homepage quick-access tiles: 2 columns reads better than
       the stock 6-wide squeeze. */
    .action-icon-btns a {
        padding: 1.15rem 0.6rem;
        border-radius: 14px;
    }

    .action-icon-btns .ico-container {
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: 0.6rem;
    }

    /* Forms: 16px minimum on inputs, otherwise iOS zooms the
       page in when the field is focused. */
    .form-control,
    select.form-control,
    .custom-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    textarea {
        font-size: 16px;
    }

    /* Domain option rows */
    .domain-selection-options .option {
        padding: 0.85rem 0.9rem !important;
        border-radius: 12px !important;
    }

    .domain-input-group .input-group {
        flex-wrap: wrap;
    }

    /* Login / register card fills the width comfortably */
    .card.mw-540 {
        margin-left: 0;
        margin-right: 0;
    }

    .card.mw-540 .card-body {
        padding: 1.5rem 1.25rem !important;
    }

    /* Footer */
    #footer .container,
    .footer .container {
        text-align: center;
    }

    #footer .btn,
    .footer .btn {
        margin-top: 0.75rem;
    }
}

/* Very small phones */
@media (max-width: 400px) {
    .header-lined h1,
    .header-lined .font-size-36,
    h1.font-size-36 {
        font-size: 1.2rem;
    }

    .product .product-pricing .price {
        font-size: 1.55rem;
    }
}

/* ══════════════════════════════════════════════════
   27. ORDER SUMMARY (cart.php?a=confproduct / checkout)
   Stock header is a flat mid-grey bar; bring it onto
   the ink/coral palette like the rest of the flow.
   ══════════════════════════════════════════════════ */

.order-summary .panel-heading,
.order-summary .card-header,
#order-summary .panel-heading,
.summary-container .panel-heading {
    background: var(--neutral-900) !important;
    color: #fff !important;
    border-bottom: none !important;
    font-weight: 600;
}

.order-summary .panel-heading h3,
#order-summary .panel-heading h3,
.summary-container .panel-heading h3 {
    color: #fff !important;
    margin: 0;
    font-size: 1rem;
}

/* Grand total line */
.order-summary .total-due-today,
#order-summary .total-due-today,
.summary-container .total-due-today {
    color: var(--primary) !important;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════
   28. BILLING CYCLE SELECTOR
   This is the choice that decides what the customer
   pays, but stock renders it as a small select at the
   very bottom of the page - below the fold on most
   screens. Promote it to a highlighted panel.
   ══════════════════════════════════════════════════ */

.field-container:has(#inputBillingcycle),
.form-group:has(#inputBillingcycle) {
    position: relative;
    padding: 1.15rem 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg,
        rgba(240, 82, 67, 0.07) 0%,
        rgba(240, 82, 67, 0.03) 100%);
    border: 1.5px solid rgba(240, 82, 67, 0.28);
    border-radius: 16px;
    box-shadow: var(--elev-1);
}

/* Both wrappers match the :has() test, so when they are nested
   the panel gets drawn twice and the hint below prints twice.
   Neutralise the inner one completely. */
.field-container:has(#inputBillingcycle) .form-group:has(#inputBillingcycle) {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.field-container:has(#inputBillingcycle) .form-group:has(#inputBillingcycle)::after {
    display: none;
}

.field-container:has(#inputBillingcycle) label,
.form-group:has(#inputBillingcycle) label {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--neutral-900);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

#inputBillingcycle {
    width: 100%;
    max-width: 26rem;
    height: auto;
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    background-color: #fff;
    border: 1.5px solid var(--primary-200);
    border-radius: 11px;
    color: var(--neutral-900);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

#inputBillingcycle:hover {
    border-color: var(--primary-300);
}

#inputBillingcycle:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(240, 82, 67, 0.15);
    outline: none;
}

/* Hint under the selector - the longer cycles are cheaper
   per month, and nothing in the stock UI says so. */
.field-container:has(#inputBillingcycle)::after,
.form-group:has(#inputBillingcycle)::after {
    content: "Los ciclos más largos tienen mejor precio por mes.";
    display: block;
    margin-top: 0.6rem;
    color: var(--neutral-600);
    font-size: 0.8125rem;
}

@media (max-width: 767.98px) {
    .field-container:has(#inputBillingcycle),
    .form-group:has(#inputBillingcycle) {
        padding: 1rem;
        border-radius: 14px;
    }

    #inputBillingcycle {
        max-width: none;
        font-size: 16px; /* stops iOS zooming on focus */
    }
}

/* ══════════════════════════════════════════════════
   29. INVOICE (viewinvoice.php)
   Standalone page - it has its own <head> and does NOT
   inherit the site layout, so viewinvoice.tpl had to be
   edited to pull this file in at all.
   ══════════════════════════════════════════════════ */

.invoice-container {
    max-width: 60rem;
    margin: 2.5rem auto;
    padding: 2.5rem 2.75rem;
    background: #fff;
    border: 1px solid var(--border-muted);
    border-radius: 18px;
    box-shadow: var(--elev-3);
}

/* --- Header: logo + status --- */
.invoice-header {
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--neutral-900);
}

.invoice-header img {
    max-height: 42px;
    width: auto;
    margin-bottom: 0.75rem;
}

.invoice-header h3 {
    margin: 0;
    color: var(--neutral-500);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Status pill. Stock renders these as plain coloured text. */
.invoice-status span {
    display: inline-block;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.invoice-status .paid {
    background: rgba(0, 166, 62, 0.12);
    color: #016630;
    border: 1px solid rgba(0, 166, 62, 0.3);
}

.invoice-status .unpaid {
    background: rgba(240, 82, 67, 0.12);
    color: var(--primary-accented);
    border: 1px solid rgba(240, 82, 67, 0.32);
}

.invoice-status .refunded,
.invoice-status .cancelled,
.invoice-status .draft {
    background: rgba(27, 23, 22, 0.07);
    color: var(--neutral-600);
    border: 1px solid var(--border-muted);
}

.invoice-status .collections {
    background: rgba(232, 137, 12, 0.13);
    color: #8a5104;
    border: 1px solid rgba(232, 137, 12, 0.3);
}

/* The <hr> right under the header duplicates the border above */
.invoice-container > hr:first-of-type {
    display: none;
}

/* --- Addresses / meta --- */
.invoice-col strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--neutral-500);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.invoice-col address,
.invoice-col .small-text {
    color: var(--neutral-800);
    font-size: 0.875rem;
    line-height: 1.6;
    font-style: normal;
}

.payment-btn-container {
    margin-top: 0.85rem;
}

/* --- Line items table --- */
.invoice-container .card.bg-default {
    background: transparent !important;
    border: 1px solid var(--border-muted);
    border-radius: 14px;
    box-shadow: none;
    overflow: hidden;
}

.invoice-container .card.bg-default .card-header {
    background: var(--neutral-900) !important;
    border-bottom: none !important;
    border-radius: 0;
    padding: 0.9rem 1.25rem;
}

.invoice-container .card.bg-default .card-header .card-title {
    color: #fff !important;
    font-size: 1rem !important;
    margin: 0;
}

.invoice-container table {
    margin-bottom: 0;
}

.invoice-container table thead th {
    padding: 0.85rem 1.25rem;
    background: var(--neutral-50);
    border-bottom: 1px solid var(--border-muted);
    color: var(--neutral-600);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.invoice-container table td {
    padding: 0.85rem 1.25rem;
    border-color: var(--border-muted);
    color: var(--neutral-800);
    font-size: 0.875rem;
    vertical-align: middle;
}

/* Totals rows at the foot of the table */
.invoice-container table tfoot td,
.invoice-container table tr.total td,
.invoice-container table td[align="right"]:last-child {
    font-weight: 600;
}

.invoice-container table tfoot tr:last-child td {
    background: rgba(240, 82, 67, 0.05);
    border-top: 2px solid var(--primary);
    color: var(--neutral-900);
    font-size: 1.05rem;
    font-weight: 700;
}

/* --- Transactions ("Libro mayor") ---
   The stock heading uses Bootstrap's .bg-info, which paints it
   cyan - the one off-brand colour left on the invoice. */
.invoice-container .bg-info,
.invoice-container .card-title.bg-info {
    background: var(--neutral-700) !important;
    border-radius: 10px 10px 0 0;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.9375rem;
}

.transactions-container {
    border: 1px solid var(--border-muted);
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.transactions-container table thead th {
    background: var(--neutral-50);
}

/* --- Actions --- */
.invoice-container .btn-group .btn {
    border-radius: 9px;
}

.invoice-container .btn-group .btn + .btn {
    margin-left: 0.4rem;
}

/* --- Print --- */
@media print {
    .invoice-container {
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
    }

    .d-print-none {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .invoice-container {
        margin: 0.75rem;
        padding: 1.25rem;
        border-radius: 14px;
    }

    .invoice-header {
        text-align: center;
    }

    .invoice-container table td,
    .invoice-container table thead th {
        padding: 0.65rem 0.75rem;
    }
}

/* ══════════════════════════════════════════════════
   30. HEADER - light logo bar
   Single logo file: assets/img/logo.png stays the DARK
   version, because the invoice PDF and the email
   templates read that same file and both sit on white.
   So the logo bar here is light too, and the only dark
   band is the thin utility strip above it.
   ══════════════════════════════════════════════════ */

.navbar.navbar-light {
    background: rgba(255, 255, 255, 0.94) !important;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(27, 23, 22, 0.05);
}

/* Give the logo room and a consistent height regardless of
   the file's own dimensions. */
.navbar.navbar-light .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar.navbar-light .navbar-brand img {
    height: 36px;
    width: auto;
    max-width: 100%;
}

/* Search field: quiet until focused, so the logo stays the
   first thing the eye lands on. */
.navbar.navbar-light .input-group .form-control {
    background: var(--neutral-50);
    border: 1px solid var(--border-muted);
    border-left: none;
    font-size: 0.875rem;
}

.navbar.navbar-light .input-group .form-control:focus {
    background: #fff;
    border-color: var(--primary);
}

.navbar.navbar-light .input-group-prepend .btn,
.navbar.navbar-light .input-group-text {
    background: var(--neutral-50);
    border: 1px solid var(--border-muted);
    border-right: none;
    color: var(--neutral-400);
}

/* Cart button */
.navbar.navbar-light .cart-btn {
    background: var(--neutral-50);
    border: 1px solid var(--border-muted);
    border-radius: 9px;
    color: var(--neutral-700) !important;
}

.navbar.navbar-light .cart-btn:hover {
    background: #fff;
    border-color: var(--primary-300);
    color: var(--primary-accented) !important;
}

/* Coral hairline between the logo bar and the nav - enough
   separation without a hard grey rule. */
.main-navbar-wrapper {
    border-top: 2px solid var(--primary);
}

@media (max-width: 767.98px) {
    .navbar.navbar-light {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .navbar.navbar-light .navbar-brand img {
        height: 30px;
    }
}

/* ══════════════════════════════════════════════════
   31. DETAIL PASS - measurements taken from AlexHost
   Their palette turned out to be ours almost exactly
   (#F05443 vs #F05243, same ink, same background), so
   nothing changes colour here. What is borrowed is the
   proportion: bigger type, taller buttons, rounder
   corners. The glass treatment stays.
   ══════════════════════════════════════════════════ */

/* Base type from 14px to 15px. Theirs runs at 16px, which
   would enlarge every rem in this file by 14% and risks
   overflow on small screens - 15px is the safe middle. */
html {
    font-size: 15px;
}

/* Headings: theirs are 32px/700 */
.header-lined h1,
.header-lined .font-size-36,
h1.font-size-36 {
    font-size: 2rem;
    font-weight: 700;
}

h2.text-center {
    font-size: 1.6rem;
    font-weight: 700;
}

/* Buttons: 13px radius, 52px tall, bold. The stock ones
   were 9px and noticeably shorter. */
.btn {
    border-radius: 13px;
    font-weight: 700;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-default,
.btn-secondary {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.btn-sm {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    border-radius: 10px;
}

.product > footer .btn,
.product > footer .btn-order-now {
    border-radius: 13px;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

/* Cards and panels: 20px */
.card,
.panel,
.header-lined,
.product {
    border-radius: 20px;
}

.card-header,
.panel-heading {
    border-top-left-radius: 19px;
    border-top-right-radius: 19px;
}

.card-footer,
.panel-footer {
    border-bottom-left-radius: 19px;
    border-bottom-right-radius: 19px;
}

.product > header {
    border-top-left-radius: 19px;
    border-top-right-radius: 19px;
}

.product > footer {
    border-bottom-left-radius: 19px;
    border-bottom-right-radius: 19px;
}

/* Selected state: 1px coral border over a 3% coral tint,
   instead of a heavy shadow. Cleaner and easier to scan. */
.domain-selection-options .option:has(.checked) {
    border: 1px solid var(--primary);
    background: rgba(240, 82, 67, 0.03) !important;
    box-shadow: none;
}

/* Form fields: taller and rounder to match the buttons */
.form-control,
.custom-select,
select.form-control {
    border-radius: 12px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

#inputBillingcycle {
    border-radius: 13px;
}

/* Icon tiles at 10px, as theirs */
.action-icon-btns .ico-container,
.tiles .tile {
    border-radius: 16px;
}

@media (max-width: 767.98px) {
    /* Keep the smaller radii on phones - 20px on a narrow
       card is proportionally much heavier than on desktop. */
    .card,
    .panel,
    .header-lined,
    .product {
        border-radius: 16px;
    }

    .product > header {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }

    .product > footer {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
}

/* ══════════════════════════════════════════════════
   32. SPECIFICITY FIXES
   all.min.css targets the store cards through
   "#order-standard_cart .products .product", which has
   an id in it and outranks any class-based rule here.
   These need !important - matching that specificity by
   hand would mean hardcoding WHMCS's own ids, which
   breaks the day they rename one.
   ══════════════════════════════════════════════════ */

.product {
    border-radius: 20px !important;
}

.product > header {
    border-radius: 19px 19px 0 0 !important;
}

.product > footer {
    border-radius: 0 0 19px 19px !important;
}

@media (max-width: 767.98px) {
    .product {
        border-radius: 16px !important;
    }

    .product > header {
        border-radius: 15px 15px 0 0 !important;
    }

    .product > footer {
        border-radius: 0 0 15px 15px !important;
    }
}

/* ══════════════════════════════════════════════════
   33. BUTTON PADDING CORRECTION
   §31 set 1.75rem of side padding on buttons, copying
   AlexHost's proportions. Their buttons sit in wide
   containers; several of ours don't - inside the
   services list the label wrapped onto two lines.
   Narrower sides, same height, and no wrapping.
   ══════════════════════════════════════════════════ */

.btn-primary,
.btn-success,
.btn-info,
.btn-default,
.btn-secondary {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    white-space: nowrap;
}

/* Buttons that own their row keep the generous padding */
.product > footer .btn,
.product > footer .btn-order-now,
.login-form .btn-primary {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

/* Inside dense rows (services, domains, invoices) go tighter
   still - these sit three or four to a line. */
.table .btn,
.list-group-item .btn,
.btn-group .btn {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-size: 0.85rem;
}

/* On phones a nowrap label can push the page sideways;
   there, allow wrapping again. */
@media (max-width: 767.98px) {
    .btn {
        white-space: normal;
    }
}

/* ══════════════════════════════════════════════════
   34. PACKAGE FEATURE HIGHLIGHTS
   Optional spans inside .package-features so the
   selling points read differently from plain limits.
   Usage in the product description:
     <span class="feat-unlimited">Ilimitada</span>
     <span class="feat-free">Gratis</span>
   ══════════════════════════════════════════════════ */

.package-features .feat-unlimited {
    color: var(--primary-accented);
    font-weight: 600;
}

.package-features .feat-free {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: rgba(0, 166, 62, 0.10);
    border: 1px solid rgba(0, 166, 62, 0.22);
    border-radius: 999px;
    color: #016630;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
}

/* Section dividers: a touch more separation between blocks
   now that there can be more than one per card. */
.product .package-features li.premium-divider {
    margin-top: 1rem;
}

.product .package-features li.premium-divider:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* ══════════════════════════════════════════════════
   35. STORE GRID - drop Bootstrap's row separators
   Nexus Cart inserts empty class-less <div>s between
   columns as line-break helpers for the float layout.
   Harmless there, but §20 turns the row into a grid
   and each one then claims a whole cell - leaving a
   gap in the middle of the product row.
   ══════════════════════════════════════════════════ */

.row.row-eq-height > *:not([class*="col-"]) {
    display: none;
}

/* ══════════════════════════════════════════════════
   36. FORM FIELD HEIGHT FIX
   §31 added vertical padding to .form-control to match
   AlexHost's taller inputs, but Bootstrap pins their
   height at 35.75px. With a fixed height the padding
   eats the text box instead of growing the field, so
   descenders were being clipped in every select.
   height:auto lets the padding do what it should.
   ══════════════════════════════════════════════════ */

.form-control,
.custom-select,
select.form-control,
input.form-control,
textarea.form-control {
    height: auto;
    min-height: 0;
}

/* Selects need room for the arrow plus a sane line box */
select.form-control,
.custom-select {
    line-height: 1.5;
    background-position: right 0.75rem center;
}

/* Textareas keep their own sizing */
textarea.form-control {
    min-height: 6rem;
}

/* Input groups: keep every part the same height */
.input-group .form-control,
.input-group .btn,
.input-group-text {
    height: auto;
}

/* ══════════════════════════════════════════════════
   37. ALERTS
   Bootstrap's stock alert colours (mustard yellow,
   sky blue, mint green) are the last off-palette
   elements left in the client area. Same four tones
   used in the email templates, so a warning looks the
   same in the panel and in the inbox.
   ══════════════════════════════════════════════════ */

.alert {
    border-radius: 12px;
    border-width: 0 0 0 3px;
    border-style: solid;
    padding: 0.95rem 1.15rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Avisos / advertencias */
.alert-warning {
    background-color: #FFF8E6 !important;
    border-color: #E8890C !important;
    color: #5C4708 !important;
}

.alert-warning a {
    color: #5C4708;
    font-weight: 700;
}

/* Informativo */
.alert-info {
    background-color: #F0F6FF !important;
    border-color: #155dfc !important;
    color: #193cb8 !important;
}

.alert-info a {
    color: #193cb8;
    font-weight: 700;
}

/* Éxito */
.alert-success {
    background-color: #F0FBF4 !important;
    border-color: #00a63e !important;
    color: #016630 !important;
}

.alert-success a {
    color: #016630;
    font-weight: 700;
}

/* Error */
.alert-danger,
.alert-error {
    background-color: #FEF4F2 !important;
    border-color: var(--primary) !important;
    color: #8C2A1C !important;
}

.alert-danger a,
.alert-error a {
    color: #8C2A1C;
    font-weight: 700;
}

/* Iconos dentro de la alerta, al tono del texto */
.alert i,
.alert .fas,
.alert .far {
    color: inherit;
    opacity: 0.75;
}

/* La variante compacta del carrito */
.alert.info-text-sm {
    font-size: 0.875rem;
    padding: 0.85rem 1rem;
}

/* ══════════════════════════════════════════════════
   38. GOOGLE SIGN-IN
   WHMCS drops the provider block as a SIBLING of the
   form, so it floats detached below the card. The
   button itself is a cross-origin iframe served by
   accounts.google.com - untouchable. What we can do
   is place and frame its container.

   Two layouts, because the pages differ: login has a
   single centred card to attach to; register does not
   (no .login-form, sidebar card instead), so there it
   stays standalone.
   ══════════════════════════════════════════════════ */

/* --- Base: standalone, works on any page --- */

.providerPreLinking {
    max-width: 540px;
    margin: 1.5rem auto 0 auto;
    padding: 1.35rem 1.5rem 0.5rem;
    text-align: center;
    position: relative;
}

/* "o" over a hairline rule */
.providerPreLinking::before {
    content: "o";
    display: block;
    margin: 0 0 1.15rem 0;
    padding: 0 0.75rem;
    background: transparent;
    color: #7A716C;
    font-size: 0.8125rem;
    position: relative;
    z-index: 1;
    width: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.providerPreLinking::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 1.95rem;
    height: 1px;
    background: rgba(27, 23, 22, 0.10);
    z-index: 0;
}

.providerPreLinking > * {
    position: relative;
    z-index: 1;
}

/* Google renders its iframe left-aligned */
.providerPreLinking iframe {
    margin: 0 auto !important;
    display: block !important;
}

/* --- Login page only: fuse the block onto the card ---
   Scoped with :has() so the register page, which has no
   card to attach to, keeps the standalone layout above. */

.primary-content:has(form.login-form) .providerPreLinking {
    margin-top: -1px;
    padding: 1.35rem 1.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-top: none;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 28px 56px -14px rgba(27, 23, 22, 0.2);
}

form.login-form .card,
form.login-form .card-footer {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

form.login-form .card {
    box-shadow: 0 -2px 24px -12px rgba(27, 23, 22, 0.14);
}

/* --- Mobile --- */

@media (max-width: 575.98px) {
    .primary-content:has(form.login-form) .providerPreLinking {
        margin-left: 15px;
        margin-right: 15px;
        padding: 1.15rem 1rem 1.25rem;
    }
}

/* ══════════════════════════════════════════════════
   39. BANNER ROTATOR
   Content lives in includes/banners.tpl - that file
   is the only thing to edit to change a promo.
   Three themes so consecutive banners don't read as
   one long coral wall.
   ══════════════════════════════════════════════════ */

.ehost-banners {
    position: relative;
    margin: 0 0 2.25rem 0;
}

.ehost-banners-pista {
    position: relative;
}

.ehost-banner {
    display: none;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.6rem 1.85rem;
    border-radius: 18px;
    border: 1px solid transparent;
    animation: ehostBannerEntra 0.45s ease both;
}

.ehost-banner.activo {
    display: grid;
}

@keyframes ehostBannerEntra {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}

/* --- Temas --- */

.ehost-banner.tema-coral {
    background: linear-gradient(135deg, #D8402F 0%, #F05243 58%, #F2685A 100%);
    color: #ffffff;
    box-shadow: 0 18px 40px -18px rgba(216, 64, 47, 0.55);
}

.ehost-banner.tema-oscuro {
    background: linear-gradient(135deg, #1B1716 0%, #2A2422 55%, #1B1716 100%);
    color: #ffffff;
    box-shadow: 0 18px 40px -18px rgba(27, 23, 22, 0.5);
}

.ehost-banner.tema-claro {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--neutral-900, #1B1716);
    box-shadow: 0 18px 40px -20px rgba(27, 23, 22, 0.22);
}

/* --- Piezas --- */

.ehost-banner-icono {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.tema-coral .ehost-banner-icono,
.tema-oscuro .ehost-banner-icono {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.tema-claro .ehost-banner-icono {
    background: rgba(240, 82, 67, 0.10);
    color: var(--primary, #F05243);
}

.ehost-banner-etiqueta {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    opacity: 0.82;
}

.tema-claro .ehost-banner-etiqueta {
    color: var(--primary, #F05243);
    opacity: 1;
}

.ehost-banner-titulo {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.28;
    margin: 0 0 0.35rem 0;
    color: inherit;
}

.ehost-banner-desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
    opacity: 0.85;
    max-width: 62ch;
}

.ehost-banner-btn {
    display: inline-block;
    padding: 0.72rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tema-coral .ehost-banner-btn,
.tema-oscuro .ehost-banner-btn {
    background: #ffffff;
    color: #D8402F;
}

.tema-oscuro .ehost-banner-btn {
    color: #1B1716;
}

.tema-claro .ehost-banner-btn {
    background: var(--primary, #F05243);
    color: #ffffff;
}

.ehost-banner-btn:hover,
.ehost-banner-btn:focus {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35);
}

/* --- Puntos de navegación --- */

.ehost-banners-puntos {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.85rem;
}

/* El botón mide 44px para el dedo; el punto visible es chico */
.ehost-banner-punto {
    width: 44px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ehost-banner-punto span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(27, 23, 22, 0.22);
    transition: width 0.25s ease, background 0.25s ease;
}

.ehost-banner-punto.activo span {
    width: 22px;
    background: var(--primary, #F05243);
}

.ehost-banner-punto:hover span {
    background: rgba(27, 23, 22, 0.4);
}

.ehost-banner-punto.activo:hover span {
    background: var(--primary, #F05243);
}

.ehost-banner-punto:focus-visible {
    outline: 2px solid var(--primary, #F05243);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- Móvil: apilado --- */

@media (max-width: 767.98px) {
    .ehost-banner {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.35rem 1.25rem;
        text-align: center;
        justify-items: center;
    }

    .ehost-banner-icono {
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }

    .ehost-banner-desc {
        font-size: 0.875rem;
    }

    .ehost-banner-btn {
        display: block;
        width: 100%;
    }

    .ehost-banner-accion {
        width: 100%;
    }
}

/* Sin animación de entrada para quien pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .ehost-banner {
        animation: none;
    }
    .ehost-banner-btn {
        transition: none;
    }
}