/*
 * rental-datetime.css — the rental flow's step 1 (date & time), built by
 * assets/js/modules/flow-datetime.js. Everything is namespaced .frdt-* so none of it
 * reaches the delivery or tour pickers, which still use flow.css.
 */

#rentalStep1 {
  --frdt-primary: var(--fr-primary, hsl(22, 18%, 56%));
  --frdt-primary-dark: hsl(22, 20%, 44%);
  --frdt-tint: hsla(22, 30%, 56%, 0.12);
  --frdt-ink: var(--fr-foreground, hsl(220, 15%, 18%));
  --frdt-muted: var(--fr-muted-foreground, hsl(220, 8%, 50%));
  --frdt-line: hsl(30, 14%, 89%);
  --frdt-soft: hsl(30, 25%, 97%);
}

/* ── page layout ─────────────────────────────────────────────────────────────── */

#rentalStep1 .frdt-head {
  margin-bottom: 20px;
}

#rentalStep1 .fr-title {
  margin-bottom: 6px;
}

#rentalStep1 .fr-subtitle {
  font-size: 15px;
  margin-bottom: 0;
}

#rentalStep1 .dateimecolumn {
  padding-right: 28px;
}

/* Desktop: the photo is exactly as tall as the card, top and bottom edges level. The
   row stretches both columns to the taller one (the card), and the photo fills its
   column. It grows with the card as quick picks and the summary appear. */
@media (min-width: 992px) {
  #rentalStep1 .fr-two-column-layout.row {
    align-items: stretch;
  }

  #rentalStep1 .fr-two-column-layout.row > .col-lg-5 {
    display: flex;
    flex-direction: column;
  }

  #rentalStep1 .fr-hero-image-container {
    flex: 1;
    min-height: 0;
    border-radius: 20px; /* same as the card */
    box-shadow: 0 1px 2px hsla(30, 20%, 20%, 0.04), 0 12px 32px hsla(30, 20%, 20%, 0.06);
  }

  /* Out of flow on purpose: in flow, the image's own aspect ratio (~600px tall at
     this width) set a floor on the row, so the photo overhung a shorter card. */
  #rentalStep1 .fr-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Banner inset matches the card's inner padding, so its edges line up with the
     card's content across the gap. */
  #rentalStep1 .fr-hero-overlay {
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-radius: 14px;
    padding: 14px 18px;
  }
}

/* ── card ────────────────────────────────────────────────────────────────────── */

.frdt-card {
  background: #fff;
  border: 1px solid var(--frdt-line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 1px 2px hsla(30, 20%, 20%, 0.04), 0 12px 32px hsla(30, 20%, 20%, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.frdt-card.has-error {
  border-color: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15);
}

/* Pickup → Return */
.frdt-ends {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.frdt-end {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 12px 16px;
  background: var(--frdt-soft);
  border: 1.5px solid var(--frdt-line);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.frdt-end:hover:not(:disabled) {
  border-color: hsl(22, 15%, 75%);
}

.frdt-end.is-active {
  background: #fff;
  border-color: var(--frdt-primary);
  box-shadow: 0 0 0 4px var(--frdt-tint);
}

.frdt-end:disabled {
  cursor: default;
  opacity: 0.55;
}

.frdt-end-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frdt-muted);
}

.frdt-end-date {
  font-size: 16px;
  font-weight: 700;
  color: var(--frdt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.frdt-end:not(.is-set) .frdt-end-date {
  color: var(--frdt-muted);
  font-weight: 500;
}

.frdt-end-time {
  font-size: 13px;
  color: var(--frdt-primary-dark);
  font-weight: 600;
  min-height: 18px;
}

.frdt-ends-arrow {
  color: var(--frdt-primary);
  font-size: 20px;
}

.frdt-hint {
  margin: 16px 2px 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--frdt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frdt-card.has-error .frdt-hint {
  color: #dc2626;
}

/* ── calendar ────────────────────────────────────────────────────────────────── */

.frdt-calendar {
  position: relative;
  margin-top: 4px;
}

.frdt-cal-nav {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}

.frdt-cal-btn {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--frdt-line);
  background: #fff;
  color: var(--frdt-ink);
  cursor: pointer;
}

.frdt-cal-btn:hover:not(:disabled) {
  background: var(--frdt-soft);
}

.frdt-cal-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.frdt-months {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.frdt-month-title {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--frdt-ink);
  margin: 12px 0 12px;
  font-family: inherit;
}

.frdt-weekdays,
.frdt-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.frdt-weekdays span {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--frdt-muted);
  padding-bottom: 6px;
}

.frdt-day,
.frdt-day-blank {
  position: relative;
  height: 42px;
}

.frdt-day {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--frdt-ink);
  font-size: 14px;
  font-weight: 500;
}

.frdt-day > span {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.12s ease, color 0.12s ease;
}

.frdt-day:hover:not(:disabled):not(.is-start):not(.is-end) > span {
  background: var(--frdt-tint);
}

.frdt-day:disabled {
  cursor: default;
  color: hsl(220, 8%, 78%);
}

.frdt-day.is-today > span {
  box-shadow: inset 0 0 0 1.5px hsl(22, 15%, 78%);
}

/* the band between pickup and return */
.frdt-day.is-in-range::before,
.frdt-day.is-preview::before,
.frdt-day.band-r::before,
.frdt-day.band-l::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  right: 0;
  background: var(--frdt-tint);
}

.frdt-day.band-r::before {
  left: 50%;
}

.frdt-day.band-l::before {
  right: 50%;
}

.frdt-day.is-start > span,
.frdt-day.is-end > span {
  background: var(--frdt-primary);
  color: #fff;
  font-weight: 700;
}

.frdt-day.is-preview-end > span {
  box-shadow: inset 0 0 0 2px var(--frdt-primary);
}

/* ── times ───────────────────────────────────────────────────────────────────── */

.frdt-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--frdt-line);
}

.frdt-time {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.frdt-time-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--frdt-muted);
}

.frdt-select-wrap {
  position: relative;
  display: block;
}

.frdt-select-wrap .material-icons {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  color: var(--frdt-primary);
  pointer-events: none;
}

.frdt-select-wrap select {
  width: 100%;
  height: 50px;
  padding: 0 40px 0 44px;
  border: 1.5px solid var(--frdt-line);
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23887264' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  font-weight: 600;
  color: var(--frdt-ink);
  cursor: pointer;
}

.frdt-select-wrap select:focus {
  outline: none;
  border-color: var(--frdt-primary);
  box-shadow: 0 0 0 4px var(--frdt-tint);
}

.frdt-select-wrap select:disabled {
  background-color: var(--frdt-soft);
  color: var(--frdt-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: default;
}

/* ── quick picks & summary ───────────────────────────────────────────────────── */

.frdt-presets {
  margin-top: 16px;
}

.frdt-presets[hidden],
.frdt-summary[hidden] {
  display: none;
}

.frdt-presets-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--frdt-muted);
  margin-bottom: 8px;
}

.frdt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.frdt-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--frdt-line);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--frdt-ink);
  cursor: pointer;
  white-space: nowrap;
}

.frdt-chip:hover:not(:disabled) {
  border-color: var(--frdt-primary);
}

.frdt-chip.is-active {
  background: var(--frdt-primary);
  border-color: var(--frdt-primary);
  color: #fff;
}

.frdt-chip:disabled {
  opacity: 0.4;
  cursor: default;
}

.frdt-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--frdt-tint);
  color: var(--frdt-ink);
  font-size: 14px;
}

.frdt-summary .material-icons {
  color: var(--frdt-primary-dark);
  font-size: 20px;
}

.frdt-trust {
  display: none; /* the photo carries these on desktop */
}

/* ── tablet ──────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  #rentalStep1 .dateimecolumn {
    padding-right: 12px;
  }

  /* The tall photo pushed the picker off-screen; its trust badges move into the card. */
  #rentalStep1 .fr-hero-image-container {
    display: none;
  }

  .frdt-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--frdt-line);
    font-size: 12.5px;
    color: var(--frdt-muted);
  }

  .frdt-trust > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .frdt-trust iconify-icon,
  .frdt-trust .material-icons {
    font-size: 16px;
    color: var(--frdt-primary);
  }
}

/* ── phone ───────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* room for the fixed Back / Continue bar */
  #rentalStep1 {
    padding-bottom: 96px;
  }

  #rentalStep1 .fr-subtitle {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .frdt-card {
    padding: 14px;
    border-radius: 18px;
    margin: 0 -4px;
  }

  .frdt-ends {
    gap: 6px;
  }

  .frdt-end {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .frdt-end-date {
    font-size: 14.5px;
  }

  .frdt-ends-arrow {
    font-size: 16px;
  }

  .frdt-months {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .frdt-day,
  .frdt-day-blank {
    height: 46px; /* comfortable touch targets */
  }

  .frdt-day > span {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .frdt-times {
    gap: 10px;
  }

  /* one scrollable row instead of wrapping onto three lines */
  .frdt-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 2px 14px 4px;
    scrollbar-width: none;
  }

  .frdt-chips::-webkit-scrollbar {
    display: none;
  }
}