/* Temporary hide only: Family with kids option */
#customerModal .guestRow[data-key="family"],
#customerModal #familyBlock,
#customerModal #familyPreferenceWrap{
  display:none;
  visibility:hidden;
  opacity:0;
  height:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  pointer-events:none;
}

/* Luxury step arrows only - no booking logic changes */
.bookingStepConnector{
  position:relative;
  flex:1 1 74px;
  max-width:92px;
  min-width:22px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}

.bookingStepConnector::before{
  content:"";
  flex:1 1 auto;
  min-width:12px;
  max-width:64px;
  height:5px;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.05) 0%,
      rgba(200,171,79,0.20) 18%,
      rgba(200,171,79,0.42) 50%,
      rgba(255,245,204,0.15) 100%);
  box-shadow:
    0 0 10px rgba(200,171,79,0.16),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.55);
  opacity:0.86;
}

.bookingStepConnector::after{
  content:"";
  flex:0 0 15px;
  width:15px;
  height:15px;
  margin-left:8px;
  border-top:4px solid rgba(200,171,79,0.78);
  border-right:4px solid rgba(200,171,79,0.78);
  border-radius:2px;
  transform:rotate(45deg);
  filter:drop-shadow(0 0 5px rgba(200,171,79,0.24));
  opacity:0.92;
}

.bookingStepConnector.is-done::before{
  background:
    linear-gradient(90deg,
      rgba(255,245,204,0.18) 0%,
      rgba(200,171,79,0.78) 52%,
      rgba(255,245,204,0.32) 100%);
  box-shadow:
    0 0 12px rgba(200,171,79,0.25),
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 -1px 0 rgba(0,0,0,0.55);
  opacity:1;
}

.bookingStepConnector.is-done::after{
  border-top-color:rgba(241,224,166,0.96);
  border-right-color:rgba(241,224,166,0.96);
  filter:drop-shadow(0 0 7px rgba(200,171,79,0.34));
  opacity:1;
}

[dir="rtl"] .bookingStepConnector::after{
  margin-left:0;
  margin-right:8px;
  transform:rotate(225deg);
}

@media (max-width:640px){
  .bookingSteps{
    gap:8px;
  }

  .bookingStepConnector{
    flex-basis:38px;
    max-width:42px;
    min-width:20px;
    height:30px;
  }

  .bookingStepConnector::before{
    min-width:8px;
    height:4px;
  }

  .bookingStepConnector::after{
    flex-basis:12px;
    width:12px;
    height:12px;
    margin-left:6px;
    border-top-width:3px;
    border-right-width:3px;
  }

  [dir="rtl"] .bookingStepConnector::after{
    margin-left:0;
    margin-right:6px;
  }
}

/* Keep all time boxes visible in Date & Time Selection.
   Disabled/past times stay visible as grey boxes, and small screens can scroll the modal body
   instead of clipping the last time rows behind the footer. */
#dateModal .modalBody{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  padding-bottom:18px;
}

#dateModal .dateBottomBlock{
  padding-bottom:12px;
}

#dateModal .slots{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  grid-auto-rows:minmax(38px, auto);
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
  padding:0 0 12px 0;
}

#dateModal .slot.disabled,
#dateModal .slot[aria-disabled="true"]{
  pointer-events:none;
  cursor:not-allowed;
  background:rgba(255, 255, 255, 0.18);
  color:rgba(255, 255, 255, 0.42);
  border:1px solid rgba(255, 255, 255, 0.08);
  filter:none;
}

@media (max-width:720px){
  #dateModal .modalBody{
    padding-bottom:20px;
  }

  #dateModal .dateBottomBlock{
    padding-bottom:14px;
  }

  #dateModal .slots{
    grid-auto-rows:minmax(36px, auto);
    gap:4px;
    transform:translateY(-3px);
  }

}

@media (max-width:420px){
  #dateModal .slots{
    grid-auto-rows:minmax(34px, auto);
  }

}

/* =========================================================
   PROFESSIONAL CLIENT-SIDE SOURCE/COPY PROTECTION SHIELD
   Important: this is a deterrence layer for a public static HTML page.
   Real source secrecy requires server-side rendering or access control.
========================================================= */

html.protection-lock-active,
html.protection-lock-active body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

html.protection-lock-active input,
html.protection-lock-active textarea,
html.protection-lock-active select,
html.protection-lock-active button,
html.protection-lock-active [contenteditable="true"]{
  -webkit-user-select:auto;
  user-select:auto;
  -webkit-touch-callout:default;
}

/* Allow customers to select/copy only the public address and phone/WhatsApp contact line. */
html.protection-lock-active .protectionCopyAllowed,
html.protection-lock-active .protectionCopyAllowed *,
html.protection-lock-active [data-protection-copy="allowed"],
html.protection-lock-active [data-protection-copy="allowed"] *{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

html.protection-lock-active .protectionCopyAllowed{
  cursor:text;
}

html.protection-lock-active .protectionCopyAllowed a{
  cursor:pointer;
}

/* Removes the unused empty calendar row so the time boxes move up and fit better on mobile. */

#dateModal .dateTopBlock{
  margin-bottom:0;
}

#dateModal .dateBottomBlock{
  margin-top:0;
  padding-top:0;
}

#dateModal .slotsTitle{
  margin-top:0;
  margin-bottom:4px;
}

#dateModal .slots{
  margin-top:0;
  transform:translateY(-2px);
  padding-bottom:8px;
}

@media (max-width:720px){

  #dateModal .slots{
    padding-bottom:10px;
  }
}

/* =========================================================
   DATE & TIME MODAL — BROWSER FIT PATCH
   Shows every time box inside the visible modal, removes the inner
   time-scroll area, and aligns day/time boxes with one professional size.
========================================================= */
#dateModal .modal,
html:not(.is-android-device) #dateModal .modal,
html.compat-desktop-like #dateModal .modal{
  width:min(1120px, calc(100vw - 24px));
  height:auto;
  max-height:calc((var(--app-vh, 1vh) * 100) - 10px);
  display:flex;
  flex-direction:column;
}

@supports (height:100dvh){
  #dateModal .modal,
  html:not(.is-android-device) #dateModal .modal,
  html.compat-desktop-like #dateModal .modal{
    max-height:calc(100dvh - 10px);
  }
}

#dateModal .modalTop{
  flex:0 0 auto;
  padding:8px 14px;
  row-gap:6px;
}

#dateModal .modalTop .title{
  font-size:22px;
  line-height:1.15;
}

#dateModal .iconBtn{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  border-radius:11px;
  font-size:19px;
}

#dateModal .bookingSteps{
  gap:8px;
  padding-top:0;
}

#dateModal .bookingStepCircle{
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  font-size:13px;
  line-height:1;
}

#dateModal .bookingStepConnector{
  flex:1 1 54px;
  max-width:64px;
  min-width:18px;
  height:26px;
}

#dateModal .bookingStepConnector::before{
  height:4px;
  max-width:44px;
}

#dateModal .bookingStepConnector::after{
  width:12px;
  height:12px;
  flex:0 0 12px;
  margin-left:6px;
  border-top-width:3px;
  border-right-width:3px;
}

[dir="rtl"] #dateModal .bookingStepConnector::after{
  margin-left:0;
  margin-right:6px;
}

#dateModal .modalBody,
html:not(.is-android-device) #dateModal .modalBody,
html.compat-desktop-like #dateModal .modalBody{
  flex:0 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow:hidden;
  padding:6px 10px 4px;
  scrollbar-width:none;
}

#dateModal .modalBody::-webkit-scrollbar{
  display:none;
}

#dateModal .dateTopBlock{
  flex:0 0 auto;
  margin:0;
}

#dateModal .calendarHeader{
  align-items:center;
  margin:0 0 4px;
  gap:10px;
}

#dateModal .monthTitle .month{
  font-size:20px;
  line-height:1;
}

#dateModal .monthTitle .year{
  font-size:15px;
  line-height:1.05;
  margin-top:2px;
}

#dateModal .navWrap{
  gap:8px;
  margin-top:0;
}

#dateModal .navBtn{
  border-radius:10px;

}

#dateModal .dow div{
  padding:5px 2px;
  font-size:14px;
  line-height:1.1;
}

#dateModal .calendar{
  grid-template-rows:none;
  align-content:start;
}

#dateModal .day{
  font-size:17px;
  line-height:1;
}

#dateModal .day.today::before{
  top:5px;
  height:6px;
}

#dateModal .day.hasSlots::after{
  height:4px;
}

#dateModal .dateBottomBlock{
  flex:0 0 auto;
  min-height:0;
  height:auto;
  margin:0;
  padding:0;
  overflow:visible;
}

#dateModal .slotsTitle{
  flex:0 0 auto;
  font-size:18px;
  line-height:1.1;
  margin:4px 0 5px;
}

#dateModal .slots,
html:not(.is-android-device) #dateModal .slots,
html.compat-desktop-like #dateModal .slots{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:4px;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
  padding:0;
  margin:0;
  transform:none;
  scrollbar-width:none;
}

#dateModal .slots::-webkit-scrollbar{
  display:none;
}

#dateModal .slot,
#dateModal .slot.disabled,
#dateModal .slot[aria-disabled="true"]{
  display:flex;
  visibility:visible;
  opacity:1;
  font-size:17px;
  line-height:1;
  font-weight:1000;
  border-radius:3px;
}

#dateModal .slot.selected::after{
  top:3px;
  right:5px;
  font-size:10px;
}

#dateModal .modalFooter{
  flex:0 0 auto;
  position:relative;
  bottom:auto;
  padding:8px 14px 10px;
}

#dateModal .selectedInfo{
  margin:0 0 5px;
}

#dateModal .footerBtns--date{
  grid-template-columns:1fr 1.2fr;
  gap:10px;
}

#dateModal .backBtn,
#dateModal .sendBtn{
  min-height:44px;
  height:44px;
  padding:9px 12px;
  font-size:16px;
  line-height:1.1;
  border-radius:10px;
}

@media (min-width:740px) and (min-height:821px){
  #dateModal .modalTop .title{
    font-size:24px;
  }
  #dateModal .calendar{
    grid-auto-rows:36px;
  }
  #dateModal .day,
  #dateModal .slot,
  #dateModal .slot.disabled,
  #dateModal .slot[aria-disabled="true"]{
    font-size:18px;
  }
  #dateModal .slots{
    grid-auto-rows:36px;
  }
}

@media (min-width:740px) and (max-height:700px){
  #dateModal .modalTop{
    padding:6px 12px;
    row-gap:4px;
  }
  #dateModal .modalTop .title{
    font-size:20px;
  }
  #dateModal .iconBtn{
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
  }
  #dateModal .bookingStepCircle{
    width:24px;
    height:24px;
    min-width:24px;
    min-height:24px;
    font-size:12px;
  }
  #dateModal .bookingStepConnector{
    height:22px;
    max-width:48px;
  }
  #dateModal .modalBody{
    padding:5px 8px 3px;
    gap:3px;
  }
  #dateModal .monthTitle .month{
    font-size:18px;
  }
  #dateModal .monthTitle .year{
    font-size:13px;
  }
  #dateModal .dow div{
    padding:4px 2px;
    font-size:13px;
  }
  #dateModal .calendar,
  #dateModal .slots{
    grid-auto-rows:30px;
  }
  #dateModal .day,
  #dateModal .slot,
  #dateModal .slot.disabled,
  #dateModal .slot[aria-disabled="true"]{
    font-size:15px;
  }
  #dateModal .slotsTitle{
    font-size:16px;
    margin:2px 0 4px;
  }
  #dateModal .modalFooter{
    padding:6px 12px 8px;
  }
  #dateModal .backBtn,
  #dateModal .sendBtn{
    min-height:40px;
    height:40px;
    font-size:15px;
  }
}

@media (max-width:720px){
  #dateModal .modal,
  html:not(.is-android-device) #dateModal .modal,
  html.compat-desktop-like #dateModal .modal{
    width:100%;
    max-height:calc((var(--app-vh, 1vh) * 100) - 8px);
  }
  #dateModal .modalTop{
    padding:7px 10px;
    row-gap:5px;
  }
  #dateModal .modalTop .title{
    font-size:20px;
  }
  #dateModal .bookingSteps{
    gap:6px;
  }
  #dateModal .bookingStepCircle{
    width:25px;
    height:25px;
    min-width:25px;
    min-height:25px;
    font-size:12px;
  }
  #dateModal .bookingStepConnector{
    flex-basis:28px;
    max-width:34px;
    height:22px;
  }
  #dateModal .modalBody{
    padding:5px 6px 3px;
    gap:3px;
  }
  #dateModal .calendarHeader{
    margin:0 0 3px;
  }
  #dateModal .monthTitle .month{
    font-size:18px;
  }
  #dateModal .monthTitle .year{
    font-size:13px;
  }
  #dateModal .dow div{
    padding:4px 1px;
    font-size:13px;
  }
  #dateModal .calendar{
    grid-auto-rows:31px;
  }
  #dateModal .day{
    font-size:15.5px;
  }
  #dateModal .slotsTitle{
    font-size:16px;
    margin:2px 0 4px;
  }
  #dateModal .slots,
  html:not(.is-android-device) #dateModal .slots,
  html.compat-desktop-like #dateModal .slots{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:3px;
  }
  #dateModal .slot,
  #dateModal .slot.disabled,
  #dateModal .slot[aria-disabled="true"]{
    font-size:14.5px;
  }
  #dateModal .modalFooter{
    padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  }
  #dateModal .backBtn,
  #dateModal .sendBtn{
    min-height:40px;
    height:40px;
    font-size:14px;
    padding:8px 10px;
  }
}

@media (max-width:420px), (max-height:620px){
  #dateModal .calendar,
  #dateModal .slots{
    grid-auto-rows:28px;
  }
  #dateModal .day,
  #dateModal .slot,
  #dateModal .slot.disabled,
  #dateModal .slot[aria-disabled="true"]{
    font-size:13.5px;
  }
  #dateModal .dow div{
    padding:3px 1px;
  }
  #dateModal .slotsTitle{
    font-size:15px;
    margin:1px 0 3px;
  }
}

.finalMyTicketBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:min(280px, 100%);
  box-shadow:0 10px 24px rgba(200,171,79,0.22);
}
.finalMyTicketBtn:active{
  transform:none;
}

/* Final Summary Next: open the final window immediately and send email/PDF in the background. */
#summaryModal #finalSendBtn.is-processing{
  pointer-events:none;
}

/* Stage 3 Booking Summary is skipped by logic; this keeps the old modal available only for internal ticket rendering. */

.finalWhatsAppBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:min(280px, 100%);
  box-shadow:0 10px 24px rgba(37,211,102,0.22);
}

.card ul li.packageCoupleLine {
  margin-top: 5px;
  padding-top: 9px;
  color: #ffffff;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  font-style: normal;
}

@keyframes bookingStepLimeFlash {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 2px rgba(124, 179, 66, 0.16),
      0 0 10px rgba(124, 179, 66, 0.24),
      0 0 18px rgba(124, 179, 66, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -2px 0 rgba(46, 83, 27, 0.22);
  }
  50% {
    filter: brightness(1.08);
    box-shadow:
      0 0 0 3px rgba(139, 195, 74, 0.22),
      0 0 14px rgba(139, 195, 74, 0.32),
      0 0 24px rgba(139, 195, 74, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      inset 0 -2px 0 rgba(46, 83, 27, 0.26);
  }
}

@keyframes bookingStepLimeRing {
  0% {
    opacity: 0.35;
    transform: scale(0.97);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

#dateModal .bookingStepCircle,
#customerModal .bookingStepCircle,
#summaryModal .bookingStepCircle,
#confirmModal .bookingStepCircle {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  font-size: 15px;
  line-height: 1;
}

#dateModal .bookingStepCircle.is-active,
#customerModal .bookingStepCircle.is-active,
#summaryModal .bookingStepCircle.is-active,
#confirmModal .bookingStepCircle.is-active {
  background: linear-gradient(
    180deg,
    #dcefb7 0%,
    #9ccc65 48%,
    #6ea43d 100%
  );
  border-color: #ecf6db;
  color: #0d1605;
  animation: bookingStepLimeFlash 1.8s ease-in-out infinite;
}

#dateModal .bookingStepCircle.is-active::after,
#customerModal .bookingStepCircle.is-active::after,
#summaryModal .bookingStepCircle.is-active::after,
#confirmModal .bookingStepCircle.is-active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(156, 204, 101, 0.42);
  border-radius: inherit;
  pointer-events: none;
  animation: bookingStepLimeRing 1.8s ease-out infinite;
}

@media (max-width: 420px) {
  #dateModal .bookingStepCircle,
  #customerModal .bookingStepCircle,
  #summaryModal .bookingStepCircle,
  #confirmModal .bookingStepCircle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 14px;
  }

}

@media (prefers-reduced-motion: reduce) {
  #dateModal .bookingStepCircle.is-active,
  #customerModal .bookingStepCircle.is-active,
  #summaryModal .bookingStepCircle.is-active,
  #confirmModal .bookingStepCircle.is-active {
    animation: none !important;
  }

  #dateModal .bookingStepCircle.is-active::after,
  #customerModal .bookingStepCircle.is-active::after,
  #summaryModal .bookingStepCircle.is-active::after,
  #confirmModal .bookingStepCircle.is-active::after {
    animation: none !important;
    opacity: 0.28;
  }
}

#customerModal .guestBtn {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 640px) {
  #customerModal .guestBtn {
    font-size: 26px;
  }
}

/* Applies to the date-selection window in every language. */
#dateModal .navBtn {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

#dateModal .selectedInfo {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 800;
}

@media (max-width: 420px) {
  #dateModal .navBtn {
    font-size: 25px;
  }

  #dateModal .selectedInfo {
    font-size: 15px;
    line-height: 1.4;
  }
}

/* Make step 4 circular like step 3 in all booking modals */

/* Professional QR ticket card inside the final Reservation Received window. */
#confirmModal .confirmModalCard{
  width:min(720px,100%);
  max-height:calc((var(--app-vh,1vh) * 100) - 12px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}

@supports (height:100dvh){
  #confirmModal .confirmModalCard{
    max-height:calc(100dvh - 12px);
  }
}

#confirmModal .ticketQrCard{
  position:relative;
  width:min(320px,100%);
  margin:18px auto 0;
  padding:16px;
  overflow:hidden;
  border:1px solid rgba(224,195,108,.42);
  border-radius:22px;
  background:
    radial-gradient(circle at 14% 12%,rgba(255,238,176,.16),transparent 34%),
    linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
    #0b0b0b;
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(200,171,79,.04);
  text-align:center;
  direction:ltr;
}

#confirmModal .ticketQrCard::before{
  content:"";
  position:absolute;
  top:0;
  left:10%;
  width:80%;
  height:1px;
  background:linear-gradient(90deg,transparent,#f1dda0,transparent);
  opacity:.78;
}

#confirmModal .ticketQrBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:5px 10px;
  border:1px solid rgba(224,195,108,.32);
  border-radius:999px;
  background:rgba(200,171,79,.10);
  color:#f4dda0;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.17em;
  line-height:1;
}

#confirmModal .ticketQrHint{
  margin:0 0 8px;
  color:#c9c9c9;
  font-size:12.5px;
  font-weight:700;
  line-height:1.55;
}

#confirmModal .ticketQrBookingId{
  display:block;
  margin:0 0 12px;
  color:#f4dda0;
  font-size:15px;
  font-weight:1000;
  line-height:1.3;
  letter-spacing:.06em;
  direction:ltr;
  unicode-bidi:isolate;
  word-break:break-word;
  text-shadow:0 0 12px rgba(224,195,108,.16);
}

#confirmModal .ticketQrLink{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:194px;
  height:194px;
  margin:0 auto;
  padding:9px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:18px;
  background:#fff;
  text-decoration:none;
  box-shadow:
    0 12px 26px rgba(0,0,0,.34),
    0 0 0 5px rgba(200,171,79,.09);
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease;
  -webkit-tap-highlight-color:transparent;
}

#confirmModal .ticketQrLink::before,
#confirmModal .ticketQrLink::after{
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  pointer-events:none;
}

#confirmModal .ticketQrLink::before{
  left:-5px;
  top:-5px;
  border-left:3px solid #d7b95f;
  border-top:3px solid #d7b95f;
  border-radius:8px 0 0 0;
}

#confirmModal .ticketQrLink::after{
  right:-5px;
  bottom:-5px;
  border-right:3px solid #d7b95f;
  border-bottom:3px solid #d7b95f;
  border-radius:0 0 8px 0;
}

#confirmModal .ticketQrCard.is-ready .ticketQrLink:hover,
#confirmModal .ticketQrCard.is-ready .ticketQrLink:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    0 16px 32px rgba(0,0,0,.38),
    0 0 0 6px rgba(200,171,79,.13);
  outline:none;
}

#confirmModal .ticketQrCode,
#confirmModal .ticketQrCode img,
#confirmModal .ticketQrCode canvas{
  display:block !important;
  width:176px !important;
  height:176px !important;
  margin:0 auto !important;
}

#confirmModal .ticketQrCard:not(.is-ready) .ticketQrLink{
  opacity:.23;
  pointer-events:none;
}

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

[dir="rtl"] #confirmModal .ticketQrCard{
  direction:rtl;
}

/* Desktop confirmation window: place the information and QR ticket side by
   side so the complete lower section fits inside common laptop screens. */
@media(min-width:760px){
  #confirmModal .confirmModalCard{
    width:min(940px,calc(100vw - 32px));
    max-height:calc((var(--app-vh,1vh) * 100) - 24px);
    padding:20px 24px;
    overflow-y:auto;
    scrollbar-gutter:stable;
  }

  #confirmModal .confirmModalCard .bookingSteps{
    margin-bottom:10px;
  }

  #confirmModal .confirmTitleBig{
    margin-bottom:8px;
    font-size:30px;
  }

  #confirmModal #finalText{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,320px);
    align-items:center;
    column-gap:24px;
    width:100%;
    max-width:none;
    margin:0;
  }

  #confirmModal #finalText > :not(.ticketQrCard){
    grid-column:1;
    grid-row:1;
    min-width:0;
  }

  #confirmModal #finalText > .ticketQrCard{
    grid-column:2;
    grid-row:1;
    align-self:center;
    margin:0 auto;
  }

  #confirmModal .confirmStatus{
    margin-top:8px;
  }
}

/* Keep the customer's small WhatsApp shortcut available in the final booking
   window. Other modals continue to hide floating controls as before. */
body.modal-open:has(#confirmModal.show) .whatsapp-float{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

@supports (height:100dvh){
  @media(min-width:760px){
    #confirmModal .confirmModalCard{
      max-height:calc(100dvh - 24px);
    }
  }
}

@media(max-width:520px){
  #confirmModal .confirmModalCard{
    padding:20px 14px;
  }

  #confirmModal .ticketQrCard{
    width:min(292px,100%);
    margin-top:15px;
    padding:13px;
    border-radius:19px;
  }

  #confirmModal .ticketQrLink{
    width:174px;
    height:174px;
    padding:8px;
    border-radius:16px;
  }

  #confirmModal .ticketQrCode,
  #confirmModal .ticketQrCode img,
  #confirmModal .ticketQrCode canvas{
    width:158px !important;
    height:158px !important;
  }
}

/* ========================================================================
   Final quality and accessibility overrides
   ======================================================================== */

/* Keep the explicit final escape action visible and comfortably tappable. */
#confirmModal #confirmCloseBtn,
#confirmModal .confirmCloseBtn{
  display:inline-flex;
  visibility:visible;
  opacity:1;
  width:min(260px, 100%);
  height:auto;
  min-height:48px;
  margin:18px auto 0;
  padding:12px 24px;
  overflow:visible;
  pointer-events:auto;
  align-items:center;
  justify-content:center;
}

/* Calendar and time cells remain WCAG-sized; short viewports scroll instead
   of shrinking the controls below a reliable finger target. */
#dateModal .modalBody,
html:not(.is-android-device) #dateModal .modalBody,
html.compat-desktop-like #dateModal .modalBody{
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

#dateModal .calendar{
  grid-auto-rows:minmax(44px, auto);
}

#dateModal .slots,
html:not(.is-android-device) #dateModal .slots,
html.compat-desktop-like #dateModal .slots{
  grid-auto-rows:minmax(44px, auto);
}

#dateModal .day,
#dateModal .slot,
#dateModal .slot.disabled,
#dateModal .slot[aria-disabled="true"]{
  height:44px;
  min-height:44px;
}

#dateModal .navBtn{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
}

/* On phones, retain all three floating actions while using a quieter,
   icon-led arrangement that occupies substantially less of the content. */
@media (max-width:640px){
  .spaAudioDock{
    right:max(12px, env(safe-area-inset-right));
    bottom:max(12px, env(safe-area-inset-bottom));
  }

  .spaAudioToggle{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    padding:0;
    gap:0;
    justify-content:center;
    border-radius:50%;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .spaAudioToggleText{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
  }

  .whatsapp-float{
    width:52px;
    height:52px;
    right:max(10px, env(safe-area-inset-right));
    bottom:calc(72px + env(safe-area-inset-bottom));
  }

  #topArrow{
    width:48px;
    height:48px;
    left:max(12px, env(safe-area-inset-left));
    bottom:max(12px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion:reduce){
  .spaAudioToggle,
  .spaAudioToggle.is-on .spaAudioIcon,
  .whatsapp-float,
  #topArrow{
    animation:none !important;
    transition:none !important;
  }
}


/* ===== SEO guest guide cards (mobile + desktop) ===== */
.seoGuides {
  max-width: 1140px;
  margin: 28px auto 8px;
  padding: 0 16px 8px;
  color: #f5f0e6;
}
.seoGuidesInner {
  border: 1px solid rgba(200, 171, 79, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    rgba(12, 12, 12, 0.55);
  padding: 22px 18px 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.seoGuidesHeader { text-align: center; margin-bottom: 16px; }
.seoGuidesEyebrow {
  color: #d4b45a; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 8px; font-weight: 600;
}
.seoGuidesTitle {
  margin: 0 0 10px; font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.25; color: #f3df9b; font-weight: 700;
}
.seoGuidesIntro {
  margin: 0 auto; max-width: 720px; color: rgba(245, 240, 230, 0.82);
  font-size: 0.98rem; line-height: 1.7;
}
.seoGuidesGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.seoGuideCard {
  border: 1px solid rgba(200, 171, 79, 0.16); border-radius: 16px;
  background: rgba(255, 255, 255, 0.03); padding: 16px 16px 14px;
  position: relative; display: flex; flex-direction: column;
}
.seoGuideCardTitle {
  margin: 0 0 8px; font-size: 1.05rem; line-height: 1.35;
  color: #f3df9b; font-weight: 650;
}
.seoGuideCardBody {
  margin: 0; color: rgba(245, 240, 230, 0.86); font-size: 0.95rem; line-height: 1.75;
  flex: 1;
}
.seoGuideReadMore {
  align-self: flex-start;
  margin-top: 14px;
  color: #f3df9b;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.45;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.seoGuideReadMore:hover,
.seoGuideReadMore:focus-visible {
  color: #fff2b9;
}
.seoGuideReadMore::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.seoGuideCard:hover,
.seoGuideCard:focus-within {
  border-color: rgba(200, 171, 79, 0.48);
  background: rgba(200, 171, 79, 0.07);
}
[dir="rtl"] .seoGuidesHeader,
[dir="rtl"] .seoGuideCard,
[dir="rtl"] .seoGuidesIntro { text-align: right; }
@media (min-width: 760px) {
  .seoGuides { margin: 36px auto 12px; padding: 0 20px 10px; }
  .seoGuidesInner { padding: 28px 24px 22px; }
  .seoGuidesGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 20px;
  }
  .seoGuideCard { padding: 18px 18px 16px; min-height: 100%; }
  .seoGuideCardTitle { font-size: 1.08rem; }
  .seoGuideCardBody { font-size: 0.96rem; }
}
@media (min-width: 1100px) {
  .seoGuidesGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 759px) {
  .seoGuides { margin: 20px auto 6px; padding: 0 12px 6px; }
  .seoGuidesInner { border-radius: 18px; padding: 18px 14px 14px; }
  .seoGuideCard { padding: 14px 14px 12px; }
  .seoGuideCardBody { font-size: 0.93rem; line-height: 1.7; }
}