/* =========================================================
   SJP FINAL REACT UI OVERRIDES
   This file intentionally has high specificity and !important in the
   integration layer: Tutor/WooCommerce/plugin CSS must never revert the
   SJP React visual system to white/default cards.
   ========================================================= */

html body{background:#000!important;color:var(--ivory)!important;font-family:'Inter',sans-serif!important}
html body .wrap{max-width:1180px}

/* Header: one consistent SJP header on every page. */
html body header#sjp-header{position:absolute!important;top:0!important;left:0!important;right:0!important;background:rgba(6,5,12,.88)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;box-shadow:0 12px 30px rgba(0,0,0,.45)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important}
html body header#sjp-header.hero-nav{background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.10))!important;border-bottom:0!important;box-shadow:none!important}
html body header#sjp-header .brand img{width:170px!important;height:auto!important;max-height:52px!important;object-fit:contain!important;filter:none!important}
html body header#sjp-header nav.links{gap:26px!important}
html body header#sjp-header nav.links a{color:#f5f3fa!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 0 4px!important;border-radius:0!important}
html body header#sjp-header nav.links a:hover,html body header#sjp-header nav.links a.active{color:#a855f7!important}
html body header#sjp-header .nav-right{gap:12px!important}

/* Never allow native/plugin modal state to open the SJP search. */
html body #sjpSearchOverlay[hidden]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
html body #sjpSearchOverlay:not([hidden]){display:flex!important}

/* Course-list: stop Tutor/theme/plugin rules from creating white/default cards. */
html body.sjp-course-catalog .course-list-section,
html body.sjp-course-catalog .course-list-layout,
html body.sjp-course-catalog .course-list-main,
html body.sjp-course-catalog .courses-grid{background:transparent!important;color:var(--ivory)!important}
html body.sjp-course-catalog .course-filters{background:rgba(17,16,28,.72)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:18px!important;padding:20px!important;box-shadow:0 18px 50px rgba(0,0,0,.35)!important}
html body.sjp-course-catalog .course-filters *,html body.sjp-course-catalog .course-list-toolbar *{color:var(--ivory)!important}
html body.sjp-course-catalog .course-card,
html body.sjp-course-catalog article.course-card,
html body.sjp-course-catalog .courses-grid .course-card{position:relative!important;background:linear-gradient(165deg,rgba(30,28,54,.96),rgba(13,12,22,.98))!important;color:var(--ivory)!important;border:1px solid rgba(168,85,247,.42)!important;border-radius:20px!important;box-shadow:0 22px 60px rgba(0,0,0,.48)!important;overflow:hidden!important}
html body.sjp-course-catalog .course-card .body{background:transparent!important;color:var(--ivory)!important}
html body.sjp-course-catalog .course-card h3{color:#fff!important}
html body.sjp-course-catalog .course-card p{color:#aaa5c0!important}
html body.sjp-course-catalog .course-card .thumb{background:#09090f!important}
html body.sjp-course-catalog .course-card .thumb img{width:100%!important;height:100%!important;object-fit:cover!important}
html body.sjp-course-catalog .course-card .price,
html body.sjp-course-catalog .course-card .tagrow{color:#d8b4fe!important}
html body.sjp-course-catalog .course-card .btn-mini{background:var(--gradient-brand)!important;color:#fff!important;border:0!important;border-radius:999px!important;white-space:nowrap!important;flex-shrink:0!important}
html body.sjp-course-catalog .course-card[hidden]{display:none!important}

/* If Tutor injects its catalog alongside the SJP template, hide the duplicate. */
html body.sjp-course-catalog > .tutor-wrap,
html body.sjp-course-catalog .tutor-course-filter,
html body.sjp-course-catalog .tutor-course-loop{display:none!important}

/* Course detail / Tutor: no white panels anywhere. */
html body .tutor,
html body .tutor-wrap,
html body .tutor-page-wrap,
html body .tutor-course-details-page,
html body .tutor-course-details-page .tutor-course-details-tab,
html body .tutor-card,
html body .tutor-course-card,
html body .tutor-dashboard-content,
html body .tutor-dashboard-left-menu,
html body .tutor-dashboard-menu,
html body .tutor-dashboard-content-inner{background:transparent!important;color:var(--ivory)!important}
html body .tutor-card,
html body .tutor-course-card,
html body .tutor-course-details-page .tutor-card{border:1px solid rgba(255,255,255,.12)!important;border-radius:18px!important;box-shadow:0 18px 50px rgba(0,0,0,.35)!important}
html body .tutor .tutor-btn,
html body .tutor .tutor-button,
html body .tutor a.tutor-btn,
html body .tutor .tutor-btn-primary{background:var(--gradient-brand)!important;color:#fff!important;border:0!important;border-radius:999px!important}
html body .tutor input,html body .tutor textarea,html body .tutor select{background:rgba(255,255,255,.05)!important;color:var(--ivory)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:10px!important}
html body .tutor .tutor-dashboard-left-menu{border:1px solid rgba(255,255,255,.10)!important;border-radius:18px!important;padding:10px!important}
html body .tutor-dashboard-menu-item-link{color:#aaa5c0!important;border-radius:10px!important}
html body .tutor-dashboard-menu-item-link:hover,html body .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link{background:rgba(168,85,247,.16)!important;color:#fff!important}

/* WooCommerce: fully dark SJP presentation, not the stock white store. */
html body .sjp-wc-wrap,
html body .sjp-wc-wrap .woocommerce,
html body .sjp-wc-wrap .woocommerce-page{background:transparent!important;color:var(--ivory)!important}
html body .woocommerce .shop_table,
html body .woocommerce table.shop_table,
html body .woocommerce-cart-form,
html body .woocommerce-checkout-review-order,
html body .woocommerce-checkout-payment,
html body .cart_totals,
html body .woocommerce form.login,
html body .woocommerce form.register,
html body .woocommerce-MyAccount-content,
html body .woocommerce .col2-set .col-1,
html body .woocommerce .col2-set .col-2{background:linear-gradient(165deg,rgba(30,28,54,.94),rgba(13,12,22,.98))!important;color:var(--ivory)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:20px!important;box-shadow:0 20px 60px rgba(0,0,0,.40)!important}
html body .woocommerce table.shop_table th{background:rgba(168,85,247,.10)!important;color:#eadcff!important;border-color:rgba(255,255,255,.10)!important}
html body .woocommerce table.shop_table td{color:#d8d4e4!important;border-color:rgba(255,255,255,.08)!important}
html body .woocommerce form .form-row label,
html body .woocommerce .form-row label{color:#bdb7cf!important}
html body .woocommerce input.input-text,
html body .woocommerce textarea,
html body .woocommerce select,
html body .woocommerce form .form-row input.input-text,
html body .woocommerce form .form-row textarea,
html body .woocommerce form .form-row select{background:rgba(255,255,255,.055)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:12px!important;padding:13px 14px!important;box-shadow:none!important}
html body .woocommerce input:focus,html body .woocommerce textarea:focus,html body .woocommerce select:focus{border-color:#a855f7!important;box-shadow:0 0 0 3px rgba(168,85,247,.16)!important}
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body .woocommerce #place_order,
html body .woocommerce .button{background:var(--gradient-brand)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:12px 24px!important;text-shadow:none!important}
html body .woocommerce a.button:hover,html body .woocommerce button.button:hover,html body .woocommerce input.button:hover{background:var(--gradient-brand-hover)!important;color:#fff!important;transform:translateY(-1px)!important}
html body .woocommerce-message,html body .woocommerce-info,html body .woocommerce-error{background:rgba(30,28,54,.96)!important;color:#fff!important;border:1px solid rgba(168,85,247,.35)!important;border-left:3px solid #a855f7!important;border-radius:14px!important}

/* Main account — replaces the stock WooCommerce dashboard visually. */
html body .sjp-account-react{min-height:100vh;padding:150px 20px 90px;position:relative;overflow:hidden;background:radial-gradient(900px 600px at 10% 10%,rgba(74,124,255,.14),transparent 60%),radial-gradient(900px 700px at 90% 90%,rgba(236,72,153,.12),transparent 60%),#000!important}
html body .account-shell--auth{max-width:980px!important}
html body .account-kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#a855f7;font-weight:800;margin-bottom:10px}
html body .account-visual h2{font-size:26px!important;color:#fff!important}
html body .account-visual h2 span{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent!important}
html body .account-react-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:14px;margin-bottom:26px}
html body .account-react-tabs a{padding:11px;text-align:center;border-radius:10px;color:#aaa5c0!important;font-weight:700}
html body .account-react-tabs a.active,html body .account-react-tabs a:hover{background:var(--gradient-brand)!important;color:#fff!important}
html body .account-react-form h1,html body .account-react-form h2{font-family:'Poppins',sans-serif;color:#fff!important;font-weight:800!important}
html body .account-form-intro{color:#aaa5c0!important;line-height:1.7}
html body .sjp-auth-form{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
html body .sjp-auth-form label{color:#bdb7cf!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.05em!important;font-weight:700!important}
html body .sjp-auth-form .input-text{width:100%!important;background:rgba(255,255,255,.05)!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:12px!important;padding:13px 14px!important}
html body .sjp-account-submit{display:inline-flex!important;justify-content:center!important;align-items:center!important;background:var(--gradient-brand)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:13px 22px!important;font-weight:800!important;cursor:pointer!important}
html body .sjp-auth-form .lost_password{display:block!important;margin-top:14px!important;color:#d8b4fe!important}

/* Logged-in account dashboard. */
html body .account-dashboard-shell{width:min(1180px,100%);margin:0 auto;position:relative;z-index:1}
html body .account-dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.10)}
html body .account-dashboard-hero h1{font-size:clamp(32px,5vw,56px)!important;color:#fff!important;font-weight:900!important;letter-spacing:-.04em}
html body .account-dashboard-hero h1 span{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent!important}
html body .account-dashboard-hero p{color:#aaa5c0!important}
html body .account-signout{border:1px solid rgba(255,255,255,.16);padding:10px 18px;border-radius:999px;color:#fff!important;background:rgba(255,255,255,.04)}
html body .account-dashboard-grid{display:grid;grid-template-columns:245px minmax(0,1fr);gap:22px}
html body .account-dashboard-nav{background:linear-gradient(165deg,rgba(30,28,54,.95),rgba(13,12,22,.98));border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:12px;height:max-content;box-shadow:0 20px 60px rgba(0,0,0,.35)}
html body .account-brand-card{padding:20px 14px 24px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
html body .account-brand-card img{width:150px;height:auto;margin-bottom:12px}
html body .account-brand-card span{display:block;color:#8f89a6;font-size:11px;line-height:1.5}
html body .account-dashboard-nav>a{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;border-radius:11px;color:#aaa5c0!important;font-size:13px;font-weight:700;margin:2px 0}
html body .account-dashboard-nav>a.active,html body .account-dashboard-nav>a:hover{background:rgba(168,85,247,.14)!important;color:#fff!important}
html body .account-dashboard-nav>a strong{font-size:11px;color:#d8b4fe}
html body .account-dashboard-content{min-width:0}
html body .account-welcome-card,html body .account-tutor-card,html body .sjp-order-card,html body .sjp-empty-card,html body .sjp-download-card,html body .sjp-address-card,html body .sjp-account-details-form{background:linear-gradient(165deg,rgba(30,28,54,.95),rgba(13,12,22,.98))!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:20px!important;color:#fff!important;box-shadow:0 20px 60px rgba(0,0,0,.35)!important}
html body .account-welcome-card{padding:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}
html body .account-welcome-card h2{font-size:28px;color:#fff!important}
html body .account-welcome-card p{color:#aaa5c0;max-width:650px;line-height:1.7}
html body .account-welcome-icon{width:76px;height:76px;display:grid;place-items:center;border-radius:22px;background:var(--gradient-brand);font-weight:900;font-size:22px}
html body .account-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}
html body .account-stat-grid>a{padding:22px;background:linear-gradient(165deg,rgba(30,28,54,.95),rgba(13,12,22,.98));border:1px solid rgba(255,255,255,.10);border-radius:18px;color:#fff!important}
html body .account-stat-grid span{display:block;color:#aaa5c0;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
html body .account-stat-grid strong{display:block;font-size:28px;margin:8px 0}
html body .account-stat-grid small{color:#c9a8f6}
html body .account-tutor-card{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
html body .account-tutor-card h3{font-size:20px;color:#fff}
html body .account-tutor-card p{color:#aaa5c0}
html body .account-section-heading{margin-bottom:18px}
html body .account-section-heading h2{font-size:30px;color:#fff}
html body .sjp-order-list{display:grid;gap:10px}
html body .sjp-order-card{padding:18px 20px;display:flex;justify-content:space-between;gap:20px;align-items:center}
html body .sjp-order-card>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
html body .sjp-order-card span{color:#aaa5c0;font-size:12px}
html body .sjp-status{padding:5px 9px;border-radius:999px;background:rgba(168,85,247,.13);color:#d8b4fe!important}
html body .sjp-download-grid,html body .sjp-address-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
html body .sjp-download-card,html body .sjp-address-card{padding:22px}
html body .sjp-download-card span,html body .sjp-address-card a{display:block;color:#d8b4fe!important;margin-top:10px;font-size:12px}
html body .sjp-address-card p{color:#aaa5c0;line-height:1.7}
html body .sjp-account-details-form{padding:26px}
html body .sjp-account-details-form p{margin:0 0 16px}
html body .sjp-account-details-form label{display:block;color:#aaa5c0;font-size:12px;text-transform:uppercase;margin-bottom:7px}
html body .sjp-account-details-form input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:11px;color:#fff;padding:12px}
html body .sjp-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Cart/checkout headers and plugin fragments. */
html body .sjp-wc-wrap{padding-top:150px!important;padding-bottom:80px!important}
html body .sjp-wc-wrap>.page-header{background:transparent!important;border:0!important;box-shadow:none!important}
html body .cart-wrap,html body .checkout-layout{max-width:1180px;margin:0 auto}
html body .woocommerce .product-name a,html body .woocommerce .product-name{color:#fff!important}
html body .woocommerce .product-remove a{color:#ff78c8!important}
html body .woocommerce .cart-collaterals .cart_totals{float:none!important;width:100%!important;margin-top:20px}

/* Dashboard page: keep Tutor inside the same glass system. */
html body .tutor-sjp-dashboard{background:transparent!important}
html body .dash-page{padding-top:150px!important}

/* Remove the feeling of a separate ChatGPT clone: make the site assistant
   a compact SJP utility, not a dominant full chat window. */
html body .cb-panel{background:#11101c!important;border:1px solid rgba(168,85,247,.34)!important;border-radius:18px!important;box-shadow:0 24px 70px rgba(0,0,0,.68)!important}
html body .cb-header{background:var(--gradient-brand)!important}
html body .cb-fab{background:var(--gradient-brand)!important}

@media(max-width:900px){
  html body .account-dashboard-grid{grid-template-columns:1fr}
  html body .account-dashboard-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
  html body .account-brand-card{grid-column:1/-1}
  html body .account-stat-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  html body header#sjp-header .brand img{width:135px!important}
  html body .account-dashboard-hero{align-items:flex-start;flex-direction:column}
  html body .account-dashboard-nav{grid-template-columns:1fr}
  html body .sjp-two-col,html body .sjp-download-grid,html body .sjp-address-grid{grid-template-columns:1fr}
  html body .account-welcome-card,html body .account-tutor-card{align-items:flex-start;flex-direction:column}
  html body .sjp-wc-wrap{padding-top:125px!important}
}

/* =========================================================
   SJP REACT UI BACK — v6 storefront/plugin bridge
   These rules are intentionally last and high-specificity. They skin
   plugin-owned markup; they do not replace WooCommerce/Tutor logic.
   ========================================================= */
html body.sjp-react-page,
html body.sjp-react-page .site,
html body.sjp-react-page main{background:#000!important;color:#f5f3fa!important}
html body.sjp-react-page .page-header{position:relative!important;z-index:1!important;background:transparent!important}

/* Stop Elementor/plugin page chrome from adding its own white canvas. */
html body.sjp-react-page .elementor,
html body.sjp-react-page .elementor-section,
html body.sjp-react-page .elementor-container,
html body.sjp-react-page .elementor-widget-wrap{background:transparent!important}

/* -------------------- REACT COURSE CATALOG -------------------- */
html body.sjp-react-page.sjp-course-catalog .courses-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:26px!important}
html body.sjp-react-page.sjp-course-catalog .course-card{background:linear-gradient(165deg,rgba(30,28,54,.96),rgba(8,8,14,.98)) padding-box,linear-gradient(120deg,rgba(74,124,255,.85),rgba(168,85,247,.9),rgba(236,72,153,.85)) border-box!important;border:2px solid transparent!important;border-radius:16px!important;box-shadow:0 20px 60px rgba(0,0,0,.38)!important;overflow:hidden!important}
html body.sjp-react-page.sjp-course-catalog .course-card .thumb{background:#050507!important}
html body.sjp-react-page.sjp-course-catalog .course-card .body{background:transparent!important;padding:20px 22px 24px!important}
html body.sjp-react-page.sjp-course-catalog .course-card .tagrow{color:#c084fc!important}
html body.sjp-react-page.sjp-course-catalog .course-card h3{color:#fff!important}
html body.sjp-react-page.sjp-course-catalog .course-card p{color:#a6a2be!important}
html body.sjp-react-page.sjp-course-catalog .course-card .price{color:#fff!important}
html body.sjp-react-page.sjp-course-catalog .course-card .btn-mini{background:linear-gradient(120deg,#4a7cff,#a855f7,#ec4899)!important;color:#fff!important;border:0!important;border-radius:999px!important;white-space:nowrap!important;flex-shrink:0!important}
html body.sjp-react-page.sjp-course-catalog .course-filters{background:rgba(19,18,38,.78)!important;backdrop-filter:blur(16px)!important}
html body.sjp-react-page.sjp-course-catalog .filter-checklist input{accent-color:#a855f7!important}
@media(max-width:900px){html body.sjp-react-page.sjp-course-catalog .courses-grid{grid-template-columns:1fr!important}}

/* -------------------- CART: same hierarchy as React Cart.jsx -------------------- */
html body.sjp-react-cart .sjp-store-page{padding-bottom:90px!important}
html body.sjp-react-cart .cart-wrap{padding:28px 0 90px!important}
html body.sjp-react-cart .cart-react-grid{display:grid!important;grid-template-columns:minmax(0,1.35fr) 360px!important;gap:40px!important;align-items:start!important}
html body.sjp-react-cart .cart-react-main{min-width:0!important}
html body.sjp-react-cart .cart-react-table-head{display:grid!important;grid-template-columns:minmax(0,1fr) 140px 70px!important;gap:20px!important;padding:0 0 14px!important;border-bottom:1px solid rgba(255,255,255,.1)!important;color:#a6a2be!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.08em!important}
html body.sjp-react-cart .cart-react-item{display:grid!important;grid-template-columns:110px minmax(0,1fr) 130px!important;gap:20px!important;align-items:center!important;padding:22px 0!important;border-bottom:1px solid rgba(255,255,255,.1)!important;background:transparent!important}
html body.sjp-react-cart .cart-react-thumb img{width:110px!important;height:76px!important;object-fit:cover!important;border-radius:10px!important;border:1px solid rgba(255,255,255,.12)!important}
html body.sjp-react-cart .cart-react-tag{font-size:10px!important;letter-spacing:.13em!important;text-transform:uppercase!important;color:#a855f7!important;font-weight:800!important;margin-bottom:5px!important}
html body.sjp-react-cart .cart-react-info h3{font-family:Poppins,sans-serif!important;font-size:16px!important;margin:0 0 6px!important}
html body.sjp-react-cart .cart-react-info h3 a{color:#fff!important}
html body.sjp-react-cart .cart-react-info p{font-size:12px!important;line-height:1.5!important;color:#a6a2be!important;margin:0 0 12px!important;max-width:520px!important}
html body.sjp-react-cart .cart-react-controls{display:flex!important;align-items:center!important;gap:12px!important}
html body.sjp-react-cart .cart-qty{display:flex!important;align-items:center!important;gap:7px!important;color:#a6a2be!important;font-size:11px!important;text-transform:uppercase!important}
html body.sjp-react-cart .cart-qty input{width:58px!important;padding:7px 9px!important;background:#131226!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;border-radius:8px!important}
html body.sjp-react-cart .cart-remove{color:#a6a2be!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:999px!important;padding:7px 12px!important;font-size:11px!important}
html body.sjp-react-cart .cart-remove:hover{color:#ec4899!important;border-color:#ec4899!important}
html body.sjp-react-cart .cart-react-price{text-align:right!important;color:#fff!important;font-weight:800!important;font-size:18px!important}
html body.sjp-react-cart .cart-react-actions{display:flex!important;justify-content:flex-end!important;padding-top:16px!important}
html body.sjp-react-cart .cart-update{font-size:12px!important}
html body.sjp-react-cart .cart-react-summary{position:sticky!important;top:110px!important;background:linear-gradient(165deg,rgba(30,28,54,.94),rgba(13,12,22,.98))!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:18px!important;padding:26px!important;box-shadow:0 24px 70px rgba(0,0,0,.4)!important}
html body.sjp-react-cart .cart-react-summary h2{font-size:25px!important;color:#fff!important;margin:8px 0 24px!important}
html body.sjp-react-cart .cart-react-summary .cart-totals{max-width:none!important;margin:0!important}
html body.sjp-react-cart .cart-react-summary .cart-totals-row{padding:0 0 16px!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
html body.sjp-react-cart .cart-react-summary .cart-totals-row span{color:#a6a2be!important}
html body.sjp-react-cart .cart-react-summary .cart-totals-row strong{color:#fff!important;font-size:20px!important}
html body.sjp-react-cart .cart-coupon-note{font-size:11px!important;color:#a6a2be!important;padding:14px 0 18px!important}
@media(max-width:900px){html body.sjp-react-cart .cart-react-grid{grid-template-columns:1fr!important}html body.sjp-react-cart .cart-react-summary{position:static!important}html body.sjp-react-cart .cart-react-item{grid-template-columns:80px 1fr!important}html body.sjp-react-cart .cart-react-price{grid-column:2;text-align:left!important}html body.sjp-react-cart .cart-react-thumb img{width:80px!important;height:58px!important}}

/* -------------------- CHECKOUT: React dark glass form system -------------------- */
html body.sjp-react-checkout .sjp-checkout-layout{padding:28px 0 90px!important}
html body.sjp-react-checkout .woocommerce form.checkout{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)!important;gap:28px 48px!important;align-items:start!important}
html body.sjp-react-checkout .woocommerce form.checkout #customer_details{min-width:0!important}
html body.sjp-react-checkout .woocommerce form.checkout #order_review_heading{grid-column:2!important;grid-row:1!important;background:transparent!important;margin:0!important;padding:0!important;color:#fff!important;font-family:Poppins,sans-serif!important;font-size:18px!important}
html body.sjp-react-checkout .woocommerce form.checkout #order_review{grid-column:2!important;grid-row:1!important;margin-top:40px!important;position:sticky!important;top:110px!important;background:linear-gradient(165deg,rgba(30,28,54,.94),rgba(13,12,22,.98))!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:18px!important;padding:24px!important}
html body.sjp-react-checkout .woocommerce form.checkout .col-1,
html body.sjp-react-checkout .woocommerce form.checkout .col-2{float:none!important;width:100%!important;max-width:none!important}
html body.sjp-react-checkout .woocommerce-billing-fields,
html body.sjp-react-checkout .woocommerce-additional-fields,
html body.sjp-react-checkout .woocommerce-shipping-fields{background:linear-gradient(165deg,rgba(25,24,48,.96),rgba(13,12,22,.98))!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important;padding:24px!important;margin:0 0 18px!important}
html body.sjp-react-checkout .woocommerce-checkout h3{font-family:Poppins,sans-serif!important;color:#fff!important;font-size:17px!important}
html body.sjp-react-checkout .woocommerce form .form-row{margin:0 0 14px!important;padding:0!important}
html body.sjp-react-checkout .woocommerce form .form-row label{display:block!important;color:#a6a2be!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.06em!important;margin-bottom:7px!important}
html body.sjp-react-checkout .woocommerce form .form-row input.input-text,
html body.sjp-react-checkout .woocommerce form .form-row textarea,
html body.sjp-react-checkout .woocommerce form .form-row select{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;border-radius:9px!important;padding:12px 14px!important;min-height:44px!important}
html body.sjp-react-checkout .woocommerce form .form-row input.input-text:focus,
html body.sjp-react-checkout .woocommerce form .form-row textarea:focus,
html body.sjp-react-checkout .woocommerce form .form-row select:focus{border-color:#a855f7!important;box-shadow:0 0 0 3px rgba(168,85,247,.12)!important;outline:none!important}
html body.sjp-react-checkout #order_review .shop_table{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important}
html body.sjp-react-checkout #order_review .shop_table th,
html body.sjp-react-checkout #order_review .shop_table td{background:transparent!important;border-color:rgba(255,255,255,.09)!important;color:#a6a2be!important}
html body.sjp-react-checkout #order_review .shop_table .product-name{color:#fff!important}
html body.sjp-react-checkout #order_review .shop_table .amount{color:#fff!important;font-weight:800!important}
html body.sjp-react-checkout #payment{background:transparent!important;border:0!important;padding:0!important}
html body.sjp-react-checkout #payment ul.payment_methods{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:12px!important;padding:12px!important}
html body.sjp-react-checkout #payment div.payment_box{background:rgba(168,85,247,.08)!important;color:#c8c2d9!important}
html body.sjp-react-checkout #payment #place_order{width:100%!important;background:linear-gradient(120deg,#4a7cff,#a855f7,#ec4899)!important;border:0!important;border-radius:999px!important;padding:14px 20px!important;font-weight:800!important;color:#fff!important}
@media(max-width:900px){html body.sjp-react-checkout .woocommerce form.checkout{display:block!important}html body.sjp-react-checkout .woocommerce form.checkout #order_review_heading{margin-top:20px!important}html body.sjp-react-checkout .woocommerce form.checkout #order_review{margin-top:12px!important;position:static!important}}

/* -------------------- Tutor LMS: neutralise native white skin -------------------- */
html body .tutor-wrap,html body .tutor-page-wrap,html body .tutor-course-details-page,html body .tutor-dashboard{background:transparent!important;color:#f5f3fa!important}
html body .tutor-card,html body .tutor-course-card,html body .tutor-dashboard-content-inner,html body .tutor-dashboard-left-menu,html body .tutor-dashboard-content{background:linear-gradient(165deg,rgba(30,28,54,.94),rgba(13,12,22,.98))!important;border-color:rgba(255,255,255,.11)!important;color:#f5f3fa!important;border-radius:16px!important}
html body .tutor-dashboard-left-menu .tutor-dashboard-menu-item a,html body .tutor-dashboard-menu-item a{color:#a6a2be!important;background:transparent!important}
html body .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active a,html body .tutor-dashboard-menu-item.active a,html body .tutor-dashboard-menu-item a:hover{color:#fff!important;background:linear-gradient(120deg,rgba(74,124,255,.18),rgba(168,85,247,.22))!important;border-radius:10px!important}
html body .tutor-btn,html body .tutor-button,html body .tutor-btn-primary{background:linear-gradient(120deg,#4a7cff,#a855f7,#ec4899)!important;border:0!important;color:#fff!important;border-radius:999px!important}
html body .tutor-input,html body .tutor-form-control,html body .tutor-form-control input,html body .tutor-form-control select{background:rgba(255,255,255,.05)!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important;border-radius:9px!important}
html body .tutor-color-secondary,html body .tutor-text-muted{color:#a6a2be!important}
html body .tutor-course-card .tutor-card-body{background:transparent!important}


/* ================================================================
   SJP UI-ONLY MODE — React is the public visual source of truth.
   WooCommerce / Tutor / Elementor remain installed for functionality,
   but their frontend shells must not replace the SJP UI.
   ================================================================ */
html body .cb-panel[hidden],
html body #sjpChatPanel[hidden],
html body .search-overlay[hidden],
html body #sjpSearchOverlay[hidden],
html body .account-menu-panel[hidden],
html body #sjpAccountPanel[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Never let plugin page shells add a second public navigation/footer. */
html body.sjp-react-page .elementor-location-header,
html body.sjp-react-page .elementor-location-footer,
html body.sjp-react-page .elementor-theme-builder-header,
html body.sjp-react-page .elementor-theme-builder-footer,
html body.sjp-react-page .tutor-header,
html body.sjp-react-page .tutor-site-header,
html body.sjp-react-page .tutor-footer,
html body.sjp-react-page .woocommerce-store-notice {
  display: none !important;
}

/* Plugin widgets should inherit the SJP visual language rather than
   introducing white/default surfaces when they are embedded later. */
html body.sjp-react-page .woocommerce,
html body.sjp-react-page .tutor-wrap,
html body.sjp-react-page .tutor-page-wrap,
html body.sjp-react-page .tutor-course-wrap,
html body.sjp-react-page .tutor-dashboard,
html body.sjp-react-page .elementor-widget-container {
  color: var(--ivory);
}

html body.sjp-react-page .woocommerce-message,
html body.sjp-react-page .woocommerce-info,
html body.sjp-react-page .woocommerce-error {
  background: rgba(25,24,48,.82) !important;
  color: var(--ivory) !important;
  border: 1px solid rgba(168,85,247,.30) !important;
  border-radius: 12px !important;
}

html body.sjp-react-page input,
html body.sjp-react-page select,
html body.sjp-react-page textarea {
  color: var(--ivory);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}


/* SJP React UI-only shell: plugin shortcodes/components must not dictate layout during Phase 1. */
html body.sjp-react-page .tutor-dashboard,
html body.sjp-react-page .tutor-dashboard-content,
html body.sjp-react-page .tutor-course-details-page .tutor-course-details-tab,
html body.sjp-react-page .woocommerce-checkout form.checkout,
html body.sjp-react-page .woocommerce form.checkout,
html body.sjp-react-page .woocommerce .woocommerce-checkout-review-order,
html body.sjp-react-page .woocommerce .woocommerce-checkout-payment { box-sizing:border-box; }
.sjp-ui-only-note{margin-top:14px;padding:11px 13px;border:1px dashed rgba(255,255,255,.14);border-radius:10px;color:var(--slate,#aaa3bb);font-size:12px;line-height:1.5;background:rgba(255,255,255,.025)}
.sjp-dashboard-hero,.sjp-dashboard-learning{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:linear-gradient(135deg,rgba(34,27,66,.88),rgba(15,14,27,.88));box-shadow:0 20px 70px rgba(0,0,0,.25);margin-bottom:18px}
.sjp-dashboard-hero h2,.sjp-dashboard-learning h2{margin:5px 0 8px;color:var(--ivory,#f7f4fb)}
.sjp-dashboard-hero p,.sjp-dashboard-learning p{margin:0;color:var(--slate,#aaa3bb)}
.sjp-dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.sjp-stat-card{padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(20,18,40,.72)}
.sjp-stat-card span{display:block;font-size:11px;letter-spacing:.12em;color:var(--slate,#aaa3bb)}
.sjp-stat-card strong{display:block;font-size:28px;margin:8px 0;color:var(--ivory,#f7f4fb)}
.sjp-stat-card small{color:var(--gold,#c084fc)}
.sjp-course-content-placeholder{margin-top:28px;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.025)}
.sjp-course-content-placeholder h2{margin:6px 0;color:var(--ivory,#f7f4fb)}
.sjp-course-content-placeholder p{color:var(--slate,#aaa3bb);margin:0}
@media(max-width:800px){.sjp-dashboard-stats{grid-template-columns:1fr}.sjp-dashboard-hero,.sjp-dashboard-learning{align-items:flex-start;flex-direction:column}}

/* Stat cards are real links now (Orders / Downloads / Continue learning) */
a.sjp-stat-card{display:block;text-decoration:none;transition:transform .2s ease,border-color .2s ease}
a.sjp-stat-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}

/* Enrolled-course progress cards on the dashboard */
.sjp-enrolled-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:18px}
.sjp-enrolled-card{display:block;text-decoration:none;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(20,18,40,.72);overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.sjp-enrolled-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.28)}
.sjp-enrolled-thumb{height:120px;background-size:cover;background-position:center}
.sjp-enrolled-body{padding:16px}
.sjp-enrolled-body h3{margin:0 0 10px;font-size:16px;color:var(--ivory,#f7f4fb)}
.sjp-enrolled-body small{color:var(--slate,#aaa3bb)}

/* Shared progress bar (dashboard cards + single-course page) */
.sjp-progress-track{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:8px 0 6px}
.sjp-progress-fill{height:100%;border-radius:999px;background:var(--gradient-brand,linear-gradient(120deg,#4A7CFF,#A855F7,#EC4899))}

/* Real course curriculum (replaces the old "Phase 2" placeholder) */
.sjp-course-curriculum{margin-top:28px;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.025)}
.sjp-course-curriculum h2{margin:6px 0 10px;color:var(--ivory,#f7f4fb)}
.sjp-curriculum-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.sjp-topic{border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden}
.sjp-topic summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-weight:600;color:var(--ivory,#f7f4fb)}
.sjp-topic summary::-webkit-details-marker{display:none}
.sjp-topic summary span{font-weight:400;font-size:12px;color:var(--slate,#aaa3bb)}
.sjp-topic ul{list-style:none;margin:0;padding:0 18px 14px}
.sjp-lesson-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--ivory,#f7f4fb)}
.sjp-lesson-item:first-child{border-top:none}
.sjp-lesson-item a{color:var(--ivory,#f7f4fb);text-decoration:none}
.sjp-lesson-item a:hover{color:var(--gold,#c084fc)}
.sjp-lesson-icon{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:11px}
.sjp-lesson-item.is-locked{color:var(--slate,#aaa3bb)}
.sjp-lock{margin-left:auto;font-size:13px;opacity:.7}
@media(max-width:600px){
	.sjp-course-curriculum{padding:16px}
	.sjp-topic summary{padding:12px 14px}
	.sjp-topic ul{padding:0 14px 12px}
	.sjp-enrolled-grid{grid-template-columns:1fr}
}

/* Course bundle offers (course-list page) — real WooCommerce products */
.sjp-bundle-offers{padding:60px 0;border-top:1px solid rgba(255,255,255,.08);position:relative;}
.sjp-bundle-offers h2{margin:6px 0 8px;color:var(--ivory,#f7f4fb);font-size:28px}
.sjp-bundle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:28px}
.sjp-bundle-card{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(20,18,40,.72);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease}
.sjp-bundle-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.sjp-bundle-thumb{height:160px;background-size:cover;background-position:center}
.sjp-bundle-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.sjp-bundle-body h3{margin:0;color:var(--ivory,#f7f4fb);font-size:19px}
.sjp-bundle-body p{color:var(--slate,#aaa3bb);font-size:14px;margin:0}
.sjp-bundle-price{font-size:20px;font-weight:800;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:auto}
.sjp-bundle-body .btn-gold{align-self:flex-start}
@media(max-width:600px){
	.sjp-bundle-offers{padding:40px 0}
	.sjp-bundle-grid{grid-template-columns:1fr;gap:16px}
	.sjp-bundle-thumb{height:140px}
	.sjp-bundle-body{padding:18px}
}