/*
Theme Name: indiatutorsonline-theme
Theme URI: https://indiatutorsonline.com
Author: Auto Generated
Version: 1.0.11
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: indiatutorsonline-theme
*/

/* =========================================================================
   WinQuest Premium Rose palette (v1.9.43 — canonical, user-approved on /shop/)
   USE THESE TOKENS WHEN STYLING ANY NEW WINQUEST PAGE.
   The /shop/ design (hero, sidebar, card chevrons, side card, carousels)
   is the reference implementation. Keep colour usage consistent so the
   premium-luxury feel carries across every page on nuviolearning.com.
   ========================================================================= */
:root {
  /* Hero / banner gradient — deep rose to soft rose (left → right) */
  --wq-hero-grad-start: #d63265;
  --wq-hero-grad-mid:   #b91d4e;
  --wq-hero-grad-end:   #ff7da0;
  --wq-hero-gradient:   linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%);

  /* Action / CTA / active-state gradient (buttons, active sidebar item, open chevron) */
  --wq-action-grad-start: #ff5d8c;
  --wq-action-grad-end:   #ff3870;
  --wq-action-gradient:   linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%);

  /* Solid brand pinks */
  --wq-pink:        #ff3870;   /* primary brand pink (icons, accent text) */
  --wq-pink-mid:    #ff5d8c;   /* mid-tone pink (gradients) */
  --wq-pink-light:  #ff7da0;   /* light pink (gradient end, soft callouts) */
  --wq-pink-deep:   #d63265;   /* deep rose (gradient anchor) */
  --wq-pink-darker: #b91d4e;   /* darkest accent (deep gradient mid-stop) */

  /* Text colours */
  --wq-text-dark:   #5c1d35;   /* dark mauve — headings, primary text on light bg */
  --wq-text-body:   #4a3540;   /* body text / sidebar items */
  --wq-text-muted:  #6b556a;   /* secondary text, sub-tags */
  --wq-text-link-hover: #c8154b; /* link hover, secondary CTA hover text */

  /* Surfaces / backgrounds */
  --wq-bg-page:     #fdf8fa;   /* page background (cart, account, booking etc.) */
  --wq-bg-surface:  #fdf6f9;   /* card chip / level box backgrounds */
  --wq-bg-hover:    #fff0f5;   /* button hover, chevron rest state */
  --wq-bg-soft:     #fff5fa;   /* very soft pink tint (side-card gradient start) */
  --wq-bg-card:     #ffffff;   /* primary surface */
  --wq-bg-chevron-active: #ffdbe6; /* chevron hover */

  /* Borders */
  --wq-border:        #f1e1e7; /* main border on cards / surfaces */
  --wq-border-soft:   #f5dbe5; /* soft border on chips / side-card line buttons */
  --wq-border-pink:   #f7d8e3; /* pale pink border on side-card */
  --wq-border-accent: #e9c977; /* warm gold accent — price chip, special outlines */

  /* Shadows (pink-tinted) */
  --wq-shadow-sm:  0 4px 12px rgba(255,56,112,.18);
  --wq-shadow-md:  0 6px 18px rgba(255,56,112,.22);
  --wq-shadow-lg:  0 14px 40px rgba(255,72,120,.20);
  --wq-shadow-soft: 0 6px 18px rgba(92,29,53,.06);

  /* Page max-width — 1800px premium cap. Pages narrower than this
     should NOT add an additional max-width cap; rely on this token. */
  --wq-page-max: 1800px;
  --wq-page-pad-x: clamp(20px, 3vw, 56px);

  /* Typography */
  --wq-font-head: "Poppins","Montserrat",system-ui,sans-serif;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------
   Booking form — premium layout (scoped)
   ------------------------------------------------------------------ */

.booking-form-page {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  padding: clamp(32px, 6vw, 72px) 16px;
  background: #f5f5f5;
}

.booking-form-shell {
  max-width: 920px;
  margin: 0 auto;
}

.booking-form-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 24px 48px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.booking-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #c0a060;
  opacity: 0.95;
}

.booking-form-head {
  margin-bottom: clamp(20px, 3vw, 28px);
  padding-bottom: clamp(18px, 2.5vw, 24px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.booking-form-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1f1f1f;
}

.booking-form-title {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.booking-form-lead {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.65;
  color: #64748b;
}

.booking-form-alert {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.booking-form-alert-success {
  background: #f8f8f8;
  color: #1a1a1a;
  border: 1px solid #e5e5e5;
}

.booking-form-alert-error {
  background: #f8f8f8;
  color: #1a1a1a;
  border: 1px solid #d8d8d8;
}

.booking-form-wrapper {
  margin-top: 8px;
  padding: clamp(20px, 3vw, 28px);
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.booking-form {
  margin: 0;
}

.booking-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
}

.booking-form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking-form-field-full {
  grid-column: 1 / -1;
}

.booking-form-field label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
}

.booking-form-field input,
.booking-form-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.45;
  padding: 14px 16px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.booking-form-field input::placeholder,
.booking-form-field textarea::placeholder {
  color: #94a3b8;
}

.booking-form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.booking-form-field input:hover,
.booking-form-field textarea:hover {
  border-color: #cbd5e1;
}

.booking-form-field input:focus,
.booking-form-field textarea:focus {
  border-color: #7a2540; /* WQ lighter — was #1f1f1f */
  box-shadow:
    0 0 0 1px rgba(31, 31, 31, 0.24),
    0 0 0 4px rgba(31, 31, 31, 0.12);
}

.booking-form-field input:focus-visible,
.booking-form-field textarea:focus-visible {
  outline: none;
}

.booking-form-field input:user-invalid:not(:placeholder-shown),
.booking-form-field textarea:user-invalid:not(:placeholder-shown) {
  border-color: #f87171;
}

.booking-form-actions {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.booking-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  border: 0;
  border-radius: 6px;
  padding: 15px 28px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  cursor: pointer;
  background: #7a2540; /* WQ lighter — was #1f1f1f */
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    background 0.25s ease;
}

.booking-form-submit:hover {
  transform: translateY(-2px);
  background: #3a3a3a;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.booking-form-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .booking-form-card {
    border-radius: 18px;
    padding: 22px 18px;
  }

  .booking-form-wrapper {
    padding: 18px 14px;
    border-radius: 14px;
  }

  .booking-form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .booking-form-actions {
    margin-top: 22px;
    padding-top: 20px;
  }

  .booking-form-submit {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .booking-form-field input {
    min-height: 48px;
  }

  .booking-form-field textarea {
    min-height: 140px;
  }
}

/* ------------------------------------------------------------------
   Book demo — multi-section form (v2)
   ------------------------------------------------------------------ */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.ito-demo-booking-page {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  padding: clamp(28px, 5vw, 56px) 16px 64px;
  background: #5c1d35; /* WQ lighter — was #0b1120 */
  color: rgba(255,255,255,.88);
  width: 100%;
  max-width: 100%;
  clear: both;
  display: flow-root;
  box-sizing: border-box;
}

.ito-demo-booking-shell {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  display: flow-root;
}

/* ── 5-form tabbed switcher (CSS-only, radio-driven) ───────────────────── */
.ito-bk { width: 100%; }

.ito-bk-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ito-bk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}

.ito-bk-tab {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s, color .18s;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.ito-bk-tab:hover { color: #fff; background: rgba(255,255,255,.08); }

.ito-bk-panel { display: none; }

/* Show the panel + highlight the tab for the checked radio. */
.ito-bk-radio--demo:checked     ~ .ito-bk-panels .ito-bk-panel--demo,
.ito-bk-radio--group:checked    ~ .ito-bk-panels .ito-bk-panel--group,
.ito-bk-radio--workshop:checked ~ .ito-bk-panels .ito-bk-panel--workshop,
.ito-bk-radio--free:checked     ~ .ito-bk-panels .ito-bk-panel--free,
.ito-bk-radio--physical:checked ~ .ito-bk-panels .ito-bk-panel--physical {
  display: block;
}

.ito-bk-radio--demo:checked     ~ .ito-bk-tabs .ito-bk-tab--demo,
.ito-bk-radio--group:checked    ~ .ito-bk-tabs .ito-bk-tab--group,
.ito-bk-radio--workshop:checked ~ .ito-bk-tabs .ito-bk-tab--workshop,
.ito-bk-radio--free:checked     ~ .ito-bk-tabs .ito-bk-tab--free,
.ito-bk-radio--physical:checked ~ .ito-bk-tabs .ito-bk-tab--physical {
  background: linear-gradient(135deg, #ff1f59 0%, #d41448 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255,31,89,.40);
}

/* Keyboard focus ring on the active tab. */
.ito-bk-radio:focus-visible ~ .ito-bk-tabs .ito-bk-tab {
  outline: none;
}

@media (max-width: 680px) {
  .ito-bk-tabs { gap: 6px; }
  .ito-bk-tab { flex: 1 1 40%; font-size: 12px; padding: 10px 8px; }
}
@media (max-width: 420px) {
  .ito-bk-tab { flex: 1 1 100%; }
}

.ito-demo-booking-card {
  background: #5c1d35; /* WQ lighter — was #0f172a (overridden to #fff in WQ Light Theme block) */
  border-radius: 20px;
  padding: clamp(22px, 4vw, 36px);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 20px 56px rgba(255,31,89, 0.18);
  border: 1px solid rgba(255,31,89, 0.22);
  width: 100%;
  max-width: 100%;
  display: flow-root;
  position: relative;
}

.ito-demo-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  width: 100%;
  clear: both;
}

.ito-demo-perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 8px;
  background: rgba(255,31,89, 0.12);
  border-radius: 14px;
  border: 1px solid rgba(255,31,89, 0.28);
}

.ito-demo-perk-icon {
  font-size: 1.35rem;
  color: #9DB4D8;
}

.ito-demo-perk-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.80);
}

.ito-demo-booking-head {
  text-align: center;
  margin-bottom: 28px;
  width: 100%;
  max-width: 100%;
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  float: none;
  clear: both;
  transform: none;
  box-sizing: border-box;
}

.ito-demo-booking-title {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 4vw, 1.85rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  width: 100%;
  max-width: 100%;
  float: none;
}

.ito-demo-booking-subtitle {
  margin: 0;
  font-size: 15px;
  color: rgba(255,255,255,.52);
  max-width: 100%;
}

.ito-demo-alert {
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}

.ito-demo-alert-success {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.ito-demo-alert-error {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.30);
}

.ito-demo-booking-form {
  margin: 0;
}

.ito-demo-section {
  margin-bottom: 28px;
}

.ito-demo-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  border-left: 4px solid #ff1f59;
}

.ito-demo-section-title .fa {
  opacity: 0.9;
}

.ito-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.ito-demo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ito-demo-field-full {
  grid-column: 1 / -1;
}

.ito-demo-field label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
}

.ito-demo-req {
  color: #f87171;
  font-weight: 700;
}

.ito-demo-field-hint {
  margin: -4px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,.35);
}

.ito-demo-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(255,255,255,.05);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.ito-demo-input-wrap:focus-within {
  border-color: #ff1f59;
  box-shadow: 0 0 0 3px rgba(255,31,89, 0.18);
}

.ito-demo-input-wrap .fa {
  color: #ff1f59;
  font-size: 16px;
  flex-shrink: 0;
}

.ito-demo-input-wrap input,
.ito-demo-select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  padding: 14px 0;
  color: rgba(255,255,255,.88);
  outline: none;
}

.ito-demo-input-wrap input::placeholder {
  color: rgba(255,255,255,.28);
}

.ito-demo-select option {
  background: #5c1d35; /* WQ lighter — was #1e293b */
  color: rgba(255,255,255,.88);
}

.ito-demo-select-wrap {
  padding: 0 10px 0 14px;
}

.ito-demo-select-wrap .ito-demo-select {
  padding: 14px 8px 14px 0;
  cursor: pointer;
}

.ito-demo-phone-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.ito-demo-phone-cc {
  flex: 0 0 min(44%, 220px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
}

.ito-demo-input-grow {
  flex: 1;
}

.ito-demo-consent {
  margin: 8px 0 24px;
}

.ito-demo-consent-label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.52);
  cursor: pointer;
}

.ito-demo-consent-label a {
  color: #9DB4D8;
  text-decoration: underline;
}

.ito-demo-consent-label a:hover {
  color: #fff;
}

.ito-demo-consent-label input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #ff1f59;
}

.ito-demo-actions {
  text-align: center;
}

.ito-demo-submit {
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 6px;
  padding: 16px 22px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  cursor: pointer;
  background: #ff1f59;
  box-shadow:
    0 6px 20px rgba(255,31,89, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ito-demo-submit:hover {
  transform: translateY(-2px);
  background: #d41448;
  box-shadow: 0 10px 28px rgba(255,31,89, 0.45);
}

.ito-demo-submit:active {
  transform: translateY(0);
}

.ito-demo-trust {
  margin: 16px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ito-demo-trust .fa {
  color: #ff1f59;
}

@media (max-width: 640px) {
  .ito-demo-perks {
    grid-template-columns: 1fr;
  }

  .ito-demo-grid {
    grid-template-columns: 1fr;
  }

  .ito-demo-phone-row {
    flex-direction: column;
  }

  .ito-demo-phone-cc {
    flex-basis: auto;
    width: 100%;
  }
}

/* Book Demo: Elementor / blocks + theme form on one page */
.ito-book-demo-combined {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.ito-book-demo-elementor {
  padding: clamp(16px, 3vw, 32px) 0;
  display: flow-root;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ito-book-demo-elementor > *:first-child {
  margin-top: 0;
}

.ito-book-demo-combined .ito-demo-booking-page {
  margin-top: clamp(8px, 2vw, 24px);
  clear: both;
  isolation: isolate;
}

/* Homepage Elementor canvas should span full content width. */
body.ito-homepage #primary.site-main,
body.home #primary.site-main,
body.front-page #primary.site-main {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
body.ito-homepage #primary.site-main .elementor,
body.home #primary.site-main .elementor,
body.front-page #primary.site-main .elementor {
  width: 100%;
  max-width: 100%;
}

/* Site-wide full-width responsive content canvas */
#page,
#content,
.site,
.site-content,
.content-area,
.site-main,
.entry-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.entry-content img,
.entry-content iframe,
.entry-content video {
  max-width: 100%;
  height: auto;
}

.elementor-section,
.elementor-container,
.elementor-widget-wrap {
  max-width: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Site-wide palette — purple accent (booking form light, demo form dark)
   ------------------------------------------------------------------ */

.booking-form-page {
  background: #f5f5f5;
  color: #1a1a1a;
}

.booking-form-card,
.booking-form-wrapper {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
}

.booking-form-card::before {
  background: #ff1f59;
}

.booking-form-eyebrow {
  color: #1a1a1a;
}

.booking-form-lead {
  color: #6b6b6b;
}

.booking-form-submit {
  background: #ff1f59;
  color: #ffffff;
  border-radius: 6px;
  border: 1px solid #ff1f59;
  box-shadow: 0 8px 18px rgba(255,31,89, 0.30);
}

.booking-form-submit:hover {
  background: #d41448;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(255,31,89, 0.42);
}

.booking-form-field input:focus,
.booking-form-field textarea:focus {
  border-color: #ff1f59;
  box-shadow: 0 0 0 3px rgba(255,31,89, 0.18);
}

/* ============================================================
   WinQuest Light Theme overrides (appended)
   Lighten the dark booking form, dark cards and dark dropdowns so
   the ported ITO pages match WinQuest's light front-page aesthetic.
   Rules below win specificity ties by source order — no !important
   needed for most of them, but a few are forced where the original
   has shorthand fights.
   ============================================================ */

/* Booking-page wrapper — was near-black #0b1120, now soft pink-tinted white */
.ito-demo-booking-page{
  background:#fdf8fa !important;
  color:#1f2937 !important;
}

/* Booking card — was dark navy #0f172a, now clean white with pink border accent */
.ito-demo-booking-card{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid #f1e1e7 !important;
  box-shadow:0 10px 30px rgba(255,31,89,.10), 0 2px 6px rgba(92,29,53,.06) !important;
}

/* Tab/radio bar — keep the pink-mauve gradient (already lightened earlier) */
.ito-bk{
  background:linear-gradient(135deg,#5c1d35 0%,#d41448 70%,#ff1f59 100%) !important;
}

/* Section headings inside the card */
.ito-demo-booking-page h1,
.ito-demo-booking-page h2,
.ito-demo-booking-page h3,
.ito-demo-booking-card h1,
.ito-demo-booking-card h2,
.ito-demo-booking-card h3{ color:#5c1d35 !important; }

/* Labels + helper text */
.ito-demo-booking-page label,
.ito-demo-booking-card label{ color:#374151 !important; }
.ito-demo-booking-page .ito-bk-help,
.ito-demo-booking-page small,
.ito-demo-booking-card small{ color:#6b7280 !important; }

/* Inputs / textareas / selects — light backgrounds with dark text */
.ito-demo-booking-page input[type=text],
.ito-demo-booking-page input[type=email],
.ito-demo-booking-page input[type=tel],
.ito-demo-booking-page input[type=number],
.ito-demo-booking-page input[type=date],
.ito-demo-booking-page select,
.ito-demo-booking-page textarea,
.ito-demo-booking-card input[type=text],
.ito-demo-booking-card input[type=email],
.ito-demo-booking-card input[type=tel],
.ito-demo-booking-card input[type=number],
.ito-demo-booking-card input[type=date],
.ito-demo-booking-card select,
.ito-demo-booking-card textarea{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1.5px solid #e5d4db !important;
  border-radius:10px !important;
}
.ito-demo-booking-page input:focus,
.ito-demo-booking-page select:focus,
.ito-demo-booking-page textarea:focus,
.ito-demo-booking-card input:focus,
.ito-demo-booking-card select:focus,
.ito-demo-booking-card textarea:focus{
  border-color:#ff1f59 !important;
  outline:0 !important;
  box-shadow:0 0 0 3px rgba(255,31,89,.18) !important;
}

/* Native dropdown options (was #1e293b) */
.ito-demo-booking-page select option,
.ito-demo-booking-card select option,
.ito-demo-select option{
  background:#ffffff !important;
  color:#1f2937 !important;
}

/* Primary CTA / submit button — was solid black #1f1f1f, now brand pink */
.ito-demo-booking-page button[type=submit],
.ito-demo-booking-card button[type=submit],
.ito-bk-submit,
.ito-demo-booking-page .booking-btn-primary,
.ito-demo-booking-card .booking-btn-primary{
  background:linear-gradient(135deg,#ff1f59,#d41448) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 6px 18px rgba(255,31,89,.30) !important;
}
.ito-demo-booking-page button[type=submit]:hover,
.ito-demo-booking-card button[type=submit]:hover,
.ito-bk-submit:hover{
  filter:brightness(1.04);
}

/* Class-landing hero (events-workshops + video-courses) — soften the dark
   navy → pink gradient that's still being applied via the inline page CSS
   inside class-landings.php. Tone the dark anchor down. */
.ito-cl__hero{
  background:linear-gradient(135deg,#5c1d35 0%,#d41448 60%,#ff1f59 100%) !important;
}

/* ============================================================
   WinQuest Cart / Checkout / My-Account polish (appended)
   The bare WooCommerce default looked starkly unbranded next to
   the front-page light theme. These rules add a branded header,
   white card surfaces, pink CTAs and soft pink-tinged shadows so
   /cart/, /checkout/ and /my-account/ feel like the same product.
   ============================================================ */

/* Page wrapper background — same pink-tinted off-white as booking page */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main{
  background:#fdf8fa;
  color:#1f2937;
}

/* Branded hero strip above the WC cart/checkout (mimics .ito-pp__hero-l) */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:first-child::before,
.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper:first-child::before,
.woocommerce-cart .wc-block-cart::before,
.woocommerce-checkout .wc-block-checkout::before{
  content:"";
  display:block;
  width:100%;
  height:120px;
  margin:0 0 28px;
  background:linear-gradient(135deg,#5c1d35 0%,#d41448 60%,#ff1f59 100%); /* WQ lighter */
  border-radius:0;
}

/* Centered headings — pink-mauve so they pop against the card */
.woocommerce-cart h1,
.woocommerce-cart h2,
.woocommerce-checkout h1,
.woocommerce-checkout h2,
.woocommerce-account h1,
.woocommerce-account h2,
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2{
  color:#5c1d35;
  font-family:"Poppins","Montserrat",system-ui,sans-serif;
  letter-spacing:-0.01em;
}

/* Cart form table card */
.woocommerce-cart-form{
  background:#ffffff;
  border:1px solid #f1e1e7;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(255,31,89,.08), 0 2px 6px rgba(92,29,53,.05);
  padding:18px clamp(14px,2.5vw,24px);
  margin:24px auto;
  max-width:980px;
}
.woocommerce-cart-form table.shop_table{
  border:0;
  background:transparent;
}
.woocommerce-cart-form table.shop_table th,
.woocommerce-cart-form table.shop_table td{
  border-color:#f1e1e7;
  color:#1f2937;
}
.woocommerce-cart-form table.shop_table thead th{
  color:#5c1d35;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;
}

/* Update cart + coupon-apply buttons */
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form button[name="apply_coupon"],
.woocommerce button.button:not(.checkout-button):not(.alt){
  background:#ffffff !important;
  color:#5c1d35 !important;
  border:1.5px solid #d6a944 !important;
  border-radius:10px !important;
  font-weight:700 !important;
  padding:10px 18px !important;
  transition:background .15s,color .15s,filter .15s !important;
}
.woocommerce-cart-form button[name="update_cart"]:hover,
.woocommerce-cart-form button[name="apply_coupon"]:hover,
.woocommerce button.button:not(.checkout-button):not(.alt):hover{
  background:#fff7e6 !important;
  filter:brightness(0.96) !important; /* WQ lighter — was #000 */
}

/* Cart totals box — primary card */
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals{
  background:#ffffff;
  border:1px solid #f1e1e7;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(255,31,89,.10), 0 2px 6px rgba(92,29,53,.06);
  padding:22px clamp(16px,2.6vw,28px);
  max-width:520px;
  margin:24px auto 40px;
}
.woocommerce-cart .cart_totals h2{
  color:#5c1d35;
  margin:0 0 14px;
  font-size:22px;
}
.woocommerce-cart .cart_totals table{
  background:transparent;
  border:0;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td{
  border-color:#f1e1e7;
  color:#1f2937;
  background:transparent;
}

/* Proceed-to-checkout — brand pink gradient (primary CTA) */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:linear-gradient(135deg,#ff1f59,#d41448) !important;
  color:#ffffff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:14px 22px !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  box-shadow:0 8px 22px rgba(255,31,89,.32) !important;
  transition:filter .15s !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  filter:brightness(.92) !important; /* WQ lighter — was #b00f3c */
  color:#ffffff !important;
}

/* Coupon row */
.woocommerce-cart-form .coupon{
  background:#fdf8fa;
  border:1px dashed #f1c5d2;
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.woocommerce-cart-form .coupon input[type="text"],
.woocommerce-cart-form input.input-text{
  background:#ffffff;
  color:#1f2937;
  border:1.5px solid #e5d4db;
  border-radius:10px;
  padding:8px 12px;
}
.woocommerce-cart-form .coupon input[type="text"]:focus,
.woocommerce-cart-form input.input-text:focus{
  border-color:#ff1f59;
  outline:0;
  box-shadow:0 0 0 3px rgba(255,31,89,.18);
}

/* Quantity input */
.woocommerce-cart .quantity input.qty,
.wc-block-components-quantity-selector input{
  background:#ffffff;
  color:#1f2937;
  border:1.5px solid #e5d4db;
  border-radius:8px;
  padding:6px 8px;
  min-width:62px;
  text-align:center;
}

/* Cart item images — soft rounded */
.woocommerce-cart-form table.shop_table img{
  border-radius:8px;
  max-width:64px;
  height:auto;
}

/* Cross-sells suggestions */
.woocommerce-cart .cross-sells > h2{ color:#5c1d35; }

/* ============================================================
   Block-based cart variant (.wc-block-cart) — same brand polish
   ============================================================ */
.wc-block-cart{
  background:#ffffff;
  border:1px solid #f1e1e7;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(255,31,89,.08), 0 2px 6px rgba(92,29,53,.05);
  padding:18px clamp(14px,2.5vw,24px);
  margin:24px auto;
  max-width:1100px;
}
.wc-block-cart-items{ background:transparent; }
.wc-block-cart-items__row{ border-bottom-color:#f1e1e7 !important; }
.wc-block-cart__sidebar,
.wc-block-components-totals-wrapper{
  background:#fdf8fa;
  border:1px solid #f1e1e7;
  border-radius:12px;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__label,
.wc-block-cart__totals-title{ color:#1f2937; }
.wc-block-cart__totals-title{ color:#5c1d35; }

/* Empty-cart state */
.wp-block-woocommerce-empty-cart-block,
.cart-empty{
  background:#ffffff;
  border:1px solid #f1e1e7;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(255,31,89,.08);
  padding:42px clamp(20px,4vw,48px);
  max-width:820px;
  margin:36px auto;
  text-align:center;
}
.wc-block-cart__empty-cart__title,
.cart-empty.woocommerce-info{
  color:#5c1d35 !important;
  background:transparent !important;
  border:0 !important;
  font-size:22px !important;
  font-weight:800 !important;
}
.return-to-shop .button,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link{
  background:linear-gradient(135deg,#ff1f59,#d41448) !important;
  color:#ffffff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:12px 22px !important;
  font-weight:800 !important;
  box-shadow:0 8px 22px rgba(255,31,89,.32) !important;
}
.return-to-shop .button:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover{
  filter:brightness(.92) !important; /* WQ lighter */
}

/* WooCommerce info/success notices recolor (top of cart) */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info{
  background:#fff7e6 !important;
  border-top-color:#d6a944 !important;
  color:#5c1d35 !important;
  border-radius:10px !important;
}
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error{
  background:#fff0f3 !important;
  border-top-color:#d41448 !important;
  color:#7a2540 !important; /* WQ lighter dark mauve */
  border-radius:10px !important;
}

/* ============================================================
   Checkout polish (lightweight — mirrors cart styling)
   ============================================================ */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review,
.woocommerce-checkout form.checkout .col-1,
.woocommerce-checkout form.checkout .col-2{
  background:#ffffff;
  border:1px solid #f1e1e7;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(255,31,89,.06);
  padding:18px clamp(14px,2.5vw,24px);
  margin-bottom:18px;
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select{
  background:#ffffff;
  color:#1f2937;
  border:1.5px solid #e5d4db;
  border-radius:10px;
  padding:10px 12px;
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus{
  border-color:#ff1f59;
  outline:0;
  box-shadow:0 0 0 3px rgba(255,31,89,.18);
}

/* ============================================================
   My-Account polish — sidebar + content card
   ============================================================ */
.ito-acct-hero{
  background:linear-gradient(135deg,#5c1d35 0%,#d41448 60%,#ff1f59 100%);
  color:#ffffff;
  padding:36px clamp(16px,4vw,40px);
}
.ito-acct-hero__in{
  max-width:1180px;
  margin:0 auto;
}
.ito-acct-hero__in span{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.95;
}
.ito-acct-hero__in h1{
  margin:6px 0 0;
  font-size:clamp(24px,3.4vw,34px);
  color:#ffffff;
  font-weight:800;
}
.woocommerce-MyAccount-navigation ul{
  list-style:none;
  padding:0;
  margin:0;
  background:#ffffff;
  border:1px solid #f1e1e7;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(255,31,89,.06);
  overflow:hidden;
}
.woocommerce-MyAccount-navigation ul li{
  border-bottom:1px solid #f1e1e7;
}
.woocommerce-MyAccount-navigation ul li:last-child{ border-bottom:0; }
.woocommerce-MyAccount-navigation ul li a{
  display:block;
  padding:12px 16px;
  color:#5c1d35;
  font-weight:600;
  text-decoration:none;
  transition:background .15s,color .15s;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a{
  background:#fdf2f6;
  color:#d41448;
}
.woocommerce-MyAccount-content{
  background:#ffffff;
  border:1px solid #f1e1e7;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(255,31,89,.08);
  padding:22px clamp(16px,2.6vw,28px);
  color:#1f2937;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{ color:#5c1d35; }


/* =========================================================================
   WinQuest UI Polish Pass (v1.9.38)
   Page-scoped overrides to bring the 14 ported pages up to a single
   consistent polish level. All rules are scoped under .ito-*, .wq-*,
   .woocommerce-cart, .woocommerce-checkout — must NOT bleed onto the
   homepage. Use !important only when fighting Astra / Woo defaults.
   ========================================================================= */

/* --- a. Button consistency ---------------------------------------------- */
.ito-bk-submit,
.ito-pp__btn--solid,
.ito-ref__btn,
.ito-cta-btn,
.booking-btn-primary,
.ito-cb__btn--enrol,
.ito-wl-btn--solid,
.ito-wl .ito-wl-btn--solid,
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout .checkout-button,
.woocommerce div.product .single_add_to_cart_button {
  background: linear-gradient(135deg, #ff1f59 0%, #d41448 100%) !important;
  color: #fff !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  border: 0 !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(255,31,89,.22);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
  cursor: pointer;
  display: inline-block;
}
.ito-bk-submit:hover,
.ito-pp__btn--solid:hover,
.ito-ref__btn:hover,
.ito-cta-btn:hover,
.booking-btn-primary:hover,
.ito-cb__btn--enrol:hover,
.ito-wl-btn--solid:hover,
.ito-wl .ito-wl-btn--solid:hover,
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout .checkout-button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255,31,89,.32) !important;
  filter: brightness(1.04);
}

/* The new "Enrol Now" CTA on browser cards — full-width, sits above
   Download Curriculum. */
.ito-cb__btn--enrol {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: .92rem;
}
.ito-cb__btn--enrol.loading { opacity: .7; pointer-events: none; }
.ito-cb__btn--enrol.added::after {
  content: " \2713";
  font-weight: 800;
}

/* --- b. Form input consistency ------------------------------------------ */
.ito-bk input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.ito-bk textarea,
.ito-bk select,
.ito-ct input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.ito-ct textarea,
.ito-ct select,
.ito-lg input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.ito-ref input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.ito-ref textarea,
.ito-pp input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.ito-pp select {
  background: #fff !important;
  border: 1.5px solid #e5d4db !important;
  border-radius: 10px !important;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
  color: #1f2937;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.ito-bk input:focus,
.ito-bk textarea:focus,
.ito-bk select:focus,
.ito-ct input:focus,
.ito-ct textarea:focus,
.ito-ct select:focus,
.ito-lg input:focus,
.ito-ref input:focus,
.ito-ref textarea:focus,
.ito-pp input:focus,
.ito-pp select:focus {
  outline: none;
  border-color: #ff1f59 !important;
  box-shadow: 0 0 0 3px rgba(255,31,89,.18) !important;
}

/* --- c. Card hover effects ---------------------------------------------- */
.ito-tutor-card,
.ito-gc__card,
.ito-fc-card,
.ito-cs-tcard2,
.wq-events__card,
.ito-cb__card,
.ito-wl-card {
  transition: transform .2s ease, box-shadow .2s ease !important;
  will-change: transform;
}
.ito-tutor-card:hover,
.ito-gc__card:hover,
.ito-fc-card:hover,
.ito-cs-tcard2:hover,
.wq-events__card:hover,
.ito-cb__card:hover,
.ito-wl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(255,31,89,.15) !important;
}

/* --- d. Heading consistency --------------------------------------------- */
.ito-gc h1, .ito-gc h2, .ito-gc h3,
.ito-bk h1, .ito-bk h2, .ito-bk h3,
.ito-ct h1, .ito-ct h2, .ito-ct h3,
.ito-fc h1, .ito-fc h2, .ito-fc h3,
.ito-wl h1, .ito-wl h2, .ito-wl h3,
.ito-pp h1, .ito-pp h2, .ito-pp h3,
.ito-ref h1, .ito-ref h2, .ito-ref h3,
.ito-cs h1, .ito-cs h2, .ito-cs h3,
.ito-vc h1, .ito-vc h2, .ito-vc h3,
.ito-au h1, .ito-au h2, .ito-au h3,
.wq-events h1, .wq-events h2, .wq-events h3 {
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.ito-gc:not(.ito-gc__hero) h2,
.ito-gc:not(.ito-gc__hero) h3,
.ito-fc h2, .ito-fc h3,
.ito-wl h2, .ito-wl h3,
.ito-pp h2, .ito-pp h3,
.ito-ref h2, .ito-ref h3,
.ito-cs h2, .ito-cs h3,
.ito-vc h2, .ito-vc h3,
.ito-au h2, .ito-au h3,
.wq-events h2, .wq-events h3 {
  color: #5c1d35;
}

/* --- e. Group Classes hero — fill the empty right side ------------------- */
.ito-gc__hero {
  position: relative;
  overflow: hidden;
}
.ito-gc__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 30%, rgba(255,255,255,.22) 0%, transparent 42%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.12) 0%, transparent 38%),
    radial-gradient(circle at 95% 50%, rgba(212,20,72,.35) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.ito-gc__hero::after {
  content: "👥";
  position: absolute;
  right: clamp(20px, 6vw, 80px);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(80px, 14vw, 180px);
  opacity: .10;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.ito-gc__hero-inner { position: relative; z-index: 1; }

/* --- 5a. Wishlist empty-state polish ------------------------------------ */
.ito-wl-hero h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
}
.ito-wl-hero h1::first-letter,
.ito-wl-hero h1 {
  /* heart already in markup as ♥ entity */
}
.ito-wl-empty {
  font-size: 1.05rem;
  padding: 56px 24px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #fff6f9 0%, #fff 100%);
  border: 1.5px dashed #f5c2d2 !important;
  position: relative;
}
.ito-wl-empty::before {
  content: "♥";
  display: block;
  font-size: 3.6rem;
  line-height: 1;
  color: #ff1f59;
  background: #ffe4ec;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(255,31,89,.18);
}

/* --- 5b. Events page card polish ---------------------------------------- */
.wq-events .wq-events__card,
.ito-fc .ito-fc-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f1e1e7;
  box-shadow: 0 6px 18px rgba(92,29,53,.06);
}
.wq-events .wq-events__card img,
.wq-events .wq-events__card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* --- 5d. Cart polish — fight WC defaults if needed ---------------------- */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  color: #5c1d35 !important;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
}
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
  border: 1px solid #f1e1e7 !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
  background: #fdf2f6 !important;
  color: #5c1d35 !important;
  font-family: "Poppins", system-ui, sans-serif;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, #ff1f59 0%, #d41448 100%) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
}

/* --- f. Mobile responsiveness ------------------------------------------- */
@media (max-width: 768px) {
  .ito-gc__title,
  .ito-bk-hero h1,
  .ito-ct h1,
  .ito-fc__hero h1,
  .ito-pp__hero h1,
  .ito-ref__hero h1,
  .ito-vc__hero h1,
  .wq-events__hero h1,
  .ito-au__hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    line-height: 1.18 !important;
  }
  .ito-gc__hero,
  .ito-bk-hero,
  .ito-ct__hero,
  .ito-fc__hero,
  .ito-pp__hero,
  .ito-ref__hero,
  .ito-vc__hero,
  .ito-au__hero,
  .wq-events__hero {
    padding: 32px 18px !important;
  }
  .ito-wl-grid,
  .ito-fc__grid,
  .ito-gc__grid,
  .wq-events__grid,
  .ito-cs-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ito-pp__plans,
  .ito-ref__steps {
    grid-template-columns: 1fr !important;
  }
  .ito-bk-tabs { padding: 4px !important; }
  .ito-bk-tab  { font-size: 12px !important; padding: 9px 8px !important; }
}

/* --- Ensure browser Enrol button doesn't lose pink when Astra wraps ---- */
.ito-cb a.ito-cb__btn--enrol,
.ito-cb a.ito-cb__btn--enrol:visited {
  background: linear-gradient(135deg, #ff1f59 0%, #d41448 100%) !important;
  color: #fff !important;
  border: 0 !important;
}
.ito-cb a.ito-cb__btn--enrol:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(255,31,89,.28) !important;
}
/* === /WinQuest UI Polish Pass === */


/* =========================================================================
   /shop/ Premium Polish Pass (v1.9.40)

   Targets three specific user reports on /shop/:
   1. Sidebar "Browse Categories" header was rendering huge (Astra's global h2
      rule was winning over .ito-gc__side-h font-size:1.05rem). It wrapped to
      two lines on the narrow column and dominated visually.
   2. Category buttons (.ito-gc__cat) inherited Astra/Woo's pink-outlined
      pill styling (border + heavy padding), making the sidebar look bulky
      and amateur compared to ITO's clean compact list.
   3. The .ito-gc__hero gradient (#5c1d35 → #ff1f59) was too dark/saturated
      vs the lighter rose pink on the homepage hero. User asked for both
      stops to be lightened to match the front-page tone.

   All rules are scoped under .ito-gc (not the homepage) so they don't bleed.
   ========================================================================= */

/* ── 1. Hero — premium rose gradient (v1.9.41: 2 notches darker per user) ── */
.ito-gc--all .ito-gc__hero {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%) !important;
  border-radius: 22px;
  padding: clamp(38px, 5vw, 56px) clamp(22px, 5vw, 56px) clamp(34px, 4vw, 48px) !important;
  margin: 18px 0 26px !important;
  max-width: 100% !important;
  box-shadow: 0 14px 40px rgba(255,72,120,.20), inset 0 1px 0 rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}
.ito-gc--all .ito-gc__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 26%, rgba(255,255,255,.30) 0%, transparent 44%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.18) 0%, transparent 38%),
    radial-gradient(circle at 12% 90%, rgba(255,255,255,.10) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.ito-gc--all .ito-gc__hero::after {
  content: "🎓";
  position: absolute;
  right: clamp(24px, 5vw, 70px);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(80px, 13vw, 170px);
  opacity: .12;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.ito-gc--all .ito-gc__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.ito-gc--all .ito-gc__eyebrow {
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  color: #fff !important;
  backdrop-filter: blur(2px);
  letter-spacing: .04em;
}
.ito-gc--all .ito-gc__title {
  color: #fff !important;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(166,30,72,.28);
  margin: 0 0 14px !important;
}
.ito-gc--all .ito-gc__sub {
  color: rgba(255,255,255,.92) !important;
  font-size: 1.02rem !important;
  text-shadow: 0 1px 6px rgba(166,30,72,.22);
  max-width: 620px;
}
.ito-gc--all .ito-gc__btn--ghost {
  background: rgba(255,255,255,.16) !important;
  border: 1.5px solid rgba(255,255,255,.72) !important;
  color: #fff !important;
  backdrop-filter: blur(3px);
}
.ito-gc--all .ito-gc__btn--ghost:hover {
  background: rgba(255,255,255,.26) !important;
}
.ito-gc--all .ito-gc__btn--gold {
  box-shadow: 0 10px 24px rgba(214,169,68,.42), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ── 2. Sidebar typography — beat Astra h2 + button defaults ─────────────── */

/* v1.9.42 — Full-bleed /shop/ container, capped at 1800px (v1.9.43 user
   request: don't sprawl on 4K monitors). The base group-classes.css caps
   #primary.ito-gc at max-width:1440px which left empty side margins on
   wide monitors. Raise to 1800px so the page reads premium on 1080p–4K. */
#primary.ito-gc.ito-gc--all,
.ito-gc.ito-gc--all {
  max-width: 1800px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 3vw, 56px) !important;
  padding-right: clamp(20px, 3vw, 56px) !important;
}

/* Layout polish — tighter column, premium gap, fills the full width */
.ito-gc--all .ito-gc__layout {
  grid-template-columns: 234px 1fr !important;
  gap: 26px !important;
  margin-top: 6px !important;
  max-width: 100% !important;
}

/* Sticky sidebar header — Astra's global h2 was hijacking this with a 2rem+
   inherited font-size, wrapping the text to two lines on the narrow column.
   Scoped, high-specificity reset. */
.ito-gc--all .ito-gc__side .ito-gc__side-h,
.ito-gc--all h2.ito-gc__side-h {
  font-family: "Poppins","Montserrat",system-ui,sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #8a4d65 !important;
  margin: 0 0 12px !important;
  padding: 0 4px !important;
  white-space: nowrap;
  border: 0 !important;
}

/* Category list — tight stack */
.ito-gc--all .ito-gc__cats {
  list-style: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.ito-gc--all .ito-gc__cats li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ito-gc--all .ito-gc__cats li::before { content: none !important; }

/* Category button — beat Astra/Woo button defaults that were adding the
   pink-outlined pill look. Force flat, compact, premium-list pattern. */
.ito-gc--all .ito-gc__cats .ito-gc__cat,
.ito-gc--all button.ito-gc__cat {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
  color: #4a3540 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  min-height: 0 !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, padding .15s ease !important;
}
.ito-gc--all .ito-gc__cats .ito-gc__cat:hover,
.ito-gc--all button.ito-gc__cat:hover {
  background: #fff0f5 !important;
  color: #c8154b !important;
}
.ito-gc--all .ito-gc__cats .ito-gc__cat.is-active,
.ito-gc--all button.ito-gc__cat.is-active {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding-left: 14px !important;
  box-shadow: 0 5px 14px rgba(255,56,112,.28) !important;
}

/* "First demo class is free" side card — soft premium look */
.ito-gc--all .ito-gc__side-card {
  margin-top: 18px;
  padding: 18px 16px !important;
  background: linear-gradient(180deg, #fff5fa 0%, #fff 100%) !important;
  border: 1px solid #f7d8e3 !important;
  border-radius: 14px !important;
  text-align: center;
  box-shadow: 0 6px 18px rgba(255,72,120,.08);
}
.ito-gc--all .ito-gc__side-card p {
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #5c1d35 !important;
  line-height: 1.35;
}
.ito-gc--all .ito-gc__side-card .ito-gc__btn--solid {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  box-shadow: 0 6px 16px rgba(255,56,112,.28) !important;
}
.ito-gc--all .ito-gc__side-card .ito-gc__btn--line {
  background: #fff !important;
  color: #5c1d35 !important;
  border: 1.5px solid #f5dbe5 !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}
.ito-gc--all .ito-gc__side-card .ito-gc__btn--line:hover {
  border-color: #ff5d8c !important;
  color: #c8154b !important;
}

/* ── 3. Card refinements — softer chevron, refined CTAs ──────────────────── */

/* Chevron toggle — subtle pink outline circle with prominent arrow.
   v1.9.41: bumped circle 34→40px, arrow 14→22px per user request. */
.ito-gc--all .ito-gc__card .ito-gc__toggle {
  background: #fff0f5 !important;
  color: #ff3870 !important;
  border: 1.5px solid rgba(255,56,112,.30) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background .15s, transform .25s, border-color .15s !important;
}
.ito-gc--all .ito-gc__card .ito-gc__toggle:hover {
  background: #ffdbe6 !important;
  border-color: rgba(255,56,112,.45) !important;
}
.ito-gc--all .ito-gc__card.is-open .ito-gc__toggle {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(255,56,112,.32) !important;
  transform: rotate(180deg);
}

/* Card titles — consistent dark mauve */
.ito-gc--all .ito-gc__card-title a {
  color: #5c1d35 !important;
  text-decoration: none !important;
}
.ito-gc--all .ito-gc__card-title a:hover {
  color: #c8154b !important;
}

/* Card-bottom CTAs — refined pink instead of bright red on the Book Now */
.ito-gc--all .ito-gc__card-cta .ito-gc__btn--solid {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(255,56,112,.28) !important;
}
.ito-gc--all .ito-gc__card-cta .ito-gc__btn--line {
  background: #fff !important;
  color: #5c1d35 !important;
  border: 1.5px solid #f5dbe5 !important;
}
.ito-gc--all .ito-gc__card-cta .ito-gc__btn--line:hover {
  border-color: #ff5d8c !important;
  color: #c8154b !important;
}
.ito-gc--all .ito-gc__card-cta .ito-gc__btn--ghost-d {
  background: #fff !important;
  color: #5c1d35 !important;
  border: 1.5px solid #e9d4dc !important;
}
.ito-gc--all .ito-gc__card-cta .ito-gc__btn--ghost-d:hover {
  border-color: #ff5d8c !important;
  color: #c8154b !important;
}

/* Card body level boxes (Beginner/Intermediate/Advanced) — pink-tinted */
.ito-gc--all .ito-gc__level {
  background: #fdf6f9 !important;
  border-color: #f5dbe5 !important;
}
.ito-gc--all .ito-gc__level-name {
  color: #5c1d35 !important;
}

/* Chip pills — match the pink palette consistently */
.ito-gc--all .ito-gc__chip {
  background: #fdf6f9 !important;
  border-color: #f5dbe5 !important;
  color: #5c1d35 !important;
}
.ito-gc--all .ito-gc__chip--price {
  background: #fff !important;
  border-color: #e9c977 !important;
}

/* About / Key Highlights headings */
.ito-gc--all .ito-gc__about h4,
.ito-gc--all .ito-gc__hi h4 {
  color: #5c1d35 !important;
}

/* ── 4. Below-fold sections (Meet our Teachers, testimonials …) ──────────── */

/* These sections render via ito_cs_render_all() inside the shop <main>.
   They need the carousel layout (.ito-cs-track flex + .ito-cs-cell scroll-snap)
   that lives in course-product.css. functions.php now enqueues that file on
   is_shop().

   v1.9.43: parent .ito-gc--all is now capped at 1800px (centered). These
   sections should match — fill the parent width with consistent padding
   so the carousel arrows always line up with the cards above. No more
   100vw breakout (that was pushing them beyond the 1800px cap). */
.ito-gc--all > .ito-cs,
.ito-gc--all section.ito-cs {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 48px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.ito-gc--all > .ito-cs:first-of-type {
  margin-top: 56px !important;
  padding-top: 32px !important;
  border-top: 1px solid #f1e1e7;
}

/* Carousel wrapper — fill the section, leave room for arrows. */
.ito-gc--all .ito-cs-carwrap {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 56px !important;
  position: relative !important;
}

/* Pin arrows to the edges of the carousel wrapper (which is now viewport-wide). */
.ito-gc--all .ito-cs-arw--prev {
  left: 8px !important;
  right: auto !important;
}
.ito-gc--all .ito-cs-arw--next {
  right: 8px !important;
  left: auto !important;
}

/* Section heading — premium centered with subtle pink underline */
.ito-gc--all .ito-cs .ito-cp-sech {
  font-family: "Poppins","Montserrat",system-ui,sans-serif !important;
  font-size: clamp(1.55rem, 2.8vw, 2.1rem) !important;
  font-weight: 800 !important;
  color: #5c1d35 !important;
  text-align: center !important;
  letter-spacing: -0.01em !important;
  margin: 0 auto 14px !important;
  padding: 0 16px !important;
  max-width: 900px;
  position: relative;
}
.ito-gc--all .ito-cs .ito-cp-sech::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff5d8c, #ff3870);
  border-radius: 2px;
  margin: 12px auto 0;
}
.ito-gc--all .ito-cs .ito-cs-sub {
  text-align: center !important;
  color: #6b556a !important;
  max-width: 780px;
  margin: 0 auto 26px !important;
  font-size: 0.98rem !important;
  line-height: 1.6;
}

/* Arrow buttons — softer pink, not the heavy ITO red */
.ito-gc--all .ito-cs-arw {
  background: linear-gradient(135deg, #ff5d8c, #ff3870) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255,56,112,.32) !important;
}

/* Track padding so cards don't crowd the arrows */
.ito-gc--all .ito-cs-track {
  padding: 12px 8px 20px !important;
}

/* ── 5. Responsiveness ───────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .ito-gc--all .ito-gc__layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ito-gc--all .ito-gc__side {
    position: static !important;
  }
  .ito-gc--all .ito-gc__cats {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .ito-gc--all .ito-gc__cats .ito-gc__cat,
  .ito-gc--all button.ito-gc__cat {
    width: auto !important;
    padding: 8px 14px !important;
  }
  .ito-gc--all .ito-gc__side-card {
    margin-top: 14px;
  }
}
@media (max-width: 640px) {
  .ito-gc--all .ito-gc__title {
    font-size: 1.7rem !important;
  }
  .ito-gc--all .ito-gc__hero {
    padding: 32px 20px !important;
  }
  .ito-gc--all .ito-gc__hero::after {
    font-size: 110px;
    right: -10px;
    opacity: .08;
  }
  .ito-gc--all .ito-gc__hero-cta {
    flex-direction: column;
  }
  .ito-gc--all .ito-gc__hero-cta .ito-gc__btn {
    width: 100%;
  }
}
/* === /shop/ Premium Polish Pass === */


/* =========================================================================
   WinQuest Unified Premium Polish (v1.9.44)

   Apply the /shop/ design pattern across:
     /group-classes/   .ito-gc (NOT .ito-gc--all)
     /free-classes/    .ito-gc--free
     /cart/            .woocommerce-cart
     /checkout/        .woocommerce-checkout
     /my-account/      .woocommerce-account / .ito-acct
     /book-demo/       .ito-book-demo-combined / .ito-demo-booking-page

   Inline <style> blocks for /login/, /wishlist/, /events-workshops/ were
   updated in their respective PHP templates (page-login.php, page-wishlist.php,
   inc/class-landings.php) since inline beats stylesheet specificity.

   All hex values here intentionally match the --wq-* tokens declared at the
   top of this file. We don't use var() in some rules because they need to
   beat group-classes.css (which already declares conflicting colours) and
   relying on cascading var() risked breakage.
   ========================================================================= */

/* ── A. /group-classes/ and /free-classes/ — lighter hero, 1800px cap ───── */

/* Cap the group-classes wrapper. /shop/'s .ito-gc--all already gets its own
   1800px treatment higher up; this rule covers the other .ito-gc variants. */
#primary.ito-gc:not(.ito-gc--all),
.ito-gc:not(.ito-gc--all) {
  max-width: 1800px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 3vw, 56px) !important;
  padding-right: clamp(20px, 3vw, 56px) !important;
  box-sizing: border-box !important;
}

/* Hero gradient — replace dark #5c1d35→#ff1f59 with the lighter rose */
.ito-gc:not(.ito-gc--all) .ito-gc__hero {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%) !important;
  border-radius: 22px !important;
  padding: clamp(38px, 5vw, 56px) clamp(22px, 5vw, 56px) clamp(34px, 4vw, 48px) !important;
  margin: 18px 0 26px !important;
  box-shadow: 0 14px 40px rgba(255,72,120,.20), inset 0 1px 0 rgba(255,255,255,.18) !important;
  position: relative;
  overflow: hidden;
}
.ito-gc:not(.ito-gc--all) .ito-gc__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 26%, rgba(255,255,255,.30) 0%, transparent 44%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.18) 0%, transparent 38%);
  pointer-events: none;
  z-index: 0;
}
.ito-gc:not(.ito-gc--all) .ito-gc__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.ito-gc:not(.ito-gc--all) .ito-gc__title {
  color: #fff !important;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(166,30,72,.28);
}
.ito-gc:not(.ito-gc--all) .ito-gc__sub {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 6px rgba(166,30,72,.22);
}
.ito-gc:not(.ito-gc--all) .ito-gc__eyebrow {
  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  color: #fff !important;
}
.ito-gc:not(.ito-gc--all) .ito-gc__btn--ghost {
  background: rgba(255,255,255,.16) !important;
  border: 1.5px solid rgba(255,255,255,.72) !important;
  color: #fff !important;
}

/* Free-classes hero — pink → green gradient (keep the green accent) */
.ito-gc--free .ito-gc__hero,
.ito-gc--free .ito-gc__hero--free {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 35%, #15803d 100%) !important;
}

/* Free-classes foot CTA */
.ito-gc--free .ito-gc__free-foot {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #15803d 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 40px rgba(255,72,120,.20);
}

/* Sidebar polish (mirror /shop/ — compact uppercase header, refined buttons) */
.ito-gc:not(.ito-gc--all) .ito-gc__side .ito-gc__side-h,
.ito-gc:not(.ito-gc--all) h2.ito-gc__side-h {
  font-family: "Poppins","Montserrat",system-ui,sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #8a4d65 !important;
  margin: 0 0 12px !important;
  white-space: nowrap;
}
.ito-gc:not(.ito-gc--all) .ito-gc__cats {
  list-style: none !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.ito-gc:not(.ito-gc--all) .ito-gc__cats .ito-gc__cat,
.ito-gc:not(.ito-gc--all) button.ito-gc__cat {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-align: left !important;
  color: #4a3540 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .15s, color .15s !important;
}
.ito-gc:not(.ito-gc--all) .ito-gc__cats .ito-gc__cat:hover {
  background: #fff0f5 !important;
  color: #c8154b !important;
}
.ito-gc:not(.ito-gc--all) .ito-gc__cats .ito-gc__cat.is-active {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 5px 14px rgba(255,56,112,.28) !important;
}

/* Side card (Book a Free Demo / See Plans & Pricing) */
.ito-gc:not(.ito-gc--all) .ito-gc__side-card {
  background: linear-gradient(180deg, #fff5fa 0%, #fff 100%) !important;
  border: 1px solid #f7d8e3 !important;
  border-radius: 14px !important;
  padding: 18px 16px !important;
  text-align: center;
  box-shadow: 0 6px 18px rgba(255,72,120,.08);
}
.ito-gc:not(.ito-gc--all) .ito-gc__side-card .ito-gc__btn--solid {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  border: 0 !important;
}
.ito-gc:not(.ito-gc--all) .ito-gc__side-card .ito-gc__btn--line {
  background: #fff !important;
  color: #5c1d35 !important;
  border: 1.5px solid #f5dbe5 !important;
}

/* Card chevron toggle — bigger arrow, refined colours */
.ito-gc:not(.ito-gc--all) .ito-gc__card .ito-gc__toggle {
  background: #fff0f5 !important;
  color: #ff3870 !important;
  border: 1.5px solid rgba(255,56,112,.30) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background .15s, transform .25s, border-color .15s !important;
}
.ito-gc:not(.ito-gc--all) .ito-gc__card.is-open .ito-gc__toggle {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: rotate(180deg);
  box-shadow: 0 4px 12px rgba(255,56,112,.32) !important;
}

/* Card body CTAs */
.ito-gc:not(.ito-gc--all) .ito-gc__card-cta .ito-gc__btn--solid {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(255,56,112,.28) !important;
}

/* Level boxes + chips — pink-tinted */
.ito-gc:not(.ito-gc--all) .ito-gc__level,
.ito-gc:not(.ito-gc--all) .ito-gc__chip {
  background: #fdf6f9 !important;
  border-color: #f5dbe5 !important;
  color: #5c1d35 !important;
}
.ito-gc:not(.ito-gc--all) .ito-gc__chip--price {
  background: #fff !important;
  border-color: #e9c977 !important;
}

/* Free-classes free cards */
.ito-gc--free .ito-gc__free-card {
  border: 1px solid #f1e1e7 !important;
  box-shadow: 0 6px 18px rgba(92,29,53,.06) !important;
}
.ito-gc--free .ito-gc__free-card:hover {
  box-shadow: 0 12px 30px rgba(255,56,112,.15) !important;
}
.ito-gc--free .ito-gc__free-banner {
  background: #fdf6f9 !important;
  border-color: #f1e1e7 !important;
  color: #5c1d35 !important;
}

/* ── B. /cart/, /checkout/, /my-account/ — 1800px cap + lighter accents ── */

/* Bump the WC page-main from 1180px to 1800px and add side breathing room. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main,
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-account #primary {
  max-width: 1800px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 36px clamp(20px, 3vw, 56px) 72px !important;
  background: #fdf8fa !important;
  box-sizing: border-box;
}

/* Cart / Checkout heading — branded with light hero strip on top */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:first-child::before,
.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper:first-child::before,
.woocommerce-cart .wc-block-cart::before,
.woocommerce-checkout .wc-block-checkout::before {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%) !important;
  border-radius: 22px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 14px 40px rgba(255,72,120,.20) !important;
  height: 140px !important;
}

/* Cart form card — wider, premium shadows */
.woocommerce-cart-form {
  max-width: none !important;
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #f1e1e7 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(255,72,120,.08), 0 2px 6px rgba(92,29,53,.05) !important;
}

/* Cart totals — premium card to the right */
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals {
  background: #fff !important;
  border: 1px solid #f1e1e7 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(255,72,120,.10), 0 2px 6px rgba(92,29,53,.06) !important;
  max-width: 560px !important;
}

/* Proceed-to-checkout primary CTA */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-checkout #place_order {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 8px 22px rgba(255,56,112,.32) !important;
  transition: filter .15s, transform .15s, box-shadow .15s !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout #place_order:hover {
  filter: brightness(1.04) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255,56,112,.40) !important;
}

/* My-account hero — light rose, branded */
.ito-acct-hero {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 40px rgba(255,72,120,.20) !important;
  position: relative;
  overflow: hidden;
}
.ito-acct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 26%, rgba(255,255,255,.28) 0%, transparent 44%),
    radial-gradient(circle at 12% 90%, rgba(255,255,255,.10) 0%, transparent 40%);
  pointer-events: none;
}
.ito-acct-hero__in {
  position: relative;
  z-index: 1;
}
.ito-acct-hero__in h1 {
  text-shadow: 0 2px 12px rgba(166,30,72,.28);
}
.ito-acct__grid {
  max-width: 1800px !important;
}

/* My-account nav active state — pink gradient */
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: #fff0f5 !important;
  color: #c8154b !important;
}

/* Empty cart card — premium */
.wp-block-woocommerce-empty-cart-block,
.cart-empty {
  background: #fff !important;
  border: 1px solid #f1e1e7 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(255,72,120,.08) !important;
  padding: 48px clamp(20px, 4vw, 48px) !important;
  max-width: 920px !important;
  margin: 36px auto !important;
  text-align: center;
}
.return-to-shop .button,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  box-shadow: 0 8px 22px rgba(255,56,112,.32) !important;
}

/* ── C. /book-demo/ — premium polish on the existing form ──────────────── */

/* The book-demo page wraps a multi-section form in .ito-book-demo-combined.
   That wrapper had max-width:1200px — bump to a more generous cap.
   The form card itself stays at .ito-demo-booking-shell max-width:720px,
   which is correct for form readability. */
.ito-book-demo-combined {
  max-width: 1800px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 3vw, 56px) 48px !important;
  box-sizing: border-box;
}

/* The wrapping page — pink-tinted background instead of bare grey */
.ito-demo-booking-page {
  background: #fdf8fa !important;
  border-radius: 22px;
  margin: 18px 0;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 56px) clamp(48px, 5vw, 64px) !important;
}

/* Tab strip on the booking form — pink gradient active state */
.ito-bk-radio--demo:checked     ~ .ito-bk-tabs .ito-bk-tab--demo,
.ito-bk-radio--group:checked    ~ .ito-bk-tabs .ito-bk-tab--group,
.ito-bk-radio--workshop:checked ~ .ito-bk-tabs .ito-bk-tab--workshop,
.ito-bk-radio--free:checked     ~ .ito-bk-tabs .ito-bk-tab--free,
.ito-bk-radio--physical:checked ~ .ito-bk-tabs .ito-bk-tab--physical {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255,56,112,.32) !important;
}

/* Submit button — large gradient pill */
.ito-demo-submit {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  box-shadow: 0 8px 22px rgba(255,56,112,.32), inset 0 1px 0 rgba(255,255,255,.2) !important;
  border-radius: 12px !important;
}
.ito-demo-submit:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 28px rgba(255,56,112,.40), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* Section title accent bar — pink */
.ito-demo-section-title {
  border-left-color: #ff3870 !important;
}

/* Input wrap focus — pink ring */
.ito-demo-input-wrap:focus-within {
  border-color: #ff3870 !important;
  box-shadow: 0 0 0 3px rgba(255,56,112,.18) !important;
}
.ito-demo-input-wrap .fa {
  color: #ff3870 !important;
}

/* ── D. Site-wide: any remaining old dark-rose dark-pink gradients ──────── */

/* Catch-all for any stray dark hero gradient on .ito-* / .wq-* pages. */
.ito-bk-hero,
.ito-ct__hero,
.ito-vc__hero,
.wq-events__hero,
.ito-fc__hero {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%) !important;
}

/* === /v1.9.44 Unified Premium Polish === */


/* =========================================================================
   WinQuest section-spacing tightening (v1.9.49)
   The ito-cs-* below-fold sections (Teachers, Achievements, Parents Say,
   Google Reviews, WhatsApp, Latest News, Instagram) were reading as airy
   with 100-150px between each section on /shop/. User asked to reduce
   vertical whitespace globally so the page reads denser/premium.

   Targets every page that renders ito_cs_render_all():
     /shop/, /group-classes/, /free-classes/, single-product
   ========================================================================= */

/* Outer section spacing — was margin-top:48px + padding:46px 0 ≈ 130px
   gap between sections. Compress to ~20px gap (no padding-y on the
   carousel + tighter section margins). */
.ito-gc--all > .ito-cs,
.ito-gc--all section.ito-cs,
.ito-gc:not(.ito-gc--all) .ito-cs,
.ito-gc:not(.ito-gc--all) section.ito-cs,
.ito-coursepg .ito-cs {
  margin-top: 18px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* First section after the catalog needs a little more breathing room. */
.ito-gc--all > .ito-cs:first-of-type,
.ito-gc:not(.ito-gc--all) > .ito-cs:first-of-type {
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid #f1e1e7;
}

/* Carousel wrapper internal padding — was 46px top/bottom. Compress. */
.ito-gc--all .ito-cs-car,
.ito-gc:not(.ito-gc--all) .ito-cs-car {
  padding: 14px 0 !important;
}

/* Section heading top margin — keep tight to the section start. */
.ito-gc--all .ito-cs .ito-cp-sech,
.ito-gc:not(.ito-gc--all) .ito-cs .ito-cp-sech {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Section subhead — compact distance to carousel below. */
.ito-gc--all .ito-cs .ito-cs-sub,
.ito-gc:not(.ito-gc--all) .ito-cs .ito-cs-sub {
  margin: 4px auto 14px !important;
}

/* Carousel track padding — was 12px 8px 20px. Tighten bottom. */
.ito-gc--all .ito-cs-track,
.ito-gc:not(.ito-gc--all) .ito-cs-track {
  padding: 8px 4px 10px !important;
}

/* Google reviews + Instagram embedded blocks — kill their default padding. */
.ito-gc--all .ito-cs-google,
.ito-gc--all .ito-cs-ig,
.ito-gc--all .ito-cs-wa,
.ito-gc:not(.ito-gc--all) .ito-cs-google,
.ito-gc:not(.ito-gc--all) .ito-cs-ig,
.ito-gc:not(.ito-gc--all) .ito-cs-wa {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Latest News blog grid — compact card-to-card gap. */
.ito-gc--all .ito-cs-blog__grid,
.ito-gc:not(.ito-gc--all) .ito-cs-blog__grid {
  margin-top: 14px !important;
  gap: 16px !important;
}

/* === /v1.9.49 Section-spacing tightening === */


/* =========================================================================
   /book-a-free-trial/ premium polish (v1.9.51)

   User showed ITO's /book-demo/ (dark navy form card with prominent perks,
   polished inputs, premium tabs) vs Nuvio's current bare/washed-out light
   version and asked to "upgrade drastically to look like ITO".

   Approach: keep light pink page background (brand palette) but make the
   FORM CARD a dark-rose (#1f0f17 → #2a141f) with white text and pink
   accents — premium feel that mirrors ITO's dark form on light page.

   These rules OVERRIDE the earlier v1.9.38 and v1.9.44 booking-form polish
   to give the form a proper ITO-grade visual treatment.
   ========================================================================= */

/* ── 1. Page wrapper — light pink stays, but ensure 1800px cap + breathing room ── */
.ito-demo-booking-page {
  background: #fdf8fa !important;
  color: #1f1f2e !important;
  border-radius: 22px !important;
  margin: 18px auto !important;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px) clamp(48px, 5vw, 64px) !important;
  max-width: 1280px !important;
  width: auto !important;
  box-sizing: border-box;
}

/* Booking shell — center the dark card */
.ito-demo-booking-shell {
  max-width: 820px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ── 2. Tab strip — premium pill with frosted backdrop ─────────────────── */
.ito-bk {
  background: linear-gradient(135deg, #2a141f 0%, #3a1d2a 100%) !important;
  border-radius: 18px 18px 0 0 !important;
  padding: 8px !important;
  box-shadow: 0 14px 40px rgba(28, 10, 18, .25);
  position: relative;
}

.ito-bk-tabs {
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
}

.ito-bk-tab {
  color: rgba(255, 255, 255, .72) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  text-shadow: none !important;
  transition: background .15s, color .15s !important;
}
.ito-bk-tab:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}

/* Active tab — pink gradient pill with shadow */
.ito-bk-radio--demo:checked     ~ .ito-bk-tabs .ito-bk-tab--demo,
.ito-bk-radio--group:checked    ~ .ito-bk-tabs .ito-bk-tab--group,
.ito-bk-radio--workshop:checked ~ .ito-bk-tabs .ito-bk-tab--workshop,
.ito-bk-radio--free:checked     ~ .ito-bk-tabs .ito-bk-tab--free,
.ito-bk-radio--physical:checked ~ .ito-bk-tabs .ito-bk-tab--physical {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(255, 56, 112, .42) !important;
  font-weight: 700 !important;
}

/* ── 3. Booking card — dark rose with premium shadow ──────────────────── */
.ito-demo-booking-card {
  background: linear-gradient(180deg, #1f0f17 0%, #2a141f 100%) !important;
  color: rgba(255, 255, 255, .90) !important;
  border: 1px solid rgba(255, 56, 112, .20) !important;
  border-top: 0 !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow:
    0 24px 56px rgba(28, 10, 18, .30),
    0 4px 12px rgba(28, 10, 18, .10) !important;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 4vw, 36px) clamp(28px, 4vw, 40px) !important;
  position: relative;
  overflow: hidden;
}

/* Decorative pink glow in top-right corner of the card */
.ito-demo-booking-card::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 56, 112, .22), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.ito-demo-booking-card > * {
  position: relative;
  z-index: 1;
}

/* ── 4. Perks — premium icon cards (Expert Tutors / Flexible Timing / 100% Free) ── */
.ito-demo-perks {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  list-style: none !important;
}
.ito-demo-perk {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 18px 12px !important;
  background: rgba(255, 56, 112, .10) !important;
  border: 1px solid rgba(255, 56, 112, .28) !important;
  border-radius: 14px !important;
  transition: background .15s, border-color .15s, transform .15s !important;
}
.ito-demo-perk:hover {
  background: rgba(255, 56, 112, .16) !important;
  border-color: rgba(255, 56, 112, .42) !important;
  transform: translateY(-2px);
}
.ito-demo-perk-icon {
  font-size: 1.5rem !important;
  color: #ff5d8c !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 56, 112, .18);
  border: 1px solid rgba(255, 56, 112, .35);
}
.ito-demo-perk-title {
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* ── 5. Heading + subtitle ─────────────────────────────────────────────── */
.ito-demo-booking-head {
  text-align: center !important;
  margin: 0 0 32px !important;
}
.ito-demo-booking-title {
  color: #fff !important;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif !important;
  font-size: clamp(1.6rem, 3vw, 2.1rem) !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 2px 12px rgba(166, 30, 72, .28);
}
.ito-demo-booking-subtitle {
  color: rgba(255, 255, 255, .72) !important;
  font-size: 15px !important;
  margin: 0 !important;
  max-width: 480px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 6. Section titles (Parent's information / Student's / Course) ────── */
.ito-demo-section {
  margin-bottom: 28px !important;
}
.ito-demo-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  margin: 0 0 20px !important;
  background: rgba(255, 255, 255, .06) !important;
  border-left: 4px solid #ff3870 !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.ito-demo-section-title .fa {
  color: #ff5d8c !important;
  font-size: 16px;
}

/* ── 7. Form inputs — premium dark theme with pink focus ──────────────── */
.ito-demo-field label {
  color: rgba(255, 255, 255, .80) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 8px;
}
.ito-demo-req {
  color: #ff7da0 !important;
  font-weight: 800 !important;
}
.ito-demo-field-hint {
  color: rgba(255, 255, 255, .45) !important;
  font-size: 12px !important;
}

/* Input wraps — dark with subtle border + icon */
.ito-demo-booking-card .ito-demo-input-wrap {
  background: rgba(255, 255, 255, .04) !important;
  border: 1.5px solid rgba(255, 255, 255, .10) !important;
  border-radius: 11px !important;
  padding: 0 14px !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
}
.ito-demo-booking-card .ito-demo-input-wrap:focus-within {
  background: rgba(255, 255, 255, .07) !important;
  border-color: #ff5d8c !important;
  box-shadow: 0 0 0 3px rgba(255, 56, 112, .22) !important;
}
.ito-demo-booking-card .ito-demo-input-wrap .fa {
  color: #ff5d8c !important;
  font-size: 15px !important;
  flex-shrink: 0;
}

/* Input fields themselves */
.ito-demo-booking-card .ito-demo-input-wrap input,
.ito-demo-booking-card .ito-demo-select,
.ito-demo-booking-card input[type="text"],
.ito-demo-booking-card input[type="email"],
.ito-demo-booking-card input[type="tel"],
.ito-demo-booking-card input[type="number"],
.ito-demo-booking-card select,
.ito-demo-booking-card textarea {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  padding: 13px 0 !important;
  font-size: 15px !important;
  outline: none !important;
}
.ito-demo-booking-card .ito-demo-input-wrap input::placeholder,
.ito-demo-booking-card input::placeholder,
.ito-demo-booking-card textarea::placeholder {
  color: rgba(255, 255, 255, .38) !important;
}

/* Phone country selector — same dark theme */
.ito-demo-booking-card .ito-demo-phone-cc {
  background: rgba(255, 255, 255, .04) !important;
  border: 1.5px solid rgba(255, 255, 255, .10) !important;
  color: #fff !important;
  border-radius: 11px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
}

/* Dropdown options need explicit dark bg (browsers don't inherit on <option>) */
.ito-demo-booking-card select option,
.ito-demo-select option,
.ito-demo-phone-cc option {
  background: #2a141f !important;
  color: #fff !important;
}

/* ── 8. Consent block — softer styling on dark bg ──────────────────────── */
.ito-demo-consent {
  margin: 16px 0 24px !important;
  padding: 18px 20px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 12px !important;
}
.ito-demo-consent-label {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.ito-demo-consent-label a {
  color: #ff7da0 !important;
  text-decoration: underline !important;
}
.ito-demo-consent-label a:hover {
  color: #ff5d8c !important;
}
.ito-demo-consent-label input[type="checkbox"] {
  accent-color: #ff3870 !important;
  width: 18px !important;
  height: 18px !important;
}

/* ── 9. Submit button — premium gradient pill ──────────────────────────── */
.ito-demo-actions {
  text-align: center !important;
  margin-top: 8px !important;
}
.ito-demo-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 17px 28px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow:
    0 12px 30px rgba(255, 56, 112, .42),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  cursor: pointer;
  transition: filter .15s, transform .15s, box-shadow .15s !important;
}
.ito-demo-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(255, 56, 112, .52),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.ito-demo-trust {
  color: rgba(255, 255, 255, .55) !important;
  font-size: 12px !important;
  margin: 14px 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ito-demo-trust .fa {
  color: #ff5d8c !important;
}

/* ── 10. Alerts (success / error) inside the dark card ──────────────── */
.ito-demo-booking-card .ito-demo-alert {
  border-radius: 11px !important;
  padding: 13px 16px !important;
  font-size: 14px !important;
  margin: 0 0 22px !important;
  font-weight: 600;
}
.ito-demo-booking-card .ito-demo-alert-success {
  background: rgba(16, 185, 129, .14) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, .38) !important;
}
.ito-demo-booking-card .ito-demo-alert-error {
  background: rgba(239, 68, 68, .14) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, .35) !important;
}

/* ── 11. Mobile responsiveness ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .ito-demo-perks {
    grid-template-columns: 1fr !important;
  }
  .ito-demo-booking-page {
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .ito-demo-booking-card {
    padding: 22px 18px !important;
  }
  .ito-bk-tab {
    flex: 1 1 45% !important;
    font-size: 12px !important;
    padding: 9px 8px !important;
  }
}
@media (max-width: 420px) {
  .ito-bk-tab {
    flex: 1 1 100% !important;
  }
}

/* === /v1.9.51 booking-form polish === */


/* =========================================================================
   /book-a-free-trial/ LIGHT-THEME polish (v1.9.52 — REPLACES v1.9.51)

   User: "theme is too dark, and the text except the white ones are not
   aligning. The theme should be dark pink and light pink combination only
   as in our courses and accordingly the text should be aligned."

   Switch the whole form back to the light pink + dark mauve combo the rest
   of the site uses. Same compact, premium feel as /shop/ / /group-classes/.
   Also compress the tab strip + perks bar to a single line each and
   tighten internal spacing so the form starts immediately.

   These rules use higher specificity (.ito-demo-booking-page-scoped) so
   they win over v1.9.38, v1.9.44 AND v1.9.51 without needing to delete the
   earlier blocks (which stay for paranoia).
   ========================================================================= */

/* ── 1. Page wrapper — soft pink-tinted off-white ──────────────────────── */
.ito-demo-booking-page {
  background: #fdf8fa !important;
  color: #1f1f2e !important;
  border-radius: 22px !important;
  margin: 14px auto !important;
  padding: clamp(14px, 2vw, 24px) clamp(12px, 2vw, 24px) clamp(20px, 3vw, 32px) !important;
  max-width: 1100px !important;
  width: auto !important;
  box-sizing: border-box;
  border: 1px solid #f1e1e7;
  box-shadow: 0 6px 18px rgba(255,72,120,.06);
}

.ito-demo-booking-shell {
  max-width: 880px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ── 2. Tab strip — compact single-line pill, light theme ──────────────── */
.ito-bk {
  background: #fff !important;
  border-radius: 12px !important;
  padding: 5px !important;
  border: 1px solid #f1e1e7 !important;
  box-shadow: 0 4px 12px rgba(255,72,120,.06) !important;
  margin-bottom: 14px;
}
.ito-bk-tabs {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.ito-bk-tabs::-webkit-scrollbar { display: none; }
.ito-bk-tab {
  flex: 1 1 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b556a !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  transition: background .15s, color .15s !important;
  cursor: pointer;
  user-select: none;
}
.ito-bk-tab:hover {
  background: #fff0f5 !important;
  color: #c8154b !important;
}
.ito-bk-radio--demo:checked     ~ .ito-bk-tabs .ito-bk-tab--demo,
.ito-bk-radio--group:checked    ~ .ito-bk-tabs .ito-bk-tab--group,
.ito-bk-radio--workshop:checked ~ .ito-bk-tabs .ito-bk-tab--workshop,
.ito-bk-radio--free:checked     ~ .ito-bk-tabs .ito-bk-tab--free {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(255,56,112,.28) !important;
}

/* ── 3. Booking card — light pink, dark mauve text ─────────────────────── */
.ito-demo-booking-card {
  background: #ffffff !important;
  color: #1f1f2e !important;
  border: 1px solid #f1e1e7 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(255,72,120,.08), 0 2px 6px rgba(92,29,53,.04) !important;
  padding: clamp(18px, 2.5vw, 28px) clamp(16px, 2.5vw, 26px) clamp(20px, 2.5vw, 28px) !important;
  position: relative;
  overflow: hidden;
}
.ito-demo-booking-card::before { content: none !important; }

/* ── 4. Perks — compact single-line row ────────────────────────────────── */
.ito-demo-perks {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  list-style: none !important;
}
.ito-demo-perk {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #fff0f5 !important;
  border: 1px solid #f5dbe5 !important;
  border-radius: 10px !important;
  transition: background .15s, border-color .15s !important;
}
.ito-demo-perk:hover {
  background: #ffdbe6 !important;
  border-color: #ff7da0 !important;
}
.ito-demo-perk-icon {
  font-size: 1rem !important;
  color: #ff3870 !important;
  background: transparent !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
}
.ito-demo-perk-title {
  color: #5c1d35 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* ── 5. Booking head — compact title + subtitle ────────────────────────── */
.ito-demo-booking-head {
  text-align: center !important;
  margin: 0 0 16px !important;
}
.ito-demo-booking-title {
  color: #5c1d35 !important;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif !important;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}
.ito-demo-booking-subtitle {
  color: #6b556a !important;
  font-size: 14px !important;
  margin: 0 !important;
  max-width: 460px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 6. Section titles — compact pink-tinted pill with mauve text ─────── */
.ito-demo-section {
  margin-bottom: 14px !important;
}
.ito-demo-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  margin: 0 0 10px !important;
  background: #fff0f5 !important;
  border: 1px solid #f5dbe5 !important;
  border-left: 3px solid #ff3870 !important;
  border-radius: 8px !important;
  color: #5c1d35 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.ito-demo-section-title .fa {
  color: #ff3870 !important;
  font-size: 14px;
}

/* ── 7. Form grid — tighter gap ────────────────────────────────────────── */
.ito-demo-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
}
.ito-demo-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.ito-demo-field-full {
  grid-column: 1 / -1 !important;
}

/* ── 8. Field labels + inputs — light theme, dark mauve text ───────────── */
.ito-demo-field label {
  color: #5c1d35 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
}
.ito-demo-req {
  color: #ff3870 !important;
  font-weight: 800 !important;
}
.ito-demo-field-hint {
  color: #94739a !important;
  font-size: 11.5px !important;
  margin-top: 2px !important;
}

/* Input wrapper — light theme */
.ito-demo-booking-card .ito-demo-input-wrap {
  background: #ffffff !important;
  border: 1.5px solid #f1e1e7 !important;
  border-radius: 9px !important;
  padding: 0 12px !important;
  transition: border-color .15s, box-shadow .15s !important;
  min-height: 40px;
}
.ito-demo-booking-card .ito-demo-input-wrap:focus-within {
  border-color: #ff5d8c !important;
  box-shadow: 0 0 0 3px rgba(255, 56, 112, .14) !important;
}
.ito-demo-booking-card .ito-demo-input-wrap .fa {
  color: #ff5d8c !important;
  font-size: 13px !important;
  flex-shrink: 0;
}

/* Inputs themselves — dark mauve text on white */
.ito-demo-booking-card .ito-demo-input-wrap input,
.ito-demo-booking-card .ito-demo-select,
.ito-demo-booking-card input[type="text"],
.ito-demo-booking-card input[type="email"],
.ito-demo-booking-card input[type="tel"],
.ito-demo-booking-card input[type="number"],
.ito-demo-booking-card select,
.ito-demo-booking-card textarea {
  background: transparent !important;
  color: #1f1f2e !important;
  border: 0 !important;
  padding: 9px 0 !important;
  font-size: 14px !important;
  outline: none !important;
  font-family: inherit !important;
}
.ito-demo-booking-card .ito-demo-input-wrap input::placeholder,
.ito-demo-booking-card input::placeholder,
.ito-demo-booking-card textarea::placeholder {
  color: #b59cab !important;
}

/* Phone country selector — same light treatment */
.ito-demo-booking-card .ito-demo-phone-cc {
  background: #ffffff !important;
  border: 1.5px solid #f1e1e7 !important;
  color: #5c1d35 !important;
  border-radius: 9px !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  flex: 0 0 min(40%, 200px) !important;
}

/* Native dropdown options — white bg, dark text */
.ito-demo-booking-card select option,
.ito-demo-select option,
.ito-demo-phone-cc option {
  background: #ffffff !important;
  color: #1f1f2e !important;
}

/* Standalone select (course) wrapper */
.ito-demo-booking-card .ito-demo-select-wrap {
  padding: 0 8px 0 12px !important;
}
.ito-demo-booking-card .ito-demo-select-wrap .ito-demo-select {
  padding: 9px 6px 9px 0 !important;
  cursor: pointer;
}

/* ── 9. Consent — compact, soft pink card ──────────────────────────────── */
.ito-demo-consent {
  margin: 10px 0 14px !important;
  padding: 10px 14px !important;
  background: #fdf6f9 !important;
  border: 1px solid #f1e1e7 !important;
  border-radius: 9px !important;
}
.ito-demo-consent-label {
  color: #4a3540 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  gap: 9px !important;
}
.ito-demo-consent-label + .ito-demo-consent-label {
  margin-top: 8px !important;
}
.ito-demo-consent-label a {
  color: #ff3870 !important;
  text-decoration: underline !important;
}
.ito-demo-consent-label a:hover {
  color: #c8154b !important;
}
.ito-demo-consent-label input[type="checkbox"] {
  accent-color: #ff3870 !important;
  width: 16px !important;
  height: 16px !important;
}

/* ── 10. Submit button — gradient pill, prominent ──────────────────────── */
.ito-demo-actions {
  text-align: center !important;
  margin-top: 4px !important;
}
.ito-demo-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 13px 22px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(255, 56, 112, .32),
              inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  cursor: pointer;
  transition: filter .15s, transform .15s, box-shadow .15s !important;
}
.ito-demo-submit:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255, 56, 112, .42),
              inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.ito-demo-trust {
  color: #94739a !important;
  font-size: 11.5px !important;
  margin: 8px 0 0 !important;
}
.ito-demo-trust .fa {
  color: #ff3870 !important;
}

/* ── 11. Alerts — soft */
.ito-demo-booking-card .ito-demo-alert {
  border-radius: 9px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  margin: 0 0 12px !important;
  font-weight: 600;
}
.ito-demo-booking-card .ito-demo-alert-success {
  background: #dcfce7 !important;
  color: #166534 !important;
  border: 1px solid #86efac !important;
}
.ito-demo-booking-card .ito-demo-alert-error {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

/* ── 12. Mobile — keep perks on one row, tabs scroll horizontally ──────── */
@media (max-width: 640px) {
  .ito-demo-perk-title {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
  .ito-demo-perk {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .ito-demo-grid {
    grid-template-columns: 1fr !important;
  }
  .ito-demo-booking-page {
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .ito-demo-booking-card {
    padding: 16px 14px !important;
  }
  .ito-demo-phone-row {
    flex-direction: column !important;
  }
  .ito-demo-phone-cc {
    flex-basis: auto !important;
    width: 100% !important;
  }
}
@media (max-width: 420px) {
  .ito-demo-perks {
    grid-template-columns: repeat(3, 1fr) !important; /* keep single row */
  }
  .ito-demo-perk-icon { display: none !important; }
}

/* ── 13. Footer columns — Quick Links / Categories / Popular Courses
        parallel on mobile (user: "can be squeezed parallely in mobile
        and other versions"). Targets Elementor footer widget grid. ──── */
@media (max-width: 767px) {
  body footer .elementor-row > .elementor-column-wrap,
  body footer.elementor-section .elementor-row > .elementor-column,
  body footer .elementor-container.elementor-column-gap-default > .elementor-column.elementor-col-25,
  body footer .e-con-inner > .e-con,
  body footer .e-con > .e-con-inner > .e-con {
    flex: 1 1 30% !important;
    width: 30% !important;
    max-width: 33.33% !important;
    min-width: 0 !important;
  }
  /* Compact footer column titles + lists */
  body footer .elementor-widget-heading h2,
  body footer .elementor-widget-heading h3,
  body footer h2.elementor-heading-title,
  body footer h3.elementor-heading-title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  body footer .elementor-icon-list-item,
  body footer .elementor-icon-list-text,
  body footer ul li,
  body footer ul li a {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }
}

/* === /v1.9.52 booking-form light theme + per-tab data + GMT === */


/* =========================================================================
   /book-a-free-trial/ — 2-col layout + excitement panel (v1.9.53)

   User: "The tab within tab structure not looking nice, can we do some
   better designing like Darker to lighter shade. Also the outermost layer
   can be redesigned to little darker so that overll it looks nice and also
   it can be less thick. We need to add exitement in this page for anybody
   to fill the form... we can push this form towards left keeping
   sufficient margin and in the right side we can add some exitement
   panel including Parent testimonial, videos for quick review."

   Three changes:
   1. 2-column layout: form left, sticky excitement panel right.
   2. Section headers (Parent's info / Student's / Course) and tab strip
      now use darker-to-lighter pink gradient for visual hierarchy and
      excitement.
   3. Outer wrapper slightly darker pink tint, less thick padding.
   ========================================================================= */

/* ── 1. Outer wrapper — soft pink gradient bg, thinner padding ─────────── */
/* v1.9.54: bumped max-width 1320px → 1800px per user request (matches the
   canonical --wq-page-max we apply everywhere else). */
.ito-demo-booking-page {
  background: linear-gradient(135deg, #fcdee9 0%, #fdf0f5 50%, #fef6f9 100%) !important;
  border: 1px solid #f5c2d2 !important;
  padding: clamp(12px, 1.8vw, 24px) clamp(12px, 2vw, 32px) clamp(16px, 2vw, 28px) !important;
  max-width: 1800px !important;
  box-shadow: 0 8px 24px rgba(255, 56, 112, .10), inset 0 0 0 1px rgba(255, 255, 255, .5) !important;
}

/* ── 2. 2-column layout: form (1fr) + wider excitement panel ──── */
/* v1.9.54: panel widened 320→380. v1.10.4: 380→460 so the form is a
   touch narrower and the right column gets more breathing room
   (user request — "form too wide, give more space to right column"). */
.ito-demo-booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 32px;
  align-items: start;
  max-width: 1800px;
  margin: 0 auto;
}

/* Override the v1.9.52 880px shell constraint — it's now grid-bound */
.ito-demo-booking-layout > .ito-demo-booking-shell {
  max-width: none !important;
  margin: 0 !important;
  min-width: 0; /* allow shrink inside grid */
}

/* ── 3. Tab strip — subtle dark-to-light gradient bg ──────────────────── */
.ito-bk {
  background: linear-gradient(135deg, #ffe4ec 0%, #fff5f9 50%, #ffffff 100%) !important;
  border: 1px solid #f5c2d2 !important;
  padding: 4px !important;
  box-shadow: 0 2px 6px rgba(255, 56, 112, .08) !important;
}

/* ── 4. Booking card — keep white but with a subtle pink-to-white top gradient bar ── */
.ito-demo-booking-card {
  background: #ffffff !important;
  border: 1px solid #f5c2d2 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(255, 56, 112, .10), 0 1px 3px rgba(92, 29, 53, .04) !important;
  padding: clamp(16px, 2.2vw, 24px) clamp(14px, 2.2vw, 22px) clamp(18px, 2.2vw, 26px) !important;
  position: relative;
  overflow: hidden;
}
/* Subtle top accent bar — dark to light pink */
.ito-demo-booking-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #b91d4e 0%, #ff3870 35%, #ff7da0 70%, #ffd1de 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── 5. Section titles — dark-to-light gradient pill (the user-asked "tab in tab" look) ── */
.ito-demo-section-title {
  background: linear-gradient(90deg, #b91d4e 0%, #ff3870 25%, #ff7da0 65%, #ffd1de 100%) !important;
  border: 0 !important;
  border-left: 0 !important;
  color: #fff !important;
  padding: 10px 16px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 4px rgba(166, 30, 72, .28) !important;
  box-shadow: 0 4px 10px rgba(255, 56, 112, .18) !important;
}
.ito-demo-section-title .fa {
  color: #fff !important;
  font-size: 15px !important;
  filter: drop-shadow(0 1px 2px rgba(166, 30, 72, .35));
}

/* ── 6. Excitement panel — sticky right column ─────────────────────────── */
.ito-demo-excitement {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.ito-demo-ex-card {
  background: #fff;
  border: 1px solid #f5c2d2;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(255, 72, 120, .08);
}

/* Trust card — full pink-gradient with white text */
.ito-demo-ex-trust {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(255, 72, 120, .22), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  position: relative;
  overflow: hidden;
}
.ito-demo-ex-trust::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
  pointer-events: none;
}
.ito-demo-ex-trust h3 {
  color: #fff !important;
  margin: 0 0 12px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 8px rgba(166, 30, 72, .32);
  position: relative;
}
.ito-demo-ex-trust ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}
.ito-demo-ex-trust li {
  color: rgba(255, 255, 255, .94) !important;
  font-size: 12.5px !important;
  padding: 5px 0 !important;
  line-height: 1.4 !important;
  text-shadow: 0 1px 4px rgba(166, 30, 72, .22);
}

/* Stats grid — 3 columns */
.ito-demo-ex-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 14px 10px !important;
  background: linear-gradient(180deg, #fff5fa 0%, #ffffff 100%) !important;
}
.ito-demo-ex-stats > div {
  text-align: center;
  padding: 4px;
}
.ito-demo-ex-stats strong {
  display: block;
  color: #5c1d35;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.ito-demo-ex-stats sup {
  color: #ff3870;
  font-size: 14px;
  font-weight: 700;
}
.ito-demo-ex-stats span {
  display: block;
  color: #6b556a;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 4px;
}

/* Video preview card */
.ito-demo-ex-video h3 {
  color: #5c1d35;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.ito-demo-ex-video-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #fff0f5;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 12px rgba(255, 56, 112, .15);
}
.ito-demo-ex-video-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 56, 112, .28);
}
.ito-demo-ex-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  background: rgba(0, 0, 0, .25);
  transition: background .15s;
}
.ito-demo-ex-video-thumb:hover .ito-demo-ex-play {
  background: rgba(0, 0, 0, .12);
}
.ito-demo-ex-play::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5d8c, #ff3870);
  box-shadow: 0 6px 18px rgba(255, 56, 112, .42);
  position: absolute;
}
.ito-demo-ex-play {
  font-size: 0; /* hide the actual ▶ char, the ::before disc replaces it visually */
}
.ito-demo-ex-play::after {
  content: "▶";
  font-size: 16px;
  color: #fff;
  position: relative;
  z-index: 1;
  margin-left: 3px; /* visual center of the triangle */
}
.ito-demo-ex-video p {
  color: #4a3540 !important;
  font-size: 12.5px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  font-weight: 600;
}

/* Testimonial cards */
.ito-demo-ex-testimonial {
  background: linear-gradient(180deg, #fff5fa 0%, #fff 100%) !important;
}
.ito-demo-ex-testimonial--alt {
  background: linear-gradient(180deg, #fff 0%, #fff5fa 100%) !important;
}
.ito-demo-ex-quote {
  color: #5c1d35 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  margin: 0 0 10px !important;
}
.ito-demo-ex-author {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}
.ito-demo-ex-author strong {
  color: #5c1d35 !important;
  font-size: 12px !important;
  display: inline-block;
  line-height: 1.2;
}
.ito-demo-ex-author em {
  color: #94739a !important;
  font-size: 11px !important;
  font-style: normal !important;
}
.ito-demo-ex-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5d8c, #ff3870);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(255, 56, 112, .25);
}

/* WhatsApp CTA card */
.ito-demo-ex-cta {
  background: linear-gradient(135deg, #fff5fa 0%, #ffe4ec 100%) !important;
  text-align: center;
}
.ito-demo-ex-cta p {
  margin: 0 0 6px !important;
  color: #5c1d35 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}
.ito-demo-ex-cta a {
  color: #ff3870 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  letter-spacing: 0.01em;
}
.ito-demo-ex-cta a:hover {
  color: #c8154b !important;
}

/* ── 7. Mobile: panel stacks below form ────────────────────────────────── */
/* v1.10.4: breakpoint bumped 980→1080 to match the wider (460px) panel. */
@media (max-width: 1080px) {
  .ito-demo-booking-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .ito-demo-excitement {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .ito-demo-ex-card {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }
  .ito-demo-ex-trust,
  .ito-demo-ex-video {
    flex: 1 1 100% !important;
  }
}
@media (max-width: 560px) {
  .ito-demo-excitement {
    flex-direction: column !important;
  }
  .ito-demo-ex-card {
    flex: 1 1 100% !important;
  }
}

/* === /v1.9.53 booking-form 2-col + excitement panel === */


/* =========================================================================
   Footer columns parallel on mobile (v1.9.55)

   User screenshot of mobile footer: "Quick Links / Categories / Popular
   Courses ... this part can also be put parallel to each other in shorter
   form in responsive version".

   The v1.9.52 attempt missed because nuvio's footer has no <footer>
   element — it's all Elementor e-con flex containers. Inspected live
   markup: the common parent container of the 3 columns is
   .elementor-element-55a8e7fe, with children .elementor-element-54ae95a
   (Quick Links), .elementor-element-8befedb (Categories),
   .elementor-element-bbd13bd (Popular Courses). Target those IDs
   directly for a precise fix.
   ========================================================================= */

/* v1.9.60: switched grid → flex-wrap because the footer parent contains
   MORE than just the 3 columns — there's also the pink WinQuest contact
   card (and on some pages, social/copyright sub-rows). Grid made all
   siblings grid cells, so the pink card became a 4th cell wrapped to row
   2 left-aligned and squished. flex-wrap lets the 3 columns share 96% of
   row 1, and any other sibling (pink card, social, copyright) flows
   naturally to its own row. Also added margin-top to the parent so the
   footer doesn't kiss the page content above it. */
@media (max-width: 1024px) {
  /* Parent that contains all 3 footer columns: flex-row-wrap, leave room above. */
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd),
  /* Wrapped variant (homepage has e-con-inner between parent and children) */
  body *:has(> .e-con-inner > .elementor-element-54ae95a):has(> .e-con-inner > .elementor-element-8befedb):has(> .e-con-inner > .elementor-element-bbd13bd) > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-top: 24px !important;
  }

  /* Each of the 3 link columns claims exactly ~32% (3 × 32% = 96%, fits on
     one row). Other siblings (pink card, social, copyright) keep their
     natural sizing and wrap to row 2. */
  body .elementor-element.elementor-element-54ae95a,
  body .elementor-element.elementor-element-8befedb,
  body .elementor-element.elementor-element-bbd13bd {
    flex: 0 0 32% !important;
    width: 32% !important;
    max-width: 32% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    --container-widget-width: 32% !important;
  }
  /* Pink contact card + any other sibling wraps to its own full-width row */
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    --container-widget-width: 100% !important;
  }

  /* Compact headings — 11px tracked uppercase. */
  body .elementor-element.elementor-element-54ae95a .elementor-heading-title,
  body .elementor-element.elementor-element-8befedb .elementor-heading-title,
  body .elementor-element.elementor-element-bbd13bd .elementor-heading-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
  }

  /* Tight list items — 9.5px, no padding, no chevron icon. */
  body .elementor-element.elementor-element-54ae95a .elementor-icon-list-items,
  body .elementor-element.elementor-element-8befedb .elementor-icon-list-items,
  body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-items {
    margin: 0 !important;
    padding: 0 !important;
  }
  body .elementor-element.elementor-element-54ae95a .elementor-icon-list-item,
  body .elementor-element.elementor-element-8befedb .elementor-icon-list-item,
  body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-item {
    margin: 0 !important;
    padding: 1px 0 !important;
    line-height: 1.2 !important;
  }
  body .elementor-element.elementor-element-54ae95a .elementor-icon-list-text,
  body .elementor-element.elementor-element-8befedb .elementor-icon-list-text,
  body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-text {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    padding-left: 0 !important;
  }
  /* Hide the chevron icons entirely — they waste horizontal space. */
  body .elementor-element.elementor-element-54ae95a .elementor-icon-list-icon,
  body .elementor-element.elementor-element-8befedb .elementor-icon-list-icon,
  body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-icon {
    display: none !important;
  }
}

/* === /v1.9.57 footer 3-up high-specificity + ultra-compact === */


/* =========================================================================
   /tutors/ — Become a Teacher right-side panel (v1.9.61)

   User: add the entire ITO "Become a Teacher" section on the right side
   of the Tutors page, shift teacher details a little to the left.

   Layout:
     ┌────────────────────────────┬─────────────────┐
     │ Tutor grid (left, fluid)   │ Become Teacher  │
     │  - filter bar               │  - Why teach    │
     │  - 12 tutor cards           │  - Stats        │
     │  - pagination               │  - Apply form   │
     └────────────────────────────┴─────────────────┘
   ========================================================================= */

/* v1.9.70 — .ito-tutors-layout retired from /tutors/ since the Become a
   Teacher panel moved to the standalone /become-a-teacher/ page reached
   via Contact Us dropdown. Rule kept harmless in case any other page
   later wants the 2-col tutor layout. */
.ito-tutors-layout {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 18px;
}
.ito-tutors-main {
  min-width: 0;
}

@media (max-width: 1024px) {
  .ito-tutors-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ── Become a Teacher panel ─────────────────────────────────────────────── */
.nuvio-bt {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 1024px) {
  .nuvio-bt {
    position: static;
  }
}

/* Why teach card — pink gradient with white text */
.nuvio-bt__why {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%);
  color: #fff;
  border-radius: 14px;
  padding: 20px 20px 16px;
  box-shadow: 0 12px 28px rgba(255,72,120,.20), inset 0 1px 0 rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}
.nuvio-bt__why::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
  pointer-events: none;
}
.nuvio-bt__why-h {
  position: relative;
  color: #fff !important;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
  text-shadow: 0 2px 8px rgba(166,30,72,.30);
}
.nuvio-bt__why-list {
  position: relative;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nuvio-bt__why-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.nuvio-bt__why-ic {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.nuvio-bt__why-list li div { display: flex; flex-direction: column; }
.nuvio-bt__why-list li strong {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 1px;
}
.nuvio-bt__why-list li span {
  color: rgba(255,255,255,.85);
  font-size: 11.5px;
  line-height: 1.4;
}

.nuvio-bt__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(255,255,255,.18);
  margin-top: 6px;
}
.nuvio-bt__stats > div { text-align: center; }
.nuvio-bt__stats strong {
  display: block;
  color: #fff;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.nuvio-bt__stats sup {
  color: #ffd1de;
  font-size: 11px;
  font-weight: 700;
}
.nuvio-bt__stats span {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Apply form card — white with pink accents */
.nuvio-bt__apply {
  background: #fff;
  border: 1px solid #f1e1e7;
  border-radius: 14px;
  padding: 18px 18px 22px;
  box-shadow: 0 8px 24px rgba(255,72,120,.10);
}
.nuvio-bt__apply-h {
  color: #5c1d35 !important;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
}

.nuvio-bt__alert {
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.4;
}
.nuvio-bt__alert--ok {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.nuvio-bt__alert--err {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.nuvio-bt__form { display: flex; flex-direction: column; gap: 10px; }
.nuvio-bt__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nuvio-bt__field { display: flex; flex-direction: column; gap: 4px; }
.nuvio-bt__field span {
  color: #5c1d35;
  font-size: 12px;
  font-weight: 600;
}
.nuvio-bt__field span small {
  color: #94739a;
  font-weight: 400;
  margin-left: 4px;
}
.nuvio-bt__field em {
  color: #ff3870;
  font-style: normal;
  font-weight: 800;
}
.nuvio-bt__field input[type="text"],
.nuvio-bt__field input[type="email"],
.nuvio-bt__field input[type="tel"],
.nuvio-bt__field input[type="url"],
.nuvio-bt__field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #f1e1e7;
  border-radius: 9px;
  background: #fff;
  color: #1f1f2e;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.nuvio-bt__field textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.45;
}
.nuvio-bt__field input:focus,
.nuvio-bt__field textarea:focus {
  border-color: #ff5d8c;
  box-shadow: 0 0 0 3px rgba(255,56,112,.14);
}
.nuvio-bt__field input[type="file"] {
  padding: 6px 0;
  font-size: 12px;
  color: #4a3540;
}
.nuvio-bt__field input::placeholder,
.nuvio-bt__field textarea::placeholder { color: #b59cab; }
.nuvio-bt__hint {
  display: block;
  color: #94739a;
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 0;
}
/* Consent box — v1.9.64: softened. "Terms & Privacy Policy" link no longer
   underlined+bold (which read as aggressive on a small panel). Now medium
   weight rose link with subtle hover. */
.nuvio-bt__consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 11px 13px;
  background: linear-gradient(180deg, #fff5fa 0%, #fff 100%);
  border: 1px solid #f1e1e7;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #4a3540;
  cursor: pointer;
  font-weight: 400;
}
.nuvio-bt__consent input[type="checkbox"] {
  accent-color: #ff3870;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.nuvio-bt__consent a {
  color: #c8154b;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(200, 21, 75, .25);
  transition: color .15s, border-color .15s;
}
.nuvio-bt__consent a:hover {
  color: #ff3870;
  border-bottom-color: rgba(255, 56, 112, .55);
}

/* "Applying For" fieldset — v1.9.64: softened from heavy bold to an
   uppercase tracked muted label (matches the section-sub-label pattern
   used across /shop/ / /group-classes/), and gave the wrapper a subtle
   pink-tinted gradient surface from --wq-bg-soft → #fff. */
.nuvio-bt__checks {
  border: 1px solid #f1e1e7;
  border-radius: 10px;
  padding: 14px 14px 10px;
  background: linear-gradient(180deg, #fff5fa 0%, #fff 100%);
  margin: 0;
}
.nuvio-bt__checks legend {
  color: #8a4d65;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0 6px;
  margin-bottom: 4px;
}
.nuvio-bt__checks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 6px;
}
.nuvio-bt__check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #4a3540;
  cursor: pointer;
  line-height: 1.35;
}
.nuvio-bt__check input[type="checkbox"] {
  accent-color: #ff3870;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.nuvio-bt__submit {
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255,56,112,.32);
  transition: filter .15s, transform .15s, box-shadow .15s;
  margin-top: 4px;
}
.nuvio-bt__submit:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(255,56,112,.42);
}

.nuvio-bt__legal {
  color: #94739a;
  font-size: 10.5px;
  text-align: center;
  margin: 6px 0 0;
  line-height: 1.4;
}
.nuvio-bt__legal a {
  color: #ff3870;
  text-decoration: underline;
}

/* === /v1.9.61 Become a Teacher panel === */


/* =========================================================================
   /tutors/ — Compact ITO-style filter + 1800px width + divider (v1.9.62)

   User: "See the filters in ITO, they are small and crisp into one line,
   but in nuvio it is lengthy... Nuvio page needs to be redesigned in line
   with ITO but in 1800px width, new teacher enrollment can be in right
   with a divider line."

   Root cause of the lengthy filter: Astra child theme sets every <select>
   and <input> to width:100% with high specificity, so the flex children
   get stretched to full width and wrap onto their own rows. Force them
   back to auto-width with !important.
   ========================================================================= */

/* 1800px page width — matches every other WinQuest page cap. */
.ito-marketplace-page .ito-mp-container {
  max-width: 1800px !important;
  padding-left: clamp(20px, 3vw, 56px) !important;
  padding-right: clamp(20px, 3vw, 56px) !important;
}

/* Filter bar — force compact horizontal single-line layout. */
.ito-marketplace-page .ito-filter-bar__inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 0 !important;
  overflow-x: auto;
  scrollbar-width: thin;
}
.ito-marketplace-page .ito-filter-bar__inner::-webkit-scrollbar { height: 4px; }
.ito-marketplace-page .ito-filter-bar__inner::-webkit-scrollbar-thumb { background: #e5d4db; border-radius: 2px; }

/* Each filter child: no stretch, auto width — beats Astra's 100% rule. */
.ito-marketplace-page .ito-filter-bar__inner > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Compact select inputs — small font + tight padding. */
.ito-marketplace-page .ito-filter-select {
  width: auto !important;
  min-width: 120px !important;
  padding: 7px 26px 7px 10px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid #f1e1e7 !important;
  background-color: #fff !important;
  color: #5c1d35 !important;
  height: auto !important;
  line-height: 1.3 !important;
}
.ito-marketplace-page .ito-filter-select:focus {
  border-color: #ff5d8c !important;
  box-shadow: 0 0 0 3px rgba(255, 56, 112, .14) !important;
}

/* Compact text inputs (City, Name). */
.ito-marketplace-page .ito-filter-search {
  width: auto !important;
  min-width: 140px !important;
  flex: 1 1 140px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid #f1e1e7 !important;
  background: #fff !important;
  color: #1f1f2e !important;
  height: auto !important;
  line-height: 1.3 !important;
}

/* Search button — pink gradient compact. */
.ito-marketplace-page .ito-filter-bar__submit {
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(255,56,112,.28) !important;
}
.ito-marketplace-page .ito-filter-bar__submit:hover {
  filter: brightness(1.04);
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%) !important;
}

/* "Filter:" label — uppercase muted. */
.ito-marketplace-page .ito-filter-bar__label {
  font-size: 11px !important;
  color: #6b556a !important;
  letter-spacing: 0.08em !important;
  margin-right: 4px !important;
}

/* Mobile: still keep horizontal scroll, slightly smaller. */
@media (max-width: 640px) {
  .ito-marketplace-page .ito-filter-bar__inner {
    gap: 6px !important;
    padding: 10px 4px !important;
  }
  .ito-marketplace-page .ito-filter-select,
  .ito-marketplace-page .ito-filter-search {
    font-size: 12px !important;
    padding: 6px 22px 6px 8px !important;
    min-width: 110px !important;
  }
  .ito-marketplace-page .ito-filter-bar__submit {
    padding: 6px 14px !important;
    font-size: 12px !important;
  }
}

/* Divider between tutor grid + Become a Teacher panel. */
@media (min-width: 1025px) {
  .nuvio-bt {
    border-left: 1px solid #f1e1e7 !important;
    padding-left: 28px !important;
    margin-left: 0 !important;
  }
}

/* =========================================================================
   Standalone /become-a-teacher/ page (v1.9.62)
   Reuses nuvio_render_become_teacher_panel() but in a 2-col page layout:
   hero on top, then Why+Apply side-by-side at 1800px.
   ========================================================================= */
.ito-bat-page {
  max-width: 1800px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 14px clamp(20px, 3vw, 56px) 60px !important;
  box-sizing: border-box;
}

/* Hero */
.ito-bat-hero {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 50%, #ff7da0 100%);
  color: #fff;
  padding: clamp(38px, 5vw, 56px) clamp(22px, 5vw, 56px) clamp(34px, 4vw, 48px);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(255,72,120,.20), inset 0 1px 0 rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
  margin-bottom: 26px;
}
.ito-bat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 26%, rgba(255,255,255,.30) 0%, transparent 44%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.18) 0%, transparent 38%);
  pointer-events: none;
}
.ito-bat-hero__inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.ito-bat-hero__eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.40);
  border-radius: 999px;
  padding: 6px 15px;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
  backdrop-filter: blur(2px);
}
.ito-bat-hero__title {
  color: #fff !important;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif !important;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important;
  font-weight: 800 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(166,30,72,.28);
}
.ito-bat-hero__sub {
  color: rgba(255,255,255,.92) !important;
  font-size: 1.02rem !important;
  margin: 0 auto 22px !important;
  max-width: 640px;
  text-shadow: 0 1px 6px rgba(166,30,72,.22);
  line-height: 1.55;
}
.ito-bat-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ito-bat-hero__pill {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

/* Body — override the aside's sticky / vertical-stack to a horizontal 2-col */
.ito-bat-page .nuvio-bt {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 28px !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}
.ito-bat-page .nuvio-bt__why,
.ito-bat-page .nuvio-bt__apply {
  margin: 0;
}
@media (max-width: 900px) {
  .ito-bat-page .nuvio-bt {
    grid-template-columns: 1fr !important;
  }
}

/* === /v1.9.62 filter polish + standalone become-a-teacher page === */


/* =========================================================================
   Header nav compactness + Globe symbol (v1.9.65)

   User: "the header has globe going down because of space, which needs to
   be adjusted, might be interspace between then need to be reduced. Globe
   can be replaced with globe symbol which will look nice."

   With Home + Video Courses added, the menu now has 8 top-level items
   (Home / Our Courses / Group Classes / Events & Workshop / Free Classes /
   Video Courses / Globe / Contact Us). Globe wraps onto a 2nd row at
   common laptop widths (1366–1440px). Two-pronged fix:
   1. Compress nav-item horizontal padding & font-size so all 8 fit.
   2. Replace the "Globe" text label with a 🌍 emoji icon (much shorter)
      via the menu-item-11960 class (Globe's WP nav-menu-item ID).
   ========================================================================= */

/* Tighter padding on every nav link — works on tablet (1024px) up to
   ultra-wide so the whole bar reads as a single line. */
@media (min-width: 980px) and (max-width: 1500px) {
  body .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
    padding: 14px 10px !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
  }
  body .elementskit-navbar-nav > li {
    margin: 0 !important;
  }
  body .elementskit-navbar-nav > li > a.ekit-menu-nav-link .elementskit-submenu-indicator {
    margin-left: 4px !important;
    font-size: 10px !important;
  }
}

/* Compact even further at the tightest desktop sizes */
@media (min-width: 980px) and (max-width: 1280px) {
  body .elementskit-navbar-nav > li > a.ekit-menu-nav-link {
    padding: 12px 8px !important;
    font-size: 12.5px !important;
  }
}

/* Replace the "Globe" menu item text with a 🌍 emoji.
   The Globe item is identified by its menu-item-11960 class (set by WP). */
body .menu-item-11960 > a.ekit-menu-nav-link {
  font-size: 0 !important;        /* hide the literal "Globe" text */
  padding: 14px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
}
body .menu-item-11960 > a.ekit-menu-nav-link::before {
  content: "🌍";
  font-size: 18px;
  line-height: 1;
  margin-right: 2px;
}
/* Restore size for the submenu-indicator (chevron) so it stays visible. */
body .menu-item-11960 > a.ekit-menu-nav-link .elementskit-submenu-indicator {
  font-size: 12px !important;
}
/* Show the text on mobile (where the menu drawer has more room and
   visual context is helpful) */
@media (max-width: 980px) {
  body .menu-item-11960 > a.ekit-menu-nav-link {
    font-size: 14px !important;
  }
  body .menu-item-11960 > a.ekit-menu-nav-link::before {
    content: "🌍 ";
    margin-right: 4px;
  }
}

/* === /v1.9.65 nav compactness + globe symbol === */


/* =========================================================================
   Nav cleanup (v1.9.67)
   1. Remove Globe item entirely (user: "ok remove globe part, i dont need it").
   2. Fix Contact Us dropdown — parent has elementskit-megamenu-has class
      (expects an Elementor template) but the actual sub-items are inside
      a native <ul class="sub-menu">. Force the native submenu to display
      on hover so the 3 children (Become a Teacher / Terms & Conditions /
      Privacy Policy) actually appear.
   3. Hide the duplicate "Contact Us" sub-item (#18833) so only 3 children
      show: Become a Teacher, Terms & Conditions, Privacy Policy.
   ========================================================================= */

/* 1. Remove Globe item */
body .menu-item-11960 {
  display: none !important;
}

/* v1.9.70: RESTORED the Contact Us sub-link (#18833) — user wanted it back
   alongside the other 3 items so the dropdown shows all 4 paths:
     📞 Contact Us       → /contact/
     👨‍🏫 Become a Teacher → /become-a-teacher/
     📋 Terms & Conditions → /terms-conditions/
     🔒 Privacy Policy    → /privacy-policy/
   (the previous v1.9.67 hide was a misread of the user's intent) */

/* 2. Force Contact Us native submenu — PREMIUM design (v1.9.68):
   white→pink gradient card, pink gradient top accent bar, emoji icons per
   item, hover slides right with pink left border + color shift. */
body .menu-item-12163 {
  position: relative;
}
body .menu-item-12163 > .elementskit-dropdown-menu,
body .menu-item-12163 > ul.elementskit-dropdown,
body .menu-item-12163 > .elementskit-megamenu-panel,
body .menu-item-12163 > .sub-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  padding: 12px 0 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff5fa 100%) !important;
  border: 1px solid #f1e1e7 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 44px rgba(255,72,120,.22), 0 4px 12px rgba(92,29,53,.10) !important;
  min-width: 260px !important;
  width: auto !important;
  list-style: none !important;
  z-index: 1000 !important;
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
}

/* Top accent gradient bar — dark to light rose */
body .menu-item-12163 > .elementskit-dropdown-menu::before,
body .menu-item-12163 > ul.elementskit-dropdown::before,
body .menu-item-12163 > .elementskit-megamenu-panel::before,
body .menu-item-12163 > .sub-menu::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #b91d4e 0%, #ff3870 35%, #ff7da0 70%, #ffd1de 100%) !important;
  pointer-events: none !important;
  display: block !important;
}

/* Connector triangle pointing up to parent link */
body .menu-item-12163 > .elementskit-dropdown-menu::after,
body .menu-item-12163 > .sub-menu::after {
  content: "" !important;
  position: absolute !important;
  top: -7px !important;
  right: 18px !important;
  width: 12px !important;
  height: 12px !important;
  background: linear-gradient(135deg, #b91d4e 0%, #ff3870 100%) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Hover/focus = open */
body .menu-item-12163:hover > .elementskit-dropdown-menu,
body .menu-item-12163:hover > ul.elementskit-dropdown,
body .menu-item-12163:hover > .elementskit-megamenu-panel,
body .menu-item-12163:hover > .sub-menu,
body .menu-item-12163:focus-within > .elementskit-dropdown-menu,
body .menu-item-12163:focus-within > ul.elementskit-dropdown,
body .menu-item-12163:focus-within > .elementskit-megamenu-panel,
body .menu-item-12163:focus-within > .sub-menu {
  display: block !important;
}

/* Submenu items — clean spacing, dark mauve, no list bullets */
body .menu-item-12163 .sub-menu li,
body .menu-item-12163 .elementskit-dropdown li,
body .menu-item-12163 .elementskit-megamenu-panel li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
body .menu-item-12163 .sub-menu li::before,
body .menu-item-12163 .elementskit-dropdown li::before {
  content: none !important;
}

/* Submenu item link — flex with icon, slide-right on hover */
body .menu-item-12163 .sub-menu li a,
body .menu-item-12163 .elementskit-dropdown li a,
body .menu-item-12163 .elementskit-megamenu-panel li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 20px !important;
  color: #5c1d35 !important;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  white-space: nowrap !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, padding-left .18s ease !important;
}
body .menu-item-12163 .sub-menu li a:hover,
body .menu-item-12163 .elementskit-dropdown li a:hover,
body .menu-item-12163 .elementskit-megamenu-panel li a:hover {
  background: linear-gradient(90deg, #fff0f5 0%, transparent 100%) !important;
  border-left-color: #ff3870 !important;
  color: #c8154b !important;
  padding-left: 24px !important;
}

/* Per-item emoji icons via ::before. v1.9.70 adds 📞 for Contact Us
   (#18833) so all 4 dropdown items have icons. */
html body .nav-item.menu-item-18833 > a::before,
html body li.menu-item-18833 > a::before {
  content: "📞" !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* v1.9.69: bumped specificity from `body .menu-item-XXX` to
   `html body .nav-item.menu-item-XXX` so it beats any ElementsKit override
   that may target the same selector with one extra class. */
html body .nav-item.menu-item-18835 > a::before,
html body li.menu-item-18835 > a::before {
  content: "👨‍🏫" !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
}
html body .nav-item.menu-item-18832 > a::before,
html body li.menu-item-18832 > a::before {
  content: "📋" !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
}
html body .nav-item.menu-item-18834 > a::before,
html body li.menu-item-18834 > a::before {
  content: "🔒" !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  display: inline-block !important;
}

/* v1.9.69 — boost specificity on the hide rules too so ElementsKit's
   `display: list-item` can't win. */
html body li.menu-item-11960,
html body .nav-item.menu-item-11960 {
  display: none !important;
}
/* v1.9.70: removed display:none on #18833 — Contact Us link restored. */

/* Hide ElementsKit submenu-indicator inside the dropdown items (the chevron
   would appear on each sub-item, which we don't want — children are leaves). */
body .menu-item-12163 .sub-menu li .elementskit-submenu-indicator,
body .menu-item-12163 .elementskit-dropdown li .elementskit-submenu-indicator {
  display: none !important;
}

/* === /v1.9.67 nav cleanup === */


/* =========================================================================
   Header — secondary top-bar polish (v1.9.71)

   User: "2 line above not looking good, need redesigning". The two header
   rows (top: About Us / Teachers / Plans and Pricing / Refer & Earn /
   Contact Us; bottom: HOME / OUR COURSES / GROUP CLASSES / …) were plain
   black text without proper hierarchy. Two visible nav rows now read as:
     - Top row: smaller tracked uppercase muted-rose labels, pink hover
       underline, faint divider below
     - Bottom row: existing main nav (already polished)
   Scoped to #menu-menu-3 (the secondary menu ID identified in live HTML).
   ========================================================================= */

/* Top bar nav items — refined typography */
html body ul#menu-menu-3 > li > a.ekit-menu-nav-link {
  font-family: "Poppins", "Montserrat", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  color: #4a3540 !important;
  padding: 10px 14px !important;
  position: relative;
  transition: color .18s ease !important;
}

/* Hover/active: rose text + animated underline */
html body ul#menu-menu-3 > li > a.ekit-menu-nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, #ff5d8c 0%, #ff3870 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  pointer-events: none;
}
html body ul#menu-menu-3 > li:hover > a.ekit-menu-nav-link,
html body ul#menu-menu-3 > li > a.ekit-menu-nav-link.active,
html body ul#menu-menu-3 > li > a.ekit-menu-nav-link:hover {
  color: #c8154b !important;
}
html body ul#menu-menu-3 > li:hover > a.ekit-menu-nav-link::after,
html body ul#menu-menu-3 > li > a.ekit-menu-nav-link.active::after {
  transform: scaleX(1);
}

/* Active state (e.g. currently on /contact/) — keep underline solid */
html body ul#menu-menu-3 > li.current-menu-item > a.ekit-menu-nav-link,
html body ul#menu-menu-3 > li.current-menu-ancestor > a.ekit-menu-nav-link {
  color: #c8154b !important;
}
html body ul#menu-menu-3 > li.current-menu-item > a.ekit-menu-nav-link::after,
html body ul#menu-menu-3 > li.current-menu-ancestor > a.ekit-menu-nav-link::after {
  transform: scaleX(1);
}

/* Chevron next to dropdown items (Contact Us ▾) — smaller, pink on hover */
html body ul#menu-menu-3 > li > a.ekit-menu-nav-link .elementskit-submenu-indicator {
  font-size: 10px !important;
  margin-left: 4px !important;
  color: #94739a !important;
  transition: color .18s, transform .22s !important;
}
html body ul#menu-menu-3 > li:hover > a.ekit-menu-nav-link .elementskit-submenu-indicator {
  color: #c8154b !important;
  transform: translateY(1px);
}

/* === /v1.9.71 secondary nav polish === */


/* =========================================================================
   v1.9.82 — Secondary nav: lighter colour, one size up, lifted up

   User screenshot: top-row links (About Us / Teachers / Plans and Pricing /
   Refer & Earn / Contact Us) read as dim mauve on the near-black bar —
   poor contrast, hard to scan. v1.9.71 set color:#4a3540 (designed for a
   light bar before the dark header landed).

   Updates (scoped to #menu-menu-3, same selector as v1.9.71 so it wins):
     - color  #4a3540 → #f5e0e7    (soft cream-rose, contrast on dark)
     - hover  #c8154b → #ff7da0    (brighter rose so hover stays visible)
     - size   12.5px → 14px         (one tick up, easier scan)
     - top padding 10px → 5px       (lifts the row visually)
     - underline bottom 6px → 3px   (keeps proportion after padding shift)
     - chevron color #94739a → #f5e0e7 (matches new text colour)
   ========================================================================= */

html body ul#menu-menu-3 > li > a.ekit-menu-nav-link {
  font-size: 14px !important;
  color: #f5e0e7 !important;
  padding: 5px 14px 9px !important;
}

html body ul#menu-menu-3 > li > a.ekit-menu-nav-link::after {
  bottom: 3px !important;
}

html body ul#menu-menu-3 > li:hover > a.ekit-menu-nav-link,
html body ul#menu-menu-3 > li > a.ekit-menu-nav-link.active,
html body ul#menu-menu-3 > li > a.ekit-menu-nav-link:hover,
html body ul#menu-menu-3 > li.current-menu-item > a.ekit-menu-nav-link,
html body ul#menu-menu-3 > li.current-menu-ancestor > a.ekit-menu-nav-link {
  color: #ff7da0 !important;
}

html body ul#menu-menu-3 > li > a.ekit-menu-nav-link .elementskit-submenu-indicator {
  color: #f5e0e7 !important;
  font-size: 11px !important;
}
html body ul#menu-menu-3 > li:hover > a.ekit-menu-nav-link .elementskit-submenu-indicator {
  color: #ff7da0 !important;
}

/* === /v1.9.82 secondary nav lighter + larger + lifted === */


/* =========================================================================
   Header — mega-menu z-index fix + Contact Us style match (v1.9.72)

   User screenshot: Group Classes mega-menu opened ON the /tutors/ page,
   and the menu panel was rendering BEHIND the hero (some text mixed
   with the hero background). Force every mega-menu container to a high
   z-index so it stacks above page hero, sticky panels, and the cart icon.

   Also: "Menu of contact us should be same style as menu for Our courses,
   free classes and others". The Our Courses / Group Classes / Free Classes
   menus use .wq-mmenu (white card, mega-menu grid, .wq-mcol__head
   uppercase pink headings). Apply the same visual treatment to the
   Contact Us dropdown so it reads as one of the WQ menu family.
   ========================================================================= */

/* 1. Z-index — every Elementor / ElementsKit mega-menu wrapper above page content */
html body .elementskit-megamenu-panel,
html body .elementskit-dropdown-menu,
html body .elementskit-submenu-panel,
html body .elementor-element[class*="elementskit-megamenu"] .elementor-widget-container,
html body .menu-item-has-children > .elementskit-submenu-panel,
html body .menu-item-has-children > .elementskit-megamenu-panel,
html body .wq-mmenu,
html body ul.elementskit-navbar-nav li > ul,
html body ul#menu-menu-3 > li.menu-item-has-children {
  z-index: 9999 !important;
}
html body .ekit-navbar-nav-wrap,
html body .elementskit-navbar-nav,
html body ul#menu-menu-3,
html body ul#menu-new-header {
  position: relative !important;
  z-index: 9998 !important;
}

/* 2. Contact Us dropdown — restyle to match .wq-mmenu pattern (white card with
   uppercase pink heading, list items with emoji + text, hover effect). */
html body .menu-item-12163 > .elementskit-dropdown-menu,
html body .menu-item-12163 > ul.elementskit-dropdown,
html body .menu-item-12163 > .elementskit-megamenu-panel,
html body .menu-item-12163 > .sub-menu {
  background: #ffffff !important;
  border: 1px solid #f1e1e7 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(255,72,120,.18), 0 4px 12px rgba(92,29,53,.08) !important;
  padding: 14px 8px 12px !important;
  min-width: 260px !important;
}

/* Inject the "Contact Us" section heading at top of dropdown (uppercase pink,
   matches .wq-mcol__head pattern) */
html body .menu-item-12163 > .elementskit-dropdown-menu::before,
html body .menu-item-12163 > ul.elementskit-dropdown::before,
html body .menu-item-12163 > .sub-menu::before {
  content: "📞 CONTACT US" !important;
  display: block !important;
  position: static !important;
  background: none !important;
  height: auto !important;
  padding: 4px 14px 10px !important;
  font-family: "Poppins","Montserrat",system-ui,sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ff3870 !important;
  border-bottom: 1px solid #f1e1e7 !important;
  margin-bottom: 6px !important;
}
/* Hide the old ::after triangle connector + ::before top-strip accent */
html body .menu-item-12163 > .elementskit-dropdown-menu::after,
html body .menu-item-12163 > .sub-menu::after {
  display: none !important;
}

/* Submenu link styling — now matches .wq-mcol li a pattern: 12.5px,
   medium-dark text, soft pink hover bg */
html body .menu-item-12163 .sub-menu li a,
html body .menu-item-12163 .elementskit-dropdown li a,
html body .menu-item-12163 .elementskit-megamenu-panel li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  color: #4a3540 !important;
  font-family: "Poppins","Montserrat",system-ui,sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  margin: 0 4px !important;
  white-space: nowrap !important;
  transition: background .15s, color .15s !important;
}
html body .menu-item-12163 .sub-menu li a:hover,
html body .menu-item-12163 .elementskit-dropdown li a:hover,
html body .menu-item-12163 .elementskit-megamenu-panel li a:hover {
  background: #fff0f5 !important;
  color: #ff3870 !important;
  padding-left: 14px !important;
  border-left: 0 !important;
}

/* === /v1.9.72 z-index + Contact Us dropdown style match === */


/* =========================================================================
   v1.9.76 — Footer mobile: bigger link fonts + compact pink card

   User: "Quick Links, Categories, popular courses fonts are too small and
   Winquest pink part is too big. Both need resizing and proper aligning".

   The v1.9.57 super-compact 9.5px font for link items was too aggressive.
   At the same time the pink WinQuest contact card (logo + address + phone
   + email + social icons) had no constraints and ate ~700px of vertical
   space because the logo was huge and each social icon sat in its own
   row. Two opposite fixes in one block.
   ========================================================================= */

@media (max-width: 1024px) {
  /* 1. Heading + link list — bumped to readable sizes that still fit
        three columns side-by-side at 520px viewport. */
  html body .elementor-element.elementor-element-54ae95a .elementor-heading-title,
  html body .elementor-element.elementor-element-8befedb .elementor-heading-title,
  html body .elementor-element.elementor-element-bbd13bd .elementor-heading-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
    letter-spacing: 0.02em !important;
  }
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-text,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-text,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-text {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-item,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-item,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-item {
    padding: 3px 0 !important;
  }

  /* 2. The pink WinQuest contact card — compress every element so it
        becomes ~⅓ the height it was. Targeted via :has() since the card
        is any sibling of the 3 link columns that ISN'T one of them, so
        this works regardless of the per-page Elementor ID variations. */
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) {
    padding: 18px 18px !important;
  }

  /* Pink card logo — was huge, compress */
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-widget-image img {
    max-width: 180px !important;
    width: 70% !important;
    margin: 0 auto 10px !important;
    display: block !important;
  }

  /* Address / phone / email rows — compact */
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-icon-box-content {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-icon-box-wrapper {
    margin: 0 0 8px !important;
  }
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-icon-box-icon {
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
  }
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-icon-box-icon i,
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-icon-box-icon svg {
    font-size: 12px !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* Social icons row — pack inline, smaller */
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-social-icons-wrapper {
    gap: 8px !important;
    justify-content: center !important;
    margin-top: 10px !important;
  }
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-social-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    line-height: 28px !important;
    margin: 0 !important;
  }
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-social-icon svg {
    width: 12px !important;
    height: 12px !important;
  }
}

/* Tiny phones (≤420px): keep readable but a touch tighter */
@media (max-width: 420px) {
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-text,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-text,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-text {
    font-size: 11px !important;
  }
  html body .elementor-element.elementor-element-54ae95a .elementor-heading-title,
  html body .elementor-element.elementor-element-8befedb .elementor-heading-title,
  html body .elementor-element.elementor-element-bbd13bd .elementor-heading-title {
    font-size: 13px !important;
  }
  body *:has(> .elementor-element-54ae95a):has(> .elementor-element-8befedb):has(> .elementor-element-bbd13bd) > :not(.elementor-element-54ae95a):not(.elementor-element-8befedb):not(.elementor-element-bbd13bd) .elementor-widget-image img {
    max-width: 150px !important;
  }
}

/* === /v1.9.76 footer mobile rebalance === */


/* =========================================================================
   v1.9.77 — Mobile responsive overhaul (sleek + ultra luxury)

   User's three asks:
   1. Mobile drawer is missing About Us / Teachers / Plans / Refer & Earn /
      Contact Us (secondary nav items) AND the WinQuest logo — and the
      drawer itself has no premium styling.
   2. Too many white blank spaces between sections on mobile.
   3. Events & Workshops show all cards stacked — should be one card with
      navigation arrows (horizontal carousel).
   ========================================================================= */

/* ── A. MOBILE NAV DRAWER POLISH ─────────────────────────────────────────
   ElementsKit's off-canvas drawer (.elementskit-menu-offcanvas-elements)
   was unstyled. Make it a premium dark-rose panel with refined typography. */
@media (max-width: 1024px) {
  html body .elementskit-menu-offcanvas-elements {
    background: linear-gradient(180deg, #1f0f17 0%, #2a141f 100%) !important;
    color: #fff !important;
    padding: 24px 16px !important;
    box-shadow: -8px 0 40px rgba(28, 10, 18, .30) !important;
  }
  /* Logo at the top of the drawer (WP "Custom Logo" injected, else fallback) */
  html body .elementskit-menu-offcanvas-elements::before {
    content: "";
    display: block;
    width: 140px;
    height: 56px;
    margin: 0 auto 18px;
    background-image: url("https://nuviolearning.com/wp-content/uploads/2026/03/cropped-WinQuest-logo-02-Copy-scaled-1-180x180.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  /* Nav links inside the drawer */
  html body .elementskit-menu-offcanvas-elements .ekit-menu-nav-link,
  html body .elementskit-menu-offcanvas-elements a.menu-link {
    color: rgba(255, 255, 255, .92) !important;
    font-family: "Poppins","Montserrat",system-ui,sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    transition: background .15s, color .15s !important;
  }
  html body .elementskit-menu-offcanvas-elements .ekit-menu-nav-link:hover,
  html body .elementskit-menu-offcanvas-elements li:hover > a.menu-link {
    background: rgba(255, 56, 112, .12) !important;
    color: #ff7da0 !important;
  }
  html body .elementskit-menu-offcanvas-elements .active,
  html body .elementskit-menu-offcanvas-elements li.current-menu-item > a {
    color: #ff5d8c !important;
    background: rgba(255, 56, 112, .15) !important;
  }
  /* Submenu indents */
  html body .elementskit-menu-offcanvas-elements .sub-menu a,
  html body .elementskit-menu-offcanvas-elements .elementskit-dropdown a {
    padding-left: 32px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, .72) !important;
  }
  /* Close button */
  html body .elementskit-menu-close,
  html body .ekit-offcanvas-close {
    color: #ff5d8c !important;
    font-size: 22px !important;
  }
}

/* ── B. COMPRESS VERTICAL WHITE SPACE ON MOBILE ───────────────────────── */
@media (max-width: 768px) {
  /* Below-fold section blocks (Teachers, Achievements, Parents Say,
     WhatsApp, News, Instagram, Events) — already tightened by v1.9.49
     but section bodies still have excess padding on mobile. */
  body .ito-cs,
  body .ito-cs-car,
  body .ito-cs-google,
  body .ito-cs-ig,
  body .ito-cs-wa,
  body .ito-cs-team,
  body .ito-cs-ach,
  body .ito-cs-psay,
  body .ito-cs-blog,
  body .wq-events {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  body .ito-cs .ito-cp-sech,
  body .wq-events h2 {
    font-size: 1.3rem !important;
    margin: 0 0 6px !important;
  }
  body .ito-cs .ito-cs-sub {
    font-size: .88rem !important;
    margin: 0 auto 10px !important;
  }
  /* Container sections — Elementor's e-con with default 80–100px padding */
  body main#primary .ito-cs + .ito-cs,
  body main#primary section + section {
    margin-top: 0 !important;
  }
  /* Footer & footer copyright — tight stacking */
  body footer,
  body .site-footer,
  body .ast-footer {
    padding-top: 18px !important;
    padding-bottom: 12px !important;
  }
}

/* ── C. EVENTS & WORKSHOPS — HORIZONTAL CAROUSEL ON MOBILE ────────────── */
@media (max-width: 768px) {
  /* Convert the events container to a scroll-snap carousel.
     Each .wq-events__card snaps to viewport width — one visible at a time. */
  html body .wq-events {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    gap: 12px !important;
    padding: 6px 12px 18px !important;
    margin: 0 -12px !important;          /* break out of container padding */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    width: 100vw !important;
    box-sizing: border-box;
  }
  html body .wq-events::-webkit-scrollbar { height: 4px; }
  html body .wq-events::-webkit-scrollbar-thumb { background: #f5dbe5; border-radius: 2px; }

  html body .wq-events__card {
    flex: 0 0 88vw !important;            /* one card per viewport */
    max-width: 88vw !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 22px rgba(255, 72, 120, .10) !important;
    border: 1px solid #f1e1e7 !important;
  }
  html body .wq-events__img,
  html body .wq-events__card img {
    height: 180px !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  html body .wq-events__body {
    padding: 14px 16px !important;
  }
  html body .wq-events__title {
    font-size: 1.05rem !important;
    margin: 0 0 6px !important;
    line-height: 1.25 !important;
  }
  html body .wq-events__exc {
    font-size: .88rem !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
  }

  /* Hint that the carousel scrolls — gradient fade on right edge */
  html body .wq-events::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    flex: 0 0 18px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8));
    pointer-events: none;
  }
}

/* === /v1.9.77 mobile responsive overhaul === */


/* =========================================================================
   v1.9.78 — Mobile: center-fit carousels + footer column polish + WA gap

   User: "The carousal is not centrally aligned and not fitting in the
   screen and also the Quick Links/Categories/popular courses is not
   centrally aligned and one font up seems possible. There is blank space
   above and below whatsapp testimonial section."
   ========================================================================= */

@media (max-width: 768px) {

  /* ── 1. CAROUSELS — fit cards to viewport with center snap ──────────── */

  /* Carousel containers: side padding so arrows / first-last card breathe */
  body .ito-cs-carwrap,
  body .ito-cb__carousel {
    padding-left: 22px !important;
    padding-right: 22px !important;
    margin: 0 !important;
  }
  body .ito-cs-car {
    padding: 6px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Track behaves as scroll-snap mandatory horizontal */
  body .ito-cs-track,
  body .ito-cb__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    gap: 12px !important;
    padding: 4px 0 12px !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  body .ito-cs-track::-webkit-scrollbar,
  body .ito-cb__track::-webkit-scrollbar { height: 4px; }
  body .ito-cs-track::-webkit-scrollbar-thumb,
  body .ito-cb__track::-webkit-scrollbar-thumb { background: #f5dbe5; border-radius: 2px; }

  /* Each cell / card fits the viewport with breathing room */
  body .ito-cs-track .ito-cs-cell,
  body .ito-cs-team .ito-cs-tcard2,
  body .ito-cs-psay .ito-cs-cell,
  body .ito-cs-ach .ito-cs-cell,
  body .ito-cs-wa .ito-cs-cell {
    flex: 0 0 86vw !important;
    max-width: 86vw !important;
    width: 86vw !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
  }
  /* Image inside the cell stays well-bounded */
  body .ito-cs-cimg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Homepage Group Classes course cards (Abacus / Music etc.) */
  body .ito-cb__card {
    flex: 0 0 86vw !important;
    max-width: 86vw !important;
    width: 86vw !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
  }

  /* Arrow buttons — pin to edges so they're tappable */
  body .ito-cs-arw,
  body .ito-cb__nav {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  body .ito-cs-arw--prev,
  body .ito-cb__nav--prev { left: 2px !important; right: auto !important; }
  body .ito-cs-arw--next,
  body .ito-cb__nav--next { right: 2px !important; left: auto !important; }

  /* ── 2. WHATSAPP TESTIMONIALS — kill the extra gap above/below ────── */
  body .ito-cs.ito-cs-wa,
  body section.ito-cs-wa {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  body .ito-cs.ito-cs-wa .ito-cp-sech {
    margin-bottom: 4px !important;
  }
  body .ito-cs.ito-cs-wa .ito-cs-sub {
    margin: 2px auto 8px !important;
  }

  /* ── 3. FOOTER COLUMNS — center align + font up one notch ───────────── */
  html body .elementor-element.elementor-element-54ae95a,
  html body .elementor-element.elementor-element-8befedb,
  html body .elementor-element.elementor-element-bbd13bd {
    text-align: center !important;
  }
  /* Center each icon-list row (icon + label both centered, gap kept) */
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-items,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-items,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-items {
    align-items: center !important;
  }
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-item,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-item,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-item {
    justify-content: center !important;
    text-align: center !important;
  }
  /* Center the H2 heading */
  html body .elementor-element.elementor-element-54ae95a .elementor-widget-heading,
  html body .elementor-element.elementor-element-8befedb .elementor-widget-heading,
  html body .elementor-element.elementor-element-bbd13bd .elementor-widget-heading {
    text-align: center !important;
  }
  html body .elementor-element.elementor-element-54ae95a .elementor-heading-title,
  html body .elementor-element.elementor-element-8befedb .elementor-heading-title,
  html body .elementor-element.elementor-element-bbd13bd .elementor-heading-title {
    font-size: 15px !important;     /* v1.9.76 had 14px — bumped per user */
    text-align: center !important;
  }
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-text,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-text,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-text {
    font-size: 13px !important;     /* v1.9.76 had 12px — bumped per user */
  }
}

/* === /v1.9.78 carousel-fit + footer center + WA gap === */


/* =========================================================================
   v1.9.79 — Mobile: tighter carousel containment + events carousel +
   footer column item centering

   User: "carousal are not fitting into the screen and being cut. free
   event and workshop all 3 are showing one by one rather in carousal
   form with navigation button and last footer still not aligned
   centrally".

   v1.9.78 set .ito-cb__card to flex:0 0 86vw but the PARENT viewport
   wasn't constrained — cards still bled past the right edge. Plus the
   v1.9.78 footer-center rule didn't hit list items (Elementor wraps the
   text in a flex child with flex:1 making text-align:center ineffective).
   ========================================================================= */

@media (max-width: 768px) {

  /* ── A. CAROUSEL — hard-constrain the parent viewport ──────────────── */

  /* The .ito-cb container itself shouldn't overflow page edges */
  html body .ito-cb,
  html body .ito-cb__panel,
  html body .ito-cb__panels {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* The viewport that wraps the track — clip the track scroll */
  html body .ito-cb__viewport {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Track scrolls horizontally inside the viewport */
  html body .ito-cb__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    gap: 12px !important;
    padding: 4px 12px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  html body .ito-cb__track::-webkit-scrollbar { height: 4px; }
  html body .ito-cb__track::-webkit-scrollbar-thumb { background: #f5dbe5; border-radius: 2px; }

  /* Each course card — exactly 84vw, snap-center aligned */
  html body .ito-cb__card {
    flex: 0 0 84vw !important;
    width: 84vw !important;
    max-width: 84vw !important;
    min-width: 0 !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  html body .ito-cb__card-body {
    padding: 14px 14px 16px !important;
  }
  html body .ito-cb__card img,
  html body .ito-cb__card-img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* The category-pill row above the carousel (Mind Sports / IT Tech / etc.)
     and the "View all Group Classes" button — scroll horizontally too. */
  html body .ito-cb__tabs,
  html body .ito-cb__head {
    max-width: 100vw !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px !important;
    scrollbar-width: none;
  }
  html body .ito-cb__tabs::-webkit-scrollbar { display: none; }
  html body .ito-cb__tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* ── B. FREE EVENTS & WORKSHOP — horizontal carousel ──────────────── */

  /* Any Elementor container that holds multiple event-card-shaped children
     (image + title + ATTEND button) — convert to a horizontal scroll-snap
     carousel using :has() to find them universally. */
  html body .elementor-section:has(> .elementor-container > .elementor-column:nth-child(3)),
  html body .e-con-boxed:has(> .e-con > .e-con:nth-child(3)),
  html body .e-grid:not(.elementor-element) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Each event card item snaps */
  html body .elementor-column:has(.elementor-widget-event-grid),
  html body .e-con-boxed > .e-con,
  html body .e-grid > .e-con {
    flex: 0 0 86vw !important;
    max-width: 86vw !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }

  /* ── C. FOOTER COLUMNS — actually center the list items ───────────── */

  /* Elementor wraps icon-list text in .elementor-icon-list-text with
     flex:1 1 auto — that makes the text fill the row, so text-align:center
     doesn't visibly center anything. Force the wrapper to fit content. */
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-text,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-text,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-text {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    display: inline-block !important;
  }
  /* Item is a flex row — make it center its single child */
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-item,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-item,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }
  /* The icon-list-items <ul> shouldn't have list-style or left padding */
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-items,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-items,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-items {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    text-align: center !important;
  }
  /* The link inside — also reset to centered inline-flex */
  html body .elementor-element.elementor-element-54ae95a .elementor-icon-list-item a,
  html body .elementor-element.elementor-element-8befedb .elementor-icon-list-item a,
  html body .elementor-element.elementor-element-bbd13bd .elementor-icon-list-item a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    text-align: center !important;
  }
}

/* === /v1.9.79 carousel containment + events carousel + footer center === */


/* =========================================================================
   v1.9.81 — Mobile: shrink carousel arrows + overlay (don't displace)

   User screenshot at 528px: "Book Dem|o" CTA cut off because the right
   .ito-cb__nav--next (~42px pink circle, flex sibling of viewport) eats
   into the row beside the card. Earlier v1.9.78 set left:2px / right:2px
   but the arrows are flex children, not position:absolute — so the offset
   never applied and they kept stealing horizontal space.

   Fix: keep the arrows (user wants them visible) but
     1. Make .ito-cb__carousel a positioning context.
     2. Absolute-position the arrows so they OVERLAY rather than displace —
        no flex space consumed → card uses full container width.
     3. Shrink to 26px (was 42px desktop / 38px in our earlier override).
     4. Lift them up to top:38% so they sit over the card IMAGE, not over
        the Enrol Now / Download Curriculum CTAs.
     5. Semi-transparent (.85) with a subtle white ring so the underlying
        image still reads through.
     6. Card grows from 84vw → 90vw — gives more content width while the
        arrows overlay the image edges (a known mobile-carousel pattern).
   ========================================================================= */

@media (max-width: 768px) {

  /* The carousel becomes a positioning context for the overlaid arrows */
  html body .ito-cb__carousel {
    position: relative !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Small, overlaid prev/next arrows ─────────────────────────────── */
  html body .ito-cb__carousel > .ito-cb__nav,
  html body button.ito-cb__nav,
  html body .ito-cb__nav--prev,
  html body .ito-cb__nav--next {
    position: absolute !important;
    top: 38% !important;             /* sit over the card image area */
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 28px !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 56, 112, 0.88) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
    z-index: 5 !important;
    cursor: pointer;
  }
  html body .ito-cb__nav--prev { left: 6px !important; right: auto !important; }
  html body .ito-cb__nav--next { right: 6px !important; left: auto !important; }

  /* Card widens — arrows overlay the image edges, not flex-displaced */
  html body .ito-cb__card {
    flex: 0 0 90vw !important;
    width: 90vw !important;
    max-width: 90vw !important;
  }

  /* Track padding symmetric for clean snap centring */
  html body .ito-cb__track {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    gap: 12px !important;
  }
}

/* === /v1.9.81 mobile carousel small overlay arrows + 90vw cards === */


/* =========================================================================
   v1.9.83 — Register Now page: 2-col shell (bullets+image | booking form)

   page-register-now.php wraps the same booking form used on Book a Free
   Trial in a two-column layout. The LEFT panel ports the four selling
   points + student image from the legacy Formidable design; the RIGHT
   panel is the polished ito_render_demo_booking_form() output.

   Layout:
     - Desktop: 360px left side / 1fr form right
     - <=900px: stacked, image hidden (form rises above the fold)

   Palette: WinQuest Rose tokens — text #5c1d35, accent #ff3870,
   surface #fdf6f9, card #fff.
   ========================================================================= */

.ito-reg-main {
  background: linear-gradient(180deg, #fdf6f9 0%, #fff0f5 100%);
  padding: 28px clamp(14px, 3vw, 36px) 56px;
}

.ito-reg-shell {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* ── Left panel ───────────────────────────────────────────────────── */
.ito-reg-side {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid #f1e1e7;
  border-radius: 18px;
  padding: 28px 24px 24px;
  box-shadow: 0 10px 30px rgba(214, 50, 101, 0.06);
}

.ito-reg-side__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ito-reg-side__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 0;
}

.ito-reg-side__tick {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #d63265, #ff5d8c);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(214, 50, 101, 0.28);
}

.ito-reg-side__item h3 {
  margin: 0 0 4px;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #ff3870;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.ito-reg-side__item p {
  margin: 0;
  font-size: 0.86rem;
  color: #5c1d35;
  line-height: 1.5;
  opacity: 0.78;
}

.ito-reg-side__figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fdf6f9;
}

.ito-reg-side__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Right panel — let the booking form sit cleanly ────────────────── */
.ito-reg-form {
  min-width: 0;             /* allow grid child to shrink instead of overflow */
}

/* Make the inner form's outer hero spacing tighter inside this shell so
   it doesn't fight the panel padding. The form's own container already
   handles internal layout — we just reduce stray top margin. */
.ito-reg-form > #ito-book-demo-primary,
.ito-reg-form .ito-book-demo-combined,
.ito-reg-form main.edtech-main {
  margin-top: 0 !important;
}

/* ── Responsive: stack at <=900px, hide the photo so form is up high ── */
@media (max-width: 900px) {
  .ito-reg-shell {
    grid-template-columns: 1fr;
  }
  .ito-reg-side {
    position: static;
    padding: 22px 20px 12px;
  }
  .ito-reg-side__list {
    gap: 14px;
    margin-bottom: 0;
  }
  .ito-reg-side__figure {
    display: none;
  }
}

@media (max-width: 520px) {
  .ito-reg-main {
    padding: 16px 8px 36px;
  }
  .ito-reg-side {
    border-radius: 14px;
    padding: 18px 16px 10px;
  }
  .ito-reg-side__item h3 {
    font-size: 0.95rem;
  }
  .ito-reg-side__item p {
    font-size: 0.82rem;
  }
}

/* === /v1.9.83 register-now 2-col shell === */


/* =========================================================================
   v1.9.87 — Quick Register popup modal

   Replaces both legacy Formidable popups (11731 + 13681) with a slim
   theme-rendered modal. No side panel, no image, no tab strip — just a
   centered card with a 5-field quick-fill form.

   Markup is in functions.php → nuvio_quick_register_modal_html().
   Submits via AJAX to wp_ajax_nuvio_quick_register_submit.
   ========================================================================= */

.wq-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wq-qr-modal[hidden] { display: none !important; }

/* Backdrop — click to close */
.wq-qr-back {
  position: absolute;
  inset: 0;
  background: rgba(28, 7, 18, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Card */
.wq-qr-box {
  position: relative;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px rgba(214, 50, 101, 0.30);
  animation: wq-qr-in 0.22s ease-out;
}
@keyframes wq-qr-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Close X */
.wq-qr-x {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #5c1d35;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: background 0.15s;
}
.wq-qr-x:hover { background: #fff; }

/* Gradient header */
.wq-qr-head {
  background: linear-gradient(135deg, #d63265 0%, #b91d4e 60%, #ff5d8c 100%);
  color: #fff;
  padding: 26px 28px 24px;
  text-align: center;
  border-radius: 18px 18px 0 0;
}
.wq-qr-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.wq-qr-head h2 {
  margin: 0 0 6px;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.wq-qr-head p {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.92;
  color: #fff;
  line-height: 1.45;
}

/* Form body */
.wq-qr-form {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wq-qr-form .wq-qr-hp { display: none !important; }

.wq-qr-fld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #5c1d35;
  letter-spacing: 0.01em;
}
.wq-qr-fld > input,
.wq-qr-fld > select,
.wq-qr-phone input,
.wq-qr-phone select {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 11px 14px;
  border: 1px solid #f1e1e7;
  border-radius: 10px;
  background: #fdf6f9;
  color: #1f1018;
  transition: border 0.15s, background 0.15s, box-shadow 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.wq-qr-fld > input:focus,
.wq-qr-fld > select:focus,
.wq-qr-phone input:focus,
.wq-qr-phone select:focus {
  outline: 0;
  border-color: #ff3870;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 56, 112, 0.12);
}

/* 2-col row (WhatsApp + Email) */
.wq-qr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Phone field: country code + number */
.wq-qr-phone {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 6px;
}
.wq-qr-phone select {
  padding: 11px 4px 11px 8px;
  font-size: 0.88rem;
}

/* Submit */
.wq-qr-submit {
  background: linear-gradient(135deg, #ff5d8c 0%, #ff3870 100%);
  color: #fff;
  border: 0;
  padding: 13px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(255, 56, 112, 0.32);
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
  margin-top: 4px;
}
.wq-qr-submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
.wq-qr-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.wq-qr-submit__spin {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: wq-qr-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes wq-qr-spin { to { transform: rotate(360deg); } }

.wq-qr-tos {
  margin: 4px 0 0;
  font-size: 0.7rem;
  color: #5c1d35;
  opacity: 0.66;
  text-align: center;
  font-weight: 500;
  line-height: 1.4;
}
.wq-qr-tos a { color: #ff3870; text-decoration: none; }
.wq-qr-tos a:hover { text-decoration: underline; }

.wq-qr-msg {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  margin-top: 4px;
  text-align: center;
  line-height: 1.4;
}
.wq-qr-msg.is-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.wq-qr-msg.is-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Lock body scroll while modal is open */
html.wq-qr-open, html.wq-qr-open body { overflow: hidden !important; }

/* Mobile — single column, tighter padding */
@media (max-width: 520px) {
  .wq-qr-modal { padding: 10px; }
  .wq-qr-box { border-radius: 14px; max-height: 96vh; }
  .wq-qr-head {
    padding: 22px 20px 20px;
    border-radius: 14px 14px 0 0;
  }
  .wq-qr-head h2 { font-size: 1.22rem; }
  .wq-qr-head p { font-size: 0.83rem; }
  .wq-qr-form { padding: 18px 18px 22px; gap: 12px; }
  .wq-qr-row { grid-template-columns: 1fr; gap: 12px; }
}

/* === /v1.9.87 quick register popup === */


/* =========================================================================
   v1.9.89 — Popup IS the Book a Free Trial form (landing-page feel)

   v1.9.87 shipped a slim 5-field modal — user wanted the full Book a
   Free Trial layout in popup form. This block overrides the v1.9.87
   modal sizing/structure:
     - Wider box (max 1100px) — fits the form's natural tab strip + cols
     - 2-col internal grid: 320px sidebar  |  1fr form
     - Sidebar: bullets + tick icons + rating + student image
     - Form area: ito_render_demo_booking_form(false) renders inline
     - .ito-demo-excitement HIDDEN inside the modal (that's the "right
       side of three layer not required")
     - .ito-demo-booking-layout flattened to single-col inside the modal
   ========================================================================= */

/* Wider box for the landing-page layout */
.wq-qr-box.wq-qr-box--xl {
  max-width: 1100px;
  max-height: 94vh;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
}

/* 2-col internal shell — sidebar + form */
.wq-qr-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
}

/* LEFT — bullets + image */
.wq-qr-side {
  background: linear-gradient(180deg, #fff0f5 0%, #fdf6f9 100%);
  padding: 32px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.wq-qr-side .wq-qr-eyebrow {
  display: inline-block;
  align-self: flex-start;
  background: rgba(214, 50, 101, 0.10);
  color: #b91d4e;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wq-qr-title {
  margin: 0;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #5c1d35;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.wq-qr-lead {
  margin: 0;
  font-size: 0.88rem;
  color: #5c1d35;
  opacity: 0.78;
  line-height: 1.5;
}

.wq-qr-side__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wq-qr-side__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}
.wq-qr-side__tick {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #d63265, #ff5d8c);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(214, 50, 101, 0.28);
  margin-top: 2px;
}
.wq-qr-side__item h4 {
  margin: 0 0 2px;
  font-family: "Poppins", "Montserrat", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #ff3870;
  line-height: 1.25;
}
.wq-qr-side__item p {
  margin: 0;
  font-size: 0.8rem;
  color: #5c1d35;
  opacity: 0.74;
  line-height: 1.45;
}

.wq-qr-side__trust {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #5c1d35;
}
.wq-qr-side__stars {
  color: #e9c977;
  letter-spacing: 1px;
  font-size: 0.92rem;
}
.wq-qr-side__trust strong { color: #b91d4e; font-weight: 800; }

.wq-qr-side__figure {
  margin: auto 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.wq-qr-side__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* RIGHT — form wrapper. Scrolls independently. */
.wq-qr-formwrap {
  padding: 18px 22px 24px;
  overflow-y: auto;
  background: #fff;
  min-height: 0;
}

/* === FORM OVERRIDES inside the modal ============================== */

/* Hide the form's natural right-side excitement panel — user said the
   "right side of three layer is not required in this popup". */
.wq-qr-modal .ito-demo-excitement {
  display: none !important;
}

/* Flatten the form's 2-col booking-layout inside the modal so the
   form section spans the full right cell on its own. */
.wq-qr-modal .ito-demo-booking-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wq-qr-modal .ito-demo-booking-shell,
.wq-qr-modal .ito-demo-booking-page {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Tighter spacing inside the popup — the natural form has page-level
   margins/padding that look too airy in a modal. */
.wq-qr-modal .ito-bk {
  margin: 0 !important;
  padding: 0 !important;
}

/* === Responsive — stack at <=900px, hide image on tight screens === */
@media (max-width: 900px) {
  .wq-qr-box.wq-qr-box--xl {
    max-width: 96vw;
    max-height: 96vh;
  }
  .wq-qr-shell {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .wq-qr-side {
    padding: 22px 20px 16px;
    gap: 12px;
  }
  .wq-qr-side__list {
    gap: 10px;
  }
  .wq-qr-side__figure {
    display: none;
  }
  .wq-qr-formwrap {
    padding: 14px 18px 22px;
  }
}

@media (max-width: 520px) {
  .wq-qr-modal {
    padding: 0;
  }
  .wq-qr-box.wq-qr-box--xl {
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .wq-qr-shell {
    border-radius: 0;
  }
  .wq-qr-side {
    padding: 20px 16px 14px;
  }
  .wq-qr-title { font-size: 1.22rem; }
  .wq-qr-lead { font-size: 0.82rem; }
  .wq-qr-side__item h4 { font-size: 0.88rem; }
  .wq-qr-side__item p { font-size: 0.76rem; }
  .wq-qr-formwrap { padding: 12px 12px 18px; }
}

/* === /v1.9.89 popup landing-page layout === */