/* ==========================================================================
   TRAVELTARA (TTJX) — TAILWIND CSS COMPONENT & UTILITY STYLESHEET
   Tailwind CSS Architecture · Keyframe Animations · Bespoke Hospitality Tokens
   ========================================================================== */

@layer base {
    /* --------------------------------------------------------------------------
       1. BASE TOKENS & SYSTEM VARIABLES
       -------------------------------------------------------------------------- */
    :root {
        --ht-navy: #06192a;
        --ht-navy-deep: #030d17;
        --ht-navy-soft: #0e2b46;
        --ht-gold: #cba158;
        --ht-gold-glow: #e6c587;
        --ht-gold-dark: #b38536;
        --ht-gold-hover: #b88b3a;
        --ht-gold-gradient: linear-gradient(135deg, #d8b26e 0%, #c4994d 50%, #ad7f30 100%);
        --ht-canvas: #fbf9f5;
        --ht-surface: #ffffff;
        --ht-border: #e8e4db;
        --ht-border-light: #f0ece3;
        --ht-transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    html {
        scroll-behavior: smooth;
        overflow-x: clip;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        margin: 0;
        padding: 0;
        color: var(--ht-navy);
        background-color: var(--ht-canvas);
        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
        overflow-x: clip;
        background-image: 
            radial-gradient(circle at 95% 4%, rgba(203, 161, 88, 0.05) 0%, transparent 45%),
            radial-gradient(circle at 5% 45%, rgba(6, 25, 42, 0.035) 0%, transparent 40%),
            radial-gradient(circle at 90% 90%, rgba(203, 161, 88, 0.04) 0%, transparent 45%);
        background-attachment: fixed;
    }

    body.menu-open {
        overflow: hidden;
    }
}

/* --------------------------------------------------------------------------
   2. KEYFRAME ANIMATIONS & UTILITIES
   -------------------------------------------------------------------------- */
@keyframes htShineSweep {
    0% { left: -120%; opacity: 0; }
    25% { opacity: 0.75; }
    100% { left: 220%; opacity: 0; }
}

@keyframes heartPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.4) rotate(-12deg); }
    70% { transform: scale(0.92) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes htPulseGreen {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes htFloatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@layer components {
    /* --------------------------------------------------------------------------
       3. NAVIGATION & BUTTONS INTERACTIVE EFFECTS
       -------------------------------------------------------------------------- */
    .navlinks a::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: var(--ht-gold-gradient);
        transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        border-radius: 2px;
    }

    .navlinks a:hover::after,
    .navlinks a.active::after {
        width: 100%;
    }

    .sidebar-overlay.open {
        display: block !important;
    }

    .sidebar.open {
        right: 0 !important;
    }

    /* Shiny Sweep Effect for Gold CTA Buttons */
    .hbtn.gold::before,
    .searchbtn::before,
    .pricebox button.btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -120%;
        width: 70%;
        height: 100%;
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        transform: skewX(-25deg);
        pointer-events: none;
    }

    .hbtn.gold:hover::before,
    .searchbtn:hover::before,
    .pricebox button.btn:hover::before {
        animation: htShineSweep 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* --------------------------------------------------------------------------
       4. HOTEL CARD MICRO-INTERACTIONS
       -------------------------------------------------------------------------- */
    .hotel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 0%;
        background: linear-gradient(180deg, var(--ht-gold) 0%, var(--ht-navy) 100%);
        transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 20;
    }

    .hotel:hover::before {
        height: 100%;
    }

    .hotelimg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(6, 25, 42, 0.08) 0%, rgba(6, 25, 42, 0.45) 100%);
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 5;
    }

    .hotelimg .heart.active {
        color: #e11d48 !important;
        background: #ffffff !important;
    }

    .hotelimg .heart.pop {
        animation: heartPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* --------------------------------------------------------------------------
       5. CUSTOM FORM CONTROLS (RANGE SLIDER & CHECKBOXES)
       -------------------------------------------------------------------------- */
    .range {
        -webkit-appearance: none;
        appearance: none;
        height: 6px;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--ht-gold) 0%, #e2dfd7 100%);
        outline: none;
        margin: 12px 0;
        transition: background 0.3s ease;
    }

    .range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--ht-gold-gradient);
        border: 3px solid #ffffff;
        box-shadow: 0 2px 10px rgba(6, 25, 42, 0.28), 0 0 10px rgba(203, 161, 88, 0.4);
        cursor: pointer;
        transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
    }

    .range::-webkit-slider-thumb:hover {
        transform: scale(1.25);
        box-shadow: 0 4px 16px rgba(203, 161, 88, 0.6), 0 0 14px rgba(203, 161, 88, 0.5);
    }

    .range::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--ht-gold-gradient);
        border: 3px solid #ffffff;
        box-shadow: 0 2px 10px rgba(6, 25, 42, 0.28);
        cursor: pointer;
        transition: transform 0.25s ease;
    }

    .checks input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        background-color: #f8f6f0;
        position: relative;
    }

    .checks input[type="checkbox"]:hover {
        border-color: var(--ht-gold);
        box-shadow: 0 0 8px rgba(203, 161, 88, 0.25);
    }

    .checks input[type="checkbox"]:checked {
        background: var(--ht-gold-gradient);
        border-color: var(--ht-gold);
        box-shadow: 0 2px 10px rgba(203, 161, 88, 0.35);
    }

    .checks input[type="checkbox"]:checked::after {
        content: '✓';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 11.5px;
        font-weight: 900;
        animation: heartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* --------------------------------------------------------------------------
       6. CONCIERGE HELP & MAP RADAR
       -------------------------------------------------------------------------- */
    .bottomhelp::after {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
        background: radial-gradient(circle, rgba(203, 161, 88, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    /* --------------------------------------------------------------------------
       7. TOAST NOTIFICATION
       -------------------------------------------------------------------------- */
    .toast.show {
        display: block !important;
        animation: htFloatSlow 3s ease-in-out infinite;
    }
}

@layer utilities {
    /* --------------------------------------------------------------------------
       8. SCROLL REVEAL OBSERVER UTILITIES
       -------------------------------------------------------------------------- */
    .reveal-fade-up {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
    }

    .reveal-fade-up.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }

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

    .scrollbar-none::-webkit-scrollbar {
        display: none;
    }

    /* Sleek Custom Scrollbar for Fixed Filter Sidebar */
    .custom-filter-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(203, 161, 88, 0.45) transparent;
    }

    .custom-filter-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .custom-filter-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-filter-scroll::-webkit-scrollbar-thumb {
        background: rgba(203, 161, 88, 0.45);
        border-radius: 9999px;
    }

    .custom-filter-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(203, 161, 88, 0.85);
    }
}