/* Additions to Smart: inherit its Public Sans fonts, grid and colour tokens. */
:root[data-color-pref='light'] { color-scheme: light; }
:root[data-color-pref='dark'] { color-scheme: dark; }

.home-template .sm-hero { min-height: 0; padding-bottom: 1.5rem; }
.home-template .sm-hero-inner { padding-top: 5rem; }
.home-template .sm-hero-subtitle { margin-top: 0; }
.home-template .sm-hero-img img { max-height: 240px; width: auto; max-width: 100%; object-fit: contain; }
.fdh-hero-detail { margin: 1rem 0 0; font-size: var(--small); color: var(--element-dark); }
.fdh-booking-section { grid-column: content; min-width: 0; }
.fdh-booking-section > h2 { margin: 0 0 1rem; font-size: var(--h4); }
.fdh-booking {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(12rem, 1.25fr);
  gap: 1rem;
  align-items: end;
  padding: 1.75rem;
  color: var(--element);
  background: var(--surface-light);
  border: 1px solid var(--border-color-accent);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow);
}
.fdh-field { min-width: 0; }
.fdh-field label { display: block; margin-bottom: .4rem; font-size: var(--small); font-weight: 600; }
.fdh-field input, .fdh-field select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 3.5rem;
  padding: .75rem;
  font: inherit;
  font-size: max(1rem, 16px);
  color: var(--element);
  background: var(--surface);
  border: 1px solid var(--border-color-accent);
  border-radius: var(--radius-small);
}
/* The wrapper owns padding/borders: iOS date controls can overflow when they
   combine width: 100% with their own horizontal padding. Keep native pickers. */
.fdh-date-control {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 0 .75rem;
  background: var(--surface);
  border: 1px solid var(--border-color-accent);
  border-radius: var(--radius-small);
}
.fdh-date-control input[type='date'] {
  appearance: none;
  -webkit-appearance: none;
  min-inline-size: 0;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.fdh-date-control input::-webkit-date-and-time-value { min-height: 1.5em; text-align: left; }
.fdh-date-hint {
  display: none;
  position: absolute;
  top: 50%;
  left: .75rem;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: max(1rem, 16px);
  color: var(--element-dark);
}
.fdh-date-control[data-empty='true']:not(:focus-within) .fdh-date-hint { display: block; }
.fdh-date-control[data-empty='true']:not(:focus-within) input {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.fdh-booking button { min-height: 3.5rem; padding: .75rem 1rem; font-size: 1rem; font-weight: 700; line-height: 1.25; text-transform: none; cursor: pointer; }
.fdh-booking :is(select, button):focus-visible, .fdh-date-control:focus-within { outline: 2px solid var(--element); outline-offset: 3px; }
.fdh-date-control input:focus { outline: none; }
.fdh-booking-note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0; font-size: var(--x-small); color: var(--element-dark); }
.fdh-booking-badge { display: inline-flex; align-items: center; gap: .45rem; }
.fdh-booking-badge svg { flex: none; }
.fdh-booking-badge strong { font-size: var(--small); color: var(--element); }
.fdh-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 1.5rem; }
.fdh-highlights h3 { margin: 0 0 .5rem; font-size: var(--h5); }
.fdh-highlights p { margin: 0; font-size: var(--small); color: var(--element-dark); }
@media (max-width: 991px) {
  .fdh-booking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .fdh-highlights { grid-template-columns: minmax(0, 1fr); }
  .fdh-booking { grid-template-columns: minmax(0, 1fr); padding: 1rem; gap: .75rem; }
  .fdh-booking .fdh-field:nth-of-type(3), .fdh-booking button { grid-column: 1 / -1; }
}