/* =========================================================
   SIX NINE — BOOKING
   File: assets/css/base/booking.css
   ========================================================= */


/* =========================================================
   MODAL ROOT
   ========================================================= */

.booking-modal {
  position: fixed;

  inset: 0;

  z-index: var(--z-modal);

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 560px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity
      var(--duration-normal)
      var(--ease-premium),
    visibility
      var(--duration-normal)
      var(--ease-premium);
}

.booking-modal.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.booking-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(
      12,
      12,
      13,
      0.62
    );

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  opacity: 0;

  transition:
    opacity
      500ms
      var(--ease-premium);
}

.booking-modal.is-open
.booking-modal__backdrop {
  opacity: 1;
}


/* =========================================================
   PANEL
   ========================================================= */

.booking-modal__panel {
  position: relative;

  grid-column: 2;

  width: 100%;
  height: 100dvh;

  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr);

  background:
    var(--color-ivory);

  color:
    var(--color-black);

  border-left:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  box-shadow:
    -30px
    0
    80px
    rgba(
      0,
      0,
      0,
      0.18
    );

  transform:
    translateX(100%);

  transition:
    transform
      700ms
      var(--ease-premium);
}

.booking-modal.is-open
.booking-modal__panel {
  transform:
    translateX(0);
}


/* =========================================================
   HEADER
   ========================================================= */

.booking-modal__header {
  position: sticky;

  top: 0;

  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  min-height: 74px;

  padding:
    0
    24px;

  border-bottom:
    1px solid
    var(--border-light);

  background:
    rgba(
      242,
      238,
      229,
      0.94
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.booking-modal__header-left {
  display: flex;
  align-items: center;

  gap: 12px;
}

.booking-modal__brand {
  font-family:
    var(--font-display);

  font-size: 1.7rem;
  font-weight: 500;

  line-height: 1;

  letter-spacing: -0.05em;
}

.booking-modal__back,
.booking-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  flex-shrink: 0;

  border:
    1px solid
    var(--border-light);

  border-radius: 50%;

  color:
    var(--color-black);

  transition:
    background-color
      var(--duration-fast)
      ease,
    border-color
      var(--duration-fast)
      ease,
    transform
      var(--duration-fast)
      ease;
}

.booking-modal__back:hover,
.booking-modal__close:hover {
  background:
    var(--color-white);

  border-color:
    rgba(
      12,
      12,
      13,
      0.22
    );
}

.booking-modal__back:hover {
  transform:
    translateX(-1px);
}

.booking-modal__close:hover {
  transform:
    rotate(4deg);
}

.booking-modal__back svg,
.booking-modal__close svg {
  width: 18px;
  height: 18px;
}


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

.booking-modal__content {
  min-height: 0;

  overflow-y: auto;
  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color:
    var(--color-sand)
    transparent;
}


/* =========================================================
   PICKER
   ========================================================= */

.booking-picker {
  display: grid;

  gap: 54px;

  padding:
    48px
    26px
    34px;
}

.booking-picker__intro {
  display: grid;

  gap: 18px;

  max-width: 440px;
}

.booking-picker__title {
  max-width: 470px;
}

.booking-picker__intro p {
  max-width: 400px;
}


/* =========================================================
   EXPERIENCE LIST
   ========================================================= */

.booking-picker__list {
  display: grid;

  border-top:
    1px solid
    var(--border-light);
}


/* =========================================================
   EXPERIENCE OPTION
   ========================================================= */

.booking-option {
  position: relative;

  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr)
    26px;

  gap: 16px;

  align-items: center;

  width: 100%;

  min-height: 112px;

  padding:
    20px
    4px;

  border-bottom:
    1px solid
    var(--border-light);

  text-align: left;

  overflow: hidden;

  transition:
    padding-left
      var(--duration-normal)
      var(--ease-premium),
    background-color
      var(--duration-normal)
      var(--ease-premium);
}

.booking-option::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 2px;

  background:
    var(--color-gold);

  transform:
    scaleY(0);

  transform-origin: center;

  transition:
    transform
      var(--duration-normal)
      var(--ease-premium);
}

.booking-option--padel::before {
  background:
    var(--color-padel);
}

.booking-option--coffee::before {
  background:
    var(--color-coffee);
}

.booking-option--pilates::before {
  background:
    var(--color-pilates);
}

.booking-option__number {
  align-self: start;

  padding-top: 4px;

  color:
    var(--text-muted);

  font-size: 0.6rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.booking-option__meta {
  min-width: 0;

  display: grid;

  gap: 5px;
}

.booking-option__eyebrow {
  color:
    var(--text-muted);

  font-size: 0.56rem;
  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.booking-option__name {
  font-family:
    var(--font-display);

  font-size:
    clamp(
      1.65rem,
      2.5vw,
      2.2rem
    );

  font-weight: 500;

  line-height: 0.98;

  letter-spacing: -0.035em;
}

.booking-option__action {
  color:
    var(--text-secondary);

  font-size: 0.67rem;

  line-height: 1.5;
}

.booking-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  color:
    var(--text-secondary);

  transition:
    transform
      var(--duration-normal)
      var(--ease-premium),
    color
      var(--duration-normal)
      var(--ease-premium);
}

.booking-option__icon svg {
  width: 18px;
  height: 18px;
}

.booking-option:hover {
  padding-left: 12px;

  background:
    rgba(
      255,
      255,
      255,
      0.38
    );
}

.booking-option:hover::before {
  transform:
    scaleY(1);
}

.booking-option:hover
.booking-option__icon {
  color:
    var(--color-black);

  transform:
    translateX(4px);
}


/* =========================================================
   PADEL METHOD VIEW
   ========================================================= */

.booking-padel {
  display: grid;

  gap: 46px;

  padding:
    48px
    26px
    36px;
}

.booking-padel__intro {
  display: grid;

  gap: 18px;
}

.booking-padel__intro p {
  max-width: 410px;
}


/* =========================================================
   PADEL METHODS
   ========================================================= */

.booking-padel__methods {
  display: grid;

  gap: 12px;
}

.booking-method {
  position: relative;

  display: grid;
  grid-template-columns:
    34px
    minmax(0, 1fr)
    42px;

  gap: 18px;

  align-items: start;

  min-height: 190px;

  padding:
    24px;

  border:
    1px solid
    var(--border-light);

  background:
    rgba(
      255,
      255,
      255,
      0.22
    );

  text-align: left;

  overflow: hidden;

  transition:
    background-color
      var(--duration-normal)
      var(--ease-premium),
    border-color
      var(--duration-normal)
      var(--ease-premium),
    transform
      var(--duration-normal)
      var(--ease-premium);
}

.booking-method::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -160px;
  bottom: -170px;

  border-radius: 50%;

  opacity: 0;

  transform:
    scale(0.8);

  transition:
    opacity
      500ms
      var(--ease-premium),
    transform
      700ms
      var(--ease-premium);

  pointer-events: none;
}

.booking-method--direct::after {
  background:
    radial-gradient(
      circle,
      rgba(255, 46, 138, 0.14),
      transparent 70%
    );
}

.booking-method--ayo::after {
  background:
    radial-gradient(
      circle,
      rgba(185, 154, 91, 0.16),
      transparent 70%
    );
}

.booking-method__index {
  position: relative;

  z-index: 2;

  color:
    var(--text-muted);

  font-size: 0.6rem;
  font-weight: 700;

  letter-spacing: 0.12em;
}

.booking-method__content {
  position: relative;

  z-index: 2;

  display: grid;

  gap: 8px;
}

.booking-method__eyebrow {
  color:
    var(--text-muted);

  font-size: 0.56rem;
  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.booking-method__title {
  font-family:
    var(--font-display);

  font-size:
    clamp(
      2rem,
      3vw,
      2.8rem
    );

  font-weight: 500;

  line-height: 0.95;

  letter-spacing: -0.04em;
}

.booking-method__description {
  max-width: 330px;

  color:
    var(--text-secondary);

  font-size: 0.75rem;

  line-height: 1.65;
}

.booking-method__note {
  margin-top: 6px;

  color:
    var(--text-muted);

  font-size: 0.6rem;
  font-weight: 600;

  letter-spacing: 0.05em;
}

.booking-method__icon {
  position: relative;

  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border:
    1px solid
    var(--border-light);

  border-radius: 50%;

  color:
    var(--color-black);

  transition:
    background-color
      var(--duration-normal)
      var(--ease-premium),
    border-color
      var(--duration-normal)
      var(--ease-premium),
    transform
      var(--duration-normal)
      var(--ease-premium);
}

.booking-method__icon svg {
  width: 18px;
  height: 18px;
}

.booking-method:hover {
  border-color:
    rgba(
      12,
      12,
      13,
      0.2
    );

  background:
    var(--color-white);

  transform:
    translateY(-2px);
}

.booking-method:hover::after {
  opacity: 1;

  transform:
    scale(1.2);
}

.booking-method:hover
.booking-method__icon {
  background:
    var(--color-black);

  border-color:
    var(--color-black);

  color:
    var(--color-white);

  transform:
    translate(
      2px,
      -2px
    );
}

.booking-padel__notice {
  color:
    var(--text-muted);

  font-size: 0.68rem;

  line-height: 1.65;
}


/* =========================================================
   FORM VIEW
   ========================================================= */

.booking-form-view {
  display: grid;

  gap: 42px;

  padding:
    48px
    26px
    42px;
}

.booking-form-view__intro {
  display: grid;

  gap: 18px;
}

.booking-form-view__intro p {
  max-width: 430px;
}


/* =========================================================
   FORM
   ========================================================= */

.booking-form {
  display: grid;

  gap: 36px;
}

.booking-form__grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    24px
    18px;
}

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


/* =========================================================
   BOOKING FORM OVERRIDES
   ========================================================= */

.booking-form
.form-group {
  gap: 8px;
}

.booking-form
.form-label span {
  color:
    var(--color-gold);
}

.booking-form
.form-control {
  min-height: 52px;

  padding:
    13px
    0;

  border:
    0;

  border-bottom:
    1px solid
    var(--border-light);

  background:
    transparent;

  transition:
    border-color
      var(--duration-fast)
      ease;
}

.booking-form
.form-control:hover {
  border-color:
    rgba(
      12,
      12,
      13,
      0.32
    );
}

.booking-form
.form-control:focus {
  border-color:
    var(--color-black);
}

.booking-form
textarea.form-control {
  min-height: 120px;
}

.booking-form
select.form-control {
  cursor: pointer;
}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.booking-form__footer {
  display: grid;

  gap: 18px;

  padding-top: 4px;
}

.booking-form__notice {
  max-width: 400px;

  color:
    var(--text-muted);

  font-size: 0.66rem;

  line-height: 1.6;
}

.booking-form__submit {
  width: 100%;

  min-height: 52px;
}

.booking-form__submit
.btn-icon {
  margin-left: auto;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.booking-modal__content::-webkit-scrollbar {
  width: 5px;
}

.booking-modal__content::-webkit-scrollbar-track {
  background:
    transparent;
}

.booking-modal__content::-webkit-scrollbar-thumb {
  background:
    var(--color-sand);

  border-radius:
    var(--radius-pill);
}


/* =========================================================
   FOCUS
   ========================================================= */

.booking-option:focus-visible,
.booking-method:focus-visible {
  outline:
    2px solid
    var(--color-gold);

  outline-offset: -2px;
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {
  .booking-option:hover {
    padding-left: 4px;

    background:
      transparent;
  }

  .booking-option:hover::before {
    transform:
      scaleY(0);
  }

  .booking-option:hover
  .booking-option__icon {
    color:
      var(--text-secondary);

    transform:
      none;
  }

  .booking-method:hover {
    background:
      rgba(
        255,
        255,
        255,
        0.22
      );

    border-color:
      var(--border-light);

    transform:
      none;
  }

  .booking-method:hover::after {
    opacity: 0;

    transform:
      scale(0.8);
  }

  .booking-method:hover
  .booking-method__icon {
    background:
      transparent;

    border-color:
      var(--border-light);

    color:
      var(--color-black);

    transform:
      none;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .booking-modal,
  .booking-modal__backdrop,
  .booking-modal__panel,
  .booking-modal__back,
  .booking-modal__close,
  .booking-option,
  .booking-option::before,
  .booking-option__icon,
  .booking-method,
  .booking-method::after,
  .booking-method__icon {
    transition:
      none !important;
  }
}