/* ============================================================
   LumoX — Modern Dashboard Theme for WHMCS 9
   ------------------------------------------------------------
   Design-system layer. Loaded after theme.min.css so every rule
   here overrides the stock Twenty-One / Bootstrap 4 styling.

   All visual decisions are driven by the CSS custom properties
   declared in :root below. The "LumoX Theme Settings" addon
   injects overrides for these variables at runtime, which is
   how the admin-panel options re-skin the whole client area
   without touching any files.

   Table of contents
   -----------------
    1. Design tokens (light scheme)
    2. Dark scheme tokens
    3. Base & typography
    4. Buttons
    5. Forms
    6. Cards & panels
    7. Tables & data lists
    8. Alerts, badges, progress
    9. Dropdowns, modals, popovers, tooltips
   10. Navigation (tabs, pills, pagination, breadcrumb)
   11. Header / top bar / main navbar
   12. Sidebar
   13. Client area dashboard (tiles & home cards)
   14. Homepage & domain search
   15. Auth pages (login / register / password reset)
   16. Support, knowledgebase & misc pages
   17. Footer
   18. Utilities & helpers
   ============================================================ */


/* ------------------------------------------------------------
   1. Design tokens (light scheme)
   ------------------------------------------------------------ */
:root {
    /* Brand palette — indigo */
    --lumox-primary:          #4f46e5;
    --lumox-primary-hover:    #4338ca;
    --lumox-primary-active:   #3730a3;
    --lumox-primary-dark:     #4338ca;
    --lumox-primary-soft:     #e0e7ff;
    --lumox-primary-softer:   #eef2ff;
    --lumox-primary-contrast: #ffffff;
    --lumox-primary-gradient: linear-gradient(145deg, #818cf8 0%, #6366f1 42%, #4f46e5 100%);

    --lumox-secondary:        #475569;
    --lumox-secondary-hover:  #334155;
    --lumox-secondary-soft:   #e2e8f0;

    /* Feedback colours */
    --lumox-success:       #16a34a;
    --lumox-success-hover: #15803d;
    --lumox-success-soft:  #dcfce7;
    --lumox-info:          #4f46e5;
    --lumox-info-hover:    #4338ca;
    --lumox-info-soft:     #e0e7ff;
    --lumox-warning:       #d97706;
    --lumox-warning-hover: #b45309;
    --lumox-warning-soft:  #ffedd5;
    --lumox-danger:        #dc2626;
    --lumox-danger-hover:  #b91c1c;
    --lumox-danger-soft:   #fee2e2;

    /* Accent tints (dashboard icons, category tiles) */
    --lumox-tint-blue:   #e0e7ff;
    --lumox-tint-green:  #dcfce7;
    --lumox-tint-red:    #fee2e2;
    --lumox-tint-orange: #ffedd5;
    --lumox-tint-purple: #ede9fe;
    --lumox-tint-teal:   #ccfbf1;
    --lumox-tint-pink:   #fce7f3;
    --lumox-tint-yellow: #fef9c3;

    /* Surfaces — soft indigo-gray */
    --lumox-body-bg:      #eef1fb;
    --lumox-surface:      #ffffff;
    --lumox-surface-2:    #f8fafc;
    --lumox-surface-3:    #e9edfb;
    --lumox-border:       #e2e8f0;
    --lumox-border-strong:#c7cdec;

    /* Text */
    --lumox-heading:    #16182f;
    --lumox-text:       #363a54;
    --lumox-text-muted: #6b7196;
    --lumox-link:       var(--lumox-primary);
    --lumox-link-hover: var(--lumox-primary-hover);

    /* Radii */
    --lumox-radius-sm: .5rem;    /*  8px — small controls  */
    --lumox-radius:    .75rem;   /* 12px — inputs, buttons */
    --lumox-radius-lg: 1.125rem; /* 18px — cards           */
    --lumox-radius-xl: 1.5rem;   /* 24px — hero surfaces   */
    --lumox-radius-pill: 50rem;

    /* Elevation */
    --lumox-shadow-sm: 0 1px 2px rgba(22, 24, 47, .05);
    --lumox-shadow:    0 10px 28px -14px rgba(79, 70, 229, .18);
    --lumox-shadow-lg: 0 22px 48px -18px rgba(79, 70, 229, .24);
    --lumox-focus-ring: 0 0 0 .2rem rgba(99, 102, 241, .28);

    /* Typography — slightly larger for readability */
    --lumox-font-sans: 'Inter', 'Vazirmatn', -apple-system, BlinkMacSystemFont,
                       'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --lumox-font-size: 1rem; /* 16px */
    --lumox-line-height: 1.65;

    /* Layout */
    --lumox-topbar-height: 4.25rem;
    --lumox-transition: .18s ease;
}

/* RTL locales get the Persian-first font stack */
html[dir="rtl"] body,
html[dir="rtl"] .tooltip,
html[dir="rtl"] .popover {
    font-family: 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}


/* ------------------------------------------------------------
   2. Dark scheme tokens
   ------------------------------------------------------------
   Activated by data-lumox-scheme="dark" on <html>. The toggle in
   the top bar persists the choice in localStorage (js/lumox.js).
   ------------------------------------------------------------ */
html[data-lumox-scheme="dark"] {
    --lumox-primary-soft:   #312a63;
    --lumox-primary-softer: #262151;

    --lumox-secondary-soft: #1e293b;

    --lumox-success-soft: #14532d;
    --lumox-info-soft:    #312a63;
    --lumox-warning-soft: #78350f;
    --lumox-danger-soft:  #7f1d1d;

    --lumox-tint-blue:   #2a2f5c;
    --lumox-tint-green:  #14532d;
    --lumox-tint-red:    #7f1d1d;
    --lumox-tint-orange: #78350f;
    --lumox-tint-purple: #2c2450;
    --lumox-tint-teal:   #115e59;
    --lumox-tint-pink:   #831843;
    --lumox-tint-yellow: #713f12;

    --lumox-body-bg:       #0c0e1c;
    --lumox-surface:       #15172c;
    --lumox-surface-2:     #1b1e39;
    --lumox-surface-3:     #222646;
    --lumox-border:        #2a2e50;
    --lumox-border-strong: #3a3f66;

    --lumox-heading:    #eef0fb;
    --lumox-text:       #c3c7e0;
    --lumox-text-muted: #8489ad;

    --lumox-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --lumox-shadow:    0 8px 28px -8px rgba(0, 0, 0, .5);
    --lumox-shadow-lg: 0 18px 48px -12px rgba(0, 0, 0, .65);

    color-scheme: dark;
}


/* Bootstrap colour utility remaps so stock templates follow the
   active scheme (several .tpl files use bg-white / bg-light). */
.bg-white {
    background-color: var(--lumox-surface) !important;
}

.bg-light {
    background-color: var(--lumox-surface-2) !important;
}

html[data-lumox-scheme="dark"] .text-dark {
    color: var(--lumox-heading) !important;
}

html[data-lumox-scheme="dark"] .close {
    color: var(--lumox-heading);
    text-shadow: none;
}


/* ------------------------------------------------------------
   3. Base & typography
   ------------------------------------------------------------ */
body {
    font-family: var(--lumox-font-sans);
    font-size: var(--lumox-font-size);
    line-height: var(--lumox-line-height);
    color: var(--lumox-text);
    background-color: var(--lumox-body-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.primary-bg-color {
    background-color: var(--lumox-body-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--lumox-heading);
    font-weight: 700;
    letter-spacing: -.01em;
}

a {
    color: var(--lumox-link);
    transition: color var(--lumox-transition);
}

a:hover {
    color: var(--lumox-link-hover);
    text-decoration: none;
}

hr {
    border-top-color: var(--lumox-border);
}

.text-muted {
    color: var(--lumox-text-muted) !important;
}

.text-body {
    color: var(--lumox-text) !important;
}

::selection {
    background: var(--lumox-primary);
    color: var(--lumox-primary-contrast);
}

section#main-body {
    padding: 1.75rem 0 2.5rem;
}

/* Scrollbar (WebKit + Firefox) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--lumox-border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: var(--lumox-border-strong);
    border-radius: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}


/* ------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------ */
.btn {
    font-weight: 600;
    border-radius: var(--lumox-radius);
    padding: .5rem 1.125rem;
    transition: color var(--lumox-transition),
                background-color var(--lumox-transition),
                border-color var(--lumox-transition),
                box-shadow var(--lumox-transition),
                transform var(--lumox-transition);
}

.btn:focus,
.btn.focus {
    box-shadow: var(--lumox-focus-ring);
}

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

.btn-primary,
a.btn.btn-primary {
    color: var(--lumox-primary-contrast);
    background-color: var(--lumox-primary);
    border-color: var(--lumox-primary);
    box-shadow: 0 6px 16px -6px var(--lumox-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--lumox-primary-contrast);
    background-color: var(--lumox-primary-hover);
    border-color: var(--lumox-primary-hover);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--lumox-primary-active);
    border-color: var(--lumox-primary-active);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--lumox-primary);
    border-color: var(--lumox-primary);
    opacity: .5;
}

.btn-secondary {
    color: #fff;
    background-color: var(--lumox-secondary);
    border-color: var(--lumox-secondary);
}

.btn-secondary:hover {
    background-color: var(--lumox-secondary-hover);
    border-color: var(--lumox-secondary-hover);
}

.btn-success {
    background-color: var(--lumox-success);
    border-color: var(--lumox-success);
}

.btn-success:hover {
    background-color: var(--lumox-success-hover);
    border-color: var(--lumox-success-hover);
}

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

.btn-info:hover {
    background-color: var(--lumox-info-hover);
    border-color: var(--lumox-info-hover);
}

.btn-warning {
    background-color: var(--lumox-warning);
    border-color: var(--lumox-warning);
    color: #fff;
}

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

.btn-danger {
    background-color: var(--lumox-danger);
    border-color: var(--lumox-danger);
}

.btn-danger:hover {
    background-color: var(--lumox-danger-hover);
    border-color: var(--lumox-danger-hover);
}

.btn-default,
button.btn-default {
    color: var(--lumox-text);
    background-color: var(--lumox-surface-2);
    border: 1px solid var(--lumox-border);
}

.btn-default:hover,
.btn-default:focus {
    color: var(--lumox-heading);
    background-color: var(--lumox-surface-3);
    border-color: var(--lumox-border-strong);
}

.btn-link {
    color: var(--lumox-link);
    font-weight: 600;
}

.btn-outline-primary {
    color: var(--lumox-primary);
    border-color: var(--lumox-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: var(--lumox-primary-contrast);
    background-color: var(--lumox-primary);
    border-color: var(--lumox-primary);
}

.btn-outline-secondary {
    color: var(--lumox-secondary);
    border-color: var(--lumox-border-strong);
}

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

.btn-sm,
.btn-group-sm > .btn {
    padding: .3rem .8rem;
    border-radius: var(--lumox-radius-sm);
}

.btn-xs {
    padding: .18rem .6rem;
    font-size: .78rem;
    border-radius: var(--lumox-radius-sm);
}

.btn-lg,
.btn-group-lg > .btn {
    padding: .7rem 1.6rem;
    border-radius: var(--lumox-radius);
}


/* ------------------------------------------------------------
   5. Forms
   ------------------------------------------------------------ */
.form-control,
.custom-select {
    color: var(--lumox-text);
    background-color: var(--lumox-surface);
    border: 1px solid var(--lumox-border-strong);
    border-radius: var(--lumox-radius);
    padding: .5rem .875rem;
    height: auto;
    transition: border-color var(--lumox-transition),
                box-shadow var(--lumox-transition),
                background-color var(--lumox-transition);
}

.form-control:focus,
.custom-select:focus {
    color: var(--lumox-heading);
    background-color: var(--lumox-surface);
    border-color: var(--lumox-primary);
    box-shadow: var(--lumox-focus-ring);
}

.form-control::placeholder {
    color: var(--lumox-text-muted);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--lumox-surface-3);
    opacity: .8;
}

select.form-control,
.custom-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238b9bb2' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .875rem center;
    background-size: 10px 6px;
    padding-right: 2.25rem;
}

html[dir="rtl"] select.form-control,
html[dir="rtl"] .custom-select {
    background-position: left .875rem center;
    padding-right: .875rem;
    padding-left: 2.25rem;
}

select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
    background-image: none;
    padding-right: .875rem;
}

label,
.col-form-label {
    color: var(--lumox-heading);
    font-weight: 600;
    font-size: .875rem;
}

.form-text {
    color: var(--lumox-text-muted);
}

.input-group-text {
    color: var(--lumox-text-muted);
    background-color: var(--lumox-surface-2);
    border: 1px solid var(--lumox-border-strong);
    border-radius: var(--lumox-radius);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--lumox-primary);
    border-color: var(--lumox-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--lumox-focus-ring);
}

.custom-control-label::before {
    background-color: var(--lumox-surface);
    border-color: var(--lumox-border-strong);
}

.custom-switch .custom-control-label::after {
    background-color: var(--lumox-border-strong);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
}


/* ------------------------------------------------------------
   6. Cards & panels
   ------------------------------------------------------------ */
.card {
    background-color: var(--lumox-surface);
    border: 1px solid var(--lumox-border);
    border-radius: var(--lumox-radius-lg);
    box-shadow: var(--lumox-shadow);
    overflow: hidden;
}

.card .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--lumox-border);
    padding: 1rem 1.25rem;
}

.card .card-header .card-title {
    color: var(--lumox-heading);
    font-size: 1rem;
    font-weight: 700;
}

.card .card-header .card-title > i {
    color: var(--lumox-primary);
}

.card .card-body {
    color: var(--lumox-text);
}

.card .card-footer {
    background-color: var(--lumox-surface-2);
    border-top: 1px solid var(--lumox-border);
}

/* Twenty-One coloured accent cards on client dashboard */
.card[class*="card-accent-"] {
    border-top-width: 1px;
}

.card.card-accent-blue   { border-top: 3px solid var(--lumox-primary); }
.card.card-accent-green  { border-top: 3px solid var(--lumox-success); }
.card.card-accent-red    { border-top: 3px solid var(--lumox-danger);  }
.card.card-accent-gold,
.card.card-accent-orange { border-top: 3px solid var(--lumox-warning); }
.card.card-accent-purple { border-top: 3px solid #6366f1; }
.card.card-accent-light-blue { border-top: 3px solid var(--lumox-info); }

.list-group-item {
    color: var(--lumox-text);
    background-color: transparent;
    border-color: var(--lumox-border);
    transition: background-color var(--lumox-transition), color var(--lumox-transition);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--lumox-heading);
    background-color: var(--lumox-surface-2);
}

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


/* ------------------------------------------------------------
   7. Tables & data lists (LumoX redesign)
   Soft card shell, calm header, no broken floats / overflow
   ------------------------------------------------------------ */

.table-container,
div.dataTables_wrapper {
    background: var(--lumox-surface);
    border: 1px solid var(--lumox-border);
    border-radius: 20px;
    box-shadow: var(--lumox-shadow);
    padding: 1rem 1.15rem 1.15rem;
    overflow: hidden;
}

/* Avoid double card when DataTables wraps a table inside .table-container */
.table-container > .dataTables_wrapper,
.table-container .dataTables_wrapper {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

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

.table-responsive {
    border-radius: 16px;
    border: 1px solid var(--lumox-border);
    background: var(--lumox-surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    margin-bottom: 0;
}

.table {
    width: 100% !important;
    color: var(--lumox-text);
    background-color: transparent;
    border-collapse: separate !important;
    border-spacing: 0;
    margin-bottom: 0;
}

.table thead th,
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
    color: var(--lumox-text-muted) !important;
    background: var(--lumox-surface-2) !important;
    font-weight: 700 !important;
    font-size: .75rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: start !important;
    vertical-align: middle !important;
    border: 0 !important;
    border-bottom: 1px solid var(--lumox-border) !important;
    padding: .9rem 1rem !important;
    white-space: nowrap;
}

.table thead th:first-child,
table.table-list thead th:first-child {
    border-top-left-radius: 12px;
}

.table thead th:last-child,
table.table-list thead th:last-child {
    border-top-right-radius: 12px;
}

html[dir="rtl"] .table thead th:first-child,
html[dir="rtl"] table.table-list thead th:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 12px;
}

html[dir="rtl"] .table thead th:last-child,
html[dir="rtl"] table.table-list thead th:last-child {
    border-top-right-radius: 0;
    border-top-left-radius: 12px;
}

.table td,
table.table-list tbody td,
.dataTables_wrapper table.table-list tbody td {
    color: var(--lumox-text);
    background: transparent;
    vertical-align: middle !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--lumox-border) !important;
    padding: 1rem !important;
    font-size: .95rem;
}

.table tbody tr:last-child td,
table.table-list tbody tr:last-child td {
    border-bottom: 0 !important;
}

.table-striped tbody tr:nth-of-type(odd),
table.table-list tbody tr:nth-of-type(odd) {
    background-color: rgba(246, 249, 253, .65);
}

html[data-lumox-scheme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-lumox-scheme="dark"] table.table-list tbody tr:nth-of-type(odd) {
    background-color: rgba(27, 39, 69, .55);
}

.table-hover tbody tr:hover,
table.table-list tbody tr:hover,
.dataTables_wrapper table.table-list tbody tr:hover {
    color: var(--lumox-heading);
    background-color: var(--lumox-primary-softer) !important;
}

.table tbody tr[onclick],
table.table-list tbody tr[onclick] {
    cursor: pointer;
}

.table .thead-dark th {
    background-color: var(--lumox-heading) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Status / invoice row tints — soft, don’t break layout */
.table tr.unpaid td,
table.table-list tr.unpaid td {
    background-color: var(--lumox-danger-soft) !important;
}

.table tr.paid td,
table.table-list tr.paid td {
    background-color: var(--lumox-success-soft) !important;
}

.table tr.cancelled td,
.table tr.refunded td,
table.table-list tr.cancelled td,
table.table-list tr.refunded td {
    background-color: var(--lumox-surface-2) !important;
    color: var(--lumox-text-muted);
}

/* DataTables shell overrides (beat theme.css greys) */
.dataTables_wrapper table.table-list {
    margin: .75rem 0 0 !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc,
.dataTables_wrapper table.table-list thead th.sorting {
    background-image: none !important;
    position: relative;
}

.dataTables_wrapper table.table-list thead th.sorting:after,
.dataTables_wrapper table.table-list thead th.sorting_asc:after,
.dataTables_wrapper table.table-list thead th.sorting_desc:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-inline-start: .4rem;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .45;
}

.dataTables_wrapper table.table-list thead th.sorting:after {
    border-top: 5px solid var(--lumox-text-muted);
}

.dataTables_wrapper table.table-list thead th.sorting_asc:after {
    border-bottom: 5px solid var(--lumox-primary);
    opacity: 1;
}

.dataTables_wrapper table.table-list thead th.sorting_desc:after {
    border-top: 5px solid var(--lumox-primary);
    opacity: 1;
}

.dataTables_wrapper .listtable {
    clear: both;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    float: none !important;
    padding: 0;
    margin: 0;
    color: var(--lumox-text-muted);
    font-size: .875rem;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 600;
    color: var(--lumox-text-muted);
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select,
.dataTables_wrapper .dataTables_filter label .form-control {
    background: var(--lumox-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--lumox-border-strong) !important;
    border-radius: 12px !important;
    color: var(--lumox-heading) !important;
    height: 42px !important;
    padding: .45rem .9rem .45rem .9rem !important;
    box-shadow: none !important;
    font-size: .9rem !important;
    min-width: 180px;
}

div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    border-color: var(--lumox-primary) !important;
    box-shadow: var(--lumox-focus-ring) !important;
    outline: 0;
}

/* Toolbar: length + search on one row */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: .35rem;
}

.dataTables_wrapper .dataTables_filter {
    float: right !important;
}

html[dir="rtl"] .dataTables_wrapper .dataTables_filter {
    float: left !important;
}

.dataTables_wrapper .dataTables_info {
    display: inline-block;
    padding-top: .85rem !important;
    color: var(--lumox-text-muted);
}

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    padding-top: .65rem !important;
}

html[dir="rtl"] .dataTables_wrapper .dataTables_paginate {
    float: left !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .pagination .page-link,
.pagination > li > a,
.pagination > li > span {
    color: var(--lumox-text) !important;
    background: var(--lumox-surface-2) !important;
    border: 1px solid var(--lumox-border) !important;
    border-radius: 10px !important;
    margin: 0 .2rem;
    min-width: 36px;
    height: 36px;
    padding: .4rem .7rem !important;
    line-height: 1.2 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover,
.page-item.active .page-link {
    background: var(--lumox-primary) !important;
    border-color: var(--lumox-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -8px var(--lumox-primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.pagination > li > a:hover,
.page-link:hover {
    background: var(--lumox-primary-softer) !important;
    border-color: var(--lumox-primary-soft) !important;
    color: var(--lumox-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.page-item.disabled .page-link {
    opacity: .45;
    pointer-events: none;
}

/* DataTables Responsive child rows */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--lumox-primary) !important;
    border: 0 !important;
    box-shadow: none !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
}

table.dataTable > tbody > tr.child span.dtr-title {
    color: var(--lumox-text-muted);
    font-weight: 700;
}

/* Labels inside tables */
.table .label,
.table .badge,
table.table-list .label,
table.table-list .badge {
    border-radius: 999px;
    font-weight: 700;
    font-size: .72rem;
    padding: .35em .7em;
    vertical-align: middle;
}

/* Mobile toolbar stack — avoid theme.css double-margin bugs */
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        display: block;
        width: 100%;
        text-align: start;
        margin: 0 0 .65rem;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        display: flex;
        width: 100%;
    }

    div.dataTables_wrapper div.dataTables_filter input,
    .dataTables_wrapper .dataTables_filter label .form-control,
    div.dataTables_wrapper div.dataTables_length select {
        width: 100% !important;
        min-width: 0;
        flex: 1;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 0 !important;
    }
}


/* ------------------------------------------------------------
   8. Alerts, badges, progress
   ------------------------------------------------------------ */
.alert {
    border: 0;
    border-radius: var(--lumox-radius);
    padding: .875rem 1.125rem;
}

.alert-success {
    color: var(--lumox-success-hover);
    background-color: var(--lumox-success-soft);
}

.alert-info {
    color: var(--lumox-info-hover);
    background-color: var(--lumox-info-soft);
}

.alert-warning {
    color: var(--lumox-warning-hover);
    background-color: var(--lumox-warning-soft);
}

.alert-danger {
    color: var(--lumox-danger-hover);
    background-color: var(--lumox-danger-soft);
}

.alert .alert-link {
    color: inherit;
    text-decoration: underline;
}

.badge {
    font-weight: 600;
    border-radius: var(--lumox-radius-pill);
    padding: .35em .7em;
}

.badge-primary { background-color: var(--lumox-primary); }
.badge-success { background-color: var(--lumox-success); }
.badge-info    { background-color: var(--lumox-info); }
.badge-warning { background-color: var(--lumox-warning); color: #fff; }
.badge-danger  { background-color: var(--lumox-danger); }
.badge-secondary { background-color: var(--lumox-secondary); }

.progress {
    height: .625rem;
    background-color: var(--lumox-surface-3);
    border-radius: var(--lumox-radius-pill);
    box-shadow: none;
}

.progress-bar {
    background-color: var(--lumox-primary);
    border-radius: var(--lumox-radius-pill);
}


/* ------------------------------------------------------------
   9. Dropdowns, modals, popovers, tooltips
   ------------------------------------------------------------ */
.dropdown-menu {
    background-color: var(--lumox-surface);
    border: 1px solid var(--lumox-border);
    border-radius: var(--lumox-radius);
    box-shadow: var(--lumox-shadow-lg);
    padding: .5rem;
}

.dropdown-item {
    color: var(--lumox-text);
    border-radius: var(--lumox-radius-sm);
    padding: .45rem .75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--lumox-heading);
    background-color: var(--lumox-surface-2);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--lumox-primary);
    background-color: var(--lumox-primary-soft);
}

.dropdown-divider {
    border-top-color: var(--lumox-border);
}

.modal-content {
    background-color: var(--lumox-surface);
    border: 0;
    border-radius: var(--lumox-radius-lg);
    box-shadow: var(--lumox-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--lumox-border);
}

.modal-header .close {
    color: var(--lumox-text-muted);
    text-shadow: none;
}

.modal-backdrop.show {
    opacity: .55;
}

.popover {
    background-color: var(--lumox-surface);
    border: 1px solid var(--lumox-border);
    border-radius: var(--lumox-radius);
    box-shadow: var(--lumox-shadow-lg);
}

.popover-header {
    background-color: var(--lumox-surface-2);
    border-bottom-color: var(--lumox-border);
    color: var(--lumox-heading);
    border-top-left-radius: calc(var(--lumox-radius) - 1px);
    border-top-right-radius: calc(var(--lumox-radius) - 1px);
}

.popover-body {
    color: var(--lumox-text);
}

.tooltip-inner {
    background-color: var(--lumox-heading);
    border-radius: var(--lumox-radius-sm);
    font-family: var(--lumox-font-sans);
}


/* ------------------------------------------------------------
   10. Navigation (tabs, pills, pagination, breadcrumb)
   ------------------------------------------------------------ */
.nav-tabs {
    border-bottom-color: var(--lumox-border);
}

.nav-tabs .nav-link {
    color: var(--lumox-text-muted);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--lumox-heading);
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--lumox-primary);
    background-color: transparent;
    border-bottom: 2px solid var(--lumox-primary);
}

.nav-pills .nav-link {
    color: var(--lumox-text);
    font-weight: 600;
    border-radius: var(--lumox-radius);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--lumox-primary);
    background-color: var(--lumox-primary-soft);
}

.page-link {
    color: var(--lumox-text);
    background-color: var(--lumox-surface);
    border-color: var(--lumox-border);
    font-weight: 600;
    min-width: 2.375rem;
    text-align: center;
}

.page-link:hover {
    color: var(--lumox-primary);
    background-color: var(--lumox-primary-softer);
    border-color: var(--lumox-border);
}

.page-item.active .page-link {
    background-color: var(--lumox-primary);
    border-color: var(--lumox-primary);
}

.page-item.disabled .page-link {
    color: var(--lumox-text-muted);
    background-color: var(--lumox-surface-2);
    border-color: var(--lumox-border);
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--lumox-radius);
    border-bottom-left-radius: var(--lumox-radius);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--lumox-radius);
    border-bottom-right-radius: var(--lumox-radius);
}

/* Breadcrumb strip under the header */
.master-breadcrumb {
    background-color: transparent;
    padding: 1rem 0 0;
}

.master-breadcrumb .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: .8125rem;
}

.master-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--lumox-text-muted);
}

.master-breadcrumb .breadcrumb .breadcrumb-item a:hover {
    color: var(--lumox-primary);
}

.master-breadcrumb .breadcrumb .breadcrumb-item.active {
    color: var(--lumox-heading);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--lumox-text-muted);
}


/* ------------------------------------------------------------
   11. Header / top bar / main navbar
   ------------------------------------------------------------ */
header.header {
    background-color: var(--lumox-surface);
    border-bottom: 1px solid var(--lumox-border);
    box-shadow: var(--lumox-shadow-sm);
}

/* — logged-in strip — */
header.header .topbar {
    background-color: var(--lumox-surface-2);
    border-bottom: 1px solid var(--lumox-border);
    padding: .375rem 0;
}

header.header .topbar .btn {
    color: var(--lumox-text);
    font-size: .8125rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: var(--lumox-radius-sm);
}

header.header .topbar .btn:hover {
    color: var(--lumox-primary);
    background-color: var(--lumox-primary-softer);
}

header.header .topbar .input-group-text {
    background: transparent;
    border: 0;
    color: var(--lumox-text-muted);
    font-size: .8125rem;
}

header.header .topbar .btn-active-client {
    color: var(--lumox-primary);
    background-color: var(--lumox-primary-soft);
    border-radius: var(--lumox-radius-pill);
}

header.header .topbar .btn-return-to-admin {
    color: #fff;
    background-color: var(--lumox-danger);
    border-radius: var(--lumox-radius-sm);
}

header.header .topbar .btn-return-to-admin:hover {
    background-color: var(--lumox-danger-hover);
    color: #fff;
}

/* — brand bar — */
header.header .navbar-brand {
    color: var(--lumox-heading);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

header.header .navbar-brand:hover {
    color: var(--lumox-primary);
}

header.header .logo-img {
    max-height: 44px;
}

/* pill search in the brand bar */
header.header .input-group.search .form-control,
header.header .input-group.search .btn {
    background-color: var(--lumox-surface-2);
    border: 1px solid transparent;
    box-shadow: none;
}

header.header .input-group.search .btn {
    color: var(--lumox-text-muted);
    border-radius: var(--lumox-radius-pill) 0 0 var(--lumox-radius-pill);
    padding-left: 1rem;
}

header.header .input-group.search .form-control {
    border-radius: 0 var(--lumox-radius-pill) var(--lumox-radius-pill) 0;
    min-width: 260px;
    color: var(--lumox-text);
}

html[dir="rtl"] header.header .input-group.search .btn {
    border-radius: 0 var(--lumox-radius-pill) var(--lumox-radius-pill) 0;
    padding-left: .75rem;
    padding-right: 1rem;
}

html[dir="rtl"] header.header .input-group.search .form-control {
    border-radius: var(--lumox-radius-pill) 0 0 var(--lumox-radius-pill);
}

header.header .input-group.search .form-control:focus {
    background-color: var(--lumox-surface);
    border-color: var(--lumox-primary);
    box-shadow: var(--lumox-focus-ring);
}

header.header .toolbar .nav-link {
    color: var(--lumox-text);
    border-radius: var(--lumox-radius);
    padding: .5rem .75rem;
}

header.header .toolbar .nav-link:hover {
    color: var(--lumox-primary);
    background-color: var(--lumox-primary-softer);
}

header.header .toolbar .cart-btn .badge {
    background-color: var(--lumox-primary);
    color: var(--lumox-primary-contrast);
    position: relative;
    top: -8px;
    left: -6px;
    font-size: .65rem;
}

html[dir="rtl"] header.header .toolbar .cart-btn .badge {
    left: auto;
    right: -6px;
}

/* — main navigation — */
.main-navbar-wrapper {
    background-color: var(--lumox-surface);
    padding-top: 0;
    padding-bottom: 0;
}

.main-navbar-wrapper #nav > li > a,
.main-navbar-wrapper .navbar-nav > li > a {
    color: var(--lumox-text);
    font-weight: 600;
    font-size: .9rem;
    display: inline-block;
    padding: .875rem .375rem;
    border-bottom: 2px solid transparent;
    transition: color var(--lumox-transition), border-color var(--lumox-transition);
}

.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li.active > a {
    color: var(--lumox-primary);
    border-bottom-color: var(--lumox-primary);
    text-decoration: none;
}

.main-navbar-wrapper .navbar-nav .dropdown-menu {
    margin-top: 0;
}

/* client alerts popover list */
.popover .client-alerts li a {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    padding: .625rem .75rem;
    color: var(--lumox-text);
    border-radius: var(--lumox-radius-sm);
}

.popover .client-alerts li a:hover {
    background-color: var(--lumox-surface-2);
}

.popover .client-alerts li.none {
    padding: .75rem;
    color: var(--lumox-text-muted);
}


/* ------------------------------------------------------------
   12. Sidebar
   ------------------------------------------------------------ */
.sidebar .card-sidebar {
    border-radius: var(--lumox-radius-lg);
}

.sidebar .card-sidebar .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--lumox-border);
    padding: .875rem 1.125rem;
}

.sidebar .card-sidebar .card-header .card-title {
    color: var(--lumox-heading);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sidebar .card-sidebar .card-header .card-title > i:first-child {
    color: var(--lumox-primary);
    margin-right: .25rem;
}

html[dir="rtl"] .sidebar .card-sidebar .card-header .card-title > i:first-child {
    margin-right: 0;
    margin-left: .25rem;
}

.sidebar .card-sidebar .card-minimise {
    color: var(--lumox-text-muted);
    cursor: pointer;
    transition: transform var(--lumox-transition);
}

.sidebar .list-group {
    padding: .5rem;
}

.sidebar .list-group-item {
    border: 0;
    border-radius: var(--lumox-radius) !important;
    padding: .55rem .875rem;
    margin-bottom: .125rem;
    font-weight: 500;
    background-color: transparent;
}

.sidebar .list-group-item:hover {
    background-color: var(--lumox-surface-2);
    color: var(--lumox-heading);
}

.sidebar .list-group-item.active {
    background-color: var(--lumox-primary-soft);
    color: var(--lumox-primary);
    font-weight: 600;
    box-shadow: none;
}

.sidebar .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.sidebar .sidebar-menu-item-icon-wrapper {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lumox-surface-3);
    border-radius: var(--lumox-radius-sm);
    color: var(--lumox-text-muted);
    font-size: .8125rem;
    transition: background-color var(--lumox-transition), color var(--lumox-transition);
}

.sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper {
    color: var(--lumox-primary);
}

.sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper {
    background-color: var(--lumox-primary);
    color: var(--lumox-primary-contrast);
}

.sidebar .sidebar-menu-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar .sidebar-menu-item-badge .badge,
.sidebar .card-title .badge {
    background-color: var(--lumox-primary-soft);
    color: var(--lumox-primary);
}


/* ------------------------------------------------------------
   13. Client area dashboard (tiles & home cards)
   ------------------------------------------------------------ */
.tiles .row {
    margin: 0 -.5rem;
}

.tiles .row > [class*="col-"] {
    padding: .5rem;
}

.tiles .tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem 1.25rem 1.125rem;
    background-color: var(--lumox-surface);
    border: 1px solid var(--lumox-border);
    border-radius: var(--lumox-radius-lg);
    box-shadow: var(--lumox-shadow);
    color: var(--lumox-text);
    overflow: hidden;
    transition: transform var(--lumox-transition), box-shadow var(--lumox-transition);
}

.tiles .tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--lumox-shadow-lg);
    text-decoration: none;
}

.tiles .tile i,
.tiles .tile:hover i {
    position: static;
    top: auto;
    right: auto;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: var(--lumox-radius);
    margin-bottom: .875rem;
    background-color: var(--lumox-tint-blue);
    color: var(--lumox-primary);
}

.tiles [class*="col-"]:nth-child(2) .tile i {
    background-color: var(--lumox-tint-green);
    color: var(--lumox-success);
}

.tiles [class*="col-"]:nth-child(3) .tile i {
    background-color: var(--lumox-tint-red);
    color: var(--lumox-danger);
}

.tiles [class*="col-"]:nth-child(4) .tile i {
    background-color: var(--lumox-tint-orange);
    color: var(--lumox-warning);
}

.tiles .tile,
.tiles .tile:hover {
    background-color: var(--lumox-surface);
    border-right: 1px solid var(--lumox-border);
}

.tiles .row > div:last-child .tile {
    border-right: 1px solid var(--lumox-border);
}

.tiles .tile .stat {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--lumox-heading);
    line-height: 1.2;
}

.tiles .tile .title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--lumox-text-muted);
}

/* replace the old bottom highlight strip with a soft edge glow */
.tiles .tile .highlight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 0;
}

.bg-color-blue       { background-color: var(--lumox-primary) !important; }
.bg-color-green      { background-color: var(--lumox-success) !important; }
.bg-color-red        { background-color: var(--lumox-danger) !important; }
.bg-color-gold,
.bg-color-orange     { background-color: var(--lumox-warning) !important; }
.bg-color-purple     { background-color: #6366f1 !important; }
.bg-color-light-blue { background-color: var(--lumox-info) !important; }

.lumox-dashboard-welcome .lumox-dashboard-title {
    font-size: 1.5rem;
    font-weight: 800;
}

.client-home-cards .card {
    margin-bottom: 1.25rem;
}

.client-home-cards .card .card-footer:empty {
    display: none;
}

/* Active Products/Services — full-width name, no ugly truncation */
div[menuitemname="Active Products/Services"] .list-group-item {
    padding: 1rem 1.15rem;
}

div[menuitemname="Active Products/Services"] .div-service-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    width: 100%;
}

div[menuitemname="Active Products/Services"] .div-service-status {
    flex: 0 0 auto;
}

div[menuitemname="Active Products/Services"] .div-service-status .label:not(.label-placeholder) {
    width: auto !important;
    min-width: 4.25rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
}

div[menuitemname="Active Products/Services"] .div-service-name {
    flex: 1 1 14rem;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

div[menuitemname="Active Products/Services"] .div-service-name > span {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

div[menuitemname="Active Products/Services"] .div-service-name .lumox-service-title {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--lumox-heading);
}

div[menuitemname="Active Products/Services"] .div-service-name .text-domain {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    color: var(--lumox-text-muted);
}

div[menuitemname="Active Products/Services"] .div-service-buttons {
    flex: 1 1 auto;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .4rem;
}

@media (max-width: 767.98px) {
    div[menuitemname="Active Products/Services"] .div-service-buttons {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}


/* ------------------------------------------------------------
   14. Homepage & domain search
   ------------------------------------------------------------ */
.home-shortcuts {
    background-color: transparent;
}

/* domain search hero (includes/domain-search.tpl) */
.home-domain-search {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 45%, #4f46e5 100%) !important;
    color: #fff;
}

.home-domain-search h2 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.home-domain-search .input-group-wrapper {
    max-width: 720px;
    margin: 1rem auto;
    background-color: var(--lumox-surface);
    border: 0;
    border-radius: var(--lumox-radius-pill);
    padding: .375rem;
    box-shadow: var(--lumox-shadow-lg);
}

.home-domain-search .input-group-wrapper .form-control {
    background-color: transparent;
    box-shadow: none;
    color: var(--lumox-text);
}

.home-domain-search .input-group-wrapper .btn {
    border-radius: var(--lumox-radius-pill) !important;
}

.home-domain-search .input-group .form-control {
    border: 0;
    box-shadow: var(--lumox-shadow-lg);
    border-radius: var(--lumox-radius-pill) 0 0 var(--lumox-radius-pill);
    padding: .875rem 1.5rem;
    font-size: 1rem;
}

html[dir="rtl"] .home-domain-search .input-group .form-control {
    border-radius: 0 var(--lumox-radius-pill) var(--lumox-radius-pill) 0;
}

.home-domain-search .input-group-append .btn {
    border: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.home-domain-search .input-group-append .btn:last-child {
    border-radius: 0 var(--lumox-radius-pill) var(--lumox-radius-pill) 0;
}

html[dir="rtl"] .home-domain-search .input-group-append .btn:last-child {
    border-radius: var(--lumox-radius-pill) 0 0 var(--lumox-radius-pill);
}

.home-domain-search .tld-logos {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    color: rgba(255, 255, 255, .9);
}

.home-domain-search .tld-logos img {
    max-height: 28px;
    display: block;
    margin: 0 auto .375rem;
    filter: brightness(0) invert(1);
}

.home-domain-search .btn-link {
    color: rgba(255, 255, 255, .85);
}

.home-domain-search .btn-link:hover {
    color: #fff;
}

/* section headings */
.lumox-section-heading {
    margin: 2.5rem 0 1.5rem;
}

.lumox-section-heading h2 {
    font-size: 1.5rem;
    font-weight: 800;
}

/* product group cards */
.lumox-product-group-card {
    transition: transform var(--lumox-transition), box-shadow var(--lumox-transition);
}

.lumox-product-group-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lumox-shadow-lg);
}

.lumox-group-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    border-radius: var(--lumox-radius);
    background-color: var(--lumox-tint-blue);
    color: var(--lumox-primary);
}

.lumox-group-icon-green {
    background-color: var(--lumox-tint-green);
    color: var(--lumox-success);
}

.lumox-group-icon-purple {
    background-color: var(--lumox-tint-purple);
    color: #6366f1;
}

/* homepage action tiles */
.action-icon-btns .lumox-action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    height: 100%;
    padding: 1.375rem 1rem;
    margin-bottom: 1rem;
    background-color: var(--lumox-surface);
    border: 1px solid var(--lumox-border);
    border-radius: var(--lumox-radius-lg);
    box-shadow: var(--lumox-shadow);
    color: var(--lumox-heading);
    font-weight: 600;
    font-size: .875rem;
    text-align: center;
    transition: transform var(--lumox-transition), box-shadow var(--lumox-transition);
}

.action-icon-btns .lumox-action-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--lumox-shadow-lg);
    text-decoration: none;
    color: var(--lumox-primary);
}

.action-icon-btns a .ico-container,
.action-icon-btns a:hover .ico-container {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 0 .625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: var(--lumox-radius);
    background-color: var(--lumox-tint-blue);
    color: var(--lumox-primary);
    transition: transform var(--lumox-transition);
}

.action-icon-btns a:hover .ico-container {
    transform: scale(1.08);
}

.action-icon-btns a .ico-container i,
.action-icon-btns a:hover .ico-container i {
    color: inherit;
    font-size: inherit;
}

.lumox-tint-blue-bg   { background-color: var(--lumox-tint-blue) !important;   color: var(--lumox-primary) !important; }
.lumox-tint-green-bg  { background-color: var(--lumox-tint-green) !important;  color: var(--lumox-success) !important; }
.lumox-tint-red-bg    { background-color: var(--lumox-tint-red) !important;    color: var(--lumox-danger) !important; }
.lumox-tint-orange-bg { background-color: var(--lumox-tint-orange) !important; color: var(--lumox-warning) !important; }
.lumox-tint-purple-bg { background-color: var(--lumox-tint-purple) !important; color: #6366f1 !important; }
.lumox-tint-teal-bg   { background-color: var(--lumox-tint-teal) !important;   color: #0d9488 !important; }
.lumox-tint-pink-bg   { background-color: var(--lumox-tint-pink) !important;   color: #db2777 !important; }
.lumox-tint-yellow-bg { background-color: var(--lumox-tint-yellow) !important; color: #b45309 !important; }


/* ------------------------------------------------------------
   15. Auth pages (login / register / password reset)
   ------------------------------------------------------------ */
.login-form .card,
.password-reset-container .card,
.mw-540.card,
form .card.mw-540 {
    border-radius: var(--lumox-radius-xl);
    box-shadow: var(--lumox-shadow-lg);
}

.login-form .card .h3,
.password-reset-container .card .h3 {
    font-weight: 800;
}

.login-form .input-group-merge .input-group-text {
    border-right: 0;
    background-color: transparent;
}

html[dir="rtl"] .login-form .input-group-merge .input-group-text {
    border-right: 0;
    border-left: 0;
}

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

html[dir="rtl"] .login-form .input-group-merge .form-control {
    border-left: 0;
    border-right: 0;
}

.btn-reveal-pw {
    border-left: 0 !important;
}

/* Login password/email merge fields only — do not affect cart/domain forms */
.login-form .input-group.input-group-merge {
    border-radius: var(--lumox-radius);
    overflow: hidden;
    border: 1px solid var(--lumox-border-strong);
    background: #fff;
}

.login-form .input-group.input-group-merge:focus-within {
    border-color: var(--lumox-primary);
    box-shadow: var(--lumox-focus-ring);
}

.login-form .input-group.input-group-merge .form-control,
.login-form .input-group.input-group-merge .input-group-text,
.login-form .input-group.input-group-merge .btn,
.login-form .input-group.input-group-merge .btn-reveal-pw {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
}

.login-form .input-group.input-group-merge .btn-reveal-pw {
    min-width: 2.75rem;
    color: var(--lumox-text-muted);
}

.login-form .input-group.input-group-merge .btn-reveal-pw:hover,
.login-form .input-group.input-group-merge .btn-reveal-pw:focus,
.login-form .input-group.input-group-merge .btn-reveal-pw:active {
    color: var(--lumox-primary) !important;
    background: #fff !important;
}

.providerLinkingFeedback {
    border-radius: var(--lumox-radius);
}

/* third-party sign-in buttons */
.provider-login-buttons .btn,
.linked-accounts .btn {
    border-radius: var(--lumox-radius);
}


/* ------------------------------------------------------------
   16. Support, knowledgebase & misc pages
   ------------------------------------------------------------ */
/* status labels (services, domains, invoices, tickets, quotes) */
.label {
    border-radius: var(--lumox-radius-pill);
    font-weight: 600;
    padding: .3em .8em;
    letter-spacing: .02em;
}

.label-default { background-color: var(--lumox-secondary); }
.label-success { background-color: var(--lumox-success); }
.label-info    { background-color: var(--lumox-info); }
.label-warning { background-color: var(--lumox-warning); }
.label-danger  { background-color: var(--lumox-danger); }

.status-active,
.status-open,
.status-completed,
.status-paid,
.status-accepted,
.status-delivered {
    background-color: var(--lumox-success);
}

.status-pending,
.status-pending-transfer,
.status-suspended,
.status-onhold,
.status-unpaid,
.status-payment-pending,
.status-pending-registration,
.status-redemption,
.status-grace {
    background-color: var(--lumox-warning);
}

.status-customer-reply,
.status-answered,
.status-inprogress {
    background-color: var(--lumox-info);
}

.status-fraud,
.status-terminated,
.status-cancelled,
.status-collections,
.status-lost,
.status-dead {
    background-color: var(--lumox-danger);
}

.status-expired,
.status-transferred-away,
.status-closed,
.status-refunded {
    background-color: var(--lumox-secondary);
}

/* ticket conversation */
.ticket-reply {
    border: 1px solid var(--lumox-border);
    border-radius: var(--lumox-radius-lg);
    overflow: hidden;
}

.ticket-reply .posted-by {
    background-color: var(--lumox-surface-2);
    border-bottom: 1px solid var(--lumox-border);
    padding: .75rem 1rem;
    color: var(--lumox-text-muted);
    font-size: .875rem;
}

.ticket-reply .posted-by .posted-by-name {
    color: var(--lumox-heading);
    font-weight: 700;
}

.ticket-reply.staff {
    border-color: var(--lumox-primary-soft);
}

.ticket-reply.staff .posted-by {
    background-color: var(--lumox-primary-softer);
    border-bottom-color: var(--lumox-primary-soft);
}

.ticket-reply .requestor-badge {
    border-radius: var(--lumox-radius-pill);
    font-weight: 600;
}

.ticket-reply .requestor-type-operator,
.ticket-reply .requestor-type-staff {
    background-color: var(--lumox-primary);
    color: var(--lumox-primary-contrast);
}

.ticket-reply .attachments {
    background-color: var(--lumox-surface-2);
    border-top: 1px solid var(--lumox-border);
}

/* knowledgebase */
.kb-category a {
    color: var(--lumox-heading);
}

.kb-category a:hover {
    color: var(--lumox-primary);
}

.kb-article-item {
    border-radius: var(--lumox-radius);
    transition: background-color var(--lumox-transition);
}

.kb-article-item:hover {
    background-color: var(--lumox-surface-2);
}

/* kb / announcement search hero */
.kb-search,
.announcement-search {
    border-radius: var(--lumox-radius-lg);
}

/* attachments dropzone */
.dropzone {
    border: 2px dashed var(--lumox-border-strong);
    border-radius: var(--lumox-radius);
    background-color: var(--lumox-surface-2);
}

/* Twenty-One "app-header" page intros */
.app-header {
    background-color: transparent;
}

/* generic well/panel leftovers */
.well {
    background-color: var(--lumox-surface-2);
    border: 1px solid var(--lumox-border);
    border-radius: var(--lumox-radius);
}

/* invoices list highlighting — handled in section 7 */

/* view invoice page */
.invoice-container {
    background-color: var(--lumox-surface);
    border-radius: var(--lumox-radius-lg);
    box-shadow: var(--lumox-shadow);
}

/* payment method logos & buttons */
.payment-btn-container .btn {
    border-radius: var(--lumox-radius);
}

/* domain checker results */
.domain-checker-result-headline,
.domain-lookup-result .domain-available,
.domain-lookup-result .domain-unavailable {
    border-radius: var(--lumox-radius);
}

/* server status page */
.server-status-table th,
.server-status-table td {
    border-color: var(--lumox-border);
}

/* announcements */
.announcement-single {
    border-bottom: 1px solid var(--lumox-border);
}

/* downloads */
.download-item {
    border-radius: var(--lumox-radius);
}

/* two-factor & security */
.twofa-setup .activation-msg {
    border: 1px dashed var(--lumox-border-strong);
    border-radius: var(--lumox-radius);
    background-color: var(--lumox-surface-2);
}

/* password strength meter */
#passwordStrengthMeter,
.pw-strength .progress {
    border-radius: var(--lumox-radius-pill);
}

/* user management avatars */
.avatar img,
img.avatar {
    border-radius: 50%;
}

/* store landing pages inherit card design; soften promo banners */
.marketconnect-promo,
.mc-promo,
.mc-promo-manage,
.mc-promo-login {
    border-radius: var(--lumox-radius-lg);
    overflow: hidden;
}


/* ------------------------------------------------------------
   17. Footer
   ------------------------------------------------------------ */
footer.footer {
    background-color: var(--lumox-surface);
    border-top: 1px solid var(--lumox-border);
    color: var(--lumox-text-muted);
    padding: 2rem 0;
    margin-top: 2rem;
}

footer.footer .nav-link {
    color: var(--lumox-text);
    font-weight: 500;
}

footer.footer .nav-link:hover {
    color: var(--lumox-primary);
}

footer.footer .btn {
    color: var(--lumox-text);
    background-color: var(--lumox-surface-2);
    border: 1px solid var(--lumox-border);
    border-radius: var(--lumox-radius);
    font-size: .8125rem;
}

footer.footer .btn:hover {
    border-color: var(--lumox-border-strong);
    color: var(--lumox-heading);
}

footer.footer .copyright {
    color: var(--lumox-text-muted);
    font-size: .8125rem;
}

footer.footer .lumox-footer-brand {
    color: var(--lumox-heading);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

footer.footer .lumox-footer-logo {
    max-height: 40px;
}


/* ------------------------------------------------------------
   17b. Off-canvas mobile navigation & scheme toggle
   ------------------------------------------------------------ */
.lumox-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1060;
    width: min(320px, 86vw);
    background-color: var(--lumox-surface);
    box-shadow: var(--lumox-shadow-lg);
    transform: translateX(-105%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    visibility: hidden;
}

html[dir="rtl"] .lumox-offcanvas {
    left: auto;
    right: 0;
    transform: translateX(105%);
}

.lumox-offcanvas.show {
    transform: translateX(0);
    visibility: visible;
}

.lumox-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(13, 21, 38, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.lumox-offcanvas-backdrop.show {
    opacity: 1;
    visibility: visible;
}

body.lumox-offcanvas-open {
    overflow: hidden;
}

.lumox-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lumox-border);
}

.lumox-offcanvas-brand {
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--lumox-heading);
}

.lumox-offcanvas-brand img {
    max-height: 36px;
}

.lumox-offcanvas-close {
    color: var(--lumox-text-muted);
    padding: .375rem .625rem;
    border-radius: var(--lumox-radius-sm);
}

.lumox-offcanvas-close:hover {
    color: var(--lumox-heading);
    background-color: var(--lumox-surface-2);
}

.lumox-offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem 2rem;
}

.lumox-offcanvas-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lumox-offcanvas-nav .lumox-nav-item > a {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .75rem;
    color: var(--lumox-text);
    font-weight: 600;
    border-radius: var(--lumox-radius);
}

.lumox-offcanvas-nav .lumox-nav-item > a:hover {
    color: var(--lumox-primary);
    background-color: var(--lumox-primary-softer);
    text-decoration: none;
}

.lumox-offcanvas-nav .lumox-nav-item > a > span:first-of-type {
    flex: 1 1 auto;
}

.lumox-offcanvas-nav .lumox-nav-caret {
    font-size: .7rem;
    color: var(--lumox-text-muted);
    transition: transform var(--lumox-transition);
}

.lumox-offcanvas-nav .lumox-nav-group.open > a .lumox-nav-caret {
    transform: rotate(180deg);
}

.lumox-offcanvas-nav .lumox-nav-children {
    display: none;
    list-style: none;
    margin: 0 0 .25rem;
    padding: 0 0 0 1.25rem;
}

html[dir="rtl"] .lumox-offcanvas-nav .lumox-nav-children {
    padding: 0 1.25rem 0 0;
}

.lumox-offcanvas-nav .lumox-nav-group.open > .lumox-nav-children {
    display: block;
}

.lumox-offcanvas-nav .lumox-nav-children a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    color: var(--lumox-text-muted);
    font-size: .875rem;
    border-radius: var(--lumox-radius-sm);
}

.lumox-offcanvas-nav .lumox-nav-children a:hover {
    color: var(--lumox-primary);
    background-color: var(--lumox-primary-softer);
    text-decoration: none;
}

.lumox-offcanvas-nav .lumox-nav-divider {
    height: 1px;
    margin: .375rem .75rem;
    background-color: var(--lumox-border);
}

.lumox-offcanvas-nav .badge {
    background-color: var(--lumox-primary-soft);
    color: var(--lumox-primary);
}

/* dark / light toggle icons */
.lumox-scheme-toggle .lumox-icon-sun {
    display: none;
}

html[data-lumox-scheme="dark"] .lumox-scheme-toggle .lumox-icon-sun {
    display: inline-block;
}

html[data-lumox-scheme="dark"] .lumox-scheme-toggle .lumox-icon-moon {
    display: none;
}

/* header elevation on scroll */
header.header.is-scrolled {
    box-shadow: var(--lumox-shadow);
}


/* ------------------------------------------------------------
   18. Utilities & helpers
   ------------------------------------------------------------ */
.w-hidden {
    display: none;
}

#fullpage-overlay {
    background: rgba(13, 21, 38, .55);
    backdrop-filter: blur(2px);
}

#fullpage-overlay .msg {
    color: #fff;
    font-family: var(--lumox-font-sans);
}

/* ------------------------------------------------------------
   intl-tel-input (register / details / contacts)
   Hide phone icon when flag dial is present; keep padding intact.
   ------------------------------------------------------------ */
.prepend-icon:has(.intl-tel-input) > .field-icon,
#registration .prepend-icon:has(.intl-tel-input) > .field-icon,
label.field-icon[for="inputPhone"],
label.field-icon[for="inputDCPhone"] {
    display: none !important;
}

.prepend-icon:has(.intl-tel-input),
.form-group:has(.intl-tel-input),
#registration .prepend-icon:has(.intl-tel-input) {
    overflow: visible;
}

.intl-tel-input {
    position: relative;
    display: block;
    width: 100%;
}

.intl-tel-input .country-list {
    z-index: 50;
    border-radius: var(--lumox-radius);
    border-color: var(--lumox-border-strong);
    box-shadow: 0 16px 40px -18px rgba(22, 24, 47, .35);
}

.intl-tel-input.separate-dial-code .selected-flag {
    background: var(--lumox-surface-2, #eef1fb);
    border-radius: var(--lumox-radius) 0 0 var(--lumox-radius);
}

.intl-tel-input .selected-dial-code {
    color: var(--lumox-heading);
    font-weight: 600;
}

#registration .intl-tel-input input.field,
#registration .intl-tel-input input.form-control,
#registration .intl-tel-input input[type="tel"],
#registration .prepend-icon .intl-tel-input input.field {
    height: auto !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-right: .875rem !important;
    border-radius: var(--lumox-radius);
}

#registration .intl-tel-input.allow-dropdown input.field,
#registration .intl-tel-input.allow-dropdown input.form-control,
#registration .intl-tel-input.allow-dropdown input[type="tel"],
#registration .intl-tel-input.separate-dial-code input.field,
#registration .intl-tel-input.separate-dial-code input.form-control,
#registration .intl-tel-input.separate-dial-code input[type="tel"],
#registration .prepend-icon .intl-tel-input.allow-dropdown input.field,
#registration .prepend-icon .intl-tel-input.separate-dial-code input.field {
    padding-left: 52px !important;
}

#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input.field,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input.form-control,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type="tel"],
#registration .prepend-icon .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input.field {
    padding-left: 76px !important;
}

#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input.field,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input.form-control,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type="tel"] {
    padding-left: 84px !important;
}

#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input.field,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input.form-control,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type="tel"] {
    padding-left: 92px !important;
}

#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input.field,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input.form-control,
#registration .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type="tel"] {
    padding-left: 100px !important;
}

html[dir="rtl"] .intl-tel-input.allow-dropdown .flag-container,
html[dir="rtl"] .intl-tel-input.separate-dial-code .flag-container {
    left: auto;
    right: 0;
}

html[dir="rtl"] .intl-tel-input.separate-dial-code .selected-flag {
    border-radius: 0 var(--lumox-radius) var(--lumox-radius) 0;
}

html[dir="rtl"] .intl-tel-input.separate-dial-code .selected-dial-code {
    padding-left: 0;
    padding-right: 28px;
}

html[dir="rtl"] .intl-tel-input.allow-dropdown input,
html[dir="rtl"] .intl-tel-input.separate-dial-code input {
    padding-left: .875rem !important;
}

html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
    padding-right: 76px !important;
    padding-left: .875rem !important;
}

html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input {
    padding-right: 84px !important;
    padding-left: .875rem !important;
}

html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input {
    padding-right: 92px !important;
    padding-left: .875rem !important;
}

html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input {
    padding-right: 100px !important;
    padding-left: .875rem !important;
}

html[dir="rtl"] #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input {
    padding-right: 76px !important;
    padding-left: 1rem !important;
}

/* focus visibility for keyboard users (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--lumox-primary);
    outline-offset: 2px;
}

/* reduced motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}