/* css-reservation-form.css — styles that only matter when one of these sections is on the page:
 * reservation-form.
 * Linked from each of them (see the first line of the section file); theme.css
 * holds the common styles. */

.lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 34rem; }

.field__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.field__label .req { color: var(--danger); }

.field__hint { font-size: 0.8rem; color: var(--muted); margin: 0.3rem 0 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

@media (max-width: 34rem) {
  .form-grid { grid-template-columns: 1fr; }
}
.reserve__media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--surface-3), var(--line-2));
  box-shadow: var(--shadow);
}

.reserve__media img { width: 100%; height: 100%; object-fit: cover; }

.reserve__form { max-width: 26rem; }

@media (max-width: 52rem) {
  .reserve__media { order: -1; aspect-ratio: 16 / 10; }
}
/* ---- Progressive-enhancement field swap ---------------------------------
   The reservation form draws Date and Time as two fields, and the name as
   First / Last, the way the design specifies. The platform wants one
   datetime and one name, so theme.js composes them on submit. With
   scripting off the composed fields are dropped and a single combined
   field takes their place — see the <noscript> block in the section. */
.no-js-field { display: none; }

.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent); font-weight: 600; }

.link-arrow .icon { transition: transform 0.18s var(--ease); }

.link-arrow:hover .icon { transform: translateX(3px); }

[dir="rtl"] .link-arrow .icon { transform: scaleX(-1); }

[dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(3px); }

/* ---- Reservation form (sections/reservation-form) — the account sheets' look -------
 * The form sits in a white rounded card; labels are bold over 12px-rounded
 * fields with a soft focus ring; the submit is a full-width pill. The photo
 * keeps its side. */
.reserve__form { max-width: 32rem; }

.reserve__form > form {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}

.reserve__form .field { margin-bottom: 1.1rem; }

.reserve__form .field__label { margin-bottom: 0.35rem; font-weight: 700; color: var(--ink); }

.reserve__form .input,
.reserve__form .select,
.reserve__form .textarea {
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.reserve__form .textarea { min-height: 7rem; }

.reserve__form .input:focus,
.reserve__form .select:focus,
.reserve__form .textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: none;
}

.reserve__form .form-grid { gap: 0 0.75rem; }

.reserve__form .field__hint { margin: -0.4rem 0 1.1rem !important; }

.reserve__form button[type="submit"] { width: 100%; min-height: 50px; margin-top: 0.25rem !important; border-radius: var(--radius-pill); justify-content: center; }

.reserve__media { border-radius: 20px; }

@media (max-width: 34rem) {
  .reserve__form > form { padding: 1.25rem 1rem; }
}