/*
Theme Name: Tourex Child
Theme URI: https://wp.favdevs.net/tourex/
Author: Mthemeus
Author URI: https://themeforest.net/user/mthemeus
Template: tourex
Tested up to: 5.8
Requires PHP: 7.4
Description: Tourex Child Theme - A child theme for Tourex, Tour & Travel Booking WordPress Theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: tourex-child
Copyright (C) 2025 Mthemeus
*/

/* 
    Add your custom styles below 
*/

/* ========================================
   ElementsKit Advanced Tabs - Mobile Navigation Fix (Bookings Page)
   ======================================== */

/* Mobile devices - Fix navigation items display */
@media (max-width: 767px) {
    /* Force tab navigation container to allow wrapping */
    #mytabsfix .ekit-tab-nav,
    .elementor-element-da39652 .elementkit-tab-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        margin: 0 auto !important;
        padding: 10px 5px !important;
    }
    
    /* Force navigation items to wrap naturally */
    #mytabsfix .ekit-tab-nav li,
    #mytabsfix .elementkit-nav-item,
    .elementor-element-da39652 .elementkit-nav-item {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        float: none !important;
        position: relative !important;
        width: auto !important;
        max-width: calc(50% - 8px) !important; /* Allow 2 per row with gap */
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
    
    /* Navigation link button styling */
    #mytabsfix .ekit-tab-nav li a,
    #mytabsfix .elementkit-nav-link,
    .elementor-element-da39652 .elementkit-nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 15px 10px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 50px !important;
    }
    
    /* Remove any positioning indicators/underlines */
    #mytabsfix .ekit_tab_wraper .ekit-tab-nav-inner .ekit-tab-nav-indicator,
    .elementor-element-da39652 .ekit-tab-nav-indicator {
        display: none !important;
    }
    
    /* Ensure tab content displays properly */
    #mytabsfix .tab-content,
    .elementor-element-da39652 .tab-content {
        margin-top: 20px !important;
        width: 100% !important;
    }
}

/* Tablet devices - Better spacing */
@media (min-width: 768px) and (max-width: 1024px) {
    #mytabsfix .ekit-tab-nav,
    .elementor-element-da39652 .elementkit-tab-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    #mytabsfix .ekit-tab-nav li,
    #mytabsfix .elementkit-nav-item,
    .elementor-element-da39652 .elementkit-nav-item {
        flex: 0 1 auto !important;
        max-width: calc(33.333% - 10px) !important; /* Allow 3 per row */
    }
    
    #mytabsfix .elementkit-nav-link,
    .elementor-element-da39652 .elementkit-nav-link {
        padding: 20px 15px !important;
    }
}

/* ========================================
   Hide English dropdown in mobile hamburger menu
   ======================================== */

.tgmobile__menu .header-dropdown {
    display: none !important;
}

/* ========================================
   Page Loader - Use Favicon as Loader
   ======================================== */

/* Ensure loading container is visible - don't use !important on display so fadeOut works */
#loading {
    background-color: #ffffff;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

/* Override default loader with favicon image */
#loading .loader,
div.loader {
    width: 120px !important;
    height: 120px !important;
    background-image: url('/wp-content/uploads/2026/02/favicon-1.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    animation: faviconPulse 1.5s ease-in-out infinite !important;
    position: relative !important;
    top: 50% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
}

/* Smaller loader on mobile devices */
@media (max-width: 767px) {
    #loading .loader,
    div.loader {
        width: 90px !important;
        height: 90px !important;
    }
}

/* Remove the default pseudo-elements that create the dots */
#loading .loader:before,
#loading .loader:after,
div.loader:before,
div.loader:after {
    display: none !important;
    content: none !important;
    background: none !important;
    animation: none !important;
}

/* Pulsing animation for the favicon */
@keyframes faviconPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-50%) scale(1.15);
        opacity: 0.85;
    }
}

/* Alternative: Spinning animation (uncomment if you prefer spinning instead of pulsing) */
/*
@keyframes faviconSpin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}
*/

/* To use spinning instead of pulsing, replace the loader animation with: */
/* animation: faviconSpin 1.5s linear infinite !important; */

/* 1. Force the Red Color on Links */
#ca-notice-content a, 
.ca-notice-content a, 
.ca-policy-links a {
    color: #FA0F06 !important;
    text-decoration: underline !important;
}

/* 2. Force the Red Color on Hover (Prevents it from turning black) */
#ca-notice-content a:hover, 
.ca-notice-content a:hover, 
.ca-policy-links a:hover {
    color: #FA0F06 !important;
    text-decoration: none !important;
    opacity: 0.8; /* Optional: adds a slight fade so users know they are hovering */
}