/* ============================================================
   VisNavigans — Organic Design System
   Typography: Plus Jakarta Sans (Udemy-style professional)
   Palette: Warm cream, ink, brand blue as jewel accent
   ============================================================ */

:root {
    /* --- Colors: Warm Paper World --- */
    --vn-cream: #fbf9f4;
    --vn-cream-deep: #f5f0e6;
    --vn-card: #ffffff;
    --vn-sand: #ede5d1;
    --vn-paper: #f9f6ef;

    /* --- Ink --- */
    --vn-ink: #1a1a1a;
    --vn-ink-soft: #4a4a4a;
    --vn-ink-muted: #8a8a8a;
    --vn-ink-faint: #b8b8b8;
    --vn-hairline: #e8e2d4;
    --vn-hairline-soft: #f0ebdc;

    /* --- Brand primary accent (warm amber — was sky blue; user wants warm-only) --- */
    --vn-blue: #c89b3c;
    --vn-blue-deep: #b8882c;
    --vn-blue-tint: #faf6ec;
    --vn-blue-ink: #1a1a1a;
    --vn-blue-velvet: #5a4520;

    /* --- Accent colors (warm) --- */
    --vn-sage: #8ba888;
    --vn-sage-deep: #6b8269;
    --vn-sage-tint: #e8efe6;
    --vn-terracotta: #d97757;
    --vn-terracotta-tint: #f9ebe3;
    --vn-mustard: #d4a74c;
    --vn-mustard-tint: #faf2dd;
    --vn-rose: #c45264;
    --vn-rose-tint: #f5e2e5;

    /* --- Shadows (warm, soft) --- */
    --vn-shadow-xs: 0 1px 2px rgba(26, 22, 12, 0.04);
    --vn-shadow-sm: 0 2px 8px rgba(26, 22, 12, 0.05);
    --vn-shadow: 0 4px 20px rgba(26, 22, 12, 0.06);
    --vn-shadow-md: 0 8px 32px rgba(26, 22, 12, 0.08);
    --vn-shadow-lg: 0 16px 48px rgba(26, 22, 12, 0.10);
    --vn-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

    /* --- Radius (soft, not sharp) --- */
    --vn-r-xs: 6px;
    --vn-r-sm: 10px;
    --vn-r: 14px;
    --vn-r-lg: 20px;
    --vn-r-xl: 28px;
    --vn-r-full: 999px;

    /* --- Typography: Plus Jakarta Sans (professional, Udemy-inspired) --- */
    --vn-font-display: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
    --vn-font-body: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
    --vn-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

    /* --- Motion --- */
    --vn-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --vn-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --vn-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --vn-dur-fast: 180ms;
    --vn-dur: 280ms;
    --vn-dur-slow: 480ms;
}

/* ============================================================
   Base — applied globally, overrides style.css where needed
   ============================================================ */

body {
    font-family: var(--vn-font-body) !important;
    background: var(--vn-cream) !important;
    color: var(--vn-ink) !important;
    font-feature-settings: "ss01", "ss02", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.vn-display,
.display-1, .display-2, .display-3, .display-4 {
    font-family: var(--vn-font-display) !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vn-ink);
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; }
h4 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
h5 { font-size: 1.125rem; line-height: 1.35; font-weight: 700; }
h6 { font-size: 1rem; line-height: 1.4; font-weight: 700; }

p, span, a, li, td, th, input, button, textarea, select {
    font-family: var(--vn-font-body);
}

/* ============================================================
   Utility classes
   ============================================================ */

.vn-bg-cream { background: var(--vn-cream); }
.vn-bg-paper { background: var(--vn-paper); }
.vn-bg-card { background: var(--vn-card); }
.vn-bg-sand { background: var(--vn-sand); }
.vn-bg-ink { background: var(--vn-blue-ink); color: var(--vn-cream); }

.vn-ink { color: var(--vn-ink); }
.vn-ink-soft { color: var(--vn-ink-soft); }
.vn-ink-muted { color: var(--vn-ink-muted); }
.vn-ink-faint { color: var(--vn-ink-faint); }

.vn-blue { color: var(--vn-blue); }
.vn-blue-bg { background: var(--vn-blue); color: #fff; }

.vn-hairline { border: 1px solid var(--vn-hairline); }
.vn-hairline-soft { border: 1px solid var(--vn-hairline-soft); }

.vn-display-font { font-family: var(--vn-font-display); font-weight: 800; letter-spacing: -0.025em; }

/* Numbered section labels (editorial touch) */
.vn-section-num {
    font-family: var(--vn-font-display);
    font-style: italic;
    font-size: 0.875rem;
    color: var(--vn-ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
}

.vn-eyebrow {
    font-family: var(--vn-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vn-blue);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.vn-eyebrow::before {
    content: '';
    width: 24px;
    height: 1.5px;
    background: currentColor;
}

/* ============================================================
   Cards — soft, warm, organic
   Consistent height: all cards in a row stretch equally
   ============================================================ */

.vn-card {
    background: var(--vn-card);
    border: 1px solid var(--vn-hairline-soft);
    border-radius: var(--vn-r);
    box-shadow: var(--vn-shadow-xs);
    transition: box-shadow var(--vn-dur) var(--vn-ease), transform var(--vn-dur) var(--vn-ease), border-color var(--vn-dur) var(--vn-ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.vn-card:hover {
    box-shadow: var(--vn-shadow);
    transform: translateY(-2px);
    border-color: var(--vn-hairline);
}
.vn-card-lg { border-radius: var(--vn-r-lg); }
.vn-card-flat { box-shadow: none; }

/* Consistent card heights across product grids */
.vn-course-card,
.vn-bundle-card,
.vn-mentor-card,
.vn-resource-card,
.vn-bootcamp-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Each product card's body fills remaining space so footers align */
.vn-course-body,
.vn-bundle-body,
.vn-resource-body,
.vn-bootcamp-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Mentor byline avatar — kept small across all product cards, overrides style.css */
.vn-course-mentor {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
.vn-course-mentor img,
.vn-course-card .vn-course-mentor img,
.vn-bundle-card .vn-course-mentor img,
.vn-bootcamp-card .vn-course-mentor img,
.vn-resource-card .vn-course-mentor img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 1.5px solid var(--vn-cream) !important;
    padding: 0 !important;
    margin: 0 !important;
}
.vn-course-mentor span {
    font-family: var(--vn-font-body);
    font-size: 13px;
    color: var(--vn-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kill default list-style on lists inside cards and dashboards */
.vn-course-card ul, .vn-bundle-card ul, .vn-resource-card ul, .vn-bootcamp-card ul,
.vn-cart-item ul, .vn-wish-card ul, .vn-blog-card ul,
.vn-bundle-course-list,
.vn-filter-options,
.vn-mentor-card ul,
.vn-how-step ul,
.ol-card ul.list-unstyled,
.sidebar-nav ul,
.vn-course-includes {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.vn-course-card ul li, .vn-bundle-card ul li, .vn-resource-card ul li, .vn-bootcamp-card ul li,
.vn-bundle-course-list li,
.vn-filter-options li {
    list-style: none !important;
    list-style-type: none !important;
}
.vn-course-card ul li::marker,
.vn-bundle-card ul li::marker,
.vn-bundle-course-list li::marker,
.vn-filter-options li::marker {
    display: none !important;
    content: '' !important;
}

/* Push footer to bottom of card */
.vn-course-footer,
.vn-bundle-footer,
.vn-resource-footer,
.vn-bootcamp-footer {
    margin-top: auto;
}

/* ============================================================
   Buttons — warm, tactile
   ============================================================ */

.vn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--vn-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--vn-r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--vn-dur) var(--vn-ease);
    text-decoration: none;
    line-height: 1;
}
.vn-btn-primary {
    background: var(--vn-blue);
    color: #fff;
    box-shadow: var(--vn-shadow-sm);
}
.vn-btn-primary:hover {
    background: var(--vn-blue-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--vn-shadow);
}
.vn-btn-ink {
    background: var(--vn-blue-ink);
    color: var(--vn-cream);
}
.vn-btn-ink:hover {
    background: #000;
    color: #fff;
    transform: translateY(-1px);
}
.vn-btn-outline {
    background: transparent;
    color: var(--vn-ink);
    border-color: var(--vn-hairline);
}
.vn-btn-outline:hover {
    background: var(--vn-paper);
    border-color: var(--vn-ink);
    color: var(--vn-ink);
}
.vn-btn-ghost {
    background: transparent;
    color: var(--vn-ink);
}
.vn-btn-ghost:hover {
    background: var(--vn-paper);
    color: var(--vn-ink);
}
.vn-btn-lg { padding: 16px 32px; font-size: 15px; }
.vn-btn-sm { padding: 9px 18px; font-size: 13px; }

/* ============================================================
   Pills / Tags
   ============================================================ */

.vn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--vn-paper);
    color: var(--vn-ink-soft);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--vn-r-full);
    border: 1px solid var(--vn-hairline-soft);
}
.vn-pill-blue { background: var(--vn-blue-tint); color: var(--vn-blue-deep); border-color: transparent; }
.vn-pill-sage { background: var(--vn-sage-tint); color: var(--vn-sage-deep); border-color: transparent; }
.vn-pill-terracotta { background: var(--vn-terracotta-tint); color: var(--vn-terracotta); border-color: transparent; }
.vn-pill-mustard { background: var(--vn-mustard-tint); color: var(--vn-mustard); border-color: transparent; }

/* ============================================================
   Hero / Section — soft organic
   ============================================================ */

.vn-hero-soft {
    position: relative;
    background: var(--vn-cream);
    padding: clamp(60px, 10vw, 120px) 0 clamp(60px, 10vw, 120px);
    overflow: hidden;
}
.vn-hero-soft::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--vn-blue-tint) 0%, transparent 70%);
    filter: blur(40px);
    opacity: 0.6;
    pointer-events: none;
}
.vn-hero-soft::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--vn-mustard-tint) 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
}

.vn-hero-dark {
    background: var(--vn-blue-ink);
    color: var(--vn-cream);
    padding: clamp(80px, 12vw, 140px) 0;
    position: relative;
    overflow: hidden;
}
.vn-hero-dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(14, 165, 233, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 20% 70%, rgba(217, 119, 87, 0.08) 0%, transparent 50%);
    pointer-events: none;
}
.vn-hero-dark h1, .vn-hero-dark h2, .vn-hero-dark h3 { color: var(--vn-cream); }
.vn-hero-dark p { color: rgba(251, 249, 244, 0.75); }

/* Organic curved divider between sections */
.vn-curve-divider {
    position: relative;
    height: 80px;
    margin-top: -80px;
    pointer-events: none;
}
.vn-curve-divider svg { width: 100%; height: 100%; }

/* ============================================================
   Stats (tabular numbers)
   ============================================================ */

.vn-stat-num {
    font-family: var(--vn-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.95;
    color: var(--vn-ink);
    font-feature-settings: "tnum";
}
.vn-stat-label {
    font-family: var(--vn-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vn-ink-muted);
    margin-top: 8px;
}

/* ============================================================
   Form inputs — soft
   ============================================================ */

.vn-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--vn-card);
    border: 1px solid var(--vn-hairline);
    border-radius: var(--vn-r-sm);
    font-family: var(--vn-font-body);
    font-size: 14px;
    color: var(--vn-ink);
    transition: all var(--vn-dur) var(--vn-ease);
}
.vn-input:focus {
    outline: none;
    border-color: var(--vn-blue);
    box-shadow: 0 0 0 4px var(--vn-blue-tint);
    background: var(--vn-card);
}
.vn-input::placeholder { color: var(--vn-ink-faint); }

.vn-label {
    display: block;
    font-family: var(--vn-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--vn-ink-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ============================================================
   Animations — staggered fade up
   ============================================================ */

@keyframes vnFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes vnFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes vnScaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.vn-reveal { opacity: 0; animation: vnFadeUp 800ms var(--vn-ease) forwards; }
.vn-reveal-1 { animation-delay: 0ms; }
.vn-reveal-2 { animation-delay: 100ms; }
.vn-reveal-3 { animation-delay: 200ms; }
.vn-reveal-4 { animation-delay: 300ms; }
.vn-reveal-5 { animation-delay: 400ms; }
.vn-reveal-6 { animation-delay: 500ms; }

/* ============================================================
   Text selection
   ============================================================ */

::selection {
    background: var(--vn-blue);
    color: #fff;
}

/* ============================================================
   Noise texture overlay (subtle warmth)
   ============================================================ */

.vn-noise {
    position: relative;
}
.vn-noise::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
    opacity: 0.4;
}
.vn-noise > * { position: relative; z-index: 1; }

/* ============================================================
   Dashboard layout — comprehensive organic overrides
   ============================================================ */

body.ol-body {
    background: var(--vn-cream) !important;
    font-family: var(--vn-font-body) !important;
    color: var(--vn-ink);
}

.ol-sidebar, body.ol-body .ol-sidebar {
    background: var(--vn-card) !important;
    border-right: 1px solid var(--vn-hairline-soft) !important;
    box-shadow: var(--vn-shadow-xs);
}
.ol-main-content, .ol-main {
    background: var(--vn-cream) !important;
}
.ol-header {
    background: var(--vn-card) !important;
    border-bottom: 1px solid var(--vn-hairline-soft) !important;
    box-shadow: var(--vn-shadow-xs);
}

/* Sidebar logo area */
.sidebar-logo-area {
    border-bottom: 1px solid var(--vn-hairline-soft);
    padding: 20px !important;
}

/* Sidebar section title */
.sidebar-title {
    font-family: var(--vn-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--vn-ink-faint) !important;
    letter-spacing: 0.08em !important;
}

/* ============================================================
   Sidebar navigation — FINAL override. Kills every blue accent
   from backend CSS. Uses high-specificity + !important.
   ============================================================ */

/* Kill any native list bullets on sidebar items */
.sidebar-nav-area ul,
.sidebar-nav-area ol,
.sidebar-nav-area li,
.sidebar-nav ul,
.sidebar-nav li,
.sidebar-first-li,
.sidebar-second-li,
.first-sub-menu,
.first-sub-menu li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    padding-left: 0 !important;
}
.sidebar-nav-area li::marker,
.sidebar-nav li::marker,
.sidebar-first-li::marker,
.sidebar-second-li::marker {
    content: '' !important;
    color: transparent !important;
    font-size: 0 !important;
}

/* First-level item base */
.sidebar-nav-area .sidebar-first-li,
.sidebar-nav .sidebar-first-li {
    margin-bottom: 2px !important;
}
.sidebar-nav-area .sidebar-first-li > a,
.sidebar-nav .sidebar-first-li > a {
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border-left: none !important;
    border-left-color: transparent !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}
.sidebar-nav-area .sidebar-first-li > a .text span,
.sidebar-nav .sidebar-first-li > a .text span {
    color: inherit !important;
}
.sidebar-nav-area .sidebar-first-li > a .icon,
.sidebar-nav .sidebar-first-li > a .icon {
    color: var(--vn-ink-mute, #8a8a8a) !important;
    background: transparent !important;
}

/* Hover — warm paper, no blue */
.sidebar-nav-area .sidebar-first-li:hover > a,
.sidebar-nav-area .sidebar-first-li > a:hover,
.sidebar-nav .sidebar-first-li:hover > a,
.sidebar-nav .sidebar-first-li > a:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border-left: none !important;
    border-left-color: transparent !important;
}
.sidebar-nav-area .sidebar-first-li:hover > a .icon,
.sidebar-nav-area .sidebar-first-li > a:hover .icon,
.sidebar-nav .sidebar-first-li:hover > a .icon,
.sidebar-nav .sidebar-first-li > a:hover .icon {
    color: var(--vn-ink, #1a1a1a) !important;
}

/* ACTIVE — warm paper + single BLACK left bar. ZERO blue. */
.sidebar-nav-area .sidebar-first-li.active > a,
.sidebar-nav .sidebar-first-li.active > a,
.sidebar-first-li.active > a {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border-left: none !important;
    border-left-color: transparent !important;
}
.sidebar-nav-area .sidebar-first-li.active > a .text span,
.sidebar-nav .sidebar-first-li.active > a .text span,
.sidebar-first-li.active > a .text span {
    color: var(--vn-ink, #1a1a1a) !important;
    background: transparent !important;
}
.sidebar-nav-area .sidebar-first-li.active > a .icon,
.sidebar-nav .sidebar-first-li.active > a .icon,
.sidebar-first-li.active > a .icon {
    color: var(--vn-ink, #1a1a1a) !important;
}
.sidebar-nav-area .sidebar-first-li.active > a path,
.sidebar-nav .sidebar-first-li.active > a path,
.sidebar-first-li.active > a path {
    fill: var(--vn-ink, #1a1a1a) !important;
}
/* Black accent bar rendered as ::before (not border-left to avoid backend conflicts) */
.sidebar-nav-area .sidebar-first-li.active > a::before,
.sidebar-nav .sidebar-first-li.active > a::before,
.sidebar-first-li.active > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 18% !important;
    bottom: 18% !important;
    width: 3px !important;
    border-radius: 100px !important;
    background: var(--vn-ink, #1a1a1a) !important;
    display: block !important;
}

/* Submenu titles */
.sidebar-nav-area .first-sub-menu-title,
.first-sub-menu-title { display: none !important; }
.sidebar-nav-area .first-sub-menu,
.first-sub-menu {
    padding: 4px 0 4px 12px !important;
    background: transparent !important;
}

/* Second-level items */
.sidebar-nav-area .sidebar-second-li,
.sidebar-second-li {
    margin-bottom: 1px !important;
    list-style: none !important;
    padding-left: 0 !important;
}
.sidebar-nav-area .sidebar-second-li > a,
.sidebar-second-li > a {
    display: block !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--vn-ink-mute, #8a8a8a) !important;
    padding: 7px 14px 7px 22px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border-left: none !important;
    border-left-color: transparent !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}
/* Remove any ::before bullet from old CSS AND from my old rules */
.sidebar-nav-area .sidebar-second-li > a::before,
.sidebar-second-li > a::before {
    content: none !important;
    display: none !important;
    background: none !important;
}
.sidebar-nav-area .sidebar-second-li > a:hover,
.sidebar-nav-area .sidebar-second-li:hover > a,
.sidebar-second-li > a:hover,
.sidebar-second-li:hover > a {
    color: var(--vn-ink, #1a1a1a) !important;
    background: var(--vn-paper, #f5f0e6) !important;
    border-left: none !important;
    border-left-color: transparent !important;
}
/* Active submenu item — black accent, no blue */
.sidebar-nav-area .sidebar-second-li.active > a,
.sidebar-second-li.active > a {
    color: var(--vn-ink, #1a1a1a) !important;
    background: var(--vn-paper, #f5f0e6) !important;
    font-weight: 700 !important;
    border-left: none !important;
    border-left-color: transparent !important;
}
.sidebar-nav-area .sidebar-second-li.active > a::after,
.sidebar-second-li.active > a::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 25% !important;
    bottom: 25% !important;
    width: 2px !important;
    border-radius: 100px !important;
    background: var(--vn-ink, #1a1a1a) !important;
    display: block !important;
}

/* Dashboard cards */
.ol-card {
    background: var(--vn-card) !important;
    border: 1px solid var(--vn-hairline-soft) !important;
    border-radius: var(--vn-r-lg) !important;
    box-shadow: var(--vn-shadow-xs) !important;
    overflow: hidden;
}
.ol-card-body { padding: 24px !important; }
.ol-card .title {
    font-family: var(--vn-font-display) !important;
    font-weight: 700 !important;
    color: var(--vn-ink) !important;
    letter-spacing: -0.015em;
}

/* Dashboard page title */
.page-title {
    font-family: var(--vn-font-display) !important;
    font-weight: 800 !important;
    color: var(--vn-ink) !important;
    letter-spacing: -0.025em;
}

/* Buttons */
.ol-btn-primary, .btn.ol-btn-primary {
    background: var(--vn-ink, #1a1a1a) !important;
    border: 1px solid var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-radius: 10px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
.ol-btn-primary:hover, .btn.ol-btn-primary:hover {
    background: #000 !important;
    border-color: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26,26,26,0.18) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}
.ol-btn-outline-secondary, .btn.ol-btn-outline-secondary {
    background: var(--vn-card) !important;
    border: 1px solid var(--vn-hairline) !important;
    color: var(--vn-ink) !important;
    border-radius: var(--vn-r-sm) !important;
    font-family: var(--vn-font-body) !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    transition: all var(--vn-dur) var(--vn-ease) !important;
}
.ol-btn-outline-secondary:hover, .btn.ol-btn-outline-secondary:hover {
    background: var(--vn-paper) !important;
    border-color: var(--vn-ink) !important;
    color: var(--vn-ink) !important;
}
.ol-btn-secondary, .btn.ol-btn-secondary {
    background: var(--vn-ink) !important;
    border: none !important;
    color: var(--vn-cream) !important;
    border-radius: var(--vn-r-sm) !important;
    font-family: var(--vn-font-body) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
}
.ol-btn-danger, .btn.ol-btn-danger {
    background: var(--vn-terracotta) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--vn-r-sm) !important;
}
.ol-btn-success, .btn.ol-btn-success {
    background: var(--vn-sage-deep) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--vn-r-sm) !important;
}
.ol-btn-light, .btn.ol-btn-light {
    background: var(--vn-paper) !important;
    border: 1px solid var(--vn-hairline-soft) !important;
    color: var(--vn-ink) !important;
    border-radius: var(--vn-r-sm) !important;
    font-family: var(--vn-font-body) !important;
    font-weight: 600 !important;
}

/* Form controls */
.form-control, .ol-form-control, input.form-control, textarea.form-control, select.form-control {
    background: var(--vn-paper) !important;
    border: 1px solid var(--vn-hairline-soft) !important;
    border-radius: var(--vn-r-sm) !important;
    font-family: var(--vn-font-body) !important;
    font-size: 14px !important;
    color: var(--vn-ink) !important;
    padding: 10px 14px !important;
    transition: all var(--vn-dur) var(--vn-ease) !important;
}
.form-control:focus, .ol-form-control:focus {
    background: var(--vn-card) !important;
    border-color: var(--vn-blue) !important;
    box-shadow: 0 0 0 4px var(--vn-blue-tint) !important;
    color: var(--vn-ink) !important;
}
.form-label, .ol-form-label {
    font-family: var(--vn-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--vn-ink-soft) !important;
    letter-spacing: 0.03em;
}

/* Tables */
.eTable, .eTable-2, .table {
    font-family: var(--vn-font-body);
}
.eTable thead th, .eTable-2 thead th, .table thead th {
    background: var(--vn-paper) !important;
    color: var(--vn-ink-soft) !important;
    font-family: var(--vn-font-body) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--vn-hairline) !important;
}
.eTable tbody td, .eTable-2 tbody td, .table tbody td {
    padding: 14px 16px !important;
    border-color: var(--vn-hairline-soft) !important;
    color: var(--vn-ink) !important;
    font-size: 14px;
    vertical-align: middle;
}
.eTable tbody tr:hover, .eTable-2 tbody tr:hover, .table tbody tr:hover {
    background: var(--vn-paper) !important;
}

/* Badges */
.badge {
    font-family: var(--vn-font-body);
    font-weight: 600;
    border-radius: var(--vn-r-full);
    padding: 4px 10px;
}
.bg-success, .badge.bg-success, .bg-active { background: var(--vn-sage-tint) !important; color: var(--vn-sage-deep) !important; }
.bg-info, .badge.bg-info { background: var(--vn-mustard-tint, #fdf4dc) !important; color: #6b4e0e !important; }
.bg-primary, .badge.bg-primary { background: var(--vn-ink, #1a1a1a) !important; color: var(--vn-cream, #fbf9f4) !important; border: none !important; }
.bg-warning, .badge.bg-warning { background: var(--vn-mustard-tint) !important; color: #8b6914 !important; }
.bg-danger, .badge.bg-danger { background: var(--vn-terracotta-tint) !important; color: var(--vn-terracotta) !important; }

/* Dropdown menus */
.dropdown-menu {
    background: var(--vn-card) !important;
    border: 1px solid var(--vn-hairline-soft) !important;
    border-radius: var(--vn-r) !important;
    box-shadow: var(--vn-shadow-md) !important;
    padding: 8px !important;
    font-family: var(--vn-font-body);
}
.dropdown-item {
    border-radius: var(--vn-r-sm);
    padding: 8px 14px !important;
    font-size: 13px;
    color: var(--vn-ink-soft);
    transition: background var(--vn-dur) var(--vn-ease);
}
.dropdown-item:hover {
    background: var(--vn-paper) !important;
    color: var(--vn-ink) !important;
}

/* Pagination */
.pagination {
    gap: 4px;
    align-items: center;
    margin-bottom: 40px !important;
    padding-bottom: 20px;
}
.page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    background: var(--vn-card, #fff) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    border-radius: 10px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.page-link svg,
.page-link .fi,
.page-link i {
    display: block;
    line-height: 1;
}
.page-link:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}
.page-item.active .page-link {
    background: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    font-weight: 700 !important;
}
.page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* Modals — organic overrides for all Bootstrap modals including ajaxModal */
.modal-content {
    background: #fff !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(26,26,26,0.2) !important;
    overflow: hidden !important;
}
.modal-header {
    border-bottom: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    padding: 22px 26px 18px !important;
    background: linear-gradient(135deg, #fff 0%, #fdf9ef 100%) !important;
}
.modal-title {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--vn-ink, #1a1a1a) !important;
    letter-spacing: -0.02em !important;
}
.modal-header .btn-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background-color: transparent !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}
.modal-header .btn-close:hover {
    background-color: var(--vn-paper, #f5f0e6) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}
.modal-body {
    padding: 26px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
}
.modal-body .form-label,
.modal-body .ol-form-label {
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    margin-bottom: 8px !important;
}
.modal-body .form-control,
.modal-body .ol-form-control {
    background: #fff !important;
    border: 1px solid var(--vn-hairline, #e8e2d4) !important;
    border-radius: 10px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 14px !important;
    color: var(--vn-ink, #1a1a1a) !important;
    padding: 11px 14px !important;
    transition: border-color 0.2s ease !important;
}
.modal-body .form-control:focus,
.modal-body .ol-form-control:focus {
    border-color: var(--vn-ink, #1a1a1a) !important;
    box-shadow: 0 0 0 3px rgba(26,26,26,0.05) !important;
}
.modal-footer {
    border-top: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    padding: 16px 26px 20px !important;
    background: #fdf9ef !important;
}
.modal-footer .btn,
.modal-footer .ol-btn-secondary {
    border-radius: 10px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
}
.modal-footer .ol-btn-secondary {
    background: transparent !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border: 1px solid var(--vn-hairline, #e8e2d4) !important;
}
.modal-footer .ol-btn-secondary:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}
/* Ensure all submit/action buttons inside modals sit at bottom-right */
.modal-body form .text-center:last-child,
.modal-body form > div:last-child:has(button[type="submit"]) {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
}
.modal-body form .text-center:last-child button,
.modal-body form > div:last-child button[type="submit"] {
    width: auto !important;
}

/* Course edit sidebar tabs */
.ol-sidebar-tab {
    min-width: 200px !important;
    max-width: 220px !important;
    flex-shrink: 0 !important;
}
.ol-sidebar-tab .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
}
.ol-sidebar-tab .nav-link:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.ol-sidebar-tab .nav-link.active {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    font-weight: 700 !important;
}
.ol-sidebar-tab .nav-link span[class^="fi"] {
    font-size: 14px !important;
    width: 18px !important;
    text-align: center !important;
}
.edit-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    background: var(--vn-mustard-tint, #fdf4dc) !important;
    color: #6b4e0e !important;
    border: 1px solid #f0d99a !important;
    border-radius: 100px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Kill old theme's --skinColor hover that makes sidebar icons invisible.
   style.css uses --skinColor (#0ea5e9) as hover bg and forces span::before
   to white — which disappears on our cream hover. Override everything. */
.ol-sidebar-tab .nav-link:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.ol-sidebar-tab .nav-link:hover span,
.ol-sidebar-tab .nav-link:hover span::before,
.ol-sidebar-tab .nav-link:hover span::after,
.ol-sidebar-tab .nav-link:hover i,
.ol-sidebar-tab .nav-link:hover i::before {
    color: var(--vn-ink, #1a1a1a) !important;
}
.ol-sidebar-tab .nav-link.active {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}
.ol-sidebar-tab .nav-link.active span,
.ol-sidebar-tab .nav-link.active span::before,
.ol-sidebar-tab .nav-link.active span::after,
.ol-sidebar-tab .nav-link.active i,
.ol-sidebar-tab .nav-link.active i::before {
    color: var(--vn-cream, #fbf9f4) !important;
}
.ol-sidebar-tab .nav-pills .nav-link:hover span::before,
.ol-sidebar-tab .nav-pills .nav-link.active span::before,
.ol-sidebar-tab .nav-pills .show > .nav-link span::before {
    color: inherit !important;
}

/* Alerts */
.alert {
    border: 1px solid var(--vn-hairline-soft);
    border-radius: var(--vn-r);
    padding: 14px 18px;
    font-family: var(--vn-font-body);
}
.alert-success { background: var(--vn-sage-tint); color: var(--vn-sage-deep); border-color: var(--vn-sage-tint); }
.alert-info,
.alert-primary,
.ol-alert-primary {
    background: var(--vn-mustard-tint, #fdf4dc) !important;
    color: #6b4e0e !important;
    border-color: var(--vn-mustard-tint, #f0d99a) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}
.alert-warning { background: var(--vn-mustard-tint); color: #8b6914; border-color: var(--vn-mustard-tint); }
.alert-danger { background: var(--vn-terracotta-tint); color: var(--vn-terracotta); border-color: var(--vn-terracotta-tint); }

/* Breadcrumbs in dashboard */
.breadcrumb {
    font-family: var(--vn-font-body);
    font-size: 13px;
    margin-bottom: 0;
}
.breadcrumb a { color: var(--vn-ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--vn-blue); }

/* Notification bell dropdown */
.vn-notif-item {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--vn-hairline-soft);
    display: flex;
    gap: 12px;
    text-decoration: none;
    transition: background var(--vn-dur) var(--vn-ease);
}
.vn-notif-item:hover { background: var(--vn-paper); }
.vn-notif-item.unread { background: var(--vn-blue-tint); }

/* ============================================================
   Header nav — override sky-blue hover with warm paper
   ============================================================ */

.vn-nav > a,
.vn-nav-dropdown > a {
    font-family: var(--vn-font-body) !important;
    color: var(--vn-ink-soft) !important;
    border-radius: var(--vn-r-sm) !important;
    padding: 9px 16px !important;
    font-weight: 500 !important;
}
.vn-nav > a:hover,
.vn-nav-dropdown:hover > a,
.vn-nav-dropdown > a:hover {
    color: var(--vn-ink) !important;
    background: var(--vn-paper) !important;
}
.vn-nav > a.active,
.vn-nav-dropdown > a.active {
    color: var(--vn-ink) !important;
    background: var(--vn-paper) !important;
    font-weight: 700 !important;
}

.vn-dropdown-menu {
    background: var(--vn-card) !important;
    border: 1px solid var(--vn-hairline-soft) !important;
    border-radius: var(--vn-r) !important;
    box-shadow: var(--vn-shadow-md) !important;
    padding: 10px !important;
    min-width: 300px !important;
    margin-top: 8px;
}
.vn-dropdown-item > a {
    font-family: var(--vn-font-body) !important;
    color: var(--vn-ink-soft) !important;
    border-radius: var(--vn-r-sm) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    transition: all var(--vn-dur) var(--vn-ease) !important;
}
.vn-dropdown-item > a:hover {
    background: var(--vn-paper) !important;
    color: var(--vn-ink) !important;
}
.vn-dropdown-sub {
    background: var(--vn-card) !important;
    border: 1px solid var(--vn-hairline-soft) !important;
    border-radius: var(--vn-r) !important;
    box-shadow: var(--vn-shadow-md) !important;
    padding: 10px !important;
}
.vn-dropdown-sub a {
    font-family: var(--vn-font-body) !important;
    color: var(--vn-ink-soft) !important;
    border-radius: var(--vn-r-sm) !important;
    font-size: 13px !important;
}
.vn-dropdown-sub a:hover {
    background: var(--vn-paper) !important;
    color: var(--vn-ink) !important;
}

.vn-btn-primary.btn {
    border-radius: var(--vn-r-sm);
}

/* Header search bar — organic warm */
.vn-search {
    display: flex !important;
    align-items: center !important;
    background: var(--vn-paper) !important;
    border: 1px solid var(--vn-hairline-soft) !important;
    border-radius: var(--vn-r-sm) !important;
    padding: 0 14px !important;
    height: 42px !important;
    gap: 8px !important;
    min-width: 240px !important;
    transition: all var(--vn-dur) var(--vn-ease) !important;
}
.vn-search:focus-within {
    background: var(--vn-card) !important;
    border-color: var(--vn-blue) !important;
    box-shadow: 0 0 0 4px var(--vn-blue-tint) !important;
}
.vn-search i {
    color: var(--vn-ink-muted) !important;
    font-size: 14px !important;
}
.vn-search input {
    border: none !important;
    background: none !important;
    outline: none !important;
    font-family: var(--vn-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--vn-ink) !important;
    width: 100% !important;
    padding: 0 !important;
}
.vn-search input::placeholder { color: var(--vn-ink-muted) !important; }

/* Footer warmth */
.vn-footer {
    background: var(--vn-blue-ink) !important;
    color: var(--vn-cream);
}

/* ============================================================
   Responsive type adjustments
   ============================================================ */

@media (max-width: 768px) {
    body { font-size: 15px; }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
}

/* ============================================================
   Filter sidebar — unified across course, bootcamp, ebook, mentor listings
   ============================================================ */

.vn-filter-sidebar {
    background: var(--vn-card, #ffffff) !important;
    border: 1px solid var(--vn-hairline-soft, #e8e2d4) !important;
    border-radius: var(--vn-r-lg, 18px) !important;
    padding: 22px !important;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
}
.vn-filter-sidebar::-webkit-scrollbar { width: 6px; }
.vn-filter-sidebar::-webkit-scrollbar-thumb { background: var(--vn-hairline-soft, #e8e2d4); border-radius: 100px; }

.vn-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--vn-hairline-soft, #e8e2d4);
}
.vn-filter-header h3 {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 17px;
    font-weight: 800;
    color: var(--vn-ink, #1a1a1a);
    margin: 0;
    letter-spacing: -0.015em;
}
.vn-filter-reset {
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--vn-blue-deep, #0369a1);
    text-decoration: none;
    padding: 5px 12px;
    background: var(--vn-blue-tint, #e0f2fe);
    border-radius: 100px;
    transition: all 0.2s ease;
}
.vn-filter-reset:hover {
    background: var(--vn-blue-deep, #0369a1);
    color: #ffffff;
}

.vn-filter-group {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--vn-hairline-soft, #e8e2d4);
}
.vn-filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Apply button inside filter sidebar — needs breathing room above */
.vn-filter-sidebar .vn-filter-apply,
.vn-filter-sidebar button[type="submit"] {
    margin-top: 12px !important;
    width: 100%;
}
.vn-filter-group .vn-label {
    display: block;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vn-ink-soft, #5a5a5a);
    margin: 0 0 12px;
}

/* Search input inside sidebar */
.vn-filter-sidebar .vn-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--vn-paper, #f5f0e6);
    border: 1px solid var(--vn-hairline-soft, #e8e2d4);
    border-radius: 12px;
    padding: 11px 14px;
    transition: all 0.2s ease;
}
.vn-filter-sidebar .vn-search-input:focus-within {
    background: #ffffff;
    border-color: var(--vn-blue, #0ea5e9);
    box-shadow: 0 0 0 4px var(--vn-blue-tint, #e0f2fe);
}
.vn-filter-sidebar .vn-search-input svg { color: var(--vn-ink-mute, #8a8a8a); flex-shrink: 0; }
.vn-filter-sidebar .vn-search-input input {
    border: none;
    outline: none;
    background: none;
    width: 100%;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--vn-ink, #1a1a1a);
    padding: 0;
}
.vn-filter-sidebar .vn-search-input input::placeholder { color: var(--vn-ink-mute, #8a8a8a); }

/* Option list */
.vn-filter-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}
.vn-filter-options::-webkit-scrollbar { width: 4px; }
.vn-filter-options::-webkit-scrollbar-thumb { background: var(--vn-hairline-soft, #e8e2d4); border-radius: 100px; }

.vn-filter-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    color: var(--vn-ink-soft, #5a5a5a);
    text-decoration: none;
    margin: 0;
    list-style: none;
}
.vn-filter-option:hover {
    background: var(--vn-paper, #f5f0e6);
    color: var(--vn-ink, #1a1a1a);
}
.vn-filter-option input[type="radio"],
.vn-filter-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--vn-hairline, #d5cdb9);
    border-radius: 50%;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}
.vn-filter-option input[type="checkbox"] { border-radius: 4px; }
.vn-filter-option input[type="radio"]:checked,
.vn-filter-option input[type="checkbox"]:checked {
    border-color: var(--vn-blue, #0ea5e9);
    background: var(--vn-blue, #0ea5e9);
}
.vn-filter-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}
.vn-filter-option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.vn-filter-option:has(input:checked) {
    background: var(--vn-blue-tint, #e0f2fe);
    color: var(--vn-blue-deep, #0369a1);
    font-weight: 600;
}

.vn-filter-option-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vn-filter-option-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--vn-ink-mute, #8a8a8a);
    background: var(--vn-paper, #f5f0e6);
    padding: 2px 8px;
    border-radius: 100px;
    flex-shrink: 0;
}
.vn-filter-option:hover .vn-filter-option-count {
    background: #ffffff;
}
.vn-filter-option:has(input:checked) .vn-filter-option-count {
    background: #ffffff;
    color: var(--vn-blue-deep, #0369a1);
}
.vn-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Category link-style options (not radios) */
a.vn-filter-option { cursor: pointer; }

@media (max-width: 991px) {
    .vn-filter-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 20px;
    }
}

/* ============================================================
   Listing header — unified across all listing pages
   ============================================================ */
.vn-listing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 0 32px !important;
    padding: 0 !important;
    flex-wrap: wrap;
}
.vn-listing-count {
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    color: var(--vn-ink-muted, #8a8a8a);
    margin: 0 !important;
    padding: 0;
}
.vn-listing-count strong {
    color: var(--vn-ink, #1a1a1a);
    font-weight: 800;
    font-size: 15px;
}
.vn-listing-count em {
    font-style: normal;
    color: var(--vn-blue-deep, #0369a1);
    font-weight: 600;
}

/* ============================================================
   My-courses dashboard card — tight image sizing fixes
   ============================================================ */
.vn-mc-mentor img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}
.vn-mc-card svg {
    width: auto;
    height: auto;
    max-width: 22px;
    max-height: 22px;
}
.vn-mc-action svg { max-width: 16px; max-height: 16px; }
.vn-mc-flag svg { max-width: 14px; max-height: 14px; }
.vn-mc-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* Recommend card — also guard against giant images */
.vn-recommend-card img {
    width: 100% !important;
    aspect-ratio: 16 / 10;
    object-fit: cover !important;
    height: auto !important;
    max-height: 180px;
}

/* ============================================================
   Dashboard content density — scale down VN components inside dashboard
   The dashboard content area is narrow, so everything needs to shrink
   ============================================================ */

/* Page headers */
.ol-body-content .vn-mc-header,
.ol-body-content .vn-bookings-header {
    margin-bottom: 20px !important;
    gap: 16px !important;
}
.ol-body-content .vn-eyebrow {
    font-size: 10px !important;
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.1em !important;
}
.ol-body-content .vn-page-title {
    font-size: 1.5rem !important;
    margin: 0 0 6px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}
.ol-body-content .vn-page-sub {
    font-size: 13px !important;
    max-width: 480px !important;
    line-height: 1.5 !important;
}
.ol-body-content .vn-book-more {
    padding: 10px 16px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
}

/* Tabs */
.ol-body-content .vn-bookings-tabs {
    margin-bottom: 18px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    gap: 4px !important;
}
.ol-body-content .vn-booking-tab {
    padding: 8px 14px !important;
    font-size: 12px !important;
    gap: 6px !important;
    border-radius: 8px !important;
}

/* Booking cards — tighter */
.ol-body-content .vn-booking-card {
    padding: 16px 18px !important;
    gap: 14px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
}
.ol-body-content .vn-booking-mentor-img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 12px !important;
}
.ol-body-content .vn-booking-info h3 {
    font-size: 14px !important;
    margin: 0 0 3px !important;
}
.ol-body-content .vn-booking-meta {
    font-size: 11px !important;
    gap: 12px !important;
    margin-top: 4px !important;
}
.ol-body-content .vn-booking-meta svg {
    width: 11px !important;
    height: 11px !important;
}
.ol-body-content .vn-booking-side { gap: 6px !important; }
.ol-body-content .vn-booking-status {
    padding: 4px 10px !important;
    font-size: 10px !important;
}
.ol-body-content .vn-booking-price {
    font-size: 16px !important;
}
.ol-body-content .vn-btn-join,
.ol-body-content .vn-btn-ghost {
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
}

/* My-courses grid — smaller minmax for dashboard */
.ol-body-content .vn-mc-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}
.ol-body-content .vn-mc-card { border-radius: 14px !important; }
.ol-body-content .vn-mc-body { padding: 14px !important; }
.ol-body-content .vn-mc-mentor {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
}
.ol-body-content .vn-mc-mentor img {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}
.ol-body-content .vn-mc-title {
    font-size: 14px !important;
    margin: 0 0 12px !important;
    min-height: 36px !important;
    line-height: 1.3 !important;
}
.ol-body-content .vn-mc-flag {
    padding: 4px 10px !important;
    font-size: 10px !important;
    top: 10px !important;
    left: 10px !important;
}
.ol-body-content .vn-mc-progress-label { font-size: 10px !important; }
.ol-body-content .vn-mc-progress-val { font-size: 12px !important; }
.ol-body-content .vn-mc-progress-bar { height: 5px !important; margin-bottom: 12px !important; }
.ol-body-content .vn-mc-action {
    padding: 10px 14px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    gap: 6px !important;
}
.ol-body-content .vn-mc-action svg { width: 12px !important; height: 12px !important; }

/* Recommend section */
.ol-body-content .vn-recommend-section {
    margin-top: 28px !important;
    padding-top: 24px !important;
}
.ol-body-content .vn-recommend-head h2 { font-size: 17px !important; }
.ol-body-content .vn-recommend-head { margin-bottom: 14px !important; }
.ol-body-content .vn-recommend-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 12px !important;
}
.ol-body-content .vn-recommend-card { border-radius: 12px !important; }
.ol-body-content .vn-recommend-card img { max-height: 130px !important; }
.ol-body-content .vn-recommend-body { padding: 11px !important; }
.ol-body-content .vn-recommend-body h5 {
    font-size: 12px !important;
    margin: 0 0 8px !important;
}
.ol-body-content .vn-recommend-foot { font-size: 11px !important; }
.ol-body-content .vn-recommend-foot strong { font-size: 12px !important; }

/* Bundle cards */
.ol-body-content .vn-bundle-card { border-radius: 14px !important; margin-bottom: 14px !important; }
.ol-body-content .vn-bundle-head {
    padding: 16px 18px !important;
    gap: 14px !important;
}
.ol-body-content .vn-bundle-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
}
.ol-body-content .vn-bundle-icon svg { width: 18px !important; height: 18px !important; }
.ol-body-content .vn-bundle-info h3 { font-size: 15px !important; margin: 0 0 4px !important; }
.ol-body-content .vn-bundle-meta {
    font-size: 11px !important;
    gap: 12px !important;
}
.ol-body-content .vn-bundle-meta svg { width: 11px !important; height: 11px !important; }
.ol-body-content .vn-bundle-course { padding: 11px 18px !important; gap: 10px !important; }
.ol-body-content .vn-bundle-course img {
    width: 46px !important;
    height: 34px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    border-radius: 6px !important;
}
.ol-body-content .vn-bundle-course-title { font-size: 12px !important; }
.ol-body-content .vn-bundle-course-meta { font-size: 10px !important; }

/* Bootcamp cards */
.ol-body-content .vn-bc-card {
    padding: 14px 16px !important;
    gap: 14px !important;
    border-radius: 14px !important;
}
.ol-body-content .vn-bc-thumb {
    width: 110px !important;
    height: 70px !important;
    border-radius: 10px !important;
}
.ol-body-content .vn-bc-body h3 { font-size: 15px !important; margin: 0 0 6px !important; }
.ol-body-content .vn-bc-meta { font-size: 11px !important; gap: 14px !important; }
.ol-body-content .vn-bc-meta svg { width: 12px !important; height: 12px !important; }
.ol-body-content .vn-bc-arrow {
    width: 34px !important;
    height: 34px !important;
}
.ol-body-content .vn-bc-arrow svg { width: 14px !important; height: 14px !important; }

/* Empty states — compact, not ballooning */
.ol-body-content .vn-booking-empty {
    padding: 36px 18px !important;
    border-radius: 14px !important;
}
.ol-body-content .vn-booking-empty svg { width: 34px !important; height: 34px !important; margin-bottom: 10px !important; }
.ol-body-content .vn-booking-empty h3 { font-size: 15px !important; margin: 0 0 4px !important; }
.ol-body-content .vn-booking-empty p { font-size: 12px !important; margin: 0 0 14px !important; max-width: 380px; margin-left: auto !important; margin-right: auto !important; }
.ol-body-content .vn-empty-cta,
.ol-body-content a.vn-empty-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
}
.ol-body-content .vn-empty-cta svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
}

/* Declined card */
.ol-body-content .vn-declined-card {
    padding: 16px 18px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
}
.ol-body-content .vn-declined-head { gap: 14px !important; margin-bottom: 10px !important; }
.ol-body-content .vn-reason-block { padding: 10px 12px !important; border-radius: 10px !important; margin-bottom: 8px !important; }
.ol-body-content .vn-reason-block p { font-size: 12px !important; }
.ol-body-content .vn-reason-label { font-size: 9px !important; }

/* Flash messages */
.ol-body-content .vn-flash {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
}

/* ============================================================
   Dashboard page header component — global, used by all mentee
   and mentor dashboard pages
   ============================================================ */
.vn-mc-header,
.vn-bookings-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.vn-mc-header > div:first-child,
.vn-bookings-header > div:first-child {
    flex: 1;
    min-width: 240px;
}
.vn-eyebrow {
    display: inline-block;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--vn-blue-deep, #0369a1);
    padding: 5px 12px;
    background: var(--vn-blue-tint, #e0f2fe);
    border-radius: 100px;
    margin-bottom: 12px;
}
.vn-page-title {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--vn-ink, #1a1a1a);
    margin: 0 0 8px;
    line-height: 1.1;
}
.vn-page-sub {
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    color: var(--vn-ink-soft, #5a5a5a);
    max-width: 540px;
    margin: 0;
    line-height: 1.55;
}

/* CTA button in header — now actually a button */
.vn-book-more {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    text-decoration: none !important;
    border-radius: 12px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}
.vn-book-more:hover {
    transform: translateY(-2px);
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    box-shadow: 0 8px 20px rgba(26,26,26,0.2);
}
.vn-book-more svg { flex-shrink: 0; }

/* Empty state — global */
.vn-booking-empty {
    text-align: center;
    padding: 70px 20px;
    background: var(--vn-paper, #f5f0e6);
    border: 1px dashed var(--vn-hairline-soft, #f0ebdc);
    border-radius: 16px;
}
.vn-booking-empty svg {
    color: var(--vn-ink-mute, #8a8a8a);
    margin-bottom: 16px;
    opacity: 0.6;
}
.vn-booking-empty h3 {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: var(--vn-ink, #1a1a1a);
    margin: 0 0 8px;
    letter-spacing: -0.015em;
}
.vn-booking-empty p {
    color: var(--vn-ink-soft, #5a5a5a);
    margin: 0 0 20px;
    font-size: 14px;
}
.vn-empty-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    text-decoration: none !important;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
}

/* Public listing empty state — used by courses, bootcamps, ebooks, bundles.
   Self-contained so every listing page that drops a .vn-empty-state div gets
   the same organic treatment without needing per-page CSS. */
.vn-empty-state {
    text-align: center;
    padding: 60px 28px;
    background: #fff;
    border: 1px dashed var(--vn-hairline, #e8e2d4);
    border-radius: 20px;
    max-width: 520px;
    margin: 20px auto 40px;
}
.vn-empty-state > svg {
    width: 28px !important;
    height: 28px !important;
    padding: 14px;
    box-sizing: content-box;
    border-radius: 18px;
    background: linear-gradient(135deg, #fdf4dc 0%, #fbeec7 100%);
    color: #8a6412;
    border: 1px solid #f0d99a;
    margin-bottom: 18px;
}
.vn-empty-state h3 {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: var(--vn-ink, #1a1a1a);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.vn-empty-state p {
    font-size: 13px;
    color: var(--vn-ink-soft, #5a5a5a);
    line-height: 1.55;
    margin: 0 auto 20px;
    max-width: 380px;
}
.vn-empty-state .vn-btn,
.vn-empty-state .vn-btn-ink,
.vn-empty-state a.vn-btn-ink {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    background: #1a1a1a !important;
    color: #fbf9f4 !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 100px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
    transition: all .25s ease !important;
    line-height: 1 !important;
}
.vn-empty-state .vn-btn-ink:hover,
.vn-empty-state a.vn-btn-ink:hover {
    background: #000 !important;
    color: #fbf9f4 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26,26,26,0.18);
}

/* Verified Purchase badge — inline pill next to reviewer name.
   Every review in the system is ownership-gated, so this is shown
   unconditionally to signal trust to future buyers. */
.vn-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: #e8f3e3;
    color: #1f3f1a;
    border: 1px solid #bdd9b2;
    border-radius: 100px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
    margin-left: 6px;
    white-space: nowrap;
}
.vn-verified-badge svg { flex-shrink: 0; color: #2e5c28; }
.vn-empty-cta:hover {
    transform: translateY(-2px);
    color: var(--vn-cream, #fbf9f4) !important;
    box-shadow: 0 8px 20px rgba(26,26,26,0.2);
}

/* Cap my-resources card thumbnails — they were stretching too tall */
.ol-body-content .vn-mc-thumb-wrap {
    aspect-ratio: 16 / 10 !important;
    max-height: 170px !important;
}
.ol-body-content .vn-mc-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-height: 170px !important;
}

/* ============================================================
   Card action buttons — unified across course/bootcamp/ebook/bundle
   "Learn more" / "View" / "Read" buttons all match
   ============================================================ */

.vn-course-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vn-course-cart {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--vn-paper, #f5f0e6);
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vn-ink-soft, #5a5a5a);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.vn-course-cart:hover {
    background: var(--vn-ink, #1a1a1a);
    color: var(--vn-cream, #fbf9f4);
    border-color: var(--vn-ink, #1a1a1a);
    transform: translateY(-1px);
}
.vn-course-cart svg { width: 15px; height: 15px; }

.vn-course-view,
.vn-course-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--vn-ink, #1a1a1a) !important;
    background: transparent !important;
    border: 1.5px solid var(--vn-hairline, #d5cdb9);
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.vn-course-view:hover,
.vn-course-btn:hover {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-color: var(--vn-ink, #1a1a1a);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(26,26,26,0.15);
}
.vn-course-view svg,
.vn-course-btn svg {
    transition: transform 0.2s ease;
    width: 14px;
    height: 14px;
}
.vn-course-view:hover svg,
.vn-course-btn:hover svg { transform: translateX(3px); }

/* Price component shared */
.vn-course-price {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.25rem;
    color: var(--vn-ink, #1a1a1a);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.vn-course-price strong { font-weight: 800; }
.vn-course-price del {
    font-size: 0.8125rem;
    color: var(--vn-ink-mute, #8a8a8a);
    margin-left: 6px;
    font-weight: 400;
}
.vn-course-price .vn-price-free { color: #2e5c28; }

/* Mentor byline shared across cards */
.vn-course-mentor {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    color: var(--vn-ink-soft, #5a5a5a);
}
.vn-course-mentor img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 1.5px solid var(--vn-cream, #fbf9f4);
    flex-shrink: 0;
}

/* Badge components shared across cards */
.vn-course-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 100px;
    text-transform: uppercase;
    z-index: 2;
}
.vn-course-badge-free { background: #2e5c28; color: #fff; }
.vn-course-badge-sale { background: #d4524a; color: #fff; }

/* Footer component — side-by-side price + actions */
.vn-course-footer,
.vn-resource-footer,
.vn-bundle-footer,
.vn-bootcamp-footer,
.vn-bc-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 16px !important;
    margin-top: auto !important;
    border-top: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}
/* Make sure price + actions fit even at small widths */
.vn-course-footer > .vn-course-price,
.vn-resource-footer > .vn-course-price,
.vn-bundle-footer > .vn-course-price,
.vn-bootcamp-footer > .vn-course-price {
    min-width: 0;
    flex-shrink: 1;
}

/* ============================================================
   My-ebooks / my-courses dashboard card — full-width action
   should look like a card button, not a weird bar
   ============================================================ */
.vn-mc-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px !important;
    background: transparent !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border: 1.5px solid var(--vn-hairline, #d5cdb9) !important;
    border-radius: 10px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-top: auto;
    width: auto;
    align-self: flex-start;
    transition: all 0.2s ease !important;
}
.vn-mc-action:hover {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(26,26,26,0.15);
}
.vn-mc-action.vn-action-primary {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}
.vn-mc-action.vn-action-primary:hover {
    background: transparent !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.vn-mc-action.vn-action-done {
    background: #2e5c28 !important;
    color: #fff !important;
    border-color: #2e5c28 !important;
}
.vn-mc-action.vn-action-done:hover {
    background: transparent !important;
    color: #2e5c28 !important;
}
.vn-mc-action svg { width: 13px; height: 13px; }

/* Pin the action button at bottom of card, auto width (not stretched) */
.vn-mc-body > .vn-mc-action {
    margin-top: auto !important;
    width: auto !important;
    align-self: flex-start !important;
}

/* ============================================================
   Dashboard my-courses / my-resources / my-bookings card base
   These must be global since multiple pages use .vn-mc-card
   ============================================================ */

.vn-mc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.vn-mc-card {
    background: #ffffff;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.vn-mc-card:hover {
    transform: translateY(-3px);
    border-color: var(--vn-hairline, #d5cdb9);
    box-shadow: 0 14px 32px rgba(26,26,26,0.08);
}

.vn-mc-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--vn-paper, #f5f0e6);
}
.vn-mc-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease;
}
.vn-mc-card:hover .vn-mc-thumb { transform: scale(1.04); }

.vn-mc-flag {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(6px);
    z-index: 2;
}
.vn-flag-danger { background: rgba(140,46,31,0.92); color: #fff; }
.vn-flag-success { background: rgba(46,92,40,0.92); color: #fff; }
.vn-flag-info { background: rgba(14,165,233,0.92); color: #fff; }

.vn-mc-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
}

.vn-mc-mentor {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 12px;
    color: var(--vn-ink-soft, #5a5a5a);
    font-weight: 600;
}
.vn-mc-mentor img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

.vn-mc-title-link { text-decoration: none; }
.vn-mc-title {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 15px;
    font-weight: 800;
    color: var(--vn-ink, #1a1a1a);
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

/* Progress bar for course cards */
.vn-mc-progress-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.vn-mc-progress-label {
    font-size: 10px;
    color: var(--vn-ink-soft, #5a5a5a);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.vn-mc-progress-val {
    font-size: 12px;
    font-weight: 800;
    color: var(--vn-ink, #1a1a1a);
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
}
.vn-mc-progress-bar {
    height: 5px;
    background: var(--vn-paper, #f5f0e6);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 14px;
}
.vn-mc-progress-bar > div {
    height: 100%;
    background: var(--vn-ink, #1a1a1a);
    border-radius: 100px;
    transition: width 0.4s ease;
}

/* ============================================================
   Dashboard sidebar — full unification for student, mentor, admin
   Overrides the inline blue accents on the user info block
   ============================================================ */

/* User info header block (between logo and nav) — the div with inline styles */
.ol-sidebar > div[style*="border-bottom"],
.sidebar-nav-area > div[style*="border-bottom"],
.ol-sidebar-content-wrap > div[style*="border-bottom"] {
    padding: 18px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    background: var(--vn-cream, #fbf9f4) !important;
}

/* User info avatar — kill blue border */
.ol-sidebar img[style*="border-radius:50%"],
.ol-sidebar img[style*="border-radius: 50%"] {
    border: 2px solid var(--vn-hairline-soft, #f0ebdc) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* User info name */
.ol-sidebar h6[style*="color:#0f172a"],
.ol-sidebar h6[style*="color: #0f172a"] {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--vn-ink, #1a1a1a) !important;
    letter-spacing: -0.015em !important;
    margin: 8px 0 4px !important;
}

/* User info role pill — kill blue text, use ink paper pill */
.ol-sidebar span[style*="color:#0ea5e9"],
.ol-sidebar span[style*="color: #0ea5e9"] {
    display: inline-block !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--vn-ink, #1a1a1a) !important;
    background: var(--vn-paper, #f5f0e6) !important;
    padding: 3px 10px !important;
    border-radius: 100px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Section headers like "Main Menu", "Account", "Learning" */
.sidebar-title,
.sidebar-nav-area h3.sidebar-title,
h3.sidebar-title {
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: var(--vn-ink-mute, #8a8a8a) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin: 18px 0 8px !important;
    padding: 0 20px !important;
    background: transparent !important;
}

/* First section title shouldn't have top margin since user info sits above */
.sidebar-nav-area > h3.sidebar-title:first-child,
.sidebar-logo-area + h3.sidebar-title {
    margin-top: 0 !important;
}

/* Ensure badges inside sidebar items aren't blue */
.sidebar-first-li .badge,
.sidebar-second-li .badge {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 100px !important;
}
.sidebar-first-li .badge.bg-warning,
.sidebar-second-li .badge.bg-warning {
    background: #d4a74c !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.sidebar-first-li .badge.bg-info,
.sidebar-second-li .badge.bg-info {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}

/* Submenu expand arrow */
.first-li-have-sub > a::after {
    color: var(--vn-ink-mute, #8a8a8a) !important;
    font-size: 11px !important;
    transition: transform 0.2s ease !important;
}
.first-li-have-sub.showMenu > a::after,
.first-li-have-sub.active > a::after {
    color: var(--vn-ink, #1a1a1a) !important;
}

/* Logo area bottom border */
.sidebar-logo-area {
    border-bottom: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    padding: 20px !important;
    background: var(--vn-card, #ffffff) !important;
}

/* Sidebar container background */
.ol-sidebar {
    background: var(--vn-card, #ffffff) !important;
    border-right: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
}
.sidebar-nav-area {
    background: var(--vn-card, #ffffff) !important;
}

/* ============================================================
   Booking card component — global base styles.
   Used by mentee my_bookings AND mentor pending/tutor_booking_list.
   The density overrides under .ol-body-content shrink these
   inside the dashboard. Base layout lives here so the card actually
   renders even without page-scoped CSS.
   ============================================================ */

/* Tabs */
.vn-bookings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding: 6px;
    background: var(--vn-paper, #f5f0e6);
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 14px;
    width: fit-content;
    flex-wrap: wrap;
}
.vn-booking-tab {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--vn-ink-soft, #5a5a5a);
    text-decoration: none !important;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
}
.vn-booking-tab:hover {
    color: var(--vn-ink, #1a1a1a);
    background: rgba(255,255,255,0.6);
}
.vn-booking-tab.is-active {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    box-shadow: 0 4px 12px rgba(26,26,26,0.15);
}

/* Card container */
.vn-booking-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.vn-booking-card:hover {
    border-color: var(--vn-hairline, #d5cdb9);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(26,26,26,0.06);
}

/* Avatar */
.vn-booking-mentor-img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    border: 2px solid var(--vn-paper, #f5f0e6);
    flex-shrink: 0;
}

/* Info column */
.vn-booking-info { min-width: 0; }
.vn-booking-info h3 {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 16px;
    font-weight: 800;
    color: var(--vn-ink, #1a1a1a);
    margin: 0 0 4px;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.vn-booking-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 12px;
    color: var(--vn-ink-soft, #5a5a5a);
    margin-top: 6px;
}
.vn-booking-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.vn-booking-meta svg {
    color: var(--vn-ink-mute, #8a8a8a);
    flex-shrink: 0;
}
.vn-booking-meta strong {
    color: var(--vn-ink, #1a1a1a);
    font-weight: 700;
}

/* Right column */
.vn-booking-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
.vn-booking-price {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 20px;
    font-weight: 800;
    color: var(--vn-ink, #1a1a1a);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Status pills */
.vn-booking-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.vn-status-pending { background: #fdf4dc; color: #8a6412; }
.vn-status-approved { background: #e8f3e3; color: #2e5c28; }
.vn-status-rejected { background: #fbe4e0; color: #8c2e1f; }
.vn-status-default { background: var(--vn-paper, #f5f0e6); color: var(--vn-ink, #1a1a1a); }

/* Actions */
.vn-booking-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}
.vn-btn-join {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 9px 16px;
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}
.vn-btn-join:hover {
    transform: translateY(-1px);
    color: var(--vn-cream, #fbf9f4) !important;
    box-shadow: 0 6px 14px rgba(26,26,26,0.18);
}
.vn-btn-ghost {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    color: var(--vn-ink-soft, #5a5a5a) !important;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
.vn-btn-ghost:hover {
    color: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a);
    background: #fff !important;
}

/* Declined card wraps a head + reason blocks */
.vn-declined-card {
    background: #fff;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.vn-declined-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 14px;
}
.vn-reason-block {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 10px;
}
.vn-reason-block:last-child { margin-bottom: 0; }
.vn-reason-declined { background: #fbe4e0; border: 1px solid #f0c5bc; }
.vn-reason-suggestion { background: var(--vn-paper, #f5f0e6); border: 1px solid var(--vn-hairline-soft, #f0ebdc); }
.vn-reason-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vn-ink-soft, #5a5a5a);
    margin-bottom: 4px;
}
.vn-reason-block p {
    margin: 0;
    font-size: 13px;
    color: var(--vn-ink, #1a1a1a);
    line-height: 1.5;
}
.vn-declined-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px dashed var(--vn-hairline-soft, #f0ebdc);
}
.vn-declined-footer small { color: var(--vn-ink-mute, #8a8a8a); font-size: 12px; }

/* Flash message */
.vn-flash {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
}
.vn-flash-success {
    background: #f0f9ed;
    border: 1px solid #c8e0bf;
    color: #2e5c28;
}

/* Responsive */
@media (max-width: 720px) {
    .vn-booking-card {
        grid-template-columns: auto 1fr;
    }
    .vn-booking-side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 14px;
        border-top: 1px dashed var(--vn-hairline-soft, #f0ebdc);
    }
}

/* ============================================================
   Admin sidebar — full nested hierarchy + smooth transitions
   - Level 1 (sidebar-first-li) = top, icon + label
   - Level 2 (sidebar-second-li) = flat child with left rail
   - Level 3 (sidebar-third-li) = deeper, indented with tick bullet
   - Non-accordion, multiple menus can stay open
   ============================================================ */

/* Kill vendor background images on the chevron */
.first-li-have-sub > a::after,
.second-li-have-sub > a::before {
    background-image: none !important;
}

/* Level 1 chevron — use CSS-drawn arrow */
.first-li-have-sub > a::after {
    content: '' !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border: 1.5px solid var(--vn-ink-mute, #8a8a8a) !important;
    border-left: 0 !important;
    border-top: 0 !important;
    transform: translateY(-70%) rotate(45deg) !important;
    transition: transform 0.25s ease, border-color 0.2s ease !important;
    background: transparent !important;
}
.first-li-have-sub:hover > a::after {
    border-color: var(--vn-ink, #1a1a1a) !important;
}
.first-li-have-sub.active > a::after {
    transform: translateY(-30%) rotate(-135deg) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}

/* Level 2 chevron */
.second-li-have-sub > a::before {
    content: '' !important;
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border: 1.5px solid var(--vn-ink-mute, #8a8a8a) !important;
    border-left: 0 !important;
    border-top: 0 !important;
    transform: translateY(-70%) rotate(45deg) !important;
    transition: transform 0.25s ease, border-color 0.2s ease !important;
    background: transparent !important;
}
.second-li-have-sub.active > a::before {
    transform: translateY(-30%) rotate(-135deg) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}

/* Submenu show/hide with smooth transition */
.first-sub-menu,
.second-sub-menu {
    display: block !important;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease !important;
    list-style: none !important;
}
.first-li-have-sub.active > .first-sub-menu,
.second-li-have-sub.active > .second-sub-menu {
    max-height: 800px;
    opacity: 1;
    padding-top: 4px !important;
    padding-bottom: 6px !important;
}

/* Level-2 submenu — indent with a left rail */
.first-li-have-sub > .first-sub-menu {
    margin-left: 14px !important;
    padding-left: 18px !important;
    position: relative;
    border-left: 1px dashed var(--vn-hairline-soft, #f0ebdc) !important;
}
.first-sub-menu .first-sub-menu-title { display: none !important; }

.sidebar-nav .sidebar-second-li,
.sidebar-nav-area .sidebar-second-li {
    margin: 0 !important;
    margin-bottom: 1px !important;
    position: relative;
}
.sidebar-nav .sidebar-second-li > a,
.sidebar-nav-area .sidebar-second-li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    padding: 8px 26px 8px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    position: relative;
    transition: all 0.15s ease !important;
}
.sidebar-nav .sidebar-second-li > a::after,
.sidebar-nav-area .sidebar-second-li > a::after { content: none !important; display: none !important; }
.sidebar-nav .sidebar-second-li > a:hover,
.sidebar-nav-area .sidebar-second-li > a:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
/* Active leaf (level 2 with no children) — strong filled pill */
.sidebar-nav .sidebar-second-li.active:not(.second-li-have-sub) > a,
.sidebar-nav-area .sidebar-second-li.active:not(.second-li-have-sub) > a {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    font-weight: 700 !important;
}
.sidebar-nav .sidebar-second-li.active:not(.second-li-have-sub) > a .badge,
.sidebar-nav-area .sidebar-second-li.active:not(.second-li-have-sub) > a .badge {
    background: var(--vn-cream, #fbf9f4) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
/* Active branch (parent of active leaf) — subtle indicator */
.sidebar-nav .sidebar-second-li.second-li-have-sub.active > a,
.sidebar-nav-area .sidebar-second-li.second-li-have-sub.active > a {
    color: var(--vn-ink, #1a1a1a) !important;
    font-weight: 700 !important;
}

/* Level 3 — deeper indent + connector */
.second-li-have-sub > .second-sub-menu {
    margin: 0 !important;
    padding-left: 14px !important;
    padding-right: 0 !important;
    position: relative;
    list-style: none !important;
}
.sidebar-nav .sidebar-third-li,
.sidebar-nav-area .sidebar-third-li {
    list-style: none !important;
    margin: 0 !important;
    margin-bottom: 1px !important;
    padding-left: 0 !important;
    position: relative;
}
.sidebar-nav .sidebar-third-li::before,
.sidebar-nav-area .sidebar-third-li::before {
    content: '' !important;
    display: none !important;
    background: none !important;
}
.sidebar-nav .sidebar-third-li > a,
.sidebar-nav-area .sidebar-third-li > a {
    display: block !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    padding: 7px 14px 7px 22px !important;
    border-radius: 8px !important;
    background: transparent !important;
    text-decoration: none !important;
    position: relative;
    transition: all 0.15s ease !important;
}
.sidebar-nav .sidebar-third-li > a::after,
.sidebar-nav-area .sidebar-third-li > a::after {
    content: '' !important;
    position: absolute !important;
    left: 10px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--vn-hairline, #d5cdb9) !important;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    display: block !important;
}
.sidebar-nav .sidebar-third-li > a:hover,
.sidebar-nav-area .sidebar-third-li > a:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.sidebar-nav .sidebar-third-li > a:hover::after,
.sidebar-nav-area .sidebar-third-li > a:hover::after {
    background: var(--vn-ink, #1a1a1a) !important;
    width: 5px;
    height: 5px;
}
/* Active level-3 leaf — strong filled pill */
.sidebar-nav .sidebar-third-li.active > a,
.sidebar-nav-area .sidebar-third-li.active > a {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    font-weight: 700 !important;
}
.sidebar-nav .sidebar-third-li.active > a::after,
.sidebar-nav-area .sidebar-third-li.active > a::after {
    background: var(--vn-cream, #fbf9f4) !important;
    width: 5px;
    height: 5px;
}

/* When a level-1 parent has an active child, the level-1 link stays
   in the "expanded" state (bold, ink text) but NOT the full filled pill. */
.sidebar-first-li.first-li-have-sub.active > a {
    background: transparent !important;
    color: var(--vn-ink, #1a1a1a) !important;
    font-weight: 700 !important;
}
.sidebar-first-li.first-li-have-sub.active > a::before { display: none !important; }
/* But if this first-li item has no children AND is active (direct leaf), keep the black bar */
.sidebar-first-li:not(.first-li-have-sub).active > a::before {
    display: block !important;
}

/* Badges inside active leaf stay readable */
.sidebar-first-li.first-li-have-sub.active > a .badge {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}

/* Collapse the sidebar-nav top list padding so nested indent lines up nicely */
.sidebar-nav-area .sidebar-nav > ul {
    padding: 6px 12px 20px !important;
}

/* ============================================================
   NUCLEAR BLUE KILL — covers every Bootstrap / vendor button,
   form, tab, pagination, badge, dropdown so nothing stays blue.
   Applies in admin, mentor, and mentee dashboards AND the public
   site since organic.css is loaded everywhere.
   ============================================================ */

/* Primary buttons — ink */
.btn-primary,
.ol-btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary {
    background: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    background-image: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.btn-primary:hover,
.ol-btn-primary:hover,
.btn-primary:focus,
.ol-btn-primary:focus {
    background: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(26,26,26,0.18) !important;
}

/* Secondary buttons — paper outline */
.btn-secondary,
.ol-btn-secondary,
.btn-outline-secondary,
.ol-btn-outline-secondary {
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    background-image: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}
.btn-secondary:hover,
.ol-btn-secondary:hover,
.btn-outline-secondary:hover,
.ol-btn-outline-secondary:hover {
    background: #fff !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}

/* Success — forest */
.btn-success,
.ol-btn-success {
    background: #2e5c28 !important;
    border-color: #2e5c28 !important;
    color: #fff !important;
    background-image: none !important;
    border-radius: 10px !important;
}

/* Danger — terracotta */
.btn-danger,
.ol-btn-danger {
    background: #8c2e1f !important;
    border-color: #8c2e1f !important;
    color: #fff !important;
    background-image: none !important;
    border-radius: 10px !important;
}

/* Warning — mustard */
.btn-warning,
.ol-btn-warning {
    background: #d4a74c !important;
    border-color: #d4a74c !important;
    color: var(--vn-ink, #1a1a1a) !important;
    background-image: none !important;
    border-radius: 10px !important;
}

/* Info — ink (there's no separate "info" role) */
.btn-info,
.ol-btn-info {
    background: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    background-image: none !important;
    border-radius: 10px !important;
}

/* Outline variants */
.btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.btn-outline-primary:hover {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}
.btn-outline-success {
    background: transparent !important;
    border: 1.5px solid #2e5c28 !important;
    color: #2e5c28 !important;
    border-radius: 10px !important;
}
.btn-outline-danger {
    background: transparent !important;
    border: 1.5px solid #8c2e1f !important;
    color: #8c2e1f !important;
    border-radius: 10px !important;
}

/* Form focus rings — ink not blue */
.form-control:focus,
.form-select:focus,
.ol-form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
select.form-select:focus {
    border-color: var(--vn-ink, #1a1a1a) !important;
    box-shadow: 0 0 0 3px var(--vn-paper, #f5f0e6) !important;
    outline: none !important;
}
.form-check-input:checked {
    background-color: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}
.form-check-input:focus {
    border-color: var(--vn-ink, #1a1a1a) !important;
    box-shadow: 0 0 0 3px var(--vn-paper, #f5f0e6) !important;
}

/* Nav tabs — ink underline */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: var(--vn-ink, #1a1a1a) !important;
    border-bottom-color: var(--vn-ink, #1a1a1a) !important;
    background: transparent !important;
}

/* Pagination — reinforced (both frontend + admin panels) */
.pagination .page-item.active .page-link,
.pagination .active .page-link {
    background: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.pagination .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}
.pagination .page-link:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}
.pagination .page-item.disabled .page-link {
    opacity: 0.4 !important;
    pointer-events: none;
}

/* Dropdowns */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}

/* Bootstrap bg-* status classes — organic palette */
.bg-success,
.badge.bg-success {
    background: #e8f3e3 !important;
    color: #2e5c28 !important;
}
.bg-danger,
.badge.bg-danger {
    background: #fbe4e0 !important;
    color: #8c2e1f !important;
}
.bg-warning,
.badge.bg-warning {
    background: #fdf4dc !important;
    color: #8a6412 !important;
}
.bg-info,
.badge.bg-info {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.bg-primary,
.badge.bg-primary {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}
.bg-secondary,
.badge.bg-secondary {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.text-primary { color: var(--vn-ink, #1a1a1a) !important; }
.text-info { color: var(--vn-ink, #1a1a1a) !important; }
.text-success { color: #2e5c28 !important; }
.text-danger { color: #8c2e1f !important; }
.text-warning { color: #8a6412 !important; }

/* Any remaining inline sky-blue from dashboard pages */
[style*="#0ea5e9"],
[style*="#0284c7"],
[style*="#1b84ff"] {
    /* Cannot undo inline styles via CSS — but we can at least make links/buttons look right */
}
/* Sky-blue links specifically (from old theme.css) */
a.text-sky,
a[style*="color:#0ea5e9"],
a[style*="color: #0ea5e9"] {
    color: var(--vn-ink, #1a1a1a) !important;
}

/* Any old "skinColor" variable references from vendor style.css */
:root {
    --skinColor: #1a1a1a !important;
    --bs-primary: #1a1a1a !important;
    --bs-primary-rgb: 26, 26, 26 !important;
    --bs-link-color: #1a1a1a !important;
    --bs-link-hover-color: #0369a1 !important;
}

/* ============================================================
   Native <select> + ol-select2 + form-select — organic skin
   ============================================================ */

select,
.form-select,
.ol-form-control select,
select.ol-form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    padding: 11px 40px 11px 16px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    color: var(--vn-ink, #1a1a1a) !important;
    font-weight: 500 !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    transition: all 0.2s ease !important;
}
select:focus,
.form-select:focus,
select.ol-form-control:focus {
    background: #fff !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--vn-paper, #f5f0e6) !important;
}

/* Select2 — match the organic select skin */
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection {
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    height: 44px !important;
    padding: 10px 14px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    transition: all 0.2s ease !important;
}
.select2-container--default .select2-selection--single:hover {
    background: #fff !important;
    border-color: var(--vn-hairline, #d5cdb9) !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    background: #fff !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    box-shadow: 0 0 0 3px var(--vn-paper, #f5f0e6) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--vn-ink, #1a1a1a) !important;
    line-height: 22px !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    top: 0 !important;
    right: 10px !important;
    width: 24px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--vn-ink-soft, #5a5a5a) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    left: 50% !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--vn-ink, #1a1a1a) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* Multi select */
.select2-container--default .select2-selection--multiple {
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 4px 12px 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 3px 4px 3px 0 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--vn-cream, #fbf9f4) !important;
    margin-right: 6px !important;
    border: none !important;
    font-weight: 700 !important;
}

/* Dropdown panel */
.select2-dropdown,
.select2-container--default .select2-dropdown {
    background: #fff !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(26,26,26,0.1) !important;
    overflow: hidden !important;
    margin-top: 4px !important;
}
.select2-search--dropdown {
    padding: 10px !important;
    border-bottom: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
}
.select2-search--dropdown .select2-search__field {
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    outline: none !important;
}
.select2-results__options {
    padding: 6px !important;
    max-height: 260px !important;
}
.select2-container--default .select2-results__option {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    font-weight: 500 !important;
    margin: 1px 0 !important;
    transition: all 0.12s ease !important;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    font-weight: 700 !important;
}

/* Bootstrap dropdown menu */
.dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(26,26,26,0.1) !important;
    padding: 6px !important;
    margin-top: 6px !important;
}
.dropdown-menu .dropdown-item {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--vn-ink, #1a1a1a) !important;
    transition: all 0.12s ease !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--vn-paper, #f5f0e6) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.dropdown-menu .dropdown-divider {
    border-top: 1px dashed var(--vn-hairline-soft, #f0ebdc) !important;
    margin: 4px 0 !important;
}
.dropdown-menu .dropdown-header {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--vn-ink-mute, #8a8a8a) !important;
    padding: 10px 14px 4px !important;
}

/* Text inputs — organic */
.form-control,
.ol-form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
textarea.form-control {
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    padding: 11px 16px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    color: var(--vn-ink, #1a1a1a) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.form-control::placeholder,
.ol-form-control::placeholder {
    color: var(--vn-ink-mute, #8a8a8a) !important;
}

/* ============================================================
   Stronger button / select / chevron kill v2
   Catches inline-styled blue, .eBtn, .gradient, .btn class aliases,
   and fixes the select2/select chevron that escapes its padding.
   ============================================================ */

/* Any <button> or <a> with literal sky-blue inline style — can't match
   attribute selectors reliably, so we catch by known class aliases instead. */

/* Vendor "primary" aliases that bypass .btn-primary */
.eBtn,
.eBtn.gradient,
a.eBtn,
button.eBtn,
.btn.eBtn,
.gradient,
.btn.gradient,
.btn-sky,
.btn-sky-sm2 {
    background: var(--vn-ink, #1a1a1a) !important;
    background-image: none !important;
    border: 1px solid var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.eBtn:hover,
.gradient:hover,
.btn-sky:hover,
.btn-sky-sm2:hover {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(26,26,26,0.18) !important;
}

/* Very small sky pill used in legacy admin */
.ol-btn-sky {
    background: var(--vn-ink, #1a1a1a) !important;
    border: none !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-radius: 10px !important;
}

/* .btn-outline-primary was turning transparent on some pages — ensure solid bg */
.btn-outline-primary,
.ol-btn-outline-primary {
    background: #fff !important;
    border: 1.5px solid var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}
.btn-outline-primary:hover,
.ol-btn-outline-primary:hover {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}

/* "Add new X" top-of-page buttons in mentor console — they exist as
   .ol-btn-outline-secondary + fi icon. Ensure not transparent */
.ol-btn-outline-secondary,
.btn-outline-secondary {
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.ol-btn-outline-secondary:hover,
.btn-outline-secondary:hover {
    background: #fff !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-ink, #1a1a1a) !important;
}

/* Any submit button anywhere — ensure it's ink not browser default/blue */
button[type="submit"]:not(.vn-btn-decline):not(.vn-btn-approve):not(.vn-btn-approve-confirm):not(.vn-modal-submit):not(.vn-submit-btn):not(.vn-course-view):not(.vn-mc-action):not(.vn-btn-join):not(.vn-btn-ghost):not(.vn-book-more):not(.vn-empty-cta):not(.vn-course-cart):not(.vn-admin-search-clear):not(.vn-modal-close):not(.vn-chat-send):not(.vn-anc-send):not(.vn-icon-btn) {
    background: var(--vn-ink, #1a1a1a) !important;
    border: 1px solid var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    background-image: none !important;
    border-radius: 10px !important;
    padding: 11px 22px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Select2 chevron escaping the box — force arrow inside padding */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    height: 20px !important;
    width: 14px !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Form labels that wrap to 2 lines — force single line for short labels
   then fall back to wrap for long ones */
.ol-form-label,
.form-label {
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    margin-bottom: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.ol-form-label .text-danger,
.form-label .text-danger {
    color: #d4524a !important;
    font-weight: 800 !important;
}

/* Radio + checkbox accent colour — ink */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--vn-ink, #1a1a1a) !important;
}

/* Nav sidebar hover: don't show pointer on javascript:void(0) that leads nowhere */
.sidebar-nav-area a[href*="javascript"] { cursor: pointer; }

/* Fade transition while PJAX navigating */
body.vn-nav-loading .ol-body-content {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
body:not(.vn-nav-loading) .ol-body-content {
    opacity: 1;
    transition: opacity 0.22s ease;
}

/* Top loading bar */
.vn-nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--vn-ink, #1a1a1a);
    z-index: 9999;
    transition: width 0.35s ease, opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(26,26,26,0.3);
}
body.vn-nav-loading .vn-nav-progress {
    width: 80%;
}
body:not(.vn-nav-loading) .vn-nav-progress {
    width: 100%;
    opacity: 0;
}

/* Hide the vn-form-select-wrap decorative chevron when select2 is active
   (select2 adds its own chevron inside the .select2-selection) */
.vn-form-select-wrap:has(select.select2-hidden-accessible) > svg {
    display: none !important;
}
/* If :has() not supported, also target the class directly */
.vn-form-select-wrap .select2-hidden-accessible + .select2-container ~ svg {
    display: none !important;
}

/* When select2 is inside vn-form-select-wrap, make it fill the wrap nicely */
.vn-form-select-wrap .select2-container { width: 100% !important; }

/* Organic select chevron that's been double-declared - make sure native select has padding-right */
.vn-form-select {
    padding-right: 40px !important;
}

/* ============================================================
   Global VN form primitives — needed by any page using the
   .vn-form-* classes (support/ticket/create, add_schedule,
   payout_setting, and future forms)
   ============================================================ */

.vn-form-card {
    background: #ffffff;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 18px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.03);
    margin-bottom: 18px;
}

.vn-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vn-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.vn-form-label {
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    margin: 0 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: normal !important;
}
.vn-form-label em {
    font-style: normal;
    font-weight: 500;
    color: var(--vn-ink-mute, #8a8a8a);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.vn-form-input,
.vn-form-textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 14px !important;
    color: var(--vn-ink, #1a1a1a) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
}
.vn-form-input::placeholder,
.vn-form-textarea::placeholder {
    color: var(--vn-ink-mute, #8a8a8a) !important;
}
.vn-form-input:focus,
.vn-form-textarea:focus {
    background: #ffffff !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    box-shadow: 0 0 0 3px var(--vn-paper, #f5f0e6) !important;
}
.vn-form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.55;
}

.vn-form-select {
    width: 100% !important;
    padding: 12px 40px 12px 16px !important;
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 14px !important;
    color: var(--vn-ink, #1a1a1a) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    outline: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
}
.vn-form-select:focus {
    background-color: #ffffff !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    box-shadow: 0 0 0 3px var(--vn-paper, #f5f0e6) !important;
}

.vn-form-select-wrap {
    position: relative;
}
/* Hide decorative SVG next to native selects — only keep the one baked into vn-form-select */
.vn-form-select-wrap > svg {
    display: none !important;
}
.vn-form-select-wrap select.ol-select2:not(.select2-hidden-accessible) {
    /* Pre-select2 init fallback */
    display: block;
}

.vn-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px dashed var(--vn-hairline-soft, #f0ebdc);
}

.vn-submit-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border: none !important;
    border-radius: 12px;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
}
.vn-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(26,26,26,0.22);
    color: var(--vn-cream, #fbf9f4) !important;
}

/* ============================================================
   FINAL: Override public-header vn-btn-* buttons so they match
   the ink theme. Earlier declarations used --vn-blue; this one
   wins because it's loaded last AND uses !important.
   ============================================================ */
.vn-btn-primary,
a.vn-btn-primary {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border: 1px solid var(--vn-ink, #1a1a1a) !important;
    border-radius: 10px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 20px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.vn-btn-primary:hover,
a.vn-btn-primary:hover {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(26,26,26,0.2) !important;
}

.vn-btn-outline,
a.vn-btn-outline {
    background: transparent !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border: 1.5px solid var(--vn-ink, #1a1a1a) !important;
    border-radius: 10px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 20px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.vn-btn-outline:hover,
a.vn-btn-outline:hover {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}

.vn-btn-ink {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
}

/* ============================================================
   Global admin table + filter bar — used by purchase-history,
   coupons, admin bookings, and other listing pages.
   Base styles live here; pages can add page-specific inline
   styles on top.
   ============================================================ */

.vn-admin-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.vn-admin-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--vn-paper, #f5f0e6);
    border-radius: 12px;
    flex-wrap: wrap;
}
.vn-admin-tabs .vn-booking-tab {
    padding: 8px 14px;
    font-size: 12px;
    gap: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-weight: 600;
    color: var(--vn-ink-soft, #5a5a5a);
    background: transparent;
    border: none;
    transition: all 0.15s ease;
}
.vn-admin-tabs .vn-booking-tab:hover {
    background: rgba(255,255,255,0.6);
    color: var(--vn-ink, #1a1a1a);
}
.vn-admin-tabs .vn-booking-tab.is-active {
    background: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    box-shadow: 0 4px 10px rgba(26,26,26,0.15);
}
.vn-admin-tabs .vn-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 1px 6px;
    background: rgba(0,0,0,0.08);
    color: inherit;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
}
.vn-admin-tabs .vn-booking-tab.is-active .vn-tab-count {
    background: rgba(255,255,255,0.18);
}

.vn-admin-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--vn-paper, #f5f0e6);
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 260px;
    flex: 1 1 260px;
    max-width: 360px;
    transition: all 0.2s ease;
}
.vn-admin-search:focus-within {
    background: #fff;
    border-color: var(--vn-ink, #1a1a1a);
    box-shadow: 0 0 0 4px var(--vn-paper, #f5f0e6);
}
.vn-admin-search svg {
    color: var(--vn-ink-mute, #8a8a8a);
    flex-shrink: 0;
}
.vn-admin-search input {
    border: none;
    outline: none;
    background: none;
    flex: 1;
    min-width: 0;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--vn-ink, #1a1a1a);
}
.vn-admin-search input::placeholder { color: var(--vn-ink-mute, #8a8a8a); }
.vn-admin-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vn-ink-mute, #8a8a8a);
    color: #fff !important;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.vn-admin-search-clear:hover {
    background: var(--vn-ink, #1a1a1a);
    color: #fff !important;
}

.vn-admin-table-wrap {
    background: #ffffff;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 16px;
    overflow: hidden;
    overflow-x: auto;
}
.vn-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif);
}
.vn-admin-table thead th {
    background: var(--vn-paper, #f5f0e6);
    padding: 14px 18px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vn-ink-soft, #5a5a5a);
    border-bottom: 1px solid var(--vn-hairline-soft, #f0ebdc);
    white-space: nowrap;
}
.vn-admin-table thead th.right { text-align: right; }
.vn-admin-table tbody td {
    padding: 16px 18px;
    font-size: 13px;
    color: var(--vn-ink, #1a1a1a);
    border-bottom: 1px dashed var(--vn-hairline-soft, #f0ebdc);
    vertical-align: middle;
}
.vn-admin-table tbody tr:last-child td { border-bottom: none; }
.vn-admin-table tbody tr:hover { background: var(--vn-paper, #f5f0e6); }
.vn-admin-table tbody td.right { text-align: right; }
.vn-admin-table tbody td strong { font-weight: 700; }

.vn-admin-idx {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 13px;
    font-weight: 800;
    color: var(--vn-ink-mute, #8a8a8a);
    letter-spacing: -0.02em;
}
.vn-admin-amt {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.015em;
}
.vn-admin-date {
    display: flex;
    flex-direction: column;
}
.vn-admin-date strong { font-weight: 700; font-size: 12px; }
.vn-admin-date span { font-size: 10px; color: var(--vn-ink-mute, #8a8a8a); margin-top: 2px; }

/* ============================================================
   Public site top bar + footer — organic ink theme
   ============================================================ */

/* Top bar */
.vn-topbar {
    background: var(--vn-ink, #1a1a1a) !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(212,167,76,0.15) !important;
}
.vn-topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.vn-topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.vn-topbar-left a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 12px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 100px !important;
    color: rgba(251,249,244,0.8) !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0.01em !important;
    transition: all 0.2s ease !important;
}
.vn-topbar-left a:hover {
    background: rgba(255,255,255,0.08) !important;
    color: var(--vn-cream, #fbf9f4) !important;
    border-color: rgba(212,167,76,0.35) !important;
    transform: translateY(-1px);
}
.vn-topbar-left a i {
    font-size: 10px !important;
    color: #d4a74c !important;
    opacity: 1 !important;
}

.vn-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.vn-topbar-socials {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.vn-topbar-socials a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 50% !important;
    color: rgba(251,249,244,0.6) !important;
    font-size: 10px !important;
    transition: all 0.2s ease !important;
}
.vn-topbar-socials a:hover {
    background: #d4a74c !important;
    border-color: #d4a74c !important;
    color: var(--vn-ink, #1a1a1a) !important;
    transform: translateY(-2px);
}
.vn-topbar-lang .nice-select,
.vn-topbar-lang select {
    color: rgba(251,249,244,0.75) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ============================================================
   Footer — organic ink
   ============================================================ */
.vn-footer {
    background: var(--vn-ink, #1a1a1a) !important;
    color: rgba(251,249,244,0.7) !important;
    position: relative;
    overflow: hidden;
}
.vn-footer::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,167,76,0.08) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}
.vn-footer::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,165,233,0.05) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}
.vn-footer > .container { position: relative; z-index: 1; }

.vn-footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr !important;
    gap: 48px !important;
    padding: 64px 0 48px !important;
}
@media (max-width: 900px) {
    .vn-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
}
@media (max-width: 560px) {
    .vn-footer-grid {
        grid-template-columns: 1fr !important;
    }
}

.vn-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vn-footer-logo {
    height: auto !important;
    max-height: 44px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block !important;
    align-self: flex-start;
}
.vn-footer-brand p {
    font-size: 14px !important;
    color: rgba(251,249,244,0.65) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    max-width: 340px;
}
.vn-footer-socials {
    display: flex !important;
    gap: 8px !important;
    margin-top: 4px;
}
.vn-footer-socials a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    color: rgba(251,249,244,0.7) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}
.vn-footer-socials a:hover {
    background: #d4a74c !important;
    border-color: #d4a74c !important;
    color: var(--vn-ink, #1a1a1a) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(212,167,76,0.3) !important;
}

.vn-footer-col h5 {
    font-family: var(--vn-font-display, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--vn-cream, #fbf9f4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    margin: 0 0 20px !important;
    position: relative;
    padding-bottom: 14px;
}
.vn-footer-col h5::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    background: #d4a74c;
    border-radius: 100px;
}
.vn-footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.vn-footer-col ul li {
    list-style: none !important;
}
.vn-footer-col ul li a {
    color: rgba(251,249,244,0.65) !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease !important;
}
.vn-footer-col ul li a::before {
    content: '';
    width: 0;
    height: 1px;
    background: #d4a74c;
    transition: width 0.2s ease;
}
.vn-footer-col ul li a:hover {
    color: var(--vn-cream, #fbf9f4) !important;
    transform: translateX(3px);
}
.vn-footer-col ul li a:hover::before { width: 14px; }

/* Newsletter */
.vn-footer-newsletter p {
    font-size: 13px !important;
    color: rgba(251,249,244,0.65) !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
}
.vn-newsletter-form {
    display: flex !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    padding: 5px !important;
    margin-bottom: 18px !important;
    transition: all 0.2s ease !important;
}
.vn-newsletter-form:focus-within {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(212,167,76,0.4) !important;
}
.vn-newsletter-form input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 10px 12px !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 13px !important;
    color: var(--vn-cream, #fbf9f4) !important;
    min-width: 0;
}
.vn-newsletter-form input::placeholder {
    color: rgba(251,249,244,0.5) !important;
}
.vn-newsletter-form button {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    background: #d4a74c !important;
    color: var(--vn-ink, #1a1a1a) !important;
    border-radius: 8px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0;
}
.vn-newsletter-form button:hover {
    background: #e3b961 !important;
    transform: translateX(2px);
}

.vn-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vn-footer-contact a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(251,249,244,0.65) !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
.vn-footer-contact a i {
    color: #d4a74c !important;
    font-size: 11px !important;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,167,76,0.12);
    border-radius: 6px;
}
.vn-footer-contact a:hover {
    color: var(--vn-cream, #fbf9f4) !important;
}

/* Footer bottom bar */
.vn-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 24px 0 !important;
    position: relative;
    z-index: 1;
}
.vn-footer-bottom-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}
.vn-footer-bottom-inner p {
    margin: 0 !important;
    font-size: 12px !important;
    color: rgba(251,249,244,0.5) !important;
    font-weight: 500 !important;
}
.vn-footer-legal {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.vn-footer-legal a {
    color: rgba(251,249,244,0.55) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.vn-footer-legal a:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--vn-cream, #fbf9f4) !important;
}

@media (max-width: 560px) {
    .vn-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .vn-topbar-inner { justify-content: center; }
    .vn-topbar-right { width: 100%; justify-content: center; }
}

/* ============================================================
   Public header icon buttons — unified with dashboard .vn-hdr-btn
   ============================================================ */
.vn-icon-btn {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--vn-paper, #f5f0e6) !important;
    border: 1px solid var(--vn-hairline-soft, #f0ebdc) !important;
    border-radius: 12px !important;
    color: var(--vn-ink-soft, #5a5a5a) !important;
    text-decoration: none !important;
    font-size: 15px !important;
    cursor: pointer;
    transition: all 0.18s ease !important;
    padding: 0 !important;
}
/* Bootstrap `d-none` must still win over our forced display: inline-flex.
 * Without these, .d-none / .d-md-inline-flex utilities can't hide .vn-icon-btn
 * because the rule above uses !important. */
.vn-icon-btn.d-none { display: none !important; }
@media (min-width: 576px) { .vn-icon-btn.d-sm-inline-flex { display: inline-flex !important; } }
@media (min-width: 768px) { .vn-icon-btn.d-md-inline-flex { display: inline-flex !important; } }
@media (min-width: 992px) { .vn-icon-btn.d-lg-inline-flex, .vn-icon-btn.d-lg-flex { display: inline-flex !important; } }
@media (min-width: 1200px) { .vn-icon-btn.d-xl-inline-flex { display: inline-flex !important; } }
.vn-icon-btn:hover {
    background: #ffffff !important;
    border-color: var(--vn-ink, #1a1a1a) !important;
    color: var(--vn-ink, #1a1a1a) !important;
    transform: translateY(-1px);
}
.vn-icon-btn i { font-size: 15px !important; line-height: 1 !important; }
.vn-icon-btn .vn-badge,
.vn-header-right .vn-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #d4a74c !important;
    color: var(--vn-ink, #1a1a1a) !important;
    font-family: var(--vn-font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    text-align: center;
    border-radius: 100px !important;
    border: 2px solid #ffffff !important;
    letter-spacing: -0.02em;
}

/* Avatar button in public header */
.vn-avatar-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--vn-hairline-soft, #f0ebdc);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.18s ease;
}
.vn-avatar-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.vn-avatar-btn:hover {
    border-color: var(--vn-ink, #1a1a1a);
    transform: translateY(-1px);
}

/* Header right gap + alignment */
.vn-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ============================================================
   Legal / policy pages — shared content wrapper
   ============================================================ */
.vn-legal-wrap { padding: 56px 0 96px; background: #fbf9f4; }
.vn-legal-body {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #f0ebdc;
    border-radius: 18px;
    padding: 40px 44px;
    box-shadow: 0 2px 10px rgba(26,26,26,0.03);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #3a3a3a;
}
.vn-legal-body h1, .vn-legal-body h2, .vn-legal-body h3, .vn-legal-body h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.018em;
    margin: 28px 0 12px;
    line-height: 1.25;
}
.vn-legal-body h1 { font-size: 26px; }
.vn-legal-body h2 { font-size: 22px; }
.vn-legal-body h3 { font-size: 18px; }
.vn-legal-body h4 { font-size: 15.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #5a5a5a; }
.vn-legal-body p  { margin: 0 0 16px; }
.vn-legal-body a  { color: #1a1a1a; text-decoration: underline; text-underline-offset: 2px; }
.vn-legal-body a:hover { color: #c89b3c; }
.vn-legal-body ul, .vn-legal-body ol { margin: 0 0 18px; padding-left: 22px; }
.vn-legal-body li { margin-bottom: 6px; }
.vn-legal-body strong { color: #1a1a1a; font-weight: 700; }
.vn-legal-body hr { border: 0; border-top: 1px solid #f0ebdc; margin: 28px 0; }
.vn-legal-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; }
.vn-legal-body blockquote {
    margin: 18px 0;
    padding: 14px 20px;
    background: #faf6ec;
    border-left: 3px solid #c89b3c;
    border-radius: 0 10px 10px 0;
    color: #5a5a5a;
    font-style: italic;
}
@media (max-width: 767px) {
    .vn-legal-wrap { padding: 32px 0 60px; }
    .vn-legal-body { padding: 24px 22px; border-radius: 14px; font-size: 14.5px; }
    .vn-legal-body h1 { font-size: 22px; }
    .vn-legal-body h2 { font-size: 19px; }
    .vn-legal-body h3 { font-size: 16.5px; }
}