/* Global responsive utilities — TripInStays sv-theme */
.sv-theme {
    --sv-navbar-height: 64px;
    --sv-sticky-offset: var(--sv-navbar-height);
    --sv-bottom-bar-height: 0px;
    --sv-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 575px) {
    .sv-theme {
        --sv-navbar-height: 56px;
    }
}

/* Fixed bottom bars: compare, property CTA, safe area */
body.sv-theme:has(#compareBar) {
    --sv-bottom-bar-height: 64px;
}

body.sv-theme:has(.pd-mobile-cta) {
    --sv-bottom-bar-height: max(var(--sv-bottom-bar-height), 72px);
}

body.sv-theme:has(#compareBar):has(.pd-mobile-cta) {
    --sv-bottom-bar-height: calc(64px + 72px);
}

body.sv-theme:has(#compareBar),
body.sv-theme:has(.pd-mobile-cta) {
    padding-bottom: calc(var(--sv-bottom-bar-height) + var(--sv-safe-bottom));
}

body.sv-theme:has(#compareBar) .sv-callback-fab,
body.sv-theme:has(.pd-mobile-cta) .sv-callback-fab {
    bottom: calc(var(--sv-bottom-bar-height) + 1rem + var(--sv-safe-bottom));
}

body.sv-theme:has(#compareBar) .pd-mobile-cta {
    bottom: calc(64px + var(--sv-safe-bottom));
}

/* Navbar — mobile slide-out drawer (offcanvas) */
@media (max-width: 991.98px) {
    .sv-nav-offcanvas {
        width: min(320px, 88vw);
        border-left: 1px solid var(--sv-border, #e8e4df);
        z-index: 1065;
    }

    .sv-nav-offcanvas-head {
        padding: 1rem 1.15rem;
        border-bottom: 1px solid var(--sv-border, #e8e4df);
    }

    .sv-nav-offcanvas-head .offcanvas-title {
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: 1.35rem;
        font-weight: 600;
        color: var(--sv-dark, #141414);
    }

    .sv-nav-offcanvas-body {
        padding: 0.75rem 1rem 1.5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sv-nav-offcanvas .navbar-nav {
        width: 100%;
    }

    .sv-nav-offcanvas .nav-link {
        padding: 0.75rem 0.35rem;
        font-size: 1rem;
        font-weight: 500;
        color: var(--sv-dark, #141414);
        border-bottom: 1px solid #f0ece7;
    }

    .sv-nav-offcanvas .nav-mega .nav-mega-menu {
        position: static;
        float: none;
        width: 100%;
        margin: 0.35rem 0 0.75rem;
        border: 1px solid var(--sv-border, #e8e4df);
        border-radius: 8px;
        box-shadow: none;
        max-height: min(50vh, 360px);
        overflow-y: auto;
    }

    .sv-nav-offcanvas .nav-mega-panel {
        flex-direction: column;
        min-height: 0;
    }

    .sv-nav-offcanvas .nav-mega-popular {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--sv-border, #e8e4df);
    }

    .sv-nav-offcanvas .nav-mega-grid {
        grid-template-columns: 1fr;
        padding: 0.75rem 1rem 1rem;
        max-height: none;
    }

    .sv-nav-offcanvas .dropdown-menu:not(.nav-mega-menu) {
        position: static !important;
        float: none;
        width: 100%;
        margin: 0 0 0.5rem;
        border: 1px solid var(--sv-border, #e8e4df);
        border-radius: 8px;
        box-shadow: none;
        transform: none !important;
    }

    .sv-nav-offcanvas .sv-nav-secondary {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--sv-border, #e8e4df);
    }

    .sv-nav-offcanvas .sv-nav-login-item {
        padding: 0.5rem 0;
    }

    .offcanvas-backdrop {
        z-index: 1060;
    }
}

@media (max-width: 575px) {
    .sv-theme .sv-navbar .navbar-brand {
        font-size: 1.35rem;
        max-width: calc(100vw - 4.5rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sv-theme .sv-navbar .container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

/* Containers */
@media (max-width: 575px) {
    .sv-theme .sv-page-wrap {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .sv-theme .container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

/* Modals */
@media (max-width: 575px) {
    .sv-theme .cu-modal .modal-dialog,
    .sv-theme .sv-login-modal .modal-dialog,
    .sv-theme .sv-callback-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .sv-theme .cu-otp-input {
        font-size: 1.35rem;
        letter-spacing: 0.22em;
        padding: 0.85rem 0.5rem;
    }
}

/* Home search guest picker */
@media (max-width: 575px) {
    .sv-guest-dropdown {
        width: calc(100vw - 2rem) !important;
        max-width: 420px;
        left: 0 !important;
        right: auto !important;
    }

    .sv-guest-footer {
        flex-direction: column;
    }

    .sv-guest-clear,
    .sv-guest-apply-search {
        width: 100%;
    }
}

/* Overflow guard */
.sv-theme img,
.sv-theme video {
    max-width: 100%;
    height: auto;
}

@media (max-width: 575px) {
    /* Bootstrap row gutters vs tighter container padding */
    .sv-theme main .container > .row,
    .sv-theme main .sv-page-wrap > .row,
    .sv-theme .pd-related .row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .sv-theme {
        overflow-x: clip;
    }
}

.sv-theme .table-responsive,
.sv-theme .ip-prose-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Property detail — edge-to-edge tab scroll */
@media (max-width: 575px) {
    .sv-theme .pd-tabs-wrap > .container {
        padding-left: 0;
        padding-right: 0;
    }

    .sv-theme .pd-tabs {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

/* Long headings / URLs */
@media (max-width: 575px) {
    .sv-theme .pd-header h1,
    .sv-theme .ip-hero h1 {
        overflow-wrap: anywhere;
    }
}