* {
  box-sizing: border-box;
}

*, body, html {
  margin: 0;
  padding: 0;
}

body,
html {
  overflow-x: hidden;
  width: 100dvw;
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  background: transparent;
  height: 0;
  width: 0;
}

/* ───────────────  Scrolling  ─────────────── */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ───────────────  Typography  ─────────────── */
div,
h1,
h2,
h3,
h4,
h5,
h6,
img,
p,
span {
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

:not(input):not(select):not(textarea):not(button):focus {
  outline: none;
}

/* ───────────────  Images  ─────────────── */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ───────────────  Form Elements  ─────────────── */
input#rememberme[type="checkbox"],
input.notification-checkbox[type="checkbox"] {
  accent-color: #1a3b57;
}

input[type="checkbox"] {
  accent-color: #1b2b12;
}

input:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px #ebe0c5;
  -webkit-text-fill-color: #000;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

input,
select,
textarea {
  transition: background-color 9999s ease-in-out 0s,
              color 9999s ease-in-out 0s;
}

input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  box-shadow: inset 0 0 0 1000px #ebe0c5 !important;
  -webkit-text-fill-color: #000 !important;
  -webkit-transition: background-color 9999s ease-in-out 0s,
                      color 9999s ease-in-out 0s;
  transition: background-color 9999s ease-in-out 0s,
              color 9999s ease-in-out 0s;
}

input:-moz-autofill {
  box-shadow: inset 0 0 0 1000px #ebe0c5 !important;
  -moz-text-fill-color: #000 !important;
}

/* Chrome, Safari, newer Edge */
*::-webkit-scrollbar {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: none;
}

/* ───────────────  Global Behaviors  ─────────────── */
html {
  scroll-behavior: smooth;
}

input[type="checkbox"]:checked {
  accent-color: #1D64EC !important;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* ───────────────  Header  ─────────────── */
header {
  transition: border-color 0.15s ease-in-out,
              background-color 0.15s ease-in-out;
}

.menu-container {
  opacity: 0;
  max-height: 0px;
  overflow: hidden;
  
  transition: max-height 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.menu-container.active {
  opacity: 1;
  max-height: 500px;
}

.menu-container .menu-link-button {
  transition: background-color 0.15s ease-in-out;
}
.menu-container.light .menu-link-button {
  background-color: #00000000;
}
.menu-container.dark .menu-link-button {
  background-color: #00000088;
}

/* Default hidden state */
.expand-menu-button,
.close-menu-button {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

/* Theme: Light */
header.light .expand-menu-button.light-icon {
  opacity: 1;
  pointer-events: all;
}
header.light .close-menu-button.light-icon {
  opacity: 0;
  pointer-events: none;
}
header.light .header-menu.active .expand-menu-button.light-icon {
  opacity: 0;
  pointer-events: none;
}
header.light .header-menu.active .close-menu-button.light-icon {
  opacity: 1;
  pointer-events: all;
}

/* Theme: Dark */
header.dark .expand-menu-button.dark-icon {
  opacity: 1;
  pointer-events: all;
}
header.dark .close-menu-button.dark-icon {
  opacity: 0;
  pointer-events: none;
}
header.dark .header-menu.active .expand-menu-button.dark-icon {
  opacity: 0;
  pointer-events: none;
}
header.dark .header-menu.active .close-menu-button.dark-icon {
  opacity: 1;
  pointer-events: all;
}

header.light {
  background-color: #00000000;
  border-color: #ffffff55;
}

header.dark {
  background-color: #FFFFFFFF;
  border-color: #FFFFFF00;
}

/* ───────────────  Icons  ─────────────── */
header .light-icon {
  transition: opacity 0.15s ease-in-out;
}

header .dark-icon {
  transition: opacity 0.15s ease-in-out;
}

header.light .light-icon {
  opacity: 1;
  pointer-events: all;
}

header.light .dark-icon {
  opacity: 0;
  pointer-events: none;
}

header.dark .light-icon {
  opacity: 0;
  pointer-events: none;
}

header.dark .dark-icon {
  opacity: 1;
  pointer-events: all;
}

header .book-now-button {
  transition: border-color 0.15s ease-in-out;
}

header.light .book-now-button {
  border-color: #ffffff55;
}

header.dark .book-now-button {
  border-color: #FFFFFF00;
}

header a,
header p,
header span {
  transition: color 0.15s ease-in-out;
}

header.light a,
header.light p,
header.light span {
  color: #fff;
}

header.dark a,
header.dark p,
header.dark span {
  color: #393939;
}

#calendar-container {
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.15s ease-in-out;
}

#calendar-container.active {
  opacity: 1;
  pointer-events: all;
}

#calendar-container .available-date {
  background-color: #FFFFFF11;

  transition: background-color 0.4s ease-in-out;
}
#calendar-container .available-date > span {
  color: #FFFFFF;
  font-weight: 400;

  transition: color 0.4s ease-in-out, font-weight 0.4s ease-in-out;
}

#calendar-container .available-date.selected {
  background-color: #FFFFFF;
}
#calendar-container .available-date.selected > span {
  color: #1D64EC;
  font-weight: 500;
}

#calendar-container .available-date:hover {
  background-color: #FFFFFF;
}
#calendar-container .available-date:hover > span {
  color: #1D64EC;
  font-weight: 500;
}

#search-rooms-calendar-container .available-date {
  background-color: #FFFFFF22;

  transition: background-color 0.4s ease-in-out;
}
#search-rooms-calendar-container .available-date > span {
  color: #FFFFFF;
  font-weight: 400;

  transition: color 0.4s ease-in-out, font-weight 0.4s ease-in-out;
}

#search-rooms-calendar-container .available-date.selected {
  background-color: #FFFFFF;
}
#search-rooms-calendar-container .available-date.selected > span {
  color: #1D64EC;
  font-weight: 500;
}

#search-rooms-calendar-container .available-date:hover {
  background-color: #FFFFFF;
}
#search-rooms-calendar-container .available-date:hover > span {
  color: #1D64EC;
  font-weight: 500;
}

#rooms-container {
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.15s ease-in-out;
}

#rooms-container.active {
  opacity: 1;
  pointer-events: all;
}

#adults-children-container {
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.15s ease-in-out;
}

#adults-children-container.active {
  opacity: 1;
  pointer-events: all;
}

.hero-carousel-background-image {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.hero-carousel-background-image.active {
  opacity: 1;
}

/* ───────────────  Glow Highlight  ─────────────── */
.highlight-glow {
  animation: pulseSize 2s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes pulseSize {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(2); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ───────────────  Gallery Cards  ─────────────── */
.gallery-card {
  filter: drop-shadow(12px 12px 8px #00000022);
  z-index: 0;
}

.gallery-card:hover {
  z-index: 10;
}

.gallery-card img {
  transform: scale(1);
  transition: transform 0.15s ease-in-out;
}

.gallery-card:hover img {
  transform: scale(1.5);
}

.gallery-card .glow {
  opacity: 0;
  transition: opacity 0.15s ease-in-out 0.15s;
}

.gallery-card:hover .glow {
  opacity: 0.5;
}

/* ───────────────  Room Cards  ─────────────── */
.room-card-one  img { filter: drop-shadow(-12px 12px 8px #00000022); }
.room-card-two  img { filter: drop-shadow(-4px  12px 8px #00000022); }
.room-card-three img { filter: drop-shadow( 12px 12px 8px #00000022); }

/* ───────────────  FAQ Accordion  ─────────────── */
.faq-item .faq-content {
  margin: 0;
  max-height: 0;
  transition: max-height 0.6s ease-in-out,
              margin-top 0.6s ease-in-out,
              margin-bottom 0.6s ease-in-out;
}

.faq-item.expanded .faq-content {
  margin: 12px 0;
  max-height: 280px;
}

.soft-shadow {
  filter: drop-shadow(2px 2px 12px #00000011);
}

.sq-card-message {
  display: none;
}

.select-button {
  background-color: #000000;
}
.select-button.selected {
  background-color: #1D64EC;
}

.progress-bar-step {
  background-color: #F7F6F9;

  transition: background-color 0.15s ease-in-out;
}

.progress-bar-step.active {
  background-color: #1D64EC;
}

.progress-bar-step span {
  color: #797979;
  font-weight: 400;

  transition: color 0.15s ease-in-out, font-weight 0.15s ease-in-out;
}

.progress-bar-step.active span {
  color: #FFFFFF;
  font-weight: 500;
}

.progress-bar-line {
  background-color: #898989;

  transition: background-color 0.15s ease-in-out;
}

.progress-bar-line.active {
  background-color: #1D64EC;
}

#reservation-summary {
  row-gap: 20px;

  transition: row-gap 0.15s ease-in-out;
}

@media (max-width: 720px) {
  #reservation-summary.collapsed {
    row-gap: 0px;
  }
}

.price-button {
  border: 1px solid #EAEAEA;
  background-color: #FFFFFF00;

  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.price-button > span {
  color: #EAEAEA;

  transition: color 0.15s ease-in-out;
}

.price-button.active {
  border: 1px solid #1D64EC;
  background-color: #1D64EC;
}

.price-button.active > span {
  color: #FFFFFF;
}

#reservation-summary .reservation-summary-toggle-button {
  opacity: 0;
  pointer-events: none;
  
  transform: rotate(180deg);
  transition: transform 0.15s ease-in-out;
}

@media (max-width: 720px) {
  #reservation-summary .reservation-summary-toggle-button {
    opacity: 1;
    pointer-events: all;
  }
}

#reservation-summary.collapsed .reservation-summary-toggle-button {
    transform: rotate(0deg);
}

#reservation-summary #reservation-summary-content {
  max-height: 680px;
  overflow: hidden;

  transition: max-height 0.15s ease-in-out;
}

@media (max-width: 720px) {
  #reservation-summary.collapsed #reservation-summary-content {
    max-height: 0px;
  }
}

/* ───────────────  Google Maps Autocomplete  ─────────────── */
.pac-container {
  position: absolute !important;
  top: 72px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  height: fit-content !important;
  width: 100% !important;
  z-index: 9999 !important;
}

#billing-address-form-container {
  row-gap: 24px;

  transition: row-gap 0.15s ease-in-out;
}

#billing-address-form-container.collapsed {
  row-gap: 0px;
}

#billing-address-form-container form {
  max-height: 500px;
  transition: max-height 0.15s ease-in-out;
}

#billing-address-form-container.collapsed form {
  max-height: 0px;
}

.addon .addon-icon {
  opacity: 1;

  transition: opacity 0.15s ease-in-out;
}
.addon .selected-icon {
  opacity: 0;
  
  transition: opacity 0.15s ease-in-out;
}

.addon.selected .addon-icon {
  opacity: 0;
}
.addon.selected .selected-icon {
  opacity: 1;
}

.addon {
  border: 1px solid #696969;
  background-color: #FFFFFF;

  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.addon.selected {
  border: 1px solid #1D64EC;
  background-color: #1D64EC;
}

.addon .addon-name {
  color: #595959;
  transition: color 0.15s ease-in-out, font-weight 0.15s ease-in-out;
}

.addon.selected .addon-name {
  color: #FFFFFF;
}

.addon .addon-price {
  max-width: 200px;

  transition: max-width 0.15s ease-in-out;
}

.addon.selected .addon-price {
  max-width: 0px;
}

#search-rooms-calendar-container {
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.15s ease-in-out;
}

#search-rooms-calendar-container.active {
  opacity: 1;
  pointer-events: all;
}

#search-rooms-rooms-container {
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.15s ease-in-out;
}

#search-rooms-rooms-container.active {
  opacity: 1;
  pointer-events: all;
}

#search-rooms-adults-children-container {
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.15s ease-in-out;
}

#search-rooms-adults-children-container.active {
  opacity: 1;
  pointer-events: all;
}

#google-review-container > div {
  transition: transform 0.8s ease-in-out;
}

#room-description {
  padding-right: 12px;

  overflow-y: scroll;

  /* Firefox */
  scrollbar-width: thin; /* Options: auto | thin | none */
  scrollbar-color: #00000055 #FFFFFF00;
}

#room-description::-webkit-scrollbar {
  width: 1px; /* Chrome, Safari */
}

#room-description::-webkit-scrollbar-thumb {
  background-color: #00000055;
  border-radius: 999px;
}

#room-description::-webkit-scrollbar-track {
  background-color: #FFFFFF00;
}

.gallery .gallery-navigation {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.gallery:hover .gallery-navigation {
  opacity: 1;
}

.gallery .gallery-carousel div {
  transition: transform 0.35s ease-in-out;
}

.gallery-step {
  background-color: #696969;

  transition: background-color 0.35s ease-in-out;
}

.gallery-step.active {
  background-color: #FFFFFF;
}