@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.65s;
}

/* .gm-navbar {
  view-transition-name: navigation;
} */

:root {
  --swiper-navigation-color: var(--base-color-brand--brown);
  --swiper-pagination-bullet-width: 12px;
  --swiper-pagination-bullet-size: 12px;

  .swiper-pagination-bullet {
    border: 1px solid var(--base-color-brand--brown);
    background-color: transparent;
    transition: background-color 0.3s, border 0.3s;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--base-color-brand--brown);
  }
}

/* Custom modal styles */

.modal__header .modal__close:before {
  content: "\2715";
}

.modal-window::backdrop {
  background: rgb(0 0 0 / 50%);
}

.modal-window {
  transform: translateY(-50px);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s, display 0.5s;
  transition-behavior: allow-discrete;
}

.modal-window:popover-open {
  transform: translateY(0);
  opacity: 1;
}

@starting-style {
  .modal-window:popover-open {
    transform: translateY(20px);
    opacity: 0;
  }
}



/* Add these new styles to your existing CSS */
@media screen and (max-width: 991px) {
  .container-large {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .pricing-table {
    min-width: 768px; /* Ensures table doesn't shrink too much */
  }
  
  /* Adjust the service options to maintain structure */
  .service-options {
    flex-wrap: nowrap;
    min-width: max-content;
  }
}

/* For even smaller screens */
@media screen and (max-width: 767px) {
  .pricing-table {
    min-width: 650px;
  }
}

.massage-card {
	height: 100%;
}