/* ============================================================
   ECOMKASH DESIGN SYSTEM — Kling AI Inspired
   Palette: Cyan (#00D4FF) + Purple (#8B5CF6) + Dark (#0A0A0F)
   ============================================================ */

/* ─── CSS CUSTOM PROPERTIES ─────────────────────────────── */
:root {
    --ek-bg-primary: #0A0A0F;
    --ek-bg-secondary: #111118;
    --ek-bg-card: #16161F;
    --ek-bg-card-hover: #1C1C28;
    --ek-bg-elevated: #1A1A25;
    --ek-bg-input: #12121A;

    --ek-cyan: #00D4FF;
    --ek-cyan-dim: #0099CC;
    --ek-cyan-glow: rgba(0, 212, 255, 0.15);
    --ek-cyan-border: rgba(0, 212, 255, 0.3);

    --ek-purple: #8B5CF6;
    --ek-purple-dim: #7C3AED;
    --ek-purple-glow: rgba(139, 92, 246, 0.15);
    --ek-magenta: #D946EF;

    --ek-gradient: linear-gradient(135deg, var(--ek-cyan), var(--ek-purple));
    --ek-gradient-h: linear-gradient(90deg, var(--ek-cyan), var(--ek-purple));
    --ek-gradient-card: linear-gradient(135deg, var(--ek-cyan), var(--ek-purple), var(--ek-magenta));

    --ek-text-primary: #F0F0F5;
    --ek-text-secondary: #9CA3AF;
    --ek-text-muted: #6B7280;

    --ek-border: rgba(255, 255, 255, 0.06);
    --ek-border-active: var(--ek-cyan-border);

    --ek-radius-sm: 8px;
    --ek-radius-md: 12px;
    --ek-radius-lg: 16px;
    --ek-radius-xl: 20px;
    --ek-radius-full: 9999px;

    --ek-sidebar-width: 72px;
    --ek-sidebar-expanded: 240px;
    --ek-header-height: 60px;

    --ek-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ek-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── GOOGLE FONT IMPORT ────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ─── GLOBAL RESET & BASE ───────────────────────────────── */
html.night-mode,
html,
body {
    background: var(--ek-bg-primary) !important;
    color: var(--ek-text-primary) !important;
    font-family: var(--ek-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*::selection {
    background: var(--ek-cyan);
    color: #000;
}

/* ─── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--ek-bg-primary);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   HEADER / TOP NAV — Sleek dark bar
   ============================================================ */
header.header,
header {
    background: var(--ek-bg-secondary) !important;
    border-bottom: 1px solid var(--ek-border) !important;
    height: var(--ek-header-height) !important;
    min-height: var(--ek-header-height) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    padding: 0 20px !important;
}

/* Search bar in header */
.header_center_group {
    display: flex !important;
    align-items: center;
    flex: 1;
    max-width: 500px;
    margin: 0 auto;
}

.search_form,
.header .search_form {
    background: var(--ek-bg-input) !important;
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-full) !important;
    padding: 8px 16px !important;
    color: var(--ek-text-primary) !important;
    transition: border var(--ek-transition);
}

.search_form:focus-within {
    border-color: var(--ek-cyan-border) !important;
    box-shadow: 0 0 0 3px var(--ek-cyan-glow) !important;
}

.search_form input,
.search_form input::placeholder {
    color: var(--ek-text-muted) !important;
    font-family: var(--ek-font) !important;
}

/* Header links */
.header_right ul li a,
.option_links,
.header-link-koins {
    color: var(--ek-text-secondary) !important;
    transition: color var(--ek-transition);
}

.header_right ul li a:hover,
.option_links:hover {
    color: var(--ek-cyan) !important;
}

/* Membership CTA */
.membership-status.membership-cta,
.membership-text.membership-cta {
    background: var(--ek-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

/* Koins balance */
.koins-balance,
.koins-balance-responsive {
    color: var(--ek-cyan) !important;
    font-weight: 600 !important;
}

.koins-balance i.fas.fa-coins,
.koins-balance-responsive i.fas.fa-coins,
.header-link-koins i.fas.fa-coins,
.koin-icon-responsive {
    color: var(--ek-cyan) !important;
}

/* Upload / CTA button */
.upload_btn,
a.upload_btn {
    background: var(--ek-gradient) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ek-radius-full) !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px;
    transition: all var(--ek-transition);
    box-shadow: 0 4px 15px var(--ek-cyan-glow);
}

.upload_btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 25px var(--ek-cyan-glow);
}

/* Profile image */
.opts_account img {
    border-radius: 50% !important;
    border: 2px solid var(--ek-border) !important;
    transition: border-color var(--ek-transition);
}

.opts_account:hover img {
    border-color: var(--ek-cyan) !important;
}

/* Notification badge */
.noti_count {
    background: var(--ek-purple) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: var(--ek-radius-full) !important;
}

/* Dropdowns */
.dropdown_mn,
.dropdown_ms,
.dropdown_account,
.menu.dropdown_mn,
.menu.dropdown_ms,
.menu.dropdown_account {
    background: var(--ek-bg-card) !important;
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-md) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px);
}

.dropdown_account .channel_item,
.dropdown_mn a,
.dropdown_ms a {
    color: var(--ek-text-secondary) !important;
    transition: all var(--ek-transition);
}

.dropdown_account .channel_item:hover,
.dropdown_mn a:hover,
.dropdown_ms a:hover {
    background: var(--ek-bg-card-hover) !important;
    color: var(--ek-text-primary) !important;
}

/* ============================================================
   SIDEBAR — Ultra-thin icon sidebar (Kling AI style)
   ============================================================ */
nav.vertical_nav,
.vertical_nav {
    background: var(--ek-bg-secondary) !important;
    border-right: 1px solid var(--ek-border) !important;
    z-index: 999;
}

.vertical_nav .left_section,
.vertical_nav .left_section.menu_left {
    background: var(--ek-bg-secondary) !important;
}

/* Desktop only: prevent sidebar from collapsing */
@media (min-width: 992px) {
    nav.vertical_nav,
    .vertical_nav,
    .vertical_nav .left_section,
    .vertical_nav .left_section.menu_left {
        width: var(--ek-sidebar-expanded) !important;
        min-width: var(--ek-sidebar-expanded) !important;
    }

    .vertical_nav__minify,
    .vertical_nav__minify .left_section {
        width: var(--ek-sidebar-expanded) !important;
        min-width: var(--ek-sidebar-expanded) !important;
    }

    .vertical_nav__minify .menu--label,
    .vertical_nav__minify .left_title,
    .vertical_nav__minify .sidebar-section-title,
    .vertical_nav__minify .sidebar-progress-mini {
        display: block !important;
        opacity: 1 !important;
    }

    /* Hide collapse button on desktop since sidebar is always open */
    .collapse_menu {
        display: none !important;
    }
}

/* Section titles - hidden by default, show on expand */
.left_title,
.sidebar-section-title,
h6.left_title {
    color: var(--ek-text-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 16px 0 6px 22px !important;
    margin: 0 !important;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s;
}

/* Sidebar progress mini */
.sidebar-progress-mini {
    padding: 12px 16px !important;
    opacity: 1;
    transition: opacity 0.2s;
}

.sidebar-progress-track {
    background: var(--ek-bg-input) !important;
    border-radius: var(--ek-radius-full) !important;
    height: 4px !important;
    overflow: hidden;
}

.sidebar-progress-fill {
    background: var(--ek-gradient-h) !important;
    border-radius: var(--ek-radius-full) !important;
    height: 100%;
    transition: width 0.5s ease;
}

.sidebar-progress-label {
    color: var(--ek-text-muted) !important;
    font-size: 11px !important;
}

.sidebar-progress-pct {
    color: var(--ek-cyan) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Menu items */
.vertical_nav .menu--item {
    list-style: none;
}

.vertical_nav .menu--link {
    display: flex !important;
    align-items: center !important;
    padding: 10px 22px !important;
    color: var(--ek-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    transition: all var(--ek-transition);
    white-space: nowrap;
    text-decoration: none !important;
    position: relative;
}

.vertical_nav .menu--link:hover,
.night-mode .vertical_nav .menu--link:hover,
.night-mode .menu--link:hover,
.night-mode .menu--link:hover .menu--label {
    color: var(--ek-cyan) !important;
    background: var(--ek-cyan-glow) !important;
}

.vertical_nav .menu--link.active,
.night-mode .vertical_nav .menu--link.active,
.night-mode .menu--link.active {
    color: var(--ek-cyan) !important;
    background: var(--ek-cyan-glow) !important;
}

/* Active indicator line */
.vertical_nav .menu--link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: var(--ek-cyan);
    border-radius: 0 3px 3px 0;
}

/* Menu icons */
.vertical_nav .menu--icon {
    font-size: 20px !important;
    width: 28px !important;
    min-width: 28px !important;
    text-align: center;
    margin-right: 12px !important;
    transition: color var(--ek-transition);
}

.vertical_nav .menu--link.active .menu--icon {
    color: var(--ek-cyan) !important;
}

/* Menu labels - always visible when sidebar is open */
.vertical_nav .menu--label {
    opacity: 1;
    transition: opacity 0.2s;
    font-size: 13px !important;
}

/* Sidebar badge */
.vertical_nav .menu--label span[style*="background:#cfaa4a"],
.vertical_nav .menu--label span[style*="background: #cfaa4a"] {
    background: var(--ek-purple) !important;
    color: #fff !important;
    border-radius: var(--ek-radius-full) !important;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.wrapper,
.all-content-wrapper,
#app {
    background: var(--ek-bg-primary) !important;
}

.container,
.container-fluid {
    color: var(--ek-text-primary);
}

/* Content shift for sidebar */
.content_wrapper,
.all-content-wrapper {
    margin-left: var(--ek-sidebar-width) !important;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: calc(100vh - var(--ek-header-height));
    padding: 24px !important;
}

/* ============================================================
   CARDS — Glass morphism with glow borders
   ============================================================ */
.card,
.la-card,
.course_card,
.card-body,
.section-card {
    background: var(--ek-bg-card) !important;
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-lg) !important;
    color: var(--ek-text-primary) !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

.card:hover,
.course_card:hover {
    border-color: var(--ek-cyan-border) !important;
    box-shadow: 0 0 30px var(--ek-cyan-glow) !important;
    transform: translateY(-2px);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ek-border) !important;
    color: var(--ek-text-primary) !important;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--ek-border) !important;
}

/* ============================================================
   STAT CARDS — Gradient cards (Ganancias, Afiliados, etc.)
   ============================================================ */
.stat-card,
.dashboard-stat,
[class*="stat-card"] {
    background: var(--ek-gradient-card) !important;
    border: none !important;
    border-radius: var(--ek-radius-xl) !important;
    padding: 24px !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(139, 92, 246, 0.2));
    pointer-events: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary - Gradient */
.btn-primary,
.btn-default,
.enrolled-btn {
    background: var(--ek-gradient) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-family: var(--ek-font) !important;
    border-radius: var(--ek-radius-sm) !important;
    padding: 10px 24px !important;
    transition: all var(--ek-transition);
    box-shadow: 0 4px 15px var(--ek-cyan-glow);
    letter-spacing: 0.3px;
}

.btn-primary:hover,
.btn-default:hover,
.enrolled-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 25px var(--ek-cyan-glow) !important;
    filter: brightness(1.1);
}

/* Secondary - Outlined */
.btn-secondary,
.btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--ek-cyan-border) !important;
    color: var(--ek-cyan) !important;
    font-weight: 600 !important;
    font-family: var(--ek-font) !important;
    border-radius: var(--ek-radius-sm) !important;
    padding: 10px 24px !important;
    transition: all var(--ek-transition);
}

.btn-secondary:hover,
.btn-outline-primary:hover {
    background: var(--ek-cyan-glow) !important;
    border-color: var(--ek-cyan) !important;
}

/* Ghost button */
.btn-ghost,
.btn-link {
    background: transparent !important;
    border: none !important;
    color: var(--ek-text-secondary) !important;
    padding: 10px 16px !important;
}

.btn-ghost:hover,
.btn-link:hover {
    color: var(--ek-cyan) !important;
}

/* Danger */
.btn-danger {
    background: #EF4444 !important;
    border: none !important;
    border-radius: var(--ek-radius-sm) !important;
}

/* Success */
.btn-success {
    background: #10B981 !important;
    border: none !important;
    border-radius: var(--ek-radius-sm) !important;
}

/* Warning */
.btn-warning {
    background: var(--ek-purple) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--ek-radius-sm) !important;
}

/* ============================================================
   TABS / PILLS — Kling AI style
   ============================================================ */
.nav-tabs,
.nav-pills {
    border-bottom: 1px solid var(--ek-border) !important;
    gap: 4px;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    background: transparent !important;
    border: none !important;
    color: var(--ek-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
    border-radius: var(--ek-radius-sm) !important;
    transition: all var(--ek-transition);
    font-family: var(--ek-font) !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--ek-text-primary) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--ek-cyan) !important;
    background: var(--ek-cyan-glow) !important;
    font-weight: 600 !important;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select,
.custom-select {
    background: var(--ek-bg-input) !important;
    border: 1px solid var(--ek-border) !important;
    color: var(--ek-text-primary) !important;
    border-radius: var(--ek-radius-sm) !important;
    padding: 10px 14px !important;
    font-family: var(--ek-font) !important;
    font-size: 14px !important;
    transition: border-color var(--ek-transition), box-shadow var(--ek-transition);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--ek-cyan) !important;
    box-shadow: 0 0 0 3px var(--ek-cyan-glow) !important;
    outline: none !important;
    background: var(--ek-bg-input) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--ek-text-muted) !important;
}

label {
    color: var(--ek-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.table,
table {
    color: var(--ek-text-primary) !important;
}

.table thead th {
    background: var(--ek-bg-secondary) !important;
    border-bottom: 1px solid var(--ek-border) !important;
    color: var(--ek-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    border-color: var(--ek-border) !important;
    vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02) !important;
}

.table-hover tbody tr:hover {
    background: var(--ek-cyan-glow) !important;
}

/* ============================================================
   COURSE CARDS — Image-first with overlay (Kling style)
   ============================================================ */
.fcrse_1,
.course-card-item,
.crse_item {
    background: var(--ek-bg-card) !important;
    border-radius: var(--ek-radius-lg) !important;
    border: 1px solid var(--ek-border) !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.fcrse_1:hover,
.course-card-item:hover,
.crse_item:hover {
    border-color: var(--ek-cyan-border) !important;
    box-shadow: 0 0 30px var(--ek-cyan-glow) !important;
    transform: translateY(-4px);
}

/* Course image */
.fcrse_1 .tutor_img,
.course-card-item .course-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--ek-radius-lg) var(--ek-radius-lg) 0 0 !important;
}

.fcrse_1 .tutor_img img {
    transition: transform 0.4s ease;
}

.fcrse_1:hover .tutor_img img {
    transform: scale(1.05);
}

/* Duration badge on image */
.fcrse_1 .crse_timer,
.course-duration-badge {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px);
    color: #fff !important;
    border-radius: var(--ek-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
}

/* Course info */
.fcrse_1 .tutor_corse_rate,
.course-meta {
    color: var(--ek-text-secondary) !important;
    font-size: 13px !important;
}

.fcrse_1 .vdtl_tilte,
.course-title {
    color: var(--ek-text-primary) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

/* Price tag */
.fcrse_1 .crse_price,
.course-price {
    color: var(--ek-cyan) !important;
    font-weight: 700 !important;
}

/* Rating stars */
.rating_star i,
.star-rating i {
    color: var(--ek-cyan) !important;
}

/* ============================================================
   BADGES & TAGS
   ============================================================ */
.badge,
.badge-primary {
    background: var(--ek-cyan-glow) !important;
    color: var(--ek-cyan) !important;
    border: 1px solid var(--ek-cyan-border) !important;
    border-radius: var(--ek-radius-full) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
}

.badge-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10B981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.badge-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #EF4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.badge-warning {
    background: var(--ek-purple-glow) !important;
    color: var(--ek-purple) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
    background: var(--ek-bg-card) !important;
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-lg) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

.modal-header {
    border-bottom: 1px solid var(--ek-border) !important;
}

.modal-footer {
    border-top: 1px solid var(--ek-border) !important;
}

.modal-title {
    color: var(--ek-text-primary) !important;
    font-weight: 700 !important;
}

.modal-body {
    color: var(--ek-text-secondary) !important;
}

.close,
.btn-close {
    color: var(--ek-text-muted) !important;
    opacity: 1 !important;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px);
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    border-radius: var(--ek-radius-md) !important;
    border: 1px solid var(--ek-border) !important;
    font-family: var(--ek-font) !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10B981 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #EF4444 !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.alert-info {
    background: var(--ek-cyan-glow) !important;
    color: var(--ek-cyan) !important;
    border-color: var(--ek-cyan-border) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination .page-link {
    background: var(--ek-bg-card) !important;
    border: 1px solid var(--ek-border) !important;
    color: var(--ek-text-secondary) !important;
    border-radius: var(--ek-radius-sm) !important;
    font-weight: 500 !important;
    margin: 0 2px !important;
    transition: all var(--ek-transition);
}

.pagination .page-link:hover {
    background: var(--ek-cyan-glow) !important;
    border-color: var(--ek-cyan-border) !important;
    color: var(--ek-cyan) !important;
}

.pagination .active .page-link {
    background: var(--ek-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ============================================================
   ACHIEVEMENT BADGES / TROFEOS
   ============================================================ */
.achievement-badge,
.trophy-icon {
    filter: drop-shadow(0 0 8px var(--ek-cyan-glow));
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress {
    background: var(--ek-bg-input) !important;
    border-radius: var(--ek-radius-full) !important;
    height: 6px !important;
    overflow: hidden;
}

.progress-bar {
    background: var(--ek-gradient-h) !important;
    border-radius: var(--ek-radius-full) !important;
}

/* ============================================================
   SOCIAL LINKS & ICONS
   ============================================================ */
.social-icon,
.social-link {
    background: var(--ek-bg-card) !important;
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-sm) !important;
    color: var(--ek-text-secondary) !important;
    transition: all var(--ek-transition);
}

.social-icon:hover,
.social-link:hover {
    border-color: var(--ek-cyan-border) !important;
    color: var(--ek-cyan) !important;
    box-shadow: 0 0 15px var(--ek-cyan-glow) !important;
}

/* ============================================================
   TOOLTIP OVERRIDES
   ============================================================ */
.tooltip-inner {
    background: var(--ek-bg-elevated) !important;
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-sm) !important;
    font-family: var(--ek-font) !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
}

/* ============================================================
   ADMIN SIDEBAR OVERRIDES
   ============================================================ */
#sidebar-wrapper,
.main-sidebar {
    background: var(--ek-bg-secondary) !important;
    border-right: 1px solid var(--ek-border) !important;
}

.sidebar-menu li a {
    color: var(--ek-text-secondary) !important;
    font-family: var(--ek-font) !important;
    transition: all var(--ek-transition);
}

.sidebar-menu li a:hover {
    color: var(--ek-cyan) !important;
    background: transparent !important;
    opacity: 0.85;
}

.sidebar-menu li.active > a {
    color: var(--ek-cyan) !important;
    background: var(--ek-cyan-glow) !important;
}

.sidebar-menu .menu-header {
    color: var(--ek-text-muted) !important;
    font-family: var(--ek-font) !important;
}

.sidebar-brand {
    background: var(--ek-bg-secondary) !important;
    border-bottom: 1px solid var(--ek-border) !important;
}

/* Admin dropdown menus */
.sidebar-menu .dropdown-menu {
    background: var(--ek-bg-elevated) !important;
}

.sidebar-menu .dropdown-menu a {
    color: var(--ek-text-secondary) !important;
}

.sidebar-menu .dropdown-menu a:hover,
.sidebar-menu .dropdown-menu a.active {
    color: var(--ek-cyan) !important;
}

/* ============================================================
   ADMIN MAIN CONTENT
   ============================================================ */
.main-content {
    background: var(--ek-bg-primary) !important;
}

.section .section-header {
    border-bottom: 1px solid var(--ek-border) !important;
}

.section .section-header h1 {
    color: var(--ek-text-primary) !important;
    font-family: var(--ek-font) !important;
}

.section .section-title {
    color: var(--ek-text-primary) !important;
    font-family: var(--ek-font) !important;
}

/* Admin navbar */
.navbar {
    background: var(--ek-bg-secondary) !important;
    border-bottom: 1px solid var(--ek-border) !important;
}

/* ============================================================
   DATATABLES OVERRIDES
   ============================================================ */
.dataTables_wrapper {
    color: var(--ek-text-primary) !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--ek-bg-input) !important;
    border: 1px solid var(--ek-border) !important;
    color: var(--ek-text-primary) !important;
    border-radius: var(--ek-radius-sm) !important;
}

/* ============================================================
   SELECT2 OVERRIDES
   ============================================================ */
.select2-container--default .select2-selection--single {
    background: var(--ek-bg-input) !important;
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-sm) !important;
}

.select2-dropdown {
    background: var(--ek-bg-card) !important;
    border: 1px solid var(--ek-border) !important;
}

.select2-results__option {
    background: var(--ek-bg-card) !important;
    color: #e0e0e0 !important;
    font-weight: 400 !important;
}

.select2-results__option--highlighted[aria-selected] {
    background: rgba(0,212,255,0.15) !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(0,212,255,0.25) !important;
    color: var(--ek-cyan) !important;
}

.select2-search--dropdown .select2-search__field {
    background: var(--ek-bg-input) !important;
    color: #fff !important;
    border: 1px solid var(--ek-border) !important;
}

/* ============================================================
   LINKS & TEXT UTILITIES
   ============================================================ */
a {
    color: var(--ek-cyan) !important;
    transition: color var(--ek-transition);
}

a:hover {
    color: var(--ek-cyan-dim) !important;
    text-decoration: none !important;
}

/* Override for menu links that shouldn't be cyan */
.menu--link,
.sidebar-menu li a,
.dropdown_account a,
.dropdown_mn a,
.nav-link {
    color: var(--ek-text-secondary) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ek-text-primary) !important;
    font-family: var(--ek-font) !important;
}

p {
    color: var(--ek-text-secondary);
}

/* Text gradient utility */
.text-gradient {
    background: var(--ek-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer,
.footer-content {
    background: var(--ek-bg-secondary) !important;
    border-top: 1px solid var(--ek-border) !important;
    color: var(--ek-text-muted) !important;
}

/* ============================================================
   SWEETALERT2 OVERRIDES
   ============================================================ */
.swal2-popup {
    background: var(--ek-bg-card) !important;
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-lg) !important;
    color: var(--ek-text-primary) !important;
}

.swal2-title {
    color: var(--ek-text-primary) !important;
}

.swal2-html-container {
    color: var(--ek-text-secondary) !important;
}

.swal2-confirm {
    background: var(--ek-gradient) !important;
    border: none !important;
    border-radius: var(--ek-radius-sm) !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 991px) {
    .content_wrapper,
    .all-content-wrapper {
        margin-left: 0 !important;
        padding: 16px !important;
    }

    /* Show hamburger on mobile */
    .toggle_menu,
    #toggleMenu {
        display: flex !important;
    }

    /* Mobile sidebar: hidden by default, slides in when opened */
    nav.vertical_nav,
    .vertical_nav {
        left: -240px !important;
        width: 210px !important;
        min-width: 210px !important;
        z-index: 1000 !important;
    }

    .vertical_nav.vertical_nav__opened {
        left: 0 !important;
    }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.ek-glow-cyan {
    box-shadow: 0 0 20px var(--ek-cyan-glow);
}

.ek-glow-purple {
    box-shadow: 0 0 20px var(--ek-purple-glow);
}

.ek-border-glow {
    border: 1px solid var(--ek-cyan-border) !important;
}

.ek-bg-glass {
    background: rgba(22, 22, 31, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ============================================================
   BOOTSTRAP COLOR OVERRIDES (warning → cyan)
   ============================================================ */
.border-warning,
.card.border-warning,
.card.border-info,
.modal .border-warning,
.modal .card.border-warning,
.modal .border-info,
.modal .card.border-info,
.card-deck .card.border-warning,
.card-deck .card.border-info,
div.border-warning,
div.border-info,
.card-footer.border-warning,
.card-footer.border-info {
    border-color: var(--ek-cyan-border) !important;
    border-width: 2px !important;
    border-style: solid !important;
}

.border-info {
    border-color: var(--ek-cyan-border) !important;
}

.text-warning,
.modal .text-warning,
.card .text-warning {
    color: var(--ek-cyan) !important;
}

.text-info,
.text-cyan,
.modal .text-info,
.card .text-info {
    color: var(--ek-cyan) !important;
}

.bg-warning {
    background: var(--ek-gradient) !important;
}

/* Membership modal card headers */
.card .card-header.bg-warning,
.card .bg-warning {
    background: var(--ek-gradient) !important;
    color: #fff !important;
}

/* Membership plan cards - gold header override */
[style*="background: #CD7F32"],
[style*="background:#CD7F32"],
[style*="background-color: #CD7F32"] {
    background: linear-gradient(135deg, #CD7F32, #a0522d) !important;
}

[style*="background: #C0C0C0"],
[style*="background:#C0C0C0"],
[style*="background-color: #C0C0C0"] {
    background: linear-gradient(135deg, #C0C0C0, #808080) !important;
}

[style*="background: #FFD700"],
[style*="background:#FFD700"],
[style*="background-color: #FFD700"],
[style*="background: #DAA520"],
[style*="background:#DAA520"] {
    background: var(--ek-gradient) !important;
}

/* Input group (URL labels, Copiar, Vista buttons) */
.input-group-text {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: var(--ek-cyan-border) !important;
    color: var(--ek-cyan) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.btn-outline-secondary {
    background: transparent !important;
    border-color: var(--ek-cyan-border) !important;
    color: var(--ek-text-secondary) !important;
    font-weight: 600 !important;
    transition: all var(--ek-transition);
}

.btn-outline-secondary:hover {
    background: var(--ek-cyan-glow) !important;
    border-color: var(--ek-cyan) !important;
    color: var(--ek-cyan) !important;
}

.btn-secondary {
    background: var(--ek-bg-card) !important;
    border: 1px solid var(--ek-cyan-border) !important;
    color: var(--ek-cyan) !important;
    border-radius: var(--ek-radius-sm) !important;
    font-weight: 600 !important;
}

.btn-secondary:hover {
    background: var(--ek-cyan-glow) !important;
}

/* Upload button in modals (Compra ahora / Buy Now) */
.card-footer .upload_btn,
.modal .upload_btn {
    background: var(--ek-gradient) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--ek-radius-full) !important;
}

/* ============================================================
   LECTURE / COURSE CONTENT PAGE
   ============================================================ */
/* Sidebar content list */
.accordion-header {
    background: var(--ek-bg-card) !important;
    border-color: var(--ek-border) !important;
    color: var(--ek-text-primary) !important;
}

.accordion-header .section-title-text {
    color: var(--ek-text-primary) !important;
}

.accordion-header .section-title-wrapper {
    color: var(--ek-text-secondary) !important;
}

.accordion-header .num-items-in-section,
.accordion-header .section-header-length {
    color: var(--ek-text-muted) !important;
}

.ui-accordion-content {
    border-color: var(--ek-border) !important;
}

.ui-accordion-content .lecture-container {
    background: var(--ek-bg-primary) !important;
    border-color: var(--ek-border) !important;
    color: var(--ek-text-secondary) !important;
}

.ui-accordion-content .lecture-container:hover,
.ui-accordion-content .lecture-container.active {
    background: var(--ek-cyan-glow) !important;
}

.ui-accordion-content .lecture-container.active {
    border-left: 3px solid var(--ek-cyan) !important;
}

.ui-accordion-content .title,
.ui-accordion-content .title a {
    color: var(--ek-text-primary) !important;
}

.ui-accordion-content .details,
.ui-accordion-content .content-summary {
    color: var(--ek-text-muted) !important;
}

/* Section folder icons */
.crse_icon,
.accordion-header i,
.section-title-wrapper i {
    color: var(--ek-cyan) !important;
}

/* Course badge */
.badge-course,
.course-badge {
    background: var(--ek-cyan-glow) !important;
    color: var(--ek-cyan) !important;
    border: 1px solid var(--ek-cyan-border) !important;
}

/* Mark as complete button */
.btn-complete,
[class*="mark-complete"],
.btn-outline-success {
    background: transparent !important;
    border: 1px solid var(--ek-cyan-border) !important;
    color: var(--ek-cyan) !important;
    border-radius: var(--ek-radius-sm) !important;
}

.btn-complete:hover,
[class*="mark-complete"]:hover {
    background: var(--ek-cyan-glow) !important;
}

/* Lecture comments */
.comment-section,
.comment-box {
    background: var(--ek-bg-card) !important;
    border-color: var(--ek-border) !important;
}

/* Video player container */
.plyr,
.video-js {
    border-radius: var(--ek-radius-md) !important;
    overflow: hidden;
}

/* ============================================================
   HAMBURGER / TOGGLE MENU BUTTON
   ============================================================ */
.toggle_menu,
#toggleMenu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--ek-gradient) !important;
    border: none !important;
    border-radius: 8px !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all var(--ek-transition);
    float: none !important;
    flex-shrink: 0;
}

.toggle_menu:hover,
#toggleMenu:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
}

.toggle_menu i,
#toggleMenu i {
    background: transparent !important;
    color: #fff !important;
    font-size: 28px !important;
    width: auto !important;
    float: none !important;
    display: block !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: bold !important;
}

.collapse_menu,
#collapse_menu {
    background: transparent !important;
    border: none !important;
}

.collapse_menu i,
#collapse_menu i {
    color: var(--ek-text-secondary) !important;
    font-size: 22px !important;
}

.collapse_menu:hover i,
#collapse_menu:hover i {
    color: var(--ek-cyan) !important;
}

/* ============================================================
   BTN-OUTLINE-ECOMKASH (replaces btn-outline-mazzbio)
   ============================================================ */
.btn-outline-ecomkash {
    background: transparent !important;
    border: 1px solid var(--ek-cyan-border) !important;
    color: var(--ek-cyan) !important;
    border-radius: var(--ek-radius-sm) !important;
    font-weight: 600 !important;
    transition: all var(--ek-transition);
}

.btn-outline-ecomkash:hover {
    background: var(--ek-cyan-glow) !important;
    border-color: var(--ek-cyan) !important;
}