/*
Theme Name: Travil
Theme URI: https://modinatheme.com/travil
Author: Modinatheme
Author URI: https://themeforest.net/user/modinatheme
Description: Travel & Tour Booking WordPress Theme
Version: 1.2.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: travil
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*extra css */
#wp-travel-trip-wrapper {
    padding: 120px 0;
}

/* This targets the search bar more aggressively */
body #wte_search, 
input#wte_search[type="search"] {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Forces the placeholder to a visible grey */
#wte_search::-webkit-input-placeholder { color: #666666 !important; }
#wte_search::-moz-placeholder { color: #666666 !important; }
#wte_search:-ms-input-placeholder { color: #666666 !important; }
#wte_search::placeholder { color: #666666 !important; }

/* Fix for Search Dropdown Z-Index */
.wpte__select-options {
    position: absolute !important;
    z-index: 9999 !important;
    display: block; /* Ensures it stays visible when triggered */
}

/* Elevate the parent container just in case */
.wpte__select-wrapper, .wpte__search-bar {
    position: relative !important;
    z-index: 999 !important;
}

.theme-btn {
    display: none !important;
}

/* 1. Hide the Instagram icon and link completely */
.instagram-image a.icon {
    display: none !important;
}

/* 2. Prepare the container for the hover effect */
.instagram-image {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* 3. Create the Orange Hover Overlay */
.instagram-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 165, 0, 0.6); /* Orange with 60% transparency */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Allows clicks to pass through if needed */
}

/* 4. Show overlay on hover */
.instagram-image:hover::after {
    opacity: 1;
}

/* Optional: Add a slight zoom effect to the image on hover */
.instagram-image img {
    transition: transform 0.3s ease;
    display: block;
    width: 100%;
}

.instagram-image:hover img {
    transform: scale(1.05);
}