/*
Theme Name: EnjoyTravel Theme
Theme URI: https://enjoytravelnowperu.com
Author: Inti Raymi Studio
Author URI: https://intiraymi.com
Description: Custom theme for EnjoyTravelNowPeru with Bootstrap 5 and WooCommerce support (Tours).
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: enjoytravel-theme
*/

/* Variables */
:root {
    --primary-color: #FBBD42;
    --primary-hover: #e5a52b;
    --secondary-color: #212529;
    --text-color: #54595F;
    --heading-color: #0c0c0c;
    --font-heading: "League Spartan", sans-serif;
    --font-body: "Nunito", sans-serif;
    --whatsapp-color: #25D366;

    /* Dark Mode Variables (Light Defaults) */
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --border-color: #eeeeee;
    --light-bg: #f8f9fa;
}

.dark-mode {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #b0b0b0;
    --heading-color: #ffffff;
    --border-color: #333333;
    --light-bg: #1a1a1a;
}

body {
    overflow-x: hidden;
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--heading-color);
    font-weight: 700;
}

/* Bootstrap Overrides */
.container {
    max-width: 1200px;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 50px;
    padding: 10px 30px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-outline-primary {
    color: var(--secondary-color);
    border-color: var(--primary-color);
    border-width: 2px;
    font-weight: 700;
    border-radius: 50px;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
    font-weight: 700;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #000;
    outline-offset: 2px;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* Header & Navbar */
.site-header {
    background: var(--bg-color);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1030;
    /* Bootstrap z-index for fixed/sticky */
    width: 100%;
    transition: background-color 0.3s ease;
}

.navbar-brand {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--secondary-color) !important;
}

.nav-link {
    font-weight: 700;
    color: var(--secondary-color) !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 0.5rem 1rem !important;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

/* Menu Button Style (e.g. Plan My Trip) */
.navbar-nav .nav-item.nav-btn .nav-link {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 50px;
    padding: 0.5rem 1.5rem !important;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.navbar-nav .nav-item.nav-btn .nav-link:hover {
    background-color: var(--primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Force logo size to override WooCommerce defaults (.woocommerce img) */
.site-header .navbar-brand img {
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    display: block;
}

/* Mega Menu & Dropdowns */
.navbar .dropdown-menu {
    border: none;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 0;
    padding: 0.5rem;
}

.navbar .nav-item.mega-menu {
    position: static;
}

.navbar .nav-item.mega-menu .dropdown-menu {
    width: 100%;
    left: 0;
    right: 0;
    padding: 2rem;
    border-radius: 0 0 15px 15px;
}

/* Ensure mega menu items are laid out well if they are columns */
/* Ensure mega menu items are laid out well if they are columns */
/* .navbar .nav-item.mega-menu .dropdown-menu>li {
    display: inline-block;
    vertical-align: top;
    min-width: 200px;
} */

.dropdown-item {
    font-weight: 600;
    color: var(--text-color);
    padding: 4px 12px;
    text-transform: capitalize;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background-color: transparent;
    color: var(--primary-color);
    padding-left: 16px;
    /* Slide effect */
}

/* Submenu nav-link overrides */
.dropdown-menu .nav-link {
    text-transform: capitalize !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    transition: all 0.2s;
}

.dropdown-menu .nav-link:hover {
    padding-left: 16px !important;
}


/* Make dropdowns work on hover on desktop */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    /* FIX: Mega Menu uses Row/Col which relies on Flexbox. 
       Standard dropdowns use Block. We must override Block with Flex for Mega Menu. */
    .navbar .nav-item.mega-menu:hover .dropdown-menu {
        display: flex;
        /* Restore flex context for .row */
        flex-wrap: wrap;
        /* Standard row behavior */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Section */
.hero,
.category-hero {
    position: relative;
    padding: 180px 0 350px 0;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 3rem;
    border-radius: 0 0 30px 30px;
    /* Modern touch */
    overflow: hidden;
}

/* Hero lead text size ajustado */
.hero .lead.fs-4,
.category-hero .lead.fs-4 {
    font-size: 1.15rem !important;
}

.hero::before,
.category-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Stronger overlay for text readability */
    z-index: 1;
}

.hero .container,
.category-hero .container {
    position: relative;
    z-index: 2;
}

/* Homepage Sections */

/* Floating Search Bar (Triply Style) */
.floating-search-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-top: -80px;
    /* Negative margin for overlap */
    position: relative;
    z-index: 10;
    max-width: 900px;
}

.floating-search-box input {
    border: 1px solid #eee;
    padding: 15px 20px;
    border-radius: 50px;
    background-color: #f9f9f9;
}

.floating-search-box button {
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Destinations Grid Refined */
.destination-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 350px;
    display: block;
    text-decoration: none;
}

.destination-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.destination-card:hover img {
    transform: scale(1.1);
}

.destination-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    padding: 40px 30px;
    color: #fff;
    transition: all 0.3s ease;
}

.destination-card:hover .destination-overlay {
    padding-bottom: 50px;
    /* Slide up effect */
}

.destination-overlay h3 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Testimonials (Trustindex container) */
.section-testimonials {
    background-color: #f8f9fa;
}

/* FAQ Accordion */
.accordion-button:not(.collapsed) {
    background-color: rgba(251, 189, 66, 0.1);
    /* Light primary */
    color: var(--secondary-color);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(251, 189, 66, 0.5);
}


/* Client Logos */
.section-logos {
    background-color: #fff;
    border-top: 1px solid #eee;
}

.client-logo-item img {
    max-height: 80px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.client-logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Blog Cards */
.blog-card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.blog-card .card-img-top {
    height: 220px;
    object-fit: cover;
}

.blog-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 15px !important;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.category-hero h1 {
    color: #fff;
    font-size: 3.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.category-hero .lead {
    color: #f8f9fa;
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Cards & Tours */
.card {
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.card-img-top {
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-img-top {
    transform: scale(1.05);
}

.card-title a:hover {
    color: var(--primary-color) !important;
}

/* Footer */
.site-footer {
    background-color: #35281f !important;
    /* Dark Brown from ref */
    color: #fff;
    font-family: 'Nunito', sans-serif;
}

.footer-title {
    color: #FBBD42;
    /* Gold/Yellow Primary */
    font-family: 'League Spartan', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

.footer-desc {
    line-height: 1.6;
    font-size: 0.95rem;
}

.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-menu li a:hover {
    color: #FBBD42;
    padding-left: 5px;
}

.footer-contact-list li {
    font-size: 0.95rem;
}

.footer-contact-list i {
    color: #FBBD42 !important;
    /* Force Gold Icons */
}

/* Social Icons */
.footer-socials .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
    transition: transform 0.3s;
}

.footer-socials .social-icon:hover {
    transform: translateY(-3px);
}

.bg-instagram {
    background: #E1306C;
}

.bg-facebook {
    background: #1877F2;
}

.bg-tiktok {
    background: #000;
}

.bg-youtube {
    background: #FF0000;
}

.bg-twitter {
    background: #1DA1F2;
}


/* Border color override */
.border-secondary {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.hover-gold:hover {
    color: #FBBD42 !important;
    /* Gold on hover */
    transition: color 0.3s ease;
}

/* WooCommerce Overrides */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: #FBBD42;
    font-weight: 700;
}

/* --- Floating Social Sidebar (Left) --- */
.floating-social-sidebar {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 1040;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    transition: transform 0.3s ease, box-shadow 0.3s;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.social-btn:hover {
    transform: translateX(5px) scale(1.1);
    color: white;
}

.sb-facebook {
    background-color: #1877F2;
}

.sb-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.sb-tiktok {
    background-color: #000;
}

.sb-youtube {
    background-color: #FF0000;
}

.sb-twitter {
    background-color: #1DA1F2;
}

/* --- WhatsApp Chat Widget --- */
.whatsapp-chat-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1050;
}

.wa-chat-toggle {
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    animation: wa-pulse 2s infinite;
}

.wa-chat-toggle:hover {
    transform: scale(1.1);
}

@keyframes wa-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.wa-chat-box {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 300px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    display: none;
    /* Hidden by default */
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
}

.wa-chat-box.active {
    opacity: 1;
    transform: translateY(0);
}

.wa-chat-header {
    background-color: #075E54;
    padding: 15px;
    color: white;
}

.wa-chat-body {
    padding: 15px;
    background-color: #E5DDD5;
    /* WA Wallpaper color approx */
    height: 200px;
    overflow-y: auto;
}

.wa-message-bg {
    background-color: white;
    border-radius: 0 10px 10px 10px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.wa-chat-footer {
    background: white;
}

.woocommerce-product-gallery {
    border-radius: 15px;
    overflow: hidden;
}

/* Utilities */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

/* --- Single Tour Timeline & Details --- */
.tour-timeline {
    position: relative;
    border-left: 2px dashed #e5e5e5;
    margin-left: 17px;
    /* Half of circle width */
    padding-top: 10px;
}

.timeline-item {
    position: relative;
}

.timeline-marker {
    box-shadow: 0 0 0 4px #fff;
    /* White gap around marker */
    left: -19px !important;
    /* Circle width 35 / 2 + border 2 / 2 approx 19 */
    top: 0 !important;
    font-size: 0.9rem;
}

/* Inclusions Lists */
.tour-list-check ul,
.tour-list-cross ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

/* Homepage Enhancements */
.transition-transform {
    transition: transform 0.4s ease;
}

.tour-home-card:hover .transition-transform,
.blog-card:hover .transition-transform {
    transform: scale(1.05);
}

/* --- Single Blog Post Styles --- */
.blog-post-single {
    color: #444;
}

.post-meta span i {
    color: var(--primary-color);
}

.post-breadcrumbs #breadcrumbs a {
    color: var(--primary-color);
    text-decoration: none;
}

.post-breadcrumbs #breadcrumbs span {
    margin: 0 5px;
}

.entry-content-blog h2 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    color: #222;
}

.entry-content-blog h3 {
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.post-toc {
    border-left: 4px solid var(--primary-color) !important;
}

#toc-list li a:hover {
    color: var(--primary-color) !important;
    padding-left: 5px;
}

.transition-color {
    transition: all 0.3s ease;
}

/* Sidebar Styles */
.sticky-sidebar {
    position: sticky;
    top: 100px;
}

.tour-mini-card {
    transition: transform 0.3s ease;
}

.tour-mini-card:hover {
    transform: translateX(10px);
}

.hover-primary:hover {
    color: var(--primary-color) !important;
}

.last-mb-0:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 991.98px) {
    .sticky-sidebar {
        position: static;
    }
}

/* --- Redesigned Destination Page --- */
.destination-redesign .dest-hero h1 {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.destination-redesign .swiper-pagination-bullet-active {
    background: var(--primary-color) !important;
}

.destination-redesign .swiper-slide {
    height: auto;
}

.destination-redesign .tour-card {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.destination-redesign .tour-card:hover {
    transform: translateY(-10px);
}

.destination-redesign .why-item i {
    transition: transform 0.3s ease;
    display: inline-block;
}

.destination-redesign .why-item:hover i {
    transform: scale(1.1) rotate(5deg);
}

.destination-redesign .cta-image {
    transition: filter 0.5s ease;
}

.destination-redesign .cta-contact-box {
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.destination-redesign .cta-contact-box:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color) !important;
}

.destination-redesign .dest-hero-desc p {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .destination-redesign .dest-hero h1 {
        font-size: 3rem;
    }

    .destination-redesign .dest-hero {
        min-height: 60vh !important;
    }
}

/* --- Related Tours Carousel --- */
.related-tours-section {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.relatedToursSwiper {
    width: 100%;
    padding: 10px 0 40px !important;
    overflow: visible !important;
}

.related-tours-section .display-6 {
    letter-spacing: -1px;
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.tour-vertical-card .transition-transform {
    transition: transform 0.5s ease;
}

.tour-vertical-card:hover .transition-transform {
    transform: scale(1.08);
}

.related-tours-section .swiper-button-prev-related:hover,
.related-tours-section .swiper-button-next-related:hover {
    background-color: #222;
    color: #fff;
    border-color: #222;
}

.related-tours-section .swiper-pagination-bullet-active {
    background: #FBBD42;
}

.letter-spacing-1 {
    letter-spacing: 1px;
}

@media (max-width: 767.98px) {
    .whatsapp-chat-widget {
        bottom: 30px;
        right: 20px;
    }

    /* Lift widget only on tour pages to avoid sticky booking bar */
    .single-product .whatsapp-chat-widget {
        bottom: 110px;
    }

    .wa-chat-toggle {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .related-tours-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .related-tours-section .container>div:first-child {
        padding-left: 15px;
        padding-right: 15px;
    }

    .relatedToursSwiper {
        padding-left: 15px !important;
    }
}

.tour-list-check li,
.tour-list-cross li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 0.5rem;
    color: #555;
    font-size: 0.95rem;
}

.tour-list-check li::before {
    content: "\F26A";
    /* Bootstrap check-circle-fill */
    font-family: bootstrap-icons;
    color: #198754;
    position: absolute;
    left: 0;
    top: 2px;
}

.tour-list-cross li::before {
    content: "\F62A";
    /* Bootstrap x-circle-fill */
    font-family: bootstrap-icons;
    color: #dc3545;
    position: absolute;
    left: 0;
    top: 2px;
}

/* Sticky Sidebar Mobile override */
@media (max-width: 991px) {
    .tour-sidebar {
        position: static !important;
        margin-top: 2rem;
    }

    .tour-price-hero {
        display: none;
        /* Hide top price on mobile, show bottom card only */
    }
}

/* --- Mosaic Gallery --- */
.tour-gallery-mosaic .gallery-item {
    cursor: pointer;
    transition: filter 0.3s;
}

.tour-gallery-mosaic .gallery-item:hover {
    filter: brightness(0.9);
}

.gallery-overlay {
    backdrop-filter: blur(2px);
    transition: opacity 0.3s;
}

.tour-gallery-mosaic .gallery-item:hover .gallery-overlay {
    opacity: 0.8;
}

/* --- Tour Header Actions --- */
.tour-actions .btn-light {
    background: #fff;
    border-color: #ddd;
    color: #333;
    font-size: 0.9rem;
    font-weight: 600;
}

.tour-actions .btn-light:hover {
    background: #f8f9fa;
    border-color: #ccc;
}

/* --- Booking Date Field --- */
.booking-date-wrapper label {
    font-size: 0.9rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.booking-date-wrapper input[type="date"] {
    border-radius: 10px;
    padding: 12px;
    border: 2px solid #eee;
    font-family: 'Nunito', sans-serif;
    transition: border-color 0.3s;
}

.booking-date-wrapper input[type="date"]:focus {
    border-color: #FBBD42;
    box-shadow: none;
    outline: none;
}

/* --- Page Hero Banner --- */
.page-hero-section {
    min-height: 350px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.page-hero-section h1 {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.page-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    color: rgba(255, 255, 255, 0.7);
}

/* --- Premium WooCommerce Checkout Styling --- */
.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2,
#customer_details .col-1,
#customer_details .col-2 {
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-right: 0 !important;
}

#customer_details {
    display: block !important;
}

/* Two Column Layout on Desktop */
@media (min-width: 992px) {
    #customer_details {
        float: left;
        width: 60%;
        margin-right: 4%;
    }

    #order_review_heading,
    #order_review {
        float: right;
        width: 35%;
        clear: right;
    }
}

.woocommerce-checkout h3 {
    font-weight: 700;
    margin-bottom: 25px;
    color: #333;
}

/* Inputs Styling */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    border-radius: 12px !important;
    padding: 12px 20px !important;
    border: 1px solid #e0e0e0 !important;
    background-color: #fff !important;
    font-size: 1rem;
}

/* Traveller Information Repeater Blocks */
#traveller_data_section {
    margin-top: 40px;
}

.remove-traveller {
    font-size: 1.2rem;
    transition: color 0.2s;
    padding: 0 !important;
}

.remove-traveller:hover {
    color: #dc3545 !important;
}

.traveller-block {
    background-color: #f8f9fa !important;
    border: 1px solid #eee !important;
    transition: transform 0.2s;
}

.traveller-block:hover {
    transform: translateY(-2px);
}

/* Checkout Buttons (Reference Match: Green) */
.woocommerce-checkout #place_order,
.woocommerce-checkout .button,
#add-new-traveller-btn {
    background-color: #8ec64b !important;
    /* The distinctive green from the image */
    color: #fff !important;
    border: none !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-transform: none !important;
    transition: background 0.3s, transform 0.2s !important;
    width: 100%;
}

.woocommerce-checkout #place_order:hover,
#add-new-traveller-btn:hover {
    background-color: #7ab33d !important;
    transform: scale(1.02);
}

#add-new-traveller-btn {
    width: auto !important;
    padding: 12px 25px !important;
}

/* Order Review (Sidebar) */
#order_review {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.woocommerce-checkout-review-order-table thead th {
    border-top: none;
    font-weight: 700;
    color: #333;
}

.policy-checkbox-wrapper {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: 15px;
}

/* --- Tour Single Page Refinements --- */
.single-product .container {
    max-width: 1300px !important;
}

#tour-nav .nav-link {
    transition: all 0.3s;
    border: 1px solid #eee;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#tour-nav .nav-link.active {
    background-color: #FBBD42 !important;
    color: #000 !important;
    border-color: #FBBD42;
}

.tour-header h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
    line-height: 1.1;
    font-weight: 800 !important;
    color: #222 !important;
}

.tour-content {
    font-size: 1.15rem;
    line-height: 1.8;
}

/* Custom Lists: Checks & Crosses */
.tour-custom-list ul {
    list-style: none !important;
    padding-left: 0 !important;
}

.tour-custom-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.list-check li::before {
    content: "\F272";
    /* bi-check-lg */
    font-family: Bootstrap-icons;
    position: absolute;
    left: 0;
    color: #198754;
    font-weight: bold;
    font-size: 1.2rem;
}

.list-cross li::before {
    content: "\F62A";
    /* bi-x-lg */
    font-family: Bootstrap-icons;
    position: absolute;
    left: 0;
    color: #dc3545;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Itinerary Accordion */
#itineraryAccordion .accordion-button {
    box-shadow: none;
    background-color: transparent;
    color: #333;
    font-size: 1.25rem;
    transition: color 0.3s;
}

#itineraryAccordion .accordion-button:not(.collapsed) {
    background-color: #fcfcfc;
    color: #FBBD42;
}

#itineraryAccordion .accordion-item {
    transition: border-color 0.3s, box-shadow 0.3s;
}

#itineraryAccordion .accordion-item:hover {
    border-color: #FBBD42 !important;
}

/* Sidebar Refinements */
.tour-sidebar .card {
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
}

.tour-sidebar h2 {
    font-size: 2.5rem !important;
    font-weight: 800;
}

.tour-sidebar .price-amount {
    font-size: 2.2rem;
    color: #FBBD42;
    line-height: 1;
}

.tour-sidebar .price-amount small {
    font-size: 1.2rem !important;
    color: #FBBD42;
    letter-spacing: -2px;
    margin-bottom: 5px;
    font-weight: 800;
    text-align: center;
}

.tour-sidebar .price-amount ins {
    text-decoration: none;
}

.tour-sidebar .price-amount .woocommerce-Price-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    justify-content: center;
}

.tour-sidebar .price-amount del {
    font-size: 1.6rem;
    color: #bbb;
    display: block;
    margin-bottom: -12px;
    font-weight: 400;
}

.tour-sidebar .price-amount .woocommerce-Price-currencySymbol {
    font-size: 1.4rem;
    color: #333;
    font-weight: 600;
    margin-right: 3px;
}

.booking-shortcode-wrapper .fw-bold {
    color: #FBBD42 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
}

/* --- Mobile UX Enhancements --- */
.custom-scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.custom-scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

/* Scrollable Nav Pills */
#tour-nav {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

#tour-nav .nav-link {
    white-space: nowrap;
    border: 1px solid #eee;
}

#tour-nav .nav-link.active {
    background-color: #FBBD42 !important;
    border-color: #FBBD42 !important;
    color: #222 !important;
}

/* Sticky Mobile Booking Bar */
.mobile-sticky-booking {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 2000 !important;
}

.mobile-sticky-booking h5 {
    color: #222;
}

.mobile-sticky-booking .btn-primary {
    background-color: #FBBD42 !important;
    border-color: #FBBD42 !important;
    color: #222 !important;
}

@media (max-width: 767.98px) {

    /* Padding only on tour pages to avoid content hidden under sticky bar */
    .single-product {
        padding-bottom: 85px !important;
    }
}

/* --- Variable Product Styles (Sidebar) --- */
.tour-sidebar .variations {
    width: 100%;
    margin-bottom: 20px;
}

.tour-sidebar .variations td {
    display: block;
    padding: 0;
}

.tour-sidebar .variations .label {
    margin-bottom: 8px;
}

.tour-sidebar .variations label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #444;
    letter-spacing: 0.5px;
}

.tour-sidebar .variations select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background-color: #fcfcfc;
    font-size: 1rem;
    color: #333;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.tour-sidebar .variations select:focus {
    border-color: #FBBD42;
    box-shadow: 0 0 0 3px rgba(251, 189, 66, 0.1);
    outline: none;
}

.tour-sidebar .single_variation_wrap {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.tour-sidebar .woocommerce-variation-price {
    margin-bottom: 15px;
}

.tour-sidebar .woocommerce-variation-price .price {
    font-size: 2.2rem;
    color: #FBBD42;
    font-weight: 800;
    line-height: 1;
    display: block;
    text-align: center;
}

.tour-sidebar .woocommerce-variation-description {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    font-style: italic;
}

.tour-sidebar .reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #999;
    text-decoration: none;
}

.tour-sidebar .reset_variations:hover {
    color: #dc3545;
}

/* Hide Default WooCommerce Quantity in Sidebar */
.tour-sidebar .quantity,
.tour-sidebar .quantity-button,
.tour-sidebar .qty {
    display: none !important;
}

/* --- Traveler Selector Styles --- */
.traveler-item h6 {
    font-size: 1rem;
    color: #222;
}

.quantity-control {
    border: 1px solid var(--border-color) !important;
    min-width: 120px;
    justify-content: space-between;
}

.quantity-control .btn-light {
    background-color: #fff;
    border: none;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
}

.quantity-control .btn-light:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.quantity-control .count {
    font-size: 0.95rem;
    color: var(--secondary-color);
    font-weight: 700;
}

.traveler-item:hover {
    background-color: rgba(251, 189, 66, 0.05);
}

.custom-radio-card {
    cursor: pointer;
}

.custom-radio-card label {
    cursor: pointer;
    margin-bottom: 0;
}

/* Dark Mode Component Overrides */
.dark-mode .card,
.dark-mode .tour-horizontal-card,
.dark-mode .destination-card,
.dark-mode .cta-contact-box {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .text-dark,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode .card-title a,
.dark-mode .nav-link {
    color: #ffffff !important;
}

.dark-mode .text-muted,
.dark-mode .text-secondary {
    color: #aaaaaa !important;
}

.dark-mode .bg-light {
    background-color: var(--light-bg) !important;
}

.dark-mode .border,
.dark-mode .border-top,
.dark-mode .border-bottom {
    border-color: var(--border-color) !important;
}

/* Dark Mode Toggle Switch */
.dark-mode-toggle {
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 50px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    user-select: none;
    font-weight: 700;
    font-size: 0.8rem;
    margin-left: 15px;
    color: var(--text-color);
}

.dark-mode-toggle:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.dark-mode-toggle .bi-sun-fill {
    display: none;
}

.dark-mode-toggle .bi-moon-stars-fill {
    display: block;
}

.dark-mode .dark-mode-toggle .bi-sun-fill {
    display: block;
}

.dark-mode .dark-mode-toggle .bi-moon-stars-fill {
    display: none;
}

.dark-mode .dark-mode-toggle {
    color: #fff;
}

/* Logo switching for dark mode */
.site-logo-dark {
    display: none;
}

.dark-mode .site-logo-light {
    display: none !important;
}

.dark-mode .site-logo-dark {
    display: inline !important;
}


.dark-mode .navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary-color);
}

.dark-mode .bg-white {
    background-color: var(--bg-color) !important;
}

/* Dark Mode Form/Input Adjustments */
.dark-mode input:not([type="submit"]):not([type="button"]),
.dark-mode textarea,
.dark-mode select {
    background-color: #2a2a2a !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #888888 !important;
}

/* Dark Mode General Overrides */
.dark-mode .navbar-toggler {
    filter: invert(1);
}

.dark-mode .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .dropdown-item {
    color: var(--heading-color);
}

.dark-mode .dropdown-item:hover {
    background-color: var(--light-bg);
}

/* Buttons in Dark Mode */
.dark-mode .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #121212;
    /* Dark text on yellow button for better contrast */
}

.dark-mode .btn-success {
    background-color: var(--whatsapp-color);
    border-color: var(--whatsapp-color);
    color: #ffffff;
}

.dark-mode .btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.dark-mode .btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: #121212;
}

.dark-mode .btn-outline-dark {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.dark-mode .btn-outline-dark:hover {
    background-color: #ffffff !important;
    color: #121212 !important;
}

/* Ensure icons are light in dark mode if needed */
.dark-mode .bi:not(.text-primary):not(.text-success):not(.text-warning) {
    color: var(--heading-color);
}

/* Modal/Offcanvas */
.dark-mode .modal-content,
.dark-mode .offcanvas {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-mode .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Special sections */
.dark-mode .cta-contact-box {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

.dark-mode .bg-light {
    background-color: #1a1a1a !important;
}

.dark-mode .card-body {
    background-color: transparent !important;
}

/* Dark Mode Traveler Selector Fix */
.dark-mode .traveler-selector-wrapper .quantity-control {
    background-color: #2a2a2a !important;
    border-color: #444444 !important;
}

.dark-mode .traveler-selector-wrapper .btn-light {
    background-color: #333333 !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

.dark-mode .traveler-selector-wrapper .btn-light:hover {
    background-color: var(--primary-color) !important;
    color: #1a1a1a !important;
}

.dark-mode .traveler-selector-wrapper .count {
    color: #ffffff !important;
}

.dark-mode .traveler-selector-wrapper label,
.dark-mode .traveler-selector-wrapper h6 {
    color: #ffffff !important;
}

.dark-mode .traveler-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dark Mode Title Fix */
.dark-mode h1.text-dark,
.dark-mode h2.text-dark,
.dark-mode h3.text-dark {
    color: var(--heading-color) !important;
}


/* Estilos modernos y compactos para formularios */
.custom-contact-form .form-label {
    font-size: 14px;
    color: #222;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.custom-contact-form .form-control,
.custom-contact-form select.form-control {
    font-size: 14px;
    border-radius: 0.7rem;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.2rem;
    transition: border-color 0.2s;
}

.custom-contact-form .form-control:focus,
.custom-contact-form select.form-control:focus {
    border-color: #007bff;
    outline: none;
}

.custom-contact-form .row {
    row-gap: 0.4rem;
}

@media (max-width: 575.98px) {

    .custom-contact-form .form-label,
    .custom-contact-form .form-control,
    .custom-contact-form select.form-control {
        font-size: 13px;
        padding: 0.45rem 0.7rem;
    }
}

/* Dark mode para custom-contact-form */
.dark-mode .custom-contact-form .form-label {
    color: #eee;
}

.dark-mode .custom-contact-form .form-control,
.dark-mode .custom-contact-form select.form-control {
    background-color: #2a2a2a !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

.dark-mode .custom-contact-form .form-control::placeholder,
.dark-mode .custom-contact-form select.form-control::placeholder {
    color: #888888 !important;
}


.dark-mode .related-tours-section {
    background-color: #181818 !important;
}

.dark-mode .wa-message-bg {
    background-color: #232323 !important;
    color: #fff !important;
}

/* --- Página 404 --- */
.page-404 h1 {
    font-size: 6rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.page-404 h2 {
    font-size: 2rem;
    color: var(--heading-color);
    margin-bottom: 1rem;
}

.page-404 p.lead {
    font-size: 1.25rem;
    color: var(--text-color);
    margin-bottom: 2rem;
}

.page-404 img {
    max-width: 320px;
    width: 100%;
    margin-top: 2rem;
}

.page-404 .btn-primary {
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
    border-radius: 50px;
}

@media (max-width: 575.98px) {
    .page-404 h1 {
        font-size: 3.5rem;
    }

    .page-404 h2 {
        font-size: 1.3rem;
    }

    .page-404 img {
        max-width: 200px;
    }
}

/* Dark mode para página 404 */
.dark-mode .page-404 h1 {
    color: #fff;
    text-shadow: 0 2px 10px #FBBD42;
}

.dark-mode .page-404 h2,
.dark-mode .page-404 p.lead {
    color: #eee;
}

.dark-mode .page-404 img {
    filter: brightness(0.9) drop-shadow(0 0 10px #FBBD42);
}

/* =========================================
   MEGA MENU CUSTOM STYLES
   ========================================= */

/* Column Titles (Cyan/Blue) */
.mega-column-title {
    color: #00bfe7;
    /* Cyan/Blue to match reference */
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--font-heading);
    letter-spacing: -0.5px;
    margin-bottom: 1rem !important;
}

/* Ensure the link wrapping the title doesn't override the color */
.dropdown-menu a .mega-column-title {
    text-decoration: none;
}

.dropdown-menu a:hover .mega-column-title {
    color: var(--primary-color) !important;
    /* Gold on hover */
}

/* List Items (Tours) inside Columns */
.navbar .nav-item.mega-menu .dropdown-menu .col-lg ul li,
.navbar .nav-item.mega-menu .dropdown-menu .col-md-6 ul li,
.navbar .nav-item.mega-menu .dropdown-menu .col-12 ul li {
    margin-bottom: 15px;
    /* Spacing between items */
}

.navbar .nav-item.mega-menu .dropdown-menu li li a {
    color: #444;
    font-size: 1rem;
    padding: 0;
    display: inline-block;
    /* Allow badge to sit next to it nicely */
    font-weight: 500;
    text-transform: none !important;
    /* Override standard nav uppercase */
    transition: all 0.2s;
    line-height: 1.4;
}

.navbar .nav-item.mega-menu .dropdown-menu li li a:hover {
    color: var(--primary-color) !important;
    transform: translateX(5px);
}

/* Badge 'New' Style */
.badge.bg-warning {
    background-color: #FBBD42 !important;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    letter-spacing: 0.5px;
    padding: 0.35em 0.65em;
    vertical-align: text-top;
    margin-left: 8px;
    box-shadow: 0 2px 5px rgba(251, 189, 66, 0.4);
}

/* =========================================
   MEGA MENU COLUMNS (CSS3 Multi-column Layout)
   ========================================= */

.mega-menu-columns {
    column-count: 3;
    column-gap: 2rem;
    display: block !important;
    padding-top: 1.5rem !important;
}

/* Tablet: 2 Columns */
@media (max-width: 991px) {
    .mega-menu-columns {
        column-count: 2;
    }
}

/* Mobile: 1 Column */
@media (max-width: 576px) {
    .mega-menu-columns {
        column-count: 1;
    }
}

/* The Column Container (e.g. Cusco, Arequipa) */
.mega-menu-item {
    break-inside: avoid;
    /* Prevent splitting the block across columns */
    page-break-inside: avoid;
    display: inline-block;
    /* Helps browser calculation */
    width: 100%;
    margin-bottom: 2rem;
    vertical-align: top;
}

.mega-menu-item ul {
    padding-left: 0;
    list-style: none;
}


/* =========================================
   MEGA MENU GRID (Bootstrap Row/Col with Dividers)
   ========================================= */

/* Vertical Dividers between columns */
/* Add border to the right of items */
@media (min-width: 992px) {
    .mega-menu-col-item {
        border-right: 1px solid #e5e5e5;
    }

    /* Remove border from the last item in each "row" of 3 */
    .mega-menu-col-item:nth-child(3n) {
        border-right: none;
    }

    /* Also ensure the very last item never has a border visually if it wraps oddly */
    .mega-menu-col-item:last-child {
        border-right: none;
    }
}

/* Ensure padding for visual separation from the border */
.mega-menu-col-item {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
    /* Balanced padding */
}

/* Fix first item padding to align left */
.mega-menu-col-item:nth-child(3n+1) {
    padding-left: 1rem !important;
    /* Less padding on the far left items? Or keep uniform? Reference shows aligned left. Bootstrap row has margins. */
    /* Let's stick to uniform for now or minimal left padding for first item */
}

/* Remove default list styling inside the columns */
.mega-menu-col-item ul {
    padding-left: 0;
    list-style: none;
}


/* =========================================
   MOBILE ACCORDION / COLLAPSE SUPPORT
   ========================================= */

/* Desktop: Always show the content (DISABLE collapse behavior) */
@media (min-width: 992px) {
    .navbar .nav-item.mega-menu .dropdown-menu .collapse {
        display: block !important;
        /* Force visible */
        height: auto !important;
        visibility: visible !important;
    }

    /* Hide the mobile chevron on desktop */
    .mega-menu-column-header::after {
        display: none !important;
    }

    /* Disable pointer events on header if text only desired? 
       Actually, keep it clickable if it links somewhere, but disable toggle behavior via JS override or just ignore since display block overrides it.
       The data-bs-toggle might still toggle classes, but display:block!important wins.
    */
}

/* Mobile: Style the Toggle */
@media (max-width: 991px) {
    .mega-menu-column-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    /* Chevron Icon */
    .mega-menu-column-header::after {
        content: "\f282";
        /* Bootstrap Icons: chevron-down */
        font-family: bootstrap-icons !important;
        margin-left: auto;
        transition: transform 0.3s ease;
        font-size: 0.8em;
    }

    /* Rotate on Expand */
    .mega-menu-column-header[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
}

/* =========================================
   MOBILE MENU EXTRAS (Thumbnails & Socials)
   ========================================= */

/* Thumbnails in Mega Menu Headers */
.mega-menu-thumb {
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.mega-menu-column-header:hover .mega-menu-thumb {
    transform: scale(1.1);
}

/* Mobile Social Icons */
.social-icon-mobile {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.social-icon-mobile:hover {
    background-color: var(--primary-color);
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}