/* Shared public-site controls. No PMS selectors or booking calculations. */
:root {
  --ui-control: 48px;
  --ui-target: 44px;
  --ui-radius: 8px;
  --ui-panel-radius: 12px;
  --ui-gap: 12px;
  --ui-icon: 20px;
  --ui-border: #bcc8bd;
  --ui-ink: #20362f;
  --ui-accent: #274b3c;
  --ui-hover: #e7eee7;
  --ui-focus: #b78c53;
}
:where(button, input, select, summary, a):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
.booking-row select, .reservation-extras select, body.document-page .checkout select {
  appearance: none;
  background-image: url("../assets/ui/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: var(--ui-icon);
  padding-right: 40px;
  cursor: pointer;
}
.booking-row select {height: var(--ui-control); min-height: var(--ui-control);}
.booking-row label {min-width: 0;}
.booking-row > #whatsapp-btn {margin: 12px 0 0;}
.booking-row .date-trigger {min-height: var(--ui-control);}
body.document-page .checkout input:not([type=checkbox]):not([type=hidden]),
body.document-page .checkout select, body.document-page .checkout .date-trigger,
.reservation-extras select {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--ui-control);
  height: var(--ui-control);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  margin-top: 8px;
  padding-block: 10px;
  font: inherit;
  line-height: 1.5;
}
body.document-page .checkout .date-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--ui-gap); padding-inline: 12px; text-align: left;
  background: white; color: var(--ui-ink); cursor: pointer;
}
.checkout-contact > label {min-width: 0;}
.checkout-contact {align-items: start;}
.checkout .native-date-enhanced {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.checkout-button, .room-book, .reservation-continue, .breakfast-open,
.booking-row > #whatsapp-btn {
  box-sizing: border-box; min-height: var(--ui-control); border-radius: var(--ui-radius);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ui-gap); line-height: 1.4; padding-block: 12px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.checkout-button:not(:disabled):hover, .reservation-continue:not(:disabled):hover {
  background-color: #365f4c;
}
.checkout-button.secondary:not(:disabled):hover, .room-book:hover, .breakfast-open:hover {
  background-color: var(--ui-hover); border-color: var(--ui-accent);
}
:where(.checkout-button, .room-book, .reservation-continue, .breakfast-open, #whatsapp-btn):not(:disabled):active {
  box-shadow: inset 0 2px 4px #142b2326;
}
body.document-page .checkout :disabled {cursor: not-allowed;}
body.document-page .checkout select:disabled {background-color: #edf0eb; color: #657166;}
body.document-page .checkout .check-label {
  display: flex; align-items: flex-start; gap: var(--ui-gap); line-height: 1.6;
}
body.document-page .checkout input[type=checkbox], .reservation-extras input[type=checkbox] {
  appearance: none; display: inline-grid; place-content: center; flex: 0 0 20px;
  width: 20px; height: 20px; margin: .15em 0 0; padding: 0;
  border: 1px solid var(--ui-border); border-radius: 4px;
  background: white; color: white; cursor: pointer;
}
body.document-page .checkout input[type=checkbox]:checked, .reservation-extras input[type=checkbox]:checked {
  border-color: var(--ui-accent); background: var(--ui-accent) url('../assets/ui/check.svg') center / 16px no-repeat;
}
body.document-page .checkout input[type=checkbox]:disabled {background-color: #edf0eb; cursor: not-allowed;}
.gallery-arrow, .room-modal-close, .breakfast-close, .reservation-close {
  box-sizing: border-box; width: var(--ui-target); height: var(--ui-target);
  padding: 0; display: inline-grid; place-items: center; line-height: 1;
  border-radius: 50%;
}
.gallery-arrow {font-size: 0;}
.gallery-arrow svg {display: none;}
.gallery-arrow::before {
  content: ''; width: var(--ui-icon); height: var(--ui-icon);
  background: var(--ui-ink);
  mask: url('../assets/ui/chevron-down.svg') center / contain no-repeat;
  transform: rotate(90deg);
}
.gallery-arrow[data-slide="1"]::before, #restaurant-arrow-right::before {transform: rotate(-90deg);}
.gallery-arrow:hover {transform: translateY(-50%); background: white;}
.room-modal-close {top: 8px; right: 8px;}
.room-card, .checkout-panel, .room-modal-content {border-radius: var(--ui-panel-radius);}
.room-card {display: flex; flex-direction: column;}
.room-card .room-book {margin-top: auto; align-self: stretch;}
.room-card .room-info-row {margin-bottom: 18px;}
.split-modal > *, .checkout-grid > *, .guest-footer-inner > *, .services-bento > *, .services-amenities > * {min-width: 0;}
.document-header {gap: 16px;}
.document-header .guest-brand {margin: 0; overflow-wrap: anywhere;}
.document-languages {flex-shrink: 0;}
body.document-page .document-languages a, .lang-btn {min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;}
body.document-page .checkout summary {cursor: pointer; padding-block: 8px;}
.ui-icon {display: inline-block; width: var(--ui-icon); height: var(--ui-icon); flex: 0 0 var(--ui-icon); vertical-align: -.15em;}
.date-trigger .ui-icon {color: var(--ui-accent);}
@media(max-width: 800px) {
  .checkout-steps {align-items: stretch;}
  .checkout-steps li {min-width: 0; line-height: 1.45;}
  body.document-page .document-header {flex-wrap: wrap;}
  .checkout-actions > .checkout-button {width: 100%;}
}
@media(max-width: 480px) {
  body.document-page .checkout {padding-inline: 16px;}
  body.document-page .checkout-panel {padding: 20px 16px;}
  .booking-row .guest-options {gap: var(--ui-gap);}
  .checkout-docs, .checkout-caption {overflow-wrap: anywhere;}
  .services-amenities {grid-template-columns: repeat(2,minmax(0,1fr));}
  .service-restaurant-title {font-size: clamp(30px,9vw,42px);}
  .services-amenities .breakfast-open {max-width: 100%; overflow-wrap: anywhere;}
}
@media(forced-colors: active) {
  body.document-page .checkout input[type=checkbox] {appearance: auto;}
  .gallery-arrow::before {background: ButtonText;}
}