/* Reservation, scoped so the host availability calendar keeps its own layout. */
.reserve-page { max-width: 1080px; padding-block: 16px 56px; }
.reserve-heading { margin-bottom: 26px; }
.reserve-heading .back-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 10px; }
.reserve-heading h1 { font-size: clamp(1.65rem, 4vw, 2.65rem); }
.reserve-heading > p { font-size: .95rem; margin-top: 7px; }
.reserve-layout { display: grid; gap: 24px; }
.reserve-dates, .reserve-review { min-width: 0; }
.reserve-dates h2, .reserve-summary h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.reserve-dates h2 { margin-bottom: 13px; }
.reserve-date-tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.reserve-date-tabs[hidden], .reserve-mobile-total { display: none; }
.reserve-date-tabs button {
    min-height: 60px; display: grid; align-content: center; justify-items: start; gap: 4px;
    padding: 8px 12px; color: var(--ink); background: #fff; border: 1px solid var(--line);
    border-radius: 12px; text-align: start;
}
.reserve-date-tabs button[aria-pressed="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.reserve-date-tabs button:disabled { background: var(--cream); }
.reserve-date-tabs button span { font-size: .73rem; font-weight: 700; }
.reserve-date-tabs button strong { font-size: .83rem; font-weight: 550; color: var(--muted); }
.reserve-pick-hint { color: var(--muted); margin-block: 8px 12px; font-size: .83rem; }
.reserve-page .calendar-header { gap: 6px; margin: 0; }
.reserve-page .calendar-header .icon-button { width: 44px; height: 44px; }
.reserve-page .calendar-header .icon-button:disabled { opacity: .4; }
.reserve-page .calendar-header h3 { font-size: 1rem; text-align: center; }
.reserve-page .calendar-weekdays span { font-size: .74rem; font-weight: 650; }
.reserve-page .calendar-day { font-size: .9rem; font-weight: 650; min-height: 44px; gap: 3px; border-radius: 10px; }
.reserve-page .calendar-day.selected { background: var(--orange) !important; }
.reserve-page .calendar-day.in-range { background: #f8e9df; }
.reserve-page .calendar-day:focus-visible { outline-offset: -2px; }
.reserve-page .calendar-day .dot { width: 5px; height: 5px; }
.reserve-page .calendar-day:disabled:not(.past) { opacity: 1; }
.reserve-page .calendar-status:not(:empty) { margin-top: 8px; }
.reserve-page .calendar-status:empty { min-height: 0; }
.reserve-page .calendar-legend { justify-content: flex-start; flex-wrap: wrap; gap: 8px 16px; font-size: .75rem; margin: 11px 0 3px; }
.reserve-page [data-clear]:disabled { color: var(--muted); }
.reserve-page .calendar-retry { grid-column: 1 / -1; }
.reserve-page .calendar-enhanced .reserve-date-fields,
.reserve-page .calendar-widget:not(.calendar-enhanced) :is(.calendar-header, .calendar-weekdays, .calendar-grid, .calendar-legend) { display: none; }
.reserve-review {
    align-self: start; border: 1px solid var(--line); border-radius: 20px; background: #fff;
    padding: clamp(14px, 3vw, 24px); box-shadow: var(--shadow);
}
.reserve-property { display: flex; align-items: center; gap: 13px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.reserve-property img { width: clamp(66px, 16vw, 88px); height: clamp(66px, 16vw, 88px); border-radius: 12px; flex: 0 0 auto; }
.reserve-property > div { min-width: 0; overflow-wrap: anywhere; }
.reserve-property h2 { font-size: 1.02rem; margin: 3px 0; }
.reserve-property p { font-size: .8rem; line-height: 1.45; }
.reserve-summary { display: grid; gap: 13px; padding-top: 16px; }
.reserve-summary input { max-width: 100%; min-height: 46px; }
.reserve-price { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.reserve-price p { display: flex; align-items: baseline; justify-content: space-between; gap: 5px 14px; flex-wrap: wrap; font-size: .86rem; }
.reserve-price .reserve-total { font-size: .95rem; color: var(--ink); }
.reserve-price [data-total] { white-space: nowrap; }
.reserve-payment-note { display: flex; justify-content: center; align-items: center; gap: 7px; color: var(--muted); font-size: .8rem; }
.reserve-payment-note .icon { width: 16px; height: 16px; }
.reserve-dates, .reserve-summary { scroll-margin-top: 12px; }

/* My trips: highlight the status and give cancellation its own touch target. */
.trips-page { max-width: 940px; padding-block: 28px 56px; }
.trips-heading h1 { font-size: clamp(1.8rem, 4vw, 2.65rem); }
.trips-heading > p { margin-top: 6px; font-size: .93rem; }
.trips-nav { display: flex; gap: 16px; border-bottom: 1px solid var(--line); margin-top: 13px; }
.trips-nav a {
    display: inline-flex; align-items: center; gap: 7px; min-height: 48px;
    padding-inline: 5px; border-bottom: 2px solid transparent; font-size: .88rem; font-weight: 650; color: var(--muted);
}
.trips-nav a[aria-current] { border-color: var(--orange); color: var(--orange); }
.trips-nav .icon { width: 17px; height: 17px; }
.trips-list { display: grid; gap: 16px; margin-top: 20px; }
.trip-card { min-width: 0; padding: clamp(14px, 3vw, 24px); border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.trip-overview { display: flex; align-items: center; gap: 14px; }
.trip-overview img { width: clamp(72px, 18vw, 98px); aspect-ratio: 1; height: auto; border-radius: 12px; flex-shrink: 0; }
.trip-identity { min-width: 0; overflow-wrap: anywhere; }
.trip-identity h2 { font-size: clamp(1.05rem, 3vw, 1.3rem); margin-top: 6px; }
.trip-identity > p { margin-top: 3px; font-size: .83rem; line-height: 1.35; }
.trip-status {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
    border-radius: 99px; font-size: .75rem; font-weight: 750; line-height: 1.35;
}
.trip-status .icon { width: 15px; height: 15px; }
.trip-status--confirmed { color: #165c38; background: #e8f4ea; }
.trip-status--pending { color: #754418; background: #fbefdc; }
.trip-status--closed { color: #505552; background: #edf0ee; }
.trip-details {
    display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px;
    border-block: 1px solid var(--line); padding-block: 12px; margin: 14px 0 12px;
}
.trip-details > div { min-width: 0; }
.trip-details dt { color: var(--muted); font-size: .78rem; }
.trip-details dd { color: var(--ink); font-size: .9rem; font-weight: 600; margin: 4px 0 0; }
.trip-total dd span { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); margin-top: 3px; }
.trip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.trip-actions .booking-actions { display: contents; }
.booking-actions[hidden] { display: none; }
.trip-actions .booking-recap { background: white; color: var(--ink); border-color: var(--line); }
.trip-actions .booking-recap:hover { background: var(--cream); }
.button.booking-destructive { color: #9c302c; border-color: #e1b8b5; }
.button.booking-destructive:hover { background: #fdf0ee; }
.button.booking-destructive:disabled { opacity: .55; }
.confirm-dialog--danger .actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.confirm-dialog--danger .button[value="ok"] { background: #a52f2b; }
.confirm-dialog--danger .button[value="ok"]:hover { background: #852722; }

@media (max-width: 559px) {
    .trips-page { width: calc(100% - 32px); padding-block: 22px 42px; }
    .trips-heading > p { font-size: .87rem; }
    .trips-list { gap: 13px; margin-top: 15px; }
    .trip-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trip-total { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid var(--line); }
    .trip-total dd { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 3px 10px; }
    .trip-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .trip-actions .button { width: 100%; min-height: 45px; }
    .confirm-dialog.confirm-dialog--danger { padding: 19px; }
    .confirm-dialog--danger .actions { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 850px) {
    .reserve-page { padding-block: 26px 68px; }
    .reserve-layout { grid-template-columns: minmax(0, 1fr) minmax(315px, .72fr); gap: clamp(30px, 5vw, 72px); }
    .reserve-dates { border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
    .reserve-review { position: sticky; top: 22px; }
    .reserve-page .calendar-day { min-height: 48px; }
}

@media (max-width: 849px) {
    .reserve-page { width: calc(100% - 32px); padding-block: 8px 42px; }
    .reserve-heading { margin-bottom: 18px; }
    .reserve-heading .back-link { margin-bottom: 4px; }
    .reserve-heading > p { font-size: .86rem; }
    .reserve-layout { gap: 16px; }
    .reserve-review { box-shadow: none; border-radius: 16px; }
    .reserve-mobile-total:not([hidden]) {
        display: flex; align-items: center; justify-content: space-between; gap: 9px;
        position: fixed; inset: auto 0 0; z-index: 10; background: #fff;
        padding: 8px max(14px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
        border-top: 1px solid var(--line); box-shadow: 0 -5px 24px #14282012;
    }
    .reserve-mobile-total strong { display: block; color: var(--ink); font-size: 1.02rem; white-space: nowrap; }
    .reserve-mobile-total span { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
    .reserve-mobile-total .button { flex-shrink: 0; }
    body:has(.reserve-mobile-total:not([hidden])) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    body:has(.reserve-mobile-total:not([hidden])) :is(a, button, input):focus { scroll-margin-bottom: calc(76px + env(safe-area-inset-bottom)); }
}