/* ==========================================================================
   EdgeRoute Hosting — "Edge" Client Area Theme
   Premium design system layered on top of the WHMCS core stylesheet.
   Loaded last, so everything here wins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root,
html[data-er-theme="dark"] {
    /* Height of the fixed footer bar (drives the body offset, the info panel
       and the toast stack, so everything moves together) */
    --er-footer-h: 58px;

    /* Brand */
    --er-blue:          #00A3FF;
    --er-blue-deep:     #0B6FE8;
    --er-blue-soft:     #5CC8FF;
    --er-cyan:          #22D3EE;
    --er-gradient:      linear-gradient(135deg, #0B6FE8 0%, #00A3FF 52%, #22D3EE 100%);
    --er-gradient-soft: linear-gradient(135deg, rgba(11,111,232,.16), rgba(34,211,238,.10));

    /* Surfaces */
    --er-page:      #05080F;
    --er-page-2:    #070C16;
    --er-surface:   #0E1524;
    --er-surface-2: #131C30;
    --er-surface-3: #1A2540;
    --er-ink:       #0A0F1C;

    /* Text */
    --er-text:      #E9EEF7;
    --er-text-2:    #AAB8CE;
    --er-text-3:    #7E8DA6;

    /* Lines & effects */
    --er-border:    rgba(255,255,255,.09);
    --er-border-2:  rgba(255,255,255,.15);
    --er-glass:     #0F1729;
    --er-glass-2:   #151F34;
    --er-input-bg:     rgba(255,255,255,.07);
    --er-input-border: rgba(255,255,255,.17);
    --er-ring:      0 0 0 3px rgba(0,163,255,.28);
    --er-glow:      0 18px 40px -22px rgba(0,163,255,.55);

    --er-shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --er-shadow:    0 20px 44px -28px rgba(0,0,0,.95);
    --er-shadow-lg: 0 44px 90px -50px rgba(0,0,0,1);

    /* Type */
    --er-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --er-font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Shape */
    --er-radius-sm: 10px;
    --er-radius:    16px;
    --er-radius-lg: 22px;
    --er-radius-xl: 30px;

    --er-header-h: 78px;
}

html[data-er-theme="light"] {
    --er-page:      #F8FAFD;
    --er-page-2:    #FFFFFF;
    --er-surface:   #FFFFFF;
    --er-surface-2: #F8FAFD;
    --er-surface-3: #EDF2FA;
    --er-ink:       #0B1220;

    --er-text:      #0C1526;
    --er-text-2:    #4E5F78;
    --er-text-3:    #7A8BA4;

    --er-border:    rgba(11,18,32,.11);
    --er-border-2:  rgba(11,18,32,.20);
    --er-glass:     rgba(255,255,255,.82);
    --er-glass-2:   #FFFFFF;
    --er-input-bg:     #FFFFFF;
    --er-input-border: rgba(11,18,32,.20);
    --er-ring:      0 0 0 3px rgba(0,145,230,.22);
    --er-glow:      0 18px 40px -24px rgba(0,120,200,.45);

    --er-shadow-sm: 0 1px 2px rgba(11,18,32,.06);
    --er-shadow:    0 16px 36px -26px rgba(11,18,32,.32);
    --er-shadow-lg: 0 38px 78px -46px rgba(11,18,32,.40);
}

/* --------------------------------------------------------------------------
   2. Remap WHMCS core tokens so framework components follow the theme
   -------------------------------------------------------------------------- */

html[data-er-theme="dark"] {
    --white: #0E1524;

    --neutral-50:  #0B111C;
    --neutral-100: #0E1524;
    --neutral-200: #16203A;
    --neutral-300: #223050;
    --neutral-400: #4C5F7E;
    --neutral-500: #7E8DA6;
    --neutral-600: #AAB8CE;
    --neutral-700: #C7D2E3;
    --neutral-800: #DEE6F2;
    --neutral-900: #E9EEF7;
    --neutral-950: #F7FAFF;

    --primary:          #00A3FF;
    --primary-lifted:   #35B7FF;
    --primary-accented: #0B6FE8;

    --secondary:          #7E8DA6;
    --secondary-lifted:   #AAB8CE;
    --secondary-accented: #C7D2E3;

    --grayscale:          #0A0F1C;
    --grayscale-lifted:   #0E1524;
    --grayscale-accented: #131C30;

    --neutral:          #7E8DA6;
    --neutral-lifted:   #AAB8CE;
    --neutral-accented: #C7D2E3;

    --text:            var(--er-text);
    --text-inverted:   #05080F;
    --text-muted:      var(--er-text-3);
    --text-lifted:     var(--er-text-2);
    --text-accented:   #D6E0EF;

    --border-muted:    rgba(255,255,255,.07);
    --border:          rgba(255,255,255,.11);
    --border-lifted:   rgba(255,255,255,.18);
    --border-accented: rgba(255,255,255,.30);

    --bg:          var(--er-surface);
    --bg-muted:    var(--er-page-2);
    --bg-lifted:   var(--er-page);
    --bg-accented: var(--er-surface-3);
    --bg-inverted: var(--er-ink);
}

html[data-er-theme="light"] {
    --bg:          #FFFFFF;
    --bg-muted:    #F8FAFD;
    --bg-lifted:   #F8FAFD;
    --bg-accented: #EDF2FA;
    --bg-inverted: #0B1220;

    --text:            #0C1526;
    --text-inverted:   #FFFFFF;
    --text-muted:      #7A8BA4;
    --text-lifted:     #4E5F78;
    --text-accented:   #1B2740;

    --border-muted:    rgba(11,18,32,.08);
    --border:          rgba(11,18,32,.12);
    --border-lifted:   rgba(11,18,32,.20);
    --border-accented: rgba(11,18,32,.34);

    --grayscale:          #0C1526;
    --grayscale-lifted:   #16203A;
    --grayscale-accented: #0B1220;

    --primary:          #0091E6;
    --primary-lifted:   #0B6FE8;
    --primary-accented: #0857B8;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

/* The parent theme pins html/body to 100% height, which caps the sticky
   header's containing block and makes it scroll away part-way down the page. */
html { height: auto !important; }
body { height: auto !important; min-height: 100vh; }

/* Off-canvas drawers are parked off-screen with a transform, which widens the
   document and produced a horizontal scrollbar on phones and tablets.
   `overflow-x: clip` contains them without creating a scroll container, so
   `position: sticky` on the header keeps working. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

html, body {
    background-color: var(--er-page) !important;
    color: var(--er-text);
    font-family: var(--er-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    letter-spacing: -0.006em;
    transition: background-color .3s ease, color .3s ease;
    /* room for the fixed footer bar so it never covers page content */
    padding-bottom: calc(var(--er-footer-h) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--er-font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--er-text);
}

p { color: var(--er-text-2); }
small, .small { font-size: .8125rem; }
hr { border-top-color: var(--er-border); }
.text-muted { color: var(--er-text-3) !important; }

a { color: var(--er-blue); transition: color .18s ease; }
a:hover, a:focus { color: var(--er-blue-soft); text-decoration: none; }

::selection { background: rgba(0,163,255,.32); color: var(--er-text); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--er-page-2); }
::-webkit-scrollbar-thumb {
    background: rgba(127,150,185,.35);
    border-radius: 99px;
    border: 3px solid var(--er-page-2);
}
::-webkit-scrollbar-thumb:hover { background: rgba(127,150,185,.6); }

:focus-visible { outline: none; box-shadow: var(--er-ring); border-radius: 6px; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
    font-family: var(--er-font);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: -0.005em;
    border-radius: var(--er-radius-sm);
    padding: .625rem 1.15rem;
    transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease,
                background-color .18s ease, border-color .18s ease, color .18s ease;
    border-width: 1px;
}

.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    background: var(--er-gradient) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -14px rgba(0,163,255,.85);
}
.btn-primary:hover {
    background: var(--er-gradient) !important;
    filter: brightness(1.08);
    color: #fff !important;
    box-shadow: 0 16px 34px -14px rgba(0,163,255,.95);
    transform: translateY(-1px);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: var(--er-gradient) !important;
    filter: brightness(.96);
}
.btn-primary.disabled, .btn-primary:disabled { opacity: .55; box-shadow: none; }

.btn-outline-primary {
    color: var(--er-blue) !important;
    border-color: rgba(0,163,255,.45) !important;
    background: rgba(0,163,255,.06) !important;
}
.btn-outline-primary:hover {
    background: rgba(0,163,255,.14) !important;
    border-color: var(--er-blue) !important;
    color: var(--er-blue-soft) !important;
    transform: translateY(-1px);
}

.btn-default, .btn-secondary, .btn-light {
    background: var(--er-surface-2) !important;
    border-color: var(--er-border-2) !important;
    color: var(--er-text) !important;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
    background: var(--er-surface-3) !important;
    border-color: var(--er-blue) !important;
    color: var(--er-text) !important;
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg,#0BA36A,#00C48C) !important;
    border: 0 !important; color: #fff !important;
    box-shadow: 0 10px 24px -16px rgba(0,196,140,.9);
}
.btn-success:hover { filter: brightness(1.07); transform: translateY(-1px); }

.btn-danger, .btn-warning, .btn-info { border: 0 !important; color: #fff !important; }
.btn-danger  { background: linear-gradient(135deg,#E5484D,#FF6B6B) !important; }
.btn-warning { background: linear-gradient(135deg,#E8890C,#FFB020) !important; color: #1A1206 !important; }
.btn-info    { background: linear-gradient(135deg,#0B6FE8,#22D3EE) !important; }

.btn-link { color: var(--er-blue) !important; background: transparent !important; border: 0 !important; }
.btn-link:hover { color: var(--er-blue-soft) !important; text-decoration: none; }

.btn-xs { padding: .3rem .6rem; font-size: .75rem; border-radius: 8px; }
.btn-sm { padding: .45rem .85rem; font-size: .8125rem; }
.btn-lg { padding: .8rem 1.6rem; font-size: 1rem; border-radius: 12px; }

.btn .badge { font-weight: 700; }

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */

.form-control {
    background-color: var(--er-input-bg) !important;
    border: 1px solid var(--er-input-border) !important;
    color: var(--er-text) !important;
    border-radius: var(--er-radius-sm) !important;
    padding: .7rem .95rem;
    font-size: .9rem;
    height: auto;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-control::placeholder { color: var(--er-text-3) !important; opacity: .9; }
.form-control:focus {
    background-color: var(--er-input-bg) !important;
    border-color: var(--er-blue) !important;
    box-shadow: var(--er-ring) !important;
    color: var(--er-text) !important;
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--er-surface-2) !important;
    opacity: .7;
}

select.form-control, .custom-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237E8DA6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .85rem center !important;
    background-size: 14px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.2rem !important;
}
select.form-control option, .custom-select option { background: var(--er-surface); color: var(--er-text); }

label, .form-control-label, .control-label {
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--er-text-3);
    margin-bottom: .45rem;
}

.input-group-text {
    background: var(--er-surface-2) !important;
    border-color: var(--er-border) !important;
    color: var(--er-text-3) !important;
}
.input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.form-check-input { background-color: var(--er-surface-2); border-color: var(--er-border-2); }
.custom-control-label::before { background-color: var(--er-surface-2); border-color: var(--er-border-2); }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--er-blue); border-color: var(--er-blue);
}

.form-text, .help-block { color: var(--er-text-3); }
.has-error .form-control { border-color: #E5484D !important; }
.was-validated .form-control:valid, .form-control.is-valid { border-color: #0BA36A !important; }

/* --------------------------------------------------------------------------
   6. Cards / panels / blocks
   -------------------------------------------------------------------------- */

.card, .panel, .mc-promo-manage, .mc-promo-login {
    background-color: var(--er-surface) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius) !important;
    box-shadow: var(--er-shadow) !important;
    color: var(--er-text);
    overflow: hidden;
}
.card-header, .panel-heading {
    background-color: transparent !important;
    border-bottom: 1px solid var(--er-border) !important;
    padding: 1.05rem 1.35rem;
    color: var(--er-text);
    font-weight: 600;
}
.card-body { padding: 1.35rem; color: var(--er-text-2); }
.card-footer {
    background-color: var(--er-surface-2) !important;
    border-top: 1px solid var(--er-border) !important;
    padding: 1rem 1.35rem;
    color: var(--er-text-3);
}
.card-title { color: var(--er-text); font-weight: 700; }

.list-group-item {
    background-color: transparent !important;
    border-color: var(--er-border) !important;
    color: var(--er-text-2) !important;
    transition: background-color .16s ease, color .16s ease;
}
.list-group-item-action:hover {
    background-color: var(--er-glass-2) !important;
    color: var(--er-text) !important;
}
.list-group-item.active {
    background: var(--er-gradient-soft) !important;
    border-color: rgba(0,163,255,.35) !important;
    color: var(--er-text) !important;
    box-shadow: inset 3px 0 0 var(--er-blue);
}
.list-group-item.disabled { color: var(--er-text-3) !important; opacity: .6; }

/* --------------------------------------------------------------------------
   7. Navbar
   -------------------------------------------------------------------------- */

html[data-er-theme="dark"] {
    --er-nav:        #0A0F1C;
    --er-nav-solid:  #0A0F1C;
}
html[data-er-theme="light"] {
    --er-nav:        #FFFFFF;
    --er-nav-solid:  #FFFFFF;
}

/* --er-hpn-top is set by footer.tpl to the height of the HPLinknotice addon's
   pinned banner. It is fixed to the viewport at z-index 99999, so a bar stuck
   at top: 0 slides underneath it and vanishes as soon as the page scrolls. */
header.er-header {
    position: sticky;
    top: var(--er-hpn-top, 0px);
    z-index: 1030;
    background: transparent !important;
}

/* The rail is a fixed panel, so it has to be opaque: WHMCS's own
   `header.header { background-color: #fff }` and the transparent rule above
   both apply to it, otherwise the page and the addon notices pinned to the top
   of <body> show straight through the rail while scrolling. */
body.er-body--rail .er-header--rail {
    background: var(--er-surface) !important;
}

header.er-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 420px;
    background:
        radial-gradient(900px 340px at 12% -10%, rgba(0,163,255,.20), transparent 62%),
        radial-gradient(700px 300px at 88% -20%, rgba(34,211,238,.14), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Reading-progress bar */
.er-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 6;
    pointer-events: none;
}
.er-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--er-gradient);
    transition: width .12s linear;
}

/* --------------------------------------------------------------------------
   The bar itself
   -------------------------------------------------------------------------- */

/* The parent theme pins the navbar to min-height:70px and zeroes its padding,
   which blocks the condensing effect - override both with matching weight. */
header.er-header .er-navbar {
    min-height: 0 !important;
    padding: 12px 0 !important;
}
header.er-header .er-navbar.is-scrolled {
    padding: 6px 0 !important;
}

.er-navbar {
    position: relative;
    z-index: 4;
    padding: 12px 0;
    background: var(--er-nav);
    border-bottom: 1px solid var(--er-border);
    transition: padding .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease, box-shadow .3s ease;
}
.er-navbar.is-scrolled {
    padding: 4px 0;
    background: var(--er-nav-solid);
    box-shadow: 0 16px 34px -26px rgba(0,0,0,.55);
}
.er-navbar.is-scrolled .er-logo { height: 34px; }

.er-navbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.er-navbar .er-brand { order: 1; }
/* Bootstrap's .navbar-nav is a column below the expand breakpoint, which
   stacked the toolbar icons vertically on phones. Keep the rail horizontal. */
.er-navbar .er-nav-actions {
    order: 2;
    margin-left: auto;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
}
.er-navbar .navbar-collapse { order: 3; flex-basis: 100%; }

@media (min-width: 1200px) {
    .er-navbar .navbar-collapse { order: 2; flex-basis: auto; flex-grow: 1; margin-left: 12px; }
    .er-navbar .er-nav-actions { order: 3; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Icon buttons
   -------------------------------------------------------------------------- */

.er-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--er-border);
    background: var(--er-surface-2);
    color: var(--er-text-2) !important;
    font-size: .95rem;
    cursor: pointer;
    text-decoration: none !important;
    transition: color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1), background-color .18s ease;
}
.er-icon-btn:hover {
    color: var(--er-blue) !important;
    border-color: rgba(0,163,255,.45);
    background: var(--er-surface-3);
    transform: translateY(-1px);
}
.er-icon-btn:active { transform: translateY(0); }

.er-theme-toggle .fa-sun { display: none; }
html[data-er-theme="dark"] .er-theme-toggle .fa-sun { display: inline-block; }
html[data-er-theme="dark"] .er-theme-toggle .fa-moon { display: none; }

.er-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--er-gradient);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--er-nav-solid);
    transition: transform .3s cubic-bezier(.2,1.6,.4,1);
}
.er-cart-count.is-bump { transform: scale(1.3); }
.er-cart-count:empty, .er-cart-count.is-zero { display: none; }

.er-dot-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E5484D;
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--er-nav-solid);
}

/* --------------------------------------------------------------------------
   Primary / secondary navigation
   -------------------------------------------------------------------------- */

header.er-header .er-navbar .navbar-nav { gap: 2px !important; margin: 0 !important; }
header.er-header .er-navbar-inner { gap: 8px !important; }
header.er-header .er-navbar .er-nav-actions { gap: 8px !important; margin-left: auto !important; }
@media (min-width: 1200px) {
    header.er-header .er-navbar .er-nav-actions { margin-left: 0 !important; }
    header.er-header .er-navbar .navbar-collapse { margin-left: 10px !important; }
}
/* The primary nav takes the free space so its wrap point (and therefore
   WHMCS's overflow detection) reflects the real available width. */
/* The primary nav takes the free space and is allowed to wrap: WHMCS folds
   items into "More" once the row exceeds the threshold in the nav script, and
   wrapping is what makes that measurement meaningful.
   NOTE: do not put overflow on this element - it would clip the dropdown
   menus, which are absolutely positioned inside it. */
.er-navbar .er-nav-primary {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 2px;
    overflow: visible;
}
.er-navbar .er-nav-primary > li { position: relative; }
.er-navbar .er-nav-secondary { flex: 0 0 auto; }
.er-navbar .navbar-nav > li { position: relative; }

.er-nav-link {
    display: flex !important;
    align-items: center;
    gap: .4rem;
    padding: 9px 11px !important;
    border-radius: 11px;
    font-size: .875rem !important;
    font-weight: 600 !important;
    color: var(--er-text-2) !important;
    text-decoration: none !important;
    white-space: nowrap;
    position: relative;
    transition: color .18s ease, background-color .18s ease;
}
.er-nav-link i { color: var(--er-blue); font-size: .85rem; }
.er-nav-link:hover { color: var(--er-text) !important; background: var(--er-glass-2); }

.er-nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--er-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.er-nav-link:hover::after { transform: scaleX(1); }
.er-nav-link.active,
.er-navbar .navbar-nav > li.active > .er-nav-link { color: var(--er-text) !important; }
.er-nav-link.active::after { transform: scaleX(1); }

/* Caret for items that open a dropdown. The themed underline uses ::after, so
   Bootstrap's own caret is gone - draw one on ::before instead. It must be the
   LAST flex item and pushed to the trailing edge: with the default order the
   margin-left: auto pushed the label itself to the right (the mobile drawer
   listed every dropdown parent right-aligned instead of left-aligned). */
.er-nav-link.dropdown-toggle::before {
    content: "";
    order: 2;
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    opacity: .55;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease, opacity .2s ease;
}
.er-nav-link.dropdown-toggle:hover::before { opacity: .85; }
.er-nav-link.dropdown-toggle[aria-expanded="true"]::before {
    transform: translateY(1px) rotate(-135deg);
    opacity: .9;
}

.er-nav-link .badge {
    background: var(--er-gradient) !important;
    color: #fff !important;
    font-size: .64rem;
    padding: .2em .55em;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Dropdowns
   -------------------------------------------------------------------------- */

.er-navbar .dropdown-menu {
    margin-top: 10px;
    padding: .5rem;
    background: var(--er-surface) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--er-shadow-lg) !important;
    animation: erDropIn .22s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes erDropIn {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.er-navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--er-text-2) !important;
    font-size: .875rem;
    font-weight: 500;
}
.er-navbar .dropdown-item i { color: var(--er-text-3); font-size: .85rem; width: 16px; text-align: center; }
.er-navbar .dropdown-item:hover,
.er-navbar .dropdown-item:focus {
    background: var(--er-gradient-soft) !important;
    color: var(--er-text) !important;
}
.er-navbar .dropdown-item:hover i { color: var(--er-blue); }
.er-navbar .dropdown-item.active { background: var(--er-gradient) !important; color: #fff !important; }
.er-navbar .dropdown-item.active i { color: #fff; }

/* Sub-menus inside a dropdown (nested nav items) */
.er-navbar .dropdown-menu .dropdown-item.py-0 {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    padding-left: 12px !important;
}
.er-navbar .dropdown-menu .dropdown-item .dropdown-item { padding-left: 12px !important; }

/* --------------------------------------------------------------------------
   Navbar domain search
   -------------------------------------------------------------------------- */

.er-domain-search {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 4px 0 12px;
    border-radius: 999px;
    border: 1px solid var(--er-border);
    background: var(--er-surface-2);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.er-domain-search:focus-within {
    border-color: var(--er-blue);
    box-shadow: var(--er-ring);
}
.er-domain-icon {
    flex: 0 0 auto;
    margin-right: 7px;
    color: var(--er-text-3);
    font-size: .8rem;
    transition: color .2s ease;
}
.er-domain-search:focus-within .er-domain-icon { color: var(--er-blue); }
.er-domain-input {
    width: 118px;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--er-text) !important;
    font-family: var(--er-font);
    font-size: .85rem;
}
.er-domain-input::placeholder { color: var(--er-text-3) !important; }
.er-domain-input:focus { outline: none; }
.er-domain-btn {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--er-gradient);
    color: #fff;
    font-family: var(--er-font);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .18s ease;
}
.er-domain-btn:hover { filter: brightness(1.1); }

/* Drawer variant fills the width */
.er-domain-search--drawer {
    width: 100%;
    margin: 16px 0 8px;
}
.er-domain-search--drawer .er-domain-input { flex: 1 1 auto; width: auto; min-width: 0; }

/* --------------------------------------------------------------------------
   Account menu
   -------------------------------------------------------------------------- */

.er-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 5px;
    border-radius: 999px;
    border: 1px solid var(--er-border);
    background: var(--er-surface-2);
    color: var(--er-text) !important;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.er-account-btn:hover { border-color: rgba(0,163,255,.45); transform: translateY(-1px); }
.er-account-btn::after { display: none; }
.er-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--er-gradient);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}
.er-avatar--lg { width: 40px; height: 40px; flex-basis: 40px; font-size: 1rem; }
.er-account-caret { font-size: .6rem; color: var(--er-text-3); margin-left: 2px; }
.er-account-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1400px) {
    .d-xxl-inline { display: inline !important; }
}

.er-account-menu { min-width: 258px; }
.er-account-head { display: flex; align-items: center; gap: 11px; padding: 10px 12px 12px; }
.er-account-meta { display: flex; flex-direction: column; min-width: 0; }
.er-account-meta strong { font-size: .875rem; color: var(--er-text); }
.er-account-meta span {
    font-size: .75rem;
    color: var(--er-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 165px;
}
.er-account-menu .dropdown-item.er-account-logout { color: #E5484D !important; }
.er-account-menu .dropdown-item.er-account-logout i { color: #E5484D; }
.er-account-menu .dropdown-item.er-account-admin { color: var(--er-blue) !important; }
.er-account-menu .dropdown-item.er-account-admin i { color: var(--er-blue); }

/* --------------------------------------------------------------------------
   Burger + mobile drawer
   -------------------------------------------------------------------------- */

.er-burger { flex-direction: column; gap: 4px; }
.er-burger-line {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.er-burger[aria-expanded="true"] .er-burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.er-burger[aria-expanded="true"] .er-burger-line:nth-child(2) { opacity: 0; }
.er-burger[aria-expanded="true"] .er-burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Sits above the page but BELOW the header (1030) that holds the drawers.
   It used to be 1040 and a child of the header, which painted it over the
   drawer itself: the menu looked blurred/dimmed and every click landed on the
   scrim instead of the link. Keep the value under 1030 and keep the element
   out of <header> (see header.tpl) so it is never painted over a drawer. */
.er-scrim {
    position: fixed;
    inset: 0;
    background: rgba(3,7,14,.55);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 1025;
}
.er-scrim.is-open { opacity: 1; }

.er-drawer-head { display: none; }

@media (max-width: 1199.98px) {
    /* Size the drawer in viewport units so it always fills the screen height
       regardless of its containing block. */
    .er-navbar .navbar-collapse {
        position: fixed !important;
        top: 0;
        right: 0;
        left: auto;
        width: 350px;
        max-width: 88vw;
        display: block !important;
        height: 100vh;
        padding: 0 22px 30px;
        overflow-y: auto;
        background: var(--er-surface);
        border-left: 1px solid var(--er-border);
        box-shadow: -40px 0 70px -40px rgba(0,0,0,.7);
        transform: translateX(103%);
        visibility: hidden;
        transition: transform .4s cubic-bezier(.2,.85,.25,1), visibility .4s;
        z-index: 1045;
    }
    /* Opened by the .er-nav-open body class (the theme uses its own toggle,
       not Bootstrap's collapse, so no .show class is ever applied). */
    body.er-nav-open .er-navbar .navbar-collapse { transform: none; visibility: visible; }

    .er-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--er-border);
        position: sticky;
        top: 0;
        background: var(--er-surface);
        z-index: 2;
    }
    .er-drawer-title {
        font-family: var(--er-font-display);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--er-text-3);
    }
    .er-drawer-close {
        width: 34px; height: 34px;
        border-radius: 10px;
        border: 1px solid var(--er-border);
        background: var(--er-surface-2);
        color: var(--er-text-2);
        cursor: pointer;
    }

    .er-drawer-search { margin: 16px 0 4px; }

    .er-navbar .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 10px 0 0;
    }
    .er-navbar .navbar-nav > li { width: 100%; }
    .er-nav-link {
        padding: 12px 12px !important;
        border-radius: 11px;
        font-size: .95rem !important;
    }
    .er-nav-link::after { display: none; }
    .er-navbar .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 4px 0 8px;
        padding: 6px;
        background: var(--er-surface-2) !important;
        box-shadow: none !important;
        border-color: var(--er-border) !important;
        animation: none;
        transform: none !important;
    }
    .er-navbar .navbar-nav .dropdown-divider { margin: 6px 0; }
}

/* --------------------------------------------------------------------------
   Command palette
   -------------------------------------------------------------------------- */

.er-palette { position: fixed; inset: 0; z-index: 1080; }
.er-palette[hidden] { display: none; }
.er-palette-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3,7,14,.55);
    animation: erFade .2s ease both;
}
@keyframes erFade { from { opacity: 0; } to { opacity: 1; } }

.er-palette-panel {
    position: relative;
    width: min(620px, 92vw);
    margin: 12vh auto 0;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: 18px;
    box-shadow: var(--er-shadow-lg);
    overflow: hidden;
    animation: erPaletteIn .28s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes erPaletteIn {
    from { opacity: 0; transform: translateY(-14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.er-palette-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--er-border);
}
.er-palette-icon { color: var(--er-blue); font-size: 1rem; }
.er-palette-input {
    flex: 1 1 auto;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--er-text) !important;
    font-size: 1rem;
    font-family: var(--er-font);
    padding: 0 !important;
    height: auto !important;
}
.er-palette-input::placeholder { color: var(--er-text-3) !important; }
.er-palette-input:focus { outline: none; }

.er-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--er-border-2);
    background: var(--er-surface-2);
    color: var(--er-text-3);
    font-size: .66rem;
    font-weight: 700;
    font-family: var(--er-font);
}
.er-palette-body { padding: 12px; max-height: 46vh; overflow-y: auto; }
.er-palette-label {
    padding: 6px 10px 8px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--er-text-3);
}
.er-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 11px;
    color: var(--er-text-2) !important;
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.er-palette-item i { color: var(--er-blue); width: 18px; text-align: center; }
.er-palette-item:hover,
.er-palette-item.is-active {
    background: var(--er-gradient-soft);
    color: var(--er-text) !important;
}
.er-palette-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: space-between;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--er-border);
    background: var(--er-surface-2);
    font-size: .72rem;
    color: var(--er-text-3);
}

@media (prefers-reduced-motion: reduce) {
    .er-palette-panel, .er-palette-backdrop, .er-navbar .dropdown-menu { animation: none !important; }
    .er-navbar .navbar-collapse { transition: none !important; }
}

/* --------------------------------------------------------------------------
   8. Brand logo
   -------------------------------------------------------------------------- */

.er-brand { display: inline-flex; align-items: center; text-decoration: none !important; }
.er-logo { display: block; height: 42px; width: auto; max-width: 100%; }
.er-logo--dark { display: none; }
html[data-er-theme="dark"] .er-logo--light { display: none; }
html[data-er-theme="dark"] .er-logo--dark { display: block; }

/* --------------------------------------------------------------------------
   9. Breadcrumb
   -------------------------------------------------------------------------- */

.master-breadcrumb {
    background-color: transparent !important;
    border: 0 !important;
    padding: 1rem 0 .25rem;
}
.master-breadcrumb .breadcrumb {
    background: transparent !important;
    padding: 0;
    margin: 0;
}
.master-breadcrumb .breadcrumb a { color: var(--er-text-3) !important; }
.master-breadcrumb .breadcrumb a:hover { color: var(--er-blue) !important; }
.master-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--er-text) !important; font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--er-text-3); }

/* --------------------------------------------------------------------------
   10. Main body & sidebar
   -------------------------------------------------------------------------- */

section#main-body {
    background-color: transparent !important;
    min-height: 60vh;
    padding: 26px 0 40px !important;
}

.sidebar .card-sidebar {
    background: var(--er-glass) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius) !important;
    box-shadow: var(--er-shadow) !important;
}
.sidebar .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--er-border) !important;
    padding: .95rem 1.15rem;
}
.sidebar .card-header .card-title {
    font-family: var(--er-font-display);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--er-text-3) !important;
}
.sidebar .card-header .card-title i { color: var(--er-blue) !important; }
.sidebar .card-header .card-minimise { color: var(--er-text-3); }
.sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: .6rem; }
.sidebar .sidebar-menu-item-icon-wrapper {
    width: 26px; text-align: center;
    color: var(--er-text-3);
    transition: color .16s ease;
}
.sidebar .list-group-item {
    border-left: 0 !important; border-right: 0 !important;
    padding: .7rem 1.15rem;
    font-size: .875rem;
    font-weight: 500;
}
.sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper,
.sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper { color: var(--er-blue); }
.sidebar .list-group-item.active { font-weight: 600; }
.sidebar .sidebar-menu-item-badge .badge {
    background: var(--er-surface-3) !important;
    color: var(--er-text-2) !important;
}

/* --------------------------------------------------------------------------
   11. Client dashboard stat tiles
   -------------------------------------------------------------------------- */

.tiles { margin-bottom: 1.75rem !important; }
.tiles .row {
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
}
.tiles .row > [class*="col-"] {
    flex: 1 1 200px;
    max-width: none;
    padding: 0;
}
.tiles .tile {
    position: relative;
    display: block;
    height: 100%;
    padding: 1.3rem 1.4rem 1.15rem !important;
    background: var(--er-glass) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius) !important;
    text-decoration: none !important;
    box-shadow: var(--er-shadow) !important;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease;
}
.tiles .tile::after {
    content: "";
    position: absolute;
    inset: auto -30% -60% auto;
    width: 190px; height: 190px;
    background: radial-gradient(circle, rgba(0,163,255,.22), transparent 68%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.tiles .tile:hover {
    transform: translateY(-4px);
    border-color: rgba(0,163,255,.4) !important;
    box-shadow: var(--er-glow) !important;
}
.tiles .tile:hover::after { opacity: 1; }

.tiles .tile i {
    position: static !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    font-size: 1.15rem !important;
    border-radius: 13px;
    background: var(--er-gradient-soft);
    color: var(--er-blue) !important;
    border: 1px solid rgba(0,163,255,.22);
    transition: transform .25s ease;
}
.tiles .tile:hover i { transform: scale(1.06) rotate(-4deg); }

.tiles .tile .stat {
    margin-top: 1rem !important;
    font-family: var(--er-font-display);
    font-size: 2.25rem !important;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1 !important;
    color: var(--er-text);
}
.tiles .tile .title {
    margin-top: .3rem;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--er-text-3) !important;
}
.tiles .tile .highlight { display: none; }

/* --------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */

.table { color: var(--er-text-2); border-color: var(--er-border); }
.table thead th {
    border-bottom: 1px solid var(--er-border) !important;
    border-top: 0 !important;
    color: var(--er-text-3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .85rem 1rem;
    background: transparent;
    white-space: nowrap;
}
.table td, .table th { border-top: 1px solid var(--er-border) !important; padding: .9rem 1rem; vertical-align: middle; }
.table tbody tr { transition: background-color .16s ease; }
.table tbody tr:hover { background-color: var(--er-glass) !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--er-glass); }
.table-hover tbody tr:hover { background-color: var(--er-glass-2) !important; }
.table .thead-light th { background: var(--er-surface-2) !important; color: var(--er-text-3) !important; }
.table-responsive { border-radius: var(--er-radius-sm); }
td .btn, th .btn { white-space: nowrap; }

/* --------------------------------------------------------------------------
   13. Badges, labels, alerts, progress
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .38em .7em;
    border-radius: 999px;
    background: var(--er-surface-3);
    color: var(--er-text-2);
}
.badge-primary, .badge-info { background: var(--er-gradient) !important; color: #fff !important; }
.badge-success { background: rgba(0,196,140,.16) !important; color: #34D399 !important; }
.badge-warning { background: rgba(255,176,32,.16) !important; color: #FBBF24 !important; }
.badge-danger  { background: rgba(229,72,77,.16) !important; color: #F87171 !important; }
.badge-secondary, .badge-default { background: var(--er-surface-3) !important; color: var(--er-text-2) !important; }

.label {
    border-radius: 999px;
    font-weight: 600;
    padding: .3em .8em;
    font-size: .72rem;
}
.label-success { background: rgba(0,196,140,.16) !important; color: #34D399 !important; }
.label-warning { background: rgba(255,176,32,.16) !important; color: #FBBF24 !important; }
.label-danger  { background: rgba(229,72,77,.16) !important; color: #F87171 !important; }
.label-info    { background: rgba(0,163,255,.14) !important; color: var(--er-blue) !important; }

.alert {
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius) !important;
    background: var(--er-surface) !important;
    color: var(--er-text-2);
    box-shadow: var(--er-shadow);
    padding: 1rem 1.25rem;
}
.alert-success { border-left: 3px solid #00C48C !important; }
.alert-danger, .alert-error { border-left: 3px solid #E5484D !important; }
.alert-warning { border-left: 3px solid #FFB020 !important; }
.alert-info { border-left: 3px solid var(--er-blue) !important; }
.alert h4, .alert strong { color: var(--er-text); }

.progress {
    background-color: var(--er-surface-3);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.progress-bar {
    background: var(--er-gradient);
    border-radius: 999px;
    transition: width .6s cubic-bezier(.2,.8,.2,1);
}

/* --------------------------------------------------------------------------
   14. Modals, dropdowns, tabs, pagination
   -------------------------------------------------------------------------- */

.modal-content {
    background: var(--er-surface) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius-lg) !important;
    box-shadow: var(--er-shadow-lg) !important;
    color: var(--er-text);
}
.modal-header, .modal-footer { border-color: var(--er-border) !important; }
.modal-header .close, .modal-header .close span { color: var(--er-text-2); text-shadow: none; opacity: .75; }
.modal-header .close:hover { opacity: 1; color: var(--er-text); }
.modal-backdrop.show { opacity: .68; background: #02040A; }
.modal-body { color: var(--er-text-2); }
.modal-title { font-family: var(--er-font-display); }

.dropdown-menu {
    background: var(--er-surface) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius-sm) !important;
    box-shadow: var(--er-shadow-lg) !important;
    padding: .45rem;
}
.dropdown-item { color: var(--er-text-2) !important; border-radius: 8px; font-size: .875rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--er-glass-2) !important; color: var(--er-text) !important; }

.nav-tabs { border-bottom: 1px solid var(--er-border); gap: .25rem; }
.nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: var(--er-text-3) !important;
    font-weight: 600;
    border-radius: 0;
    padding: .7rem 1rem;
}
.nav-tabs .nav-link:hover { color: var(--er-text) !important; }
.nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--er-text) !important;
    border-bottom-color: var(--er-blue) !important;
}
.nav-pills .nav-link { color: var(--er-text-3); border-radius: 10px; font-weight: 600; }
.nav-pills .nav-link.active { background: var(--er-gradient-soft); color: var(--er-text); }

.pagination .page-link {
    background: var(--er-surface-2) !important;
    border-color: var(--er-border) !important;
    color: var(--er-text-2) !important;
    margin: 0 2px;
    border-radius: 10px !important;
}
.pagination .page-link:hover { background: var(--er-surface-3) !important; color: var(--er-text) !important; }
.pagination .page-item.active .page-link { background: var(--er-gradient) !important; border: 0 !important; color: #fff !important; }
.pagination .page-item.disabled .page-link { opacity: .45; }

.popover {
    background: var(--er-surface) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius-sm) !important;
    box-shadow: var(--er-shadow-lg) !important;
    color: var(--er-text-2);
}
.popover-header { background: var(--er-surface-2) !important; border-bottom: 1px solid var(--er-border) !important; color: var(--er-text); }
.bs-popover-bottom > .arrow::after { border-bottom-color: var(--er-surface) !important; }
.bs-popover-top > .arrow::after { border-top-color: var(--er-surface) !important; }
.tooltip-inner { background: var(--er-surface-3); color: var(--er-text); border-radius: 8px; font-size: .78rem; padding: .4rem .6rem; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

/* Legacy footer (the old non-fixed markup). The new fixed bar reuses id="footer"
   for compatibility, so it has to be excluded here - this rule's
   `background: transparent !important` and `padding: 0 !important` were
   otherwise winning over .er-footer-bar and made the bar see-through. */
footer.footer,
#footer:not(.er-footer-bar) {
    margin-top: 3rem;
    padding: 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--er-border);
    color: var(--er-text-3);
}
footer.footer .container { padding-top: 1.5rem; padding-bottom: 1.5rem; }
footer.footer .nav-link { color: var(--er-text-3) !important; font-size: .875rem; padding: .25rem .8rem .25rem 0; }
footer.footer .nav-link:hover { color: var(--er-blue) !important; }
footer.footer .copyright { color: var(--er-text-3) !important; font-size: .8125rem; }
footer.footer .btn-outline-light {
    color: var(--er-text-2) !important;
    border-color: var(--er-border-2) !important;
    background: var(--er-surface-2) !important;
}
footer.footer .btn-outline-light:hover { border-color: var(--er-blue) !important; color: var(--er-text) !important; }

/* Fixed footer bar --------------------------------------------------------
   A slim, always-visible status bar; "More info" slides the panel above it.
   --er-footer-h also drives the body offset, the panel position and the toast
   stack, so changing it in one place moves everything. */
.er-footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    background: var(--er-page-2);
    border-top: 1px solid var(--er-border);
    box-shadow: 0 -18px 34px -28px rgba(2, 6, 23, .55);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-size: .8125rem;
    color: var(--er-text-3);
}

/* keep clear of the client area rail */
@media (min-width: 1200px) {
    body.er-body--rail .er-footer-bar { left: 282px; }
}

.er-footer-inner { min-height: var(--er-footer-h); display: flex; align-items: center; }
.er-footer-row { display: flex; align-items: center; gap: 14px; width: 100%; }

.er-footer-inner .er-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: var(--er-text) !important;
    font-weight: 700;
    font-size: .84rem;
    flex: 0 0 auto;
}
.er-footer-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--er-gradient);
    color: #fff;
    font-size: 12px;
}
.er-footer-inner .er-footer-copy,
.er-footer-inner .er-footer-tag { white-space: nowrap; }
.er-footer-inner .er-footer-copy { color: var(--er-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.er-footer-inner .er-footer-tag {
    color: var(--er-text-3);
    opacity: .8;
    padding-left: 14px;
    border-left: 1px solid var(--er-border);
}

.er-footer-inner .er-footer-chips { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; overflow: hidden; }

.er-footer-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--er-border);
    background: var(--er-surface-2);
    color: var(--er-text-2) !important;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}
.er-footer-chip--btn { cursor: pointer; }
.er-footer-chip--btn:hover { border-color: rgba(0,163,255,.45); color: var(--er-text) !important; }
.er-footer-chip .iti-flag { border-radius: 2px; }

.er-footer-inner .er-footer-actions { display: flex; align-items: center; gap: 8px; margin-left: 4px; flex: 0 0 auto; }
.er-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 9px;
    color: var(--er-text-3) !important;
    font-size: .8rem;
    text-decoration: none !important;
}
.er-footer-link:hover { color: var(--er-blue) !important; background: var(--er-surface-2); }

.er-footer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--er-border);
    border-radius: 999px;
    background: var(--er-surface-2);
    color: var(--er-text-2);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.er-footer-toggle:hover { color: var(--er-text); border-color: rgba(0,163,255,.45); }
.er-footer-toggle i { transition: transform .25s ease; font-size: .7rem; }
.er-footer-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* the expandable info panel */
.er-footer-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--er-footer-h) + env(safe-area-inset-bottom, 0px));
    z-index: 1019;
    background: var(--er-page-2);
    border-top: 1px solid var(--er-border);
    box-shadow: 0 -24px 50px -34px rgba(2, 6, 23, .6);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: max-height .3s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility .3s;
}
.er-footer-panel.is-open {
    max-height: min(72vh, 540px);
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
}
@media (min-width: 1200px) {
    body.er-body--rail .er-footer-panel { left: 282px; }
}

.er-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding: 2.25rem 0 1.5rem;
}
.er-footer-about { color: var(--er-text-3); font-size: .875rem; line-height: 1.7; margin: 1rem 0 .5rem; max-width: 34ch; }
.er-footer-tagline {
    margin: 0 0 1.25rem;
    font-family: var(--er-font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--er-blue);
}
.er-footer-title {
    font-family: var(--er-font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--er-text-3);
    margin: 0 0 1rem;
}
.er-footer-col ul { list-style: none; margin: 0; padding: 0; }
.er-footer-col li { margin-bottom: .6rem; }
.er-footer-col a { color: var(--er-text-2); font-size: .875rem; }
.er-footer-col a:hover { color: var(--er-blue); }
.er-footer-social { display: flex; gap: .5rem; }
.er-footer-social a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--er-border);
    background: var(--er-surface-2);
    color: var(--er-text-2);
    transition: all .18s ease;
}
.er-footer-social a:hover { color: var(--er-blue); border-color: rgba(0,163,255,.5); transform: translateY(-2px); }
.er-footer-bottom {
    border-top: 1px solid var(--er-border);
    padding: 1.15rem 0 1.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    font-size: .8125rem;
    color: var(--er-text-3);
}
.er-footer-bottom .er-footer-links a { color: var(--er-text-3); margin-left: 1.1rem; }
.er-footer-bottom .er-footer-links a:hover { color: var(--er-blue); }

/* contact details inside the panel */
.er-footer-contact { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.er-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .55rem;
    font-size: .875rem;
    color: var(--er-text-2);
}
.er-footer-contact i { color: var(--er-blue); font-size: .8rem; margin-top: .28rem; flex: 0 0 auto; }
.er-footer-contact a { color: var(--er-text-2); }
.er-footer-contact a:hover { color: var(--er-blue); }

.er-footer-legal {
    border-top: 1px solid var(--er-border);
    padding: 1rem 0 1.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    align-items: center;
    justify-content: space-between;
    font-size: .8125rem;
    color: var(--er-text-3);
}
.er-footer-legal-links a { color: var(--er-text-3); margin-left: 1.1rem; }
.er-footer-legal-links a:hover { color: var(--er-blue); }
.er-footer-legal-links a:first-child { margin-left: 0; }
.er-status-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .78rem; font-weight: 600; color: var(--er-text-2);
}
.er-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #00C48C;
    box-shadow: 0 0 0 4px rgba(0,196,140,.16);
    animation: erPulse 2.4s ease-in-out infinite;
}
@keyframes erPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0,196,140,.16); }
    50%      { box-shadow: 0 0 0 8px rgba(0,196,140,.04); }
}

/* --------------------------------------------------------------------------
   16. Homepage (public landing)
   -------------------------------------------------------------------------- */

.er-hero {
    position: relative;
    padding: 4.5rem 0 3.5rem;
    text-align: center;
}
.er-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--er-border-2);
    background: var(--er-glass);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--er-text-2);
    margin-bottom: 1.5rem;
}
.er-hero-eyebrow i { color: var(--er-blue); }
.er-hero-title {
    font-size: clamp(2.3rem, 5.4vw, 4rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.04em;
    margin: 0 auto 1.15rem;
    max-width: 20ch;
    color: var(--er-text);
}
.er-hero-title .er-grad {
    background: var(--er-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.er-hero-sub {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.65;
    color: var(--er-text-2);
    max-width: 62ch;
    margin: 0 auto 2rem;
}
.er-hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.er-hero-actions .btn { padding: .85rem 1.75rem; font-size: .95rem; border-radius: 13px; }

/* Domain search embedded in the hero */
.er-hero-domain { max-width: 780px; margin: 2.25rem auto 0; text-align: left; }
.er-hero-domain .home-domain-search {
    background: var(--er-glass) !important;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-lg);
    box-shadow: var(--er-shadow);
    padding: 1.5rem 1.6rem;
}
.er-hero-domain .home-domain-search > .container { padding: 0 !important; max-width: 100% !important; }
.er-hero-domain .home-domain-search .p-5 { padding: 0 !important; }
.er-hero-domain .home-domain-search h2 {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--er-text-2);
    margin: 0 0 1rem;
}
.er-hero-domain .home-domain-search .input-group .form-control {
    height: 54px;
    font-size: .95rem;
    border-radius: 12px 0 0 12px !important;
}
.er-hero-domain .home-domain-search .input-group .btn {
    height: 54px;
    padding: 0 1.5rem;
    border-radius: 0 !important;
    font-size: .9rem;
}
.er-hero-domain .home-domain-search .input-group .btn:last-child { border-radius: 0 12px 12px 0 !important; }
.er-hero-domain .home-domain-search .d-sm-none .btn { margin-top: .5rem; border-radius: 12px !important; height: 48px; }
.er-hero-domain .home-domain-search .tld-logos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    justify-content: center;
    padding: 0;
    margin: 1.25rem 0 0;
}
.er-hero-domain .home-domain-search .tld-logos li { color: var(--er-text-3); font-size: .85rem; }
.er-hero-domain .home-domain-search .tld-logos img { max-height: 18px; margin-right: .4rem; }
.er-hero-domain .home-domain-search .domainchecker-homepage-captcha { width: 100%; margin-top: 1rem; }
.er-hero-domain .home-domain-search #default-captcha-domainchecker p {
    font-size: .78rem;
    color: var(--er-text-3);
    margin-bottom: .75rem;
}
.er-hero-domain .home-domain-search .captchaimage img {
    border-radius: 8px;
    border: 1px solid var(--er-border);
    background: var(--er-surface-2);
    padding: 4px;
}
.er-hero-domain .home-domain-search #inputCaptcha { height: 44px; }
.er-hero-domain .home-domain-search .btn-link {
    color: var(--er-text-3) !important;
    font-size: .8rem !important;
}
.er-hero-domain .home-domain-search .btn-link:hover { color: var(--er-blue) !important; }

.er-hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin: 3.5rem auto 1rem;
    max-width: 900px;
}
.er-metric {
    padding: 1.2rem 1rem;
    border-radius: var(--er-radius);
    border: 1px solid var(--er-border);
    background: var(--er-glass);
    text-align: center;
}
.er-metric-value {
    font-family: var(--er-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--er-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.er-metric-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--er-text-3); margin-top: .3rem;
}

.er-section { padding: 3.5rem 0 1rem; }
.er-section-head { text-align: center; max-width: 62ch; margin: 0 auto 2.5rem; }
.er-section-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: .65rem;
}
.er-section-sub { color: var(--er-text-2); font-size: 1rem; margin: 0; }

/* Product group cards */
.card-columns.home { column-gap: 1.5rem; }
.card-columns.home .card {
    transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease;
}
.card-columns.home .card:hover {
    transform: translateY(-6px);
    border-color: rgba(0,163,255,.4) !important;
    box-shadow: var(--er-glow) !important;
}
.card-columns.home .card .card-body { position: relative; }
.card-columns.home .card .card-body::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--er-gradient);
    opacity: 0; transition: opacity .28s ease;
}
.card-columns.home .card:hover .card-body::before { opacity: 1; }
.card-columns.home .pricing-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.card-columns.home .card p { color: var(--er-text-3); font-size: .9rem; }

/* "How can we help" icon buttons */
.action-icon-btns a {
    display: block;
    padding: 1.6rem 1rem !important;
    border-radius: var(--er-radius) !important;
    border: 1px solid var(--er-border) !important;
    background: var(--er-glass) !important;
    color: var(--er-text-2) !important;
    font-weight: 600;
    font-size: .875rem;
    text-align: center;
    text-decoration: none !important;
    transition: all .26s cubic-bezier(.2,.8,.2,1);
    height: 100%;
}
.action-icon-btns a .ico-container {
    width: 54px; height: 54px;
    margin: 0 auto .9rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 15px;
    background: var(--er-gradient-soft);
    border: 1px solid rgba(0,163,255,.22);
    transition: transform .26s ease;
}
.action-icon-btns a .ico-container i { font-size: 1.35rem !important; color: var(--er-blue) !important; }
.action-icon-btns a:hover {
    transform: translateY(-5px);
    border-color: rgba(0,163,255,.45) !important;
    color: var(--er-text) !important;
    box-shadow: var(--er-glow);
}
.action-icon-btns a:hover .ico-container { transform: scale(1.08) rotate(-4deg); }
.action-icon-btns { row-gap: 1.2rem; }

/* --------------------------------------------------------------------------
   17. Client area home cards
   -------------------------------------------------------------------------- */

.client-home-cards .card { margin-bottom: 1.5rem; }
.client-home-cards .card-header .card-title {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.client-home-cards .card-header .card-title i { color: var(--er-blue); }
.client-home-cards .list-group-item { padding: .8rem 1.35rem; font-size: .875rem; }
.client-home-cards .list-group-item i { color: var(--er-text-3); }
.client-home-cards .list-group-item.active i { color: var(--er-blue); }

/* --------------------------------------------------------------------------
   18. Login / auth
   -------------------------------------------------------------------------- */

.login-form .card {
    box-shadow: var(--er-shadow-lg) !important;
    border-radius: var(--er-radius-lg) !important;
}
.login-form .card-body { padding: 2.5rem !important; }
.login-form h6.h3, .login-form .h3 {
    font-family: var(--er-font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.er-auth-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .85rem; border-radius: 999px;
    border: 1px solid var(--er-border-2);
    background: var(--er-glass);
    color: var(--er-text-2); font-size: .75rem; font-weight: 600;
    margin-bottom: 1.1rem;
}
.er-auth-badge i { color: var(--er-blue); }
.input-group-merge .input-group-text {
    background: var(--er-surface-2) !important;
    border-right: 0 !important;
    color: var(--er-text-3) !important;
}
.input-group-merge .form-control { border-left: 0 !important; }
.btn-reveal-pw { background: var(--er-surface-2) !important; border-left: 0 !important; }

/* --------------------------------------------------------------------------
   19. Flash messages as toasts
   -------------------------------------------------------------------------- */

.er-toast-stack {
    position: fixed;
    bottom: calc(var(--er-footer-h, 58px) + env(safe-area-inset-bottom, 0px) + 22px);
    right: 22px;
    z-index: 1080;
    display: flex;
    flex-direction: column-reverse;
    gap: .6rem;
    max-width: 380px;
    pointer-events: none;
}
.er-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-left: 3px solid var(--er-blue);
    box-shadow: var(--er-shadow-lg);
    color: var(--er-text-2);
    font-size: .875rem;
    animation: erToastIn .42s cubic-bezier(.2,.9,.25,1) both;
}
.er-toast.is-success { border-left-color: #00C48C; }
.er-toast.is-danger  { border-left-color: #E5484D; }
.er-toast.is-warning { border-left-color: #FFB020; }
.er-toast i { color: var(--er-blue); margin-top: .12rem; }
.er-toast.is-success i { color: #00C48C; }
.er-toast.is-danger i  { color: #E5484D; }
.er-toast.is-warning i { color: #FFB020; }
.er-toast .er-toast-close {
    margin-left: auto; background: none; border: 0; color: var(--er-text-3);
    cursor: pointer; padding: 0 .1rem; line-height: 1;
}
.er-toast .er-toast-close:hover { color: var(--er-text); }
@keyframes erToastIn {
    from { opacity: 0; transform: translateX(24px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   20. Misc components
   -------------------------------------------------------------------------- */

#fullpage-overlay .inner-wrapper span.msg { color: var(--er-text-2); }

.btn-return-to-admin {
    background: var(--er-surface-3) !important;
    border: 1px solid var(--er-border-2) !important;
    color: var(--er-text) !important;
    border-radius: 12px !important;
}

.well, .block, .panel-default {
    background: var(--er-surface) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius) !important;
    color: var(--er-text-2);
}

.domain-checker-container, .domain-search-container {
    background: var(--er-glass) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius-lg) !important;
}

/* --------------------------------------------------------------------------
   Store domain search form

   Lives in css/store-domain.css - its own file so it can be cache-busted
   independently of this stylesheet (the order form stylesheet is served with
   WHMCS's release hash and is cached by the CDN for hours).
   -------------------------------------------------------------------------- */

#order-standard_cart .products .product,
.products .product {
    background: var(--er-surface) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius) !important;
}

.tab-content > .tab-pane { color: var(--er-text-2); }
.sidebar-opener, .btn-min-sidebar { color: var(--er-text-2) !important; }
.text-center i.fa-3x { color: var(--er-text-3); }

/* --------------------------------------------------------------------------
   21. Utilities & reveal animation
   -------------------------------------------------------------------------- */

.er-reveal { opacity: 1; transform: none; }
html.er-js .er-reveal { opacity: 0; transform: translateY(14px); }
html.er-js .er-reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.er-text-grad {
    background: var(--er-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

/* --------------------------------------------------------------------------
   21b. Client dashboard header
   -------------------------------------------------------------------------- */

.er-dash-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: space-between;
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.5rem;
    border-radius: var(--er-radius-lg);
    border: 1px solid var(--er-border);
    background:
        radial-gradient(600px 200px at 0% 0%, rgba(0,163,255,.16), transparent 70%),
        var(--er-glass);
    box-shadow: var(--er-shadow);
}
.er-dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--er-text-3);
    margin-bottom: .6rem;
}
.er-dash-eyebrow .er-status-dot {
    width: 7px; height: 7px;
    box-shadow: 0 0 0 3px rgba(0,196,140,.16);
}
.er-dash-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0 0 .35rem;
}
.er-dash-sub { color: var(--er-text-2); font-size: .95rem; margin: 0; }
.er-dash-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   21d. Rich content written into product descriptions
   Product descriptions are rendered as HTML, so content authors can drop
   markup like <div class="er-spec-card"> into them. These styles make that
   content theme-aware (light + dark) and independent of inline styling that
   WHMCS's sanitiser strips.
   -------------------------------------------------------------------------- */

.er-spec-card {
    max-width: 330px;
    padding: 22px;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    background: var(--er-surface-2);
    text-align: center;
}
.er-spec-card img,
.er-spec-card .er-spec-os {
    width: 72px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
}
.er-spec-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.er-spec-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--er-text-2);
}
.er-spec-list li:last-child { margin-bottom: 0; }
.er-spec-list li i,
.er-spec-list li .fa-solid,
.er-spec-list li .fas,
.er-spec-list li .far {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
}
.er-spec-list li span { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1399.98px) {
    /* the e-mail chip is the first to go on narrower screens */
    .er-footer-inner .er-footer-chips .er-footer-chip { display: none; }
}

@media (max-width: 1199.98px) {
    header.header .search { width: 220px; }
    .er-footer-inner .er-footer-chips { display: none; }
}

@media (max-width: 991.98px) {
    .er-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    header.header .main-navbar-wrapper .container { padding: .5rem .75rem; }
    header.header .navbar-nav { margin: .5rem 0; }
    header.header .navbar-nav a { padding: .6rem .75rem !important; }
}

@media (max-width: 767.98px) {
    .er-hero { padding: 3rem 0 2rem; }
    .er-footer-grid { grid-template-columns: 1fr; }
    .er-footer-copy,
    .er-footer-chips { display: none; }
    .er-footer-row { gap: 10px; }
    .er-footer-actions { margin-left: auto; }
    .er-footer-panel.is-open { max-height: 80vh; }
    .er-footer-legal { flex-direction: column; align-items: flex-start; }
    .er-footer-legal-links a { margin: 0 1rem 0 0; }
    .er-toast-stack { left: 14px; right: 14px; bottom: calc(var(--er-footer-h, 58px) + env(safe-area-inset-bottom, 0px) + 14px); max-width: none; }
    .tiles .row > [class*="col-"] { flex: 1 1 100%; }
    header.header .navbar.navbar-light { margin-top: 8px; }
    .er-logo { height: 34px; }
}

/* ==========================================================================
   Client area app shell — navigation moves into a left rail
   ========================================================================== */

.er-mobilebar { display: none; }

/* --- Rail: desktop ------------------------------------------------------- */

@media (min-width: 1200px) {
    body.er-body--rail .er-header--rail {
        position: fixed;
        top: var(--er-hpn-top, 0px);
        left: 0;
        bottom: 0;
        width: 282px;
        height: calc(100vh - var(--er-hpn-top, 0px));
        display: flex;
        flex-direction: column;
        background: var(--er-surface);
        border-right: 1px solid var(--er-border);
        border-bottom: 0;
        z-index: 1030;
    }
    body.er-body--rail .er-header--rail::before { height: 200px; opacity: .8; }
    body.er-body--rail .er-progress { display: none; }
    body.er-body--rail #main-body,
    body.er-body--rail .master-breadcrumb {
        margin-left: 282px;
    }
    body.er-body--rail #main-body { padding-top: 26px !important; }
}

/* --------------------------------------------------------------------------
   Addon notices rendered at the very top of <body>

   The HPLink OTP prompt is printed into {$headeroutput}, i.e. before the
   header. In the rail layout that means it starts at x:0 and disappears
   underneath the fixed rail. Push it into the same column as the page content.
   The bar itself is styled by the addon (css/client.css).
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    body.er-body--rail .hpotp-bar {
        /* rail width + the theme container's centring and gutter */
        margin: 14px 0 18px calc(282px + max(0px, (100vw - 1422px) / 2));
        max-width: 1140px;
    }
}

@media (max-width: 1199.98px) {
    body.er-body--rail .hpotp-bar { margin: 12px 14px 16px; }
}

/* Logo, tools, search and nav stay put; only the contextual cards scroll, so
   the nav and the account block are always reachable. */
.er-rail-scroll {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 0;
    overflow: hidden;
}

.er-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.er-rail-head .er-logo { height: 38px; }
.er-rail-head .er-drawer-close { display: none; }

.er-rail-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.er-domain-search--rail { width: 100%; }
.er-domain-search--rail .er-domain-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100% !important;
    align-self: stretch;
}

.er-rail-nav { display: flex; flex-direction: column; }
/* The parent theme sets #nav { gap: 40px } with an ID, so match its weight. */
body.er-body--rail .er-rail-nav #nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px !important;
    margin: 0 !important;
}
.er-rail-nav .er-nav-link {
    padding: 8px 12px !important;
    font-size: .875rem !important;
    border-radius: 10px;
}
.er-rail-nav .er-nav-link::after { display: none; }
.er-rail-nav .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    margin: 3px 0 6px;
    padding: 5px;
    background: var(--er-surface-2) !important;
    box-shadow: none !important;
    animation: none;
    transform: none !important;
}
.er-rail-nav .dropdown-item { padding: 8px 10px; font-size: .85rem; }

/* Contextual WHMCS sidebar, folded into the rail */
.er-rail-context {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0 10px;
    border-top: 1px solid var(--er-border);
}

/* Keep the cards at their natural height. As flex items in this column they
   were being shrunk to whatever space was left (a card whose content needs
   296px was squeezed into 24px), so every panel was clipped mid-row and its
   header ran into the next card's. With them fixed the column scrolls
   instead, which is what this pane is for. */
.er-rail-context > .card,
.er-rail-context > .card-sidebar,
.er-rail-context > .card-sidebar > * {
    flex: 0 0 auto;
    min-height: 0;
}
.er-rail-context::-webkit-scrollbar { width: 5px; }
.er-rail-context::-webkit-scrollbar-thumb { background: var(--er-border-2); border-radius: 3px; border: 0; }
.er-rail-context::-webkit-scrollbar-track { background: transparent; }
.er-rail-context .card-sidebar {
    background: var(--er-surface-2) !important;
    box-shadow: none !important;
    border-radius: 13px !important;
}
.er-rail-context .card-header { padding: .8rem .95rem !important; }
.er-rail-context .card-header .card-title { font-size: .72rem !important; }
.er-rail-context .list-group-item { padding: .6rem .95rem !important; font-size: .83rem !important; }

.er-rail-foot {
    flex: 0 0 auto;
    padding: 16px 0 22px;
    border-top: 1px solid var(--er-border);
}
.er-rail-user { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.er-rail-user-meta { display: flex; flex-direction: column; min-width: 0; }
.er-rail-user-meta strong {
    font-size: .85rem;
    color: var(--er-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 168px;
}
.er-rail-user-meta span {
    font-size: .72rem;
    color: var(--er-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 168px;
}
.er-rail-user-actions { display: flex; gap: 5px; margin-top: 11px; }
.er-rail-user-actions a {
    flex: 1 1 auto;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--er-border);
    color: var(--er-text-3) !important;
    font-size: .82rem;
    transition: all .18s ease;
}
.er-rail-user-actions a:hover {
    color: var(--er-blue) !important;
    border-color: rgba(0,163,255,.45);
    background: var(--er-surface-2);
}
.er-rail-user-actions a.er-rail-logout:hover { color: #E5484D !important; border-color: rgba(229,72,77,.4); }

/* Give the content a comfortable column inside the shell */
body.er-body--rail .er-container--rail { padding-left: 26px; padding-right: 26px; }

/* --- Rail becomes a drawer below the desktop breakpoint ------------------ */

@media (max-width: 1199.98px) {
    body.er-body--rail .er-header--rail {
        position: fixed;
        top: var(--er-hpn-top, 0px);
        left: 0;
        bottom: 0;
        width: 320px;
        max-width: 88vw;
        display: flex;
        flex-direction: column;
        background: var(--er-surface);
        border-right: 1px solid var(--er-border);
        box-shadow: 40px 0 70px -40px rgba(0,0,0,.7);
        transform: translateX(-103%);
        visibility: hidden;
        transition: transform .42s cubic-bezier(.2,.85,.25,1), visibility .42s;
        z-index: 1045;
    }
    body.er-nav-open .er-header--rail { transform: none; visibility: visible; }
    body.er-body--rail .er-rail-head .er-drawer-close { display: inline-flex; }
    body.er-body--rail #main-body,
    body.er-body--rail .master-breadcrumb { margin-left: 0; }

    .er-mobilebar {
        display: flex;
        position: sticky;
        top: var(--er-hpn-top, 0px);
        z-index: 1020;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        background: var(--er-nav);
        border-bottom: 1px solid var(--er-border);
    }
    .er-mobilebar .er-brand { margin: 0 auto; }
    .er-mobilebar .er-logo { height: 30px; }
    .er-mobilebar .er-burger { display: inline-flex; }
}

/* Also drive the top-navbar variant's drawer from the same body class */
body.er-nav-open .er-navbar .navbar-collapse { transform: none !important; visibility: visible !important; }

/* --------------------------------------------------------------------------
   DataTables controls (client area list pages)
   The tables themselves are themed above; these are the search box, page-size
   select, info line and pagination that WHMCS renders around them.
   -------------------------------------------------------------------------- */

.dataTables_wrapper { color: var(--er-text-3); font-size: .875rem; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 16px; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    text-transform: none;
    letter-spacing: 0;
    font-size: .85rem;
    font-weight: 500;
    color: var(--er-text-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--er-input-bg) !important;
    border: 1px solid var(--er-input-border) !important;
    color: var(--er-text) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    height: auto !important;
    font-size: .85rem !important;
    margin: 0 !important;
}
.dataTables_wrapper .dataTables_filter input { min-width: 210px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--er-blue) !important;
    box-shadow: var(--er-ring) !important;
    outline: none;
}
.dataTables_wrapper .dataTables_info { padding-top: 16px; color: var(--er-text-3); font-size: .82rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--er-surface-2) !important;
    border: 1px solid var(--er-border) !important;
    color: var(--er-text-2) !important;
    border-radius: 10px !important;
    margin: 0 3px !important;
    padding: 7px 13px !important;
    font-size: .82rem !important;
    transition: all .16s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: rgba(0,163,255,.45) !important;
    color: var(--er-text) !important;
    background: var(--er-surface-3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--er-gradient) !important;
    border: 0 !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .45;
    background: var(--er-surface-2) !important;
    color: var(--er-text-3) !important;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: var(--er-text-3); opacity: .8; }
table.dataTable tbody td.dataTables_empty { padding: 44px 16px !important; color: var(--er-text-3) !important; }

/* ==========================================================================
   Client area content — page header and list-page cards
   ========================================================================== */

.er-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--er-border);
}
.er-page-title {
    position: relative;
    margin: 0 !important;
    padding-left: 17px;
    font-family: var(--er-font-display);
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: var(--er-text) !important;
}
.er-page-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 5px;
    border-radius: 3px;
    background: var(--er-gradient);
}

/* --------------------------------------------------------------------------
   List pages (Services, Domains, Invoices, Tickets…) render only a bare
   DataTable — give it a proper card with a toolbar and footer.
   -------------------------------------------------------------------------- */

.primary-content .table-container {
    background: var(--er-surface) !important;
    border: 1px solid var(--er-border) !important;
    border-radius: var(--er-radius) !important;
    box-shadow: var(--er-shadow) !important;
    overflow: hidden !important;
    margin-bottom: 22px;
}
.primary-content .table-container .dataTables_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: 0 !important;
}
.primary-content .table-container .listtable {
    flex: 1 1 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}
.primary-content .table-container .dataTables_filter {
    order: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 16px 18px 14px !important;
    margin: 0 !important;
}
.primary-content .table-container .dataTables_filter label {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 !important;
    position: relative !important;
}
.primary-content .table-container .dataTables_filter input {
    width: 100% !important;
    max-width: none !important;
    padding-left: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237E8DA6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
}
.primary-content .table-container table.table-list {
    order: 2 !important;
    margin: 0 !important;
    border-top: 1px solid var(--er-border) !important;
}
.primary-content .table-container .dataTables_info {
    order: 3 !important;
    padding: 13px 18px 0 !important;
    margin: 0 !important;
}
.primary-content .table-container .dataTables_length {
    order: 4 !important;
    flex: 1 1 auto !important;
    padding: 14px 18px 18px !important;
    margin: 0 !important;
}
.primary-content .table-container .dataTables_paginate {
    order: 5 !important;
    flex: 0 0 auto !important;
    padding: 14px 18px 18px !important;
    margin: 0 !important;
}
.primary-content .table-container .dataTables_length label { margin: 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.primary-content .table-container .dataTables_length select { width: auto !important; }

/* List table footer: group the page-size select and pagination behind a rule */
.primary-content .table-container .dataTables_info {
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--er-border);
}
.primary-content .table-container .dataTables_length,
.primary-content .table-container .dataTables_paginate {
    background: var(--er-surface-2);
}
.primary-content .table-container .dataTables_length { padding-right: 0 !important; }
.primary-content .table-container .dataTables_paginate ul.pagination { margin: 0 !important; }

/* Wide list tables scroll sideways rather than being clipped on small screens */
.primary-content .table-container .listtable > .er-table-scroll {
    order: 2 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-top: 1px solid var(--er-border);
}
.primary-content .table-container .listtable > .er-table-scroll > table.table-list {
    order: initial !important;
    border-top: 0 !important;
    margin: 0 !important;
}
.primary-content .table-container .listtable > .er-table-scroll::-webkit-scrollbar { height: 8px; }
.primary-content .table-container .listtable > .er-table-scroll::-webkit-scrollbar-thumb {
    background: var(--er-border-2);
    border-radius: 4px;
}

/* WHMCS 9 builds DataTables list pages as:
       .table-container (overflow-x: hidden)
         > .dataTables_wrapper > .listtable (flex column) > table
   DataTables re-renders that markup after the scroll wrapper in footer.tpl has
   run, so the table can end up un-wrapped: the 5-column table, the search box
   and the info line were 491px wide inside a 325px card and clipped with no way
   to scroll to them. Keep the column inside the card and let the table itself
   scroll sideways on phones and tablets. */
@media (max-width: 991.98px) {
    .primary-content .table-container .listtable {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .primary-content .table-container .listtable > table.table-list {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .primary-content .table-container .dataTables_filter {
        justify-content: flex-start !important;
        padding: 14px 14px 12px !important;
    }
    .primary-content .table-container .dataTables_filter label { max-width: none !important; }
    .primary-content .table-container .dataTables_info {
        padding: 12px 14px 0 !important;
        white-space: normal !important;
    }
    .primary-content .table-container .dataTables_length { padding: 12px 14px 16px !important; }
    .primary-content .table-container .dataTables_paginate { padding: 12px 14px 16px !important; }
}