/*
Theme Name: Golden Star Divers
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 
*/


/* 
    water-effect
*/

/* ===== SLIDE CONTAINER ===== */
.elementor-element-d2ff78c .swiper-slide {
    position: relative;
    overflow: hidden;
}

/* ===== IMAGE = COVER ===== */
.elementor-element-d2ff78c .swiper-slide-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;

    transform: scale(1);
    transition: transform 18s ease-out;
    will-change: transform;
}

/* ===== ACTIVE ZOOM ===== */
.elementor-element-d2ff78c .swiper-slide-active .swiper-slide-image {
    transform: scale(1.2);
}

/* ===== WATER CANVAS ===== */
.water-shader-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* ===== CONTENT ABOVE ===== */
.elementor-element-d2ff78c .elementor-swiper-button {
    z-index: 10;
}

/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {
    .elementor-element-d2ff78c .swiper-slide-image {
        height: 100vh;
        object-fit: cover;
    }
}




/* Gtranslate*/
/* Glink */
.header .elementor .glink{
	color:#ffffff;
}

/* Glink */
.gtranslate_wrapper div .glink{
	color:#12378b !important;
}

/* Input */
.gtranslate_wrapper div input[type=search]{
	height:30px;
	background-color:#fafbfe;
}

/* Svg */
.gtranslate_wrapper div svg{
	color:#f36506;
}

/* Division */
.gtranslate_wrapper > div{
	border-top-left-radius:12px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	
}

/* 479px and smaller screen sizes */
@media (max-width:479px){

	/* Glink */
	.header .elementor .glink{
		color:#f7f7f7;
		position:relative;
		top:-66px;
		left:-62px;
	}
	
	/* Glink */
	.gtranslate_wrapper div .glink{
		color:#042c47 !important;
		top:8px !important;
		left:-1px !important;
	}
	
	/* Division */
	.gtranslate_wrapper > div{
		border-top-left-radius:12px;
		border-top-right-radius:12px;
		border-bottom-left-radius:12px;
		border-bottom-right-radius:12px;
	}
	
	/* Input */
	.gtranslate_wrapper div input[type=search]{
		height:30px;
		background-color:#f6f7fd;
	}
	
	/* Svg */
	.gtranslate_wrapper div svg{
		color:#ea790e;
		font-weight:400;
		height:28px;
	}
	
	/* Svg */
	.header .elementor .elementor-element .elementor-element .elementor-element .elementor-widget-text-editor .gtranslate_wrapper div div svg{
		width:25px !important;
	}
	
}








/* Logo shape */


/* ============================================
   BASE STYLES
   ============================================ */

/* Prevent layout breaking */
body {
    overflow-x: hidden;
}

.site-main {
    position: relative;
    z-index: 2;
}

/* Breadcrumb Area */
.tg-breadcrumb-area {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-bottom: -50px;
}

.tg-breadcrumb-shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
    box-shadow: 0px 50px 50px 11px #353844 inset;
}

.tg-breadcrumb-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.tg-breadcrumb-title {
    color: #fff;
    font-size: 42px;
    font-weight: 700;
}

/* ============================================
   TOUR DETAILS AREA
   ============================================ */

div .tg-tour-details-area {
    position: relative;
    z-index: 1;
    top: -49px;
}

.trip-content-area {
    padding-top: 2px;
    position: relative;
    top: -41px;
}

#primary {
    position: relative;
    top: -79px;
}

#secondary {
    position: relative;
    top: -53px;
}

/* ============================================
   GALLERY
   ============================================ */

.wpte-gallery-wrapper .wpte-multi-banner-image {
    border-radius: 12px;
    border: 1px solid #ffffff;
    border-top-width: 6px;
    border-top-color: #fecc43;
    box-shadow: -3px 0px 8px 3px rgba(5,16,81,0.36);
    margin-bottom: 15px;
}

.wpte-gallery-wrapper__multi-banners .wpte-gallery-wrapper .wpte-multi-banner-layout {
    position: relative;
}

.wpte-gallery-wrapper .wp-travel-engine-image-gal-popup a {
    visibility: hidden;
}

/* ============================================
   HEADINGS & TITLES
   ============================================ */

.hentry .entry-header h2 {
    visibility: hidden;
}

.delay_me .post-data .wpte-overview-title,
.delay_me .nb-configurations h3,
.wte-itinerary-header-wrapper .wp-travel-engine-itinerary-header h2,
.delay_me .post-data .wpte-cost-tab-title,
.trip-content-area .wte-related-trips-wrapper .wte-related-trips__heading {
    color: #051756;
}

/* ============================================
   TRIP FACTS
   ============================================ */

.hentry .secondary-trip-info .wte-trip-facts {
    padding-top: 9px;
    margin-bottom: 8px;
    background-color: #e2e4f2;
    border-radius: 11px 11px 0 0;
}

.hentry li .icon-holder {
    background-color: transparent;
}

.hentry li label {
    color: #0b2c79;
}

.hentry li .value {
    color: #098207 !important;
}

/* ============================================
   DURATION & DAYS
   ============================================ */

.entry-header .wte-title-duration .duration {
    background-color: #3a62f2;
    position: relative;
}

.entry-header .wte-title-duration .days {
    color: #098021;
    font-weight: 500;
    background-color: #edfa5f;
}

/* ============================================
   ITINERARY
   ============================================ */

.delay_me .active .itinerary-content {
    background-color: #f8f8fb;
    padding-left: 10px;
    padding-right: 10px;
}

.delay_me .active .itinerary-title {
    color: #2980b9 !important;
}

/* ============================================
   FAQ & MISC
   ============================================ */

.delay_me .post-data .faq-row {
    background-color: #e7fce7;
}

.tg-tour-details-area .tg-tour-details-video-share {
    visibility: hidden;
    height: 0;
}

/* Location styling */
.tg-tour-details-video-title-wrap .tg-tour-details-video-location span {
    position: relative;
    color: #07116e;
    font-size: 23px;
}

.tg-tour-details-video-location span i {
    color: #0f9d2c;
    font-size: 20px;
}

/* ============================================
   BOOKING BUTTON
   ============================================ */

.custom-btn-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
}

.custom-btn-center .wpte-bf-btn {
    display: inline-block;
    margin: 0 auto;
}

.wpte-bf-btn {
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .wpte-bf-btn:hover {
        transform: translateY(-2px);
        opacity: 0.9;
    }
}

@media (hover: none) {
    .wpte-bf-btn:active {
        transform: scale(0.97);
        opacity: 0.85;
    }
}

/* ============================================
   RESPONSIVE: TABLET & UP (768px+)
   ============================================ */

@media (min-width: 768px) {
    .hentry .entry-header .wte-title-duration {
        top: 16px;
    }
    
    .delay_me .post-data .faq-row {
        padding-bottom: 6px;
        padding-top: 11px;
    }
}

/* ============================================
   RESPONSIVE: DESKTOP (1200px+)
   ============================================ */

@media (min-width: 1200px) {
    div .tg-tour-details-area {
        padding-top: 0;
    }
}

/* ============================================
   RESPONSIVE: MOBILE (767px and below)
   ============================================ */

@media (max-width: 767px) {
    /* Main fix: disable unstable layout shift */
    body > div:nth-child(3) {
        top: 0 !important;
        transform: none !important;
    }

    /* Prevent scroll locking issues */
    html, body {
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce aggressive overlap */
    .tg-breadcrumb-area {
        margin-bottom: -20px !important;
    }
}

/* ============================================
   RESPONSIVE: SMALL MOBILE (479px and below)
   ============================================ */

@media (max-width: 479px) {
    /* Breadcrumb area */
    .tg-breadcrumb-area {
        top: -90px;
        margin-bottom: -20px !important;
    }

    /* Tour details area */
    div .tg-tour-details-area {
        padding-top: 0;
        top: -144px;
    }

    /* Wte title duration */
    .hentry .entry-header .wte-title-duration {
        position: relative;
        top: 12px;
    }

    /* Location text */
    .tg-tour-details-video-title-wrap .tg-tour-details-video-location span {
        left: 140px;
        bottom: -29px;
        font-size: 19px;
        font-weight: 500;
    }

    /* Entry Header */
    .site-main .hentry header {
        margin-top: -50px;
    }

    /* Location icon */
    .tg-tour-details-video-location span i {
        color: #076e08;
        font-size: 24px;
    }
}

/* ============================================
   RESPONSIVE: TINY MOBILE (450px and below)
   ============================================ */

@media (max-width: 450px) {
    body > div:nth-child(3) {
        top: -43px;
    }
}






/* ============================================
   FORCE MULTI-BANNER GALLERY ON ALL SCREENS
   ============================================ */

/* Override WPTE mobile slider — force grid layout */
@media (max-width: 767px) {
    
    /* Hide the mobile slider that WPTE injects */
    .wpte-gallery-wrapper .wpte-mobile-banner-slider,
    .wpte-gallery-wrapper .slick-slider,
    .wpte-gallery-wrapper .swiper-container {
        display: none !important;
    }
    
    /* Force the multi-banner layout to show */
    .wpte-gallery-wrapper__multi-banners,
    .wpte-gallery-wrapper .wpte-multi-banner-layout {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Each banner image sizing */
    .wpte-gallery-wrapper .wpte-multi-banner-image {
        flex: 0 0 auto;
        width: 80px;          /* Adjust based on your design */
        height: 120px;        /* Adjust based on your design */
        min-width: 80px;
        border-radius: 8px;
        object-fit: cover;
    }
    
    /* Hide the "Gallery" popup link on mobile */
    .wpte-gallery-wrapper .wp-travel-engine-image-gal-popup {
        display: none;
    }
}

/* ============================================
   SMALL MOBILE TWEAKS (479px and below)
   ============================================ */

@media (max-width: 479px) {
    
    .wpte-gallery-wrapper__multi-banners,
    .wpte-gallery-wrapper .wpte-multi-banner-layout {
        gap: 6px;
    }
    
    .wpte-gallery-wrapper .wpte-multi-banner-image {
        width: 65px;          /* Slightly smaller for tiny screens */
        height: 100px;
        min-width: 65px;
    }
}

/* ============================================
   AGGRESSIVE MOBILE GALLERY FIX
   ============================================ */

@media (max-width: 767px) {
    
    /* --- STEP 1: Kill ANY slider/swiper on mobile --- */
    .wpte-gallery-wrapper .slick-slider,
    .wpte-gallery-wrapper .swiper,
    .wpte-gallery-wrapper .swiper-container,
    .wpte-gallery-wrapper [class*="slider"],
    .wpte-gallery-wrapper [class*="swiper"],
    .wpte-gallery-wrapper [class*="carousel"] {
        display: none !important;
    }
    
    /* --- STEP 2: Force multi-banner container visible --- */
    .wpte-gallery-wrapper__multi-banners,
    .wpte-gallery-wrapper .wpte-multi-banner-layout,
    .wpte-gallery-wrapper [class*="multi-banner"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    /* --- STEP 3: Force each image visible --- */
    .wpte-gallery-wrapper .wpte-multi-banner-image,
    .wpte-gallery-wrapper [class*="banner-image"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 auto;
        width: 75px;
        height: 110px;
        min-width: 75px;
        border-radius: 8px;
        object-fit: cover;
        border: 2px solid #fecc43;
    }
    
    /* --- STEP 4: Hide popup links --- */
    .wpte-gallery-wrapper .wp-travel-engine-image-gal-popup,
    .wpte-gallery-wrapper [class*="popup"] {
        display: none !important;
    }
    
    /* --- STEP 5: Fix parent container --- */
    .wpte-gallery-wrapper {
        display: block !important;
        width: 100%;
        overflow: hidden;
    }
}









/* H*/
/* Paragraph */
.delay_me .post-data p{
	
}

/* 400px and smaller screen sizes */
@media (max-width:400px){

	/* Primary */
	#primary{
		margin-top:-50px;
		top:-100px;
	}
	
	/* Column 8/12 */
	.tg-tour-details-area .col-xl-9{
		position:relative;
		top:-5px;
	}
	
	/* Entry Header */
	.site-main .hentry header{
		top:-37px;
	}
	
	/* Trip content area */
	div .trip-content-area{
		top:-37px;
	}
	
	/* Wte trip facts */
	.hentry .secondary-trip-info .wte-trip-facts{
		margin-top:-34px;
	}
	
}