/* =========================================================
   TNAXIS BOOKING PAGE
   ========================================================= */

.booking-page {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--brand-rgb), 0.14),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #0A0810 0%,
      #110D19 55%,
      #0A0810 100%
    );
}


/* =========================================================
   MAIN PAGE
   ========================================================= */

.booking-main {
  width: 100%;
  max-width: 1050px;

  margin: 0 auto;

  padding: 90px 30px 100px;
}


/* =========================================================
   INTRO
   ========================================================= */

.booking-intro {
  max-width: 760px;

  margin: 0 auto 50px;

  text-align: center;
}


.booking-intro h1 {
  margin-bottom: 20px;

  color: var(--white);

  font-size: clamp(42px, 6vw, 64px);

  line-height: 1.05;

  letter-spacing: -2.5px;

  font-weight: 750;
}


.booking-description {
  max-width: 680px;

  margin: 0 auto;

  color: var(--text-secondary);

  font-size: 17px;

  line-height: 1.75;
}


.booking-benefits {
  display: flex;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  gap: 25px;

  margin-top: 30px;
}


.booking-benefit {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #D7DCE4;

  font-size: 13px;

  font-weight: 500;
}


.booking-benefit span {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 21px;

  height: 21px;

  border-radius: 50%;

  background: rgba(var(--accent-rgb), 0.12);

  color: var(--accent);

  font-size: 11px;

  font-weight: 800;
}


/* =========================================================
   BOOKING CARD
   ========================================================= */

.booking-card {
  width: 100%;

  max-width: 850px;

  margin: 0 auto;

  padding: 42px;

  background: rgba(25, 20, 34, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 20px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.28),
    0 0 60px rgba(var(--brand-rgb), 0.04);
}


/* =========================================================
   PROGRESS INDICATOR
   ========================================================= */

.booking-progress {
  display: flex;

  align-items: flex-start;

  justify-content: center;

  max-width: 520px;

  margin: 0 auto 50px;
}


.progress-item {
  min-width: 75px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  color: #7F8792;

  font-size: 11px;

  font-weight: 600;
}


.progress-circle {
  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #292231;

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

  color: #9DA5AF;

  font-size: 12px;

  font-weight: 700;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}


.progress-item.active {
  color: #DCD5E8;
}


.progress-item.active .progress-circle {
  background: var(--brand);

  color: var(--on-brand);

  border-color: var(--brand);

  box-shadow:
    0 6px 20px rgba(var(--brand-rgb), 0.30);
}


.progress-item.complete .progress-circle {
  background: rgba(var(--accent-rgb), 0.15);

  border-color: rgba(var(--accent-rgb), 0.30);

  color: var(--accent);
}


.progress-line {
  width: 100px;

  height: 1px;

  margin-top: 17px;

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


/* =========================================================
   BOOKING STEPS
   ========================================================= */

.booking-step {
  display: none;
}


.booking-step.active {
  display: block;
}


.booking-step-header {
  margin-bottom: 32px;

  text-align: center;
}


.booking-step-header h2 {
  margin-bottom: 10px;

  color: var(--white);

  font-size: 29px;

  line-height: 1.2;

  letter-spacing: -0.8px;
}


.booking-step-header p {
  color: var(--text-secondary);

  font-size: 14px;

  line-height: 1.6;
}


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

.form-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;
}


.form-group {
  margin-bottom: 20px;
}


.form-group label {
  display: block;

  margin-bottom: 8px;

  color: #E7EAF0;

  font-size: 13px;

  font-weight: 600;
}


.form-group label > span {
  color: var(--brand-light);
}


.form-group label .optional {
  color: #858D98;

  font-weight: 400;
}


.form-group input,
.form-group select {
  width: 100%;

  height: 50px;

  padding: 0 15px;

  outline: none;

  background: #100D16;

  color: #F4F6F9;

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 9px;

  font-family: inherit;

  font-size: 14px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


.form-group input::placeholder {
  color: #686F79;
}


.form-group select {
  cursor: pointer;
}


.form-group input:hover,
.form-group select:hover {
  border-color: rgba(255, 255, 255, 0.18);
}


.form-group input:focus,
.form-group select:focus {
  background: #14101B;

  border-color: var(--brand);

  box-shadow:
    0 0 0 3px rgba(var(--brand-rgb), 0.12);
}


.form-action {
  display: flex;

  justify-content: flex-end;

  margin-top: 12px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.booking-primary-button {
  min-width: 220px;

  padding: 14px 22px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  border: none;

  border-radius: 9px;

  background: var(--brand);

  color: var(--on-brand);

  font-family: inherit;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 10px 28px rgba(var(--brand-rgb), 0.25);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}


.booking-primary-button:hover:not(:disabled) {
  background: var(--brand-hover);

  transform: translateY(-2px);

  box-shadow:
    0 14px 34px rgba(var(--brand-rgb), 0.35);
}


.booking-primary-button:disabled {
  opacity: 0.4;

  cursor: not-allowed;

  box-shadow: none;
}


.booking-secondary-button {
  display: inline-flex;

  justify-content: center;

  align-items: center;

  padding: 13px 22px;

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 9px;

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

  color: #E9EDF3;

  font-size: 14px;

  font-weight: 600;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}


.booking-secondary-button:hover {
  transform: translateY(-2px);

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


.back-button {
  margin-bottom: 25px;

  padding: 0;

  border: none;

  background: transparent;

  color: #A9B0BA;

  font-family: inherit;

  font-size: 13px;

  cursor: pointer;

  transition: color 0.2s ease;
}


.back-button:hover {
  color: var(--white);
}


/* =========================================================
   SCHEDULER
   ========================================================= */

.scheduler-layout {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 25px;
}


.date-selection,
.time-selection {
  padding: 22px;

  background: #100D16;

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

  border-radius: 13px;
}


.date-selection h3,
.time-selection h3 {
  margin-bottom: 17px;

  color: #EDEFF3;

  font-size: 14px;

  font-weight: 600;
}


.date-options,
.time-options {
  display: flex;

  flex-direction: column;

  gap: 9px;
}


.date-option,
.time-option {
  width: 100%;

  padding: 13px 15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 8px;

  background: #191422;

  color: #D9DEE5;

  font-family: inherit;

  font-size: 13px;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.date-option:hover,
.time-option:hover {
  transform: translateY(-1px);

  background: #211A2D;

  border-color: rgba(var(--brand-rgb), 0.40);
}


.date-option.selected,
.time-option.selected {
  background: rgba(var(--brand-rgb), 0.15);

  border-color: var(--brand);

  color: #EEE9FF;
}


.date-day {
  font-weight: 600;
}


.date-number {
  color: #969EAA;

  font-size: 12px;
}


.schedule-placeholder {
  padding: 25px 10px;

  color: #777F8A;

  font-size: 13px;

  line-height: 1.6;

  text-align: center;
}


/* =========================================================
   SELECTED APPOINTMENT
   ========================================================= */

.selected-appointment {
  display: none;

  margin-top: 22px;

  padding: 15px 18px;

  background: rgba(var(--accent-rgb), 0.08);

  border: 1px solid rgba(var(--accent-rgb), 0.18);

  border-radius: 10px;
}


.selected-appointment.visible {
  display: block;
}


.selected-label {
  display: block;

  margin-bottom: 3px;

  color: #9992A5;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.selected-appointment strong {
  color: #E9E3F4;

  font-size: 14px;
}


.schedule-actions {
  display: flex;

  justify-content: flex-end;

  margin-top: 25px;
}


/* =========================================================
   CONFIRMATION
   ========================================================= */

.confirmation-step {
  padding: 15px 0 5px;

  text-align: center;
}


.confirmation-icon {
  width: 65px;

  height: 65px;

  margin: 0 auto 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: var(--accent);

  color: #0A0810;

  font-size: 25px;

  font-weight: 800;

  box-shadow:
    0 12px 35px rgba(var(--accent-rgb), 0.25);
}


.confirmation-eyebrow {
  margin-bottom: 12px;
}


.confirmation-step h2 {
  margin-bottom: 12px;

  color: var(--white);

  font-size: 36px;

  letter-spacing: -1.3px;
}


.confirmation-message {
  margin-bottom: 30px;

  color: var(--text-secondary);

  font-size: 15px;
}


.confirmation-details {
  max-width: 540px;

  margin: 0 auto 25px;

  overflow: hidden;

  background: #100D16;

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

  border-radius: 12px;

  text-align: left;
}


.confirmation-detail {
  padding: 15px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}


.confirmation-detail:last-child {
  border-bottom: none;
}


.confirmation-detail span {
  color: #858D98;

  font-size: 12px;
}


.confirmation-detail strong {
  color: #E6E9EE;

  font-size: 13px;

  text-align: right;
}


.confirmation-note {
  max-width: 500px;

  margin: 0 auto 28px;

  color: #8F97A2;

  font-size: 12px;

  line-height: 1.6;
}


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

.booking-footer {
  padding: 0 30px;
}


.booking-footer-inner {
  width: 100%;

  max-width: 1050px;

  margin: 0 auto;

  padding: 30px 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

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


.booking-footer-inner p {
  color: #858D98;

  font-size: 11px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

  .booking-main {
    padding-top: 70px;
  }


  .booking-card {
    padding: 32px 25px;
  }


  .form-row {
    grid-template-columns: 1fr;
  }


  .scheduler-layout {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .booking-main {
    padding:
      60px
      18px
      70px;
  }


  .booking-intro {
    margin-bottom: 35px;
  }


  .booking-intro h1 {
    font-size: 40px;

    letter-spacing: -1.7px;
  }


  .booking-description {
    font-size: 15px;
  }


  .booking-benefits {
    flex-direction: column;

    align-items: flex-start;

    max-width: 230px;

    margin:
      25px
      auto
      0;

    gap: 11px;
  }


  .booking-card {
    padding: 28px 18px;

    border-radius: 15px;
  }


  .booking-progress {
    margin-bottom: 38px;
  }


  .progress-item {
    min-width: 60px;

    font-size: 10px;
  }


  .progress-line {
    width: 45px;
  }


  .booking-step-header h2 {
    font-size: 25px;
  }


  .form-action,
  .schedule-actions {
    justify-content: stretch;
  }


  .booking-primary-button {
    width: 100%;
  }


  .confirmation-detail {
    flex-direction: column;

    align-items: flex-start;

    gap: 4px;
  }


  .confirmation-detail strong {
    text-align: left;
  }


  .booking-footer-inner {
    flex-direction: column;

    gap: 12px;

    text-align: center;
  }

}
/* =========================================================
   FIX WHITE OVERSCROLL / PAGE BACKGROUND
   ========================================================= */

html {
    background-color: #0A0810;
}

body.booking-page {
    background-color: #0A0810;
    min-height: 100vh;
}

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

@media (prefers-reduced-motion: reduce) {

  * {
    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;
  }

}