/**
 * Booking Mode Enhancements
 * Special styles when cards are in booking search mode
 */

/* ==========================================================================
   Booking Mode Card Styles - Info Always Visible
   ========================================================================== */

/* In booking mode, always show the glass overlay (no hover/click required) */
.featured-property-card-overlay.booking-mode .featured-property-glass-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* In booking mode, slightly darken the image to make text more readable */
.featured-property-card-overlay.booking-mode .featured-property-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Ensure overlay is above the darken layer */
.featured-property-card-overlay.booking-mode .featured-property-glass-overlay {
    z-index: 2;
}

/* Booking mode cursor indicates it will book directly */
.featured-property-card-overlay.booking-mode {
    cursor: pointer;
}

/* Add a subtle "Book Now" indicator */
.featured-property-card-overlay.booking-mode::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    z-index: 10;
    animation: pulse-booking 2s infinite;
}

@keyframes pulse-booking {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
}

/* Hover effect in booking mode - lift more to indicate clickability */
.featured-property-card-overlay.booking-mode:hover {
    transform: translateY(-12px);
    box-shadow: 0 24px 56px rgba(16, 185, 129, 0.15);
}