/* Rawana — Booking: section layout + a Rawana skin over the reservations form. */

.rwn-booking__layout {
  display: grid;
  gap: var(--wp--preset--spacing--70);
}

@media (min-width: 980px) {
  .rwn-booking__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(var(--wp--preset--spacing--70), 6vw, var(--wp--preset--spacing--100));
  }

  .rwn-booking__aside {
    position: sticky;
    top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--70));
    align-self: start;
  }
}

.rwn-booking__aside {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  align-content: start;
}

/* Same specificity fix the FAQ aside needs — outranks .rwn-card { margin: 0 }. */
.rwn-booking .rwn-booking__contact { margin-top: var(--wp--preset--spacing--40); }
.rwn-booking__phone { font-size: var(--wp--preset--font-size--lg); }
.rwn-booking__note { color: var(--wp--preset--color--dim); }

/* ---- The plugin's form, re-skinned ---- */

.rwn-booking .rtb-booking-form {
  border-radius: var(--wp--custom--radius-md);
  border: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
  border-top-color: var(--wp--custom--border-top-light);
  background-color: var(--wp--preset--color--surface-two);
  background-image: var(--wp--custom--gradient-surface-top);
  box-shadow: var(--wp--custom--shadow-lg);
  padding: clamp(var(--wp--preset--spacing--50), 4vw, var(--wp--preset--spacing--70));
}

.rwn-booking .rtb-booking-form fieldset {
  border: 0;
  margin: 0 0 var(--wp--preset--spacing--60);
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--40);
}

.rwn-booking .rtb-booking-form fieldset:last-of-type { margin-bottom: 0; }

.rwn-booking .rtb-booking-form legend {
  padding: 0;
  margin-bottom: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-widest);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

/* Date / time / party sit on one row where there is room. */
@media (min-width: 620px) {
  .rwn-booking .rtb-booking-form fieldset.reservation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rwn-booking .rtb-booking-form fieldset.reservation legend { grid-column: 1 / -1; }
}

.rwn-booking .rtb-booking-form label {
  display: block;
  margin-bottom: 0.5em;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.rwn-booking .rtb-booking-form input[type="text"],
.rwn-booking .rtb-booking-form input[type="email"],
.rwn-booking .rtb-booking-form input[type="tel"],
.rwn-booking .rtb-booking-form select,
.rwn-booking .rtb-booking-form textarea {
  width: 100%;
  /* booking-form.css caps every input at 15em, which leaves them stranded
     mid-row inside our grid. Let them fill the column they were given. */
  max-width: none;
  box-sizing: border-box;
  padding: 0.85em 1em;
  border-radius: var(--wp--custom--radius-sm);
  border: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
  background-color: var(--wp--preset--color--surface-inset);
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-normal);
  transition:
    border-color var(--wp--custom--duration-mid) var(--wp--custom--ease-out),
    box-shadow var(--wp--custom--duration-mid) var(--wp--custom--ease-out);
}

.rwn-booking .rtb-booking-form textarea { min-height: 7em; resize: vertical; }

.rwn-booking .rtb-booking-form input:focus,
.rwn-booking .rtb-booking-form select:focus,
.rwn-booking .rtb-booking-form textarea:focus {
  outline: none;
  border-color: var(--wp--custom--border-accent);
  box-shadow: 0 0 0 3px var(--wp--custom--accent-wash);
}

.rwn-booking .rtb-booking-form select {
  appearance: none;
  /* Chevron drawn in the accent so it reads as part of the system. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--wp--preset--color--accent) 50%),
    linear-gradient(135deg, var(--wp--preset--color--accent) 50%, transparent 50%);
  background-position: right 1.15em top 55%, right 0.8em top 55%;
  background-size: 0.4em 0.4em, 0.4em 0.4em;
  background-repeat: no-repeat;
  padding-right: 2.6em;
}

.rwn-booking .rtb-booking-form .add-message a {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--custom--border-accent);
}

.rwn-booking .rtb-booking-form .rtb-form-submit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95em 2em;
  border: var(--wp--custom--border-width) solid transparent;
  border-radius: var(--wp--custom--radius-pill);
  background-image: var(--wp--custom--gradient-accent);
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-ink);
  box-shadow: 0 10px 34px -14px var(--wp--custom--accent-glow);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-semibold);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
    box-shadow var(--wp--custom--duration-mid) var(--wp--custom--ease-out);
}

.rwn-booking .rtb-booking-form .rtb-form-submit button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 44px -14px var(--wp--custom--accent-glow);
}

.rwn-booking .rtb-booking-form .rtb-form-submit button:active { transform: translateY(0); }

/* ---- Messages ---- */

.rwn-booking .rtb-message,
.rwn-booking .rtb-error {
  border-radius: var(--wp--custom--radius-sm);
  border: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
  background-color: var(--wp--preset--color--surface-inset);
  padding: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--40);
}

.rwn-booking .rtb-error,
.rwn-booking .rtb-booking-form .rtb-error input {
  border-color: #b4442f;
}

.rwn-booking .rtb-booking-form .rtb-error label { color: #e2705a; }

/* ---- pickadate date/time popovers ---- */

/* pickadate appends .picker as a direct child of <body>, so these rules cannot
   be scoped to .rwn-booking. Its own stylesheet loads after this snippet, so
   every selector here carries an extra .picker to win on specificity. */

.picker .picker__holder {
  width: 100%;                 /* the plugin's 100vw overflows past the scrollbar */
  background-color: rgba(3, 8, 7, 0.72);
}

.picker .picker__box {
  background: var(--wp--preset--color--surface-three);
  color: var(--wp--preset--color--contrast);
  border-radius: var(--wp--custom--radius-sm);
  border: var(--wp--custom--border-width) solid var(--wp--custom--border-hairline);
}

.picker .picker__header,
.picker .picker__month,
.picker .picker__year,
.picker .picker__nav--prev,
.picker .picker__nav--next { color: var(--wp--preset--color--contrast); }

.picker .picker__nav--prev:hover,
.picker .picker__nav--next:hover { background: var(--wp--preset--color--surface-two); }

.picker .picker__select--month,
.picker .picker__select--year {
  background: var(--wp--preset--color--surface-inset);
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--custom--border-hairline);
}

.picker .picker__weekday { color: var(--wp--preset--color--muted); }

.picker .picker__day,
.picker .picker__list-item {
  background: transparent;
  color: var(--wp--preset--color--contrast);
  border-color: transparent;
}

.picker .picker__day--today:before { border-top-color: var(--wp--preset--color--accent); }

.picker .picker__day--infocus:hover,
.picker .picker__day--outfocus:hover,
.picker .picker__day--highlighted:hover,
.picker .picker__list-item:hover {
  background: var(--wp--preset--color--surface-two);
  color: var(--wp--preset--color--contrast);
  border-color: transparent;
}

.picker .picker__day--highlighted { border-color: var(--wp--custom--border-accent); }

.picker .picker__day--selected,
.picker .picker__day--selected:hover,
.picker .picker__list-item--selected,
.picker .picker__list-item--selected:hover,
.picker--focused .picker__day--selected,
.picker--focused .picker__day--highlighted,
.picker--focused .picker__list-item--selected,
.picker--focused .picker__list-item--highlighted {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-ink);
  border-color: transparent;
}

/* Past dates and closed times: the plugin paints these #f5f5f5. */
.picker .picker__day--disabled,
.picker .picker__day--disabled:hover,
.picker .picker__day--outfocus,
.picker .picker__day--highlighted.picker__day--disabled,
.picker .picker__list-item--disabled,
.picker .picker__list-item--disabled:hover,
.picker--focused .picker__day--disabled {
  background: transparent;
  border-color: transparent;
  color: var(--wp--preset--color--dim);
  cursor: default;
}

.picker .picker__day--disabled:before { border-top-color: var(--wp--preset--color--dim); }

.picker .picker__footer,
.picker .picker__button--today,
.picker .picker__button--clear,
.picker .picker__button--close {
  background: var(--wp--preset--color--surface-three);
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--custom--border-hairline);
}

.picker .picker__button--today:hover,
.picker .picker__button--clear:hover,
.picker .picker__button--close:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-ink);
}

/* The time picker gets its own light background too. */
.picker--time .picker__box { background: var(--wp--preset--color--surface-three); }

/* booking-form.css scopes the footer buttons by id, which outranks .picker. */
#rtb-date_root .picker__button--today,
#rtb-date_root .picker__button--clear,
#rtb-date_root .picker__button--close,
#rtb-time_root .picker__button--today,
#rtb-time_root .picker__button--clear,
#rtb-time_root .picker__button--close {
  color: var(--wp--preset--color--contrast);
}

#rtb-date_root .picker__button--today:hover,
#rtb-date_root .picker__button--clear:hover,
#rtb-date_root .picker__button--close:hover,
#rtb-time_root .picker__button--today:hover,
#rtb-time_root .picker__button--clear:hover,
#rtb-time_root .picker__button--close:hover {
  color: var(--wp--preset--color--accent-ink);
}

/* ---- Country code + phone read as one control ---- */

/* Below the breakpoint they stack, so the select keeps its own full-width row. */
@media (min-width: 620px) {
  .rwn-booking .rtb-booking-form fieldset.rtb-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Everything spans the full row unless it is half of the phone pair. */
  .rwn-booking .rtb-booking-form fieldset.rtb-contact > legend,
  .rwn-booking .rtb-booking-form fieldset.rtb-contact > div {
    grid-column: 1 / -1;
  }

  .rwn-booking .rtb-booking-form fieldset.rtb-contact > .phone-country { grid-column: span 1; }
  .rwn-booking .rtb-booking-form fieldset.rtb-contact > .phone { grid-column: span 2; }
}

/* The dial code is the part that matters at a glance, so give it the mono face
   and stop the long country names from stretching the column. */
.rwn-booking .rtb-booking-form #rtb-phone-country {
  text-overflow: ellipsis;
}