/* =====================================================================
 * Sticky Pricing Widget — Shared
 *
 * Bottom-anchored pricing bar that appears on BOTH the property
 * single page and the checkout page. Two visual states:
 *   - .vrp-sticky-pricing-widget--no-dates  : prompt + "Check availability"
 *   - .vrp-sticky-pricing-widget--has-dates : date range + price + CTA
 *
 * Tapping the bar opens the bottom sheet (#vrp-sticky-pricing-sheet)
 * which contains a fresh RangeDatePicker. Save / Clear / Close are
 * driven by JS in /js/sticky-pricing-widget.js.
 *
 * Both desktop and mobile use the same markup. The bar is small
 * enough to live below the sidebar on desktop without breaking the
 * layout (it has its own high z-index and is fixed to the viewport).
 * ===================================================================== */

/* ---------- The bar ---------- */
.vrp-sticky-pricing-widget {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
.vrp-sticky-pricing-widget[hidden] {
    display: block !important;
}
.vrp-sticky-pricing-widget.is-revealed {
    transform: translateY(0);
    pointer-events: auto;
}

/* The HTML `hidden` attribute must win over the `display: flex /
inline-flex` rules on the widget's children. The widget toggles
visibility via el.hidden = true/false everywhere (no class-based
hiding), so without this guard every "hidden" child would still
be painted. Scoped to the widget so the rule doesn't leak out
into the rest of the page. */
.vrp-sticky-pricing-widget [hidden],
.vrp-sticky-pricing-sheet [hidden] {
    display: none !important;
}

.vrp-sticky-pricing-widget__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 4px 0;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

/* Left-side "open sheet" trigger. Visually a transparent button
   so it doesn't look like a separate clickable element — the
   bar as a whole feels like a single unit, but only this half
   actually opens the sheet (the right pill is its own action). */
.vrp-sticky-pricing-widget__bar-trigger {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}
.vrp-sticky-pricing-widget__bar-trigger:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 4px;
    border-radius: 6px;
}

.vrp-sticky-pricing-widget__left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}
.vrp-sticky-pricing-widget__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- [hidden] must win over the display: flex/inline-flex on
       the bar's children below; otherwise both states render at
       once. The `[hidden]` selector has the same specificity as
       the class selectors, but the `!important` here is the
       standard "this is an attribute" guard and only targets
       the bar internals (the partial's own hide behavior). */
.vrp-sticky-pricing-widget__bar [hidden] {
    display: none !important;
}

.vrp-sticky-pricing-widget__no-dates {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.vrp-sticky-pricing-widget__calendar-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef2ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.vrp-sticky-pricing-widget__prompt {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vrp-sticky-pricing-widget__has-dates {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vrp-sticky-pricing-widget__date-line {
    margin: 0;
    color: #111827;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.vrp-sticky-pricing-widget__meta {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vrp-sticky-pricing-widget__price {
    color: #111827;
    font-weight: 600;
    font-size: 14px;
}
.vrp-sticky-pricing-widget__price::before {
    content: "\B7";
    margin: 0 6px;
    color: #d1d5db;
}
.vrp-sticky-pricing-widget__nights + .vrp-sticky-pricing-widget__price::before {
    content: "\B7";
}

.vrp-sticky-pricing-widget__cta {
    /* Reset native <button> chrome so the pill looks identical
       regardless of being a <span> or a <button>. */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    font-family: inherit;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF79C9 0%, #FF47B4 100%);;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.vrp-sticky-pricing-widget__cta:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 3px;
}
.vrp-sticky-pricing-widget__cta--no-dates {
    background: linear-gradient(135deg, #FF79C9 0%, #FF47B4 100%);;
}
.vrp-sticky-pricing-widget__cta--has-dates {
    background: linear-gradient(135deg, #FF79C9 0%, #FF47B4 100%);
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25);
}
.vrp-sticky-pricing-widget__bar-trigger:hover ~ .vrp-sticky-pricing-widget__right .vrp-sticky-pricing-widget__cta,
.vrp-sticky-pricing-widget__cta:hover {
    transform: translateY(-1px);
}

@media (min-width: 769px) {
    .vrp-sticky-pricing-widget {
        max-width: 480px;
        left: auto;
        right: 24px;
        bottom: 24px;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 12px 18px;
    }
    .vrp-sticky-pricing-widget__cta {
        height: 40px;
        padding: 0 18px;
    }
}

/* ---------- Bottom sheet ---------- */
.vrp-sticky-pricing-sheet {
    position: fixed;
    inset: 0;
    z-index: 9100;
    pointer-events: none;
    visibility: hidden;
}
.vrp-sticky-pricing-sheet.is-open {
    pointer-events: auto;
    visibility: visible;
}
.vrp-sticky-pricing-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.vrp-sticky-pricing-sheet.is-open .vrp-sticky-pricing-sheet__backdrop {
    opacity: 1;
}
.vrp-sticky-pricing-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 92vh;
    background: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vrp-sticky-pricing-sheet.is-open .vrp-sticky-pricing-sheet__panel {
    transform: translateY(0);
}

/* When the sticky widget's date picker is open, the panel
 * removes its transform so the popover (which is `position:
 * fixed` and uses `top: 0; left: 0; right: 0; bottom: 0` to
 * fill the viewport) is anchored to the viewport instead of
 * the panel. Without this, `position: fixed` becomes
 * relative-to-panel because a non-`none` transform on an
 * ancestor creates a new containing block. The panel's
 * natural `bottom: 0` keeps it visually pinned in place even
 * with `transform: none`, so there's no visual jump.
 *
 * Scoped to mobile (≤768px) because on desktop the panel is
 * a centered dialog (transform: translate(-50%, -50%)) and
 * removing that transform would snap the dialog to the
 * corner. The full-screen modal treatment is a mobile-only
 * design choice anyway. */
@media (max-width: 768px) {
    .vrp-sticky-pricing-sheet.is-picker-fullscreen .vrp-sticky-pricing-sheet__panel {
        transform: none;
    }
}
.vrp-sticky-pricing-sheet__handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: 8px auto 0;
}
.vrp-sticky-pricing-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.vrp-sticky-pricing-sheet__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}
.vrp-sticky-pricing-sheet__close {
    background: transparent;
    border: 0;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 20px;
    color: #374151;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.vrp-sticky-pricing-sheet__close:hover {
    background: #f3f4f6;
}
.vrp-sticky-pricing-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px 20px;
}
.vrp-sticky-pricing-sheet__hint {
    margin: 0 0 12px;
    color: #6b7280;
    font-size: 14px;
}
.vrp-sticky-pricing-sheet__picker {
    width: 100%;
}
.vrp-sticky-pricing-sheet__footer {
    display: flex;
    gap: 12px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f3f4f6;
    background: #ffffff;
}
.vrp-sticky-pricing-sheet__footer-apply,
.vrp-sticky-pricing-sheet__footer-booked {
    display: flex;
    gap: 12px;
    width: 100%;
}
.vrp-sticky-pricing-sheet__footer-booked {
    justify-content: stretch;
}
.vrp-sticky-pricing-sheet__clear,
.vrp-sticky-pricing-sheet__save,
.vrp-sticky-pricing-sheet__book {
    /* Reset native <button> chrome so all three CTAs in the
       sheet footer share the same visual baseline. */
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: 0;
}
.vrp-sticky-pricing-sheet__clear,
.vrp-sticky-pricing-sheet__save {
    flex: 1 1 0;
}
.vrp-sticky-pricing-sheet__clear {
    background: #f3f4f6;
    color: #111827;
    text-decoration: underline;
}
.vrp-sticky-pricing-sheet__clear:hover {
    background: #e5e7eb;
}
.vrp-sticky-pricing-sheet__save {
    background: linear-gradient(135deg, #FF79C9 0%, #FF47B4 100%);;
    color: #ffffff;
    flex-grow: 2;
}
.vrp-sticky-pricing-sheet__save:disabled,
.vrp-sticky-pricing-sheet__save[disabled] {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
}
.vrp-sticky-pricing-sheet__book {
    flex: 1 1 100%;
    background: linear-gradient(135deg, #FF79C9 0%, #FF47B4 100%);;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.vrp-sticky-pricing-sheet__book:hover,
.vrp-sticky-pricing-sheet__book:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.3);
    outline: 0;
}
.vrp-sticky-pricing-sheet__book:focus-visible {
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.35), 0 4px 10px rgba(225, 29, 72, 0.3);
}

/* ---------- Applied state card (shown after a successful Apply) ---------- */
.vrp-sticky-pricing-sheet__applied {
    margin-bottom: 8px;
}
.vrp-sticky-pricing-sheet__applied-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 12px;
}
.vrp-sticky-pricing-sheet__applied-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.15);
}
.vrp-sticky-pricing-sheet__applied-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vrp-sticky-pricing-sheet__applied-label {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vrp-sticky-pricing-sheet__applied-range {
    margin: 0;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vrp-sticky-pricing-sheet__applied-meta {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}
.vrp-sticky-pricing-sheet__change {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid #c7d2fe;
    background: #ffffff;
    color: #1d4ed8;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.vrp-sticky-pricing-sheet__change:hover {
    background: #1d4ed8;
    color: #ffffff;
}
.vrp-sticky-pricing-sheet__change:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

@media (min-width: 769px) {
    .vrp-sticky-pricing-sheet__panel {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(560px, 100%);
        max-height: 85vh;
        transform: translate(-50%, calc(-50% + 24px));
        border-radius: 16px;
    }
    .vrp-sticky-pricing-sheet.is-open .vrp-sticky-pricing-sheet__panel {
        transform: translate(-50%, -50%);
    }
    .vrp-sticky-pricing-sheet__handle {
        display: none;
    }
}

body.vrp-sticky-sheet-open {
    overflow: hidden;
}

/* =====================================================================
 * Booking extras inside the bottom sheet
 * ===================================================================== */
.vrp-sticky-pricing-sheet__extras {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vrp-sticky-pricing-sheet__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vrp-sticky-pricing-sheet__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vrp-sticky-pricing-sheet__label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vrp-sticky-pricing-sheet__select {
    appearance: none;
    -webkit-appearance: none;
    height: 44px;
    padding: 0 36px 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'><path d='M5.516 7.548 10 12.03l4.484-4.482 1.06 1.06L10 14.151l-5.544-5.543z'/></svg>") no-repeat right 10px center / 18px 18px;
    font-size: 15px;
    color: #111827;
    font-family: inherit;
}
.vrp-sticky-pricing-sheet__select:focus {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
    border-color: #1d4ed8;
}

.vrp-sticky-pricing-sheet__toggle {
    display: block;
    cursor: pointer;
    user-select: none;
}
.vrp-sticky-pricing-sheet__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.vrp-sticky-pricing-sheet__toggle-text {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
    line-height: 1.3;
}
.vrp-sticky-pricing-sheet__toggle-control {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.vrp-sticky-pricing-sheet__toggle-control input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.vrp-sticky-pricing-sheet__toggle-track {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 22px;
    background: #d1d5db;
    border-radius: 999px;
    transition: background 0.18s ease;
}
.vrp-sticky-pricing-sheet__toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease;
}
.vrp-sticky-pricing-sheet__toggle-control input[type="checkbox"]:checked ~ .vrp-sticky-pricing-sheet__toggle-track {
    background: linear-gradient(135deg, #FF79C9 0%, #FF47B4 100%);;
}
.vrp-sticky-pricing-sheet__toggle-control input[type="checkbox"]:checked ~ .vrp-sticky-pricing-sheet__toggle-track .vrp-sticky-pricing-sheet__toggle-knob {
    transform: translateX(18px);
}
.vrp-sticky-pricing-sheet__toggle-control input[type="checkbox"]:focus-visible ~ .vrp-sticky-pricing-sheet__toggle-track {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

.vrp-sticky-insurance-amount {
    color: #6b7280;
    font-weight: 400;
    margin-left: 4px;
}

/* =====================================================================
 * In-page booking form on mobile
 *
 * The in-page booking form (`.vrp-booking-form`) and the action
 * buttons (Reserve / Inquire) are intentionally KEPT visible on
 * mobile now. The sticky widget lives at the bottom of the
 * viewport as an additional, redundant booking surface, not as a
 * replacement for the in-page form. The two share state via the
 * hidden `input[name="check_in_date"]` / `input[name="check_out_date"]`
 * and the `vrp-sticky-widget:change` event, so either entry
 * point works and they always show the same pricing.
 * ===================================================================== */

/* =====================================================================
 * Price breakdown inside the bottom sheet
 *
 * Mirrors the in-page `.vrp-price-content` markup. The class names
 * (.vrp-rent-price, .vrp-discount-price, .vrp-fees-price,
 * .vrp-tax-price, .vrp-total-amount, .vrp-price-content,
 * .vrp-price-loader) match the in-page version so the existing
 * AJAX flow updates both at once. The wrapper
 * `.vrp-sticky-pricing-sheet__breakdown` only provides layout
 * overrides (compact spacing, single-column stack on small
 * screens, scrollable area when the breakdown is taller than
 * the sheet body).
 * ===================================================================== */
.vrp-sticky-pricing-sheet__breakdown {
    margin-top: 16px;
}

.vrp-sticky-pricing-sheet__breakdown-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}
.vrp-sticky-pricing-sheet__breakdown-divider::before,
.vrp-sticky-pricing-sheet__breakdown-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e5e7eb;
}

.vrp-sticky-pricing-sheet__loader {
    padding: 18px 0;
}
.vrp-sticky-pricing-sheet__loader .vrp-loader-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.vrp-sticky-pricing-sheet__loader .vrp-loader-dots {
    display: inline-flex;
    gap: 6px;
}
.vrp-sticky-pricing-sheet__loader .vrp-loader-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1d4ed8;
    display: inline-block;
    animation: vrp-sticky-loader-bounce 1.1s infinite ease-in-out;
}
.vrp-sticky-pricing-sheet__loader .vrp-loader-dots span:nth-child(2) {
    animation-delay: 0.15s;
}
.vrp-sticky-pricing-sheet__loader .vrp-loader-dots span:nth-child(3) {
    animation-delay: 0.3s;
}
.vrp-sticky-pricing-sheet__loader p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}
@keyframes vrp-sticky-loader-bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Inside the sticky sheet, the breakdown items stack vertically
 * (no big chevron affordance — the user can already see they
 * tapped the bar). Keep the visual hierarchy identical to the
 * in-page card so the user recognizes the layout. */
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-item,
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-taxes,
.vrp-sticky-pricing-sheet__price-content .vrp-total-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #1f2937;
    background: transparent;
    cursor: default;
}
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-item:last-of-type,
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-taxes {
    border-bottom: 1px solid #f3f4f6;
}
.vrp-sticky-pricing-sheet__price-content .vrp-total-section {
    border-bottom: 0;
    padding-top: 14px;
    font-weight: 600;
    font-size: 16px;
}
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-label {
    color: #4b5563;
    font-weight: 500;
}
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-price {
    color: #111827;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vrp-sticky-pricing-sheet__price-content .vrp-total-amount {
    color: #111827;
    font-weight: 700;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-button {
    display: none; /* no expandable rows in the compact sheet view */
}
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-details,
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-taxes-details {
    font-size: 12px;
    color: #6b7280;
    padding: 2px 0 8px;
}
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-details strong,
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-taxes-details strong {
    color: #4b5563;
    font-weight: 500;
}
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-taxes-details > div,
.vrp-sticky-pricing-sheet__price-content .vrp-breakdown-details > div {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

/* =====================================================================
 * Mobile layout
 *
 * The in-page booking form and price breakdown are kept visible
 * on mobile. The sticky widget is an additional booking surface,
 * not a replacement for the in-page form. Both surfaces share
 * state via the hidden in-page form inputs and the
 * `vrp-sticky-widget:change` event so the two stay in sync.
 * ===================================================================== */
@media (max-width: 768px) {
    .vrp-property-map {
        /* On mobile the in-page booking form sits directly below
         * the map, so make sure the map doesn't push the form
         * out of view. The form is the user's primary booking
         * surface and should always be reachable without
         * scrolling past a giant map. */
        margin-bottom: 16px;
    }
}

/* =====================================================================
 * Sticky widget — mobile date picker (bottom sheet)
 *
 * The RangeDatePicker popover that the sticky widget's bottom
 * sheet hosts (`#rdp-datepicker-sticky` → `.rdp-popover`) is
 * rendered as a bottom sheet on mobile so the calendar occupies
 * roughly half the screen height and the rest of the page is
 * still visible behind it. The month column is horizontally
 * centred inside the sheet for a cleaner mobile layout, and
 * the footer (with the Clear / Close buttons the library adds)
 * sits at the bottom of the sheet.
 *
 * The styles are scoped to `.vrp-sticky-pricing-sheet` so the
 * in-page booking form's picker (and the home / header filter
 * pickers) keep their existing layouts. We use `!important`
 * on positioning / width / max-height because the picker
 * library sets `style.width = ''` and `style.maxWidth = vw - 16`
 * inline at runtime.
 *
 * The popover uses `position: fixed` to anchor against the
 * viewport, which requires the bottom-sheet panel's transform
 * to be `none` while the picker is open (the
 * `is-picker-fullscreen` class on the sheet handles that —
 * see the rule above). With a non-`none` transform on the
 * panel, `position: fixed` would resolve to the panel, not
 * the viewport, and the popover would not appear at the
 * bottom of the screen.
 * ===================================================================== */
@media (max-width: 480px) {
    /* Anchor the popover to the bottom of the viewport and
     * make it ~50% of the screen height. The slide-up
     * animation is preserved via the existing `.is-open`
     * class toggled by the library. */
    .vrp-sticky-pricing-sheet .rdp-popover {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        /* Roughly 50% of the viewport height — the calendar
         * is a half-height bottom sheet. min-height keeps the
         * sheet usable on very short viewports, max-height
         * keeps it from spilling into the rest of the page
         * on tall phones. */
        height: 60vh;
        min-height: 320px;
        max-height: 60vh !important;
        /* Rounded top corners so it reads as a bottom sheet
         * (the user is already used to the sticky widget's
         * main bottom sheet which has the same shape). */
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        display: flex;
        flex-direction: column;
        padding: 12px 12px max(12px, env(safe-area-inset-bottom));
        background: #ffffff;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
        /* Sit above the sticky sheet's backdrop (z-index 9100
         * on the sheet) so tapping inside the popover doesn't
         * bleed through to the backdrop. */
        z-index: 9200;
        /* Slide-up animation. The library doesn't ship a
         * transition on the popover by default, so add one
         * here for a smoother open/close. */
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
        will-change: transform;
    }
    .vrp-sticky-pricing-sheet .rdp-popover.is-open { transform: translateY(0); }
    /* Centre the month column horizontally inside the
     * half-height sheet. The months container gets an
     * explicit 100% width so `align-items: center` actually
     * has something to centre against (without it the
     * container collapses to the child's intrinsic width
     * and the months end up at the left edge). `gap: 16px`
     * adds breathing room between the two stacked months.
     * `overflow-y: auto` lets the user scroll if the two
     * months don't fit in the 50vh sheet on short phones. */
    .vrp-sticky-pricing-sheet .rdp-months {
        flex: 1 1 auto;
        overflow-y: auto;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 8px 0 12px;
        width: 100%;
        margin: 0 auto;
    }
    .vrp-sticky-pricing-sheet .rdp-month {
        width: 100%;
        max-width: 360px;
    }
    .vrp-sticky-pricing-sheet .rdp-month-header { padding: 4px 0 8px; }
    .vrp-sticky-pricing-sheet .rdp-month-title { font-size: 16px; }
    .vrp-sticky-pricing-sheet .rdp-day { font-size: 14px; }
    .vrp-sticky-pricing-sheet .rdp-weekday { font-size: 11px; }
    .vrp-sticky-pricing-sheet .rdp-footer {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        /* Keep the footer pinned at the bottom of the
         * bottom sheet regardless of the month grid's
         * height. */
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid #f3f4f6;
        margin: 0 auto;
    }
    .vrp-sticky-pricing-sheet .rdp-footer-left { flex: 1 1 auto; }
    .vrp-sticky-pricing-sheet .rdp-btn { padding: 8px 12px; font-size: 13px; }
}