/* ==========================================================================
   DIA BONITO · booking.css
   Shared by book.html (reservations) and inquire.html (plan-your-stay form).
   ========================================================================== */

/* --- Intro
   Now sits inside a full-bleed "book-hero" / "inquire-hero" panel (see
   style.css for .panel-center). Just the text styling lives here. ----- */

/* Utility pages get no cinematic hold: at 100svh the sticky child has zero
   pin travel, so the page moves the moment the visitor scrolls and the form
   is one natural swipe away. The 135svh hold stays on the marketing pages. */
[data-media-slot="inquire-hero"],
[data-media-slot="book-hero"] { min-height: 100svh; }

.booking-title {
  font-family: var(--serif);
  font-weight: 330;
  font-size: clamp(42px, 8vw, 76px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--bone);
  /* Large text only needs 3:1 contrast, so a shadow carries it without
     darkening the photo behind it. */
  text-shadow: 0 1px 3px rgba(10,19,16,0.9), 0 2px 20px rgba(10,19,16,0.7), 0 4px 40px rgba(10,19,16,0.5);
}

.booking-rule { margin-top: 34px; margin-bottom: 32px; }

.booking-lede {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.65;
  color: var(--bone-2);
  max-width: 560px;
  margin: 0 auto;
}

/* --- Reservations placeholder (book.html) ------------------------------------- */

.widget-frame {
  padding: clamp(48px, 7vw, 80px) var(--gutter) clamp(80px, 12vw, 140px);
}

.widget-frame-inner { max-width: 640px; margin: 0 auto; }

.widget-frame-note {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.65;
  color: var(--bone-2);
  text-align: center;
  max-width: 540px;
  margin: 0 auto 40px;
}

.widget-frame-cta { text-align: center; }

/* --- Inquiry form (inquire.html) ------------------------------------------------ */

.inquire-form-wrap {
  max-width: 680px;
  margin: 0 auto clamp(90px, 13vw, 150px);
  padding: 0 var(--gutter);
}

.inquire-form {
  display: flex;
  flex-direction: column;
  gap: 34px;
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 6vw, 56px);
}

/* Occasion carried in from the nav (?occasion=<slug>); hidden until set. */
.inquire-occasion {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lagoon);
  margin: 0 0 28px;
  text-align: center;
}

.inquire-form .field-row {
  display: grid;
  gap: 34px;
}

@media (min-width: 640px) {
  .inquire-form .field-row { grid-template-columns: 1fr 1fr; gap: 34px 28px; }
}

.inquire-form .field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inquire-form label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-3);
}

.inquire-form label .optional {
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--bone-3);
  margin-left: 4px;
}

.inquire-form input[type=date],
.inquire-form input[type=email],
.inquire-form input[type=number],
.inquire-form input[type=tel],
.inquire-form input[type=text],
.inquire-form select,
.inquire-form textarea {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--bone);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0;
  width: 100%;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s var(--ease-out);
}

.inquire-form input::placeholder,
.inquire-form textarea::placeholder {
  color: var(--bone-3);
}

.inquire-form input:focus,
.inquire-form select:focus,
.inquire-form textarea:focus {
  border-bottom-color: var(--lagoon);
}

.inquire-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%238fb8a8' stroke-width='1.25' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
}

.inquire-form select option {
  background: var(--ink-2);
  color: var(--bone);
}

.inquire-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.inquire-form .form-actions { margin-top: 18px; }

.inquire-form .btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 639px) {
  .inquire-form .btn-submit { width: 100%; }
}

/* --- Success / error states --------------------------------------------------- */

.inquire-success, .inquire-error {
  display: none;
  padding: clamp(44px, 7vw, 64px) 36px;
  border: 1px solid var(--line);
  text-align: center;
}

.inquire-success.active, .inquire-error.active { display: block; }

.inquire-success .success-mark {
  font-size: 30px;
  color: var(--lagoon);
  margin-bottom: 18px;
  line-height: 1;
}

.inquire-success .success-title {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(26px, 4vw, 34px);
  color: var(--bone);
  margin-bottom: 14px;
}

.inquire-success .success-sub {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--bone-2);
}

.inquire-error {
  border-color: rgba(196, 110, 90, 0.5);
  color: #c99a88;
  font-size: 15px;
  line-height: 1.7;
}

/* --- Alternate route ------------------------------------------------------------ */

.alt-route {
  text-align: center;
  padding: 0 var(--gutter) clamp(90px, 13vw, 150px);
  font-family: var(--serif);
  font-size: 17px;
  color: var(--bone-3);
}

.alt-route a {
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lagoon);
  border-bottom: 1px solid var(--lagoon-dim);
  padding-bottom: 3px;
  margin-left: 8px;
}

.alt-route a:hover { color: var(--bone); border-bottom-color: var(--bone); }