/* MC-BUILD-MARKER: MAILDEBUG-2026-07-17-I  (temporary mail diagnostic; footer filter still unhooked) */
/* =========================================================================
   ModusClass — Elegant refinement layer (Phase 1)
   Loaded LAST (after modusclass-overrides). Purely visual & layout-neutral:
   refined neutrals + one cohesive shadow scale, calmer buttons/cards/panels,
   smoother type, refined inputs. Brand stays emerald. The design language
   here mirrors the approved design-preview.* mockups.

   To revert everything: comment out the `modusclass-elegant` enqueue in
   functions.php. Nothing else depends on this file.
   ========================================================================= */

/* 1) Tokens — refine the shared neutrals + shadow scale (both variable systems).
   Brand colours (emerald / violet) and radii are intentionally kept. -------- */
:root{
  /* Refined neutrals (softer borders, calmer text/muted) */
  --color-text:#0B1220;
  --color-text-muted:#64748B;
  --color-border:#E9EDF2;
  --color-bg:#FBFCFD;

  --text:#0B1220;
  --muted:#64748B;
  --border:#E9EDF2;
  --bg:#FBFCFD;
  --bg-alt:#F1F4F8;

  /* One cohesive, soft shadow scale (replaces stacked neumorphic shadows) */
  --shadow-soft:0 1px 2px rgba(16,24,40,.05);
  --shadow-card:0 1px 3px rgba(16,24,40,.06), 0 18px 36px -20px rgba(16,24,40,.18);
  --shadow-elevated:0 28px 64px -28px rgba(16,24,40,.30);
  --shadow-glow-primary:0 14px 30px -12px rgba(16,185,129,.55);
  --shadow-glow-secondary:0 14px 30px -12px rgba(124,58,237,.5);
}

/* 2) Typography — gentle refinement (smoothing + tighter display tracking) --- */
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:var(--color-text);
}
.h1{letter-spacing:-0.035em;}
.h2{letter-spacing:-0.03em;}
.h3{letter-spacing:-0.02em;}
.muted,.p.muted{color:var(--color-text-muted);}

/* 3) Buttons — flatten the glossy gradients into solid + one soft shadow ----- */
.btn{transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease !important;}

/* Match the high-specificity selector list used by modusclass-overrides.css so
   the flat style actually wins (and is always solid green — never washed out). */
.btn-primary,
.btn.btn-primary,
a.btn-primary,
button.btn-primary{
  background:#10B981 !important;
  background-image:none !important;   /* kill the inherited gradient */
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:var(--shadow-soft), 0 10px 22px -10px rgba(16,185,129,.6) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover{
  background:#059669 !important;
  background-image:none !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
  box-shadow:var(--shadow-soft), 0 16px 30px -12px rgba(16,185,129,.65) !important;
}
.btn-primary:active,
.btn.btn-primary:active{ transform:translateY(0) !important; }

.btn-outline{
  background:#fff !important;
  border:1px solid var(--color-border) !important;
  color:#334155 !important;
  box-shadow:var(--shadow-soft) !important;
}
.btn-outline:hover{
  border-color:#10B981 !important;
  color:#047857 !important;
  transform:translateY(-2px) !important;
  box-shadow:var(--shadow-soft) !important;
}

.btn-secondary{
  background:#7C3AED !important;
  color:#fff !important;
  box-shadow:var(--shadow-soft), 0 10px 22px -10px rgba(124,58,237,.55) !important;
}
.btn-secondary:hover{ filter:brightness(1.05); transform:translateY(-2px) !important; }

/* Keep dark-section outline buttons translucent (hero / CTA) */
.section-hero .btn-outline,
.cta-band .btn-outline,
.section-cta .btn-outline{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#fff !important;
}
.section-hero .btn-outline:hover,
.cta-band .btn-outline:hover,
.section-cta .btn-outline:hover{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.5) !important;
}

/* 4) Cards & panels — one cohesive shadow + hairline, calmer hover ----------- */
.card{
  border:1px solid var(--color-border) !important;
  box-shadow:var(--shadow-soft) !important;
  transition:transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, border-color .28s ease !important;
}
.card:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--shadow-card) !important;
}
.card-arrow{
  background:#ECFDF5 !important;
  color:#047857 !important;
  border:none !important;
}
.card:hover .card-arrow{
  background:#10B981 !important;
  color:#fff !important;
}

.panel{
  border:1px solid var(--color-border) !important;
  box-shadow:var(--shadow-soft) !important;
}
/* Remove the neumorphic 3D gradient border ring on panels */
.panel::before{ display:none !important; }
.panel:hover{ box-shadow:var(--shadow-card) !important; }

/* Pills (value props) — calmer surface + soft hover */
.pill{ box-shadow:var(--shadow-soft) !important; border:1px solid var(--color-border) !important; }
.pill:hover{ box-shadow:var(--shadow-card) !important; border-color:var(--color-border) !important; }

/* 5) Inputs — refined border + emerald focus ring --------------------------- */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select{
  border:1px solid var(--color-border) !important;
  border-radius:12px !important;
  transition:border-color .2s ease, box-shadow .2s ease !important;
}
.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus{
  border-color:#10B981 !important;
  box-shadow:0 0 0 4px #ECFDF5 !important;
  outline:none !important;
}

/* 3b) Outline + secondary buttons — match overrides' specificity, flatten ---- */
.btn-outline,
.btn.btn-outline,
a.btn-outline,
button.btn-outline,
.btn-outline-primary{
  background:#fff !important;
  background-image:none !important;
  border:1px solid var(--color-border) !important;
  color:#334155 !important;
  box-shadow:var(--shadow-soft) !important;
}
.btn-outline:hover,
.btn.btn-outline:hover,
a.btn-outline:hover,
.btn-outline-primary:hover{
  border-color:#10B981 !important;
  color:#047857 !important;
  transform:translateY(-2px) !important;
}
.btn-secondary,
.btn.btn-secondary,
a.btn-secondary{
  background:#7C3AED !important;
  background-image:none !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:var(--shadow-soft), 0 10px 22px -10px rgba(124,58,237,.5) !important;
}
.btn-secondary:hover,
.btn.btn-secondary:hover{
  background:#6D28D9 !important;
  transform:translateY(-2px) !important;
}
/* Outline buttons on dark sections stay translucent + readable */
.section-hero .btn-outline,
.section-cta .btn-outline,
.cta-band .btn-outline{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.3) !important;
  color:#fff !important;
}
.section-hero .btn-outline:hover,
.section-cta .btn-outline:hover{
  background:rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.5) !important;
}

/* 6) Nav — strip the neumorphic pill for a clean, calm bar ------------------- */
.nav{
  background:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  gap:2px !important;
}
.nav a{ color:#334155 !important; font-weight:600 !important; }
.nav a::before{ display:none !important; }
.nav a:hover{
  background:#ECFDF5 !important;
  color:#047857 !important;
  transform:none !important;
  box-shadow:none !important;
}
.nav a.active,
.nav a[aria-current="page"]{
  background:#10B981 !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:0 8px 18px -8px rgba(16,185,129,.5) !important;
  text-shadow:none !important;
}

/* 7) Home hero — refined deep gradient (calmer than the neon original) ------- */
.section-hero.section-surface{
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(16,185,129,.20), transparent 60%),
    radial-gradient(50% 60% at 92% 8%, rgba(139,92,246,.22), transparent 60%),
    linear-gradient(150deg,#0A1F1A 0%,#0C2722 42%,#10302A 58%,#171042 100%) !important;
}
.section-hero .kicker{ color:#6EE7B7 !important; }
.hero-feature-card{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7) !important;
}
.hero-feature-badge{
  background:#6EE7B7 !important;
  color:#04231b !important;
  box-shadow:none !important;
}

/* 8) Value-prop pills — emerald-tint icon tile (drops the violet gradient) --- */
.pill .badge{
  background:#ECFDF5 !important;
  color:#059669 !important;
  box-shadow:none !important;
}
.pill .badge svg,
.pill .badge .icon{ color:#059669 !important; stroke:#059669 !important; }

/* 9) Stats — solid ink numbers (drops gradient text) ------------------------ */
.stat .num{
  background:none !important;
  -webkit-text-fill-color:#0B1220 !important;
  color:#0B1220 !important;
}

/* 10) Inner page hero — clean LIGHT (approved preview look; clearly distinct
   from the old dark hero). The author/profile hero keeps its own cover. */
.page-hero:not(.author-page-hero){
  background:linear-gradient(180deg,#ffffff 0%,#FBFCFD 100%) !important;
  border-bottom:1px solid var(--color-border) !important;
  color:var(--color-text) !important;
}
/* Kill the dark decorative blobs (design-system) over the light hero */
.page-hero:not(.author-page-hero)::before,
.page-hero:not(.author-page-hero)::after,
.page-hero:not(.author-page-hero) .container::before{
  display:none !important;
  content:none !important;
}
.page-hero:not(.author-page-hero) .h1{ color:#0B1220 !important; }
.page-hero:not(.author-page-hero) .p,
.page-hero:not(.author-page-hero) .muted{ color:#64748B !important; }
.page-hero:not(.author-page-hero) .breadcrumbs,
.page-hero:not(.author-page-hero) .breadcrumbs a{ color:#64748B !important; }
.page-hero:not(.author-page-hero) .breadcrumbs a:hover{ color:#047857 !important; }

/* 11) CTA band — refined deep gradient -------------------------------------- */
.section-cta{
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(139,92,246,.22), transparent 60%),
    linear-gradient(135deg,#0A1F1A 0%,#10302A 55%,#171042 100%) !important;
}

/* 12) Creator cards — one cohesive shadow + hairline ------------------------ */
.creator-card{
  background:#fff !important;
  border:1px solid var(--color-border) !important;
  box-shadow:var(--shadow-soft) !important;
}
.creator-card::before{ display:none !important; }
.creator-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:var(--shadow-card) !important;
  border-color:var(--color-border) !important;
}

/* 13) Kicker — refined uppercase label ------------------------------------- */
.kicker{
  text-transform:uppercase !important;
  letter-spacing:.16em !important;
  font-weight:700 !important;
  font-size:12px !important;
  color:#059669 !important;
}
.section-hero .kicker{ color:#6EE7B7 !important; }

/* =========================================================================
   14) WooCommerce — Cart & Checkout (visual refinement only; no layout change)
   Targets the active parent (tutorstarter) woo templates + standard WC markup.
   ========================================================================= */
.cart-page-heading,
.checkout-heading,
.order-details-heading{
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  color:var(--color-text) !important;
}
/* Cart item rows → hairline card */
.cart-contents{
  background:#fff !important;
  border:1px solid var(--color-border) !important;
  border-radius:16px !important;
  box-shadow:var(--shadow-soft) !important;
  padding:14px 16px !important;
}
.cart-product-image img,
.cart-product-image a img{ border-radius:12px !important; }
.cart-product-title,
.cart-product-title a{ font-weight:700 !important; color:var(--color-text) !important; }
.cart-product-price{ font-weight:800 !important; color:var(--color-text) !important; }
.cart-product-remove a{ color:var(--color-text-muted) !important; font-weight:600 !important; font-size:13px !important; text-decoration:none !important; }
.cart-product-remove a:hover{ color:var(--danger) !important; }
/* Summary cards (cart + checkout) */
.cart-collaterals-container,
.checkout-order-summary{
  background:#fff !important;
  border:1px solid var(--color-border) !important;
  border-radius:24px !important;
  box-shadow:var(--shadow-card) !important;
  padding:22px 24px !important;
}
/* Coupon */
.cart-coupon input,
#coupon_code{ border:1px solid var(--color-border) !important; border-radius:12px !important; }
.cart-coupon .button,
button[name="apply_coupon"]{
  background:#fff !important; border:1px solid var(--color-border) !important; color:#334155 !important;
  border-radius:999px !important; box-shadow:var(--shadow-soft) !important;
}
.cart-coupon .button:hover,
button[name="apply_coupon"]:hover{ border-color:#10B981 !important; color:#047857 !important; }
/* Order review / totals table */
.shop_table,
.woocommerce-checkout-review-order-table,
.cart_totals table{
  border:1px solid var(--color-border) !important; border-radius:16px !important;
  border-collapse:separate !important; border-spacing:0 !important; overflow:hidden !important;
}
.shop_table th,
.shop_table td{ border-color:var(--line-soft, #F1F4F8) !important; }
.order-total .amount,
.order-total .woocommerce-Price-amount{ color:var(--color-text) !important; font-weight:800 !important; font-size:18px !important; }
/* Payment methods */
.woocommerce-checkout #payment,
#payment.woocommerce-checkout-payment{ background:transparent !important; border:0 !important; }
#payment ul.wc_payment_methods li,
.wc_payment_methods li{
  list-style:none !important; border:1.5px solid var(--color-border) !important; border-radius:14px !important;
  padding:14px 16px !important; margin-bottom:10px !important; background:#fff !important;
}
#payment ul.wc_payment_methods li:hover{ border-color:#10B981 !important; }
/* Primary commerce buttons → flat solid green (consistent) */
#place_order,
.checkout-button,
.wc-proceed-to-checkout .button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background:#10B981 !important; background-image:none !important; color:#fff !important; border:none !important;
  border-radius:999px !important; box-shadow:var(--shadow-soft), 0 10px 22px -10px rgba(16,185,129,.6) !important;
}
#place_order:hover,
.checkout-button:hover,
.wc-proceed-to-checkout .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:#059669 !important; transform:translateY(-2px) !important;
  box-shadow:var(--shadow-soft), 0 16px 30px -12px rgba(16,185,129,.65) !important;
}

/* =========================================================================
   15) Single course — tabs, price, level badge
   ========================================================================= */
.tabs.course-tabs{
  display:flex !important;
  gap:4px !important;
  border-bottom:1px solid var(--color-border) !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.course-tabs .tab{
  padding:12px 18px !important;
  font-weight:650 !important;
  color:var(--color-text-muted) !important;
  border:0 !important;
  border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  margin-bottom:-1px !important;
}
.course-tabs .tab:hover{ color:var(--color-text) !important; background:transparent !important; }
.course-tabs .tab.active{
  color:#047857 !important;
  border-bottom-color:#10B981 !important;
  background:transparent !important;
}
/* Sidebar price */
.course-sidebar .price,
.course-sidebar .price-sale{
  font-size:30px !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  color:#059669 !important;
}
.course-sidebar .price-old{
  color:var(--color-text-muted) !important;
  text-decoration:line-through !important;
  font-size:15px !important;
  font-weight:600 !important;
}
/* Level badge in sidebar */
.pill-status{
  background:#ECFDF5 !important;
  color:#047857 !important;
  border:1px solid #A7F3D0 !important;
  border-radius:999px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}

/* =========================================================================
   16) Compact form inputs (site-wide, incl. WooCommerce checkout)
   ========================================================================= */
.input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
.woocommerce form .form-row input.input-text,
.woocommerce-checkout input.input-text,
.woocommerce-checkout select{
  height:42px !important;
  min-height:42px !important;
  padding:0 13px !important;
  font-size:14px !important;
  border-radius:10px !important;
  border:1px solid var(--color-border) !important;
  line-height:42px !important;
}
textarea,
textarea.input,
.woocommerce form .form-row textarea{
  height:auto !important;
  min-height:84px !important;
  padding:10px 13px !important;
  font-size:14px !important;
  line-height:1.55 !important;
  border-radius:10px !important;
}
.input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus{
  border-color:#10B981 !important;
  box-shadow:0 0 0 3px #ECFDF5 !important;
  outline:none !important;
}
/* Tighten WooCommerce field rows + labels */
.woocommerce form .form-row{ margin:0 0 12px !important; padding:0 !important; }
.woocommerce form .form-row label,
.woocommerce-billing-fields label{ font-size:13px !important; font-weight:600 !important; margin-bottom:4px !important; }
/* select2 (WC country/state dropdowns) → match compact height */
.select2-container .select2-selection--single{ height:42px !important; border-radius:10px !important; border:1px solid var(--color-border) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:42px !important; padding-left:11px !important; font-size:14px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:40px !important; }

/* =========================================================================
   17) Cart & Checkout — preview page hero + layout alignment
   The hero is injected via woocommerce_before_cart / _before_checkout_form
   (these pages are plain shortcode pages, so .page-hero is not output by the
   theme). We break it full-bleed and hide the theme's duplicate page title.
   ========================================================================= */
/* Hide the theme's duplicate page title ("Cart"/"Checkout") — it sits as a
   direct child of .page-content; our injected hero lives inside .content, so
   this selector never touches it. Also hide the OLD neon checkout banner
   (.checkout-hero, "Complete Your Purchase") which our light hero replaces. */
.mc-shop .page-content > h1.h1,
.mc-checkout .checkout-hero,
.mc-shop .woocommerce-products-header,
.mc-shop .breadcrumbs.woocommerce-breadcrumb{ display:none !important; }

/* Full-bleed preview hero band */
.mc-shop-hero{
  position:relative;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  width:100vw !important;
  max-width:100vw !important;
  padding:32px 0 24px !important;
  background:linear-gradient(180deg,#ffffff 0%, #F4F7FA 100%) !important;
  border-bottom:1px solid #E6EBF1 !important;
  margin-bottom:24px !important;
}
/* Kill the large empty space above the hero: the theme's .section has 80px top
   padding, .content has a 24px top margin, plus a spacer div on checkout. */
.mc-shop main > .section{ padding-top:0 !important; }
.mc-shop .page-content > .content.mt-24{ margin-top:0 !important; }
.mc-checkout .checkout-top-spacing{ display:none !important; }

/* =========================================================================
   19) TutorLMS Dashboard — preview alignment (light header + no top gap)
   The dashboard renders as #content.site-content > .tutor-wrap.tutor-dashboard
   directly (no .section). Stable body hook: .tutor-screen-frontend-dashboard.
   ========================================================================= */
/* The big gap was an inline padding-top:100px on .tutor-dashboard (fixed at the
   source in functions.php to 24px). This override pins it to 24px regardless,
   in case OPcache still serves the old inline value after deploy. */
body.tutor-screen-frontend-dashboard .tutor-wrap.tutor-dashboard,
body.tutor-screen-frontend-dashboard .tutor-frontend-dashboard{ padding-top:24px !important; }

/* Single card: the OUTER .tutor-frontend-dashboard-header is the only card.
   The INNER .tutor-header-left-side box becomes transparent (no nested card).
   Card height reduced ~30% (less padding + smaller avatar). */
body.tutor-screen-frontend-dashboard .tutor-frontend-dashboard-header{
  background:#fff !important;
  padding:15px 28px !important;
}
body.tutor-screen-frontend-dashboard .tutor-header-left-side.tutor-dashboard-header,
body.tutor-screen-frontend-dashboard .tutor-row .tutor-dashboard-header{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
}
body.tutor-screen-frontend-dashboard .tutor-dashboard-header .tutor-avatar,
body.tutor-screen-frontend-dashboard .tutor-dashboard-header-avatar .tutor-avatar{
  width:54px !important;
  height:54px !important;
}
/* "Complete Your Profile" card: hidden by default; JS reveals it only when the
   profile is incomplete (a complete profile never shows it — no flash). */
body.tutor-screen-frontend-dashboard .tutor-profile-completion{ display:none !important; }
body.tutor-screen-frontend-dashboard .tutor-profile-completion.mc-pc-show{ display:block !important; }

/* Dashboard → My Profile: turn the bare label/value list into a clean card.
   .tutor-dashboard-profile-data is specific to this sub-page. */
body.tutor-screen-frontend-dashboard .tutor-dashboard-profile-data{
  background:#fff !important;
  border:1px solid #E6EBF1 !important;
  border-radius:16px !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 12px 30px -18px rgba(2,32,24,0.18) !important;
  padding:6px 26px !important;
}
body.tutor-screen-frontend-dashboard .tutor-dashboard-profile-data .tutor-row.tutor-mb-24{
  margin:0 !important;
  padding:16px 0 !important;
  border-bottom:1px solid #F1F4F8 !important;
  align-items:center !important;
}
body.tutor-screen-frontend-dashboard .tutor-dashboard-profile-data .tutor-row.tutor-mb-24:last-child{ border-bottom:0 !important; }
body.tutor-screen-frontend-dashboard .tutor-dashboard-profile-data .tutor-color-secondary{ color:#64748b !important; font-weight:500 !important; }
body.tutor-screen-frontend-dashboard .tutor-dashboard-profile-data .tutor-color-black{ color:#0B1220 !important; font-weight:600 !important; }

/* Header "My Profile" / "Register" / CTA button — smaller (the global
   .btn{min-height:46px} kept it tall, so override min-height + height). */
.site-header .header-cta-btn,
.site-header .header-actions .btn.btn-primary,
.site-header .header-actions a.btn{
  padding:7px 18px !important;
  font-size:14px !important;
  line-height:1.2 !important;
  min-height:0 !important;
  height:auto !important;
}
/* Single course: instructor name + avatar are clickable → their profile */
.mc-instructor-link{ cursor:pointer; }
.mc-instructor-link:hover .mc-instructor-name{ color:#059669 !important; }

/* =========================================================================
   20) Public profile (author.php /profile/) hero → LIGHT like the preview
   (was a neon gradient/cover). Structure below the hero is already light.
   ========================================================================= */
body.author .page-hero.author-page-hero{
  background:linear-gradient(180deg,#ffffff 0%, #F4F7FA 100%) !important;
  border-bottom:1px solid #E6EBF1 !important;
  padding-top:36px !important;
  padding-bottom:30px !important;
}
/* Tighten the avatar a touch so the shorter hero stays balanced */
body.author .page-hero.author-page-hero .profile-avatar,
body.author .page-hero.author-page-hero .profile-avatar img{ width:104px !important; height:104px !important; }
body.author .page-hero.author-page-hero::before,
body.author .page-hero.author-page-hero::after{ display:none !important; }
/* Dark text on the light hero */
body.author .page-hero.author-page-hero .h1,
body.author .page-hero.author-page-hero h1,
body.author .page-hero.author-page-hero .profile-stat-value{ color:#0B1220 !important; }
body.author .page-hero.author-page-hero .profile-title,
body.author .page-hero.author-page-hero .profile-stat-label,
body.author .page-hero.author-page-hero .breadcrumbs,
body.author .page-hero.author-page-hero .breadcrumbs span,
body.author .page-hero.author-page-hero .breadcrumbs a{ color:#64748b !important; }
body.author .page-hero.author-page-hero .breadcrumbs a:hover{ color:#10B981 !important; }
/* Name accent (last name, .mark-secondary) → emerald (was purple gradient) */
body.author .page-hero.author-page-hero .mark-secondary{
  background:none !important;
  -webkit-text-fill-color:#10B981 !important;
  color:#10B981 !important;
}
/* "View courses" ghost button → light on the light hero */
body.author .page-hero.author-page-hero .btn-outline,
body.author .page-hero.author-page-hero .btn-ghost,
body.author .page-hero.author-page-hero .btn:not(.btn-primary):not(.btn-violet){
  background:#fff !important; color:#0B1220 !important; border:1px solid #E6EBF1 !important;
}
body.author .page-hero.author-page-hero .btn-outline:hover,
body.author .page-hero.author-page-hero .btn-ghost:hover{ border-color:#10B981 !important; color:#047857 !important; }
.mc-shop-hero .container{ max-width:1180px; margin:0 auto; padding-left:20px; padding-right:20px; }
.mc-shop-hero .breadcrumbs{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:#64748b; margin-bottom:10px; }
.mc-shop-hero .breadcrumbs a{ color:#64748b; text-decoration:none; }
.mc-shop-hero .breadcrumbs a:hover{ color:#10B981; }
.mc-shop-hero .breadcrumbs .sep{ color:#cbd5e1; }
.mc-shop-hero .h1{ font-size:40px !important; line-height:1.08 !important; letter-spacing:-0.02em !important; color:#0B1220 !important; margin:0 !important; }
.mc-shop-hero .lead{ margin:8px 0 0 !important; color:#5b6b80 !important; font-size:16px !important; }

/* Summary / order cards → align radius to the preview (18px, not 24px) */
.mc-shop .cart-collaterals-container,
.mc-shop .checkout-order-summary,
.mc-shop .cart_totals{
  border-radius:18px !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 12px 30px -18px rgba(2,32,24,0.25) !important;
}
/* Primary commerce buttons → full width like the preview "Proceed to checkout" */
.mc-shop .wc-proceed-to-checkout .button,
.mc-shop #place_order{ width:100% !important; display:block !important; text-align:center !important; padding:14px 18px !important; font-size:15px !important; }
/* Selected payment method → emerald highlight (preview pay-method.selected) */
.mc-shop #payment ul.wc_payment_methods li.payment_method_selected,
.mc-shop .wc_payment_methods li input[type="radio"]:checked + label{ }
.mc-shop #payment ul.wc_payment_methods li{ transition:border-color .15s ease, background .15s ease !important; }
.mc-shop #payment ul.wc_payment_methods li:has(input:checked){ border-color:#10B981 !important; background:#ECFDF5 !important; }

/* Cart → two columns (items left, summary right) like the preview.
   Standard WooCommerce cart markup: .woocommerce > [hero] + form + collaterals. */
@media (min-width:981px){
  .mc-cart .woocommerce{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 360px !important;
    gap:34px !important;
    align-items:start !important;
  }
  .mc-cart .woocommerce > .mc-shop-hero,
  .mc-cart .woocommerce > .woocommerce-notices-wrapper,
  .mc-cart .woocommerce > .woocommerce-message,
  .mc-cart .woocommerce > .woocommerce-error,
  .mc-cart .woocommerce > .woocommerce-info{ grid-column:1 / -1 !important; }
  .mc-cart .woocommerce-cart-form{ grid-column:1 !important; margin:0 !important; }
  .mc-cart .cart-collaterals{
    grid-column:2 !important;
    width:100% !important;
    float:none !important;
    margin:0 !important;
    position:sticky; top:96px;
  }
  .mc-cart .cart-collaterals .cart_totals{ width:100% !important; float:none !important; }
}

/* ---- Checkout: hide the parent theme's duplicate "Checkout" h2 (the first
   .order-details-heading inside .checkout-payment; "Order Details" is the 2nd
   and stays). Our injected hero already carries the title. */
.mc-checkout .checkout-payment > h2.order-details-heading:first-of-type{ display:none !important; }

/* ---- Checkout → two columns (details left, summary + payment right) like the
   preview. .tutorstarter-checkout-container has exactly: #customer_details +
   .checkout-order-summary as direct children. */
@media (min-width:981px){
  .mc-checkout .tutorstarter-checkout-container{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 380px !important;
    gap:34px !important;
    align-items:start !important;
  }
  .mc-checkout .tutorstarter-checkout-container > #customer_details{
    grid-column:1 !important; width:auto !important; float:none !important; margin:0 !important;
  }
  .mc-checkout .tutorstarter-checkout-container > .checkout-order-summary{
    grid-column:2 !important; width:auto !important; float:none !important; margin:0 !important;
    position:sticky; top:96px;
  }
  .mc-checkout .tutorstarter-checkout-container > wc-order-attribution-inputs{ display:none !important; }
}
/* Left column → clean white panel like the preview .panel */
.mc-checkout #customer_details .checkout-payment{
  background:#fff !important;
  border:1px solid var(--color-border) !important;
  border-radius:18px !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 12px 30px -18px rgba(2,32,24,0.22) !important;
  padding:24px !important;
}
/* Payment method description → clean light card, drop WC's grey slab + triangle */
.mc-checkout .wc_payment_methods .payment_box{
  background:#F8FAFC !important;
  border:1px solid var(--color-border) !important;
  border-radius:12px !important;
  color:#475569 !important;
  margin:10px 0 4px !important;
}
.mc-checkout .wc_payment_methods .payment_box::before{ display:none !important; }

/* =========================================================================
   18) Cart template (custom WC override) — preview .cart-row rows + summary
   ========================================================================= */
.mc-cart .mc-cart-rows{ display:flex; flex-direction:column; }
.mc-cart .cart-row{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px;
  border:1px solid var(--color-border);
  border-radius:16px;
  background:#fff;
  margin-bottom:14px;
}
.mc-cart .cart-row__thumb a{ display:block; }
.mc-cart .cart-row__thumb img{ width:104px; height:66px; object-fit:cover; border-radius:12px; background:#F1F4F8; display:block; }
.mc-cart .cart-row__info{ flex:1; min-width:0; }
.mc-cart .cart-row__name{ font-weight:700; font-size:16px; letter-spacing:-0.01em; color:#0B1220; line-height:1.3; }
.mc-cart .cart-row__name a{ color:inherit; text-decoration:none; }
.mc-cart .cart-row__name a:hover{ color:#059669; }
.mc-cart .cart-row__meta{ font-size:13px; color:#64748b; margin-top:3px; font-weight:500; }
.mc-cart .cart-row__qty{ margin-top:6px; }
.mc-cart .cart-row__qty .quantity input[type="hidden"]{ display:none; }
.mc-cart .cart-row__qty .quantity:has(input[type="hidden"]){ display:none; }
.mc-cart .cart-row__price{ font-weight:800; font-size:17px; color:#0B1220; white-space:nowrap; }
.mc-cart .cart-row__price .amount{ color:#0B1220 !important; }
.mc-cart .cart-row__remove a.remove{
  font-size:12.5px; font-weight:600; color:#94a3b8; text-decoration:none; white-space:nowrap;
  width:auto; height:auto; line-height:1; background:none !important; border-radius:0;
}
.mc-cart .cart-row__remove a.remove:hover{ color:#dc2626; background:none !important; }

.mc-cart .mc-cart-actions{ margin-top:4px; display:flex; gap:12px; align-items:center; }
.mc-cart .mc-cart-actions .mc-update-cart{ display:none !important; } /* courses: quantity is fixed */

/* Summary card (preview .summary) — shared by cart + checkout overrides */
.mc-shop .mc-summary{
  background:#fff; border:1px solid var(--color-border); border-radius:18px;
  box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 12px 30px -18px rgba(2,32,24,0.22);
  padding:22px 22px 20px;
}
.mc-shop .mc-summary__title{ font-size:18px; font-weight:800; letter-spacing:-0.01em; color:#0B1220; margin:0 0 14px; }
.mc-shop .mc-summary .sum-row{ display:flex; justify-content:space-between; align-items:center; font-size:14.5px; color:#334155; padding:9px 0; gap:14px; }
.mc-shop .mc-summary .sum-row .pos{ color:#059669; font-weight:600; }
.mc-shop .mc-summary .sum-row.total{ border-top:1px solid var(--color-border); margin-top:8px; padding-top:16px; font-size:19px; font-weight:800; color:#0B1220; }
.mc-shop .mc-summary .mc-coupon{ display:flex; gap:10px; margin-top:16px; }
.mc-shop .mc-summary .mc-coupon .input{ flex:1; height:46px !important; min-height:46px !important; line-height:46px !important; }
.mc-shop .mc-summary .mc-coupon .btn{ min-height:46px; white-space:nowrap; }
.mc-shop .mc-summary .wc-proceed-to-checkout{ margin-top:16px; padding:0; }
.mc-shop .mc-summary .wc-proceed-to-checkout .button,
.mc-shop .mc-summary .checkout-button{ width:100% !important; display:block !important; text-align:center !important; }
.mc-shop .mc-summary .secure-note{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:12.5px; color:#64748b; }
.mc-shop .mc-summary .secure-note svg{ width:15px; height:15px; color:#059669; }

/* ---- Checkout right summary → preview totals (custom review-order.php) ---- */
.mc-checkout .checkout-order-summary .checkout-heading{
  font-size:18px !important; font-weight:800 !important; letter-spacing:-0.01em !important;
  color:#0B1220 !important; margin:0 0 14px !important;
}
.mc-checkout .mc-review-totals{ display:flex; flex-direction:column; border:0 !important; background:transparent !important; }
.mc-checkout .mc-review-totals .sum-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-size:14.5px; color:#334155; padding:9px 0;
}
.mc-checkout .mc-review-totals .sum-row .pos{ color:#059669; font-weight:600; }
.mc-checkout .mc-review-totals .sum-row.total{
  border-top:1px solid var(--color-border); margin-top:8px; padding-top:16px;
  font-size:19px; font-weight:800; color:#0B1220;
}
.mc-checkout .mc-review-totals .sum-row .amount{ color:#0B1220 !important; font-weight:inherit !important; }
.mc-checkout .mc-review-totals .sum-row.cart-discount .amount{ color:#059669 !important; }

/* ---- Checkout left "Order details" → horizontal preview rows ---- */
.mc-checkout .cart-contents-wrapper{ margin-top:4px; }
.mc-checkout .cart-contents{
  display:flex !important; align-items:center; gap:14px;
  padding:12px 14px !important; border:1px solid var(--color-border) !important;
  border-radius:14px !important; background:#fff !important; box-shadow:none !important; margin-bottom:10px !important;
}
.mc-checkout .cart-contents .cart-product-image{ flex-shrink:0; margin:0; }
.mc-checkout .cart-contents .cart-product-image img{ width:88px; height:56px; object-fit:cover; border-radius:10px; display:block; }
.mc-checkout .cart-contents .cart-product-title{ flex:1; min-width:0; font-weight:700; font-size:15px; color:#0B1220; margin:0; }
.mc-checkout .cart-contents .cart-product-title a{ color:inherit; text-decoration:none; }
.mc-checkout .cart-contents .cart-product-actions{ margin-left:auto; }
.mc-checkout .cart-contents .cart-product-price{ font-weight:800; font-size:16px; color:#0B1220 !important; white-space:nowrap; }
/* Panel section headings (Billing details / Order details) */
.mc-checkout .checkout-payment > h2.order-details-heading{ font-size:18px !important; font-weight:800 !important; color:#0B1220 !important; letter-spacing:-0.01em !important; margin:18px 0 12px !important; }
.mc-checkout .woocommerce-billing-fields > h3{ font-size:18px !important; font-weight:800 !important; color:#0B1220 !important; letter-spacing:-0.01em !important; margin:0 0 16px !important; }
/* Billing fields → two-per-row grid like the preview (paired via PHP classes) */
.mc-checkout .woocommerce-billing-fields__field-wrapper{
  display:grid !important; grid-template-columns:1fr 1fr; gap:0 16px;
}
.mc-checkout .woocommerce-billing-fields__field-wrapper .form-row{
  width:auto !important; float:none !important; margin:0 0 14px !important; padding:0 !important;
}
.mc-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide{ grid-column:1 / -1; }
.mc-checkout .woocommerce-billing-fields__field-wrapper .form-row-first{ grid-column:1; }
.mc-checkout .woocommerce-billing-fields__field-wrapper .form-row-last{ grid-column:2; }
@media (max-width:600px){
  .mc-checkout .woocommerce-billing-fields__field-wrapper{ grid-template-columns:1fr; }
  .mc-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
  .mc-checkout .woocommerce-billing-fields__field-wrapper .form-row-last{ grid-column:1; }
}

/* Site sells via WooCommerce (Cpay). The TutorLMS *native* checkout renders a
   broken duplicate on the WC checkout page when Tutor's native monetization is
   also active — hide it. REAL fix: Tutor LMS → Monetization → WooCommerce. */
body.mc-checkout div.tutor-checkout-page{ display:none !important; }

/* Address fields → half-width 2-col by ID (WC country-locale overrides the
   form-row classes, so we pin placement by field id). State/Region removed. */
.mc-checkout #billing_country_field{ grid-column:1 !important; }
.mc-checkout #billing_address_1_field{ grid-column:2 !important; }
.mc-checkout #billing_city_field{ grid-column:1 !important; }
.mc-checkout #billing_postcode_field{ grid-column:2 !important; }
.mc-checkout #billing_state_field{ display:none !important; }
/* Mobile: stack ALL billing fields into one column (the ID rules above force
   2-col, so override them here, after them, so this wins on small screens). */
@media (max-width:680px){
  .mc-checkout .woocommerce-billing-fields__field-wrapper{ grid-template-columns:1fr !important; }
  .mc-checkout .woocommerce-billing-fields__field-wrapper .form-row,
  .mc-checkout #billing_first_name_field,
  .mc-checkout #billing_last_name_field,
  .mc-checkout #billing_email_field,
  .mc-checkout #billing_phone_field,
  .mc-checkout #billing_country_field,
  .mc-checkout #billing_address_1_field,
  .mc-checkout #billing_city_field,
  .mc-checkout #billing_postcode_field{ grid-column:1 / -1 !important; }
}

/* Payment method → compact single-line card. The gateway title is replaced via
   PHP with "Online Credit Card Payment"; the duplicate description box hidden. */
.mc-checkout #payment .wc_payment_methods li{ padding:12px 15px !important; margin-bottom:0 !important; }
.mc-checkout #payment .wc_payment_methods .payment_box{ display:none !important; }
.mc-checkout #payment .wc_payment_methods li label{
  display:inline-flex !important; align-items:center; margin:0 !important;
  font-weight:600 !important; color:#0B1220 !important; font-size:14.5px !important;
}
.mc-checkout #payment .wc_payment_methods li .input-radio{ margin:0 10px 0 0 !important; width:18px; height:18px; }

/* Header hugs the top on shop pages — TutorLMS front CSS adds body{padding-top}.
   (The larger gap above the menu is the WordPress admin bar, shown only to
   logged-in admins; real visitors don't see it.) */
body.mc-shop{ padding-top:0 !important; }

/* Coupon relocated into the Summary card (checkout) — compact toggle + inline field */
.mc-checkout .checkout-order-summary .woocommerce-form-coupon-toggle{ margin:0 0 14px !important; }
.mc-checkout .checkout-order-summary .woocommerce-form-coupon-toggle .woocommerce-info{
  background:#F8FAFC !important; border:1px solid var(--color-border) !important; color:#475569 !important;
  padding:10px 13px !important; font-size:13px !important; border-radius:10px !important; margin:0 !important; box-shadow:none !important;
}
.mc-checkout .checkout-order-summary .woocommerce-form-coupon-toggle .woocommerce-info::before{ display:none !important; }
.mc-checkout .checkout-order-summary form.checkout_coupon{
  margin:0 0 16px !important; padding:0 !important; border:0 !important; display:flex; flex-wrap:wrap; gap:10px;
}
.mc-checkout .checkout-order-summary form.checkout_coupon > p:first-child{ display:none !important; } /* intro text */
.mc-checkout .checkout-order-summary form.checkout_coupon p.form-row{ margin:0 !important; padding:0 !important; width:auto !important; float:none !important; }
.mc-checkout .checkout-order-summary form.checkout_coupon .form-row-first{ flex:1; min-width:150px; }
.mc-checkout .checkout-order-summary form.checkout_coupon input.input-text{ width:100% !important; }
.mc-checkout .checkout-order-summary form.checkout_coupon .button{ white-space:nowrap; }
.mc-checkout .checkout-order-summary form.checkout_coupon .clear{ display:none; }

/* ============================================================
   21 · Mobile menu — language switcher pinned at the bottom
   ============================================================ */
.mobile-panel .mc-mobile-lang{ border-top:1px solid rgba(15,23,42,.10); margin-top:6px; }
.mobile-panel .mc-mobile-lang .lang-inline{ display:flex; gap:8px; }
.mobile-panel .mc-mobile-lang .lang-option{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:56px; padding:9px 16px !important; border:1px solid rgba(15,23,42,.14); border-radius:10px; font-weight:700; font-size:14px; color:#334155 !important; background:#fff; text-decoration:none; }
.mobile-panel .mc-mobile-lang .lang-option::after{ display:none !important; }
.mobile-panel .mc-mobile-lang .lang-option:hover{ background:#ECFDF5; color:#047857 !important; }
.mobile-panel .mc-mobile-lang .lang-option.active{ background:#10B981; border-color:#10B981; color:#fff !important; }
.mobile-panel .mc-mobile-lang .lang-option.active:hover{ background:#10B981; color:#fff !important; }

/* On mobile the CTA (Register / My Profile) lives inside the menu —
   hide the duplicate that sits in the header bar. */
@media (max-width:760px){
  .header-actions .btn.btn-primary{ display:none !important; }
}