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

    ** NepalCloud brand layer **

    Matches nepalcloud.com.np on top of Twenty-One.

    Load order (includes/head.tpl):
      theme.min.css -> nc-recolor.css (generated brand colours)
      -> nc-dark.css (generated dark mode) -> nepalcloud.css
      -> custom.css

    Colours are tokens: light values on :root, dark values on
    html[data-theme="dark"]. Use the tokens, not hex values,
    so components follow the active theme.

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

/* =====================================================
   1. Tokens
   ===================================================== */

:root {
    --nc-blue-50: #f5f9ff;
    --nc-blue-100: #e6efff;
    --nc-blue-200: #c9dcfe;
    --nc-blue-300: #93c5fd;
    --nc-blue-400: #5b95fc;
    --nc-blue-600: #1768fa;
    --nc-blue-700: #1354cb;
    --nc-slate-50: #f5f9ff;
    --nc-slate-100: #eef3f9;
    --nc-slate-200: #e3ebf5;
    --nc-slate-300: #cbd5e1;
    --nc-slate-400: #94a3b8;
    --nc-slate-500: #64748b;
    --nc-slate-600: #425574;
    --nc-slate-700: #334155;
    --nc-slate-800: #1e293b;
    --nc-slate-950: #071528;

    /* semantic */
    --nc-bg: var(--nc-slate-50);
    --nc-surface: #fff;
    --nc-surface-2: var(--nc-slate-50);
    --nc-surface-3: var(--nc-slate-100);
    --nc-border: var(--nc-slate-200);
    --nc-border-strong: var(--nc-slate-300);
    --nc-divider: var(--nc-slate-100);
    --nc-text: var(--nc-slate-950);
    --nc-text-2: var(--nc-slate-700);
    --nc-muted: var(--nc-slate-600);
    --nc-subtle: var(--nc-slate-400);
    --nc-heading: var(--nc-slate-950);
    --nc-link: var(--nc-blue-600);
    --nc-link-hover: var(--nc-blue-700);
    --nc-accent-soft: var(--nc-blue-50);
    --nc-accent-soft-2: var(--nc-blue-100);
    --nc-accent-border: var(--nc-blue-200);
    --nc-header-bg: rgba(255, 255, 255, 0.97);
    --nc-hero-from: var(--nc-blue-100);

    --nc-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --nc-font-display: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
    --nc-radius-sm: 6px;
    --nc-radius: 8px;
    --nc-radius-lg: 12px;
    --nc-radius-xl: 16px;
    --nc-shadow-sm: 0 1px 2px rgba(7, 21, 40, 0.04);
    --nc-shadow: 0 2px 12px -6px rgba(7, 21, 40, 0.12);
    --nc-shadow-lg: 0 18px 40px -20px rgba(7, 21, 40, 0.25);
    --nc-ring: 0 0 0 3px rgba(23, 104, 250, 0.18);

    color-scheme: light;
}

html[data-theme="dark"] {
    --nc-bg: #071528;
    --nc-surface: #0c1a30;
    --nc-surface-2: #10213b;
    --nc-surface-3: #162a48;
    --nc-border: #1f3352;
    --nc-border-strong: #2b4266;
    --nc-divider: #172a46;
    --nc-text: #e6edf7;
    --nc-text-2: #cbd5e1;
    --nc-muted: #94a3b8;
    --nc-subtle: #64748b;
    --nc-heading: #fff;
    --nc-link: #6ea2fc;
    --nc-link-hover: #93c5fd;
    --nc-accent-soft: rgba(23, 104, 250, 0.12);
    --nc-accent-soft-2: rgba(23, 104, 250, 0.2);
    --nc-accent-border: rgba(91, 149, 252, 0.4);
    --nc-header-bg: rgba(12, 26, 48, 0.96);
    --nc-hero-from: rgba(23, 104, 250, 0.22);
    --nc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --nc-shadow: 0 2px 12px -6px rgba(0, 0, 0, 0.6);
    --nc-shadow-lg: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
    --nc-ring: 0 0 0 3px rgba(91, 149, 252, 0.3);

    color-scheme: dark;
}

/* =====================================================
   2. Base & typography
   ===================================================== */

body {
    font-family: var(--nc-font-sans);
    color: var(--nc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.primary-bg-color,
html[data-theme="dark"] .primary-bg-color {
    background-color: var(--nc-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title {
    font-family: var(--nc-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--nc-heading);
}

a,
html[data-theme="dark"] a {
    color: var(--nc-link);
}

a:hover,
html[data-theme="dark"] a:hover {
    color: var(--nc-link-hover);
}

.text-muted,
html[data-theme="dark"] .text-muted {
    color: var(--nc-muted) !important;
}

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

::selection {
    background: var(--nc-blue-200);
    color: var(--nc-slate-950);
}

/* =====================================================
   3. Header
   ===================================================== */

header.header,
html[data-theme="dark"] header.header {
    position: relative;
    z-index: 1030;
    background-color: var(--nc-header-bg);
    border-bottom: 1px solid var(--nc-border);
    box-shadow: var(--nc-shadow);
}

header.header .topbar {
    background-color: var(--nc-slate-950);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

html[data-theme="dark"] header.header .topbar {
    background-color: #020617;
    border-bottom: 1px solid var(--nc-border);
}

header.header .topbar .btn,
header.header .topbar .active-client .btn,
html[data-theme="dark"] header.header .topbar .btn {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

header.header .topbar .btn:hover,
header.header .topbar .active-client .btn:hover {
    color: #fff;
}

header.header .topbar .active-client .input-group-text,
html[data-theme="dark"] header.header .topbar .active-client .input-group-text {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
}

header.header .topbar .active-client .btn.btn-active-client span {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

header.header .navbar-brand {
    padding: 0.4rem 0;
}

header.header .logo-img {
    max-height: 42px;
    width: auto;
}

.nc-logo-on-dark,
html[data-theme="dark"] .nc-logo-on-light {
    display: none !important;
}

html[data-theme="dark"] .nc-logo-on-dark {
    display: inline-block !important;
}

header.header .search,
html[data-theme="dark"] header.header .search {
    width: 300px;
    background-color: var(--nc-surface-2);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

header.header .search .btn,
header.header .search .form-control,
html[data-theme="dark"] header.header .search .btn,
html[data-theme="dark"] header.header .search .form-control {
    background-color: transparent;
    border: 0;
    color: var(--nc-text);
    font-size: 13px;
}

header.header .search .btn,
html[data-theme="dark"] header.header .search .btn {
    color: var(--nc-subtle);
}

header.header .search:focus-within {
    border-color: var(--nc-blue-600);
    box-shadow: var(--nc-ring);
}

header.header .toolbar .nav-link,
html[data-theme="dark"] header.header .toolbar .nav-link {
    min-width: 42px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    color: var(--nc-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
}

header.header .toolbar .nav-link:hover,
html[data-theme="dark"] header.header .toolbar .nav-link:hover {
    color: var(--nc-link);
    border-color: var(--nc-accent-border);
}

header.header .toolbar .nav-link .badge {
    background-color: var(--nc-blue-600);
    color: #fff;
    opacity: 1;
}

/* Theme toggle: shows the icon of the theme you would switch to */
.nc-theme-toggle .nc-icon-sun,
html[data-theme="dark"] .nc-theme-toggle .nc-icon-moon {
    display: none;
}

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

header.header .main-navbar-wrapper {
    border-top: 1px solid var(--nc-divider);
}

header.header .navbar a,
header.header .navbar-nav a,
html[data-theme="dark"] header.header .navbar a,
html[data-theme="dark"] header.header .navbar-nav a {
    color: var(--nc-text-2);
    font-size: 13.5px;
    font-weight: 600;
}

header.header .navbar-nav .nav-link {
    border-radius: var(--nc-radius);
    transition: color 0.15s ease;
}

header.header .navbar-nav .nav-link:hover,
header.header .navbar-nav .nav-item.show > .nav-link,
header.header .navbar-nav .active > .nav-link,
html[data-theme="dark"] header.header .navbar-nav .nav-link:hover,
html[data-theme="dark"] header.header .navbar-nav .nav-item.show > .nav-link {
    color: var(--nc-link);
}

/* =====================================================
   3b. Main navigation
   includes/navbar.tpl renders <li><a class="pr-4"> (no .nav-link)
   and submenu items as <li class="dropdown-item"><a class="dropdown-item px-2 py-0">,
   so padding needs !important to beat the utility classes.
   ===================================================== */

header.header #mainNavbar .navbar-nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
    border-radius: var(--nc-radius);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

header.header #mainNavbar .navbar-nav > li > a:hover,
header.header #mainNavbar .navbar-nav > li > a:focus,
header.header #mainNavbar .navbar-nav > li.show > a,
header.header #mainNavbar .navbar-nav > li.active > a,
html[data-theme="dark"] header.header #mainNavbar .navbar-nav > li > a:hover,
html[data-theme="dark"] header.header #mainNavbar .navbar-nav > li.show > a {
    background-color: var(--nc-accent-soft);
    color: var(--nc-link);
    text-decoration: none;
}

header.header #mainNavbar .dropdown-toggle::after {
    margin-left: 2px;
    vertical-align: middle;
    border-top-width: 0.3em;
    opacity: 0.6;
}

header.header #mainNavbar .dropdown-menu {
    min-width: 230px;
    margin-top: 6px;
}

header.header #mainNavbar .dropdown-menu li.dropdown-item,
html[data-theme="dark"] header.header #mainNavbar .dropdown-menu li.dropdown-item {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0;
}

header.header #mainNavbar .dropdown-menu a.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
    border-radius: var(--nc-radius-sm);
    white-space: normal;
    text-decoration: none;
}

header.header #mainNavbar .dropdown-menu a.dropdown-item i {
    width: 16px;
    color: var(--nc-subtle);
    text-align: center;
}

header.header #mainNavbar .dropdown-menu a.dropdown-item:hover i {
    color: var(--nc-link);
}

header.header #mainNavbar .dropdown-menu li.active > a.dropdown-item {
    background-color: var(--nc-accent-soft-2);
    color: var(--nc-link);
}

/* Logo + toolbar row: keep on one line on phones */
header.header .navbar:not(.main-navbar-wrapper) > .container {
    flex-wrap: nowrap;
}

header.header .navbar-brand {
    min-width: 0;
    flex-shrink: 1;
}

header.header .toolbar {
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    header.header .logo-img {
        max-height: 32px;
        max-width: 140px;
    }

    header.header .toolbar .nav-item.ml-3 {
        margin-left: 8px !important;
    }

    header.header .toolbar .nav-link,
    html[data-theme="dark"] header.header .toolbar .nav-link {
        min-width: 40px;
        min-height: 40px;
        padding: 0 !important;
    }

    header.header .topbar .btn {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Collapsed (mobile / tablet) menu */
@media (max-width: 1199.98px) {
    /* Bootstrap drops container padding inside a collapsed navbar */
    header.header .main-navbar-wrapper > .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    header.header .main-navbar-wrapper .navbar-collapse {
        padding: 12px 0 16px;
    }

    header.header #mainNavbar .search {
        width: 100%;
        margin-bottom: 10px !important;
    }

    header.header #mainNavbar .navbar-nav {
        width: 100%;
    }

    header.header #mainNavbar .navbar-nav > li > a {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 11px 12px !important;
        font-size: 15px;
    }

    header.header #mainNavbar .navbar-nav + .navbar-nav {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--nc-divider);
    }

    header.header #mainNavbar .dropdown-menu,
    html[data-theme="dark"] header.header #mainNavbar .dropdown-menu {
        position: static !important;
        float: none;
        transform: none !important;
        min-width: 0;
        margin: 2px 0 8px 14px;
        padding: 2px 0 2px 10px;
        background: transparent;
        border: 0;
        border-left: 2px solid var(--nc-border);
        border-radius: 0;
        box-shadow: none;
    }

    header.header #mainNavbar .dropdown-menu a.dropdown-item {
        padding: 9px 12px !important;
        font-size: 14.5px;
    }

    header.header #mainNavbar .dropdown-divider {
        margin: 6px 12px;
    }
}

/* =====================================================
   4. Dropdowns & popovers
   ===================================================== */

.dropdown-menu,
html[data-theme="dark"] .dropdown-menu {
    padding: 6px;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow-lg);
}

.dropdown-item,
header.header .navbar .dropdown-item,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] header.header .navbar .dropdown-item {
    padding: 0.45rem 0.75rem;
    border-radius: var(--nc-radius-sm);
    color: var(--nc-text-2);
    font-size: 13.5px;
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus,
header.header .navbar .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] header.header .navbar .dropdown-item:hover {
    background-color: var(--nc-accent-soft);
    color: var(--nc-link);
}

.dropdown-item.active,
.dropdown-item:active,
header.header .dropdown-item.active,
header.header .dropdown-item:active,
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] header.header .dropdown-item.active {
    background-color: var(--nc-accent-soft-2);
    color: var(--nc-link);
}

.dropdown-divider,
html[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--nc-divider);
}

.popover,
html[data-theme="dark"] .popover {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow-lg);
    font-family: var(--nc-font-sans);
}

.client-alerts li a,
html[data-theme="dark"] .client-alerts li a {
    color: var(--nc-text-2);
}

/* =====================================================
   5. Breadcrumb & page frame
   ===================================================== */

.master-breadcrumb,
html[data-theme="dark"] .master-breadcrumb {
    background-color: transparent;
}

.master-breadcrumb .breadcrumb,
html[data-theme="dark"] .master-breadcrumb .breadcrumb {
    padding: 14px 0 0;
    background: transparent;
    font-size: 13px;
}

.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a,
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--nc-muted);
}

.master-breadcrumb .breadcrumb-item a:hover {
    color: var(--nc-link);
}

.master-breadcrumb .breadcrumb-item.active,
html[data-theme="dark"] .master-breadcrumb .breadcrumb-item.active {
    color: var(--nc-text);
    font-weight: 500;
}

#main-body {
    padding-top: 24px;
    padding-bottom: 48px;
}

/* =====================================================
   6. Buttons
   ===================================================== */

.btn {
    border-radius: var(--nc-radius-sm);
    font-weight: 600;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.btn-primary {
    background-color: var(--nc-blue-600);
    border-color: var(--nc-blue-600);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--nc-blue-700);
    border-color: var(--nc-blue-700);
    color: #fff;
}

.btn-default,
.btn-light,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light {
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    color: var(--nc-text);
}

.btn-default:hover,
.btn-default:focus,
.btn-light:hover,
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--nc-surface-2);
    border-color: var(--nc-border-strong);
    color: var(--nc-text);
}

.btn-outline-primary,
html[data-theme="dark"] .btn-outline-primary {
    border-color: var(--nc-accent-border);
    color: var(--nc-link);
}

.btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--nc-blue-600);
    border-color: var(--nc-blue-600);
    color: #fff;
}

html[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--nc-border-strong);
    color: var(--nc-text-2);
}

.btn-lg {
    border-radius: var(--nc-radius);
}

/* =====================================================
   7. Forms
   ===================================================== */

.form-control,
.custom-select,
.input-group-text,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select {
    background-color: var(--nc-surface);
    border-color: var(--nc-border-strong);
    border-radius: var(--nc-radius);
    color: var(--nc-text);
}

.form-control:focus,
.custom-select:focus,
html[data-theme="dark"] .form-control:focus {
    background-color: var(--nc-surface);
    border-color: var(--nc-blue-600);
    box-shadow: var(--nc-ring);
    color: var(--nc-text);
}

.form-control::placeholder {
    color: var(--nc-subtle);
}

.form-control:disabled,
.form-control[readonly],
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--nc-surface-3);
}

.input-group-text,
html[data-theme="dark"] .input-group-text {
    background-color: var(--nc-surface-2);
    border-color: var(--nc-border-strong);
    color: var(--nc-muted);
}

label,
.control-label {
    font-weight: 600;
    color: var(--nc-text-2);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--nc-blue-600);
    border-color: var(--nc-blue-600);
}

html[data-theme="dark"] select option {
    background-color: var(--nc-surface);
    color: var(--nc-text);
}

/* intl-tel-input country list */
html[data-theme="dark"] .iti__country-list,
html[data-theme="dark"] .intl-tel-input .country-list {
    background-color: var(--nc-surface);
    border-color: var(--nc-border);
    color: var(--nc-text);
}

html[data-theme="dark"] .iti__country.iti__highlight,
html[data-theme="dark"] .intl-tel-input .country-list .country.highlight {
    background-color: var(--nc-surface-3);
}

/* Registration / checkout icon fields */
#registration .prepend-icon .field-icon i,
#registration .field-icon i {
    color: var(--nc-subtle);
}

/* =====================================================
   8. Cards & panels
   ===================================================== */

.card,
.mc-promo-manage,
.mc-promo-login,
html[data-theme="dark"] .card {
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow-sm);
}

.card-header,
html[data-theme="dark"] .card-header {
    background-color: var(--nc-surface);
    border-bottom: 1px solid var(--nc-border);
    font-family: var(--nc-font-display);
    font-weight: 700;
}

.card-header:first-child {
    border-radius: calc(var(--nc-radius-lg) - 1px) calc(var(--nc-radius-lg) - 1px) 0 0;
}

.card-footer,
html[data-theme="dark"] .card-footer {
    background-color: var(--nc-surface-2);
    border-top: 1px solid var(--nc-border);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--nc-radius-lg) - 1px) calc(var(--nc-radius-lg) - 1px);
}

.primary-content .card-title {
    font-size: 21px;
}

.list-group-item,
html[data-theme="dark"] .list-group-item {
    background-color: var(--nc-surface);
    border-color: var(--nc-divider);
    color: var(--nc-text-2);
}

a.list-group-item:hover,
.list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:hover {
    background-color: var(--nc-surface-2);
    color: var(--nc-link);
}

/* =====================================================
   9. Sidebar
   ===================================================== */

.sidebar .card {
    overflow: hidden;
}

.sidebar .card-header {
    padding: 0.85rem 1rem;
}

.sidebar .card-title {
    font-size: 15px;
}

:is(.sidebar, .card-sidebar) .list-group-item,
html[data-theme="dark"] :is(.sidebar, .card-sidebar) .list-group-item {
    border-color: var(--nc-divider);
    color: var(--nc-text-2);
    font-weight: 500;
}

:is(.sidebar, .card-sidebar) .list-group-item:hover,
html[data-theme="dark"] :is(.sidebar, .card-sidebar) .list-group-item:hover {
    background-color: var(--nc-surface-2);
    color: var(--nc-link);
}

:is(.sidebar, .card-sidebar) .list-group-item.active,
:is(.sidebar, .card-sidebar) .list-group-item.active:hover,
:is(.sidebar, .card-sidebar) .list-group-item.active:focus,
html[data-theme="dark"] :is(.sidebar, .card-sidebar) .list-group-item.active {
    background-color: var(--nc-accent-soft);
    border-color: var(--nc-divider);
    box-shadow: inset 3px 0 0 var(--nc-blue-600);
    color: var(--nc-link);
    font-weight: 600;
}

:is(.sidebar, .card-sidebar) .list-group-item .badge,
html[data-theme="dark"] :is(.sidebar, .card-sidebar) .list-group-item .badge {
    background-color: var(--nc-surface-3);
    color: var(--nc-muted);
    border-radius: 999px;
}

:is(.sidebar, .card-sidebar) .list-group-item > i.far.fa-circle {
    color: var(--nc-border-strong);
}

/* =====================================================
   10. Tables
   ===================================================== */

.table,
html[data-theme="dark"] .table {
    color: var(--nc-text);
}

.table th,
.table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: var(--nc-divider);
}

.table thead th,
table.dataTable thead th,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] table.dataTable thead th {
    background-color: var(--nc-surface-2);
    border-bottom: 1px solid var(--nc-border);
    color: var(--nc-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table-hover tbody tr:hover,
.table-list tbody tr:hover,
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .table-list tbody tr:hover {
    background-color: var(--nc-accent-soft);
    color: var(--nc-text);
}

html[data-theme="dark"] .table-list > tbody > tr > td,
html[data-theme="dark"] table.dataTable tbody tr {
    background-color: var(--nc-surface);
}

.page-item.active .page-link {
    background-color: var(--nc-blue-600);
    border-color: var(--nc-blue-600);
    color: #fff;
}

.page-link,
html[data-theme="dark"] .page-link {
    background-color: var(--nc-surface);
    border-color: var(--nc-border);
    color: var(--nc-link);
}

.page-item.disabled .page-link,
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--nc-surface);
    border-color: var(--nc-border);
    color: var(--nc-subtle);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {
    color: var(--nc-muted);
}

/* =====================================================
   11. Labels & badges (pill style like the site)
   ===================================================== */

.label {
    display: inline-block;
    padding: 0.35em 0.75em;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge {
    border-radius: 999px;
    font-weight: 600;
}

/* =====================================================
   12. Alerts, modals, tabs, misc
   ===================================================== */

.alert {
    border-radius: var(--nc-radius-lg);
}

.alert-info {
    background-color: var(--nc-blue-50);
    border-color: var(--nc-blue-200);
    color: #0c3683;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(23, 104, 250, 0.12);
    border-color: rgba(91, 149, 252, 0.35);
    color: #bcd4fe;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #a7f3d0;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fde68a;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

html[data-theme="dark"] .alert .alert-link {
    color: inherit;
}

.modal-content,
html[data-theme="dark"] .modal-content {
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-xl);
    box-shadow: var(--nc-shadow-lg);
}

.modal-header,
.modal-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--nc-divider);
}

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

/* language / currency picker keeps its dark look in both themes */
.modal-localisation .modal-content,
html[data-theme="dark"] .modal-localisation .modal-content {
    background-color: var(--nc-slate-950);
    border-color: rgba(255, 255, 255, 0.1);
}

.nav-tabs,
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--nc-border);
}

.nav-tabs .nav-link,
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--nc-muted);
    font-weight: 600;
}

.nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--nc-surface);
    border-color: var(--nc-border) var(--nc-border) var(--nc-surface);
    color: var(--nc-link);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--nc-blue-600);
}

.progress,
html[data-theme="dark"] .progress {
    border-radius: 999px;
    background-color: var(--nc-surface-3);
}

html[data-theme="dark"] code {
    color: #f9a8d4;
}

html[data-theme="dark"] pre,
html[data-theme="dark"] .markdown-content pre {
    background-color: var(--nc-surface-2);
    color: var(--nc-text);
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--nc-surface) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body {
    color: var(--nc-text) !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right {
    border-color: var(--nc-border) !important;
}

/* markdown editor (tickets) */
html[data-theme="dark"] .md-editor > textarea,
html[data-theme="dark"] .md-editor .md-preview,
html[data-theme="dark"] .md-editor > .md-header,
html[data-theme="dark"] .md-editor .md-footer {
    background-color: var(--nc-surface);
    border-color: var(--nc-border);
    color: var(--nc-text);
}

html[data-theme="dark"] .md-editor {
    border-color: var(--nc-border);
}

/* =====================================================
   13. Client area home
   ===================================================== */

.tiles,
html[data-theme="dark"] .tiles {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    overflow: hidden;
    background-color: var(--nc-surface);
    box-shadow: var(--nc-shadow-sm);
}

.tiles .tile,
html[data-theme="dark"] .tiles .tile {
    background-color: var(--nc-surface);
    border-right: 1px solid var(--nc-border);
    border-bottom-color: var(--nc-border);
}

.tiles .tile:hover,
html[data-theme="dark"] .tiles .tile:hover {
    background-color: var(--nc-accent-soft);
}

.tiles .tile .stat {
    font-family: var(--nc-font-display);
    font-weight: 800;
    color: var(--nc-heading);
}

.tiles .tile .title,
html[data-theme="dark"] .tiles .tile .title {
    color: var(--nc-muted);
    letter-spacing: 0.04em;
}

.tiles .tile i,
html[data-theme="dark"] .tiles .tile i {
    color: var(--nc-border);
}

.tiles .tile:hover i,
html[data-theme="dark"] .tiles .tile:hover i {
    color: var(--nc-accent-border);
}

.client-home-cards .card-header,
html[data-theme="dark"] .client-home-cards .card-header {
    border-bottom: 1px solid var(--nc-divider);
}

.client-home-cards .card-header .btn {
    border-radius: var(--nc-radius-sm);
}

/* =====================================================
   14. Public homepage
   ===================================================== */

.home-domain-search,
html[data-theme="dark"] .home-domain-search {
    background: radial-gradient(120% 140% at 50% 0%, var(--nc-hero-from) 0%, var(--nc-bg) 60%) !important;
    border-bottom: 1px solid var(--nc-border);
}

.home-domain-search .nc-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--nc-link);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.home-domain-search h2 {
    font-size: 2.3rem;
    font-weight: 800;
}

.home-domain-search .nc-hero-sub {
    max-width: 560px;
    margin: 12px auto 0;
    color: var(--nc-muted);
    font-size: 15px;
    text-align: center;
}

.home-domain-search .input-group-wrapper,
html[data-theme="dark"] .home-domain-search .input-group-wrapper {
    max-width: 760px;
    margin: 24px auto 16px;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow-lg);
}

.home-domain-search .input-group-wrapper .form-control,
html[data-theme="dark"] .home-domain-search .input-group-wrapper .form-control {
    background-color: transparent;
    font-size: 16px;
}

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

.home-domain-search .input-group-wrapper .btn-success,
html[data-theme="dark"] .home-domain-search .input-group-wrapper .btn-success,
.home-domain-search .row .btn-success {
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border-strong);
    color: var(--nc-text);
}

.home-domain-search .input-group-wrapper .btn-success:hover,
.home-domain-search .row .btn-success:hover {
    border-color: var(--nc-accent-border);
    color: var(--nc-link);
}

.home-domain-search .tld-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
    color: var(--nc-muted);
    font-size: 1.05em;
    font-weight: 500;
}

.home-domain-search .tld-logos li {
    float: none;
    padding: 0;
}

.home-domain-search .tld-logos img {
    width: 48px;
    margin-right: 6px;
}

.home-domain-search .btn-link.float-right {
    display: block;
    float: none !important;
    margin: 6px auto 0;
    font-weight: 600;
}

.nc-trust {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    color: var(--nc-muted);
    font-size: 13px;
    font-weight: 500;
}

.nc-trust i {
    margin-right: 6px;
    color: var(--nc-link);
}

.card-columns.home .card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.card-columns.home .card:hover {
    border-color: var(--nc-accent-border);
    box-shadow: var(--nc-shadow-lg);
    transform: translateY(-2px);
}

.card-columns.home .pricing-card-title {
    font-size: 20px;
}

.action-icon-btns a,
html[data-theme="dark"] .action-icon-btns a {
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    color: var(--nc-text-2);
    font-weight: 600;
    box-shadow: var(--nc-shadow-sm);
}

.action-icon-btns a:hover,
html[data-theme="dark"] .action-icon-btns a:hover {
    border-color: var(--nc-accent-border);
    color: var(--nc-link);
}

.action-icon-btns a .ico-container i,
html[data-theme="dark"] .action-icon-btns a .ico-container i {
    color: var(--nc-blue-400);
}

/* =====================================================
   15. Auth pages (login.tpl split layout, register, reset)
   ===================================================== */

.nc-auth {
    display: flex;
    max-width: 1040px;
    margin: 8px auto 24px;
    overflow: hidden;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-xl);
    box-shadow: var(--nc-shadow-lg);
}

.nc-auth-aside {
    position: relative;
    flex: 0 0 46%;
    flex-direction: column;
    min-height: 580px;
    padding: 44px 40px 220px;
    background:
        linear-gradient(180deg, #071f3d 0%, #071f3d 38%, rgba(7, 31, 61, 0) 70%),
        url("../img/nepalcloud/cloud-dark.webp") center bottom / cover no-repeat,
        #071f3d;
    color: rgba(255, 255, 255, 0.75);
}

.nc-auth-aside .nc-eyebrow {
    color: var(--nc-blue-300);
    font-size: 13px;
    font-weight: 600;
}

.nc-auth-aside h2 {
    margin: 10px 0 12px;
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

.nc-auth-aside ul {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.nc-auth-aside li {
    margin-bottom: 10px;
}

.nc-auth-aside li i {
    width: 20px;
    color: var(--nc-blue-400);
}

.nc-auth .login-form {
    flex: 1 1 auto;
    display: flex;
}

.nc-auth .login-form > .card,
html[data-theme="dark"] .nc-auth .login-form > .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* centre the form vertically; children wrap as rows so the
   float-left (Login) / text-right (Remember me) pair stays on one line */
.nc-auth .login-form > .card .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.nc-auth .login-form > .card .card-body > * {
    width: 100%;
}

.nc-auth .login-form > .card .card-body > .float-left {
    width: auto;
    float: none !important;
}

.nc-auth .login-form > .card .card-body > .text-right {
    flex: 1 1 auto;
    width: auto;
}

.nc-auth .login-form > .card .card-body > .text-right label {
    margin: 0;
}

.nc-auth .login-form > .card .card-footer {
    border-radius: 0;
}

.login-form .h3 {
    font-size: 26px;
    font-weight: 800;
}

.input-group-merge .input-group-text {
    border-right: 0;
}

.input-group-merge .form-control:not(:first-child) {
    border-left: 0;
}

.input-group-merge:focus-within .input-group-text,
.input-group-merge:focus-within .form-control,
.input-group-merge:focus-within .btn {
    border-color: var(--nc-blue-600);
}

.input-group-merge:focus-within .form-control {
    box-shadow: none;
}

.input-group-merge:focus-within {
    border-radius: var(--nc-radius);
    box-shadow: var(--nc-ring);
}

.providerLinkingFeedback:empty {
    display: none;
}

@media (max-width: 991.98px) {
    .nc-auth {
        max-width: 540px;
    }
}

/* =====================================================
   16. Tickets, knowledgebase, announcements
   ===================================================== */

.ticket-reply {
    margin-bottom: 16px;
    padding: 0;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    overflow: hidden;
}

.ticket-reply.staff {
    border-color: var(--nc-accent-border);
    box-shadow: inset 3px 0 0 var(--nc-blue-600);
}

.ticket-reply .posted-by {
    padding: 10px 16px;
    background-color: var(--nc-surface-2);
    border-bottom: 1px solid var(--nc-divider);
    color: var(--nc-muted);
    font-size: 13px;
}

.ticket-reply.staff .posted-by {
    background-color: var(--nc-accent-soft);
}

.ticket-reply .posted-by-name {
    color: var(--nc-text);
    font-weight: 600;
}

.ticket-reply .message {
    padding: 16px;
}

.kb-category a,
.kb-article-item {
    color: var(--nc-text-2);
}

.kb-category a:hover,
.kb-article-item:hover {
    color: var(--nc-link);
}

.announcements .announcement {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nc-divider);
}

/* =====================================================
   17. Order form (standard_cart)
   standard_cart's stylesheet loads in <body> after this file,
   so selectors are prefixed with "body" to win on specificity.
   ===================================================== */

body #order-standard_cart .products .product {
    padding-bottom: 16px;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    box-shadow: var(--nc-shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body #order-standard_cart .products .product:hover {
    border-color: var(--nc-accent-border);
    box-shadow: var(--nc-shadow-lg);
}

body #order-standard_cart .products .product header {
    margin: 0;
    padding: 16px 20px;
    background: transparent;
    border-bottom: 1px solid var(--nc-divider);
    border-radius: var(--nc-radius-lg) var(--nc-radius-lg) 0 0;
}

body #order-standard_cart .products .product header span {
    color: var(--nc-heading);
    font-family: var(--nc-font-display);
    font-size: 1.3em;
    font-weight: 700;
}

body #order-standard_cart .products .product header .qty {
    color: var(--nc-muted);
}

body #order-standard_cart .products .product div.product-desc {
    color: var(--nc-text-2);
}

body #order-standard_cart .products .product div.product-desc li {
    border-bottom: 1px solid var(--nc-divider);
}

body #order-standard_cart .products .product div.product-pricing span.price {
    color: var(--nc-heading);
    font-family: var(--nc-font-display);
    font-size: 1.6em;
    font-weight: 800;
}

body #order-standard_cart .btn-success,
body #order-standard_cart .btn-order-now {
    background-color: var(--nc-blue-600);
    border-color: var(--nc-blue-600);
    color: #fff;
}

body #order-standard_cart .btn-success:hover,
body #order-standard_cart .btn-order-now:hover {
    background-color: var(--nc-blue-700);
    border-color: var(--nc-blue-700);
}

body #order-standard_cart .header-lined h1,
body #order-standard_cart .font-size-36 {
    font-family: var(--nc-font-display);
    font-weight: 800;
    color: var(--nc-heading);
}

body #order-standard_cart .sub-heading,
body #order-standard_cart .sub-heading-borderless {
    border-top-color: var(--nc-border);
}

body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
    background-color: var(--nc-bg);
    color: var(--nc-link);
    font-family: var(--nc-font-display);
    font-weight: 700;
}

body #order-standard_cart .field,
body #order-standard_cart .form-control {
    background-color: var(--nc-surface);
    border-color: var(--nc-border-strong);
    border-radius: var(--nc-radius);
    color: var(--nc-text);
}

body #order-standard_cart .field:focus,
body #order-standard_cart .form-control:focus {
    border-color: var(--nc-blue-600);
    box-shadow: var(--nc-ring);
}

body #order-standard_cart label {
    color: var(--nc-muted);
    font-weight: 500;
}

body #order-standard_cart .order-summary {
    background-color: var(--nc-slate-950);
    border: 1px solid var(--nc-slate-950);
    border-radius: var(--nc-radius-lg);
    overflow: hidden;
    box-shadow: var(--nc-shadow-lg);
}

html[data-theme="dark"] body #order-standard_cart .order-summary {
    background-color: #020617;
    border-color: var(--nc-border);
}

body #order-standard_cart .order-summary h2 {
    padding: 14px;
    color: #fff;
    font-family: var(--nc-font-display);
    font-weight: 700;
}

body #order-standard_cart .summary-container {
    padding: 16px;
    background-color: var(--nc-surface);
    border-radius: 0;
    color: var(--nc-text);
    font-size: 0.85em;
}

body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .bordered-totals,
body #order-standard_cart .order-summary .summary-totals {
    border-color: var(--nc-divider);
}

body #order-standard_cart .order-summary .total-due-today .amt {
    color: var(--nc-heading);
    font-family: var(--nc-font-display);
    font-weight: 800;
}

body #order-standard_cart .btn-checkout {
    border-radius: var(--nc-radius);
    font-size: 15px;
}

body #order-standard_cart .view-cart-items-header {
    padding: 10px 16px;
    background-color: var(--nc-slate-950);
    border-radius: var(--nc-radius-lg) var(--nc-radius-lg) 0 0;
    font-weight: 600;
}

body #order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--nc-blue-600);
}

body #order-standard_cart .view-cart-items .item {
    background-color: var(--nc-surface);
    border-bottom: 1px solid var(--nc-divider);
}

body #order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--nc-surface-2);
}

body #order-standard_cart .view-cart-items .item-title {
    color: var(--nc-heading);
    font-weight: 600;
}

body #order-standard_cart .empty-cart .btn {
    background-color: var(--nc-slate-950);
}

body #order-standard_cart .view-cart-promotion-code {
    border-color: var(--nc-accent-border);
    border-radius: var(--nc-radius);
    background-color: var(--nc-accent-soft);
}

body #order-standard_cart .product-info {
    background-color: var(--nc-surface-2);
    border-color: var(--nc-divider);
    border-radius: var(--nc-radius);
}

body #order-standard_cart .domain-selection-options .option {
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    margin-bottom: 8px;
}

body #order-standard_cart .domain-selection-options .option label input {
    margin-right: 8px;
}

body #order-standard_cart .domain-selection-options .option-selected {
    background-color: var(--nc-accent-soft);
    border-color: var(--nc-accent-border);
}

body #order-standard_cart .panel-addon {
    border-radius: var(--nc-radius-lg);
    border-color: var(--nc-border);
}

body #order-standard_cart .panel-addon-selected {
    border-color: var(--nc-blue-600);
}

body #order-standard_cart .panel-addon .panel-add,
body #order-standard_cart .panel-addon-selected .panel-add {
    background-color: var(--nc-blue-600);
}

body #order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-top: 0;
    border-radius: 0 0 var(--nc-radius-lg) var(--nc-radius-lg);
}

body #order-standard_cart .account-select-container div.account {
    background-color: var(--nc-surface);
    border-color: var(--nc-border);
}

body #order-standard_cart .account-select-container div.account.active {
    background-color: var(--nc-accent-soft);
}

body #order-standard_cart .apply-credit-container {
    background-color: var(--nc-surface-2);
    border-radius: var(--nc-radius);
}

body .domain-checker-container {
    background: linear-gradient(135deg, #0b2147 0%, var(--nc-slate-950) 100%);
    border-radius: var(--nc-radius-xl);
}

body .domain-checker-container .input-group-box {
    background-color: var(--nc-surface);
    border-radius: var(--nc-radius-lg);
}

body .domain-checker-bg {
    background-image: none;
}

body .spotlight-tld {
    background-color: var(--nc-surface);
    border-color: var(--nc-border);
    border-radius: var(--nc-radius-lg);
}

body .spotlight-tld .btn:not(.domain-contact-support),
body .suggested-domains .btn:not(.domain-contact-support) {
    background-color: var(--nc-blue-600);
    border-color: var(--nc-blue-600);
    border-radius: var(--nc-radius-sm);
}

body div.domainresults div:not(.btn-group) {
    background-color: var(--nc-surface-3);
    color: var(--nc-text-2);
}

body .domain-promo-box {
    background-color: var(--nc-surface);
    border-color: var(--nc-border);
    border-radius: var(--nc-radius-lg);
    color: var(--nc-text);
}

/* =====================================================
   17b. Order form pages (templates/orderforms/standard_cart)
   ===================================================== */

/* --- Product cards (products.tpl, .nc-product markup) --- */

body #order-standard_cart .nc-products .row-eq-height > [class*="col-"] {
    margin-bottom: 24px;
}

body #order-standard_cart .products .nc-product {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
}

body #order-standard_cart .products .nc-product header {
    padding: 22px 22px 4px;
    border-bottom: 0;
    background: transparent;
}

body #order-standard_cart .products .nc-product header span {
    font-size: 19px;
}

body #order-standard_cart .products .nc-product header .qty {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background-color: var(--nc-surface-3);
    border-radius: 999px;
    color: var(--nc-muted);
    font-family: var(--nc-font-sans);
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: middle;
}

body #order-standard_cart .products .nc-product div.nc-product-pricing {
    float: none;
    width: auto;
    margin: 0;
    padding: 8px 22px 18px;
    border-bottom: 1px solid var(--nc-divider);
    text-align: left;
    font-size: 14px;
}

body #order-standard_cart .nc-product .nc-price-label {
    display: block;
    color: var(--nc-muted);
    font-size: 12px;
    font-weight: 500;
}

body #order-standard_cart .products .nc-product div.nc-product-pricing span.price {
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

body #order-standard_cart .nc-product .nc-price-cycle {
    margin-left: 4px;
    color: var(--nc-muted);
    font-size: 14px;
}

body #order-standard_cart .nc-product .nc-price-setup {
    display: block;
    margin-top: 2px;
    color: var(--nc-muted);
}

body #order-standard_cart .products .nc-product div.product-desc {
    flex: 1 1 auto;
    float: none;
    width: auto;
    padding: 18px 22px;
    color: var(--nc-text-2);
    font-size: 14px;
    line-height: 1.6;
}

body #order-standard_cart .products .nc-product div.product-desc p {
    margin: 0;
    color: var(--nc-muted);
}

body #order-standard_cart .products .nc-product ul.nc-features {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

body #order-standard_cart .products .nc-product ul.nc-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    border: 0;
}

body #order-standard_cart .products .nc-product ul.nc-features li > i {
    margin-top: 5px;
    color: var(--nc-blue-600);
    font-size: 11px;
}

body #order-standard_cart .products .nc-product span.feature-value {
    display: inline;
    color: var(--nc-heading);
    font-size: inherit;
    font-weight: 700;
}

/* product feature values entered in admin contain a <br /> for the old stacked layout */
body #order-standard_cart .products .nc-product span.feature-value br {
    display: none;
}

body #order-standard_cart .products .nc-product footer {
    float: none;
    width: auto;
    margin: auto 0 0;
    padding: 0 22px 22px;
    font-size: 14px;
}

body #order-standard_cart .products .nc-product .btn-order-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--nc-radius);
    font-size: 15px;
}

/* Mobile category picker */
body #order-standard_cart .sidebar-collapsed {
    padding: 14px 16px;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
}

body #order-standard_cart .sidebar-collapsed h3 {
    color: var(--nc-muted);
    font-size: 13px;
}

/* Page headings */
body #order-standard_cart .header-lined {
    margin-bottom: 20px;
}

body #order-standard_cart .header-lined h1 {
    margin-bottom: 6px;
    letter-spacing: -0.03em;
}

body #order-standard_cart .header-lined p {
    color: var(--nc-muted);
    font-size: 15px;
}

/* --- Configure product / addons --- */

body #order-standard_cart .product-info {
    padding: 16px 18px;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    font-size: 14px;
}

body #order-standard_cart .product-info .product-title {
    margin-bottom: 4px;
    color: var(--nc-heading);
    font-family: var(--nc-font-display);
    font-size: 18px;
    font-weight: 700;
}

body #order-standard_cart .field-container {
    padding: 4px 0 8px;
}

body #order-standard_cart .panel-addon {
    overflow: hidden;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body #order-standard_cart .panel-addon:hover {
    border-color: var(--nc-accent-border);
    box-shadow: var(--nc-shadow);
}

body #order-standard_cart .panel-addon .panel-body,
body #order-standard_cart .panel-addon .card-body {
    color: var(--nc-text-2);
    font-size: 13px;
}

body #order-standard_cart .panel-addon .panel-body label {
    color: var(--nc-heading);
}

body #order-standard_cart .panel-addon .panel-price {
    background-color: var(--nc-surface-3);
    color: var(--nc-text);
    font-weight: 600;
}

body #order-standard_cart .panel-addon .panel-add {
    border-radius: 0;
    font-weight: 600;
}

body #order-standard_cart .panel-addon-selected {
    box-shadow: 0 0 0 1px var(--nc-blue-600);
}

/* --- Order summary sidebar --- */

body #order-standard_cart .order-summary .product-name {
    color: var(--nc-heading);
    font-weight: 600;
}

body #order-standard_cart .order-summary .product-group {
    color: var(--nc-muted);
}

body #order-standard_cart .order-summary .total-due-today span {
    color: var(--nc-muted);
}

body #order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--nc-link);
    font-weight: 600;
}

/* --- Cart --- */

body #order-standard_cart .view-cart-items .item-price .cycle,
body #order-standard_cart .view-cart-items .item-group,
body #order-standard_cart .view-cart-items .item-domain {
    color: var(--nc-muted);
}

body #order-standard_cart .btn-remove-from-cart {
    color: var(--nc-subtle);
}

body #order-standard_cart .btn-remove-from-cart:hover {
    color: #dc3545;
}

body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    border-radius: var(--nc-radius) var(--nc-radius) 0 0;
}

body #order-standard_cart .view-cart-empty {
    padding: 32px 16px;
    color: var(--nc-muted);
}

/* --- Checkout --- */

body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
    font-size: 15px;
}

body #order-standard_cart .account-select-container {
    border-color: var(--nc-border);
}

body #order-standard_cart #paymentGatewaysContainer .radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 6px 10px;
    padding: 10px 16px;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    color: var(--nc-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

body #order-standard_cart #paymentGatewaysContainer .radio-inline:hover {
    border-color: var(--nc-accent-border);
}

body #order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked),
body #order-standard_cart #paymentGatewaysContainer .radio-inline:has(.checked) {
    background-color: var(--nc-accent-soft);
    border-color: var(--nc-blue-600);
    color: var(--nc-link);
}

body #order-standard_cart .cc-input-container {
    padding: 18px;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
}

body #order-standard_cart .checkout-security-msg {
    margin-top: 24px;
    background-color: var(--nc-surface-2);
    border: 1px solid var(--nc-border);
    color: var(--nc-muted);
    font-size: 13px;
}

body #order-standard_cart .checkout-security-msg i {
    color: var(--nc-blue-600);
}

body #order-standard_cart #btnCompleteOrder {
    min-width: 260px;
    padding: 14px 34px;
    border-radius: var(--nc-radius);
    font-size: 16px;
}

body #order-standard_cart .marketing-email-optin {
    padding: 16px 18px;
    background-color: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
}

body #order-standard_cart .marketing-email-optin h2 {
    font-size: 18px;
}

/* --- Domain search results --- */

body .domain-checker-container .input-group-box .form-control {
    border: 0;
    box-shadow: none;
    font-size: 16px;
}

body .domain-checker-container .input-group-box textarea,
body .domain-checker-container .input-group-box .form-control {
    background-color: transparent;
    color: var(--nc-text);
}

body .domain-checker-container .input-group-box .multiselect,
body .domain-checker-container .input-group-box label {
    color: var(--nc-text-2);
}

body .domain-checker-container .input-group-box .btn {
    border-radius: var(--nc-radius) !important;
}

body .domain-checker-result-headline {
    font-family: var(--nc-font-display);
    font-weight: 700;
}

body #DomainSearchResults .primary-domain-header {
    color: var(--nc-heading);
    font-family: var(--nc-font-display);
}

body .suggested-domains .card-header {
    background-color: var(--nc-surface-2);
    color: var(--nc-heading);
}

body .suggested-domains .list-group-item {
    background-color: var(--nc-surface);
    border-color: var(--nc-divider);
    color: var(--nc-text);
}

body .suggested-domains .list-group-item:hover {
    background-color: var(--nc-surface-2);
}

body .suggested-domains .price {
    color: var(--nc-heading);
    font-weight: 700;
}

body .spotlight-tld {
    box-shadow: var(--nc-shadow-sm);
}

body .spotlight-tld span {
    color: var(--nc-heading);
}

body #order-standard_cart .domain-selection-options .option {
    padding: 12px 16px;
}

body #order-standard_cart .domain-selection-options .option label {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--nc-text);
    font-weight: 600;
    cursor: pointer;
}

body label > .iradio_square-blue,
body label > .icheckbox_square-blue,
body label > .icheckbox_square-green {
    flex-shrink: 0;
    margin-right: 8px;
}

body #order-standard_cart #paymentGatewaysContainer .radio-inline > .iradio_square-blue {
    margin-right: 0;
}

body #order-standard_cart .domain-input-group .form-control {
    border-radius: var(--nc-radius);
}

/* --- Order complete --- */

body #order-standard_cart .order-confirmation {
    padding: 20px;
    background-color: var(--nc-accent-soft);
    border: 1px solid var(--nc-accent-border);
    border-radius: var(--nc-radius-lg);
    color: var(--nc-text);
}

body #order-standard_cart .order-confirmation span {
    color: var(--nc-heading);
    font-weight: 800;
}

/* =====================================================
   17c. iCheck radios / checkboxes (cart, checkout, register)
   Replaces the blue.png sprite with brand-coloured CSS controls.
   ===================================================== */

body .icheckbox_square-blue,
body .iradio_square-blue,
body .icheckbox_square-green,
body .iradio_square-green {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    background: var(--nc-surface) !important;
    border: 1.5px solid var(--nc-border-strong);
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

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

body .icheckbox_square-blue.hover,
body .iradio_square-blue.hover,
body .icheckbox_square-green.hover,
body .iradio_square-green.hover {
    border-color: var(--nc-blue-600);
}

body .icheckbox_square-blue.checked,
body .iradio_square-blue.checked,
body .icheckbox_square-green.checked,
body .iradio_square-green.checked {
    background: var(--nc-blue-600) !important;
    border-color: var(--nc-blue-600);
}

body .icheckbox_square-blue.checked::after,
body .icheckbox_square-green.checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

body .iradio_square-blue.checked::after,
body .iradio_square-green.checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: #fff;
    border-radius: 50%;
}

body .icheckbox_square-blue.disabled,
body .iradio_square-blue.disabled,
body .icheckbox_square-green.disabled,
body .iradio_square-green.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body .icheckbox_square-blue.focus,
body .iradio_square-blue.focus {
    box-shadow: var(--nc-ring);
}

/* =====================================================
   18. Footer (markup in footer.tpl)
   ===================================================== */

footer.footer,
html[data-theme="dark"] footer.footer {
    padding: 48px 0 0;
    background-color: #020617;
    border-top: 1px solid var(--nc-slate-800);
    color: var(--nc-slate-400);
    font-size: 14px;
}

footer.footer a,
footer.footer .nav-link,
html[data-theme="dark"] footer.footer a {
    color: var(--nc-slate-400);
}

footer.footer a:hover,
html[data-theme="dark"] footer.footer a:hover {
    color: var(--nc-blue-300);
    text-decoration: none;
}

footer.footer .nc-footer-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

footer.footer .nc-footer-cta h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

footer.footer .nc-footer-cta p {
    margin: 8px 0 0;
}

footer.footer .nc-btn-ghost,
html[data-theme="dark"] footer.footer .nc-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--nc-radius);
    color: #fff;
    font-weight: 600;
}

footer.footer .nc-btn-ghost:hover {
    border-color: var(--nc-blue-400);
    color: #fff;
}

footer.footer .nc-footer-logo {
    width: 180px;
    height: auto;
}

footer.footer .nc-footer-about {
    max-width: 280px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.7;
}

footer.footer .nc-footer-contact a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

footer.footer h3 {
    margin-bottom: 16px;
    font-family: var(--nc-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
}

footer.footer .nc-footer-links {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

footer.footer .nc-footer-links li {
    margin-bottom: 12px;
}

footer.footer .nc-footer-pay {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

footer.footer .nc-footer-pay img {
    height: 26px;
    width: auto;
    padding: 4px 8px;
    background-color: #fff;
    border-radius: var(--nc-radius-sm);
}

footer.footer .nc-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: var(--nc-slate-500);
}

footer.footer .nc-footer-bottom .copyright {
    margin: 0;
    font-size: 12px;
    text-align: left;
}

footer.footer .nc-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

footer.footer .btn,
html[data-theme="dark"] footer.footer .btn {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--nc-radius-sm);
    color: #fff;
    font-size: 12px;
}

footer.footer .list-inline {
    margin: 0;
}

/* =====================================================
   19. Invoice view (viewinvoice.tpl; always light, printable)
   ===================================================== */

.invoice-container {
    border: 1px solid var(--nc-slate-200);
    border-radius: var(--nc-radius-xl);
    box-shadow: var(--nc-shadow-lg);
}

.invoice-container .invoice-header img {
    max-height: 48px;
    width: auto;
}

.invoice-container .invoice-header h3 {
    color: var(--nc-slate-600);
    font-size: 18px;
}

.invoice-container .invoice-status span {
    border-radius: 999px;
    font-family: var(--nc-font-display);
    letter-spacing: 0.04em;
}

.invoice-container .card-header {
    background-color: var(--nc-slate-50);
}

.invoice-container .table thead th,
.invoice-container .table td.total-row {
    background-color: var(--nc-slate-50);
}

@media print {
    .invoice-container {
        border: 0;
        box-shadow: none;
    }
}

/* =====================================================
   20. Accessibility & motion
   ===================================================== */

a:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--nc-blue-600);
    outline-offset: 2px;
}

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