/* ==========================================================================
   GENIEBUTLER - LUXURY INTERNATIONAL DESIGN SYSTEM (HOME V2)
   Inspiration: Aman Resorts / Airbnb Luxury (Minimal, High-Contrast, Clean)
   ========================================================================== */

/* Design Tokens & Theme Variables */
:root {
    --gb-font-primary: 'Outfit', sans-serif;
    --gb-font-serif: 'Playfair Display', serif;
    
    /* Global Access UI Color Palette */
    --gb-brand-primary: #96b900;          /* Premium Concierge Lime Green */
    --gb-brand-charcoal: #1a1a1a;         /* Carbon Black */
    --gb-brand-white: #ffffff;
    --gb-brand-light-gray: #fcfcfc;       /* Crisp luxury off-white */
    --gb-brand-border: rgba(26, 26, 26, 0.06);
    
    /* Hardware-Accelerated Beziers for 60fps Transitions */
    --gb-ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
    --gb-transition-smooth: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                            box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                            background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                            border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                            padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Body Styles */
.home-v2-body {
    font-family: var(--gb-font-primary) !important;
    background-color: var(--gb-brand-light-gray) !important;
    color: var(--gb-brand-charcoal) !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Typography Editorial Settings */

.text-lime-green {
    color: var(--gb-brand-primary) !important;
}

/* Luxury Spaced Nav Links */
.nav-luxury-link {
    font-family: var(--gb-font-primary) !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--gb-brand-charcoal) !important;
    transition: var(--gb-transition-smooth) !important;
}

.nav-luxury-link:hover {
    color: var(--gb-brand-primary) !important;
}

/* Smooth Scroll transitions */
.transition-all {
    transition: var(--gb-transition-smooth) !important;
    will-change: transform, padding, background-color, border-color;
}

.duration-300 {
    transition-duration: 300ms !important;
}

/* High-Density Apple-Style Backdrop Blur */
.backdrop-blur {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Sleek Search Capsule Pill */
.search-pill-container {
    transition: var(--gb-transition-smooth);
    border: 1px solid var(--gb-brand-border) !important;
    will-change: transform, box-shadow;
}

.search-pill-container:focus-within {
    box-shadow: 0 20px 40px rgba(26, 26, 26, 0.04) !important;
    border-color: rgba(150, 185, 0, 0.25) !important;
    transform: scale(1.005);
}

.search-pill-segment {
    transition: var(--gb-transition-smooth);
}

.search-pill-segment:hover {
    background-color: rgba(26, 26, 26, 0.015);
}

.hover-border-lime:hover {
    border-color: var(--gb-brand-primary) !important;
}

/* Dynamic Interactive Category Pill Badges */
.category-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-badge {
    padding: 7px 15px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 500;
    font-family: var(--gb-font-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(26, 26, 26, 0.07);
    background-color: var(--gb-brand-white);
    color: var(--gb-brand-charcoal);
    transition: var(--gb-transition-smooth);
    will-change: transform, background-color;
}

.category-badge:hover {
    border-color: var(--gb-brand-primary);
    color: var(--gb-brand-primary);
    transform: translateY(-1px);
}

.category-badge.active {
    background-color: var(--gb-brand-primary) !important;
    color: var(--gb-brand-white) !important;
    border-color: var(--gb-brand-primary) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(150, 185, 0, 0.2);
}

/* Premium Card Micro-Zoom with Hardware Acceleration */
.hover-translate-y {
    transition: var(--gb-transition-smooth) !important;
    will-change: box-shadow;
    transform: translateZ(0); /* Force GPU compositing */
}

.hover-translate-y:hover {
    box-shadow: 0 16px 32px rgba(26, 26, 26, 0.04) !important;
}

/* Stable inner image zoom on card hover */
.hover-translate-y .ratio img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
}

.hover-translate-y:hover .ratio img {
    transform: scale(1.04) translateZ(0);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Compact Premium Category Badges */
.category-badge-compact {
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.58rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border: 1px solid rgba(26, 26, 26, 0.07) !important;
    background-color: var(--gb-brand-white) !important;
    color: var(--gb-brand-charcoal) !important;
    transition: var(--gb-transition-smooth) !important;
    display: inline-block !important;
}

.category-badge-compact:hover {
    border-color: var(--gb-brand-primary) !important;
    color: var(--gb-brand-primary) !important;
}

.category-badge-compact.active {
    background-color: var(--gb-brand-primary) !important;
    color: var(--gb-brand-white) !important;
    border-color: var(--gb-brand-primary) !important;
    font-weight: 600 !important;
}

/* Stable inner image zoom & button pop on card hover */
.hover-translate-y:hover .btn-dark {
    background-color: var(--gb-brand-primary) !important;
    border-color: var(--gb-brand-primary) !important;
}

.hover-translate-y:hover .btn-dark i {
    transform: translateX(2px);
}

.p-2-5 {
    padding: 0.625rem !important;
}
.p-3-5 {
    padding: 1.15rem !important;
}
.mb-2-5 {
    margin-bottom: 0.625rem !important;
}
.pt-2-5 {
    padding-top: 0.625rem !important;
}

/* Absolute Luxury Overlay Gradient */
.luxury-card-overlay {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.15) 30%, rgba(10, 10, 10, 0) 50%, rgba(10, 10, 10, 0.8) 80%, rgba(10, 10, 10, 0.98) 100%) !important;
    transition: background-color 0.4s var(--gb-ease-luxury) !important;
}

.luxury-card-overlay span,
.luxury-card-overlay h6,
.luxury-card-overlay p,
.luxury-card-overlay div,
.luxury-card-overlay i {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Category Badges for Dark Overlays */
.category-badge-luxury {
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.55rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border: 1px solid rgba(150, 185, 0, 0.3) !important;
    background-color: rgba(150, 185, 0, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: var(--gb-transition-smooth) !important;
    display: inline-block !important;
}

.category-badge-luxury:hover {
    border-color: rgba(150, 185, 0, 0.7) !important;
    color: var(--gb-brand-white) !important;
    background-color: rgba(150, 185, 0, 0.15) !important;
}

.category-badge-luxury.active {
    background-color: var(--gb-brand-primary) !important;
    color: var(--gb-brand-white) !important;
    border-color: var(--gb-brand-primary) !important;
    font-weight: 600 !important;
}

/* Border Helpers */
.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.border-white-20 {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Interactive Card Buttons */
.btn-dark-luxury {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--gb-brand-white) !important;
    transition: var(--gb-transition-smooth) !important;
}

.btn-dark-luxury:hover {
    background-color: var(--gb-brand-primary) !important;
    border-color: var(--gb-brand-primary) !important;
    color: var(--gb-brand-white) !important;
}

/* Stable absolute card image hover micro-zoom */
.hover-translate-y img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hover-translate-y:hover img {
    transform: scale(1.05) translateZ(0) !important;
}

/* GPU Snap Horizontal Scrolling */
.snap-inline {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
}

.snap-align {
    scroll-snap-align: start;
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Premium Buttons Overrides */
.btn-success {
    background-color: var(--gb-brand-primary) !important;
    border-color: var(--gb-brand-primary) !important;
    color: var(--gb-brand-white) !important;
    transition: var(--gb-transition-smooth) !important;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: #85a400 !important;
    border-color: #85a400 !important;
    box-shadow: 0 6px 20px rgba(150, 185, 0, 0.2) !important;
}

/* Luxury Footer Styling */
.hover-lime {
    transition: var(--gb-transition-all);
}

.hover-lime:hover {
    color: var(--gb-brand-primary) !important;
}

/* General Layout Tweaks */
.py-1-5 {
    padding-top: 0.38rem !important;
    padding-bottom: 0.38rem !important;
}

/* Active Nav Underline Tabs */
.nav-underlined-tab {
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    transition: var(--gb-transition-smooth);
}

.nav-underlined-tab::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20%;
    width: 60%;
    height: 2px;
    background-color: transparent;
    transition: var(--gb-transition-smooth);
}

.nav-underlined-tab.active {
    color: var(--gb-brand-charcoal) !important;
}

.nav-underlined-tab.active::after {
    background-color: var(--gb-brand-charcoal);
}

/* Smooth shifting layout for search overlay organic pushes */
main {
    transition: margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Luxury "Ver más" Pill Button */
.btn-luxury-ver-mas {
    border: 1px solid var(--gb-brand-charcoal) !important;
    color: var(--gb-brand-charcoal) !important;
    background-color: transparent !important;
    transition: var(--gb-transition-smooth) !important;
    will-change: transform, box-shadow, background-color, border-color;
}

.btn-luxury-ver-mas:hover {
    border-color: var(--gb-brand-primary) !important;
    background-color: var(--gb-brand-primary) !important;
    color: var(--gb-brand-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(150, 185, 0, 0.15) !important;
}

.btn-luxury-ver-mas:active {
    transform: translateY(0px) !important;
    box-shadow: 0 4px 12px rgba(150, 185, 0, 0.1) !important;
}

/* Card Ver Más Hover Effect */
.card-ver-mas-luxury {
    border: 1px solid var(--gb-brand-border) !important;
    background-color: var(--gb-brand-white) !important;
    transition: var(--gb-transition-smooth) !important;
    cursor: pointer;
    will-change: transform, border-color, box-shadow;
}

.card-ver-mas-luxury:hover {
    border-color: var(--gb-brand-primary) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(150, 185, 0, 0.08) !important;
}

.card-ver-mas-luxury:hover i {
    color: var(--gb-brand-primary) !important;
    transform: scale(1.1) !important;
}

.card-ver-mas-luxury i {
    transition: var(--gb-transition-smooth) !important;
}



/* Extracted from: views\site\explore_map_v2.php */

    .leaflet-price-pin { transition: all 0.2s ease-in-out !important; }
    .w-40 { width: 40% !important; }
    .w-60 { width: 60% !important; }
    .hover-zoom { transition: transform 0.5s ease; }
    .hover-zoom:hover { transform: scale(1.08); }
    .flash-highlight { animation: flash-highlight-border 2.5s ease-in-out; }
    @keyframes flash-highlight-border {
        0%, 100% { border-color: rgba(0,0,0,0.08); box-shadow: none; transform: scale(1); }
        25%, 50% { border-color: #96b900; box-shadow: 0 5px 20px rgba(150, 185, 0, 0.25); transform: scale(1.02); background-color: rgba(150, 185, 0, 0.03); }
    }
    
    @media (min-width: 992px) {
        .explore-split-container {
            min-height: calc(100vh - 80px);
            position: relative;
        }
        .explore-results-col {
            width: 50%;
            height: auto;
        }
        .explore-map-col {
            position: sticky;
            align-self: flex-start;
            margin-left: auto;
            margin-bottom: 24px;
            width: calc(50% - 12px);
            z-index: 5;
        }
        .explore-map-card {
            height: calc(100vh - 315px) !important;
            border-radius: 18px !important;
            border: 1px solid rgba(0,0,0,0.08) !important;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09) !important;
            overflow: hidden;
        }
    }
    @media (max-width: 991.98px) {
        .explore-map-card {
            height: 380px !important;
            border-radius: 16px !important;
        }
    }


/* Extracted from: views\site\product-details-v2.php */
    .flatpickr-wrapper { width: 100% !important; display: block !important; }
    .bg-luxury-gold { background-color: #96b900 !important; }
    
    /* Luxury Bento Grid for Images */
    .home-bento-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 220px 220px;
        gap: 16px;
    }
    .home-bento-item-large {
        grid-row: span 2;
        border-radius: 24px !important;
        overflow: hidden;
        position: relative;
    }
    .home-bento-item-small {
        border-radius: 20px !important;
        overflow: hidden;
        position: relative;
    }
    .home-bento-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .home-bento-item:hover .home-bento-img {
        transform: scale(1.05);
    }
    
    /* Interactive reservation float card */
    .home-sticky-reserve-card {
        border-radius: 20px;
        box-shadow: 0 16px 40px rgba(0,0,0,0.06);
        border: 1px solid rgba(0,0,0,0.05);
        background: #ffffff;
        padding: 20px 20px 16px 20px !important;
        transition: all 0.3s ease;
    }
    .home-sticky-reserve-card:hover {
        box-shadow: 0 24px 48px rgba(0,0,0,0.09);
    }
    
    .home-feature-badge {
        background-color: rgba(150, 185, 0, 0.05);
        color: #7da000;
        font-weight: 600;
        border-radius: 50px;
        padding: 6px 14px;
        font-size: 0.8rem;
    }
    
    .custom-leaflet-icon {
        background: transparent !important;
        border: none !important;
    }
    
    /* Luxury rate chips and inputs */
    .home-offer-badge-detail {
        position: absolute;
        bottom: 15px;
        right: 15px;
        background: #e74c3c;
        color: #fff;
        padding: 6px 14px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 800;
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
        z-index: 3;
        line-height: 1;
    }
    .home-lux-chip {
        padding: 5px 12px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid rgba(0,0,0,0.08);
        background: #ffffff;
        color: #4a5568;
        transition: all 0.25s ease;
    }
    .home-lux-chip:hover {
        border-color: #96b900;
        color: #96b900;
    }
    .home-lux-chip.active {
        background: #96b900;
        color: #ffffff !important;
        border-color: #96b900;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(150, 185, 0, 0.25);
    }
    .lux-input {
        background: rgba(0,0,0,0.02) !important;
        border: 1px solid rgba(0,0,0,0.08) !important;
        color: #1a1a1a !important;
        border-radius: 10px !important;
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
        transition: all 0.3s ease;
    }
    .lux-input:focus {
        border-color: #96b900 !important;
        box-shadow: 0 0 0 3px rgba(150, 185, 0, 0.15) !important;
        background: #ffffff !important;
    }
    
    @media (max-width: 991.98px) {
        .home-bento-grid {
            grid-template-columns: 1fr;
            grid-template-rows: 300px 150px 150px;
        }
        .home-bento-item-large {
            grid-row: span 1;
        }
    }
    
    /* Dedicated Luxury Lightbox Modal Styles */
    .home-lightbox-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        background: rgba(10, 10, 10, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
    
    .home-lightbox-img-transition {
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    .home-lightbox-img-sliding-next {
        opacity: 0;
        transform: translateX(60px) scale(0.98);
    }
    .home-lightbox-img-sliding-prev {
        opacity: 0;
        transform: translateX(-60px) scale(0.98);
    }


    /* Light-background variant of category-badge-luxury (white cards) */
    .category-badge-luxury-light {
        background-color: rgba(150, 185, 0, 0.1) !important;
        color: var(--gb-brand-charcoal, #1a1a1a) !important;
    }
    .category-badge-luxury-light:hover {
        background-color: rgba(150, 185, 0, 0.18) !important;
        color: var(--gb-brand-primary) !important;
    }
    .category-badge-luxury-light.active {
        background-color: var(--gb-brand-primary) !important;
        color: var(--gb-brand-white) !important;
    }