/* Safe areas for every page shell (guest site, host panel, error pages).
   Loaded last, after page styles. The insets are 0 on screens without a notch
   or home indicator, so on those screens nothing here changes. Bottom sheets
   and bars that already pad for the home indicator in their own files are
   left alone. */

/* Notch, Dynamic Island, rounded corners and the home indicator. */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

body {min-height: 100vh; min-height: 100dvh}

/* ---------- Guest site ---------- */

/* Header surface runs under the status bar; its content stays below it. */
.guest-body .guest-header {padding-top: var(--safe-top)}
/* Content clears the notch and rounded corners in landscape. */
.guest-body .guest-container {padding-left: var(--safe-left); padding-right: var(--safe-right)}
.guest-body .skip-link {top: calc(12px + var(--safe-top))}
.guest-body .skip-link:not(:focus) {transform: translateY(calc(-100% - 24px - var(--safe-top)))}
.guest-body #Toast {top: calc(22px + var(--safe-top))}
/* Without the tab bar, the footer itself clears the home indicator. */
.guest-body .guest-footer {padding-bottom: calc(28px + var(--safe-bottom))}
@media (max-width: 767px) {
    .guest-body .guest-footer {padding-bottom: calc(20px + var(--safe-bottom))}
}

/* Phone tab bar and floating bars keep their side padding off the corners. */
.guest-tabbar {padding-left: max(6px, var(--safe-left)) !important; padding-right: max(6px, var(--safe-right)) !important}
.mobile-guest-nav {left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right))}
.guest-body .mobile-booking-bar {padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right))}
.reservation-form-page footer#navbar {padding-left: max(16px, var(--safe-left)) !important; padding-right: max(16px, var(--safe-right)) !important}

/* Full-screen menus and sheets start below the status bar. */
@media (max-width: 820px) {
    .guest-body .guest-nav {top: calc(66px + var(--safe-top)); padding-bottom: calc(32px + var(--safe-bottom))}
}
@media (max-width: 767px) {
    .home-sticky-search {padding-top: calc(10px + var(--safe-top)); padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right))}
    .home-search.is-open {padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right))}
    .home-search.is-open .home-search__sheet-head {min-height: calc(64px + var(--safe-top)); padding-top: var(--safe-top)}
}
.gallery-modal__bar {padding-left: max(14px, var(--safe-left)); padding-right: max(14px, var(--safe-right))}
:is(.search-edit-modal, .listing-date-modal, .filter-modal):not([hidden]) {padding-top: max(24px, var(--safe-top))}
@media (max-width: 650px) {
    :is(.search-edit-modal, .listing-date-modal, .filter-modal):not([hidden]) {padding-top: var(--safe-top)}
}

/* Reservation detail: full-screen cancel and report forms, and the action sheet. */
.reservation-status-page :is(#setWhyCancel, #ReportBox).show {padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
.reservation-status-page #bkgPopUpInput .inputPop {padding-bottom: max(24px, calc(12px + var(--safe-bottom)))}

/* ---------- Host panel ---------- */

.host-topbar {padding-top: var(--safe-top)}
.host-sidebar {padding-top: calc(28px + var(--safe-top)); padding-bottom: calc(24px + var(--safe-bottom))}
@media (max-width: 820px) {
    .host-topbar {padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right))}
    .host-main {padding-left: max(14px, var(--safe-left)); padding-right: max(14px, var(--safe-right)); padding-bottom: calc(36px + var(--safe-bottom))}
}

/* ---------- Error pages and legacy product pages ---------- */

.product-app #app > header {padding-top: var(--safe-top)}
.product-app .skip-link {top: calc(12px + var(--safe-top))}
.product-app .skip-link:not(:focus) {transform: translateY(calc(-100% - 24px - var(--safe-top)))}