/**
 * RVBT System Frontend Styles
 *
 * @package RVBTSystem\Frontend
 * @since 1.0.0
 */

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    --rvbtbooking-primary: var(--e-global-color-accent, #C68C53);
    --rvbtbooking-primary-hover: var(--e-global-color-bd32194, #86592D);
    --rvbtbooking-secondary: #64748b;
    --rvbtbooking-success: #10b981;
    --rvbtbooking-error: #ef4444;
    --rvbtbooking-warning: #f59e0b;
    --rvbtbooking-text: #1e293b;
    --rvbtbooking-text-light: #64748b;
    --rvbtbooking-border: #e2e8f0;
    --rvbtbooking-bg: #ffffff;
    --rvbtbooking-bg-light: #f8fafc;
    --rvbtbooking-radius: 8px;
    --rvbtbooking-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --rvbtbooking-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Design reference colors */
    --rvbtbooking-search-accent: #8b7355;
    --rvbtbooking-search-accent-hover: #7a644a;
    --rvbtbooking-search-border: #d6d6d6;
    --rvbtbooking-search-border-active: #146d74;
}

/* ==========================================================================
   Base Components
   ========================================================================== */
.rvbtbooking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    border-radius: var(--rvbtbooking-radius);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.rvbtbooking-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rvbtbooking-btn-primary {
    background: var(--rvbtbooking-primary);
    color: #ffffff;
}

.rvbtbooking-btn-primary:hover:not(:disabled) {
    background: var(--rvbtbooking-primary-hover);
}

.rvbtbooking-btn-secondary {
    background: transparent;
    color: var(--rvbtbooking-secondary);
    border: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-btn-secondary:hover:not(:disabled) {
    background: var(--rvbtbooking-bg-light);
}

.rvbtbooking-btn-success {
    background: var(--rvbtbooking-success);
    color: #ffffff;
}

.rvbtbooking-btn-block {
    display: flex;
    width: 100%;
}

.rvbtbooking-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rvbt-spin 0.75s linear infinite;
}

@keyframes rvbt-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Form Elements
   ========================================================================== */
.rvbtbooking-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rvbtbooking-form-group {
    flex: 1;
    min-width: 150px;
}

.rvbtbooking-form-group-small {
    flex: 0 0 100px;
    min-width: 80px;
}

.rvbtbooking-form-group label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-form-group label .required {
    color: var(--rvbtbooking-error);
}

.rvbtbooking-form-group input,
.rvbtbooking-form-group select,
.rvbtbooking-form-group textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--rvbtbooking-text);
    background: var(--rvbtbooking-bg);
    border: 1px solid var(--rvbtbooking-border);
    border-radius: var(--rvbtbooking-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rvbtbooking-form-group input:focus,
.rvbtbooking-form-group select:focus,
.rvbtbooking-form-group textarea:focus {
    outline: none;
    border-color: var(--rvbtbooking-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.rvbtbooking-hosted-field {
    padding: 0.75rem 0.875rem;
    background: var(--rvbtbooking-bg);
    border: 1px solid var(--rvbtbooking-border);
    border-radius: var(--rvbtbooking-radius);
    min-height: 42px;
}

/* ==========================================================================
   Search Form
   ========================================================================== */
.rvbtbooking-booking-search {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.rvbtbooking-search-form {
    background: var(--rvbtbooking-bg);
    padding: 1.5rem;
    border-radius: var(--rvbtbooking-radius);
    box-shadow: var(--rvbtbooking-shadow);
    margin-bottom: 2rem;
}

.rvbtbooking-search-form .rvbtbooking-form-row {
    margin-bottom: 0;
}

.rvbtbooking-form-submit {
    display: flex;
    align-items: flex-end;
}

/* ==========================================================================
   Loading & Error States
   ========================================================================== */
.rvbtbooking-loading {
    text-align: center;
    padding: 3rem;
}

.rvbtbooking-loading-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 3px solid var(--rvbtbooking-border);
    border-top-color: var(--rvbtbooking-primary);
    border-radius: 50%;
    animation: rvbt-spin 0.8s linear infinite;
}

.rvbtbooking-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--rvbtbooking-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.rvbtbooking-error-message {
    color: var(--rvbtbooking-error);
    margin: 0;
    font-size: 0.875rem;
}

.rvbtbooking-notice {
    padding: 1rem 1.5rem;
    border-radius: var(--rvbtbooking-radius);
    margin-bottom: 1rem;
}

.rvbtbooking-notice-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

/* ==========================================================================
   Results
   ========================================================================== */
.rvbtbooking-results {
    margin-top: 2rem;
}

.rvbtbooking-results-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-results-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-results-count {
    font-weight: 400;
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-results-summary {
    font-size: 0.875rem;
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-results-summary span {
    margin-left: 0.5rem;
}

/* ==========================================================================
   Room Cards
   ========================================================================== */
/* Rooms Grid - Now vertical list for horizontal cards */
.rvbtbooking-rooms-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ==========================================================================
   Category Divider - Visual separator between room categories
   ========================================================================== */
.rvbtbooking-category-divider {
    width: 100%;
    padding: 20px 15px;
    margin: 15px 0;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-sizing: border-box;
    text-align: center;
}
.rvbtbooking-category-divider p {
    margin: 0;
}
.rvbtbooking-category-divider h1,
.rvbtbooking-category-divider h2,
.rvbtbooking-category-divider h3,
.rvbtbooking-category-divider h4 {
    margin-top: 0;
}

/* ==========================================================================
   Room Card - Horizontal Layout
   ========================================================================== */
.rvbtbooking-room-card {
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.rvbtbooking-room-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Pre-selected room from map "Book Now" link */
.rvbtbooking-room-card.rvbtbooking-room-preselected {
    border: 2px solid #2282bd;
    box-shadow: 0 0 0 3px rgba(34, 130, 189, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: rvbtbooking-preselect-pulse 2s ease-in-out;
}

@keyframes rvbtbooking-preselect-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(34, 130, 189, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(34, 130, 189, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
    }
}

/* Image Section (Left ~30%) */
.rvbtbooking-card-image {
    width: 30%;
    min-width: 220px;
    max-width: 320px;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.rvbtbooking-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 180px;
}

/* Gradient overlay on image - top portion only, half image shows clear */
.rvbtbooking-card-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%);
    pointer-events: none;
}

/* Name/Category Overlay - transparent with text shadow */
.rvbtbooking-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px 16px;
    z-index: 2;
    background: transparent;
}

.rvbtbooking-card-name {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: block;
    line-height: 1.3;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.rvbtbooking-card-category {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    display: block;
    margin-top: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Gallery Plus Button */
.rvbtbooking-card-gallery-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e88c7d;
    border: none;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #fff;
    font-size: 14px;
}

.rvbtbooking-card-gallery-btn:hover {
    background: #d47868;
}

/* Map Pin Button - left of gallery button */
.rvbtbooking-card-map-btn {
    position: absolute;
    top: 10px;
    right: 46px;
    background: #2c5f5d;
    border: none;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    color: #fff;
    font-size: 14px;
    z-index: 2;
}

.rvbtbooking-card-map-btn:hover {
    background: #1f4a48;
    transform: scale(1.1);
}

/* Content Section (Middle ~45%) */
.rvbtbooking-card-content {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

/* Description with expand button */
.rvbtbooking-card-description {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.rvbtbooking-card-desc-text {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rvbtbooking-card-expand-btn {
    background: #fff;
    border: 2px solid #333;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #333;
    font-size: 12px;
    transition: all 0.2s ease;
}

.rvbtbooking-card-expand-btn:hover {
    background: #f5f5f5;
    color: #000;
}

/* Amenity Icons Row */
.rvbtbooking-card-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.rvbtbooking-card-amenities i {
    font-size: 16px;
    color: #666;
}

.rvbtbooking-card-amenity {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 16px;
}

/* Guest Selectors Row */
.rvbtbooking-card-guests {
    display: flex;
    align-items: end;
    gap: 16px;
    flex-wrap: wrap;
}

.rvbtbooking-card-guest-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rvbtbooking-card-guest-select label {
    font-size: 12px;
    color: #777;
    font-weight: 500;
}

.rvbtbooking-card-guest-select select {
    padding: 6px 28px 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 8px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    min-width: 60px;
}

.rvbtbooking-card-guest-select select:focus {
    outline: none;
    border-color: #2c5f5d;
}

/* Site Length Info */
.rvbtbooking-card-site-length,
.filter-site-length-info {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    line-height: 2.7;
    border: 1px solid #8b7355;
    border-radius: 4px;
    font-size: 12px;
    color: #8b7355;
    background: rgba(139, 115, 85, 0.05);
    white-space: nowrap;
}

.rvbtbooking-card-site-length:empty {
    display: none;
}

/* Price Section (Right ~25%) */
.rvbtbooking-card-price {
    width: 190px;
    min-width: 190px;
    padding: 16px;
    text-align: center;
    border-left: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fafafa;
}

/* Occupancy Icons */
.rvbtbooking-card-occupancy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}

.rvbtbooking-card-occupancy-row {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.rvbtbooking-card-occupancy i {
    font-size: 14px;
}

.rvbtbooking-card-occupancy i.occupied {
    color: #6ba3a0;
}

.rvbtbooking-card-occupancy i.vacant {
    color: #d4c9a8;
}

/* Price Display */
.rvbtbooking-card-price-display {
    margin-bottom: 4px;
}

.rvbtbooking-card-price-value {
    font-size: 18px;
    font-weight: 700;
    color: #c87941;
    transition: opacity 0.2s ease;
}

.rvbtbooking-card-price-value.loading {
    opacity: 0.5;
}

.rvbtbooking-card-price-value .loading-spinner {
    margin-left: 6px;
}

.rvbtbooking-card-price-value .price-original {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
    font-size: 14px;
    margin-right: 6px;
}

.rvbtbooking-card-price-value .price-current {
    color: #c87941;
}

/* Rate Type Label */
.rvbtbooking-card-rate-type {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}

/* Select Button */
.rvbtbooking-card-price .rvbtbooking-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    max-width: 120px;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
    .rvbtbooking-card-image {
        width: 35%;
        min-width: 180px;
    }

    .rvbtbooking-card-price {
        width: 160px;
        min-width: 140px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .rvbtbooking-room-card {
        flex-direction: column;
    }

    .rvbtbooking-card-image {
        width: 100%;
        max-width: none;
        min-width: auto;
        height: 200px;
    }

    .rvbtbooking-card-image img {
        min-height: 200px;
    }

    .rvbtbooking-card-content {
        padding: 16px;
    }

    .rvbtbooking-card-price {
        width: 100%;
        border-left: none;
        border-top: 1px solid #e0e0e0;
        flex-direction: column;
        align-items: center;
        padding: 14px 16px;
    }

    .rvbtbooking-card-occupancy {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 0;
    }

    .rvbtbooking-card-price-display {
        margin-bottom: 0;
    }
}

/* No Results */
.rvbtbooking-no-results {
    text-align: center;
    padding: 3rem;
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-no-results-icon {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.rvbtbooking-no-results h4 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-no-results p {
    margin: 0;
}

.rvbtbooking-no-results a {
    color: var(--rvbtbooking-primary);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

.rvbtbooking-no-results a:hover {
    color: var(--rvbtbooking-primary-hover);
}

.rvbtbooking-no-results p strong {
    color: var(--rvbtbooking-text);
    font-weight: 600;
}

/* ==========================================================================
   Cart Sidebar
   ========================================================================== */
.rvbtbooking-cart {
    background: var(--rvbtbooking-bg);
    border-radius: var(--rvbtbooking-radius);
    box-shadow: var(--rvbtbooking-shadow);
    overflow: hidden;
}

.rvbtbooking-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--rvbtbooking-bg-light);
    border-bottom: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-cart-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-cart-count {
    font-weight: 400;
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-cart-toggle {
    display: none;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-cart-body {
    padding: 1rem;
}

.rvbtbooking-cart-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-cart-empty-icon {
    opacity: 0.3;
    margin-bottom: 1rem;
}

.rvbtbooking-cart-empty p {
    margin: 0 0 0.5rem;
}

.rvbtbooking-cart-empty-hint {
    font-size: 0.875rem;
}

/* Cart Items */
.rvbtbooking-cart-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rvbtbooking-cart-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    background: var(--rvbtbooking-bg-light);
    border-radius: calc(var(--rvbtbooking-radius) / 2);
}

.rvbtbooking-cart-item-name {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-cart-item-category {
    font-size: 0.75rem;
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-cart-item-meta {
    font-size: 0.75rem;
    color: var(--rvbtbooking-text-light);
    margin-top: 0.25rem;
}

.rvbtbooking-cart-item-meta span {
    margin-right: 0.5rem;
}

.rvbtbooking-cart-item-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.rvbtbooking-cart-item-total {
    font-weight: 600;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-cart-item-remove {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--rvbtbooking-text-light);
    opacity: 0.5;
    transition: opacity 0.15s;
}

.rvbtbooking-cart-item-remove:hover {
    opacity: 1;
    color: var(--rvbtbooking-error);
}

/* Cart Footer */
.rvbtbooking-cart-footer {
    padding: 1rem;
    border-top: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-cart-dates {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-cart-dates-label {
    color: var(--rvbtbooking-text-light);
    margin-right: 0.5rem;
}

.rvbtbooking-cart-summary {
    margin-bottom: 1rem;
}

.rvbtbooking-cart-subtotal,
.rvbtbooking-cart-taxes,
.rvbtbooking-cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.rvbtbooking-cart-total {
    font-weight: 600;
    font-size: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rvbtbooking-border);
    margin-top: 0.5rem;
}

.rvbtbooking-cart-label {
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-cart-value {
    color: var(--rvbtbooking-text);
}

.rvbtbooking-cart-actions {
    display: flex;
    gap: 0.5rem;
}

.rvbtbooking-cart-actions .rvbtbooking-btn {
    flex: 1;
    padding: 0.625rem 1rem;
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.rvbtbooking-checkout {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.rvbtbooking-checkout-empty,
.rvbtbooking-checkout-success {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 500px;
    margin: 0 auto;
}

.rvbtbooking-checkout-empty h2,
.rvbtbooking-checkout-success h2 {
    margin: 1rem 0 0.5rem;
    font-size: 1.5rem;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-checkout-empty p,
.rvbtbooking-checkout-success p {
    color: var(--rvbtbooking-text-light);
    margin-bottom: 1.5rem;
}

.rvbtbooking-success-icon {
    color: var(--rvbtbooking-success);
}

.rvbtbooking-confirmation-number {
    font-size: 1.125rem;
}

.rvbtbooking-confirmation-number strong {
    font-size: 1.25rem;
    color: var(--rvbtbooking-primary);
}

/* Checkout Layout */
.rvbtbooking-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}

.rvbtbooking-checkout-section {
    background: var(--rvbtbooking-bg);
    padding: 1.5rem;
    border-radius: var(--rvbtbooking-radius);
    box-shadow: var(--rvbtbooking-shadow);
    margin-bottom: 1.5rem;
}

.rvbtbooking-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rvbtbooking-border);
    color: var(--rvbtbooking-text);
}

.rvbtbooking-payment-error {
    margin-top: 1rem;
}

/* Order Summary */
.rvbtbooking-order-summary {
    background: var(--rvbtbooking-bg);
    padding: 1.5rem;
    border-radius: var(--rvbtbooking-radius);
    box-shadow: var(--rvbtbooking-shadow);
    position: sticky;
    top: 2rem;
}

.rvbtbooking-summary-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rvbtbooking-border);
    color: var(--rvbtbooking-text);
}

.rvbtbooking-summary-dates {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.rvbtbooking-summary-label {
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-summary-value {
    color: var(--rvbtbooking-text);
    font-weight: 500;
}

.rvbtbooking-summary-rooms {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-summary-room {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.rvbtbooking-summary-room-name {
    color: var(--rvbtbooking-text);
}

.rvbtbooking-summary-room-price {
    font-weight: 500;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-summary-totals {
    margin-bottom: 1.5rem;
}

.rvbtbooking-summary-total {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-checkout-terms {
    font-size: 0.75rem;
    color: var(--rvbtbooking-text-light);
    text-align: center;
    margin-top: 1rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .rvbtbooking-search-form .rvbtbooking-form-row {
        flex-direction: column;
    }

    .rvbtbooking-form-group {
        min-width: 100%;
    }

    .rvbtbooking-rooms-grid {
        grid-template-columns: 1fr;
    }

    .rvbtbooking-checkout-layout {
        grid-template-columns: 1fr;
    }

    .rvbtbooking-order-summary {
        position: static;
    }

    .rvbtbooking-cart-toggle {
        display: block;
    }

    .rvbtbooking-cart:not(.rvbtbooking-cart-expanded) .rvbtbooking-cart-body,
    .rvbtbooking-cart:not(.rvbtbooking-cart-expanded) .rvbtbooking-cart-footer {
        display: none;
    }
}

@media (max-width: 480px) {
    .rvbtbooking-room-price {
        flex-direction: column;
        align-items: stretch;
    }

    .rvbtbooking-room-price .rvbtbooking-btn {
        width: 100%;
    }

    .rvbtbooking-cart-actions {
        flex-direction: column;
    }

    .rvbtbooking-checkout-section {
        padding: 1rem;
    }
}

/* ==========================================================================
   Human-Readable Search Layout (Design Reference Match)
   ========================================================================== */
.rvbtbooking-human-layout .rvbtbooking-human-form {
    background: var(--rvbtbooking-bg);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 1.5rem;
}

.rvbtbooking-human-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

/* Date Card Wrapper */
.rvbtbooking-date-card-wrap {
    position: relative;
    flex: 1 1 160px;
    min-width: 200px;
}

.rvbtbooking-guests-wrap {
    position: relative;
    flex: 0 0 auto;
    min-width: 130px;
}

.rvbtbooking-nights-wrap {
    position: relative;
    flex: 0 0 auto;
    min-width: 70px;
}

/* Override inherited width using ID selector */
#rvbtbooking-nights-badge {
    flex: 50% !important;
    width: auto !important;
}

.rvbtbooking-date-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--rvbtbooking-search-accent);
    cursor: pointer;
    letter-spacing: 0.02em;
}

/* ===== ELEGANT DATE PICKER STYLING ===== */

/* Date Card - Refined Design */
.rvbtbooking-date-card,
.rvbtbooking-guests-card {
    display: flex;
    align-items: center;
    padding: 0.25rem 1rem;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    background: #fff;
    min-height: 48px;
    position: relative;
    max-width: 207px;
}

.rvbtbooking-guests-card{
    padding: 0.25rem 1rem;
    min-height: 48px;
}

.rvbtbooking-nights-card{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    transition: border-color 0.2s ease;
    background: #fff;
    min-height: 48px;
    position: relative;
}

/* Nights Number Input */
.rvbtbooking-nights-input {
    width: 100%;
    max-width: 50px;
    text-align: center;
    border: none !important;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    padding: 0;
    -moz-appearance: textfield;
}

.rvbtbooking-nights-input::-webkit-outer-spin-button,
.rvbtbooking-nights-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rvbtbooking-nights-input:focus {
    outline: none;
}

.rvbtbooking-nights-input::placeholder {
    color: #999;
    font-weight: 400;
}

.rvbtbooking-date-card:hover,
.rvbtbooking-guests-card:hover,
.rvbtbooking-nights-card:hover,
.rvbtbooking-date-card-active,
.rvbtbooking-guests-card-active {
    border-color: #146d74;
}

.rvbtbooking-date-card.has-date {
    background: #fff;
}

.rvbtbooking-date-card {
    max-width: 249px !important;
}

/* Date Icon */
.rvbtbooking-date-icon {
    margin-right: 0.75rem;
    color: #146d74;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.rvbtbooking-date-icon svg {
    width: 20px;
    height: 20px;
}

/* Date Display Container */
.rvbtbooking-date-display {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.rvbtbooking-date-placeholder {
    color: #999;
    font-size: 0.875rem;
    font-weight: 400;
}

.rvbtbooking-date-details {
    display: none;
    flex-direction: column;
    gap: 0.25rem;
}

/* Day number - standalone, large */
.rvbtbooking-date-mday {
    font-size: 1.625rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

/* Date details container */
.rvbtbooking-date-dt {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Month */
.rvbtbooking-date-month {
    font-size: 0.75rem;
    font-weight: 400;
    color: #333;
    line-height: 1;
    text-transform: uppercase;
}

/* Year */
.rvbtbooking-date-year {
    font-size: 0.6875rem;
    font-weight: 400;
    color: #666;
    line-height: 1;
}

/* Weekday - always on second line */
.rvbtbooking-date-wday {
    font-size: 0.6875rem;
    font-weight: 400;
    color: #666;
    line-height: 1;
    width: 100%;
}

/* ===== ELEGANT CALENDAR CONTAINER ===== */
.rvbtbooking-datepicker-container {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    margin-top: 0.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
    min-width: 280px;
    max-width: calc(100vw - 2rem);
    animation: calendarFadeIn 0.2s ease-out;
}

@keyframes calendarFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== NIGHTS BADGE - Matches Field Style ===== */
.rvbtbooking-nights-badge {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.75rem;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    min-height: 48px;
    min-width: 50px;
    transition: all 0.2s ease;
}

.rvbtbooking-nights-badge.show {
    display: flex;
}

.rvbtbooking-nights-value {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    line-height: 1;
}

.rvbtbooking-nights-text {
    font-size: 0.5625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin-top: 0.125rem;
}

/* Legacy Nights Display (keep for compatibility) */
.rvbtbooking-nights-wrap {
    /* display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    background: var(--rvbtbooking-bg-light);
    border: 1px solid var(--rvbtbooking-border);
    border-radius: var(--rvbtbooking-radius);
    min-width: 70px; */
}

.rvbtbooking-nights-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-nights-label {
    font-size: 0.75rem;
    color: var(--rvbtbooking-text-light);
    text-transform: lowercase;
}

/* Guests Card - Design Reference Style */
.rvbtbooking-guests-summary {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.rvbtbooking-guests-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rvbtbooking-search-accent);
}

.rvbtbooking-guests-type {
    font-size: 0.625rem;
    color: var(--rvbtbooking-text);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-right: 0.375rem;
}

.rvbtbooking-guests-type:last-child {
    margin-right: 0;
}

/* Category Dropdown */
.rvbtbooking-category-wrap {
    position: relative;
    flex: 0 0 auto;
    min-width: auto;
}

.rvbtbooking-category-card {
    min-height: 48px;
    display: flex;
    align-items: center;
}

.rvbtbooking-category-select {
    width: auto;
    padding: 0.5rem 1.75rem 0.5rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--rvbtbooking-text);
    background: var(--rvbtbooking-bg);
    border: 1px solid var(--rvbtbooking-search-border);
    border-radius: 6px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b7355' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 10px;
    transition: border-color 0.15s ease;
    min-height: 44px;
}

.rvbtbooking-category-select:hover,
.rvbtbooking-category-select:focus {
    border-color: var(--rvbtbooking-search-border-active);
    outline: none;
}

/* Filter Panel Divider */
.rvbtbooking-filter-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 1rem 0;
}

/* Filter Panel RV Length Section */
.rvbtbooking-filter-rvlength-section {
    margin-bottom: 1rem;
}

.rvbtbooking-filter-rvlength-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rvbtbooking-filter-rvlength-input {
    width: 80px;
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    text-align: center;
    -moz-appearance: textfield;
}

.rvbtbooking-filter-rvlength-input::-webkit-outer-spin-button,
.rvbtbooking-filter-rvlength-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rvbtbooking-filter-rvlength-input:focus {
    outline: none;
    border-color: var(--e-global-color-primary, #2563eb);
}

.rvbtbooking-filter-rvlength-input::placeholder {
    color: #999;
}

.rvbtbooking-filter-rvlength-unit {
    font-size: 0.875rem;
    color: #666;
}

/* Filter Button (Placeholder) */
.rvbtbooking-filter-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
}

.rvbtbooking-filter-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--e-global-color-accent);
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
    color: var(--e-global-color-accent);
}

.rvbtbooking-filter-btn:hover {
    border-color: #146d74;
    color: #146d74;
}

.rvbtbooking-filter-btn svg {
    width: 18px;
    height: 18px;
}

/* Guests Modal */
.rvbtbooking-guests-modal {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 0.5rem;
    background: var(--rvbtbooking-bg);
    border-radius: var(--rvbtbooking-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    min-width: 280px;
}

.rvbtbooking-rooms-selector {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-rooms-selector label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-rooms-selector select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--rvbtbooking-border);
    border-radius: calc(var(--rvbtbooking-radius) / 2);
    font-size: 0.875rem;
}

/* Room Guest Selectors */
.rvbtbooking-room-guests {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rvbtbooking-border);
}

.rvbtbooking-room-guests:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rvbtbooking-room-guests:first-child {
    padding-top: 0;
}

.rvbtbooking-room-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rvbtbooking-text-light);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.rvbtbooking-room-selects {
    display: flex;
    gap: 0.75rem;
}

.rvbtbooking-guest-select {
    flex: 1;
}

.rvbtbooking-guest-select label {
    display: block;
    font-size: 0.75rem;
    color: var(--rvbtbooking-text-light);
    margin-bottom: 0.25rem;
}

.rvbtbooking-guest-select select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--rvbtbooking-border);
    border-radius: calc(var(--rvbtbooking-radius) / 2);
    font-size: 0.875rem;
}

#rvbtbooking-search-btn{
    width: 100%;
    border-radius: 6px;
    height: 48px;
    line-height: 0;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Search Button - Design Reference Style */
.rvbtbooking-search-btn-wrap {
    display: flex;
    align-items: flex-end;
    flex: 1 1 auto;
}

/* Button Icon Styles */
.rvbtbooking-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

.rvbtbooking-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rvbtbooking-search-submit {
    padding: 0.625rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--rvbtbooking-search-accent);
    color: #ffffff;
    border: none;
    border-radius: 22px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 44px;
    transition: background-color 0.15s ease;
}

.rvbtbooking-search-submit:hover:not(:disabled) {
    background: var(--rvbtbooking-search-accent-hover);
}

.rvbtbooking-search-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ===== JQUERY UI DATEPICKER - Using default styles ===== */
/* Custom styles removed for simpler default appearance */

/* Responsive for Human Layout */
/* At 1200px+, keep all elements on single horizontal line */
/* Wrapping only starts at 900px and below */

@media (max-width: 900px) {
    .rvbtbooking-human-row {
        flex-wrap: wrap;
    }

    .rvbtbooking-date-card-wrap {
        flex: 1 1 calc(50% - 0.375rem);
        min-width: 160px;
    }

    .rvbtbooking-guests-wrap,
    .rvbtbooking-category-wrap {
        flex: 1 1 calc(33% - 0.5rem);
        min-width: 120px;
    }



    /* Nights badge responsive */
    .rvbtbooking-nights-badge {
        order: 0;
        flex: 0 0 auto;
    }


    .rvbtbooking-search-submit {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .rvbtbooking-date-card-wrap,
    .rvbtbooking-guests-wrap,
    .rvbtbooking-category-wrap {
        flex: 0 0 100%;
    }

    /* Nights badge mobile */
    .rvbtbooking-nights-badge {
        flex: 0 0 auto;
        padding: 0.5rem 0.625rem;
        min-width: 44px;
        min-height: 44px;
    }

    .rvbtbooking-nights-badge .rvbtbooking-nights-value {
        font-size: 0.9375rem;
    }

    .rvbtbooking-nights-badge .rvbtbooking-nights-text {
        font-size: 0.5rem;
    }

    

    .rvbtbooking-datepicker-container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 320px;
        min-width: auto;
        z-index: 10000;
        margin-top: 0;
    }

    /* Backdrop overlay when calendar is open on mobile */
    .rvbtbooking-datepicker-container::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
    }

    .ui-datepicker-multi {
        display: block !important;
        flex-wrap: wrap;
    }

    .ui-datepicker-multi .ui-datepicker-group {
        float: none !important;
        width: 100% !important;
    }

    .ui-datepicker-multi-2 .ui-datepicker-group {
        width: 100%;
        min-width: auto;
    }

    .ui-datepicker-multi-2 .ui-datepicker-group-first {
        border-right: none;
        border-bottom: 1px solid var(--rvbtbooking-border);
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .ui-datepicker-multi-2 .ui-datepicker-group-last {
        padding-left: 0;
    }

    .rvbtbooking-guests-modal {
        position: absolute;
        top: 65px;
        left: -89px;
        margin-top: 0;
        border-radius: 10px;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ==========================================
   New Step Bar Design (Horizontal Line with Circles)
   ========================================== */

.rvbt-stepbar-container {
    width: 100%;
    padding: 20px 0 40px;
}

.rvbt-stepbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.rvbt-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.rvbt-step-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.rvbt-step-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    cursor: default;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    z-index: 2; /* Circles appear on top of line */
}

/* Completed step */
.rvbt-step-complete .rvbt-step-circle {
    background-color: #2c5f5d;
    cursor: pointer;
}

.rvbt-step-complete .rvbt-step-circle:hover {
    background-color: #234b49;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Current step */
.rvbt-step-current .rvbt-step-circle {
    background-color: #fff;
    border: 2px solid #2c5f5d;
}

.rvbt-step-current .rvbt-step-label {
    font-weight: 700;
    color: #2c5f5d;
}

/* Future steps */
.rvbt-step-next .rvbt-step-circle {
    background-color: #ccc;
}

.rvbt-step-next .rvbt-step-label {
    color: #999;
}

/* Progress line - passes through center of circles */
.rvbt-step-line {
    position: absolute;
    bottom: 6.5px; /* centered on 16px circle: 8px half-circle - 1.5px half-line */
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #2c5f5d 0%, #2c5f5d 25%, #ccc 25%, #ccc 100%);
    z-index: 0; /* Behind circles */
}

/* ==========================================
   Results Head Styles (Enhanced Design)
   ========================================== */

.vbo-results-wrapper {
    overflow: visible;
}

.vbo-results-wrapper.show-overflow {
    overflow: visible;
}

.vbo-results-head {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0;
    margin-bottom: 25px;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.vbo-results-head > div,
.vbo-results-head > .vbo-results-item {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-right: 1px solid #dee2e6;
    box-sizing: border-box;
}

.vbo-results-head > div:last-child,
.vbo-results-head > .vbo-results-item:last-child {
    border-right: none;
}

.vbo-results-head > div > i,
.vbo-results-item > i {
    font-size: 14px;
    color: #2c5f5d;
    margin-right: 10px;
    min-width: 14px;
}

.vbo-results-head-det {
    display: flex;
    flex-direction: column;
}

.vbo-results-head .vbo-results-head-det-lbl {
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 1px;
    line-height: 1.2;
}

.vbo-results-head .vbo-results-head-det-val {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    line-height: 1.3;
}

/* Action group: map + cart */
.vbo-results-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Availability Map button */
.vbo-results-avmap {
    padding: 8px 14px !important;
    border-left: 1px solid #dee2e6;
}

.vbo-results-avmap-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #2c5f5d;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.vbo-results-avmap-trigger:hover {
    background: rgba(44, 95, 93, 0.08);
    color: #234b49;
}

.vbo-results-avmap-trigger i {
    font-size: 18px;
    margin-right: 0;
    color: inherit;
}

.vbo-results-avmap-label {
    white-space: nowrap;
}

/* Cart icon section */
.vbo-results-cart {
    padding: 8px 14px !important;
    border-right: none !important;
    border-left: 1px solid #dee2e6;
}

.vbo-results-cart-icon {
    position: relative;
    font-size: 22px;
    color: #2c5f5d;
    cursor: pointer;
}

.vbo-results-cart-icon:hover {
    color: #234b49;
}

.vbo-results-cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #2c5f5d;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ==========================================
   Restrictions Styles (Enhanced)
   ========================================== */

.vbo-results-restrictions-wrap {
    padding: 12px 20px !important;
}

.vbo-results-restrictions-wrap:empty {
    display: none !important;
}

.vbo-results-restrictions {
    display: flex;
    align-items: center;
}

.vbo-results-restrictions i {
    color: #6c757d;
    margin-right: 10px;
    font-size: 14px;
}

.vbo-results-head-det .vbo-results-head-det__columns {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    font-size: 13px;
}

.vbo-results-head-det .text-secondary {
    font-weight: normal;
    color: #6c757d;
}

.vbo-hover-pop-up-container {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.vbo-popup-item {
    display: none;
    position: absolute;
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.vbo-popup-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.vbo-hover-pop-up-container:hover .vbo-popup-item {
    display: block;
}

/* ==========================================
   Responsive Styles for Step Bar & Results Head
   ========================================== */

@media only screen and (max-width: 900px) {
    .vbo-results-head {
        flex-wrap: wrap;
    }

    .vbo-results-head > div,
    .vbo-results-head > .vbo-results-item {
        flex: 1 1 auto;
        padding: 8px 12px;
    }

    .vbo-results-avmap {
        flex: 0 0 auto;
    }

    .vbo-results-cart {
        flex: 0 0 auto;
    }

    .rvbt-step-label {
        font-size: 12px;
    }

    .rvbt-step-line {
        bottom: 6.5px; /* centered on 16px circle: 8px half-circle - 1.5px half-line */
    }
}

@media only screen and (max-width: 680px) {
    .vbo-results-head > div,
    .vbo-results-head > .vbo-results-item {
        flex: 1 1 45%;
        padding: 6px 10px;
        border-bottom: 1px solid #dee2e6;
    }

    .vbo-results-head > div:nth-child(even) {
        border-right: 0;
    }

    .vbo-results-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .vbo-results-avmap {
        flex: 0 0 auto;
        border-left: 1px solid #dee2e6;
    }

    .vbo-results-cart {
        flex: 0 0 auto;
        justify-content: center;
        border-left: 1px solid #dee2e6;
    }

    .rvbt-step-label {
        font-size: 11px;
    }

    .rvbt-step-circle {
        width: 14px;
        height: 14px;
    }

    .rvbt-step-line {
        bottom: 6px; /* centered on 14px circle: 7px half-circle - 1px half-line */
        height: 2px;
    }
}

@media only screen and (max-width: 480px) {
    .vbo-results-head {
        padding: 0;
    }

    .vbo-results-head > div,
    .vbo-results-head > .vbo-results-item {
        flex: 1 1 100%;
        padding: 6px 12px;
        border-right: 0;
        border-bottom: 1px solid #dee2e6;
    }

    .vbo-results-head > div:last-child,
    .vbo-results-head > .vbo-results-item:last-child {
        border-bottom: 0;
    }

    .vbo-results-head .vbo-results-head-det-val,
    .vbo-results-head .vbo-results-head-det-lbl {
        display: inline-block;
    }

    .vbo-results-head .vbo-results-head-det-lbl {
        margin-right: 6px;
    }

    .vbo-results-restrictions-wrap {
        padding: 6px 12px !important;
    }

    .rvbt-stepbar-container {
        padding: 15px 0 30px;
    }

    .rvbt-step-label {
        font-size: 10px;
    }

    .rvbt-step-circle {
        width: 12px;
        height: 12px;
    }

    .rvbt-step-line {
        bottom: 5px; /* centered on 12px circle: 6px half-circle - 1px half-line */
        height: 2px;
    }
}

/* ==========================================================================
   Availability Map Popup
   ========================================================================== */

.vbo-avmap-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vbo-avmap-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
}

.vbo-avmap-panel {
    position: relative;
    background: #111;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    width: 90vw;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
}

.vbo-avmap-panel-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.15s;
}

.vbo-avmap-panel-close:hover {
    background: rgba(0, 0, 0, 0.9);
}

.vbo-avmap-panel-body {
    position: relative;
    padding: 0;
    max-height: 90vh;
    overflow: auto;
}

/* Loader overlay — covers panel body, stays on top until map image loads */
.vbo-avmap-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #111;
    z-index: 5;
    gap: 16px;
    transition: opacity 0.3s ease;
}

.vbo-avmap-loading-fade {
    opacity: 0;
    pointer-events: none;
}

.vbo-avmap-loading-text {
    color: #999;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Three bouncing dots */
.vbo-avmap-loading-spinner {
    display: flex;
    gap: 8px;
}

.vbo-avmap-loading-bounce {
    width: 12px;
    height: 12px;
    background: #2c5f5d;
    border-radius: 50%;
    animation: vbo-avmap-bounce 1.4s ease-in-out infinite both;
}

.vbo-avmap-loading-bounce:nth-child(1) { animation-delay: -0.32s; }
.vbo-avmap-loading-bounce:nth-child(2) { animation-delay: -0.16s; }
.vbo-avmap-loading-bounce:nth-child(3) { animation-delay: 0s; }

@keyframes vbo-avmap-bounce {
    0%, 80%, 100% {
        transform: scale(0.4);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@media only screen and (max-width: 680px) {
    .vbo-avmap-panel {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }
}

/* ==========================================================================
   Filter Panel Styles
   ========================================================================== */

/* Filter Button Badge */
.rvbtbooking-filter-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #b8956e;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Filter Button Active State */
.rvbtbooking-filter-btn-active {
    border-color: #b8956e !important;
    background: rgba(184, 149, 110, 0.1);
    color: #b8956e !important;
}

.rvbtbooking-filter-btn {
    position: relative;
}

/* Filter Panel Container */
.rvbtbooking-filter-panel {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    animation: filterPanelSlideDown 0.2s ease-out;
}

@keyframes filterPanelSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rvbtbooking-filter-panel-inner {
    padding: 1.5rem;
}

/* Filter Sections */
.rvbtbooking-filter-section {
    margin-bottom: 1.25rem;
}

.rvbtbooking-filter-section:last-child {
    margin-bottom: 0;
}

.rvbtbooking-filter-section-title {
    display: none;
}

/* Amenities Grid - Reference Design */
.rvbtbooking-amenities-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem 1.5rem;
}

.rvbtbooking-amenity-item {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Hide native checkbox */
.rvbtbooking-amenity-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rvbtbooking-amenity-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #555;
    cursor: pointer;
    line-height: 1.3;
}

/* Icon box - square with teal background */
.rvbtbooking-amenity-item .amenity-icon-box {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 156, 149, 0.15);
    border: 1px solid rgba(108, 156, 149, 0.3);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.rvbtbooking-amenity-item .amenity-icon-box i,
.rvbtbooking-amenity-item .amenity-icon-box .amenity-textimg {
    font-size: 13px;
    color: #6c9c95;
}

.rvbtbooking-amenity-item .amenity-icon-box .amenity-textimg i {
    font-size: 13px;
    color: #6c9c95;
}

/* Checked state - teal highlight */
.rvbtbooking-amenity-item input[type="checkbox"]:checked + label .amenity-icon-box {
    background: #6c9c95;
    border-color: #6c9c95;
}

.rvbtbooking-amenity-item input[type="checkbox"]:checked + label .amenity-icon-box i,
.rvbtbooking-amenity-item input[type="checkbox"]:checked + label .amenity-icon-box .amenity-textimg,
.rvbtbooking-amenity-item input[type="checkbox"]:checked + label .amenity-icon-box .amenity-textimg i {
    color: #fff;
}

.rvbtbooking-amenity-item label .amenity-name {
    flex: 1;
    white-space: nowrap;
}

/* "All Amenities" special styling */
.rvbtbooking-amenity-all .amenity-icon-box {
    background: transparent;
    border: 2px solid #6c9c95;
}

.rvbtbooking-amenity-all input[type="checkbox"]:checked + label .amenity-icon-box {
    background: #6c9c95;
    border-color: #6c9c95;
}


/* Filter Controls Row */
.rvbtbooking-filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.rvbtbooking-filter-dropdown,
.rvbtbooking-filter-input {
    flex: 1 1 160px;
    min-width: 140px;
}

.rvbtbooking-filter-dropdown label,
.rvbtbooking-filter-input label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rvbtbooking-text-light);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.rvbtbooking-filter-dropdown select {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--rvbtbooking-text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    border: 1px solid var(--rvbtbooking-border);
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.rvbtbooking-filter-dropdown select:focus {
    outline: none;
    border-color: var(--rvbtbooking-search-border-active);
}

/* Length Input */
.rvbtbooking-length-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rvbtbooking-length-input-wrap input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--rvbtbooking-text);
    background: #fff;
    border: 1px solid var(--rvbtbooking-border);
    border-radius: 6px;
    transition: border-color 0.15s ease;
    max-width: 80px;
}

.rvbtbooking-length-input-wrap input:focus {
    outline: none;
    border-color: var(--rvbtbooking-search-border-active);
}

.rvbtbooking-length-unit {
    font-size: 0.8125rem;
    color: var(--rvbtbooking-text-light);
}

/* Filter Actions */
.rvbtbooking-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid #ddd;
}

.rvbtbooking-filter-actions .rvbtbooking-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.rvbtbooking-filter-actions .rvbtbooking-btn i {
    font-size: 11px;
}

/* Clear button - theme outline */
.rvbtbooking-filter-actions .rvbtbooking-btn-secondary {
    background: transparent;
    color: var(--e-global-color-accent, #C68C53);
    border: 1px solid var(--e-global-color-accent, #C68C53);
}

.rvbtbooking-filter-actions .rvbtbooking-btn-secondary:hover {
    background: color-mix(in srgb, var(--e-global-color-accent, #C68C53) 10%, transparent);
}

/* Apply button - theme solid */
.rvbtbooking-filter-actions .rvbtbooking-btn-primary {
    background: var(--e-global-color-accent, #C68C53);
    color: #fff;
    border: 1px solid var(--e-global-color-accent, #C68C53);
}

.rvbtbooking-filter-actions .rvbtbooking-btn-primary:hover {
    background: var(--e-global-color-bd32194, #86592D);
    border-color: var(--e-global-color-bd32194, #86592D);
}

.rvbtbooking-btn-close {
    display: none;
}

/* Responsive Filter Panel */
@media (max-width: 1024px) {
    .rvbtbooking-amenities-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .rvbtbooking-filter-panel-inner {
        padding: 1rem;
    }

    .rvbtbooking-amenities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem 1rem;
    }

    .rvbtbooking-filter-controls {
        flex-direction: column;
    }

    .rvbtbooking-filter-dropdown,
    .rvbtbooking-filter-input {
        flex: 0 0 100%;
    }

    .rvbtbooking-filter-actions {
        justify-content: stretch;
    }

    .rvbtbooking-filter-actions .rvbtbooking-btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 580px) {
    .rvbtbooking-amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .rvbtbooking-amenities-grid {
        grid-template-columns: 1fr;
    }

    .rvbtbooking-amenity-item label .amenity-name {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Occupancy Icons - fa-male / fa-child Colors
   ========================================================================== */
.rvbtbooking-card-occupancy i.adult.occupied {
    color: #8B7355; /* Brown for occupied adults */
}

.rvbtbooking-card-occupancy i.child.occupied {
    color: #DAA520; /* Gold/yellow for children */
}

.rvbtbooking-card-occupancy i.vacant {
    color: #CCCCCC; /* Light gray for unselected */
    opacity: 0.5;
}

/* Price separator for dual pricing */
.rvbtbooking-card-price-value .price-separator {
    color: #999;
    font-weight: 400;
    margin: 0 2px;
}

/* ==========================================================================
   Image Lightbox Popup
   ========================================================================== */
.rvbtbooking-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none !important;
    align-items: center;
    justify-content: center;
}

.rvbtbooking-lightbox.active {
    display: flex !important;
}

.rvbtbooking-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.rvbtbooking-lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    z-index: 1;
}

.rvbtbooking-lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.rvbtbooking-lightbox-close {
    position: absolute;
    top: -45px;
    right: 0;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background 0.2s ease;
}

.rvbtbooking-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.rvbtbooking-lightbox-title {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* Gallery button styling */
.rvbtbooking-card-gallery-btn {
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.rvbtbooking-card-gallery-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   Responsive Search Form with Row Wrappers
   ========================================================================== */

/* Row wrapper containers - always flex */
.rvbtbooking-dates-row,
.rvbtbooking-occupancy-row,
.rvbtbooking-actions-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;  /* Align at bottom (labels above, cards below) */
}

/* Desktop: dates/guests/category flex-grow to absorb extra row space so
   gaps between all containers stay even; Filter + Search stay content-sized
   inside actions-row so they don't stretch. Search button still ends flush
   with the content edge below because the rest of the row consumes all
   available space via flex-grow. */
@media (min-width: 769px) {
    .rvbtbooking-human-row {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    .rvbtbooking-human-row .rvbtbooking-dates-row,
    .rvbtbooking-human-row .rvbtbooking-occupancy-row,
    .rvbtbooking-human-row .rvbtbooking-category-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }
    .rvbtbooking-human-row .rvbtbooking-actions-row {
        flex: 0 0 auto;
    }
    /* Filter + Search stay natural width inside the actions-row */
    .rvbtbooking-actions-row .rvbtbooking-filter-wrap,
    .rvbtbooking-actions-row .rvbtbooking-search-btn-wrap {
        flex: 0 0 auto;
    }
}

/* Actions row: align buttons to the right */
.rvbtbooking-actions-row {
    justify-content: flex-end;
}

/* Guests wrap needs position context for dropdown modal */
.rvbtbooking-occupancy-row .rvbtbooking-guests-wrap {
    position: relative;
}

/* Tablet breakpoint */
@media (max-width: 768px) {
    .rvbtbooking-human-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.625rem;
        row-gap: 0.75rem;
    }

    /* Row wrappers: full width, contents side-by-side */
    .rvbtbooking-dates-row,
    .rvbtbooking-occupancy-row,
    .rvbtbooking-actions-row {
        flex: 0 0 100%;
        flex-wrap: nowrap;
    }

    /* Dates: equal width */
    .rvbtbooking-dates-row .rvbtbooking-date-card-wrap {
        flex: 1 1 50%;
        min-width: 0;
    }

    /* Occupancy: nights auto, guests fill */
    .rvbtbooking-occupancy-row .rvbtbooking-nights-wrap {
        flex: 0 0 auto;
    }
    .rvbtbooking-occupancy-row .rvbtbooking-guests-wrap {
        flex: 50% !important;
        min-width: 0;
    }

    /* Category full width */
    .rvbtbooking-category-wrap {
        flex: 0 0 100%;
    }

    /* Actions: filter auto, search fill */
    .rvbtbooking-actions-row .rvbtbooking-filter-wrap {
        flex: 0 0 auto;
    }

    /* Cards compact styling */
    .rvbtbooking-date-card,
    .rvbtbooking-guests-card {
        max-width: none;
        padding: 0.25rem 0.75rem;
        min-height: 52px;
    }

    .rvbtbooking-nights-card {
        max-width: none;
        min-height: 52px;
    }

    /* Slightly smaller date display */
    .rvbtbooking-date-mday {
        font-size: 1.375rem;
    }

    .rvbtbooking-date-icon svg {
        width: 18px;
        height: 18px;
    }

    .rvbtbooking-date-icon {
        margin-right: 0.5rem;
    }
}

/* Mobile breakpoint - compact design */
@media (max-width: 480px) {
    .rvbtbooking-human-row {
        gap: 0.5rem;
        row-gap: 0.625rem;
    }

    .rvbtbooking-dates-row,
    .rvbtbooking-occupancy-row,
    .rvbtbooking-actions-row {
        gap: 0.5rem;
    }

    /* Compact card styling for touch */
    .rvbtbooking-date-card,
    .rvbtbooking-guests-card {
        padding: 0.25rem 0.625rem;
        min-height: 48px;
        border-radius: 6px;
    }

    .rvbtbooking-nights-card {
        min-height: 48px;
        border-radius: 6px;
    }

    /* Smaller typography for mobile */
    .rvbtbooking-date-mday {
        font-size: 1.25rem;
    }

    .rvbtbooking-date-label {
        font-size: 0.6875rem;
        margin-bottom: 0.25rem;
    }

    .rvbtbooking-date-icon {
        margin-right: 0.375rem;
    }

    .rvbtbooking-date-icon svg {
        width: 16px;
        height: 16px;
    }

    .rvbtbooking-date-placeholder {
        font-size: 0.8125rem;
    }

    /* Guests summary compact */
    .rvbtbooking-guests-summary {
        gap: 0.5rem;
    }

    .rvbtbooking-guests-num {
        font-size: 1rem;
    }

    .rvbtbooking-guests-type {
        font-size: 0.625rem;
    }

    /* Nights badge compact */
    .rvbtbooking-nights-badge {
        padding: 0.375rem 0.5rem;
        min-width: 40px;
        min-height: 44px;
    }

    .rvbtbooking-nights-badge .rvbtbooking-nights-value {
        font-size: 0.875rem;
    }

    .rvbtbooking-nights-badge .rvbtbooking-nights-text {
        font-size: 0.5rem;
    }

    /* Search button full height match */
    .rvbtbooking-search-submit {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        min-height: 44px;
    }

    /* Filter button sizing */
    .rvbtbooking-filter-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.625rem;
    }

    /* Category select compact */
    .rvbtbooking-category-wrap select {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        min-height: 44px;
    }
}

/* Extra small devices - ultra compact */
@media (max-width: 360px) {
    .rvbtbooking-human-row {
        gap: 0.375rem;
        row-gap: 0.5rem;
    }

    .rvbtbooking-dates-row,
    .rvbtbooking-occupancy-row,
    .rvbtbooking-actions-row {
        gap: 0.375rem;
    }

    .rvbtbooking-date-card,
    .rvbtbooking-guests-card,
    .rvbtbooking-nights-card {
        min-height: 44px;
    }

    .rvbtbooking-date-mday {
        font-size: 1.125rem;
    }

    .rvbtbooking-date-icon {
        margin-right: 0.25rem;
    }

    .rvbtbooking-date-icon svg {
        width: 14px;
        height: 14px;
    }

    .rvbtbooking-date-label {
        font-size: 0.625rem;
    }

    .rvbtbooking-guests-num {
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   jQuery UI Datepicker Custom Styles
   ========================================================================== */

/* Calendar container */
.ui-datepicker {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #efefef;
    padding: 0;
}

/* Calendar header - white background */
.ui-datepicker-header {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #efefef !important;
    border-radius: 8px 8px 0 0;
    padding: 10px 5px;
}

/* Month/Year title */
.ui-datepicker-title {
    font-weight: 600;
    color: #666;
}

/* Remove padding from datepicker container */
.rvbtbooking-datepicker-container {
    padding: 0 !important;
}

/* Navigation buttons - modern icons */
.ui-datepicker-prev,
.ui-datepicker-next {
    width: 32px !important;
    height: 32px !important;
    top: 8px !important;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ui-datepicker-prev {
    left: 5px !important;
}

.ui-datepicker-next {
    right: 5px !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: #f5f5f5 !important;
    border: none !important;
}

/* Hide default jQuery UI icons completely */
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon,
.ui-icon-circle-triangle-e,
.ui-icon-circle-triangle-w {
    display: none !important;
}

/* Modern arrow icons using CSS */
.ui-datepicker-prev::after,
.ui-datepicker-next::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border: solid #666;
    border-width: 0 2px 2px 0;
    transform-origin: center;
}

.ui-datepicker-prev::after {
    transform: translate(-30%, -50%) rotate(135deg);
}

.ui-datepicker-next::after {
    transform: translate(-70%, -50%) rotate(-45deg);
}

.ui-datepicker-prev:hover::after,
.ui-datepicker-next:hover::after {
    border-color: #333;
}

/* Calendar table */
.ui-datepicker-calendar {
    margin: 0;
    border-collapse: separate;
    border-spacing: 2px;
    padding: 8px;
}

/* Weekday headers */
.ui-datepicker-calendar th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #999;
    padding: 8px 4px;
}

/* Default date cells */
.ui-datepicker-calendar td {
    padding: 1px;
}

.ui-datepicker-calendar .ui-state-default {
    border: 1px solid #efefef !important;
    background: #fff !important;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.ui-datepicker-calendar .ui-state-default:hover {
    background: #f8f8f8 !important;
    border-color: #ddd !important;
}

/* Selected/Active date - uses theme primary color */
.ui-datepicker-calendar .ui-state-active {
    background: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 15%, transparent) !important;
    border-color: var(--e-global-color-primary, #2563eb) !important;
    color: var(--e-global-color-primary, #2563eb) !important;
    font-weight: 600;
}

/* Today highlight */
.ui-datepicker-calendar .ui-state-highlight {
    background: #f0f9ff !important;
    border-color: #e0f2fe !important;
}

/* Disabled dates */
.ui-datepicker-calendar .ui-state-disabled {
    opacity: 0.4;
}

.ui-datepicker-calendar .ui-state-disabled .ui-state-default {
    color: #ccc !important;
    cursor: not-allowed;
}

/* Other month dates */
.ui-datepicker-other-month .ui-state-default {
    color: #ccc !important;
    background: transparent !important;
}

/* Multi-month spacing */
.ui-datepicker-multi .ui-datepicker-group {
    padding: 0 5px;
}

.ui-datepicker-multi .ui-datepicker-group-first {
    padding-left: 0;
}

.ui-datepicker-multi .ui-datepicker-group-last {
    padding-right: 0;
}

/* ==========================================================================
   Date Range Hover Preview
   ========================================================================== */

/* Range highlight - dates between check-in and hovered checkout */
.ui-datepicker-calendar td.rvbtbooking-range-highlight .ui-state-default {
    background: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 15%, transparent) !important;
    border-color: transparent !important;
}

/* Range start (check-in date) */
.ui-datepicker-calendar td.rvbtbooking-range-start .ui-state-default {
    border-radius: 6px 0 0 6px !important;
    background: var(--e-global-color-primary, #2563eb) !important;
    color: #fff !important;
}

/* Range end (hovered checkout date) */
.ui-datepicker-calendar td.rvbtbooking-range-end .ui-state-default {
    border-radius: 0 6px 6px 0 !important;
    background: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 30%, transparent) !important;
    border-color: var(--e-global-color-primary, #2563eb) !important;
}

/* When start and end are adjacent (2-night stay), adjust corners */
.ui-datepicker-calendar td.rvbtbooking-range-start.rvbtbooking-range-end .ui-state-default {
    border-radius: 6px !important;
}

/* Nights Tooltip */
.rvbtbooking-nights-tooltip {
    position: fixed;
    background: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 85%, transparent);
    color: #fff;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    z-index: 10001;
    white-space: nowrap;
}

.rvbtbooking-nights-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 85%, transparent);
}

/* ==========================================================================
   Group Booking Section
   ========================================================================== */

.rvbtbooking-oc-group-section {
    background: var(--rvbtbooking-bg);
    border: 1px solid var(--rvbtbooking-border);
    border-radius: var(--rvbtbooking-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.rvbtbooking-oc-group-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rvbtbooking-text);
    margin: 0 0 0.5rem 0;
}

.rvbtbooking-oc-group-info {
    font-size: 0.875rem;
    color: var(--rvbtbooking-text-light);
    margin-bottom: 1.25rem;
}

/* Group Name Input */
.rvbtbooking-oc-group-name {
    margin-bottom: 1.25rem;
}

.rvbtbooking-oc-group-name label,
.rvbtbooking-oc-group-leader label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rvbtbooking-text);
    margin-bottom: 0.5rem;
}

.rvbtbooking-oc-group-name label .required,
.rvbtbooking-oc-group-leader label .required,
.rvbtbooking-guest-form label .required {
    color: var(--rvbtbooking-error);
}

.rvbtbooking-oc-group-name input,
.rvbtbooking-oc-group-leader select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    border: 1px solid var(--rvbtbooking-border);
    border-radius: var(--rvbtbooking-radius);
    background: var(--rvbtbooking-bg);
    color: var(--rvbtbooking-text);
    transition: border-color 0.15s ease;
}

.rvbtbooking-oc-group-name input:focus,
.rvbtbooking-oc-group-leader select:focus {
    outline: none;
    border-color: var(--rvbtbooking-primary);
}

/* Site Cards */
.rvbtbooking-oc-site-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.rvbtbooking-oc-site-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--rvbtbooking-bg-light);
    border: 1px solid var(--rvbtbooking-border);
    border-radius: var(--rvbtbooking-radius);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.rvbtbooking-oc-site-card.assigned {
    border-color: var(--rvbtbooking-success);
    background: color-mix(in srgb, var(--rvbtbooking-success) 5%, var(--rvbtbooking-bg));
}

.rvbtbooking-oc-site-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rvbtbooking-oc-site-card-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-oc-site-card-category {
    font-size: 0.8125rem;
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-oc-site-card-guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    flex: 1;
    text-align: center;
}

.rvbtbooking-oc-site-card-guest-name {
    font-size: 0.875rem;
    color: var(--rvbtbooking-text-light);
}

.rvbtbooking-oc-site-card.assigned .rvbtbooking-oc-site-card-guest-name {
    font-weight: 500;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-oc-site-card-guest-note {
    font-size: 0.75rem;
    color: var(--rvbtbooking-text-light);
    font-style: italic;
}

.rvbtbooking-oc-btn-assign {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--rvbtbooking-primary);
    color: #fff;
    border: none;
    border-radius: var(--rvbtbooking-radius);
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.rvbtbooking-oc-btn-assign:hover {
    background: var(--rvbtbooking-primary-hover);
}

.rvbtbooking-oc-site-card.assigned .rvbtbooking-oc-btn-assign {
    background: var(--rvbtbooking-secondary);
}

.rvbtbooking-oc-site-card.assigned .rvbtbooking-oc-btn-assign:hover {
    background: color-mix(in srgb, var(--rvbtbooking-secondary) 80%, #000);
}

/* Group Leader Dropdown */
.rvbtbooking-oc-group-leader {
    margin-top: 1rem;
}

.rvbtbooking-oc-group-leader-note {
    font-size: 0.75rem;
    color: var(--rvbtbooking-text-light);
    margin-top: 0.5rem;
}

/* ==========================================================================
   Guest Assignment Modal
   ========================================================================== */

.rvbtbooking-guest-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.rvbtbooking-guest-modal.active {
    display: flex;
}

body.rvbtbooking-modal-open {
    overflow: hidden;
}

.rvbtbooking-guest-modal-content {
    background: var(--rvbtbooking-bg);
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.rvbtbooking-guest-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rvbtbooking-border);
    flex-shrink: 0;
    background: var(--rvbtbooking-bg);
}

.rvbtbooking-guest-modal-header h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rvbtbooking-text);
    margin: 0;
}

.rvbtbooking-guest-modal-header h4 span {
    color: var(--rvbtbooking-primary);
}

.rvbtbooking-guest-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--rvbtbooking-border);
    border-radius: 0;
    padding-left: 0.75rem;
    margin-left: 0.75rem;
    cursor: pointer;
    color: var(--rvbtbooking-text-light);
    transition: background 0.15s ease, color 0.15s ease;
}

.rvbtbooking-guest-modal-close:hover {
    background: var(--rvbtbooking-bg-light);
    color: var(--rvbtbooking-text);
}

.rvbtbooking-guest-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.rvbtbooking-guest-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rvbtbooking-guest-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.rvbtbooking-guest-form-row:has(.full-width) {
    grid-template-columns: 1fr;
}

.rvbtbooking-guest-form-row:last-child {
    grid-template-columns: repeat(3, 1fr);
}

.rvbtbooking-guest-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rvbtbooking-guest-form-field.full-width {
    grid-column: 1 / -1;
}

.rvbtbooking-guest-form-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rvbtbooking-text);
}

.rvbtbooking-guest-form-field input {
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    border: 1px solid var(--rvbtbooking-border);
    border-radius: 6px;
    background: var(--rvbtbooking-bg);
    color: var(--rvbtbooking-text);
    transition: border-color 0.15s ease;
}

.rvbtbooking-guest-form-field input:focus {
    outline: none;
    border-color: var(--rvbtbooking-primary);
}

.rvbtbooking-guest-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--rvbtbooking-border);
    background: var(--rvbtbooking-bg-light);
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

.rvbtbooking-btn-cancel {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: transparent;
    color: var(--rvbtbooking-text-light);
    border: 1px solid var(--rvbtbooking-border);
    border-radius: var(--rvbtbooking-radius);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rvbtbooking-btn-cancel:hover {
    background: var(--rvbtbooking-bg);
    color: var(--rvbtbooking-text);
}

.rvbtbooking-btn-save {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--rvbtbooking-primary);
    color: #fff;
    border: none;
    border-radius: var(--rvbtbooking-radius);
    cursor: pointer;
    transition: background 0.15s ease;
}

.rvbtbooking-btn-save:hover {
    background: var(--rvbtbooking-primary-hover);
}

/* Guest Modal Footer Error Message */
.rvbtbooking-guest-modal-error {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #bd2626;
    font-size: 12px;
    font-weight: 500;
}

.rvbtbooking-guest-modal-error i {
    font-size: 14px;
}

/* Mobile — stack footer error above the buttons so it's readable instead of
   squeezed into a 70px sliver beside the full-width Save/Cancel buttons. */
@media only screen and (max-width: 640px) {
    .rvbtbooking-guest-modal-footer {
        flex-wrap: wrap;
        justify-content: stretch;
    }
    .rvbtbooking-guest-modal-error {
        flex: 1 1 100%;
        order: -1;
        padding: 8px 10px;
        background: #fff5f5;
        border: 1px solid #f5c6c6;
        border-left: 3px solid #bd2626;
        border-radius: 6px;
        color: #8b1a1a;
        font-size: 12.5px;
        line-height: 1.35;
    }
    .rvbtbooking-guest-modal-error i {
        flex-shrink: 0;
    }
}

/* Group Name Status Indicator */
.rvbtbooking-oc-group-name-status {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 500;
}

.rvbtbooking-oc-group-name-status.available {
    color: #28a745;
}

.rvbtbooking-oc-group-name-status.unavailable {
    color: #bd2626;
}

/* Email Field Height Fix in Guest Modal */
#rvbtbooking-guest-formRender input[type="email"],
#rvbtbooking-guest-formRender input[flag="isemail"] {
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
}

/* Guest Modal FormRender Styles - Match single booking form exactly */
#rvbtbooking-guest-formRender .row {
    display: flex;
    justify-content: space-between;
    column-gap: 20px;
    margin-bottom: 16px;
}

#rvbtbooking-guest-formRender .row .form-group {
    flex: 1;
    margin-bottom: 0;
}

#rvbtbooking-guest-formRender .form-group {
    margin-bottom: 16px;
}

#rvbtbooking-guest-formRender label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

#rvbtbooking-guest-formRender .formbuilder-required {
    color: #dc3545;
    margin-left: 2px;
}

#rvbtbooking-guest-formRender input[type="text"],
#rvbtbooking-guest-formRender input[type="email"],
#rvbtbooking-guest-formRender input[type="tel"],
#rvbtbooking-guest-formRender input[type="number"],
#rvbtbooking-guest-formRender select {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #222;
    background: #fff;
    box-sizing: border-box;
}

#rvbtbooking-guest-formRender textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    min-height: 100px;
    resize: vertical;
    box-sizing: border-box;
}

#rvbtbooking-guest-formRender input:focus,
#rvbtbooking-guest-formRender select:focus,
#rvbtbooking-guest-formRender textarea:focus {
    outline: none;
    border-color: #2c5f5d;
}

#rvbtbooking-guest-formRender .checkbox-group,
#rvbtbooking-guest-formRender .fb-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#rvbtbooking-guest-formRender .checkbox-group label,
#rvbtbooking-guest-formRender .fb-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
}

#rvbtbooking-guest-formRender input[type="checkbox"],
#rvbtbooking-guest-formRender input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #2c5f5d;
    cursor: pointer;
}

/* intlTelInput styles for guest form */
#rvbtbooking-guest-formRender .iti {
    width: 100%;
}

#rvbtbooking-guest-formRender .iti input[type="tel"],
#rvbtbooking-guest-formRender .iti input[type="text"] {
    padding-left: 52px !important;
}

/* Responsive adjustments for guest modal form */
@media (max-width: 540px) {
    #rvbtbooking-guest-formRender .row {
        flex-direction: column;
        gap: 0;
    }

    #rvbtbooking-guest-formRender .row .form-group {
        margin-bottom: 1rem;
    }
}

/* Responsive adjustments for group booking */
@media (max-width: 640px) {
    .rvbtbooking-oc-site-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem;
    }

    .rvbtbooking-oc-site-card-guest {
        align-items: flex-start;
        text-align: left;
    }

    .rvbtbooking-oc-btn-assign {
        width: 100%;
    }

    .rvbtbooking-guest-form-row {
        grid-template-columns: 1fr;
    }

    .rvbtbooking-guest-form-row:last-child {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Google Places Autocomplete - Ensure visible above modals
   ========================================================================== */
.pac-container {
    z-index: 100000 !important;
}

/* ==========================================================================
   Toast Notification
   ========================================================================== */
.rvbtbooking-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rvbtbooking-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.rvbtbooking-toast__content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #1e293b;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-weight: 500;
    max-width: 380px;
}

.rvbtbooking-toast__icon {
    flex-shrink: 0;
    color: #fbbf24;
}

.rvbtbooking-toast__message {
    line-height: 1.4;
}

/* ==========================================================================
   Mobile Viewport Overflow Fixes — Search Form (Book page)
   Scoped strictly to <= 768px / <= 480px. Desktop untouched.
   ========================================================================== */

@media (max-width: 768px) {
    /* Global horizontal overflow safety net — nothing on the page can create
       a horizontal scrollbar on mobile. overflow-x: clip is the modern form
       (no scroll, no positioning context leak); hidden is the fallback. */
    html, body {
        overflow-x: hidden;
        overflow-x: clip;
        max-width: 100vw;
    }

    /* Outer form: override desktop 1.5rem padding (line 171) so it doesn't
       overflow 100vw, and zero the horizontal padding so it doesn't stack
       with the row's 16px gutter (the row below owns the gutter on mobile —
       placing it there guarantees the gutter is visible even if an ancestor
       full-bleeds this form to viewport edges). */
    #rvbtbooking-search-form.rvbtbooking-search-form,
    .rvbtbooking-search-form {
        box-sizing: border-box;
        max-width: 100vw;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
        overflow-x: clip;
        margin-left: 0;
        margin-right: 0;
    }

    /* Outer row: 16px horizontal padding lives HERE so the gutter is
       visible even if an ancestor (theme .entry-content, full-bleed page
       wrapper, etc.) full-bleeds the form wrapper to viewport edges.
       Form wrapper above is zeroed horizontally so total gutter = 16px
       (not 32px) and stays readable on 375px-wide phones. */
    .rvbtbooking-human-row {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden;
        overflow-x: clip;
    }

    .rvbtbooking-human-row *,
    .rvbtbooking-human-row *::before,
    .rvbtbooking-human-row *::after {
        box-sizing: border-box;
    }

    /* Inner row wrappers: kill any intrinsic min-width from their flex
       children (dates-row children default to min-width:200px via
       .rvbtbooking-date-card-wrap) so rows can shrink to viewport */
    .rvbtbooking-human-row .rvbtbooking-dates-row,
    .rvbtbooking-human-row .rvbtbooking-occupancy-row,
    .rvbtbooking-human-row .rvbtbooking-actions-row {
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* Flex children of those rows: allow them to shrink below their
       content-defined min-width (the 200px/130px/70px wrap defaults) */
    .rvbtbooking-human-row .rvbtbooking-date-card-wrap,
    .rvbtbooking-human-row .rvbtbooking-guests-wrap,
    .rvbtbooking-human-row .rvbtbooking-nights-wrap,
    .rvbtbooking-human-row .rvbtbooking-category-wrap,
    .rvbtbooking-human-row .rvbtbooking-filter-wrap,
    .rvbtbooking-human-row .rvbtbooking-search-submit-wrap {
        min-width: 0;
        max-width: 100%;
    }

    /* Date cards honor the 50/50 flex layout — kill the 207px desktop cap */
    .rvbtbooking-human-row .rvbtbooking-date-card,
    .rvbtbooking-human-row .rvbtbooking-guests-card {
        max-width: 100%;
        width: 100%;
    }

    /* Datepicker container: cannot escape viewport, contents scale to fit */
    .rvbtbooking-datepicker-container {
        max-width: calc(100vw - 2rem);
        overflow: hidden;
        padding: 0.75rem;
    }

    /* Override min-width: 580/600px from dynamic-searchform.css (lines 482-490)
       which otherwise forces calendar wider than viewport on mobile */
    .rvbtbooking-datepicker-container .ui-datepicker-multi,
    .rvbtbooking-datepicker-container .ui-datepicker-multi-2,
    body .ui-datepicker-multi,
    body .ui-datepicker-multi-2 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Mobile collapses to numberOfMonths:1 via JS, so the datepicker renders as
       a single-month widget with prev+next in the one header. If a caller ever
       forces multi-month at this width, fall back to a vertical stack: keep the
       2nd month's calendar but let group-last's header next-arrow stay reachable.
       (The previous `display: none` on group-last also hid the next-arrow since
       jQuery UI only puts the next-arrow in group-last's header, leaving mobile
       users unable to navigate forward.) */
    .rvbtbooking-datepicker-container .ui-datepicker-multi-2 .ui-datepicker-group,
    body .ui-datepicker-multi-2 .ui-datepicker-group {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-right: none !important;
    }
    .rvbtbooking-datepicker-container .ui-datepicker-multi-2 .ui-datepicker-group-first,
    body .ui-datepicker-multi-2 .ui-datepicker-group-first {
        border-bottom: 1px solid #efefef;
    }

    /* Tap targets >= 44px on day cells */
    .rvbtbooking-datepicker-container .ui-datepicker-calendar td,
    .rvbtbooking-datepicker-container .ui-datepicker-calendar .ui-state-default {
        min-height: 36px;
    }

    /* Filter + Search row: ensure no overflow when gap is tight */
    .rvbtbooking-actions-row {
        flex-wrap: nowrap;
        min-width: 0;
    }
    .rvbtbooking-actions-row .rvbtbooking-search-submit-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ==========================================================================
   Availability Map Popup — Mobile Full-Screen Experience
   Scoped to <= 768px. Desktop styling untouched.
   Turns the map modal into a proper full-screen view with large thumb-friendly
   close + zoom controls, safe-area padding for iOS Safari chrome, and a
   100dvh panel (100vh fallback) so the address bar can't clip the map.
   ========================================================================== */

/* Body scroll-lock while popup open — applies at all widths to prevent
   underlying page scrolling on touch + mouse wheel */
body.vbo-avmap-open {
    overflow: hidden !important;
    overscroll-behavior: contain;
}

@media (max-width: 768px) {
    /* Popup itself fills the viewport edge-to-edge */
    .vbo-avmap-popup {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        padding: 0;
    }

    /* Panel = the full-screen container; no border radius, no margin */
    .vbo-avmap-popup .vbo-avmap-panel {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        background: #111;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Panel body flex-fills the panel. Override the desktop max-height/overflow
       so the map isn't stuck in a scrollable 200px strip near the top */
    .vbo-avmap-popup .vbo-avmap-panel-body {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        max-height: none;
        min-height: 0;
        overflow: hidden;
        padding: 0;
    }

    /* Map container fills the panel body completely on mobile */
    .vbo-avmap-popup .rvbtbooking-map-container {
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    /* Wrapper owns the full height — this is the touch target for pan/zoom */
    .vbo-avmap-popup .rvbtbooking-map-wrapper {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        background: #111;
    }

    /* The zoom layer must be able to grow beyond 100% when zoomed in.
       Desktop CSS uses inline-block/max-width:100% which is fine here too;
       just ensure the image fills width naturally */
    .vbo-avmap-popup .rvbtbooking-map-zoom-layer {
        width: 100%;
        max-width: 100%;
    }

    .vbo-avmap-popup .rvbtbooking-map-image {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
    }

    /* -------- Close button: large, floating, obvious, safe-area aware -------- */
    .vbo-avmap-popup .vbo-avmap-panel-close {
        position: fixed;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        line-height: 48px;
        font-size: 28px;
        font-weight: 300;
        background: rgba(255, 255, 255, 0.96);
        color: #146d74;
        border: 1px solid rgba(20, 109, 116, 0.2);
        border-radius: 50%;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 1000;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .vbo-avmap-popup .vbo-avmap-panel-close:active {
        background: #fff;
        transform: scale(0.94);
    }

    /* -------- Zoom controls: thumb-friendly, bottom-right with safe area -------- */
    .vbo-avmap-popup .rvbtbooking-map-zoom-controls {
        position: absolute;
        top: auto;
        right: calc(12px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
        z-index: 100;
    }

    .vbo-avmap-popup .rvbtbooking-map-zoom-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50%;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .vbo-avmap-popup .rvbtbooking-map-zoom-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Loader overlay covers the whole panel body on mobile */
    .vbo-avmap-popup .vbo-avmap-loading {
        min-height: 0;
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================================
   Mobile Sticky Action Bar — Unified Map + "View Cart" button
   Scoped to <= 768px. Desktop untouched.

   Root cause of the earlier sticky failure: the actions element's containing
   block was .vbo-results-head — a short flex row. A position:sticky child can
   only remain visible while its containing block is scrolled through; once
   the user scrolls past .vbo-results-head the sticky releases.

   Fix: JS (search-form.php initMobileStickyActions) relocates
   .vbo-results-actions to be the first child of #rvbtbooking-results on
   mobile. That container wraps the full rooms/price/confirm flow, so the
   sticky element's containing block is now tall enough to keep the bar
   pinned while the user scrolls the rooms grid.

   All rules below are scoped either to the .vbo-results-actions-mobile
   class (added by the JS) or inside @media (<= 768px) so desktop is not
   affected.
   ========================================================================== */

@media only screen and (max-width: 768px) {
    /* Hide the "Map View" text label — keep the icon only (kept from prior work) */
    .vbo-results-avmap-label {
        display: none !important;
    }

    /* ---- Sticky bar container ---- */
    #rvbtbooking-results > .vbo-results-actions.vbo-results-actions-mobile {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px 0;
        padding: 8px 12px;
        background: rgba(248, 249, 250, 0.96);
        -webkit-backdrop-filter: saturate(180%) blur(8px);
        backdrop-filter: saturate(180%) blur(8px);
        border-bottom: 1px solid #e5e5e5;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        box-sizing: border-box;
    }

    /* ---- Map button: 44x44 icon-only, rounded 10px ---- */
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-avmap {
        flex: 0 0 44px;
        padding: 0 !important;
        border: 0 !important;
        border-right: 0 !important;
        background: transparent;
        margin: 0;
    }

    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-avmap-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #347f14;
        color: #2c5f5d;
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
        gap: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-avmap-trigger:hover {
        background: rgba(198, 140, 83, 0.08);
        border-color: rgba(198, 140, 83, 0.35);
    }

    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-avmap-trigger:active {
        transform: scale(0.97);
    }

    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-avmap-trigger i {
        font-size: 18px;
        margin: 0;
        color: #347f14;
    }

    /* ---- Unified Cart / "Your Sites" button ---- */
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart {
        flex: 1 1 auto;
        padding: 0 !important;
        border: 0 !important;
        border-left: 0 !important;
        margin: 0;
        background: transparent;
        min-width: 0;
    }

    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-icon {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        height: 48px;
        padding: 0 14px;
        border-radius: 10px;
        background: #dfe9db;
        border: 1px solid #347f14;
        color: #347f14;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: background-color 0.15s ease, transform 0.1s ease;
        box-sizing: border-box;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-icon:hover {
        background: #d1e2cb;
    }

    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-icon:active {
        transform: scale(0.98);
    }

    /* Cart icon (left) */
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-fa {
        font-size: 16px;
        color: #347f14;
        flex: 0 0 auto;
    }

    /* Count bubble: white circle with green number, shown after the icon */
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-badge {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 11px;
        background: #FFFFFF;
        color: #347f14;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        top: auto;
        right: auto;
        flex: 0 0 auto;
        box-shadow: none;
    }

    /* Label text: takes remaining space, truncates with ellipsis if needed */
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-label {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left;
        color: #347f14;
    }

    /* Trailing arrow — slightly muted vs the label so it reads as directional hint, not shouty */
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-arrow {
        font-size: 13px;
        color: #347f14;
        flex: 0 0 auto;
    }

    /* Empty-state: white button; count bubble hidden */
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart:not(.vbo-cart-has-items) .vbo-results-cart-icon {
        background: #ffffff;
        color: #347f14;
        box-shadow: none;
    }
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart:not(.vbo-cart-has-items) .vbo-results-cart-icon:hover {
        background: #ffffff;
        box-shadow: none;
    }
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart:not(.vbo-cart-has-items) .vbo-results-cart-fa,
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart:not(.vbo-cart-has-items) .vbo-results-cart-label,
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart:not(.vbo-cart-has-items) .vbo-results-cart-arrow {
        color: #347f14;
    }
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart:not(.vbo-cart-has-items) .vbo-results-cart-badge {
        display: none;
    }

    /* Hide the sticky bar's actions inside its original .vbo-results-head
       slot when it has been relocated (defensive — the JS removes it, but
       if the element snapshot lingers during transition we still hide the
       in-head copy via :has()-less belt-and-suspenders). */
    .vbo-results-head > .vbo-results-actions.vbo-results-actions-mobile {
        display: none;
    }
}

/* Very narrow phones — tighten text spacing but keep 48px tap target */
@media only screen and (max-width: 380px) {
    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-icon {
        padding: 0 12px;
        font-size: 13px;
        gap: 8px;
    }

    #rvbtbooking-results > .vbo-results-actions-mobile .vbo-results-cart-fa {
        font-size: 15px;
    }
}

/* ==========================================================================
   MOBILE HEADER LAYOUT FIX — .vbo-results-head summary items 2-per-row
   Scope: <= 768px (tightening at <= 480px). Desktop untouched.
   Problem: Existing rule at lines 2226–2232 forces flex:1 1 100% on every
   child of .vbo-results-head at <=480px, causing 5–7 stacked full-width rows.
   Fix: Override those children (except restrictions + actions) to share rows
   2-up via flex-wrap. Restrictions stays 100% (info block), actions is
   position:fixed (lines 4183–4201) so it's out of flow.
   Coordinates with lines 4228–4230 padding-top spacer so content clears
   the fixed action bar.
   DOM source: results-head.php — all summary items have class .vbo-results-item
   Children visibility: #vbo-results-numchildren toggles display:none/'' via JS;
   when hidden it drops out of flex entirely; when shown it becomes a 3rd item
   that naturally wraps to its own row via flex-wrap — we let it take full
   width on that lone row for readability (flex-basis:100% via :last-of-type
   would be fragile because restrictions is after it; instead we use an
   :nth-child selector keyed to the 5th item specifically).
   ========================================================================== */

@media only screen and (max-width: 768px) {
    /* Ensure wrap is explicit on mobile (parent rule at 1948 already sets it,
       but make intent obvious within the mobile cascade). */
    .vbo-results-head {
        flex-wrap: wrap;
        gap: 0;
    }

    /* Override the <=480px rule (lines 2226–2232) for the four main
       summary items: share rows 50/50. Higher specificity via #id fallback
       is unnecessary — this rule sits LATER in the cascade (after line 2232)
       with equal specificity, so it wins. */
    .vbo-results-head > .vbo-results-checkin,
    .vbo-results-head > .vbo-results-checkout,
    .vbo-results-head > .vbo-results-nights,
    .vbo-results-head > .vbo-results-numadults,
    .vbo-results-head > .vbo-results-numchildren {
        flex: 1 1 calc(50% - 0.5px);
        max-width: 50%;
        padding: 8px 12px;
        min-height: 44px;
        border-right: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
        box-sizing: border-box;
    }

    /* Remove right border on the right-column item of each 2-up row so the
       cell aligns flush with the container edge. DOM order is fixed:
       Row 1: checkin | checkout  → checkout is right-edge
       Row 2: nights  | numadults → numadults is right-edge
       Row 3: numchildren (alone; full-width, see below) */
    .vbo-results-head > .vbo-results-checkout,
    .vbo-results-head > .vbo-results-numadults {
        border-right: 0;
    }

    /* Children is conditionally shown. When visible it's the lone item on
       its row — give it full width so it doesn't look stranded at 50%.
       Override the 50% rule above with higher specificity (extra class). */
    .vbo-results-head > .vbo-results-item.vbo-results-numchildren {
        flex: 1 1 100%;
        max-width: 100%;
        border-right: 0;
    }

    /* Restrictions block: always full width (info/warning banner, reads
       badly when split). Override the <=480px baseline. */
    .vbo-results-head > .vbo-results-restrictions-wrap {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 10px 14px !important;
        border-right: 0;
        border-bottom: 0;
        box-sizing: border-box;
    }

    /* .vbo-results-actions is position:fixed at <=768px (see lines
       4183–4201) — taken out of flex flow. Belt-and-suspenders: prevent
       it from ever reclaiming flex space if that rule is later removed. */
    .vbo-results-head > .vbo-results-actions {
        flex: 0 0 auto;
    }

    /* The label/value inline alignment from the <=480px block still applies
       and works fine inside 50%-wide cells — no override needed. */
}

/* At very narrow widths, tighten padding but keep 2-per-row structure and
   44px min-height for tap targets. */
@media only screen and (max-width: 480px) {
    .vbo-results-head > .vbo-results-checkin,
    .vbo-results-head > .vbo-results-checkout,
    .vbo-results-head > .vbo-results-nights,
    .vbo-results-head > .vbo-results-numadults,
    .vbo-results-head > .vbo-results-numchildren {
        padding: 8px 10px;
    }

    .vbo-results-head > .vbo-results-restrictions-wrap {
        padding: 8px 10px !important;
    }
}

/* ============================================================================
   "Change Dates or Sites" button — subtle, compact secondary bar that sits
   right under #vbo-results-head on show-price / order-confirm steps so the
   guest can hop back to step 2 without a new search. Hidden by default and
   toggled by showStepView(). Full-width at every viewport.
   Uses #id + .class selector + !important to override Elementor's theme
   button styles (orange pill with huge padding/border-radius).
   ============================================================================ */
#rvbtbooking-change-dates-sites-btn.rvbtbooking-change-dates-btn {
    /* NOTE: display intentionally has no !important so showStepView can toggle
       via inline style.display = 'none' — all other rules use !important to
       beat Elementor's theme button styles. */
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
    margin: 10px 0 14px !important;
    background: #ffffff !important;
    border: 1px solid #d9c9a8 !important;
    border-radius: 8px !important;
    color: #6b5320 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
            appearance: none;
}
#rvbtbooking-change-dates-sites-btn.rvbtbooking-change-dates-btn:hover,
#rvbtbooking-change-dates-sites-btn.rvbtbooking-change-dates-btn:focus-visible {
    background: #fbf6ea !important;
    border-color: #c0a56b !important;
    color: #4e3d16 !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(176, 141, 78, 0.15) !important;
}
#rvbtbooking-change-dates-sites-btn.rvbtbooking-change-dates-btn svg {
    color: currentColor !important;
    flex: 0 0 auto;
}

/* Mobile — slightly taller for comfortable tap target, still full-width */
@media (max-width: 768px) {
    #rvbtbooking-change-dates-sites-btn.rvbtbooking-change-dates-btn {
        min-height: 40px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        margin: 8px 0 12px !important;
    }
}

/* ============================================================================
   Desktop pagination host — on ≥769px the rooms-step pagination is relocated
   out of the floating footer to this slot above the rooms grid, so the footer
   contains only Back + Continue. Empty/hidden on mobile where pagination
   stays in the footer.
   ============================================================================ */
.rvbtbooking-pagination-host {
    display: none;
}
@media (min-width: 769px) {
    .rvbtbooking-pagination-host {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0 0 16px;
        min-height: 1px;
    }
    .rvbtbooking-pagination-host .rvbtbooking-pagination-wrapper {
        margin: 0;
    }
}