/* ==========================================================================
   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;
}

/* Alpine Cloak to prevent dynamic element flashes */
[x-cloak] {
    display: none !important;
}

/* Typography Editorial Settings */
.font-playfair {
    font-family: var(--gb-font-serif) !important;
}

.font-outfit {
    font-family: var(--gb-font-primary) !important;
}

.text-dark-charcoal {
    color: var(--gb-brand-charcoal) !important;
}

.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;
}