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

    ** 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: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);
    /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);
    /* var(--primary-700) */
    --primary-accented: var(--neutral-700);
    /* 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: var(--neutral-900);

    /* 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%;
}

:root {
    --vs-bg: #0a0a0f;
    --vs-surface: #111118;
    --vs-surface-2: #171722;
    --vs-text: #f0f0f5;
    --vs-text-rgb: 240, 240, 245;
    --vs-text-secondary: #b6b8c4;
    --vs-border: rgba(255, 255, 255, 0.12);
    --vs-focus-ring: rgba(0, 212, 255, 0.5);
    --vs-accent: #00d4ff;
    --vs-accent-rgb: 0, 212, 255;
    --vs-accent-soft: rgba(var(--vs-accent-rgb), 0.16);
    --vs-radius-md: 0.75rem;
    --vs-radius-lg: 1rem;
    --vs-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    --vs-transition-fast: 0.2s ease;
    --vs-transition-base: 0.28s ease;

    /* Global semantic tokens (shared across template pages) */
    --vs-text-body: var(--vs-text);
    --vs-text-muted: var(--vs-text-secondary);
    --vs-text-placeholder: rgba(var(--vs-text-rgb), 0.58);
    --vs-border-default: var(--vs-border);
    --vs-border-strong: rgba(var(--vs-accent-rgb), 0.48);

    --vs-input-bg: var(--vs-surface-2);
    --vs-input-text: var(--vs-text);
    --vs-input-border: var(--vs-border-default);
    --vs-input-placeholder: var(--vs-text-placeholder);

    --vs-btn-primary-bg: var(--vs-accent);
    --vs-btn-primary-border: var(--vs-accent);
    --vs-btn-primary-text: #041016;
    --vs-btn-primary-shadow: 0 10px 24px rgba(var(--vs-accent-rgb), 0.22);

    --vs-btn-secondary-bg: var(--vs-surface-2);
    --vs-btn-secondary-border: var(--vs-border-default);
    --vs-btn-secondary-text: var(--vs-text);

    --vs-breadcrumb-bg: var(--vs-surface-2);
    --vs-breadcrumb-border: var(--vs-border-default);
    --vs-breadcrumb-text: var(--vs-text-secondary);
    --vs-breadcrumb-active: var(--vs-text);
    --vs-breadcrumb-hover: var(--vs-accent);

    --vs-header-text: var(--vs-text);
    --vs-header-text-muted: var(--vs-text-secondary);
    --vs-header-border: var(--vs-border-default);
    --vs-header-control-bg: var(--vs-surface-2);
    --vs-header-control-border: var(--vs-border-default);
    --vs-header-placeholder: var(--vs-input-placeholder);
    --vs-header-button-bg: var(--vs-surface-2);
    --vs-header-button-border: var(--vs-border-default);
    --vs-header-button-text: var(--vs-text);

    --vs-search-bg: var(--vs-surface-2);
    --vs-search-border: var(--vs-border-default);
    --vs-search-text: var(--vs-text);
    --vs-search-placeholder: var(--vs-input-placeholder);
    --vs-search-focus-border: var(--vs-accent);
    --vs-search-focus-ring: rgba(var(--vs-accent-rgb), 0.24);
    --vs-search-icon-bg: var(--vs-surface);
    --vs-search-icon-divider: var(--vs-search-border);

    --vs-header-control-height: 44px;
    --vs-header-icon-size: 1rem;
    --vs-header-icon-offset-y: 0;
}

html[data-theme="light"] {
    --vs-bg: #f8fafc;
    --vs-surface: #ffffff;
    --vs-surface-2: #f1f5f9;
    --vs-text: #18181b;
    --vs-text-rgb: 24, 24, 27;
    --vs-text-secondary: #52525b;
    --vs-border: rgba(24, 24, 27, 0.14);
    --vs-focus-ring: rgba(0, 212, 255, 0.38);
    --vs-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
    --vs-text-placeholder: rgba(var(--vs-text-rgb), 0.52);
    --vs-btn-primary-text: #041016;
    --vs-btn-primary-shadow: 0 8px 20px rgba(var(--vs-accent-rgb), 0.2);

    --vs-header-text: var(--vs-text);
    --vs-header-text-muted: var(--vs-text-secondary);
    --vs-header-border: var(--vs-border-default);
    --vs-header-control-bg: var(--vs-surface);
    --vs-header-control-border: var(--vs-border-default);
    --vs-header-placeholder: var(--vs-input-placeholder);
    --vs-header-button-bg: var(--vs-surface);
    --vs-header-button-border: var(--vs-border-default);
    --vs-header-button-text: var(--vs-text);

    --vs-search-bg: var(--vs-surface);
    --vs-search-border: var(--vs-border-default);
    --vs-search-text: var(--vs-text);
    --vs-search-placeholder: var(--vs-input-placeholder);
    --vs-search-focus-border: var(--vs-accent);
    --vs-search-focus-ring: rgba(var(--vs-accent-rgb), 0.2);
    --vs-search-icon-bg: var(--vs-surface-2);
    --vs-search-icon-divider: var(--vs-search-border);

    --vs-header-control-height: 44px;
    --vs-header-icon-size: 1rem;
    --vs-header-icon-offset-y: 0;
}

html[data-accent="cyan"] {
    --vs-accent: #00d4ff;
    --vs-accent-rgb: 0, 212, 255;
}

html[data-accent="purple"] {
    --vs-accent: #a855f7;
    --vs-accent-rgb: 168, 85, 247;
}

html[data-accent="green"] {
    --vs-accent: #22c55e;
    --vs-accent-rgb: 34, 197, 94;
}

html[data-accent="orange"] {
    --vs-accent: #f97316;
    --vs-accent-rgb: 249, 115, 22;
}

html[data-accent="pink"] {
    --vs-accent: #ec4899;
    --vs-accent-rgb: 236, 72, 153;
}

/* ========================================
   Global Reusable UI Tokens Mapping
   ======================================== */
body,
.wrapper,
#main-body {
    color: var(--vs-text-body);
}

.text-muted,
.text-faded,
small.text-muted,
.small.text-muted {
    color: var(--vs-text-muted) !important;
}

.card,
.panel,
.modal-content,
.dropdown-menu,
.list-group-item,
.table,
.well,
.alert {
    border-color: var(--vs-border-default);
}

.form-control,
.custom-select,
.input-group-text,
input.form-control,
textarea.form-control,
select.form-control {
    background: var(--vs-input-bg);
    color: var(--vs-input-text);
    border-color: var(--vs-input-border);
    transition: border-color var(--vs-transition-fast), box-shadow var(--vs-transition-fast), background var(--vs-transition-fast), color var(--vs-transition-fast);
}

.form-control::placeholder,
.custom-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--vs-input-placeholder) !important;
    opacity: 1;
}

.form-control:focus,
.custom-select:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: var(--vs-border-strong) !important;
    box-shadow: 0 0 0 0.2rem var(--vs-accent-soft);
}

.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background: var(--vs-btn-primary-bg) !important;
    border-color: var(--vs-btn-primary-border) !important;
    color: var(--vs-btn-primary-text) !important;
    box-shadow: var(--vs-btn-primary-shadow);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
    filter: brightness(1.05);
    color: var(--vs-btn-primary-text) !important;
}

.btn-secondary,
.btn-default,
.btn-outline-secondary {
    background: var(--vs-btn-secondary-bg) !important;
    border-color: var(--vs-btn-secondary-border) !important;
    color: var(--vs-btn-secondary-text) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-outline-secondary:hover,
.btn-secondary:focus,
.btn-default:focus,
.btn-outline-secondary:focus {
    border-color: var(--vs-accent) !important;
    color: var(--vs-accent) !important;
    background: var(--vs-accent-soft) !important;
}

.master-breadcrumb,
.breadcrumb {
    background: var(--vs-breadcrumb-bg) !important;
    border-color: var(--vs-breadcrumb-border) !important;
}

.master-breadcrumb .breadcrumb {
    margin-bottom: 0;
    background: transparent !important;
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.master-breadcrumb .breadcrumb,
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a {
    color: var(--vs-breadcrumb-text) !important;
}

.breadcrumb-item.active,
.breadcrumb-item a:hover,
.master-breadcrumb .breadcrumb-item.active,
.master-breadcrumb .breadcrumb-item a:hover {
    color: var(--vs-breadcrumb-active) !important;
}

.breadcrumb-item a:focus-visible,
.master-breadcrumb .breadcrumb-item a:focus-visible {
    outline: 2px solid var(--vs-focus-ring);
    outline-offset: 2px;
}

/* ========================================
   Breadcrumb Card (global - above page content & sidebar)
   ======================================== */
#main-body .vs-breadcrumb-card,
.primary-content .vs-breadcrumb-card {
    background: var(--vs-surface) !important;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-md);
    box-shadow: none;
}

#main-body .vs-breadcrumb-card-body,
.primary-content .vs-breadcrumb-card-body {
    padding: 0.5rem 0.875rem;
}

#main-body .vs-breadcrumb-card .master-breadcrumb,
.primary-content .vs-breadcrumb-card .master-breadcrumb {
    background: transparent !important;
    border: none !important;
    padding: 0;
}

#main-body .vs-breadcrumb-card .breadcrumb,
.primary-content .vs-breadcrumb-card .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent !important;
    font-size: 0.8125rem;
}

#main-body .vs-breadcrumb-card .breadcrumb-item,
.primary-content .vs-breadcrumb-card .breadcrumb-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

#main-body .vs-breadcrumb-card .vs-breadcrumb-icon,
.primary-content .vs-breadcrumb-card .vs-breadcrumb-icon {
    font-size: 0.75em;
    opacity: 0.85;
}

#main-body .vs-breadcrumb-card .breadcrumb-item.active .vs-breadcrumb-icon,
.primary-content .vs-breadcrumb-card .breadcrumb-item.active .vs-breadcrumb-icon {
    opacity: 1;
}

#main-body .vs-breadcrumb-card .breadcrumb-item+.breadcrumb-item::before,
.primary-content .vs-breadcrumb-card .breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: var(--vs-text-secondary);
    opacity: 0.6;
}

#main-body .vs-breadcrumb-card .breadcrumb-item a,
.primary-content .vs-breadcrumb-card .breadcrumb-item a {
    color: var(--vs-text-secondary) !important;
    text-decoration: none;
    transition: color var(--vs-transition-fast);
}

#main-body .vs-breadcrumb-card .breadcrumb-item a:hover,
.primary-content .vs-breadcrumb-card .breadcrumb-item a:hover {
    color: var(--vs-accent) !important;
}

#main-body .vs-breadcrumb-card .breadcrumb-item.active,
.primary-content .vs-breadcrumb-card .breadcrumb-item.active {
    color: var(--vs-text) !important;
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {

    #main-body .vs-breadcrumb-card .breadcrumb-item a,
    .primary-content .vs-breadcrumb-card .breadcrumb-item a {
        transition: none;
    }
}

/* ========================================
   Main Menu Sidebar
   ======================================== */
.vs-main-menu-sidebar {
    background: var(--vs-surface) !important;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-md);
}

.vs-main-menu-sidebar .card-header {
    background: var(--vs-surface-2);
    border-bottom: 1px solid var(--vs-border);
    color: var(--vs-text);
    padding: 0.75rem 1rem;
}

.vs-main-menu-sidebar .card-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.vs-main-menu-nav .list-group-item {
    background: transparent;
    border-color: var(--vs-border);
    color: var(--vs-text);
    padding: 0.625rem 1rem;
    min-height: 44px;
    cursor: pointer;
}

.vs-main-menu-nav .list-group-item:hover,
.vs-main-menu-nav .list-group-item:focus {
    background: var(--vs-accent-soft);
    color: var(--vs-accent);
}

.vs-main-menu-nav .list-group-item:focus-visible {
    outline: 2px solid var(--vs-focus-ring);
    outline-offset: 2px;
}

.vs-main-menu-nav .list-group-item.active {
    background: var(--vs-accent-soft);
    color: var(--vs-accent);
}

.vs-main-menu-nav .vs-main-menu-subitem {
    padding-left: 2rem;
    font-size: 0.875rem;
}

.vs-main-menu-nav .vs-main-menu-icon {
    width: 1.25rem;
    opacity: 0.9;
}

.vs-main-menu-toggle .vs-main-menu-chevron {
    font-size: 0.75rem;
    transition: transform var(--vs-transition-fast);
}

.vs-main-menu-toggle[aria-expanded="true"] .vs-main-menu-chevron {
    transform: rotate(180deg);
}

.vs-main-menu-sidebar-wrapper+.sidebar {
    margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .vs-main-menu-toggle .vs-main-menu-chevron {
        transition: none;
    }
}

/* ========================================
   Header Theme Integration
   ======================================== */
#header,
#header .topbar,
#header .navbar,
#header .main-navbar-wrapper {
    background: var(--vs-surface) !important;
    color: var(--vs-header-text);
    transition: background var(--vs-transition-base), color var(--vs-transition-base), border-color var(--vs-transition-base);
}

#header .topbar {
    border-bottom: 1px solid var(--vs-header-border);
}

#header .main-navbar-wrapper {
    border-top: 1px solid var(--vs-header-border);
    border-bottom: 1px solid var(--vs-header-border);
}

#header .navbar-brand,
#header .navbar-brand:hover,
#header .navbar-brand:focus,
#header .navbar a,
#header .navbar-light .navbar-nav .nav-link,
#header .navbar-light .navbar-brand,
#header .nav-link,
#header .btn,
#header .input-group-text,
#header .form-control,
#header .active-client .btn,
#header .active-client .input-group-text {
    color: var(--vs-header-text) !important;
}

#header .topbar .active-client .btn,
#header .topbar .active-client .btn.btn-active-client span,
#header .navbar-light .navbar-nav .nav-link.disabled {
    color: var(--vs-header-text-muted) !important;
    border-color: var(--vs-header-border) !important;
}

#header .nav-link,
#header .btn {
    min-height: 44px;
    cursor: pointer;
}

#header .topbar .d-flex,
#header .toolbar,
#header .toolbar .nav-item,
#header .toolbar .nav-link,
#header .toolbar .btn.nav-link,
#header .cart-btn,
#header .vs-appearance-trigger,
#header .btn-default,
#header .search .btn,
#header .search .input-group-prepend,
#header .search .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vs-header-control-height);
    line-height: 1;
}

#header .toolbar,
#header .toolbar .nav-item {
    align-self: center;
}

#header .toolbar .nav-link,
#header .toolbar .btn.nav-link,
#header .cart-btn,
#header .vs-appearance-trigger,
#header .btn-default {
    gap: 0.4rem;
    padding-top: 0;
    padding-bottom: 0;
}

#header .nav-link:hover,
#header .nav-link:focus,
#header .btn:hover,
#header .btn:focus {
    color: var(--vs-accent) !important;
}

#header .toolbar .nav-link,
#header .toolbar .btn.nav-link,
#header .cart-btn,
#header .vs-appearance-trigger,
#header .btn-default {
    background: var(--vs-header-button-bg) !important;
    border: 1px solid var(--vs-header-button-border) !important;
    color: var(--vs-header-button-text) !important;
}

#header .toolbar .nav-link:hover,
#header .toolbar .nav-link:focus,
#header .cart-btn:hover,
#header .cart-btn:focus,
#header .vs-appearance-trigger:hover,
#header .vs-appearance-trigger:focus,
#header .btn-default:hover,
#header .btn-default:focus {
    border-color: var(--vs-accent) !important;
    background: var(--vs-accent-soft) !important;
    color: var(--vs-accent) !important;
}

#header .search {
    border: 1px solid var(--vs-search-border) !important;
    border-radius: var(--vs-radius-md);
    background: var(--vs-search-bg) !important;
    min-height: var(--vs-header-control-height);
    overflow: hidden;
    transition: border-color var(--vs-transition-fast), box-shadow var(--vs-transition-fast), background var(--vs-transition-fast);
}

#header .search:focus-within {
    border-color: var(--vs-search-focus-border) !important;
    box-shadow: 0 0 0 3px var(--vs-search-focus-ring);
}

#header .form-control,
#header .input-group-text,
#header .input-group-prepend .btn,
#header .search .btn,
#header .search .form-control {
    background: var(--vs-search-bg) !important;
    border-color: var(--vs-search-border) !important;
    color: var(--vs-search-text) !important;
}

#header .search .form-control::placeholder,
#header input::placeholder {
    color: var(--vs-search-placeholder) !important;
    opacity: 1;
}

#header .search .form-control,
#header .search .btn,
#header .search .input-group-text,
#header .search .input-group-prepend .btn {
    border: 0 !important;
    box-shadow: none !important;
}

#header .search .input-group-prepend {
    background: var(--vs-search-icon-bg) !important;
    border-right: 1px solid var(--vs-search-icon-divider) !important;
}

#header .search .input-group-prepend .btn {
    background: transparent !important;
}

#header .search .form-control {
    min-height: var(--vs-header-control-height);
    height: var(--vs-header-control-height);
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
}

#header .search .form-control,
#header .search .form-control::placeholder {
    font-size: 1rem;
}

#header .search .form-control:focus,
#header .search .form-control:focus-visible,
#header .search .btn:focus,
#header .search .btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

#header .search .btn:hover,
#header .search .btn:focus,
#header .input-group-prepend .btn:hover,
#header .input-group-prepend .btn:focus {
    background: var(--vs-accent-soft) !important;
    border-color: var(--vs-accent) !important;
    color: var(--vs-accent) !important;
}

/* Unified search focus style (global reusable) */
.input-group.search,
.input-group.kb-search,
.kb-search.input-group {
    border: 1px solid var(--vs-search-border);
    border-radius: var(--vs-radius-md);
    background: var(--vs-search-bg);
    overflow: hidden;
    transition: border-color var(--vs-transition-fast), box-shadow var(--vs-transition-fast), background var(--vs-transition-fast);
}

.input-group.search:focus-within,
.input-group.kb-search:focus-within,
.kb-search.input-group:focus-within {
    border-color: var(--vs-search-focus-border);
    box-shadow: 0 0 0 3px var(--vs-search-focus-ring);
}

.input-group.search .form-control,
.input-group.search .btn,
.input-group.search .input-group-text,
.input-group.search .input-group-prepend,
.input-group.kb-search .form-control,
.input-group.kb-search .btn,
.input-group.kb-search .input-group-text,
.input-group.kb-search .input-group-prepend,
.kb-search.input-group .form-control,
.kb-search.input-group .btn,
.kb-search.input-group .input-group-text,
.kb-search.input-group .input-group-prepend {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--vs-search-text);
}

.input-group.search .input-group-prepend,
.input-group.kb-search .input-group-prepend,
.kb-search.input-group .input-group-prepend {
    background: var(--vs-search-icon-bg) !important;
    border-right: 1px solid var(--vs-search-icon-divider) !important;
}

.input-group.search .form-control::placeholder,
.input-group.kb-search .form-control::placeholder,
.kb-search.input-group .form-control::placeholder {
    color: var(--vs-search-placeholder) !important;
    opacity: 1;
}

.input-group.search .form-control:focus,
.input-group.search .btn:focus,
.input-group.kb-search .form-control:focus,
.input-group.kb-search .btn:focus,
.kb-search.input-group .form-control:focus,
.kb-search.input-group .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

#header .btn-active-client,
#header .btn-return-to-admin,
#header .cart-btn {
    border: 1px solid var(--vs-header-button-border) !important;
    background: var(--vs-header-button-bg) !important;
}

#header .btn-active-client:hover,
#header .btn-return-to-admin:hover,
#header .cart-btn:hover {
    border-color: var(--vs-accent) !important;
    background: var(--vs-accent-soft) !important;
}

#header .badge-info {
    background: var(--vs-accent) !important;
    color: var(--vs-bg) !important;
}

#header .cart-btn i,
#header .cart-btn .far,
#header .cart-btn .fas {
    font-size: var(--vs-header-icon-size);
    line-height: 1;
    transform: translateY(var(--vs-header-icon-offset-y));
}

#header .cart-btn .fa-shopping-cart,
#header .cart-btn .fa-cart-shopping {
    color: var(--vs-header-button-text);
    text-shadow: none;
    transition: color var(--vs-transition-fast), text-shadow var(--vs-transition-fast);
}

#header .cart-btn:hover .fa-shopping-cart,
#header .cart-btn:hover .fa-cart-shopping,
#header .cart-btn:focus .fa-shopping-cart,
#header .cart-btn:focus .fa-cart-shopping,
#header .cart-btn:focus-visible .fa-shopping-cart,
#header .cart-btn:focus-visible .fa-cart-shopping {
    color: var(--vs-accent);
    text-shadow: 0 0 10px rgba(var(--vs-accent-rgb), 0.25);
}

#header .toolbar .nav-link .badge,
#header .cart-btn .badge {
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
}

#header .dropdown-menu {
    background: var(--vs-surface) !important;
    border: 1px solid var(--vs-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    padding: 0.375rem !important;
    margin-top: 10px !important;
    min-width: 200px;
    animation: vs-dropdown-fade-in 0.2s ease;
}

#header .navbar-nav .dropdown-menu {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Premium hover glow effect - icons only */
#header .dropdown-item {
    position: relative;
    overflow: hidden;
}

@keyframes vs-dropdown-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#header .dropdown-item,
#header .client-alerts a,
#header .client-alerts .message {
    color: var(--vs-text) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    margin: 2px 0 !important;
    min-height: 36px;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    transition: all var(--vs-transition-fast) !important;
    font-size: 0.95rem;
    font-weight: 500;
}

#header .dropdown-item i,
#header .client-alerts a i {
    width: 1.25rem !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    font-size: 0.9rem !important;
    color: var(--vs-text-secondary) !important;
    transition: all var(--vs-transition-fast) !important;
}

#header .dropdown-item:hover i,
#header .dropdown-item:focus i,
#header .dropdown-item.active i,
#header .client-alerts a:hover i,
#header .client-alerts a:focus i {
    color: var(--vs-accent) !important;
    transform: scale(1.1);
}

#header .dropdown-item,
#header .client-alerts a {
    color: var(--vs-text) !important;
}

#header .dropdown-item:hover,
#header .dropdown-item:focus,
#header .dropdown-item.active,
#header .client-alerts a:hover,
#header .client-alerts a:focus {
    color: var(--vs-text) !important;
    background: var(--vs-surface-2) !important;
    box-shadow: 0 0 0 1px var(--vs-accent), 0 4px 12px rgba(0, 212, 255, 0.15);
    transform: translateX(4px);
}

#header .dropdown-item:active {
    transform: scale(0.98);
    background: var(--vs-accent) !important;
    color: var(--vs-surface) !important;
}

#header .dropdown-item:active .vs-dropdown-text {
    color: var(--vs-surface) !important;
}

#header .dropdown-divider {
    border-color: var(--vs-border) !important;
    margin: 0.5rem 0 !important;
    opacity: 0.6;
}

/* Premium Theme Section in Dropdown */
#header .vs-dropdown-theme-section {
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--vs-border);
    margin-top: 0.5rem;
}

#header .vs-dropdown-theme-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--vs-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 0.5rem 0.5rem;
    margin-bottom: 0.5rem;
}

#header .vs-dropdown-theme-header i {
    font-size: 0.875rem;
    color: var(--vs-accent);
}

#header .vs-dropdown-theme-toggle {
    padding: 0 0.5rem;
    margin-bottom: 0.75rem;
}

#header .vs-theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--vs-surface-2);
    border: 1px solid var(--vs-border);
    border-radius: 8px;
    color: var(--vs-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--vs-transition-fast);
}

#header .vs-theme-toggle-btn .theme-icon-dark,
#header .vs-theme-toggle-btn .theme-icon-light {
    font-size: 1rem;
    transition: all var(--vs-transition-base);
}

/* Show moon in dark mode, sun in light mode */
html[data-theme="dark"] .vs-theme-toggle-btn .theme-icon-dark {
    display: inline-block;
}

html[data-theme="dark"] .vs-theme-toggle-btn .theme-icon-light {
    display: none;
}

html[data-theme="light"] .vs-theme-toggle-btn .theme-icon-dark {
    display: none;
}

html[data-theme="light"] .vs-theme-toggle-btn .theme-icon-light {
    display: inline-block;
}

#header .vs-theme-toggle-btn:hover {
    background: var(--vs-accent-soft);
    border-color: var(--vs-accent);
    color: var(--vs-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#header .vs-dropdown-accent-section {
    padding: 0 0.5rem;
}

#header .vs-dropdown-accent-label {
    display: block;
    font-size: 0.75rem;
    color: var(--vs-text-secondary);
    margin-bottom: 0.5rem;
}

#header .vs-dropdown-accent-grid {
    display: flex;
    gap: 0.625rem;
    justify-content: center;
}

#header .vs-accent-dot {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--vs-border);
    background: var(--accent-color);
    cursor: pointer;
    transition: all var(--vs-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

#header .vs-accent-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--vs-surface), 0 0 12px var(--accent-color);
}

#header .vs-accent-dot.is-active {
    border-color: var(--vs-text);
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--vs-surface), 0 0 0 4px var(--accent-color);
}

#header .vs-accent-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0);
    transition: all var(--vs-transition-fast);
}

#header .vs-accent-dot.is-active .vs-accent-check {
    opacity: 1;
    transform: scale(1);
}

#header .vs-accent-check i {
    color: #fff;
    font-size: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    #header .vs-dropdown-theme-section {
        padding: 0.5rem;
    }

    #header .vs-accent-dot {
        width: 36px;
        height: 36px;
    }
}

#header .dropdown-item .badge {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    padding: 0.2rem 0.45rem !important;
    border-radius: 6px !important;
    background: var(--vs-accent-soft) !important;
    color: var(--vs-accent) !important;
    margin-left: auto !important;
    transition: all var(--vs-transition-fast) !important;
}

#header .dropdown-item:hover .badge,
#header .dropdown-item:focus .badge,
#header .dropdown-item.active .badge {
    background: var(--vs-accent) !important;
    color: var(--vs-surface) !important;
}

/* Dropdown icon styling - premium icon boxes */
#header .dropdown-item i[class*="fa-"],
#header .client-alerts a i[class*="fa-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    background: var(--vs-surface-2);
    font-size: 0.75rem !important;
    transition: all var(--vs-transition-fast) !important;
}

#header .dropdown-item:hover i[class*="fa-"],
#header .dropdown-item:focus i[class*="fa-"],
#header .dropdown-item.active i[class*="fa-"],
#header .client-alerts a:hover i[class*="fa-"],
#header .client-alerts a:focus i[class*="fa-"] {
    background: var(--vs-accent);
    color: var(--vs-surface) !important;
}

#header .dropdown-header {
    color: var(--vs-text-secondary) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.375rem 0.75rem !important;
    border-bottom: 1px solid var(--vs-border) !important;
    margin-bottom: 0.25rem !important;
}

/* Navbar Dropdown Enhancements */
#header .navbar-nav .dropdown-toggle {
    position: relative;
    padding-right: 1rem !important;
}

#header .navbar-nav .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
    transition: transform var(--vs-transition-fast), border-color var(--vs-transition-fast);
}

#header .navbar-nav .dropdown-toggle:hover::after,
#header .navbar-nav .show>.dropdown-toggle::after,
#header .navbar-nav .dropdown.open>.dropdown-toggle::after,
#header .navbar-nav .dropdown:hover>.dropdown-toggle::after {
    transform: rotate(180deg);
    border-top-color: var(--vs-accent);
}

#header .navbar-nav .dropdown>a:hover {
    color: var(--vs-accent) !important;
}

.master-breadcrumb {
    background: var(--vs-breadcrumb-bg) !important;
    border-top: 1px solid var(--vs-breadcrumb-border);
    border-bottom: 1px solid var(--vs-breadcrumb-border);
}

.master-breadcrumb .breadcrumb,
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a {
    color: var(--vs-breadcrumb-text) !important;
}

.master-breadcrumb .breadcrumb-item.active,
.master-breadcrumb .breadcrumb-item a:hover {
    color: var(--vs-breadcrumb-active) !important;
}

#header :focus-visible,
.master-breadcrumb :focus-visible {
    outline: 2px solid var(--vs-focus-ring);
    outline-offset: 2px;
}

.vs-appearance-trigger {
    min-height: 44px;
}

#header .toolbar .dropdown,
#header .toolbar .vs-appearance-dropdown {
    position: relative;
}

#header .toolbar .dropdown-menu,
#header .toolbar .vs-appearance-menu {
    position: absolute !important;
    top: calc(100% + 0.35rem);
    right: 0;
    left: auto;
    margin-top: 0;
    float: none;
    z-index: 1080;
}

.vs-appearance-menu {
    min-width: 240px;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-md);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow);
    color: var(--vs-text);
}

.vs-appearance-menu p {
    color: var(--vs-text-secondary);
    font-size: 0.875rem;
}

.vs-appearance-menu .vs-theme-toggle,
.vs-appearance-menu .vs-accent-btn {
    min-height: 44px;
    border: 1px solid var(--vs-border);
    color: var(--vs-text);
    background: var(--vs-surface-2);
}

.vs-appearance-menu .vs-theme-toggle:hover,
.vs-appearance-menu .vs-theme-toggle:focus,
.vs-appearance-menu .vs-accent-btn.is-active,
.vs-appearance-menu .vs-accent-btn:hover,
.vs-appearance-menu .vs-accent-btn:focus {
    border-color: var(--vs-accent);
    color: var(--vs-accent);
    background: var(--vs-accent-soft);
}

.vs-appearance-menu .vs-accent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vs-landing {
    color: var(--vs-text);
}

.vs-landing .vs-hero {
    position: relative;
}

.vs-landing .vs-title {
    color: var(--vs-text);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.vs-landing .vs-subtitle {
    color: var(--vs-text-secondary);
    font-size: 1.05rem;
    max-width: 70ch;
}

.vs-landing .vs-disclaimer {
    color: var(--vs-text-secondary);
    border: 1px solid var(--vs-border);
    background: var(--vs-surface-2);
    border-radius: var(--vs-radius-md);
    padding: 0.875rem 1rem;
}

.vs-landing .vs-badge {
    min-height: 44px;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    color: var(--vs-accent);
    border: 1px solid var(--vs-accent);
    background: var(--vs-accent-soft);
    font-weight: 600;
}

.vs-landing .vs-btn-primary {
    min-height: 44px;
    border: 1px solid transparent;
    background: var(--vs-accent);
    color: var(--vs-bg);
    font-weight: 700;
}

.vs-landing .vs-btn-primary:hover,
.vs-landing .vs-btn-primary:focus {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.vs-landing .vs-btn-outline {
    min-height: 44px;
    border-color: var(--vs-border);
    color: var(--vs-text);
    background: transparent;
}

.vs-landing .vs-btn-outline:hover,
.vs-landing .vs-btn-outline:focus {
    border-color: var(--vs-accent);
    color: var(--vs-accent);
}

.vs-landing .vs-trust-item {
    min-height: 44px;
    border-radius: var(--vs-radius-md);
    border: 1px solid var(--vs-border);
    background: var(--vs-surface);
    color: var(--vs-text-secondary);
    padding: 0.8rem;
    text-align: center;
    font-weight: 600;
}

.vs-landing .vs-panel,
.vs-landing .vs-feature,
.vs-landing .vs-plan,
.vs-landing .vs-legal {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-lg);
    color: var(--vs-text);
    box-shadow: var(--vs-shadow);
}

.vs-landing .vs-panel p,
.vs-landing .vs-feature p,
.vs-landing .vs-plan p,
.vs-landing .vs-plan li,
.vs-landing .vs-legal p {
    color: var(--vs-text-secondary);
}

.vs-landing .vs-theme-toggle,
.vs-landing .vs-accent-btn {
    min-height: 44px;
    border: 1px solid var(--vs-border);
    color: var(--vs-text);
    background: var(--vs-surface-2);
    transition: all var(--vs-transition-fast);
}

.vs-landing .vs-accent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vs-landing .vs-accent-btn.is-active,
.vs-landing .vs-accent-btn:hover,
.vs-landing .vs-accent-btn:focus {
    border-color: var(--vs-accent);
    color: var(--vs-accent);
    background: var(--vs-accent-soft);
}

.vs-landing .vs-feature i {
    color: var(--vs-accent);
}

.vs-landing .vs-plan {
    transition: transform var(--vs-transition-fast), border-color var(--vs-transition-fast);
}

.vs-landing .vs-plan:hover {
    transform: translateY(-2px);
    border-color: var(--vs-accent);
}

.vs-landing .vs-plan .vs-price {
    color: var(--vs-text);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.vs-landing .vs-plan .vs-price span {
    color: var(--vs-text-secondary);
    font-size: 1rem;
    font-weight: 500;
}

.vs-landing .vs-plan .vs-popular {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--vs-accent);
    color: var(--vs-accent);
    background: var(--vs-accent-soft);
    padding: 0 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.vs-landing .vs-plan.is-popular {
    border-color: var(--vs-accent);
}

.vs-landing a,
.vs-landing button,
.vs-landing .card,
.vs-landing [role="button"] {
    cursor: pointer;
}

.vs-landing :focus-visible {
    outline: 2px solid var(--vs-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .vs-landing .vs-accent-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .vs-landing *,
    .vs-landing *::before,
    .vs-landing *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- New Professional Logo Styles --- */
.vs-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    transition: transform var(--vs-transition-base);
}

.vs-logo:hover {
    transform: scale(1.02);
}

.vs-logo-icon {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-logo-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.vs-logo-frame {
    fill: none;
    stroke: var(--vs-text);
    stroke-width: 1.5;
    opacity: 0.8;
}

.vs-logo-v {
    fill: var(--vs-accent);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 900;
    font-size: 20px;
    filter: drop-shadow(0 0 8px var(--vs-accent));
}

.vs-logo-glow {
    fill: none;
    stroke: var(--vs-accent);
    stroke-width: 1;
    stroke-dasharray: 100;
    opacity: 0.4;
    filter: blur(2px);
    animation: vs-logo-spin 10s linear infinite;
}

.vs-logo-dots circle {
    fill: var(--vs-accent);
    opacity: 0.6;
}

.vs-logo-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.vs-logo-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--vs-text);
}

.vs-logo-slogan {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vs-text-secondary);
    opacity: 0.8;
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
}


.vs-logo-text .vs-venom {
    color: var(--vs-text);
}

.vs-logo-text .vs-dot {
    color: var(--vs-accent);
    font-size: 1.5rem;
    line-height: 1;
    margin-top: -4px;
}

.vs-logo-text .vs-solutions {
    color: var(--vs-accent);
    text-shadow: 0 0 15px var(--vs-accent-soft);
}

@keyframes vs-logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes vs-logo-spin-rev {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes vs-logo-pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.98);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}

@keyframes vs-logo-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

@keyframes vs-logo-v-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 5px var(--vs-accent));
        opacity: 1;
    }

    50% {
        filter: drop-shadow(0 0 15px var(--vs-accent));
        opacity: 0.85;
    }
}

@keyframes vs-logo-dash {
    to {
        stroke-dashoffset: 0;
    }
}

/* Enhanced Logo Styles */
.vs-logo-glow-outer {
    transform-origin: center;
    animation: vs-logo-spin 15s linear infinite;
    stroke-opacity: 0.4;
}

.vs-logo-glow-inner {
    transform-origin: center;
    animation: vs-logo-spin-rev 10s linear infinite;
    stroke-opacity: 0.6;
}

.vs-logo-frame {
    fill: rgba(var(--vs-accent-rgb), 0.1);
    stroke: var(--vs-accent);
    stroke-width: 1.5;
    opacity: 0.95;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: vs-logo-dash 3s ease-in-out forwards;
    filter: drop-shadow(0 0 4px rgba(var(--vs-accent-rgb), 0.4));
}

.vs-logo-v {
    fill: var(--vs-accent);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 20px;
    animation: vs-logo-v-glow 4s ease-in-out infinite;
    user-select: none;
}

.vs-logo-icon-container {
    animation: vs-logo-float 5s ease-in-out infinite;
}

.vs-logo-dots circle {
    fill: var(--vs-accent);
    animation: vs-logo-pulse 3s ease-in-out infinite;
}

.vs-logo-dots circle:nth-child(2) {
    animation-delay: 0.5s;
}

.vs-logo-dots circle:nth-child(3) {
    animation-delay: 1s;
}

.vs-logo-dots circle:nth-child(4) {
    animation-delay: 1.5s;
}

.vs-logo:hover .vs-logo-icon-container {
    animation: none;
    transform: scale(1.1) rotate(5deg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vs-logo:hover .vs-logo-glow-outer {
    animation-duration: 5s;
}

.vs-logo:hover .vs-logo-v {
    animation-duration: 1s;
}

/* Header adjustments for logo */
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

[data-theme="light"] .vs-logo-v {
    filter: drop-shadow(0 0 4px var(--vs-accent));
}

[data-theme="light"] .vs-logo-text .vs-solutions {
    text-shadow: none;
}

/* ========================================
   Premium Dropdown Menu
   ======================================== */

/* Base Dropdown Container */
.vs-dropdown {
    position: relative;
}

.vs-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--vs-radius-md);
    background: var(--vs-surface-2);
    border: 1px solid var(--vs-border);
    color: var(--vs-text);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--vs-transition-fast);
    text-decoration: none;
    min-height: 44px;
}

.vs-dropdown-toggle:hover,
.vs-dropdown-toggle:focus {
    border-color: var(--vs-accent);
    color: var(--vs-accent);
    background: var(--vs-accent-soft);
}

.vs-dropdown-toggle i {
    font-size: 0.875rem;
    transition: transform var(--vs-transition-fast);
}

.vs-dropdown-toggle::after {
    display: none;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-toggle {
    border-color: var(--vs-accent);
    color: var(--vs-accent);
    background: var(--vs-accent-soft);
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-toggle i {
    transform: rotate(180deg);
}

/* Dropdown Menu Panel */
.vs-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    max-width: 320px;
    padding: 0.5rem;
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-lg);
    box-shadow: var(--vs-shadow);
    z-index: 1080;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--vs-transition-base);
}

.vs-dropdown-menu.dropdown-menu-right {
    left: auto;
    right: 0;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Items */
.vs-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--rounding-md);
    color: var(--vs-text);
    text-decoration: none;
    transition: all var(--vs-transition-fast);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 0.9375rem;
    min-height: 44px;
}

.vs-dropdown-item:hover,
.vs-dropdown-item:focus,
.vs-dropdown-item.active {
    background: var(--vs-accent-soft);
    color: var(--vs-accent);
    outline: none;
}

.vs-dropdown-item:focus-visible {
    outline: 2px solid var(--vs-focus-ring);
    outline-offset: -2px;
}

.vs-dropdown-item i {
    width: 1.25rem;
    font-size: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.vs-dropdown-item .vs-dropdown-item-text {
    flex: 1;
}

.vs-dropdown-item .vs-dropdown-item-badge {
    margin-left: auto;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--vs-accent-soft);
    color: var(--vs-accent);
}

/* Dropdown Header */
.vs-dropdown-header {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vs-text-secondary);
    border-bottom: 1px solid var(--vs-border);
    margin-bottom: 0.5rem;
}

/* Dropdown Divider */
.vs-dropdown-divider {
    height: 1px;
    background: var(--vs-border);
    margin: 0.5rem 0;
}

/* Dropdown Footer */
.vs-dropdown-footer {
    padding: 0.75rem 0.875rem;
    border-top: 1px solid var(--vs-border);
    margin-top: 0.5rem;
}

/* Icon Box Style */
.vs-dropdown-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rounding-md);
    background: var(--vs-accent-soft);
    color: var(--vs-accent);
    flex-shrink: 0;
}

/* Description Style */
.vs-dropdown-item-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--vs-text-secondary);
    margin-top: 0.125rem;
}

.vs-dropdown-item:hover .vs-dropdown-item-desc,
.vs-dropdown-item:focus .vs-dropdown-item-desc,
.vs-dropdown-item.active .vs-dropdown-item-desc {
    color: var(--vs-accent);
    opacity: 0.8;
}

/* User Profile Dropdown */
.vs-dropdown-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--vs-border);
    margin-bottom: 0.5rem;
}

.vs-dropdown-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--vs-accent-soft);
    color: var(--vs-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
}

.vs-dropdown-user-info {
    flex: 1;
    min-width: 0;
}

.vs-dropdown-user-name {
    font-weight: 600;
    color: var(--vs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-dropdown-user-email {
    font-size: 0.8125rem;
    color: var(--vs-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Notification Style */
.vs-dropdown-notification {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
}

.vs-dropdown-notification.unread {
    background: var(--vs-accent-soft);
}

.vs-dropdown-notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.vs-dropdown-notification-icon.success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.vs-dropdown-notification-icon.warning {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.vs-dropdown-notification-icon.danger {
    background: rgba(231, 0, 11, 0.15);
    color: #e7000b;
}

.vs-dropdown-notification-icon.info {
    background: var(--vs-accent-soft);
    color: var(--vs-accent);
}

.vs-dropdown-notification-content {
    flex: 1;
    min-width: 0;
}

.vs-dropdown-notification-title {
    font-weight: 500;
    color: var(--vs-text);
    font-size: 0.9375rem;
    margin-bottom: 0.125rem;
}

.vs-dropdown-notification-text {
    font-size: 0.8125rem;
    color: var(--vs-text-secondary);
    line-height: 1.4;
}

.vs-dropdown-notification-time {
    font-size: 0.75rem;
    color: var(--vs-text-secondary);
    margin-top: 0.25rem;
}

/* Mega Menu Style */
.vs-mega-menu {
    position: static;
}

.vs-mega-menu .vs-dropdown-menu {
    left: 0;
    right: 0;
    max-width: 100%;
    padding: 1rem;
}

.vs-mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.vs-mega-menu-section {
    padding: 0.5rem;
}

.vs-mega-menu-title {
    font-weight: 600;
    color: var(--vs-text);
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--vs-border);
}

.vs-mega-menu-link {
    display: block;
    padding: 0.5rem;
    color: var(--vs-text-secondary);
    text-decoration: none;
    border-radius: var(--rounding-sm);
    transition: all var(--vs-transition-fast);
    font-size: 0.875rem;
}

.vs-mega-menu-link:hover,
.vs-mega-menu-link:focus {
    color: var(--vs-accent);
    background: var(--vs-accent-soft);
}

/* Animation Classes */
.vs-dropdown-animate .vs-dropdown-item {
    opacity: 0;
    transform: translateX(-10px);
    animation: vs-dropdown-slide-in 0.3s ease forwards;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-item:nth-child(1) {
    animation-delay: 0.05s;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-item:nth-child(2) {
    animation-delay: 0.1s;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-item:nth-child(3) {
    animation-delay: 0.15s;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-item:nth-child(4) {
    animation-delay: 0.2s;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-item:nth-child(5) {
    animation-delay: 0.25s;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-item:nth-child(6) {
    animation-delay: 0.3s;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-item:nth-child(7) {
    animation-delay: 0.35s;
}

.vs-dropdown[aria-expanded="true"] .vs-dropdown-item:nth-child(8) {
    animation-delay: 0.4s;
}

@keyframes vs-dropdown-slide-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .vs-dropdown-menu,
    .vs-dropdown-item,
    .vs-dropdown-toggle i {
        transition: none;
    }

    .vs-dropdown[aria-expanded="true"] .vs-dropdown-item {
        animation: none;
        opacity: 1;
        transform: none;
    }
}