/*
 * SOUGVARE PHOTO BACKGROUND — optional visual layer.
 * Previous solid canvas retained as a fallback: html, body { background-color: #090909 !important; }
 * Quick revert: comment out ONLY the matching background-slideshow.js
 * script tag in index.php. Without its html class, the old dark canvas
 * remains active and no photo layer is created.
 */
html.sougvare-photo-background-active {
  background: #090909 !important;
  background-color: #090909 !important;
}
html.sougvare-photo-background-active body {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#sougvare-background-slideshow {
  position: fixed !important;
  inset: 0 !important;
  /* Explicit background layer: behind site content, but above the transparent body canvas. */
  z-index: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  isolation: isolate !important;
  pointer-events: none !important;
  background: #090909 !important;
  opacity: 1 !important;
  transition: opacity .76s ease-in-out !important;
  contain: strict;
}

#sougvare-background-slideshow .sougvare-background-slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0 !important;
  transform: translate3d(0, 0, 0) scale(1.035);
  transform-origin: center center !important;
  filter: contrast(1.12) saturate(.92) brightness(.72) !important;
  transition: opacity 1.08s cubic-bezier(.42,0,.18,1) !important;
  animation: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  will-change: opacity, transform;
}

/* The active top layer fades IN over a fully opaque previous photo. */
#sougvare-background-slideshow .sougvare-background-slide.is-active {
  opacity: 1 !important;
  z-index: 2 !important;
}

/* Keep the outgoing photo fully opaque until the incoming photo has finished fading in. */
#sougvare-background-slideshow .sougvare-background-slide.is-underlay {
  opacity: 1 !important;
  z-index: 1 !important;
  transition: none !important;
  animation: none !important;
}

#sougvare-background-slideshow::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.50) 0%, rgba(5,5,5,.34) 48%, rgba(5,5,5,.58) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.04), rgba(0,0,0,.25) 78%);
}

/* Let the photos remain subtly visible through the welcome layer, too. */
html.sougvare-photo-background-active #welcomeScreen.welcome-screen {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html.sougvare-photo-background-active #welcomeScreen .welcome-backdrop {
  background: linear-gradient(145deg, rgba(5,5,5,.48), rgba(5,5,5,.35) 48%, rgba(5,5,5,.56)) !important;
  background-image: linear-gradient(145deg, rgba(5,5,5,.48), rgba(5,5,5,.35) 48%, rgba(5,5,5,.56)) !important;
}

@media (prefers-reduced-motion: reduce) {
  #sougvare-background-slideshow .sougvare-background-slide,
  #sougvare-background-slideshow .sougvare-background-slide.is-active,
  #sougvare-background-slideshow .sougvare-background-slide.is-underlay {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

@media print {
  #sougvare-background-slideshow { display: none !important; }
  html, body { background: #fff !important; }
}


/* -------------------------------------------------------------------------
   Layer safety: photos are background only; every interactive site element
   remains in front of them. The welcome screen keeps its original top layer.
   ------------------------------------------------------------------------- */
html.sougvare-photo-background-active body > #reservationMain {
  position: relative !important;
  z-index: 1 !important;
}
html.sougvare-photo-background-active #welcomeScreen {
  z-index: 30000 !important;
}

/* Black-and-gold persistent slideshow preference, placed under the start button. */
#welcomeScreen .welcome-background-toggle {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px 10px !important;
  width: fit-content !important;
  max-width: min(100%, 390px) !important;
  margin: 13px auto 0 !important;
  padding: 9px 15px !important;
  border: 1px solid rgba(214,181,104,.42) !important;
  border-radius: 13px !important;
  color: #f0dfb1 !important;
  background: linear-gradient(145deg, rgba(30,25,16,.9), rgba(8,8,8,.88)) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.3), inset 0 1px rgba(255,235,185,.055) !important;
  text-align: center !important;
  direction: rtl !important;
  cursor: pointer !important;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease !important;
  -webkit-tap-highlight-color: transparent;
}
#welcomeScreen .welcome-background-toggle:hover {
  border-color: rgba(255,225,155,.78) !important;
  color: #fff0bf !important;
  background: linear-gradient(145deg, rgba(58,43,17,.94), rgba(12,11,9,.92)) !important;
  box-shadow: 0 7px 23px rgba(0,0,0,.38), 0 0 18px rgba(214,181,104,.13), inset 0 1px rgba(255,235,185,.1) !important;
}
#welcomeScreen .welcome-background-toggle > input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}
#welcomeScreen .welcome-background-toggle-check {
  display: grid !important;
  flex: 0 0 21px !important;
  place-items: center !important;
  width: 21px !important;
  height: 21px !important;
  border: 1.5px solid rgba(214,181,104,.8) !important;
  border-radius: 6px !important;
  color: #161108 !important;
  background: rgba(8,8,8,.65) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.025) !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
#welcomeScreen .welcome-background-toggle-check svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0 !important;
  transform: scale(.72) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}
#welcomeScreen .welcome-background-toggle > input:checked + .welcome-background-toggle-check {
  border-color: #f4d78e !important;
  background: linear-gradient(145deg, #f2d99a, #bc913f) !important;
  box-shadow: 0 0 12px rgba(230,189,102,.32), inset 0 1px rgba(255,255,255,.5) !important;
}
#welcomeScreen .welcome-background-toggle > input:checked + .welcome-background-toggle-check svg {
  opacity: 1 !important;
  transform: scale(1) !important;
}
#welcomeScreen .welcome-background-toggle > input:focus-visible + .welcome-background-toggle-check {
  outline: 2px solid #fff0bd !important;
  outline-offset: 3px !important;
}
#welcomeScreen .welcome-background-toggle-label {
  display: inline !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}
#welcomeScreen .welcome-background-toggle-help {
  display: block !important;
  flex: 0 0 100% !important;
  margin: -3px 0 0 !important;
  color: rgba(229,211,169,.68) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
@media (max-width: 560px) {
  #welcomeScreen .welcome-background-toggle { margin-top: 10px !important; padding: 8px 11px !important; }
  #welcomeScreen .welcome-background-toggle-label { font-size: 12px !important; }
}

/* Sequentially reintroduce the reservation chooser after the welcome screen closes. */
body.welcome-intro-complete #reservationMain { animation: none !important; }
body.welcome-intro-complete #reservationMain > .page-header {
  animation: sougvareBookingStageIn .52s cubic-bezier(.2,.72,.2,1) .04s both !important;
}
body.welcome-intro-complete #reservationMain > #bookingModeSelection > .section-heading {
  animation: sougvareBookingStageIn .48s cubic-bezier(.2,.72,.2,1) .18s both !important;
}
body.welcome-intro-complete #reservationMain > #bookingModeSelection .booking-mode-card {
  animation: sougvareBookingStageIn .54s cubic-bezier(.2,.72,.2,1) .3s both !important;
}
body.welcome-intro-complete #reservationMain > #bookingModeSelection .booking-mode-card:nth-child(2) {
  animation-delay: .43s !important;
}
@keyframes sougvareBookingStageIn {
  from { opacity: 0; transform: translate3d(0, 17px, 0) scale(.99); filter: blur(2px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.welcome-intro-complete #reservationMain > .page-header,
  body.welcome-intro-complete #reservationMain > #bookingModeSelection > .section-heading,
  body.welcome-intro-complete #reservationMain > #bookingModeSelection .booking-mode-card {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}


/* Final stage hand-off guard: the welcome overlay is fully removed from layout
   as soon as the visitor presses Start, regardless of older display declarations. */
#welcomeScreen[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* Compact the slideshow preference to its content; keep its checkbox and text as one tidy control. */
#welcomeScreen .welcome-background-toggle {
  display: grid !important;
  grid-template-columns: 21px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: start !important;
  column-gap: 9px !important;
  row-gap: 3px !important;
  width: max-content !important;
  max-width: min(100%, 360px) !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}
#welcomeScreen .welcome-background-toggle-check {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
#welcomeScreen .welcome-background-toggle-label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  text-align: start !important;
}
#welcomeScreen .welcome-background-toggle-help {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}
@media (max-width: 420px) {
  #welcomeScreen .welcome-background-toggle { max-width: calc(100vw - 28px) !important; padding-inline: 10px !important; }
  #welcomeScreen .welcome-background-toggle-label { white-space: normal !important; line-height: 1.5 !important; }
}




/* Center the checkbox vertically against both lines of its label block. */
#welcomeScreen .welcome-background-toggle {
  display:grid !important;
  grid-template-columns:21px max-content !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  justify-items:center !important;
  justify-content:center !important;
  column-gap:10px !important;
  row-gap:2px !important;
  width:fit-content !important;
  max-width:min(100%, 360px) !important;
  margin-inline:auto !important;
  box-sizing:border-box !important;
}
#welcomeScreen .welcome-background-toggle-check {
  grid-column:1 !important;
  grid-row:1 / 3 !important;
  align-self:center !important;
  justify-self:center !important;
}
#welcomeScreen .welcome-background-toggle-label {
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:center !important;
  width:100% !important;
  text-align:center !important;
  white-space:normal !important;
}
#welcomeScreen .welcome-background-toggle-help {
  grid-column:2 !important;
  grid-row:2 !important;
  justify-self:center !important;
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
}
@media(max-width:420px) {
  #welcomeScreen .welcome-background-toggle { max-width:calc(100vw - 28px) !important; }
}


/* Fade the complete photo layer into the retained black canvas when disabled. */
#sougvare-background-slideshow.is-disabling {
  opacity: 0 !important;
  transition: opacity .76s ease-in-out !important;
}

@media (prefers-reduced-motion: reduce) {
  #sougvare-background-slideshow,
  #sougvare-background-slideshow.is-disabling {
    transition: none !important;
  }
}