/* Coach overlay extras (index.html only): booking + coach switching motion. */

/* Overlay motion (coach switching) */
.coach-overlay-scope .coach-modal-inner.overlay-slide-in-up {
  transform: translateY(36px) translateZ(0);
  opacity: 1;
}

.coach-overlay-scope .coach-modal-inner.overlay-slide-in-down {
  transform: translateY(-36px) translateZ(0);
  opacity: 1;
}

.coach-overlay-scope .coach-modal-inner.overlay-slide-active {
  transform: translateY(0) translateZ(0);
  transition: transform 0.26s cubic-bezier(.22,.61,.36,1);
}

.coach-overlay-scope .overlay-exit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* behind the incoming panel */
  will-change: transform, opacity;
  background: var(--guided-surface-bg, #fff);
  border-radius: var(--guided-surface-radius, 18px);
  border: 1px solid var(--guided-surface-border, rgba(54, 89, 69, 0.14));
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
  transform: scale(1.02) translateZ(0);
  transition: transform 0.26s cubic-bezier(.22,.61,.36,1), opacity 0.26s ease-out;
}

.coach-overlay-scope .overlay-exit > * {
  visibility: hidden;
}

.coach-overlay-scope .overlay-exit.overlay-exit-up {
  transform: translateY(-16%) scale(1.02) translateZ(0);
  opacity: 0;
}

.coach-overlay-scope .overlay-exit.overlay-exit-down {
  transform: translateY(16%) scale(1.02) translateZ(0);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Keep transitions technically present so JS transitionend cleanup still fires. */
  .coach-overlay-scope .coach-modal-inner.overlay-slide-active {
    transition-duration: 1ms !important;
  }

  .coach-overlay-scope .coach-modal-inner.overlay-slide-in-up,
  .coach-overlay-scope .coach-modal-inner.overlay-slide-in-down {
    transform: translateY(0) translateZ(0) !important;
    opacity: 1 !important;
  }

  .coach-overlay-scope .overlay-exit {
    transition-duration: 1ms !important;
  }
}

/* Live booking request: reduce accidental interactions while submitting */
.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] .close-button:disabled,
.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] .overlay-view-nav__arrow:disabled {
  cursor: wait;
  opacity: 0.28;
}

.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] .overlay-top[aria-disabled="true"],
.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] .details-top[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.62;
}

.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] .booking-slot[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.46;
}

.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] #bookingForm input:disabled,
.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] #bookingForm textarea:disabled {
  cursor: wait;
  opacity: 0.72;
}

.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] .overlay-top[aria-disabled="true"]:focus-visible,
.coach-overlay-scope .coach-modal-inner[data-booking-request-state="submitting"] .details-top[aria-disabled="true"]:focus-visible {
  outline-color: rgba(45, 92, 59, 0.18);
}

/* Keep close button usable during nudge hints (mobile taps should work immediately). */
.coach-overlay-scope .overlay-nudge-once .close-button,
.coach-overlay-scope .overlay-nudge-once.close-button {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Only the booking textarea scrolls; prevent scroll chaining into the overlay on iOS. */
.coach-overlay-scope #bookingClientMessage {
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.coach-overlay-scope #bookingClientMessage::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* View switching: booking panel (profile preview does not include booking). */
.coach-overlay-scope .overlay-panel--booking {
  display: flex;
  flex-direction: column;
}

.coach-overlay-scope .overlay-body--booking {
  padding-top: 0.6rem;
}

/* Booking footer */
.coach-overlay-scope .overlay-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 1) 65%);
}

.coach-overlay-scope .overlay-footer .booking-submit {
  margin: 0.5rem auto 0;
}

.coach-overlay-scope .overlay-footer .form-status {
  width: 100%;
  margin: 0;
}

.coach-overlay-scope .overlay-footer--booking {
  padding-bottom: 0.2rem;
}

/* Slot + overlay nudge hints (mobile) */
@media (max-width: 500px) {
  .coach-overlay-scope .overlay-footer {
    margin-top: 0;
    padding: 0;
  }

  @keyframes slot-wiggle {
    0% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
    100% { transform: translateX(0); }
  }

  .coach-overlay-scope .slot-wiggle-once {
    animation: slot-wiggle 900ms ease-out 1;
    will-change: transform;
    transform: translateZ(0);
    transform-origin: 50% 50%;
  }

  @keyframes overlay-nudge {
    0% { transform: translateY(0); }
    22% { transform: translateY(-10px); }
    45% { transform: translateY(10px); }
    70% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }

  .coach-overlay-scope .overlay-nudge-once {
    animation: overlay-nudge 920ms ease-out 1;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-overlay-scope .slot-wiggle-once,
  .coach-overlay-scope .overlay-nudge-once {
    animation: none;
  }
}