/* Legacy style.css - Now uses sintra-theme.css variables */
/* High contrast overrides - ensures WCAG AAA compliance */
/* style.css - Legacy compatibility - Uses sintra-theme.css variables */
/* HIGH CONTRAST OVERRIDES - Force maximum contrast */
:root {
  --bg: #0b0b0c;
  --page-bg: var(--nb-bg, #0b0b0c);
  --fg: #ffffff;
  --card-bg: var(--nb-card, #121214);
  --card-border: rgba(255, 255, 255, .2);
  --card-header-bg: var(--nb-card, #121214);
  --card-header-text: #ffffff;
  --card-body-bg: var(--nb-card, #121214);
  --card-body-text: #ffffff;
  --btn-accent-bg: var(--nb-gold, #ffd700);
  --btn-accent-text: #111;
  --btn-nav-bg: transparent;
  --btn-nav-text: #ffffff;
  --transition-speed: .2s;
  --glow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1) inset;
  --font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif)
}

body {
  margin: 0;
  padding: 0;
  background: #0b0b0c !important;
  background: var(--nb-bg, var(--bg)) !important;
  color: #ffffff !important;
  color: var(--nb-fg, var(--fg)) !important;
  font-family: var(--font-sans, var(--font-family)) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

/* HIGH CONTRAST FORCE - Override everything */
.card {
  background: #121214 !important;
  background: var(--nb-card) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border: 1px solid var(--nb-border) !important;
  color: #ffffff !important;
  color: var(--nb-fg) !important
}

.card-header {
  background: #121214 !important;
  background: var(--nb-card) !important;
  color: #ffffff !important;
  color: var(--nb-fg) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .2) !important
}

.card-body {
  background: #121214 !important;
  background: var(--nb-card) !important;
  color: #ffffff !important;
  color: var(--nb-fg) !important
}

.card-body p,
.card-body .text-secondary {
  color: #e0e0e0 !important;
  color: var(--nb-muted) !important
}

.container {
  max-width: 1100px;
  margin: 0 auto 10px;
  padding: 0 1rem
}

.site-header {
  background: linear-gradient(180deg, rgba(20, 20, 22, .92), rgba(20, 20, 22, 1));
  border-bottom: 1px solid var(--card-border);
  box-shadow: var(--glow);
  margin: 0;
  padding: 1rem 0;
  line-height: 1
}

.site-header h1,
.site-header h2,
.site-header h3,
.site-header p {
  margin: 0;
  padding: 0
}

.site-header .brand {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--fg);
  text-decoration: none;
  margin: 0;
  padding: 0;
  line-height: 1
}

.site-header .nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem
}

.site-footer,
.site-header .nav-list li {
  color: var(--card-header-text)
}

.site-footer {
  background-color: var(--card-header-bg);
  text-align: center;
  padding: 1rem 0
}

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--glow)
}

.card-header {
  background-color: var(--card-header-bg);
  color: var(--card-header-text);
  font-size: 1.2rem;
  font-weight: 900;
  text-align: center;
  padding: 1rem
}

.card-body {
  background-color: var(--card-body-bg);
  color: var(--card-body-text);
  padding: .75rem 1rem
}

.card-small {
  max-width: 300px;
  margin: auto;
  border: 2px solid var(--btn-accent-bg);
  box-shadow: 0 0 20px hsla(0, 0%, 100%, .2)
}

.primary-heading {
  font-size: 2rem;
  font-weight: 900;
  border-bottom: 2px solid var(--btn-accent-bg);
  padding-bottom: .5rem;
  margin-bottom: 1rem
}

.secondary-heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1rem
}

.card.purchased-card {
  background-color: #1b1b1d;
  border: 1px solid #2f2f33
}

.card.suggested-card {
  background-color: #fff !important;
  border: 2px solid #000 !important;
  color: #000 !important
}

.card.suggested-card .glow-text {
  color: #000 !important;
  text-shadow: none !important
}

.back-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important
}

.btn-custom {
  background-color: var(--btn-accent-bg) !important;
  border: 2px solid var(--btn-accent-bg) !important;
  color: var(--btn-accent-text) !important;
  padding: .7rem 1.15rem;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 10px 28px rgba(255, 215, 0, .28);
  transition: transform .15s ease, box-shadow .2s ease
}

.btn-custom:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(255, 215, 0, .42)
}

.btn-back {
  background-color: var(--btn-nav-bg) !important;
  border: 2px solid var(--btn-accent-bg) !important;
  color: var(--btn-nav-text) !important;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: transform .15s ease, box-shadow .2s ease
}

.btn-back:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 215, 0, .16)
}

.btn-action {
  padding: 5px 10px !important;
  font-size: .875rem;
  text-decoration: none;
  display: inline-block
}

.btn-custom.py-1.px-2 {
  padding: .25rem .5rem !important
}

.service-table-container {
  background-color: var(--card-bg);
  padding: 15px;
  border-radius: 14px;
  margin-top: 20px;
  box-shadow: var(--glow);
  border: 1px solid var(--card-border)
}

.video-preview {
  width: 100%;
  max-width: 480px;
  margin: 0 auto
}

.video-preview mux-player {
  width: 100%;
  height: auto
}

@media (max-width:576px) {
  .container {
    margin: 20px auto;
    padding: 0 10px
  }

  .card-header {
    font-size: 20px;
    padding: .75rem
  }

  .card-body {
    padding: 20px
  }

  .btn-action,
  .btn-back,
  .btn-custom {
    padding: 8px 16px !important;
    font-size: .9rem !important
  }

  h1 {
    font-size: 1.75rem
  }

  .modal-content {
    width: 95%;
    margin: 5% auto;
    padding: 1em;
    border-radius: 5px;
    z-index: 1057 !important
  }

  #booking-popup .modal-content {
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1057 !important
  }

  .fc {
    font-size: .9rem
  }

  .fc-daygrid-day-frame {
    padding: 2px
  }

  .fc-event,
  .fc-event-custom {
    font-size: .75rem;
    padding: 2px 4px
  }

  .fc-button {
    padding: .3rem .5rem !important;
    font-size: .8rem !important
  }

  .btn-group {
    display: flex;
    flex-direction: column
  }

  .btn-group .btn {
    width: 100%;
    padding: .75rem 1rem;
    margin: .3rem 0;
    font-size: 1rem
  }

  .modal-content h2 {
    font-size: 1.5rem
  }

  #terms-text {
    height: auto;
    max-height: 150px
  }

  .site-header {
    padding: .5rem 0 !important
  }

  .site-header .brand {
    font-size: 1rem !important
  }

  .site-header .btn {
    font-size: .75rem !important;
    padding: .375rem .5rem !important
  }
}

.glow-text h3,
.glow-text p,
.glow-text strong {
  color: var(--card-body-text);
  text-shadow: var(--glow)
}

.brand-glow {
  color: #fff !important;
  text-shadow: var(--glow) !important
}

.logged-in-text {
  color: #fff;
  text-shadow: var(--glow)
}

.fc {
  background-color: var(--card-bg) !important;
  color: var(--card-body-text) !important
}

.fc .fc-daygrid-day-number,
.fc .fc-toolbar-title {
  color: var(--card-body-text) !important;
  text-shadow: var(--glow) !important
}

.fc-button {
  color: var(--btn-accent-text) !important;
  border: none !important;
  box-shadow: var(--glow) !important
}

.fc-button,
.fc-event,
.fc-event-custom {
  background-color: var(--btn-accent-bg) !important
}

.fc-event,
.fc-event-custom {
  color: var(--btn-nav-text) !important;
  border: 1px solid var(--card-border) !important;
  text-shadow: var(--glow) !important;
  padding: 4px 6px;
  border-radius: 3px
}

.modal-content {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important
}

#confirmation-popup .popup-content,
.modal-content {
  color: var(--card-body-text) !important;
  box-shadow: var(--glow) !important
}

#confirmation-popup .popup-content {
  background: var(--card-bg) !important;
  border: 2px solid var(--btn-accent-bg) !important
}

.close {
  color: var(--card-body-text) !important;
  text-shadow: var(--glow) !important
}

.booking-input,
.option-select {
  display: block;
  width: 60%;
  margin: .75em auto;
  padding: .5em;
  font-size: 1em;
  border: 2px solid #00796b;
  border-radius: 5px;
  background-color: #e8f5e9;
  transition: all .3s ease
}

.booking-input:focus,
.option-select:focus {
  background-color: var(--card-body-bg) !important;
  color: var(--card-body-text) !important;
  border-color: var(--btn-accent-bg) !important;
  box-shadow: var(--glow) !important
}

.lesson-card {
  transition: opacity .3s ease
}

.lesson-card.in-progress {
  opacity: .8
}

.lesson-card.completed {
  opacity: .6
}

.lesson-card .overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: .9rem
}

.lesson-card .overlay.continue-watching {
  background: rgba(255, 255, 0, .8);
  color: #000
}

.lesson-card .overlay.watched {
  background: rgba(0, 255, 0, .8);
  color: #000
}

.video-card {
  position: relative;
  cursor: pointer;
  transition: transform .3s
}

.video-card:hover {
  transform: scale(1.15)
}

.video-title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: hsla(0, 0%, 8%, .8);
  color: #fff;
  padding: .5rem;
  font-size: .9rem;
  text-align: center
}

.course-title {
  color: #f5f5f5;
  font-weight: 700;
  text-shadow: 0 0 5px hsla(0, 0%, 100%, .8)
}

.btn-pink {
  background-color: #e83e8c;
  color: #fff
}

.newsletter-form input {
  max-width: 300px
}

/* Brand additions */
a {
  color: var(--btn-accent-bg);
  text-decoration: underline
}

a:hover {
  opacity: .9
}

.btn {
  display: inline-block;
  border-radius: 999px;
  border: 2px solid var(--card-border);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease
}

.btn-primary {
  background: var(--btn-accent-bg);
  border-color: var(--btn-accent-bg);
  color: var(--btn-accent-text) !important;
  font-weight: 800
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255, 215, 0, .3)
}

.btn-outline-secondary,
.btn-secondary {
  background: transparent;
  color: var(--card-header-text);
  border-color: var(--card-border)
}

.btn-outline-secondary:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 255, 255, .08)
}

.btn-danger {
  background: transparent;
  border-color: #ef4444;
  color: #ef4444
}

.btn-danger:hover {
  box-shadow: 0 8px 22px rgba(239, 68, 68, .25)
}

.table {
  color: var(--card-body-text)
}

.table {
  background-color: transparent !important
}

.table thead th {
  background: rgba(255, 255, 255, .04);
  color: var(--card-header-text);
  border-bottom: 1px solid var(--card-border)
}

.table tr {
  border-color: var(--card-border)
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  background: rgba(255, 255, 255, .02)
}

.table tbody tr {
  background-color: transparent !important
}

.table tbody td {
  background-color: rgba(255, 255, 255, .02) !important;
  color: var(--card-body-text) !important;
  vertical-align: middle
}

.badge-type {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .6rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .08));
  color: var(--card-header-text);
  font-size: .8rem
}

.badge-type-zoom_class {
  border-left: 4px solid var(--accent-zoom)
}

.badge-type-mux_class {
  border-left: 4px solid var(--accent-mux)
}

.badge-type-recurring {
  border-left: 4px solid var(--accent-schedule)
}

.badge-type-one_time {
  border-left: 4px solid var(--accent-schedule)
}

.badge-type-one_month_membership {
  border-left: 4px solid var(--btn-accent-bg)
}

.form-control,
.form-select {
  background: #1a1a1c;
  color: var(--card-body-text);
  border: 1px solid rgba(255, 255, 255, .16)
}

.form-control:focus,
.form-select:focus {
  background: #1a1a1c;
  color: var(--card-body-text);
  border-color: var(--btn-accent-bg);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .25)
}

.form-text {
  color: rgba(244, 244, 246, .85) !important
}

/* ensure help text readable on dark cards */
.text-muted {
  color: var(--nb-muted, #e0e0e0) !important
}

.alert-info {
  background: rgba(255, 215, 0, .08);
  color: var(--card-header-text);
  border: 1px solid var(--card-border)
}

.fc {
  background: var(--card-bg) !important;
  color: var(--card-header-text) !important;
  border-radius: 12px;
  border: 1px solid var(--card-border)
}

.fc-button {
  color: #111 !important;
  background: var(--btn-accent-bg) !important;
  border: none !important;
  border-radius: 999px !important
}

.fc .fc-daygrid-day-number,
.fc .fc-toolbar-title {
  color: var(--card-header-text) !important
}

.fc-event,
.fc-event-custom {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .08)) !important;
  color: var(--card-header-text) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 6px
}

/* Brand accent variables for service types */
:root {
  --accent-schedule: #3788d8;
  --accent-zoom: #ff5733;
  --accent-mux: #6f42c1
}

/* Visibility fixes on light containers */
.alert-light .btn-back {
  color: #111 !important;
  background: rgba(255, 215, 0, .12) !important;
  border-color: var(--btn-accent-bg) !important
}

.card .form-text,
.card .text-muted,
.card small {
  color: rgba(244, 244, 246, .85) !important
}

/* Tenant brand logo in header */
.brand-logo {
  height: 28px;
  max-height: 28px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  border-radius: 6px;
  padding: 2px;
  background: rgba(255, 255, 255, .02);
  box-shadow: 0 0 0 1px var(--card-border)
}

@media (max-width:576px) {
  .brand-logo {
    height: 24px;
    max-height: 24px
  }
}

/* Variant + shape helpers */
.brand-logo--dark {
  display: none
}

.theme-light .brand-logo--dark {
  display: inline
}

.theme-light .brand-logo--light {
  display: none
}

.brand-logo.is-circle {
  border-radius: 999px
}

.brand-logo.is-rounded {
  border-radius: 10px
}

/* --- Theme: Light overrides appended (keeps dark as default) --- */
.theme-light {
  --bg: #f6f7fb;
  --page-bg: #f6f7fb;
  --fg: #212529;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, .08);
  --card-header-bg: #ffffff;
  --card-header-text: #212529;
  --card-body-bg: #ffffff;
  --card-body-text: #212529;
  --btn-accent-bg: #ffd700;
  --btn-accent-text: #111;
  --btn-nav-bg: transparent;
  --btn-nav-text: #212529;
  --glow: 0 24px 64px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .06) inset
}

.theme-light .site-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), #fff);
  border-bottom: 1px solid rgba(0, 0, 0, .08)
}

.theme-light .brand-glow {
  color: #111 !important;
  text-shadow: none !important
}

.theme-light .logged-in-text {
  color: #111;
  text-shadow: none
}

.theme-light .text-white {
  color: #212529 !important
}

.theme-light .footer.bg-dark {
  background-color: #ffffff !important
}

.theme-light .footer.text-white {
  color: #212529 !important
}

.theme-light .text-muted {
  color: #3f474f !important
}

.theme-light .form-text {
  color: #3f474f
}

.theme-light .small.text-muted {
  color: #3f474f !important
}

.theme-light .form-check-label {
  color: #212529
}

.theme-light .alert-secondary {
  background-color: #f1f3f5;
  color: #212529;
  border-color: #e2e3e5
}

.theme-light .card-header {
  border-bottom: 1px solid rgba(0, 0, 0, .08)
}

.theme-light .alert-dark {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border-color: rgba(0, 0, 0, .1) !important
}

.theme-light .modal-content.bg-dark {
  background-color: #ffffff !important;
  color: #212529 !important
}

.brand-logo--dark {
  display: none
}

.theme-light .brand-logo--dark {
  display: inline
}

.theme-light .brand-logo--light {
  display: none
}

/* Light theme form controls */
.theme-light .form-control,
.theme-light .form-select,
.theme-light textarea,
.theme-light input[type="text"],
.theme-light input[type="email"],
.theme-light input[type="number"],
.theme-light input[type="password"],
.theme-light input[type="tel"],
.theme-light input[type="url"],
.theme-light select {
  background: #ffffff !important;
  color: #212529 !important;
  border: 1px solid rgba(0, 0, 0, .16) !important;
}

.theme-light .form-control:focus,
.theme-light .form-select:focus,
.theme-light textarea:focus,
.theme-light input[type="text"]:focus,
.theme-light input[type="email"]:focus,
.theme-light input[type="number"]:focus,
.theme-light input[type="password"]:focus,
.theme-light input[type="tel"]:focus,
.theme-light input[type="url"]:focus,
.theme-light select:focus {
  background: #ffffff !important;
  color: #212529 !important;
  border-color: var(--btn-accent-bg) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .25) !important;
}

.theme-light ::placeholder {
  color: #6c757d;
  opacity: 1;
}

/* --- Light theme enhanced visuals (unique, high-contrast, tasteful) --- */
html.theme-light {
  --bg: radial-gradient(1200px 600px at 10% -10%, #ffffff 0%, #f5f7fb 35%, #eef2f7 100%);
  --page-bg: var(--bg);
  --fg: #111418;
  --card-bg: #ffffff;
  --card-border: rgba(17, 19, 22, .08);
  --card-header-bg: #f8f9fc;
  --card-header-text: #0f1115;
  --card-body-bg: #ffffff;
  --card-body-text: #1a1e24;
  --btn-accent-bg: #ffd700;
  --btn-accent-text: #111;
  --btn-nav-bg: rgba(17, 24, 39, .03);
  --btn-nav-text: #0f1115;
  --glow: 0 18px 36px rgba(17, 19, 22, .08), 0 0 0 1px rgba(17, 19, 22, .05) inset
}

html.theme-light body {
  position: relative;
  background: var(--bg);
  color: var(--fg)
}

html.theme-light body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(600px 300px at 18% 0%, rgba(255, 195, 113, .12), transparent 60%),
    radial-gradient(600px 300px at 82% 6%, rgba(154, 205, 255, .12), transparent 60%),
    radial-gradient(700px 360px at 50% 96%, rgba(255, 220, 130, .14), transparent 60%)
}

html.theme-light .site-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .98));
  border-bottom: 1px solid var(--card-border);
  box-shadow: var(--glow)
}

html.theme-light .card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 30px rgba(17, 19, 22, .06), 0 2px 8px rgba(17, 19, 22, .04)
}

html.theme-light .card-header {
  background: var(--card-header-bg);
  color: var(--card-header-text)
}

html.theme-light .card-body {
  background: var(--card-body-bg);
  color: var(--card-body-text)
}

html.theme-light .brand-glow {
  color: #0f1115 !important;
  text-shadow: 0 14px 40px rgba(17, 19, 22, .08) !important
}

html.theme-light .btn-back {
  background-color: var(--btn-nav-bg) !important;
  color: var(--btn-nav-text) !important
}

html.theme-light .fc {
  background: var(--card-bg) !important;
  color: var(--card-body-text) !important
}

/* Resource badge (public + customer calendars) */
.fc-event-custom .ec-resource {
  display: inline-block;
  font-size: .75rem;
  margin-left: 6px;
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  padding: 1px 6px;
  border-radius: 999px
}

html.theme-light .fc-event-custom .ec-resource {
  color: #495057;
  border-color: rgba(0, 0, 0, .18);
  background: rgba(0, 0, 0, .06)
}

.fc .fc-timegrid-event .ec-resource {
  display: block;
  margin-top: 2px;
  margin-left: 0
}