/* ================================================
   TOUREXPERT MODERN UI - Phase 2
   - Glassmorphism sticky navbar
   - Logo fix
   - Search always visible
   - Card hover animations
   - Scroll reveal
   - Floating WhatsApp/Telegram buttons
================================================ */

/* ---------- LOGO FIX ---------- */
.logo_image img {
    height: 44px !important;
    width: auto !important;
}

/* ---------- GLASSMORPHISM NAVBAR ---------- */
.header {
    transition: all 300ms ease !important;
}
.header.glass-active .header_container {
    background: rgba(19, 26, 47, 0.82) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.18) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.header.glass-active {
    top: 0 !important;
}

/* Smooth nav link hover glow */
.main_nav_item a {
    transition: color 200ms ease, text-shadow 200ms ease !important;
}
.main_nav_item a:hover {
    text-shadow: 0 0 12px rgba(14, 165, 233, 0.7) !important;
}
.main_nav_item.active a {
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.5) !important;
}

/* ---------- SCROLL REVEAL ANIMATION ---------- */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.reveal--left {
    transform: translateX(-40px);
}
.reveal.reveal--right {
    transform: translateX(40px);
}
.reveal.reveal--scale {
    transform: scale(0.92);
}
.reveal.visible {
    opacity: 1;
    transform: none;
}

/* Stagger delays for children */
.reveal-group .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- CARD HOVER ANIMATIONS ---------- */
/* News posts */
.news_post {
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 280ms ease !important;
    cursor: pointer;
}
.news_post:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.13) !important;
}
.news_post .post_image img,
.news_post .post_image_box {
    transition: transform 350ms ease !important;
    overflow: hidden;
}
.news_post:hover .post_image img {
    transform: scale(1.05) !important;
}

/* Top/offer items */
.top_item {
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 280ms ease !important;
}
.top_item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Popular content items */
.popular_content > div {
    transition: transform 250ms ease !important;
}
.popular_content > div:hover {
    transform: translateY(-3px) !important;
}

/* Testimonial items */
.testimonial_item {
    transition: box-shadow 280ms ease, transform 280ms ease !important;
}
.testimonial_item:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-3px) !important;
}

/* Service blocks */
.service {
    transition: box-shadow 250ms ease, transform 250ms ease !important;
}
.service:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-4px) !important;
}

/* CTA buttons */
.button,
.btn-primary,
[class*="button_"] {
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}
.button:hover,
.btn-primary:hover,
[class*="button_"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(254, 67, 91, 0.35) !important;
    filter: brightness(1.08) !important;
}

/* ---------- FLOATING MESSENGER BUTTONS ---------- */
#floating-contacts {
    position: fixed;
    bottom: 28px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.float-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 220ms ease !important;
    position: relative;
}
.float-btn:hover {
    transform: scale(1.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
    text-decoration: none;
}
.float-btn svg {
    width: 26px;
    height: 26px;
    fill: #ffffff;
}

.float-btn--whatsapp {
    background: #25D366;
}
.float-btn--telegram {
    background: #2AABEE;
}
.float-btn--phone {
    background: #fe435b;
}

/* Tooltip on hover */
.float-btn::before {
    content: attr(data-tip);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(19, 26, 47, 0.88);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    backdrop-filter: blur(6px);
}
.float-btn:hover::before {
    opacity: 1;
}

/* Pulse animation for phone button */
@keyframes float-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(254,67,91,0.4); }
    50% { box-shadow: 0 4px 28px rgba(254,67,91,0.7), 0 0 0 8px rgba(254,67,91,0.12); }
}
.float-btn--phone {
    animation: float-pulse 2.5s ease-in-out infinite;
}
.float-btn--phone:hover {
    animation: none !important;
}

/* ---------- BACK TO TOP BUTTON ---------- */
#back-to-top {
    position: fixed;
    bottom: 28px;
    left: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(19, 26, 47, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    z-index: 9998;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 250ms ease, transform 250ms ease !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
#back-to-top.visible {
    opacity: 1;
    transform: translateY(0) !important;
}
#back-to-top:hover {
    background: rgba(14, 165, 233, 0.85) !important;
}
#back-to-top svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

/* ---------- MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
    .search {
        width: 220px !important;
    }
    .search_input {
        width: 130px !important;
    }
    #floating-contacts {
        bottom: 20px;
        right: 16px;
    }
    .float-btn {
        width: 46px;
        height: 46px;
    }
    .float-btn::before {
        display: none;
    }
    #back-to-top {
        left: 16px;
        bottom: 20px;
    }
}