/**
 * UX Enhancements - Cliente Panel
 * Roadmap v3.5 Implementation
 */

:root {
    --header-height: 80px;
    --header-height-mobile: 64px;
}

/* ============================================
   GLASSMORPHISM & ACCESSIBILITY (Point 3.3)
   ============================================ */

/* Garantir contraste no Header Sticky */
.airbnb-header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

[data-bs-theme="dark"] .airbnb-header {
    background: rgba(15, 23, 42, 0.85) !important;
}

/* Fallback para navegadores sem backdrop-filter (Point 3.3) */
@supports not (backdrop-filter: blur(1px)) {
    .airbnb-header, .mobile-bottom-nav, .glass-card {
        background: var(--bs-body-bg) !important;
        backdrop-filter: none !important;
    }
}

/* ============================================
   HIDE-ON-SCROLL HEADER (Point 3.2)
   ============================================ */
.airbnb-header {
    transition: transform 0.3s ease-in-out, background 0.3s ease;
}

.header-hidden {
    transform: translateY(-100%);
}


/* ============================================
   SMART SEARCH BAR - MOBILE (Point 3.2)
   ============================================ */
@media (max-width: 991px) {
    .mobile-search-wrapper {
        transition: transform 0.3s ease-in-out, opacity 0.2s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    
    .mobile-search-hidden {
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
    }
}

/* ============================================
   ANIMATED LOADING STATES (Skeleton Shimmer)
   ============================================ */
.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.05) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

[data-bs-theme="dark"] .skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   BUTTON MICRO-INTERACTIONS
   ============================================ */
.btn-premium {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium:active {
    transform: scale(0.96);
}