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

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

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

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: #f5f1ff;
    --primary-100: #ece4ff;
    --primary-200: #d9cbfe;
    --primary-300: #bda5fc;
    --primary-400: #9b74f9;
    --primary-500: #7f4ff7;
    --primary-600: #6c3bf5;
    --primary-700: #5a2be0;
    --primary-800: #4a22b8;
    --primary-900: #3b1c92;
    --primary-950: #1e2140;

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--primary-600);          /* var(--primary-600) */
    --primary-lifted: var(--primary-700);   /* var(--primary-700) */
    --primary-accented: var(--primary-800); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: #1e2140;

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

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

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

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}


/* =====================================================================
   NEON WEBS — Client Area Branding (child of Twenty-One)
   Matches neonwebs.com: Hind type, cyan → violet → magenta gradient,
   soft lavender surfaces, violet primary buttons.
   ===================================================================== */

:root {
    --nw-cyan: #00c8f5;
    --nw-cyan-ink: #0784a8;
    --nw-violet: #6c3bf5;
    --nw-violet-hover: #5a2be0;
    --nw-magenta: #e41ee0;
    --nw-ink: #1e2140;
    --nw-ink-2: #3c4060;
    --nw-muted: #6c7091;
    --nw-line: #e8e7f3;
    --nw-soft: #f7f6fd;
    --nw-grad: linear-gradient(90deg, #00c8f5 0%, #7a3cff 52%, #e41ee0 100%);
    --nw-grad-band: linear-gradient(115deg, #2fd9f0 0%, #6f8bf7 45%, #8b5cf6 70%, #b44cf0 100%);
    --nw-shadow-card: 0 10px 30px rgba(54, 40, 140, .08);
    --nw-shadow-btn: 0 8px 20px rgba(108, 59, 245, .28);
    --nw-font: 'Hind', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Base ---------- */
body,
.primary-bg-color {
    font-family: var(--nw-font);
    color: var(--nw-ink-2);
    background:
        radial-gradient(40% 380px at 0% 0%, rgba(0, 200, 245, .07), transparent 70%),
        radial-gradient(40% 380px at 100% 0%, rgba(228, 30, 224, .06), transparent 70%),
        var(--nw-soft);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--nw-font);
    color: var(--nw-ink);
    font-weight: 600;
}
a { color: var(--nw-violet); }
a:hover { color: var(--nw-violet-hover); }
.text-primary { color: var(--nw-violet) !important; }
.bg-primary { background-color: var(--nw-violet) !important; }
.text-muted { color: var(--nw-muted) !important; }

/* ---------- Header ---------- */
header.header {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 24px rgba(40, 30, 110, .06);
    position: relative;
}
header.header::after {               /* signature gradient hairline */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--nw-grad);
}
header.header .topbar {
    background: var(--nw-ink);
    color: rgba(255, 255, 255, .75);
}
header.header .topbar .btn,
header.header .topbar .active-client .btn { color: rgba(255, 255, 255, .8); }
header.header .topbar .btn:hover { color: #fff; }
header.header .topbar .active-client .btn.btn-active-client span { border-bottom-color: var(--nw-cyan); }

header.header .navbar { padding-top: .6rem; padding-bottom: .6rem; }
.nw-brand { display: inline-flex; align-items: center; gap: .5rem; padding: 0; }
.nw-brand-icon { height: 38px; width: auto; }
.nw-brand-word { height: 44px; width: auto; }

header.header .navbar a { color: var(--nw-ink); }
header.header .navbar-nav a,
header.header .navbar-nav .nav-link {
    font-size: 15px;
    font-weight: 500;
    color: var(--nw-ink);
    transition: color .2s ease;
}
header.header .navbar-nav a:hover,
header.header .navbar-nav .nav-link:hover,
header.header .navbar-nav .active > .nav-link,
header.header .navbar-nav .show > .nav-link { color: var(--nw-violet); }

header.header .main-navbar-wrapper { border-top: 1px solid var(--nw-line); }
header.header .main-navbar-wrapper .navbar-nav .nav-link { padding: .5rem .9rem; border-radius: .5rem; }
header.header .main-navbar-wrapper .navbar-nav .nav-link:hover { background: var(--nw-soft); }

.nw-mainsite { font-size: 14px !important; color: var(--nw-muted) !important; }
.nw-mainsite:hover { color: var(--nw-violet) !important; }

header.header .search .form-control,
header.header .search .btn {
    background: var(--nw-soft);
    border-color: var(--nw-line);
}
header.header .cart-btn .badge { background: var(--nw-grad); color: #fff; }

.dropdown-menu {
    border: 1px solid var(--nw-line);
    border-radius: .75rem;
    box-shadow: 0 18px 40px rgba(54, 40, 140, .14);
    padding: .4rem;
}
.dropdown-item { border-radius: .4rem; color: var(--nw-ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--nw-soft); color: var(--nw-violet); }
.dropdown-item.active, .dropdown-item:active { background: var(--nw-violet); color: #fff; }

/* ---------- Breadcrumb ---------- */
.master-breadcrumb { background: transparent; border-bottom: 1px solid var(--nw-line); }
.master-breadcrumb .breadcrumb { background: transparent; font-size: .9rem; }
.master-breadcrumb .breadcrumb-item a { color: var(--nw-muted); }
.master-breadcrumb .breadcrumb-item.active { color: var(--nw-violet); font-weight: 500; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--nw-font); font-weight: 600; border-radius: .375rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: var(--nw-violet);
    border-color: var(--nw-violet);
    color: #fff;
    box-shadow: var(--nw-shadow-btn);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--nw-violet-hover);
    border-color: var(--nw-violet-hover);
    color: #fff;
    transform: translateY(-1px);
}
.btn-outline-primary { color: var(--nw-violet); border-color: var(--nw-violet); }
.btn-outline-primary:hover { background: var(--nw-violet); border-color: var(--nw-violet); color: #fff; }
.btn-success, .btn-info {
    background: linear-gradient(90deg, #2fe0e0, #00c8f5);
    border-color: #00c8f5;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 200, 245, .28);
}
.btn-success:hover, .btn-info:hover { background: #00b3dc; border-color: #00b3dc; color: #fff; }
.btn-default { background: #fff; border-color: var(--nw-line); color: var(--nw-ink); }
.btn-default:hover { border-color: var(--nw-violet); color: var(--nw-violet); background: #fff; }
.btn:focus, .btn.focus, .form-control:focus, .custom-select:focus {
    box-shadow: 0 0 0 .2rem rgba(108, 59, 245, .2);
}

/* ---------- Forms ---------- */
.form-control, .custom-select, .input-group-text {
    border-color: var(--nw-line);
    border-radius: .375rem;
}
.form-control:focus, .custom-select:focus { border-color: var(--nw-violet); }
.input-group-text { background: var(--nw-soft); color: var(--nw-muted); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--nw-violet); border-color: var(--nw-violet); }

/* ---------- Cards & panels ---------- */
.card {
    border: 1px solid var(--nw-line);
    border-radius: .75rem;
    box-shadow: var(--nw-shadow-card);
    overflow: hidden;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--nw-line);
}
.card-header .card-title { color: var(--nw-ink); font-weight: 600; font-size: 1.05rem; }
.card-footer { background: var(--nw-soft); border-top: 1px solid var(--nw-line); }
.client-home-cards .card { border-top: 3px solid transparent; border-image: var(--nw-grad) 1; border-image-slice: 1 0 0 0; }

/* ---------- Sidebar ---------- */
.sidebar .card-sidebar .card-header { background: #fff; }
.sidebar .card-sidebar .panel-title,
.sidebar .card-sidebar .card-title { font-size: 15px; }
.sidebar .card-sidebar .card-title i { color: var(--nw-violet); }
.sidebar .list-group-item { border-color: var(--nw-line); color: var(--nw-ink-2); }
.sidebar .list-group-item:hover { background: var(--nw-soft); color: var(--nw-violet); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background: var(--nw-violet);
    border-color: var(--nw-violet);
    color: #fff;
}
.sidebar .list-group-item.active .badge { color: var(--nw-violet); }

/* ---------- Dashboard tiles ---------- */
.tiles { border-radius: .75rem; overflow: hidden; box-shadow: var(--nw-shadow-card); border: 1px solid var(--nw-line); background: #fff; }
.tiles .tile { background: #fff; border-color: var(--nw-line) !important; padding: 16px 22px; }
.tiles .tile:hover { background: var(--nw-soft); }
.tiles .tile .stat { color: var(--nw-ink); font-weight: 600; }
.tiles .tile .title { color: var(--nw-muted); letter-spacing: .04em; }
.tiles .tile i { color: #e2ddf7; }
.tiles .tile:hover i { color: var(--nw-violet); }
.tiles .tile .highlight { height: 3px; }
.tiles .bg-color-blue { background: var(--nw-cyan) !important; }
.tiles .bg-color-green { background: #7a3cff !important; }
.tiles .bg-color-red { background: var(--nw-magenta) !important; }
.tiles .bg-color-gold { background: linear-gradient(90deg, #7a3cff, #e41ee0) !important; }

/* ---------- Homepage domain search (hero) ---------- */
.home-domain-search {
    position: relative;
    background:
        radial-gradient(40% 60% at 8% 30%, rgba(0, 200, 245, .14), transparent 70%),
        radial-gradient(35% 55% at 92% 20%, rgba(228, 30, 224, .12), transparent 70%),
        linear-gradient(180deg, #fff, #faf9ff) !important;
    border-bottom: 1px solid var(--nw-line);
}
.home-domain-search h2 {
    font-size: 2.4rem;
    font-weight: 600;
    background: var(--nw-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.home-domain-search .input-group-wrapper {
    border: 1px solid var(--nw-line);
    border-radius: .75rem;
    box-shadow: 0 18px 40px rgba(54, 40, 140, .12);
}
.home-domain-search .tld-logos { color: var(--nw-muted); }

/* Homepage "How can we help" icon buttons */
.action-icon-btns a { border-radius: .75rem; border: 1px solid var(--nw-line); background: #fff; box-shadow: var(--nw-shadow-card); color: var(--nw-ink) !important; }
.action-icon-btns a:hover { border-color: var(--nw-violet); }
.action-icon-btns .ico-container i { color: var(--nw-violet) !important; }

/* ---------- Tables, tabs, pagination, badges ---------- */
.table thead th { border-bottom-color: var(--nw-line); color: var(--nw-muted); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.table td, .table th { border-top-color: var(--nw-line); }
.table-hover tbody tr:hover, table.table-list tbody tr:hover { background: var(--nw-soft); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--nw-violet); border-color: var(--nw-line) var(--nw-line) #fff; }
.nav-pills .nav-link.active { background: var(--nw-violet); }
.page-item.active .page-link { background: var(--nw-violet); border-color: var(--nw-violet); }
.page-link { color: var(--nw-violet); }
.badge-info, .badge-primary { background: var(--nw-violet); }
.label-success, .status-active, .status-paid { background-color: #12b886 !important; }

/* ---------- Login / register ---------- */
.login-form .card,
.mw-540.card { border-top: 0; }
.login-form .card::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--nw-grad);
}

/* ---------- Footer ---------- */
footer.footer {
    position: relative;
    padding: 0 0 40px;
    background: var(--nw-ink);
    color: rgba(255, 255, 255, .72);
    font-family: var(--nw-font);
}
.nw-footer-band { height: 4px; background: var(--nw-grad); margin-bottom: 44px; }
.nw-footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-bottom: 32px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.nw-footer-logo img { height: 110px; width: auto; }
.nw-footer-line { margin: 0; max-width: 34rem; font-size: 1rem; color: rgba(255, 255, 255, .75); }
.nw-footer-links { justify-content: center; }
footer.footer .nav-link { color: rgba(255, 255, 255, .78); }
footer.footer .nav-link:hover { color: var(--nw-cyan); }
footer.footer .btn { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
footer.footer .btn:hover { background: rgba(255, 255, 255, .16); }
footer.footer .copyright { color: rgba(255, 255, 255, .55); margin: 24px 0 0; }

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .nw-brand-icon { height: 30px; }
    .nw-brand-word { height: 34px; }
    .home-domain-search h2 { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover { transform: none !important; }
}