/*
 * The free-trial booking modal.
 *
 * Lifted out of style.css so the blog can use it. A reader who reaches the end
 * of "Is BJJ Good for Kids with ADHD?" and decides to come in should be able to
 * book from where they are, rather than being thrown back to the front page to
 * start again, which is what "Book a Free Trial →" used to do.
 *
 * Loaded by index.html and by every blog post, alongside booking.js.
 */

/* ========================================
   BOOKING MODAL
   ======================================== */

/* Overlay */
.booking-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
}

.booking-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Modal Card */
.booking-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh; max-height: 90dvh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-overlay.open .booking-modal {
  transform: translateY(0) scale(1);
}

/* Close button */
.booking-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
}

.booking-modal__close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text);
}

/* Content Container */
#bookingContent {
  padding: 32px 28px;
}

/* Step header */
.booking-step-header {
  text-align: center;
  margin-bottom: 24px;
}

.booking-step-header h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}

.booking-step-header p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* === STATE A: CLASS PICKER === */

.booking-category-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

.booking-category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  color: var(--text);
  font-family: var(--font-body);
}

.booking-category-btn:hover {
  border-color: var(--gold);
  background: rgba(200, 162, 76, 0.06);
  transform: translateY(-2px);
}

.booking-category-btn__icon {
  font-size: 28px;
  line-height: 1;
}

.booking-category-btn__label {
  font-size: 15px;
  font-weight: 600;
}

/* Class list inside picker */
.booking-class-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0;
}

.booking-class-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: var(--font-body);
}

.booking-class-row:hover {
  border-color: var(--gold);
  background: rgba(200, 162, 76, 0.06);
}

.booking-class-row__day {
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  min-width: 32px;
}

.booking-class-row__time {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 70px;
}

.booking-class-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}

.booking-class-row__arrow {
  font-size: 14px;
  color: var(--text-faint);
  transition: transform 0.2s;
}

.booking-class-row:hover .booking-class-row__arrow {
  transform: translateX(3px);
  color: var(--gold);
}

.booking-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin-bottom: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.2s;
}

.booking-back-btn:hover {
  color: var(--gold);
}

/* === STATE B: BOOKING FORM === */

.booking-class-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(200, 162, 76, 0.1);
  border: 1px solid rgba(200, 162, 76, 0.25);
  border-radius: 8px;
  margin-bottom: 4px;
}

.booking-class-badge__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  font-family: var(--font-body);
}

.booking-class-badge__type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.booking-class-badge__type--gi {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.booking-class-badge__type--nogi {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.booking-class-info {
  text-align: center;
  margin-bottom: 24px;
}

.booking-class-info__datetime {
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  margin: 8px 0 2px;
  font-family: var(--font-body);
}

.booking-class-info__next {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-body);
}

/* Which occurrence of the class — a month, not a list.
   "Which Friday of the month" is a question people answer by looking at a
   month, so the control is a month. Every day is drawn so the shape is the
   familiar one; only the class's own weekday is a control. */
.booking-cal {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0; /* a fieldset will not shrink below its content without this */
}

.booking-cal__legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-body);
}

.booking-cal__body {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.booking-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.booking-cal__month {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.booking-cal__nav {
  /* 40px rather than the 44 the chips used: these sit in their own row with
     nothing beside them, so a miss costs a tap and not a wrong field. */
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.booking-cal__nav:hover:not(:disabled) { border-color: var(--gold, #C8A24C); }

/* Disabled at the ends of the bookable range rather than hidden: a control
   that vanishes moves everything under it, and the thumb already travelling
   towards it presses whatever slid into its place. */
.booking-cal__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.booking-cal__note {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.booking-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.booking-cal__dow {
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint, #555);
  padding-bottom: 4px;
}

.booking-cal__pad { display: block; }

.booking-cal__day {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Square cells, so seven of them fit any phone without a horizontal scroll
     and the grid reads as a calendar rather than a list of buttons. */
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 14px;
}

/* Not a disabled button: there IS a class on Wednesday, it is simply not this
   one, and a greyed-out control says the academy is shut. Plain text. */
.booking-cal__day--off {
  color: var(--text-faint, #555);
}

/* A class day the academy is shut for. Struck through rather than merely
   dimmed: a bare grey number is indistinguishable from the Tuesdays either
   side of it, and somebody hunting for the second Friday in July needs to see
   that it exists and is closed, not that it silently vanished. */
.booking-cal__day--shut {
  color: var(--text-faint, #555);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: default;
}

.booking-cal__day--open {
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.booking-cal__day--open:hover { border-color: var(--gold, #C8A24C); }

/* Hidden from sight, NOT from the keyboard or the accessibility tree —
   display:none would take the whole group out of the tab order and leave the
   calendar mouse-only. */
.booking-cal__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.booking-cal__radio:checked + .booking-cal__day--open {
  background: var(--gold, #C8A24C);
  border-color: var(--gold, #C8A24C);
  color: #17120b;
}

/* Drawn on the label, because the input it belongs to is the invisible one. */
.booking-cal__radio:focus-visible + .booking-cal__day--open {
  outline: 2px solid var(--gold, #C8A24C);
  outline-offset: 2px;
}

/* The full date, for a screen reader. The visible cell is a bare number, which
   on its own says nothing about which month or weekday it belongs to. */
.booking-cal__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Form inputs */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.booking-form__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Says what the phone number will be used for, immediately above the button
   that hands it over. Quiet, but not hidden: an opt-out somebody has to hunt
   for is the thing a carrier counts against the number that sent it. */
.booking-form__consent {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint, #8A8A8A);
  margin: -2px 0 2px;
}

.booking-form__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-body);
}

.booking-form__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
}

.booking-form__input::placeholder {
  color: var(--text-faint);
}

.booking-form__input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 162, 76, 0.15);
}

.booking-form__input.is-error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}

.booking-form__error {
  font-size: 12px;
  color: var(--red);
  font-family: var(--font-body);
  min-height: 0;
  overflow: hidden;
  transition: min-height 0.2s;
}

/* Submit button */
.booking-submit-btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 0 24px;
  background: var(--gold);
  color: #0A0A0A;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  letter-spacing: 0.02em;
}

.booking-submit-btn:hover {
  background: var(--gold-hover);
}

.booking-submit-btn:active {
  transform: scale(0.98);
}

.booking-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Spinner */
.booking-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(10, 10, 10, 0.3);
  border-top-color: #0A0A0A;
  border-radius: 50%;
  animation: bookingSpin 0.6s linear infinite;
}

@keyframes bookingSpin {
  to { transform: rotate(360deg); }
}

/* === SUCCESS STATE === */

.booking-success {
  text-align: center;
  padding: 20px 0;
}

.booking-success__check {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(200, 162, 76, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bookingCheckPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-success__check svg {
  width: 32px;
  height: 32px;
}

@keyframes bookingCheckPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.booking-success h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.booking-success__detail {
  font-size: 15px;
  color: var(--text);
  font-family: var(--font-body);
  margin: 0 0 4px;
}

.booking-success__email-note {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-body);
  margin: 0 0 24px;
}

.booking-success__close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.2s;
}

.booking-success__close-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* === ERROR STATE === */

.booking-error {
  text-align: center;
  padding: 20px 0;
}

.booking-error__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(231, 76, 60, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.booking-error h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.booking-error p {
  font-size: 14px;
  color: var(--text-muted);
  font-family: var(--font-body);
  margin: 0 0 20px;
}

.booking-error__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.booking-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: var(--gold);
  color: #0A0A0A;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.booking-retry-btn:hover {
  background: var(--gold-hover);
}

/* === STATE C: FRIDAY ONLY === */

.booking-kidstrial-info {
  text-align: center;
  margin-bottom: 20px;
}

.booking-kidstrial-info__icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.booking-kidstrial-info p {
  font-size: 14px;
  color: var(--text-muted);
  font-family: var(--font-body);
  line-height: 1.6;
  margin: 0 0 12px;
}

.booking-kidstrial-info__date {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(200, 162, 76, 0.1);
  border: 1px solid rgba(200, 162, 76, 0.2);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  font-family: var(--font-body);
}

.booking-kidstrial-classes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.booking-kidstrial-class {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-body);
}

.booking-kidstrial-class__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.booking-kidstrial-class__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.booking-kidstrial-class__time {
  font-size: 13px;
  color: var(--text-muted);
}

/* The next date this class runs. Per class, not per panel: the list spans a
   Friday and a Saturday, so one date above the whole list would be wrong for
   half of it. */
.booking-kidstrial-class__date {
  font-size: 12px;
  color: var(--gold);
}

.booking-kidstrial-class__btn {
  padding: 8px 16px;
  background: var(--gold);
  color: #0A0A0A;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.booking-kidstrial-class__btn:hover {
  background: var(--gold-hover);
}

/* === CONTENT TRANSITION === */

.booking-content-enter {
  animation: bookingFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bookingFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === SCROLLBAR === */
.booking-modal::-webkit-scrollbar {
  width: 6px;
}
.booking-modal::-webkit-scrollbar-track {
  background: transparent;
}
.booking-modal::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

/* === MOBILE (375px) === */
@media (max-width: 600px) {
  .booking-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .booking-modal {
    max-width: 100%;
    max-height: 92vh; max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }

  .booking-overlay.open .booking-modal {
    transform: translateY(0);
  }

  #bookingContent {
    padding: 28px 20px 36px;
  }

  .booking-step-header h3 {
    font-size: 20px;
  }

  .booking-category-btns {
    gap: 10px;
  }

  .booking-category-btn {
    padding: 20px 12px;
  }

  .booking-kidstrial-class {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .booking-kidstrial-class__btn {
    width: 100%;
    text-align: center;
  }
}