/**
 * eLab — Plugin Style Overrides
 * ─────────────────────────────────────────────────────────────────────────────
 * This stylesheet is conditionally enqueued on Tutor LMS and WooCommerce pages.
 * It maps plugin UI to our eLab design system (dark glassmorphism theme).
 *
 * Load order: AFTER plugin default CSS, BEFORE React bundle CSS.
 *
 * Design System References (from src/index.css):
 *   --accent          = #00D2A0 (teal)
 *   --accent-secondary = #a78bfa (purple)
 *   --accent-gradient  = linear-gradient(135deg, #8b5cf6, #2dd4bf)
 *   --bg-glass         = rgba(20,10,40,0.6)
 *   --border-glass     = rgba(255,255,255,0.1)
 *   --text-main        = #f8fafc
 *   --text-secondary   = #94a3b8
 *   --radius-lg        = 24px
 *   --radius-full      = 9999px
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════════════
   §1  GOOGLE FONT — Outfit (matches React app)
   ══════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════════════════
   §2  FORCE DESIGN TOKENS ON PLUGIN PAGES
       (body already has .dark applied by the PHP template)
   ══════════════════════════════════════════════════════════════════════════════ */
body.elab-tutor-page,
body.elab-woo-page {
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    background: var(--bg-body-gradient, linear-gradient(to bottom right, #1A0B2E, #2D1B4E)) !important;
    background-attachment: fixed !important;
    color: var(--text-main, #f8fafc) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §3  TUTOR LMS — COURSE CARDS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Course grid item */
.tutor-course-loop-item,
.tutor-archive-course-list .tutor-card,
.tutor-course-card,
.tutor-card {
    background: var(--bg-glass, rgba(20, 10, 40, 0.6)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--radius-lg, 24px) !important;
    box-shadow: var(--shadow-card, 0 10px 30px -10px rgba(0, 0, 0, 0.5)) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    color: var(--text-main, #f8fafc) !important;
}

.tutor-card:hover,
.tutor-course-loop-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-glow, 0 0 20px rgba(0, 240, 255, 0.4)) !important;
    border-color: var(--accent, #00D2A0) !important;
}

/* Course card title */
.tutor-card-title,
.tutor-course-name,
.tutor-card h3,
.tutor-card h4 {
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    font-weight: 700 !important;
}

/* Course card meta / instructor / category labels */
.tutor-course-stats,
.tutor-course-author,
.tutor-meta,
.tutor-card-body p,
.tutor-rating-count {
    color: var(--text-secondary, #94a3b8) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
}

/* Gradient accent top-border on cards */
.tutor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient, linear-gradient(135deg, #8b5cf6, #2dd4bf));
    border-radius: 24px 24px 0 0;
    z-index: 1;
}

.tutor-card {
    position: relative;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §4  TUTOR LMS — COURSE SINGLE PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

.tutor-single-course-header,
.tutor-course-content-header,
.tutor-course-header {
    background: var(--bg-glass, rgba(20, 10, 40, 0.6)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    padding: 2rem !important;
}

/* Sidebar */
.tutor-course-sidebar,
.tutor-sidebar,
.tutor-card-inner {
    background: var(--bg-glass, rgba(20, 10, 40, 0.6)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--radius-lg, 24px) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Curriculum accordion */
.tutor-course-topic,
.tutor-accordion-item,
.tutor-accordion-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
}

.tutor-accordion-header:hover {
    background: rgba(0, 240, 255, 0.05) !important;
    border-color: var(--accent, #00D2A0) !important;
}

/* Lesson progress bar */
.tutor-progress-bar,
.tutor-progress {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden;
}

.tutor-progress-filled,
.tutor-progress-bar>div {
    background: var(--accent-gradient, linear-gradient(135deg, #8b5cf6, #2dd4bf)) !important;
    border-radius: var(--radius-full) !important;
    transition: width 0.6s ease !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §5  TUTOR LMS — BUTTONS ("Enroll Now", "Continue", "Start Quiz")
   ══════════════════════════════════════════════════════════════════════════════ */

.tutor-btn-primary,
.tutor-btn.tutor-btn-primary,
.tutor-enroll-btn,
.tutor-course-enroll-btn,
input[type="submit"].tutor-btn,
button.tutor-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--accent-gradient, linear-gradient(135deg, #8b5cf6, #2dd4bf)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-full, 9999px) !important;
    padding: 0.85rem 2rem !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.45), 0 0 8px rgba(45, 212, 191, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tutor-btn-primary:hover,
.tutor-enroll-btn:hover,
.tutor-course-enroll-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.65), 0 0 20px rgba(45, 212, 191, 0.4) !important;
    color: #ffffff !important;
}

/* Secondary / outline buttons */
.tutor-btn-outline-primary,
.tutor-btn.tutor-btn-outline-primary {
    background: transparent !important;
    color: var(--accent, #00D2A0) !important;
    border: 2px solid var(--accent, #00D2A0) !important;
    border-radius: var(--radius-full, 9999px) !important;
    padding: 0.75rem 1.75rem !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    transition: all 0.3s ease !important;
}

.tutor-btn-outline-primary:hover {
    background: rgba(0, 210, 160, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 210, 160, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §6  TUTOR LMS — QUIZ UI
   ══════════════════════════════════════════════════════════════════════════════ */

.tutor-quiz-wrapper,
.tutor-quiz-container,
#tutor-quiz-contents {
    background: var(--bg-glass, rgba(20, 10, 40, 0.6)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--radius-lg, 24px) !important;
    padding: 2rem !important;
    color: var(--text-main, #f8fafc) !important;
}

.tutor-quiz-option,
.tutor-quiz-answer {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--radius-md, 16px) !important;
    color: var(--text-main, #f8fafc) !important;
    transition: all 0.25s ease !important;
}

.tutor-quiz-option:hover {
    border-color: var(--accent, #00D2A0) !important;
    background: rgba(0, 210, 160, 0.08) !important;
    box-shadow: 0 0 12px rgba(0, 210, 160, 0.2) !important;
}

.tutor-quiz-option.tutor-answered,
.tutor-quiz-option.correct {
    border-color: #2dd4bf !important;
    background: rgba(45, 212, 191, 0.12) !important;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.25) !important;
}

.tutor-quiz-option.wrong,
.tutor-quiz-option.incorrect {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §7  WOOCOMMERCE — PRODUCT GRID
   ══════════════════════════════════════════════════════════════════════════════ */

/* Product cards */
.woocommerce .products .product,
.woocommerce-page .products .product,
ul.products li.product {
    background: var(--bg-glass, rgba(20, 10, 40, 0.6)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--radius-lg, 24px) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    padding: 1.25rem !important;
}

ul.products li.product:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-glow, 0 0 20px rgba(0, 240, 255, 0.4)) !important;
    border-color: var(--accent, #00D2A0) !important;
}

/* Product title */
.woocommerce .products h2.woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

/* Price */
.woocommerce .price,
.woocommerce .products .price,
.woocommerce span.price,
ul.products li.product .price {
    color: var(--accent, #00D2A0) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.woocommerce .price del {
    color: var(--text-secondary, #94a3b8) !important;
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §8  WOOCOMMERCE — BUTTONS ("Add to Cart", "Checkout", "Place Order")
   ══════════════════════════════════════════════════════════════════════════════ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button#place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order,
.add_to_cart_button,
.single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--accent-gradient, linear-gradient(135deg, #8b5cf6, #2dd4bf)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-full, 9999px) !important;
    padding: 0.85rem 2rem !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.45), 0 0 8px rgba(45, 212, 191, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce button#place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.65), 0 0 20px rgba(45, 212, 191, 0.4) !important;
    color: #ffffff !important;
    background: var(--accent-gradient, linear-gradient(135deg, #8b5cf6, #2dd4bf)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §9  WOOCOMMERCE — CART & CHECKOUT FORMS
   ══════════════════════════════════════════════════════════════════════════════ */

/* Table */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
    background: var(--bg-glass, rgba(20, 10, 40, 0.6)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: var(--radius-lg, 24px) !important;
    color: var(--text-main) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce-cart table.cart th,
.woocommerce table.shop_table td,
.woocommerce-cart table.cart td {
    border-color: var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-main, #f8fafc) !important;
    padding: 1rem 1.25rem !important;
    vertical-align: middle;
}

.woocommerce table.shop_table th {
    background: rgba(139, 92, 246, 0.12) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
}

/* Form inputs */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce form .input-text {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--radius-sm, 8px) !important;
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.woocommerce-checkout input:focus,
.woocommerce form .input-text:focus {
    outline: none !important;
    border-color: var(--accent, #00D2A0) !important;
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.15), 0 0 15px rgba(0, 210, 160, 0.1) !important;
}

/* Order summary box */
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--bg-glass, rgba(20, 10, 40, 0.6)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: var(--radius-lg, 24px) !important;
    padding: 1.5rem !important;
}

/* Payment methods box */
.woocommerce-checkout #payment {
    background: rgba(20, 10, 40, 0.7) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: var(--radius-lg, 24px) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--border-glass) !important;
}

.woocommerce-checkout #payment ul.payment_methods label {
    color: var(--text-main) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §10  WOOCOMMERCE — SINGLE PRODUCT PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

.woocommerce div.product {
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
}

.woocommerce div.product .product_title,
.woocommerce div.product h1 {
    color: var(--text-main, #f8fafc) !important;
    font-weight: 800 !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs .panel p {
    color: var(--text-secondary, #94a3b8) !important;
    line-height: 1.8 !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--border-glass) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 1px solid var(--border-glass) !important;
    border-bottom: none !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--text-secondary) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: var(--accent-secondary, #a78bfa) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--accent, #00D2A0) !important;
    font-weight: 700 !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-glass) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md) !important;
    padding: 1.5rem !important;
    color: var(--text-main) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §11  WOOCOMMERCE — NOTICES & ALERTS
   ══════════════════════════════════════════════════════════════════════════════ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid !important;
    border-radius: var(--radius-md, 16px) !important;
    color: var(--text-main) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.woocommerce-message {
    border-color: var(--accent, #00D2A0) !important;
}

.woocommerce-info {
    border-color: var(--accent-secondary, #a78bfa) !important;
}

.woocommerce-error {
    border-color: #ef4444 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §12  SHARED — DROPDOWN & SELECT GLASSMORPHISM
   ══════════════════════════════════════════════════════════════════════════════ */

select,
.woocommerce select,
.tutor-select,
.select2-container .select2-selection {
    background: var(--bg-glass, rgba(20, 10, 40, 0.6)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1)) !important;
    border-radius: var(--radius-sm, 8px) !important;
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
}

.select2-dropdown,
.select2-results__option {
    background: var(--bg-glass-strong, rgba(20, 10, 40, 0.85)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: var(--border-glass) !important;
    color: var(--text-main) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
}

.select2-results__option--highlighted,
.select2-results__option:hover {
    background: rgba(0, 210, 160, 0.15) !important;
    color: var(--accent, #00D2A0) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §13  SHARED — GROUP HEADINGS & TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════════════ */

body.elab-tutor-page h1,
body.elab-tutor-page h2,
body.elab-tutor-page h3,
body.elab-tutor-page h4,
body.elab-woo-page h1,
body.elab-woo-page h2,
body.elab-woo-page h3,
body.elab-woo-page h4 {
    color: var(--text-main, #f8fafc) !important;
    font-family: var(--font-main, 'Outfit', sans-serif) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em !important;
}

/* Section / widget title accent */
.tutor-segment-title,
.woocommerce h2.woocommerce-loop-product__title,
.widget-title {
    position: relative;
    padding-bottom: 0.5rem !important;
}

.tutor-segment-title::after,
.widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--accent-gradient, linear-gradient(135deg, #8b5cf6, #2dd4bf));
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §14  SHARED — SCROLLBAR (matches React app)
   ══════════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent, #00D2A0);
}

/* ══════════════════════════════════════════════════════════════════════════════
   §15  SHARED — STAR RATINGS
   ══════════════════════════════════════════════════════════════════════════════ */

.tutor-ratings-count .tutor-rating,
.star-rating span,
.tutor-star-rating .tutor-icon-star-full {
    color: #f59e0b !important;
    /* Warm amber to contrast with teal/purple */
}

/* ══════════════════════════════════════════════════════════════════════════════
   §16  TUTOR LMS — LESSON PLAYER
   ══════════════════════════════════════════════════════════════════════════════ */

.tutor-lesson-sidebar-wrap,
.tutor-lesson-sidebar {
    background: var(--bg-glass-strong, rgba(20, 10, 40, 0.85)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--border-glass) !important;
    color: var(--text-main) !important;
}

.tutor-lesson-sidebar-item,
.tutor-lesson-content-list li {
    border-bottom: 1px solid var(--border-glass) !important;
    color: var(--text-secondary) !important;
    transition: all 0.2s ease !important;
}

.tutor-lesson-sidebar-item:hover,
.tutor-lesson-content-list li:hover {
    background: rgba(0, 210, 160, 0.08) !important;
    color: var(--accent, #00D2A0) !important;
    padding-left: 0.25rem !important;
}

.tutor-lesson-sidebar-item.current,
.tutor-lesson-content-list li.active {
    background: rgba(139, 92, 246, 0.12) !important;
    border-left: 3px solid var(--accent-secondary, #a78bfa) !important;
    color: var(--text-main) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §17  RESPONSIVE — mobile adjustments
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .tutor-card,
    ul.products li.product {
        border-radius: var(--radius-md, 16px) !important;
    }

    .tutor-btn-primary,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce button#place_order {
        width: 100% !important;
        text-align: center !important;
    }

    .woocommerce div.product .product_title {
        font-size: 1.5rem !important;
    }



}

/* ======================================
   eLab Elite Checkout
====================================== */

.woocommerce-checkout .woocommerce{
  max-width: 1420px;
  margin: 0 auto;
  padding: 30px 20px 80px;
}

/* remove legacy woo columns */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  float:none !important;
  width:100% !important;
  max-width:100% !important;
}

/* layout */
.woocommerce-checkout form.checkout{
  display:grid !important;
  grid-template-columns:1.15fr 0.85fr;
  gap:32px;
  align-items:start;
}

/* left */
.woocommerce-checkout #customer_details{
  grid-column:1;
}

/* right */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review{
  grid-column:2;
}

/* premium cards */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:26px;
  padding:28px;
  backdrop-filter:blur(16px);
}

/* sticky summary */
.woocommerce-checkout #order_review{
  position:sticky;
  top:105px;
}

/* field rows */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{
  width:48% !important;
}

.woocommerce-checkout .form-row-wide{
  width:100% !important;
}

/* CTA */
#place_order{
  width:100%;
  min-height:62px;
  margin-top:18px;
}

/* mobile */
@media (max-width:980px){

  .woocommerce-checkout form.checkout{
    grid-template-columns:1fr !important;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{
    grid-column:auto;
  }

  .woocommerce-checkout #order_review{
    position:static;
  }

  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{
    width:100% !important;
  }

}

/* ======================================
   eLab Checkout Nuclear Override
====================================== */

/* page width */
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .woocommerce-checkout {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 30px 20px 80px !important;
}

/* checkout form grid */
body.woocommerce-checkout form.checkout.woocommerce-checkout,
body.woocommerce-checkout form.checkout {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 32px !important;
  align-items: start !important;
}

/* left column */
body.woocommerce-checkout #customer_details{
  grid-column: 1 !important;
  width: 100% !important;
}

/* right column */
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review{
  grid-column: 2 !important;
  width: 100% !important;
}

/* cards */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 24px !important;
  padding: 28px !important;
  backdrop-filter: blur(16px) !important;
}

/* sticky summary */
body.woocommerce-checkout #order_review{
  position: sticky !important;
  top: 105px !important;
}

/* mobile */
@media (max-width: 980px){

  body.woocommerce-checkout form.checkout,
  body.woocommerce-checkout form.checkout.woocommerce-checkout{
    grid-template-columns: 1fr !important;
  }

  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout #order_review_heading,
  body.woocommerce-checkout #order_review{
    grid-column: auto !important;
  }

  body.woocommerce-checkout #order_review{
    position: static !important;
  }
}

/* ======================================
   eLab Theme Wrapper Breaker
====================================== */

body.woocommerce-checkout .site,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout .page-content,
body.woocommerce-checkout .container,
body.woocommerce-checkout .wrap,
body.woocommerce-checkout .row,
body.woocommerce-checkout .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Real centered checkout zone */
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout .woocommerce-checkout {
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
}