/* Variables */
/*
PRIMARY:https://mycolor.space/?hex=%231FB3B5&sub=1 
 */
:root {
  --font-size: 16px;
  --font-family: "Poppins", sans-serif;
  --primary-color: #1FB3B5;
  --background-color: oklch(94.61% 0 0);
  --border-color: #dfdfe4;
  --modal-background: rgba(0, 0, 0, 0.4);
  --modal-content-background: #fefefe;
  --hover-color: #ff987f;
  --selected-color: rgba(31, 179, 181, 0.25);
  --close-color: #aaa;
  --close-hover-color: black;
  --error-color: #ff5c4b;
  --white-color: white;
  --error-hover-color: #ff5c4b66;
  --success-color: oklch(72.65% 0.1857 49.9);
  --success-hover-color: #FF7C1866;
  --background-image-grey-reverse: linear-gradient(to right top, #ededed, #eae9eb, #e6e6e8, #e3e2e6, #dfdfe4);
  --background-image-grey: linear-gradient(to left bottom, #ededed, #eae9eb, #e6e6e8, #e3e2e6, #dfdfe4);
  --background-image-primary: linear-gradient(to right top, #1fb3b5, #21b8b4, #25bcb3, #2cc1b1, #35c5af);
  --background-image-success: linear-gradient(to left bottom, #ff7c18, #ff7329, #ff6b35, #ff6341, #ff5c4b);
  --background-image-success-hover: linear-gradient(to right top, #ff7c18, #ff7329, #ff6b35, #ff6341, #ff5c4b);

  /* Typography */
  --font-size-small: 14px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
  --font-size-xlarge: 32px;

  @media (min-width: 1280px) {
    --font-size-small: 16px;
    --font-size-medium: 18px;
    --font-size-large: 24px;
    --font-size-xlarge: 32px;
  }
}

/* Global Styles */
* {
  font-family: var(--font-family);
  box-sizing: border-box;
}




html,
body,
#page,
.container,
#primary.content-area,
#main.site-main,
#booking-engine-container {
  margin: 0;
  padding: 0;
}

body>#page>hr,
body>#page>#header,
body>#page>#footer {
  display: none;
}

h1 {
  font-size: 1.5rem;
  font-weight: 600;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

p#serviceModalLabel {
  margin-left: 0.5rem;
  margin-right: 1em;
  margin-bottom: 0;
}

.selected-category {
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.25rem;
  text-transform: lowercase;
  font-variant: small-caps;
  font-weight: 400;
  letter-spacing: 0.25ch;
}

#whole {
  display: flex;
  flex-direction: column;

  @media (min-width: 1024px) {
    height: 100vh;
  }
}

#content {
  display: flex;
  flex-direction: column;
  height: 100%;

  @media (min-width: 1024px) {
    flex-direction: row;
  }
}

#header {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-image: var(--background-image-primary);
  border-bottom: 1px solid var(--primary-color);
  color: var(--white-color);
  height: 72px;
  padding: 0 16px;
}

#header #pageHeading {}

#header a {
  font-size: 0.75rem;
  display: flex;
  margin-right: auto;
}

#half-1,
#half-2 {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: start;

  @media (min-width: 1024px) {
    width: 50%;
    overflow-y: auto;
    height: 100%;
  }
}

#half-2 {
  background-image: var(--background-image-grey);
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border-color);
}

#half-2 iframe {
  height: calc(100vh - 144px);

  @media (min-width: 1024px) {
    height: calc(100vh - 72px);
  }
}

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 16px;
  gap: 16px;
}

#lists {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.selected-option {
  border: 1px solid var(--border-color);
  padding: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--modal-background);
  padding-top: 60px;
  opacity: 0;
  @media (max-width: 768px) {
    height: 90%; /* 100% is too tall for mobile */
  }
}

.modal.animate {
  animation: fadeIn 0.4s ease forwards;
}

.modal.closing {
  animation: fadeOut 0.3s ease forwards;
}

.modal-content {
  background-color: var(--modal-content-background);
  position: absolute;
  bottom: 0;
  margin: 16px;
  margin-bottom: 0;
  padding: 16px 8px;
  border: 1px solid #888;
  width: calc(100% - 32px);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  height: calc(100% - 96px);
  overflow: auto;
  transform: translateY(100%);

  @media (min-width: 1024px) {
    width: calc(50% - 64px);
    left: 16px;
    height: calc(100% - 384px);
  }
}

.modal.animate .modal-content {
  animation: slideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal.closing .modal-content {
  animation: slideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#serviceModal .modal-content {
  overflow-y: scroll;
}

.close {
  position: absolute;
  color: var(--close-color);
  top: 10px;
  right: 10px;
  font-size: 28px;
  font-weight: bold;
}

@media (min-width: 1024px) {

  .close:hover,
  .close:focus {
    color: var(--close-hover-color);
    text-decoration: none;
    cursor: pointer;
  }
}

/* Tile Styles */
.tile {
  position: relative;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  gap: 16px;
  padding: 8px;
  width: calc(50% - 8px);
  aspect-ratio: 6/5;
  cursor: pointer;

  &::before {
    content: '';
    background-image: var(--background-image-grey);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
  }

  &::after {
    content: '';
    opacity: 0;
    background-image: var(--background-image-grey-reverse);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: opacity 500ms ease;
  }

  @media (min-width: 1024px) {
    width: calc(33.33% - 12px);
    aspect-ratio: 4/3;

    &:hover,
    &:active,
    &:focus {
      &::after {
        opacity: 1;
      }
    }
  }

  @media (min-width: 1280px) {
    aspect-ratio: 16/9;
  }

}

.btn.confirm-button:not(:disabled) {
  position: relative;
  background: transparent;
  border: 1px solid var(--success-color);
  color: white;

  &::before {
    content: '';
    background-image: var(--background-image-success);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
  }

  &::after {
    content: '';
    opacity: 0;
    background-image: var(--background-image-success-hover);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: opacity 500ms ease;
  }

  @media (min-width: 1024px) {

    &:hover,
    &:active,
    &:focus {
      &::after {
        opacity: 1;
      }
    }
  }

}


.pulse {
  background: linear-gradient(-90deg, var(--background-color) 0%, #fcfcfc 50%, var(--background-color) 100%);
  background-size: 400% 400%;
  -webkit-animation: pulse 2s ease-in-out infinite;
  animation: pulse 2s ease-in-out infinite;
}

/* Skeleton tile styling */
.tile.skeleton {
  opacity: 0.85;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: linear-gradient(90deg, 
    #eaeaea 0%, 
    #f0f0f0 50%, 
    #eaeaea 100%);
  background-size: 200% 100%;
  animation: skeletonPulse 3.5s ease-in-out infinite;
}

.tile.skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-15deg);
  animation: shimmerEffect 3.5s ease-in-out infinite;
  z-index: 2;
}

.tile.skeleton .tile-title {
  opacity: 0.5;
  position: relative;
  z-index: 3;
}
.tile.skeleton svg {
  opacity: 0.25;
}

.tile.skeleton .selected-name {
  height: 24px;
  width: 80%;
  border-radius: 4px;
  background-color: rgba(240, 240, 244, 0.6);
  position: relative;
  z-index: 3;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.03);
}

@keyframes skeletonPulse {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes shimmerEffect {
  0% {
    left: -150%;
  }
  50% {
    left: 150%;
  }
  50.1% {
    left: -150%;
  }
  100% {
    left: -150%;
  }
}

@-webkit-keyframes pulse {
  0% {
    background-position: 0% 0%;
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: -135% 0%;
    opacity: 0.7;
  }
}

@keyframes pulse {
  0% {
    background-position: 0% 0%;
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: -135% 0%;
    opacity: 0.7;
  }
}

.tile.selected {
  position: relative;
  background-image: var(--background-image-primary);
  border: 1px solid var(--primary-color);
  color: white;
}

.tile-title {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  font-size: var(--font-size-medium);
  letter-spacing: 0.1ch;
  font-weight: 300;
}

.tile-title svg path {
  fill: black;
}

.tile.selected .tile-title svg path {
  fill: white;
}

.tile .selected-name {
  font-size: var(--font-size-medium);
  font-weight: 600;
  line-height: 1;
  text-align: left;
  letter-spacing: 0.05ch;
}

/* Dropdown Styles */
.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-content {
  display: none;
  position: relative;
  min-width: 160px;
  z-index: 1;

  @media (min-width: 1024px) {
    max-height: calc(100vh - 144px);
  }
}

.dropdown-content div {
  color: black;
  padding: 12px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .dropdown-content div:not(.services-container):hover {
    background-color: var(--hover-color);
  }
}

.dropdown-content details summary {
  padding: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--background-color);
}

.dropdown-content details[open] {
  background-image: var(--background-image-grey);
}

.dropdown-content details[open] summary {
  /* background-color: var(--background-color); */
}

.dropdown-content .selected {
  background-color: var(--selected-color);
}

.dropdown-content.show {
  display: block;
}

/* Details and Dropdown Styles */
details {
  overflow: hidden;
  background: white;
  border-bottom: 1px solid var(--background-color);
}

details summary {
  padding: 12px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  position: relative;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}

details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.services-container {
  display: flex;
  flex-direction: column;
  background: white;
  height: 0;
  overflow: hidden;
}

.services-container.tile:hover {
  background-color: none;
}

.service-option {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--background-color);
  transition: background-color 0.2s ease;

  &:last-of-type {
    border-bottom: none;
  }
}

.service-option:hover {
  background-color: var(--hover-color);
}

.service-option.selected {
  background-color: var(--selected-color);
}

/* Animation styles */
details[open] .services-container {
  animation: expandHeight 0.3s ease-out forwards;
}

details.closing .services-container {
  animation: collapseHeight 0.3s ease-out forwards;
}

@keyframes expandHeight {
  from {
    height: 0;
  }

  to {
    height: var(--content-height);
  }
}

@keyframes collapseHeight {
  from {
    height: var(--content-height);
  }

  to {
    height: 0;
  }
}

/* Loading Spinner */
.loading-spinner {
  position: absolute;
  top: calc(25% - 25px);
  left: calc(75% - 25px);
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: 3px solid var(--background-color);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
  margin: 48px auto;
}

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

/** Buttons */
#buttonsContainer {
  display: flex;
  width: calc(33.33% - 8px);
  gap: 16px;

  @media (min-width: 1024px) {}
}

.btn {
  display: flex;
  align-self: flex-start;
  padding: 8px 16px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}



.btn.reset-button {
  border-color: var(--error-color);
  background-color: white;
  color: var(--error-color);
}

.btn#flushCacheButton {
  background-color: var(--primary-color);
  color: white;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1000;
  background-color: var(--primary-color);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Instructions and More Info Accordion Styles */
#instructions {
  position: relative; /* Create positioning context */
  overflow: visible; /* Allow content to flow properly */
}

#instructions p {
  margin-bottom: 1rem;
}

#instructions .more-info-accordion {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: visible; /* Changed from hidden to allow sticky header to work */
  display: flex;
  flex-direction: column;
}

/* Base styles for the summary */
#instructions .more-info-accordion summary {
  padding: 12px 16px;
  background-color: var(--background-color);
  color: var(--primary-color);
  font-weight: 500;
  font-size: var(--font-size-small);
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 5; /* Ensure it's above content when sticky */
  transform: translateZ(0); /* Force hardware acceleration */
  width: 100%;
  border-bottom: 1px solid transparent;
}

/* Sticky header implementation - force it to work */
@media (max-width: 768px) {
  #instructions .more-info-accordion[open] {
    display: block; /* Ensure proper display mode */
    max-height: 85vh; /* Limit maximum height on mobile */
    overflow-y: auto; /* Enable scrolling within the accordion */
  }
  
  #instructions .more-info-accordion[open] summary {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    margin-top: 0;
    z-index: 999; /* Very high to overcome other elements */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--background-color); /* Ensure visible bg color */
  }

  /* Make the indicator more visible with higher contrast */
  #instructions .more-info-accordion[open] summary::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: var(--primary-color);
  }
  
  /* Add "Close" text to the summary when sticky for better UX */
  #instructions .more-info-accordion[open] summary::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: translateY(-30%) rotate(-135deg); /* Arrow pointing up */
    transition: transform 0.3s ease;
  }
  
  /* Add more space below accordion content for better readability */
  #instructions .more-info-accordion .accordion-content {
    padding-bottom: 24px;
  }
}

/* Non-sticky styles for larger screens */
@media (min-width: 769px) {
  #instructions .more-info-accordion summary::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
  }

  #instructions .more-info-accordion[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
  }
}

#instructions .accordion-content {
  padding: 12px 16px;
  font-size: var(--font-size-small);
  line-height: 1.75;
  color: #666;
  background-color: white;
  position: relative;
  z-index: 1;
}

/* Animation keyframes */
@keyframes slideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Reset cross for tile selections */
.tile-reset-cross {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 10;
  transition: all 0.2s ease;
}

.tile-reset-cross:hover, .tile-reset-cross:focus {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  animation: pulse-light 1.5s infinite;
}

.tile-reset-cross:active {
  transform: scale(0.95);
  background-color: rgba(255, 255, 255, 0.15);
}

@keyframes pulse-light {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}