/* Jenggala Equestrian V21 — booking operations, Services CMS and Membership journey */

.booking-participant-editor-v21 {
  border: 1px solid rgba(183, 139, 65, 0.28);
  background: linear-gradient(145deg, #18130f, #0e0c0a);
  color: #f7f0e4;
}

.booking-participant-editor-v21__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.booking-participant-editor-v21__head h4 {
  margin: 0;
}

.booking-participant-editor-v21__head h4 span {
  display: inline-flex;
  margin-left: 7px;
  padding: 3px 7px;
  border: 1px solid rgba(216, 178, 99, 0.45);
  border-radius: 999px;
  color: #d9b263;
  font:
    700 9px/1 Inter,
    sans-serif;
  letter-spacing: 0.12em;
  vertical-align: middle;
}

.booking-participant-editor-v21 form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.booking-participant-editor-v21 form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.booking-participant-editor-v21 form input,
.booking-participant-editor-v21 form textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
}

.booking-participant-editor-v21 form textarea {
  resize: vertical;
}

.booking-participant-editor-v21 form input:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.booking-participant-editor-v21__wide {
  grid-column: 1 / -1;
}

.v21-inline-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.services-cms-v21__intro,
.schedule-studio-v21__hero,
.membership-control-v21__intro {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid rgba(185, 139, 62, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(193, 145, 65, 0.19),
      transparent 33%
    ),
    linear-gradient(135deg, #15110e 0%, #21180f 55%, #100e0c 100%);
  color: #f8f1e5;
}

.services-cms-v21__intro::after,
.schedule-studio-v21__hero::after,
.membership-control-v21__intro::after {
  position: absolute;
  right: -36px;
  bottom: -72px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(211, 170, 91, 0.18);
  border-radius: 50%;
  content: "";
}

.services-cms-v21__intro > span,
.schedule-studio-v21__hero > div > span,
.membership-control-v21__intro > span,
.slot-generator-v21 > div > span,
.schedule-manual-v21 > span {
  display: block;
  margin-bottom: 10px;
  color: #d8b263;
  font:
    700 10px/1.3 Inter,
    sans-serif;
  letter-spacing: 0.2em;
}

.services-cms-v21__intro h2,
.schedule-studio-v21__hero h2,
.membership-control-v21__intro h2 {
  max-width: 740px;
  margin: 0 0 12px;
  color: inherit;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 0.98;
}

.services-cms-v21__intro p,
.schedule-studio-v21__hero p,
.membership-control-v21__intro p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
}

.services-cms-v21__grid {
  display: grid;
  gap: 18px;
}

.services-cms-v21__item {
  min-width: 0;
}

.services-cms-v21__item > .admin-form-section,
.services-cms-v21__item > .admin-table-card {
  height: 100%;
  margin: 0;
  border-color: rgba(138, 101, 45, 0.2);
  box-shadow: 0 18px 54px rgba(31, 22, 14, 0.055);
}

.service-days-v21 {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(109, 78, 39, 0.14);
  border-radius: 4px;
  background: #f9f5ee;
}

.service-days-v21 > span {
  color: #6f5839;
  font: 700 10px/1.3 Inter, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-days-v21 > div {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.service-days-v21 label {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgba(91, 65, 32, 0.17);
  border-radius: 3px;
  background: #fff;
  color: #4f4131;
  cursor: pointer;
  font-size: 11px;
}

.service-days-v21 input {
  width: 14px;
  height: 14px;
  min-height: 0;
  accent-color: #a7772f;
}

.service-days-v21 small {
  color: #80766a;
  font-size: 11px;
}

.schedule-admin-v21 {
  padding: clamp(14px, 2.2vw, 28px);
  overflow: hidden;
}

.schedule-studio-v21 {
  display: grid;
  gap: 22px;
}

.schedule-studio-v21__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
}

.schedule-studio-v21__stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
}

.schedule-studio-v21__stats b {
  display: grid;
  min-width: 105px;
  padding: 15px;
  border: 1px solid rgba(216, 178, 99, 0.25);
  background: rgba(255, 255, 255, 0.045);
  color: #d8b263;
  font-size: 24px;
}

.schedule-studio-v21__stats small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.56);
  font:
    500 9px/1.2 Inter,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-studio-v21 > form {
  display: grid;
  gap: 18px;
}

.schedule-template-groups-v21 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.schedule-template-group-v21 {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(110, 84, 49, 0.16);
  border-radius: 7px;
  background: #faf7f1;
}

.schedule-template-group-v21--afternoon {
  background: #f4efe7;
}

.schedule-template-group-v21__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.schedule-template-group-v21__title > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(147, 105, 43, 0.24);
  border-radius: 50%;
  color: #a8762b;
  font-size: 20px;
}

.schedule-template-group-v21__title small,
.schedule-template-card-v21 header span,
.slot-generator-v21 label > span,
.booking-window-v21__times label > span,
.schedule-template-card-v21 label > span {
  color: #8c6d43;
  font:
    700 9px/1.2 Inter,
    sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.schedule-template-group-v21__title h3 {
  margin: 2px 0 0;
  font-size: 21px;
}

.schedule-template-group-v21__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.schedule-template-card-v21 {
  display: grid;
  min-width: 0;
  gap: 11px;
  padding: 15px;
  border: 1px solid rgba(112, 83, 43, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.82);
}

.schedule-template-card-v21 header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(91, 66, 34, 0.1);
}

.schedule-template-card-v21 header b {
  color: #282019;
  font:
    700 10px/1 Inter,
    sans-serif;
  letter-spacing: 0.11em;
}

.schedule-template-card-v21 label,
.slot-generator-v21 label,
.booking-window-v21__times label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.schedule-template-card-v21 input,
.slot-generator-v21 input,
.slot-generator-v21 select,
.booking-window-v21 input {
  width: 100%;
  min-height: 43px;
  border: 1px solid rgba(88, 63, 31, 0.18);
  border-radius: 3px;
  background: #fff;
}

.schedule-template-card-v21__times,
.booking-window-v21__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.booking-window-v21 {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.7fr);
  align-items: center;
  gap: 18px 28px;
  padding: 20px;
  border: 1px solid rgba(182, 136, 62, 0.25);
  border-radius: 7px;
  background: #17130f;
  color: #fff;
}

.booking-window-v21__toggle {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}

.booking-window-v21__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.booking-window-v21__toggle > span {
  position: relative;
  width: 44px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.booking-window-v21__toggle > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  content: "";
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.booking-window-v21__toggle input:checked + span {
  border-color: #d4aa5e;
  background: #b88738;
}

.booking-window-v21__toggle input:checked + span::after {
  transform: translateX(20px);
  background: #fff;
}

.booking-window-v21__toggle input:focus-visible + span {
  outline: 2px solid #d8b263;
  outline-offset: 3px;
}

.booking-window-v21__times span {
  color: rgba(255, 255, 255, 0.55) !important;
}

.booking-window-v21 p {
  grid-column: 1 / -1;
  margin: -5px 0 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}

.schedule-studio-v21__save {
  justify-self: end;
}

.slot-generator-v21 {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  align-items: end;
  gap: 24px;
  padding: 22px;
  border: 1px solid rgba(117, 87, 47, 0.16);
  border-radius: 7px;
  background: #f5f0e7;
}

.slot-generator-v21 h3,
.schedule-manual-v21 h3 {
  margin: 0 0 7px;
  font-size: 24px;
}

.slot-generator-v21 p,
.schedule-manual-v21 p {
  margin: 0;
  color: #766c61;
  line-height: 1.55;
}

.slot-generator-v21__fields {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(
      2,
      minmax(140px, 0.8fr)
    ) auto;
  align-items: end;
  gap: 10px;
}

.schedule-manual-v21 {
  margin: 34px 0 14px;
  padding-top: 25px;
  border-top: 1px solid rgba(109, 79, 39, 0.16);
}

.membership-control-v21 {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.5fr);
  gap: 16px;
}

.membership-control-v21__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.membership-control-v21__intro h2 {
  font-size: clamp(28px, 3vw, 42px);
}

.membership-control-v21__intro .button {
  position: relative;
  z-index: 1;
  margin-top: 24px;
}

.membership-control-v21__levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.membership-control-v21__levels article {
  display: grid;
  align-content: space-between;
  min-height: 145px;
  padding: 20px;
  border: 1px solid rgba(125, 91, 44, 0.15);
  border-radius: 7px;
  background: linear-gradient(145deg, #fff, #f4ede1);
}

.membership-control-v21__levels header {
  display: grid;
  gap: 3px;
}

.membership-control-v21__levels small {
  color: #a47735;
  font:
    700 9px/1.2 Inter,
    sans-serif;
  letter-spacing: 0.13em;
}

.membership-control-v21__levels header b {
  font-family: Georgia, serif;
  font-size: 22px;
}

.membership-control-v21__levels strong {
  margin-top: 15px;
  color: #3f3020;
  font-size: 14px;
}

.membership-control-v21__levels > article > span {
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #827769;
  font-size: 11px;
}

/* Customer booking: clear morning/afternoon hierarchy and live booking hours. */
.booking-window-notice-v21 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 15px 0;
  padding: 13px 15px;
  border: 1px solid rgba(58, 107, 71, 0.2);
  background: #eef6ef;
}

.booking-window-notice-v21 > span {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 2px;
  background: #2f6a42;
  color: #fff;
  font:
    800 9px/1 Inter,
    sans-serif;
  letter-spacing: 0.12em;
}

.booking-window-notice-v21 > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.booking-window-notice-v21 small {
  color: #637064;
}

.booking-window-notice-v21.is-closed {
  border-color: rgba(163, 105, 39, 0.24);
  background: #fff5e7;
}

.booking-window-notice-v21.is-closed > span {
  background: #9c6027;
}

.booking-slot-periods-v21 {
  display: grid;
  gap: 18px;
}

.booking-slot-period-v21 {
  padding: 18px;
  border: 1px solid rgba(95, 74, 47, 0.13);
  border-radius: 5px;
  background: #fbf8f2;
}

.booking-slot-period-v21--afternoon {
  background: #f5f0e8;
}

.booking-slot-period-v21 > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(93, 68, 37, 0.11);
}

.booking-slot-period-v21 > header small {
  display: block;
  margin-bottom: 3px;
  color: #9d7539;
  font:
    700 9px/1.2 Inter,
    sans-serif;
  letter-spacing: 0.13em;
}

.booking-slot-period-v21 > header h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 27px);
}

.booking-slot-period-v21 > header > b {
  color: #756958;
  font-size: 11px;
  white-space: nowrap;
}

.booking-slot-period-v21 .booking-slot-grid-v12 {
  margin: 0;
}

/* Homepage Membership now mirrors the live Membership CMS. */
.home-membership-journey-v21 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.45fr);
  align-items: center;
  gap: 28px;
  margin-top: 14px;
  padding-top: 24px;
  border-top: 1px solid rgba(60, 42, 21, 0.2);
}

.home-membership-journey-v21 header {
  display: grid;
  gap: 6px;
}

.home-membership-journey-v21 header small {
  color: #6c4f25;
  font:
    800 9px/1.2 Inter,
    sans-serif;
  letter-spacing: 0.17em;
}

.home-membership-journey-v21 header b {
  color: #1b1611;
  font:
    500 22px/1.12 Georgia,
    serif;
}

.home-membership-journey-v21__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.home-membership-journey-v21__rail article {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(60, 42, 21, 0.16);
  background: rgba(255, 255, 255, 0.26);
}

.home-membership-journey-v21__rail article:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -7px;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-top: 1px solid #6f5128;
  border-right: 1px solid #6f5128;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.home-membership-journey-v21__rail i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-bottom: 5px;
  border: 1px solid rgba(78, 53, 22, 0.3);
  border-radius: 50%;
  color: #5d421f;
  font:
    normal 700 10px/1 Inter,
    sans-serif;
}

.home-membership-journey-v21__rail span {
  overflow: hidden;
  color: #1a1510;
  font:
    600 13px/1.25 Inter,
    sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-membership-journey-v21__rail small {
  color: #675945;
  font-size: 10px;
}

/* Membership page: stronger editorial rhythm without changing CMS content. */
.membership-page-v12 .membership-hero-v12 {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 22%,
      rgba(201, 154, 73, 0.2),
      transparent 30%
    ),
    linear-gradient(135deg, #0b1710 0%, #112318 52%, #0e0d0b 100%);
}

.membership-page-v12 .membership-hero-inner {
  position: relative;
}

.membership-page-v12 .membership-hero-inner::before {
  position: absolute;
  top: -18%;
  right: -6%;
  width: min(36vw, 430px);
  aspect-ratio: 1;
  border: 1px solid rgba(214, 176, 101, 0.13);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.membership-page-v12 .membership-hero-summary {
  backdrop-filter: blur(10px);
  background: rgba(8, 15, 11, 0.58);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

.membership-page-v12 .membership-benefit-grid article,
.membership-page-v12 .passport-level-card {
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

@media (hover: hover) {
  .membership-page-v12 .membership-benefit-grid article:hover,
  .membership-page-v12 .passport-level-card:hover {
    border-color: rgba(177, 130, 54, 0.36);
    box-shadow: 0 22px 60px rgba(62, 43, 22, 0.09);
    transform: translateY(-3px);
  }
}

@media (min-width: 1480px) {
  .services-cms-v21__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .schedule-template-groups-v21,
  .membership-control-v21 {
    grid-template-columns: 1fr;
  }

  .slot-generator-v21 {
    grid-template-columns: 1fr;
  }

  .slot-generator-v21__fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .slot-generator-v21__fields .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .schedule-studio-v21__hero,
  .booking-window-v21,
  .home-membership-journey-v21 {
    grid-template-columns: 1fr;
  }

  .schedule-template-group-v21__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-membership-journey-v21__rail {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    padding: 2px 2px 8px;
    scroll-snap-type: x mandatory;
  }

  .home-membership-journey-v21__rail article {
    scroll-snap-align: start;
  }

  .membership-page-v12 .passport-level-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .booking-participant-editor-v21 form,
  .schedule-template-group-v21__cards,
  .slot-generator-v21__fields,
  .membership-control-v21__levels {
    grid-template-columns: 1fr;
  }

  .booking-participant-editor-v21__head {
    align-items: flex-start;
  }

  .services-cms-v21__intro,
  .schedule-studio-v21__hero,
  .membership-control-v21__intro {
    padding: 23px 19px;
  }

  .schedule-studio-v21__hero {
    align-items: stretch;
  }

  .schedule-studio-v21__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-studio-v21__stats b {
    min-width: 0;
  }

  .schedule-template-group-v21,
  .slot-generator-v21,
  .booking-window-v21 {
    padding: 15px;
  }

  .booking-window-v21__times,
  .schedule-template-card-v21__times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-studio-v21__save,
  .slot-generator-v21 .button {
    width: 100%;
    justify-self: stretch;
  }

  .booking-slot-period-v21 {
    padding: 14px;
  }

  .booking-slot-period-v21 > header {
    align-items: center;
  }

  .booking-slot-period-v21 .booking-slot-grid-v12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-window-notice-v21 {
    align-items: flex-start;
  }

  .service-days-v21 > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .membership-page-v12 .membership-hero-actions,
  .membership-page-v12 .membership-hero-actions .button {
    width: 100%;
  }

  .membership-page-v12 .membership-hero-actions {
    display: grid;
  }

  .membership-page-v12 .passport-level-card > header {
    grid-template-columns: auto 1fr;
  }

  .membership-page-v12 .passport-level-card > header > em {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 390px) {
  .booking-window-v21__times,
  .schedule-template-card-v21__times,
  .booking-slot-period-v21 .booking-slot-grid-v12 {
    grid-template-columns: 1fr;
  }

  .schedule-studio-v21__stats {
    gap: 7px;
  }

  .schedule-studio-v21__stats b {
    padding: 12px;
    font-size: 20px;
  }

  .home-membership-journey-v21__rail {
    grid-template-columns: repeat(4, minmax(132px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .membership-page-v12 .membership-benefit-grid article,
  .membership-page-v12 .passport-level-card,
  .booking-window-v21__toggle > span::after {
    transition: none;
  }
}