/* *****************************************************
    ** Custom Stylesheet — 2026 Design Refresh **
    Loaded last (see includes/head.tpl), so everything
    here safely overrides Bootstrap/theme defaults without
    editing core files. Safe to keep through WHMCS updates.

    Consolidated from what used to be large inline <style>
    blocks duplicated across header.tpl, footer.tpl,
    homepage.tpl, clientareahome.tpl, clientareadomains.tpl,
    clientareaaddfunds.tpl, clientareadomainaddons.tpl,
    clientareadomainregisterns.tpl and
    store/socialbee/index.tpl. Content preserved, palette
    tokenised, three previously-inconsistent colour schemes
    (violet dashboard / teal-blue nav / rainbow footer)
    unified into one brand language.

    2026-09: repointed the brand tokens to match domifys.com
    (cobalto #1f3bd6 / sol #ffc933 / Archivo) so the jump from
    the marketing site into the cart/client area feels like one
    company. Only the :root tokens, the two mismatched tile
    colours (see DOMIFYS BRAND below) and the raw rgba() shadows
    tied to the old violet hue changed — every component rule
    below still reads from the same tokens as before.
***************************************************** */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand — domifys cobalto, subtle two-stop gradient within
       the same blue instead of the old violet/purple duo */
    --color-primary: #1f3bd6;
    --color-primary-dark: #1830b4;
    --color-primary-alt: #1830b4;
    --color-primary-alt-dark: #142a8f;
    /* domifys.com is flat — solid colour blocks, no gradients on
       brand surfaces — so these are solid fills now, not degradés.
       Every rule below still reads var(--gradient-primary) as before. */
    --gradient-primary: var(--color-primary);
    --gradient-primary-hover: var(--color-primary-dark);

    /* Ink / neutral scale */
    --color-ink-900: #1a202c;
    --color-ink-700: #2d3748;
    --color-ink-600: #4a5568;
    --color-ink-500: #718096;
    --color-ink-400: #a0aec0;
    --color-ink-300: #cbd5e0;
    --color-ink-200: #e2e8f0;
    --color-ink-100: #f1f5f9;
    --color-ink-75: #f7fafc;
    --color-ink-50: #f8f9fa;
    --color-surface: #ffffff;

    /* Semantic */
    --color-success: #48bb78;
    --color-success-dark: #38a169;
    --color-success-darker: #2f855a;
    --color-danger: #f56565;
    --color-danger-dark: #e53e3e;
    --color-danger-darker: #c53030;
    --color-warning: #ed8936;
    --color-warning-alt: #f59e0b;
    --color-warning-dark: #d97706;
    --color-info: #4299e1;
    --color-info-dark: #3182ce;
    --color-info-darker: #2c5282;
    /* "gold" now IS the site's sol yellow, used for the gold tile/badges */
    --color-gold: #ffc933;
    --color-gold-dark: #f2b600;
    --color-gold-darker: #cc9900;
    --color-gold-light: #ffe08a;
    --color-purple-accent: #ffc933;
    /* Alias matching the marketing site's own variable name */
    --sol: #ffc933;

    /* Elevation — layered soft shadows instead of flat single-value shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.06), 0 10px 20px -10px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.08), 0 20px 40px -16px rgba(15, 23, 42, 0.18);
    --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.22);
    --shadow-primary-sm: 0 2px 8px rgba(31, 59, 214, 0.25);
    --shadow-primary-md: 0 4px 16px rgba(31, 59, 214, 0.3);
    --shadow-primary-lg: 0 10px 28px rgba(31, 59, 214, 0.38);
    --focus-ring: 0 0 0 3px rgba(31, 59, 214, 0.15);

    /* Radius scale — rounder, closer to the marketing site's
       22-24px cards and fully pill-shaped buttons */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.2s var(--ease);
    --transition-base: 0.3s var(--ease);

    /* Fonts — same Archivo variable font as the marketing site,
       falling back to the WHMCS-bundled families if it fails to load */
    --font-body: "Archivo", "Open Sans", Verdana, Tahoma, sans-serif;
    --font-heading: "Archivo", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Actually apply the font tokens (previously defined but unused —
   the base theme set Open Sans/Raleway directly; this overrides it) */
body, input, button, select, textarea, .form-control, .btn {
    font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 750;
    font-stretch: 115%;
    letter-spacing: -0.02em;
}

/* Logo — matches the "domifys." wordmark's yellow dot on the
   marketing site, for whenever there's no uploaded logo image */
.logo-text::after {
    content: '.';
    color: var(--sol);
}

/* ============================================================
   GLOBAL COMPONENTS
   Shared rules that used to be duplicated near-identically
   across several page templates — centralised once here.
   2026 refinement: buttons dropped forced UPPERCASE for a
   calmer, more current look; shadows use the layered scale.
   ============================================================ */

/* -- Buttons -- */
/* Pill-shaped, flat, no hover-lift — matches the marketing
   site's .btn (solid fill, colour swap on hover, nothing else) */
.btn {
    border-radius: var(--radius-pill);
    font-weight: 650;
    letter-spacing: 0.2px;
    font-size: 13px;
    padding: 9px 22px;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    border: none;
    box-shadow: none;
}

.btn:hover {
    transform: none;
    box-shadow: none;
}

.btn:active {
    transform: none;
}

.btn-xs {
    padding: 6px 16px;
    font-size: 11px;
}

/* GLOBAL — every plain Bootstrap .btn-* on every page of the
   app (not just the pages the 2026 refresh explicitly rewrote)
   now pulls the same brand tokens, flat, no gradient. */
.btn.bg-color-blue,
.btn-primary,
.modal-footer .btn-primary {
    background: var(--color-primary);
    color: var(--color-surface);
}

.btn.bg-color-blue:hover,
.btn-primary:hover,
.modal-footer .btn-primary:hover {
    background: var(--color-primary-dark);
    color: var(--color-surface);
}

.btn-default {
    background: var(--color-surface);
    color: var(--color-ink-600);
    border: 2px solid var(--color-ink-200);
}

.btn-default:hover {
    background: var(--color-ink-75);
    border-color: var(--color-ink-300);
    color: var(--color-ink-700);
}

.btn.bg-color-green,
.btn-success {
    background: var(--color-success);
    color: var(--color-surface);
}

.btn.bg-color-green:hover,
.btn-success:hover {
    background: var(--color-success-dark);
    color: var(--color-surface);
}

.btn.bg-color-red,
.btn-danger {
    background: var(--color-danger);
    color: var(--color-surface);
}

.btn.bg-color-red:hover,
.btn-danger:hover {
    background: var(--color-danger-dark);
    color: var(--color-surface);
}

.btn-info {
    background: var(--color-info);
    color: var(--color-surface);
}

.btn-info:hover {
    background: var(--color-info-dark);
    color: var(--color-surface);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-surface);
}

.btn-warning:hover {
    background: var(--color-warning-dark);
    color: var(--color-surface);
}

.btn.bg-color-gold {
    background: var(--color-gold);
    color: var(--color-ink-900);
}

.btn.bg-color-gold:hover {
    background: var(--color-gold-dark);
    color: var(--color-ink-900);
}

/* Same treatment for the small status tags/badges used
   throughout (Bootstrap .label-*) */
.label-default { background: var(--color-ink-400); color: var(--color-surface); }
.label-primary { background: var(--color-primary); color: var(--color-surface); }
.label-success { background: var(--color-success); color: var(--color-surface); }
.label-info { background: var(--color-info); color: var(--color-surface); }
.label-warning { background: var(--color-warning); color: var(--color-surface); }
.label-danger { background: var(--color-danger); color: var(--color-surface); }

.btn i {
    margin-right: 6px;
}

.modal-footer .btn {
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all var(--transition-base);
    border: none;
    box-shadow: none;
}

.modal-footer .btn-default {
    background: var(--color-surface);
    color: var(--color-ink-600);
    border: 2px solid var(--color-ink-200);
}

.modal-footer .btn-default:hover {
    background: var(--color-ink-75);
    border-color: var(--color-ink-300);
    color: var(--color-ink-700);
}

/* -- Badges / status pills -- */
/* Yellow, not cobalt — the top bar is cobalt now, a cobalt badge
   on it would disappear */
.top-nav .label {
    background: var(--sol);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink-900);
}

.label.status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.status-active {
    background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
    color: #22543d;
}

.status-pending {
    background: linear-gradient(135deg, #feebc8 0%, #fbd38d 100%);
    color: #744210;
}

.status-expired {
    background: linear-gradient(135deg, #fed7d7 0%, #fc8181 100%);
    color: #742a2a;
}

.status-cancelled,
.status-fraud {
    background: linear-gradient(135deg, var(--color-ink-200) 0%, var(--color-ink-300) 100%);
    color: var(--color-ink-700);
}

.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }

/* -- Alerts -- */
.alert {
    border-radius: var(--radius-lg);
    border: none;
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 25px;
}

.alert-danger {
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    color: var(--color-danger-darker);
    border-left: 4px solid var(--color-danger);
}

.alert-danger i { margin-right: 10px; font-size: 18px; }

.alert-success {
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
    color: var(--color-success-darker);
    border-left: 4px solid var(--color-success);
}

.alert-info {
    background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%);
    color: var(--color-info-darker);
    border-left: 4px solid var(--color-info);
}

.alert-warning {
    background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
    color: var(--color-warning-dark);
    border-left: 4px solid var(--color-warning);
}

/* -- Panels / cards -- */
.panel {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--shadow-md);
    margin-bottom: 25px;
    overflow: hidden;
    transition: all var(--transition-base);
    background: var(--color-surface);
}

.panel:hover {
    box-shadow: var(--shadow-lg);
}

.panel-heading {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-ink-100);
    padding: 24px 28px;
}

.panel-title {
    font-size: 22px;
    font-weight: 750;
    font-stretch: 110%;
    letter-spacing: -0.01em;
    color: var(--color-ink-900);
    margin: 0;
    display: flex;
    align-items: center;
}

.panel-title i {
    margin-right: 10px;
    font-size: 20px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.panel-title .badge {
    background: var(--gradient-primary);
    color: var(--color-surface);
    border-radius: var(--radius-2xl);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
}

.panel-body {
    padding: 28px;
    color: var(--color-ink-600);
    line-height: 1.6;
}

.panel-footer {
    background: var(--color-ink-75);
    border-top: 1px solid var(--color-ink-100);
    padding: 15px 25px;
    color: var(--color-ink-500);
    font-size: 14px;
}

.panel-accent-blue .panel-heading { border-left: 4px solid var(--color-primary); }
.panel-accent-green .panel-heading { border-left: 4px solid var(--color-success); }
.panel-accent-red .panel-heading { border-left: 4px solid var(--color-danger); }
.panel-accent-gold .panel-heading { border-left: 4px solid var(--color-gold); }
.panel-accent-purple .panel-heading { border-left: 4px solid var(--color-primary); }

/* GLOBAL — WHMCS's stock theme (all.css) ships 18 of these
   panel-accent-* / bg-color-* utility colours (pink, purple, teal,
   magenta, lime, amethyst...) for its own default homepage widgets
   and third-party addon modules. The 2026 refresh only ever
   overrode 4 of them (blue/green/red/gold), so anything using one
   of the other 14 — like the stock "Open Tickets" widget, which
   reports "purple" — fell straight through to WHMCS's out-of-the-box
   rainbow. This maps every one of them onto the brand palette so no
   stock colour can leak through on any page or module again. */
.panel.panel-accent-blue,
.panel.panel-accent-midnight,
.panel.panel-accent-wet,
.panel.panel-accent-purple,
.panel.panel-accent-amethyst,
.panel.panel-accent-pink,
.panel.panel-accent-magenta {
    border-top-color: var(--color-primary);
}
.panel.panel-accent-green,
.panel.panel-accent-emerald,
.panel.panel-accent-lime,
.panel.panel-accent-turquoise,
.panel.panel-accent-teal {
    border-top-color: var(--color-success);
}
.panel.panel-accent-red,
.panel.panel-accent-pomegranate {
    border-top-color: var(--color-danger);
}
.panel.panel-accent-orange,
.panel.panel-accent-sun {
    border-top-color: var(--color-warning);
}
.panel.panel-accent-gold {
    border-top-color: var(--color-gold);
}
.panel.panel-accent-silver,
.panel.panel-accent-asbestos {
    border-top-color: var(--color-ink-400);
}

.btn.bg-color-midnight,
.btn.bg-color-wet,
.btn.bg-color-purple,
.btn.bg-color-amethyst,
.btn.bg-color-pink,
.btn.bg-color-magenta {
    background-color: var(--color-primary) !important;
    color: var(--color-surface) !important;
}
.btn.bg-color-emerald,
.btn.bg-color-lime,
.btn.bg-color-turquoise,
.btn.bg-color-teal {
    background-color: var(--color-success) !important;
    color: var(--color-surface) !important;
}
.btn.bg-color-pomegranate {
    background-color: var(--color-danger) !important;
    color: var(--color-surface) !important;
}
.btn.bg-color-orange,
.btn.bg-color-sun {
    background-color: var(--color-warning) !important;
    color: var(--color-surface) !important;
}
.btn.bg-color-silver,
.btn.bg-color-asbestos {
    background-color: var(--color-ink-400) !important;
    color: var(--color-surface) !important;
}

/* -- List group -- */
.list-group { border-radius: 0; }

.list-group-item {
    border-left: 3px solid transparent;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--color-ink-100);
    padding: 16px 25px;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    background: var(--color-surface);
    color: var(--color-ink-600);
    font-weight: 500;
}

.list-group-item:first-child { border-top: none; }
.list-group-item:last-child { border-bottom: none; }

.list-group-item:hover {
    background: var(--color-ink-75);
    border-left: 3px solid var(--color-primary);
    color: var(--color-ink-700);
}

.list-group-item.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--color-surface);
    font-weight: 600;
}

.list-group-item .badge {
    background: var(--color-ink-200);
    color: var(--color-ink-600);
    border-radius: var(--radius-2xl);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}

.list-group-item.active .badge {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-surface);
}

.list-group-item i {
    margin-right: 10px;
    width: 18px;
    text-align: center;
    color: var(--color-ink-400);
}

.list-group-item:hover i,
.list-group-item.active i { color: inherit; }

/* -- Form controls -- */
.form-control {
    border-radius: var(--radius-md);
    border: 2px solid var(--color-ink-200);
    padding: 12px 16px;
    font-size: 15px;
    transition: all var(--transition-base);
    background: var(--color-surface);
    color: var(--color-ink-700);
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
    background: var(--color-surface);
}

/* -- Dropdown menus -- */
.dropdown-menu {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-ink-200);
    padding: 10px 0;
    margin-top: 8px;
    background: var(--color-surface);
}

.dropdown-menu li { list-style: none; }

.dropdown-menu li a {
    padding: 12px 20px;
    color: var(--color-ink-600);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background: var(--color-ink-75);
    color: var(--color-primary);
}

.dropdown-menu li a i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    color: var(--color-ink-400);
    transition: color var(--transition-fast);
}

.dropdown-menu li a:hover i { color: var(--color-primary); }

.dropdown-menu .divider {
    margin: 10px 0;
    border-top: 1px solid var(--color-ink-200);
    height: 0;
}

.dropdown-menu li.disabled a {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent !important;
    padding-left: 20px !important;
}

.dropdown-menu li.disabled a:hover { color: var(--color-ink-600); }
.dropdown-menu li.disabled a:hover i { color: var(--color-ink-400); }
.dropdown-toggle .caret { margin-left: 4px; }

/* -- DataTables pagination -- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 20px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--radius-md);
    border: 2px solid var(--color-ink-200);
    padding: 8px 12px;
    transition: all var(--transition-base);
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm);
    margin: 0 3px;
    padding: 8px 12px;
    transition: all var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--color-primary);
    color: var(--color-surface) !important;
    border-color: var(--color-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--gradient-primary);
    color: var(--color-surface) !important;
    border-color: transparent;
}

/* -- Modals -- */
.modal-dialog { margin: 30px auto; }

.modal-content {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.modal-header {
    background: var(--gradient-primary);
    color: var(--color-surface);
    padding: 25px 30px;
    border-bottom: none;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.modal-header .close {
    color: var(--color-surface);
    opacity: 0.9;
    text-shadow: none;
    font-size: 28px;
    font-weight: 300;
    transition: all var(--transition-fast);
    margin-top: -2px;
}

.modal-header .close:hover { opacity: 1; transform: rotate(90deg); }

.modal-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 0;
    color: var(--color-surface);
}

.modal-body {
    padding: 30px;
    color: var(--color-ink-600);
    font-size: 15px;
    line-height: 1.7;
    min-height: 100px;
}

.modal-footer {
    background: var(--color-ink-50);
    border-top: 1px solid var(--color-ink-200);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-footer .loader {
    color: var(--color-ink-500);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-footer .loader i { font-size: 16px; color: var(--color-primary); }

.modal.fade .modal-dialog {
    transform: scale(0.9) translateY(-50px);
    opacity: 0;
    transition: all var(--transition-base);
}

.modal.in .modal-dialog { transform: scale(1) translateY(0); opacity: 1; }
.modal-backdrop { background-color: #000000; }
.modal-backdrop.in { opacity: 0.6; }

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.clearfix::after { content: ""; display: table; clear: both; }

/* ============================================================
   HEADER & TOP NAVIGATION
   ============================================================ */
/* #header (logo/utility row) and #main-menu (nav row) are two
   separate <section>s in the markup, wrapped in #site-header so
   they read as ONE continuous cobalt bar — same as .cabecera on
   the marketing site — instead of a white bar sitting on a blue one. */
#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* !important: the stock theme's own all.css defines
   "section#header { background-color: #fff }" — an element+ID
   selector that outranks a plain #header rule no matter what
   order they load in, so a normal-specificity override here was
   silently losing every time. Same reasoning for #main-menu,
   #footer, #home-banner and #main-body below. */
#header {
    background: var(--color-primary) !important;
    box-shadow: none;
    border-bottom: none;
}

.top-nav {
    margin: 0;
    padding: 12px 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.top-nav li { display: inline-flex; align-items: center; }

/* !important: stock all.css's "ul.top-nav > li > a" (element +
   class + two child combinators) outranks a plain ".top-nav a"
   rule, so the grey stock colour was winning here too. */
.top-nav a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.top-nav a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12);
}

/* Yellow CTA on the cobalt bar — same pairing as "Ver planes"
   on the marketing site's header */
.top-nav .primary-action .btn {
    background: var(--sol);
    color: var(--color-ink-900);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none;
    border: none;
}

.top-nav .primary-action .btn:hover {
    background: var(--color-gold-dark);
    box-shadow: none;
    transform: none;
}

.btn-logged-in-admin {
    background: var(--color-danger) !important;
    color: var(--color-surface) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
}

.btn-logged-in-admin:hover {
    background: var(--color-danger-dark) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Logo — header is cobalt now, so an uploaded logo gets a small
   white chip behind it in case it isn't white/transparent itself.
   float:left (not display:block) is load-bearing here: .top-nav
   is float:right (from the stock theme), and .logo comes AFTER it
   in the markup, so as a plain block it stretched to the full
   width of the header and its invisible right-hand half sat on
   top of — and intercepted every click on — the language/
   notifications/logout links underneath it. Floating it left
   shrinks its box to just the logo's own content. */
.logo { display: block; float: left; padding: 25px 0; transition: opacity var(--transition-base); }
.logo:hover { opacity: 0.85; }
.logo img {
    max-height: 52px;
    width: auto;
    transition: transform var(--transition-base);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 6px 10px;
}
.logo:hover img { transform: scale(1.03); }

/* Text fallback (no logo uploaded) — white wordmark with the
   same yellow dot as "domifys." on the marketing site */
.logo-text {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-surface);
    text-decoration: none;
}

/* Main navigation menu — unified to the primary brand gradient
   (previously a separate unrelated teal-blue, now on-brand) */
/* Flat solid cobalt — same block colour as .cabecera on the
   marketing site, no gradient or dot-pattern overlay */
#main-menu {
    background: var(--color-primary) !important;
    border-bottom: none;
    box-shadow: none;
    position: relative;
}

.navbar-main {
    margin-bottom: 0;
    border: none;
    background: transparent;
    min-height: 60px;
    position: relative;
    z-index: 1;
}

.navbar-main .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#main-menu .navbar-collapse { padding: 0; }

#main-menu .navbar-nav {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

#main-menu .navbar-nav.navbar-right { margin-left: auto; }

#main-menu .navbar-nav > li > a,
#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li > a:focus,
#main-menu .navbar-nav > li.active > a,
#main-menu .navbar-nav > li.active > a:hover,
#main-menu .navbar-nav > li.active > a:focus {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

#main-menu .navbar-nav > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

#main-menu .navbar-nav > li > a {
    padding: 20px 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    position: relative !important;
    transition: all var(--transition-base) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    line-height: 1 !important;
}

/* Underline-on-hover/active, same treatment as .menu a on the
   marketing site — flat sol yellow, no glow/pulse/gradient */
#main-menu .navbar-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--sol);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

#main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background: transparent !important;
    transform: none !important;
}

#main-menu .navbar-nav > li > a:hover::after,
#main-menu .navbar-nav > li > a:focus::after { opacity: 1; }

#main-menu .navbar-nav > li.active > a,
#main-menu .navbar-nav > li.active > a:hover,
#main-menu .navbar-nav > li.active > a:focus {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#main-menu .navbar-nav > li.active > a::after {
    opacity: 1;
    background: var(--sol);
}

.navbar-toggle {
    border-radius: var(--radius-md);
    margin-top: 12px;
    margin-bottom: 12px;
    border: 2px solid var(--color-ink-300);
    background: var(--color-surface);
    transition: all var(--transition-base);
    padding: 10px;
}

.navbar-toggle:hover { background: var(--color-ink-75); border-color: var(--color-primary); }
.navbar-toggle .icon-bar { background: var(--color-ink-600); border-radius: 2px; height: 3px; }

/* Mobile responsive nav */
@media (max-width: 991px) {
    .navbar-main { min-height: auto; }
    #main-menu .navbar-nav { margin: 0; display: block; }
    #main-menu .navbar-nav > li { display: block; width: 100%; }

    #main-menu .navbar-nav > li > a {
        height: auto !important;
        padding: 12px 20px !important;
        margin: 2px 0 !important;
        border-radius: 4px !important;
    }

    #main-menu .navbar-nav > li > a:hover,
    #main-menu .navbar-nav > li > a:focus { transform: none !important; }
    #main-menu .navbar-nav > li > a::after { display: none !important; }

    #main-menu .navbar-nav > li.active > a {
        background: rgba(31, 59, 214, 0.3) !important;
        border-left: 4px solid var(--color-primary) !important;
    }
}

/* Home banner (rendered on homepage.tpl) */
/* Flat cobalt block, same as .portada on the marketing site —
   no dot-pattern overlay, no text shadow */
#home-banner {
    background: var(--color-primary) !important;
    padding: 80px 0;
    position: relative;
}

#home-banner h2 {
    color: var(--color-surface) !important;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 35px;
}

.input-group-lg { box-shadow: var(--shadow-lg); }

/* !important: stock's "section#home-banner .form-control" forces
   border-radius:0, same ID-scoping problem as the buttons above */
.input-group-lg .form-control {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
    border: none;
    height: 60px;
    font-size: 16px;
    padding: 0 28px;
}

.input-group-btn .btn {
    border: none;
    height: 60px;
    padding: 0 32px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}

/* Same colours as the marketing site's domain search: yellow
   "Buscar", cobalt "Transferir" — flat, no gradient.
   !important: stock all.css has "section#home-banner .btn.search"
   (green) / ".btn.transfer" (grey), both ID-scoped so they outrank
   a plain two-class selector regardless of load order. */
.input-group-btn .btn.search {
    background: var(--sol) !important;
    color: var(--color-ink-900) !important;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.input-group-btn .btn.search:hover {
    background: var(--color-gold-dark) !important;
}

.input-group-btn .btn.transfer {
    background: var(--color-primary) !important;
    color: var(--color-surface) !important;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.input-group-btn .btn.transfer:hover {
    background: var(--color-primary-dark) !important;
}

/* Home quick-link shortcuts (rendered on homepage.tpl) */
.home-shortcuts {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-ink-200);
    box-shadow: var(--shadow-xs);
}

.home-shortcuts .lead {
    font-size: 24px;
    color: var(--color-ink-700);
    font-weight: 700;
    margin: 0;
    padding: 40px 20px;
}

.home-shortcuts ul {
    list-style: none;
    padding: 20px 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.home-shortcuts li { flex: 1; min-width: 220px; }

.home-shortcuts a {
    display: flex;
    align-items: center;
    padding: 24px;
    background: var(--color-ink-50);
    border: 2px solid var(--color-ink-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-base);
    height: 100%;
}

.home-shortcuts a:hover {
    background: var(--color-surface);
    border-color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

.home-shortcuts a i {
    font-size: 36px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 18px;
}

.home-shortcuts p { margin: 0; color: var(--color-ink-700); font-size: 15px; font-weight: 600; }

.home-shortcuts p span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Notifications popover */
.client-alerts { list-style: none; padding: 0; margin: 0; min-width: 320px; }
.client-alerts li { border-bottom: 1px solid var(--color-ink-100); }

.client-alerts a {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.client-alerts a:hover { background: var(--color-ink-50); }
.client-alerts i { font-size: 18px; margin-right: 12px; }
.client-alerts .message { color: var(--color-ink-600); font-size: 13px; line-height: 1.5; }
.client-alerts .none { padding: 24px 16px; text-align: center; color: var(--color-ink-400); }

#main-body { background: #f5f6f8 !important; padding: 35px 0; min-height: 60vh; }

@media (max-width: 767px) {
    .top-nav { justify-content: center; }
    #home-banner { padding: 50px 0; }
    #home-banner h2 { font-size: 28px; }
    .home-shortcuts ul { flex-direction: column; }
    .home-shortcuts li { min-width: 100%; }
    .logo img { max-height: 50px; }
}

/* ============================================================
   FOOTER, BACK-TO-TOP, LOADER OVERLAY
   ============================================================ */
/* Flat dark ink block, same as the marketing site's footer —
   no gradient, no accent bar */
#footer {
    background: var(--color-ink-900) !important;
    border-top: none !important;
    padding: 50px 0 40px;
    margin-top: 80px;
    position: relative;
}

#footer p {
    color: var(--color-ink-300);
    text-align: center;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    color: var(--color-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--shadow-primary-md);
    transition: all var(--transition-base);
    z-index: 999;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

.back-to-top:hover {
    background: var(--gradient-primary-hover);
    box-shadow: none;
    color: var(--color-surface);
}

#fullpage-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base);
}

#fullpage-overlay.hidden { opacity: 0; pointer-events: none; }
#fullpage-overlay .outer-wrapper { text-align: center; }

#fullpage-overlay .inner-wrapper {
    background: var(--color-surface);
    padding: 40px 50px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    animation: fadeInScale 0.3s ease-out;
}

#fullpage-overlay img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(31, 59, 214, 0.3));
}

#fullpage-overlay .msg {
    display: block;
    color: var(--color-ink-700);
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
    letter-spacing: 0.3px;
}

@media (max-width: 768px) {
    #footer { padding: 40px 0 30px; margin-top: 50px; }
    #footer p { font-size: 13px; padding: 0 20px; }
    .back-to-top { width: 45px; height: 45px; bottom: 20px; right: 20px; font-size: 18px; }
    .modal-dialog { margin: 15px; }
    .modal-header, .modal-body, .modal-footer { padding: 20px; }
    .modal-footer { flex-direction: column; gap: 15px; }
    .modal-footer .loader { order: 2; margin-top: 10px; }
    .modal-footer .btn { width: 100%; }
    #fullpage-overlay .inner-wrapper { padding: 30px 35px; margin: 0 20px; }
}

/* ============================================================
   HOMEPAGE — ANNOUNCEMENTS & TWITTER FEED
   ============================================================ */
.news-section { margin: 30px 0; }

.news-section h2 {
    margin: 0 0 25px 0;
    padding: 0 0 15px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-ink-700);
    border-bottom: 3px solid transparent;
    position: relative;
}

.news-section h2::before {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 80px;
    height: 3px;
    background: var(--gradient-primary);
    box-shadow: 0 2px 8px rgba(31, 59, 214, 0.3);
}

.announcement-single {
    margin: 0 0 25px 0;
    padding: 0;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    overflow: hidden;
    border: 1px solid var(--color-ink-200);
}

.announcement-single:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.announcement-single h3 {
    margin: 0;
    padding: 20px 25px;
    background: linear-gradient(135deg, var(--color-ink-50) 0%, var(--color-surface) 100%);
    border-bottom: 2px solid var(--color-ink-100);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    position: relative;
}

.announcement-single h3::before {
    content: '\f0a1';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--color-primary);
    font-size: 20px;
}

.announcement-single h3 .label {
    background: var(--gradient-primary);
    color: var(--color-surface);
    padding: 6px 14px;
    border-radius: var(--radius-2xl);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-primary-sm);
    border: none;
}

.announcement-single h3 a {
    flex: 1;
    color: var(--color-ink-700);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-base);
    line-height: 1.4;
}

.announcement-single h3 a:hover { color: var(--color-primary); }

.announcement-single blockquote {
    margin: 0;
    padding: 25px 25px 20px 25px;
    border: none;
    background: var(--color-surface);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-ink-600);
}

.announcement-single blockquote p { margin: 0 0 15px 0; }
.announcement-single blockquote p:last-child { margin-bottom: 0; }

.announcement-single .label-warning {
    background: var(--color-warning);
    color: var(--color-surface);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color var(--transition-fast);
    box-shadow: none;
    border: none;
    margin-top: 10px;
}

.announcement-single .label-warning:hover {
    background: var(--color-warning-dark);
    box-shadow: none;
    color: var(--color-surface);
}

.announcement-single .fb-like {
    margin: 15px 25px 20px 25px;
    padding-top: 15px;
    border-top: 1px solid var(--color-ink-100);
}

#twitterFeedOutput {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-ink-200);
    padding: 30px;
    min-height: 200px;
}

#twitterFeedOutput .text-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

#twitterFeedOutput img { width: 48px; height: 48px; opacity: 0.6; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#twitterFeedOutput .text-center img { animation: spin 1s linear infinite; }

.no-announcements {
    background: var(--color-ink-50);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    border: 2px dashed var(--color-ink-300);
}

.no-announcements i { font-size: 48px; color: var(--color-ink-300); margin-bottom: 15px; }
.no-announcements p { margin: 0; color: var(--color-ink-500); font-size: 16px; }

@media (max-width: 767px) {
    .news-section h2 { font-size: 24px; margin-bottom: 20px; }
    .announcement-single h3 { padding: 15px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
    .announcement-single h3 a { font-size: 16px; }
    .announcement-single blockquote { padding: 20px; font-size: 14px; }
    #twitterFeedOutput { padding: 20px; }
}

/* ============================================================
   CLIENT DASHBOARD (clientareahome.tpl)
   ============================================================ */
.tiles { margin-bottom: 40px; }

.tile { margin-bottom: 20px; }

/* DOMIFYS BRAND — redesigned as flat cards with a solid left
   accent bar (using the widget's own .highlight.bg-color-X, so
   the colour is always correct regardless of tile order/count —
   the old version guessed colour from tile position via
   :nth-child, which broke if a tile was hidden or reordered).
   No gradients, no hover-lift, bigger bolder number. */
/* Grid, not flex: the template emits icon/stat/title/highlight
   as 4 separate sibling divs (no wrapper around stat+title), so
   grid-area placement lets the icon span both text rows without
   having to edit clientareahome.tpl's markup. */
.tile a {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    text-decoration: none;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 28px 26px;
    box-shadow: none;
    border: 1px solid var(--color-ink-100);
    position: relative;
    overflow: hidden;
}

.tile a:hover { border-color: var(--color-ink-300); }

.tile .highlight {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 6px;
}

.bg-color-blue { background: var(--color-primary); }
.bg-color-green { background: var(--color-success); }
.bg-color-red { background: var(--color-danger); }
.bg-color-gold { background: var(--color-gold); }

.tile .icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--color-surface);
    background: var(--color-ink-400);
    margin-bottom: 0;
}
.tile a:has(.highlight.bg-color-blue) .icon { background: var(--color-primary); }
.tile a:has(.highlight.bg-color-green) .icon { background: var(--color-success); }
.tile a:has(.highlight.bg-color-red) .icon { background: var(--color-danger); }
.tile a:has(.highlight.bg-color-gold) .icon { background: var(--color-gold); color: var(--color-ink-900); }

.tile .stat {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 32px;
    font-weight: 800;
    font-stretch: 110%;
    margin-bottom: 2px;
    color: var(--color-ink-900);
    line-height: 1;
}

.tile .title {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 13px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-ink-500);
    margin-bottom: 0;
}

.home-kb-search { position: relative; margin-bottom: 40px; }

.home-kb-search input {
    border-radius: var(--radius-pill);
    padding: 18px 60px 18px 25px;
    border: 2px solid var(--color-ink-200);
    font-size: 16px;
    transition: all var(--transition-base);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.home-kb-search input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring), var(--shadow-sm);
    outline: none;
    background: var(--color-surface);
}

.home-kb-search i {
    position: absolute;
    right: 25px; top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-ink-400);
    pointer-events: none;
    transition: color var(--transition-base);
}

.home-kb-search input:focus + i { color: var(--color-primary); }

.client-home-panels { margin-top: 30px; }

.panel-body .input-group { display: block; }

.panel-body .input-group .form-control {
    width: 100%;
    margin-bottom: 15px;
    padding: 12px 18px;
}

.panel-body .input-group .input-group-btn { display: block; width: 100%; }

.panel-body .input-group .input-group-btn .btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 13px;
    margin-bottom: 8px;
}

.panel-body .input-group .input-group-btn .btn:last-child { margin-bottom: 0; }


@media (max-width: 768px) {
    .tile a { grid-template-columns: 44px 1fr; column-gap: 14px; padding: 20px 18px; }
    .tile .icon { width: 44px; height: 44px; font-size: 18px; }
    .tile .stat { font-size: 26px; }
    .tile .title { font-size: 12px; }
    .panel-heading, .panel-body, .panel-footer { padding: 15px 18px; }
    .list-group-item { padding: 14px 18px; }
}

/* ============================================================
   DOMAINS LIST (clientareadomains.tpl)
   ============================================================ */
.table-container {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: visible;
    margin-bottom: 25px;
}

.table-responsive { overflow-x: auto; overflow-y: visible; }
#tableDomainsList { margin-bottom: 0; }

#tableDomainsList thead {
    background: linear-gradient(135deg, var(--color-ink-50) 0%, var(--color-surface) 100%);
    border-bottom: 2px solid var(--color-ink-200);
}

#tableDomainsList thead th {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-ink-600);
    padding: 18px 15px;
    border-bottom: 2px solid var(--color-ink-200);
}

#tableDomainsList tbody tr {
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--color-ink-100);
    cursor: pointer;
    position: relative;
}

#tableDomainsList tbody tr:hover { background: var(--color-ink-75); z-index: 1; }

#tableDomainsList tbody td { padding: 16px 15px; vertical-align: middle; color: var(--color-ink-600); font-size: 14px; }
#tableDomainsList tbody td:last-child { position: relative; z-index: 10; }

#tableDomainsList tbody td a { color: var(--color-primary); font-weight: 600; text-decoration: none; transition: color var(--transition-fast); }
#tableDomainsList tbody td a:hover { color: var(--color-primary-alt); }

.domids { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary); }

.ssl-info img { width: 24px; height: 24px; transition: transform var(--transition-fast); }
.ssl-info img:hover { transform: scale(1.1); }

.btn-group-sm .btn {
    border-radius: var(--radius-sm);
    font-size: 12px;
    padding: 8px 14px;
    transition: all var(--transition-fast);
    background: var(--color-surface);
    border: 1px solid var(--color-ink-200);
    color: var(--color-ink-600);
}

.btn-group-sm .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    background: var(--color-ink-75);
    border-color: var(--color-ink-300);
}

.btn-group-sm .btn i { color: var(--color-primary); }

.btn-group { display: flex !important; gap: 2px; position: relative; }
.btn-group.open { z-index: 10000; }
.dropdown-menu-right { right: 0; left: auto; }
.open > .dropdown-menu { display: block; z-index: 10001; }
.btn-group .badge { z-index: 1; }
.btn-group.open .dropdown-menu { display: block; }

#tableLoading { padding: 60px 20px; background: var(--color-surface); border-radius: var(--radius-lg); }
#tableLoading i { font-size: 32px; color: var(--color-primary); margin-bottom: 15px; }
#tableLoading p { color: var(--color-ink-500); font-size: 16px; margin: 0; }

.margin-bottom { margin-bottom: 20px; }

.btn.btn-default.btn-sm.dropdown-toggle {
    background: var(--gradient-primary);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-weight: 600;
    font-size: 12px;
    box-shadow: none;
    transition: all var(--transition-base);
}

.btn.btn-default.btn-sm.dropdown-toggle:hover {
    background: var(--gradient-primary-hover);
    transform: none;
    box-shadow: none;
}

.btn.btn-default.btn-sm.dropdown-toggle .glyphicon { margin-right: 8px; }

@media (max-width: 768px) {
    #tableDomainsList { font-size: 12px; }
    #tableDomainsList thead th { padding: 12px 10px; font-size: 11px; }
    #tableDomainsList tbody td { padding: 12px 10px; }
    .btn-group { width: 50px !important; }
}

/* ============================================================
   ADD FUNDS (clientareaaddfunds.tpl)
   ============================================================ */
.addfunds-container { max-width: 900px; margin: 30px auto; }

.addfunds-info-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-ink-200);
    overflow: hidden;
    margin-bottom: 30px;
    transition: all var(--transition-base);
}

.addfunds-info-card:hover { box-shadow: var(--shadow-lg); }
.addfunds-info-card .table { margin: 0; background: transparent; }

.addfunds-info-card .table tbody tr { border-bottom: 1px solid var(--color-ink-100); transition: background var(--transition-fast); }
.addfunds-info-card .table tbody tr:last-child { border-bottom: none; }
.addfunds-info-card .table tbody tr:hover { background: var(--color-ink-50); }
.addfunds-info-card .table tbody td { padding: 18px 25px; vertical-align: middle; border: none; }

.addfunds-info-card .table tbody td:first-child {
    width: 45%;
    font-weight: 600;
    color: var(--color-ink-600);
    text-align: right;
    background: linear-gradient(135deg, var(--color-ink-50) 0%, var(--color-surface) 100%);
}

.addfunds-info-card .table tbody td:last-child {
    color: var(--color-ink-700);
    font-weight: 700;
    font-size: 16px;
    background: linear-gradient(90deg, rgba(31, 59, 214, 0.05) 0%, transparent 100%);
}

.addfunds-info-card .table tbody td:first-child::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
}

.addfunds-form-panel {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-ink-200);
    overflow: hidden;
    transition: all var(--transition-base);
}

.addfunds-form-panel:hover { box-shadow: var(--shadow-primary-md); border-color: var(--color-primary); }

.addfunds-form-body {
    padding: 40px 35px;
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-ink-50) 100%);
}

.addfunds-form-body fieldset { border: none; margin: 0; padding: 0; }
.addfunds-form-body .form-group { margin-bottom: 25px; position: relative; }
.addfunds-form-body .form-group:last-child { margin-bottom: 0; }

.addfunds-form-body .control-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink-700);
    letter-spacing: 0.3px;
}

.addfunds-form-body .control-label::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
    margin-left: 10px;
    vertical-align: middle;
}

.addfunds-form-body .form-control {
    height: 50px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--radius-lg);
    color: var(--color-ink-700);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.addfunds-form-body .form-control:hover { border-color: var(--color-ink-300); }

.addfunds-form-body input[name="amount"] {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    letter-spacing: 0.5px;
}

.addfunds-form-body input[name="amount"]::placeholder { color: var(--color-ink-300); font-weight: 400; }

.addfunds-form-body select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%231f3bd6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 50px;
}

.addfunds-form-body .btn-primary {
    height: 56px;
    padding: 0 35px;
    font-size: 16px;
    letter-spacing: 0.4px;
    border-radius: var(--radius-pill);
    box-shadow: none;
}

.addfunds-form-body .btn-primary:hover {
    box-shadow: none;
    transform: none;
}

.addfunds-form-body .btn-primary:active { transform: none; }

.addfunds-form-footer {
    padding: 20px 35px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-top: 2px solid #fbbf24;
    font-size: 13px;
    font-weight: 500;
    color: #78350f;
    text-align: center;
    line-height: 1.6;
}

.addfunds-form-footer::before {
    content: '\f06a';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
    color: var(--color-warning-alt);
    font-size: 14px;
}


@media (max-width: 767px) {
    .addfunds-container { margin: 20px 0; }
    .addfunds-info-card .table tbody td { padding: 15px 20px; font-size: 14px; }
    .addfunds-info-card .table tbody td:first-child { width: 50%; }
    .addfunds-form-body { padding: 30px 25px; }
    .addfunds-form-body input[name="amount"] { font-size: 18px; }
    .addfunds-form-body .btn-primary { height: 50px; font-size: 14px; }
    .addfunds-form-footer { padding: 18px 25px; font-size: 12px; }
}

/* ============================================================
   DOMAIN ADDONS (clientareadomainaddons.tpl)
   ============================================================ */
.addon-container { max-width: 700px; margin: 0 auto; padding: 20px; }

.addon-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 40px;
    margin-bottom: 30px;
    transition: all var(--transition-base);
}

.addon-card:hover { box-shadow: var(--shadow-lg); }
.addon-header { text-align: center; margin-bottom: 30px; }

.addon-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-ink-700);
    margin-bottom: 15px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.addon-domain-info {
    background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%);
    border-left: 4px solid var(--color-info);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 30px;
    color: var(--color-info-darker);
    font-size: 15px;
    text-align: center;
    font-weight: 500;
}

.addon-domain-info strong { color: var(--color-info-darker); font-weight: 700; }

.addon-description {
    text-align: center;
    color: var(--color-ink-600);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 35px;
    padding: 0 20px;
}

.addon-action { text-align: center; margin-bottom: 25px; }

.addon-action .btn {
    border-radius: var(--radius-pill);
    font-size: 14px;
    padding: 16px 40px;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.addon-action .btn:hover { transform: none; box-shadow: none; }
.addon-action .btn:active { transform: none; }
.addon-action .btn-success::before { content: "\2713"; font-size: 18px; font-weight: 700; }
.addon-action .btn-danger::before { content: "\26A0"; font-size: 18px; }

.addon-back-link { text-align: center; margin-top: 30px; }

.addon-back-link .btn {
    border-radius: var(--radius-pill);
    font-size: 12px;
    padding: 12px 30px;
    border: 2px solid var(--color-ink-200);
    background: var(--color-surface);
    color: var(--color-ink-600);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.addon-back-link .btn:hover {
    background: var(--color-ink-75);
    border-color: var(--color-ink-300);
    color: var(--color-ink-700);
    transform: none;
}

.addon-back-link .btn::before { content: "\2190"; font-size: 16px; font-weight: 700; }

.addon-alert {
    border-radius: var(--radius-lg);
    border: none;
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 25px;
    text-align: center;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.addon-alert-success {
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
    color: var(--color-success-darker);
    border-left: 4px solid var(--color-success);
}

.addon-alert-success::before { content: "\2713"; font-size: 20px; font-weight: 700; color: var(--color-success); }

.addon-alert-error {
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    color: var(--color-danger-darker);
    border-left: 4px solid var(--color-danger);
}

.addon-alert-error::before { content: "\2715"; font-size: 20px; font-weight: 700; color: var(--color-danger); }

.addon-confirmation {
    text-align: center;
    color: var(--color-ink-600);
    font-size: 18px;
    line-height: 1.6;
    margin: 30px 0;
    padding: 30px;
    background: var(--color-ink-75);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-ink-300);
}

@media (max-width: 768px) {
    .addon-container { padding: 15px; }
    .addon-card { padding: 30px 20px; }
    .addon-header h2 { font-size: 24px; }
    .addon-description { font-size: 15px; padding: 0 10px; }
    .addon-action .btn { padding: 14px 30px; font-size: 13px; width: 100%; }
    .addon-back-link .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   DOMAIN NAMESERVER REGISTRATION (clientareadomainregisterns.tpl)
   ============================================================ */
.ns-container { max-width: 900px; margin: 0 auto; padding: 20px; }
.ns-header { text-align: center; margin-bottom: 30px; }

.ns-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-ink-700);
    margin-bottom: 20px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ns-info-alert {
    background: linear-gradient(135deg, #ebf8ff 0%, #bee3f8 100%);
    border-left: 4px solid var(--color-info);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 30px;
    color: var(--color-info-darker);
    font-size: 14px;
    line-height: 1.6;
}

.ns-result-alert {
    background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 25px;
    color: var(--color-warning-dark);
    font-size: 14px;
    text-align: center;
}

.ns-form-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: 35px;
    margin-bottom: 25px;
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.ns-form-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-ink-200); }

.ns-form-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-ink-700);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-ink-200);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ns-form-card h4::before { content: ""; width: 4px; height: 24px; border-radius: 2px; }
.ns-form-card:nth-child(2) h4::before { background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%); }
.ns-form-card:nth-child(3) h4::before { background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%); }
.ns-form-card:nth-child(4) h4::before { background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%); }

.ns-container .form-group { margin-bottom: 20px; }

.ns-container .form-group label {
    font-weight: 600;
    color: var(--color-ink-600);
    margin-bottom: 8px;
    font-size: 14px;
    display: block;
}

.ns-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.ns-input-group label { min-width: 160px; margin-bottom: 0; }
.ns-input-group .form-control { flex: 1; }
.ns-input-group .domain-suffix { color: var(--color-ink-500); font-weight: 500; font-size: 15px; white-space: nowrap; }

.ns-submit-wrapper { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-ink-200); }

.ns-submit-wrapper .btn {
    font-size: 13px;
    padding: 14px 40px;
    box-shadow: none;
}

.ns-submit-wrapper .btn:hover { box-shadow: none; }

.ns-form-card:nth-child(2) .btn-primary { background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%); color: var(--color-surface); }
.ns-form-card:nth-child(2) .btn-primary:hover { background: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success-darker) 100%); }
.ns-form-card:nth-child(3) .btn-primary { background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%); color: var(--color-surface); }
.ns-form-card:nth-child(3) .btn-primary:hover { background: linear-gradient(135deg, var(--color-info-dark) 0%, var(--color-info-darker) 100%); }
.ns-form-card:nth-child(4) .btn-primary { background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%); color: var(--color-surface); }
.ns-form-card:nth-child(4) .btn-primary:hover { background: linear-gradient(135deg, var(--color-danger-dark) 0%, var(--color-danger-darker) 100%); }

@media (max-width: 768px) {
    .ns-container { padding: 15px; }
    .ns-form-card { padding: 25px 20px; }
    .ns-header h3 { font-size: 24px; }
    .ns-form-card h4 { font-size: 18px; }
    .ns-input-group { flex-direction: column; align-items: stretch; gap: 8px; }
    .ns-input-group label { min-width: auto; }
    .ns-input-group .domain-suffix { text-align: left; padding-left: 5px; }
    .ns-submit-wrapper .btn { width: 100%; padding: 14px 20px; }
}

/* ============================================================
   SOCIALBEE MARKETPLACE ADDON (store/socialbee/index.tpl)
   Kept as its own scoped, self-contained landing page —
   deliberately not merged into the brand palette above since
   it mirrors the SocialBee product's own yellow branding.
   Moved out of the inline <style> block only; content unchanged.
   ============================================================ */
.social-bee {
    --sb-max-width: 1248px;
    --sb-yellow: #f3c500;
    background: #fff;
}

section#main-body:has(.social-bee) { padding: 0; }

.social-bee h2, .social-bee p, .social-bee span { line-height: 1.5; }
.social-bee ul { line-height: 2; list-style-position: outside; }

.social-bee button {
    cursor: pointer;
    transition: all 0.35s;
    box-shadow: none !important;
    outline: none !important;
}

.social-bee button:hover { opacity: 0.75; }

.social-bee .lp-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90px;
}

.social-bee .hero {
    max-width: var(--sb-max-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 90px;
    margin-bottom: 78px;
    color: #212533;
}

.social-bee .hero .content-block__text { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.social-bee .hero h2 { font-size: 40px; font-weight: 700; text-align: center; width: 772px; }
.social-bee .hero .hero__description { font-size: 18px; text-align: center; max-width: 512px; }
.social-bee .hero img { display: block; max-width: 100%; }

.social-bee .planner {
    width: 100%;
    min-height: 470px;
    margin-top: 60px;
    margin-bottom: 90px;
    padding-bottom: 32px;
    background-color: #212533;
    display: flex;
    justify-content: center;
}

.social-bee .planner img { display: block; margin-top: -140px; height: auto; }

.social-bee .content-block {
    max-width: var(--sb-max-width);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.social-bee .content-block img { display: block; height: fit-content; max-width: 60%; }

.social-bee .content-block h2 {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 50px;
    position: relative;
    padding-top: 20px;
    color: #333333;
}

.social-bee .content-block h2::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 186px;
    height: 8px;
    background-color: var(--sb-yellow);
}

.social-bee .content-block .content-block__text { max-width: 400px; }
.social-bee .content-block .content-block__text p { margin-bottom: 36px; line-height: 2; }

.social-bee .content-block .content-block__text button {
    background-color: var(--sb-yellow);
    padding: 16px 56px;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
}

.social-bee .content-block.faq {
    padding-bottom: 120px;
    align-items: start;
    padding-top: 90px;
    border-top: 1px solid #ededed;
}

.social-bee .content-block.faq > div:first-child { flex-basis: 60%; }

.social-bee .action-buttons {
    height: 140px;
    margin-top: 90px;
    margin-bottom: 90px;
    background-color: #f5f5f5;
    width: 100%;
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
}

.social-bee .action-buttons button {
    font-size: 14px;
    border-radius: 50px;
    border: 2px solid transparent;
    padding: 12px 32px;
    max-height: fit-content;
    background-color: transparent;
}

.social-bee .action-buttons .active { background-color: #fff; border: 2px solid #e1e1e1; }

.social-bee .features.wrapper {
    max-width: var(--sb-max-width);
    margin: 0 auto;
    padding: 0px 16px 88px;
    border-bottom: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-bee .features.wrapper button {
    background-color: var(--sb-yellow);
    padding: 16px 56px;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
}

.social-bee .features {
    display: flex;
    row-gap: 90px;
    column-gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.social-bee .features .features__item { max-width: 380px; text-align: center; }
.social-bee .features .features__item img { height: 188px; width: 188px; }
.social-bee .features .features__item p { margin-top: 48px; line-height: 2; }

.social-bee .pricing__header {
    max-width: 540px;
    margin: 0 auto -24px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.social-bee .pricing__header h2 { font-size: 40px; font-weight: 800; max-width: 540px; color: #212533; }
.social-bee .pricing__header p { margin-top: 32px; font-size: 18px; }

@media (max-width: 1280px) {
    .social-bee .content-block { flex-direction: column; align-items: center; }
    .social-bee .content-block img { max-width: 100%; }
    .social-bee .content-block .content-block__text { max-width: 100%; }
    .social-bee .content-block.faq { align-items: start; gap: 0; }
    .social-bee .pricing-table { width: auto; min-width: 1024px; }
}

@media (max-width: 1024px) {
    .social-bee .hero { padding: 0 24px; }
    .social-bee .pricing__header { padding: 0 24px; }
    .social-bee .pricing-table { margin: 0 24px; }
    .social-bee .planner { min-height: auto; }
    .social-bee .planner img { display: block; max-width: 100%; height: fit-content; }
    .social-bee .action-buttons { gap: 16px; }
}

@media (max-width: 768px) {
    .social-bee .hero h2 { width: 100%; font-size: 28px; padding: 0 16px; box-sizing: border-box; }
    .social-bee .action-buttons { gap: 0; flex-wrap: wrap; }
    .social-bee .tab { max-height: fit-content; }
    .social-bee .tab input:checked ~ .tab__content { padding: 16px; }
    .social-bee .features .features__item p { margin-top: 24px; }
}

.social-bee .faq { padding-bottom: 90px; }

.social-bee .tab { position: relative; max-height: 48px; margin-bottom: 12px; }
.social-bee .tab:has(input:checked) { max-height: fit-content; }
.social-bee .tab input { position: absolute; opacity: 0; z-index: -1; }
.social-bee .tab__content { max-height: 0; overflow: hidden; }
.social-bee .tab input:checked ~ .tab__content { max-height: fit-content; padding: 16px 32px; }

.social-bee .accordion { overflow: hidden; }

.social-bee .tab__label,
.social-bee .tab__close {
    display: flex;
    background: var(--sb-yellow);
    cursor: pointer;
}

.social-bee .tab__label { justify-content: space-between; padding: 0.8rem 1rem; }
.social-bee .tab__label span { line-height: 1.5; }

.social-bee .tab__label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    margin-left: 10px;
    text-align: center;
    transform: rotate(90deg);
    transition: all 0.35s;
}

.social-bee .tab input:checked + .tab__label::after { transform: rotate(270deg); }
.social-bee .tab__content ul { list-style: inside; }
.social-bee .tab__content ul .faq__nested-list { padding-left: 32px; list-style: circle; }
.social-bee .tab__close { justify-content: flex-end; padding: 0.5rem 1rem; font-size: 0.75rem; }

.social-bee .pricing-table-container { width: 100%; max-width: 100%; overflow-x: auto; max-height: none; }
.social-bee .hidden { display: none !important; }
.social-bee .pricing-table { width: var(--sb-max-width); min-width: 1024px; margin: 0 auto; }

.social-bee .pricing-table__header-row { background-color: #f5f5f5; }
.social-bee .pricing-table__header-row.pricing-table__row:hover { background-color: #f5f5f5; }

.social-bee .pricing-table__row { display: flex; width: 100%; }
.social-bee .pricing-table__row:hover { background-color: #fdf9eb; }

.social-bee .pricing-table__cell {
    padding: 6px 12px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
    font-size: 14px;
}

.social-bee .pricing-table__header-cell { font-weight: bold; padding: 24px 15px; }
.social-bee .pricing-table__feature-name { flex: 1.5; justify-content: flex-start; text-align: left; font-weight: normal; }
.social-bee .pricing-table__feature-header { background-color: var(--sb-yellow); color: #333; flex: 1.5; }
.social-bee .pricing-table__icon.pricing-table__icon--check { color: green; font-weight: bold; }
.social-bee .pricing-table__icon.pricing-table__icon--cross { color: red; font-weight: bold; }

.social-bee .btn {
    background-color: var(--sb-yellow);
    color: #333;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    max-width: 120px;
    margin: 10px auto;
    box-shadow: none;
}

.social-bee .btn:hover { transform: none; box-shadow: none; }
.social-bee .btn.small-btn { font-weight: normal; font-size: 14px; padding: 8px 12px; }
.social-bee ~ p { padding-top: 16px; }