/*
Theme Name:     Traveler Child Theme for waverick.com
Description:    Custom styles for waverick.com surf camp booking
Theme URI:      https://waverick.com/
Author:         Waverick
Version:        2.1
Template:       traveler

TABLE OF CONTENTS:
==================
0.  CSS Variables (Global)
1.  Banner Backgrounds (LCP optimized - uses body class selectors)
2.  Header Icons & Gallery Navigation (Global)
3.  Location Search Input (Global - homepage + search pages)
4.  Hidden Elements (Global)
5.  Header Transparency (Global)
6.  Layout & Media Adjustments (Global)
7.  Navigation & Miscellaneous (Global)
8.  Password Reset Modal (Global)

CONDITIONAL CSS (separate files):
- booking.css → Hotels, Rooms, Tours (is_singular st_hotel/hotel_room/st_tours)
- cart-checkout.css → Cart, Checkout, Order (is_cart/is_checkout/order-received)
*/

/* ========================================
   0a. ELEMENTOR INLINE SVG ICON FIX
   FA7 webfont mode triggers Elementor SVG output but provides no
   sizing rules. Without this, SVGs render at natural viewBox size
   (~448x512px) creating huge gray rectangles.
   ======================================== */

.e-font-icon-svg,
.elementor-icon-list-icon svg {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	fill: currentColor;
}

/* ========================================
   0. WAVERICK GLOBAL CSS VARIABLES
   Override parent theme's blue colors with orange
   ======================================== */

:root {
	/* Brand colors */
	--main-color: #FF8C00;
	--link-color: #FF8C00;
	--link-color-hover: rgba(255, 140, 0, 0.9);
	/* Premium checkout/cart design palette */
	--wv-orange: #D97706;
	--wv-orange-dark: #B45309;
	--wv-navy: #0B1F3B;
	--wv-navy-soft: #122845;
	--wv-text: #1F2937;
	--wv-text-light: #374151;
	--wv-muted: #64748B;
	--wv-muted-light: #94A3B8;
	--wv-border: #E8EEF6;
	--wv-border-light: #F1F5F9;
	--wv-bg-page: #F6F9FC;
	--wv-bg-card: #FFFFFF;
	--wv-bg-panel: #F1F6FF;
	--wv-white: #FFFFFF;
	--wv-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
	--wv-radius: 14px;
	--wv-radius-sm: 10px;
	/* Status colors */
	--wv-success: #059669;
	--wv-error: #DC2626;
	/* Animation */
	--wv-transition: 0.2s ease;
}

/* ========================================
   1. BANNER BACKGROUNDS - Static for fast LCP
   Works with preload in functions.php
   ======================================== */

/* Shared banner base (all banners inherit these) */
body.single-st_hotel .banner,
body.single-hotel_room .banner,
body.single-st_tours .banner,
body.page-template-template-hotel-search .banner,
body.post-type-archive-st_hotel .banner,
body.woocommerce-cart .banner.st-bg-feature,
body.woocommerce-checkout .banner.st-bg-feature,
body.postid-11485 .banner.st-bg-feature {
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/* Surf Camps & Rooms */
body.single-st_hotel .banner,
body.single-hotel_room .banner {
	background-image: url(https://www.waverick.com/wp-content/uploads/2023/10/Surf-camp-1.webp) !important;
	background-position: top center !important;
}

/* Tours/Experiences */
body.single-st_tours .banner {
	background-image: url(https://www.waverick.com/wp-content/uploads/2025/12/Waverick-Surfer-and-kitesurfer.webp) !important;
	background-position: center center !important;
}

/* Search Results */
body.page-template-template-hotel-search .banner,
body.post-type-archive-st_hotel .banner {
	background-image: url(https://www.waverick.com/wp-content/uploads/2025/11/IMG_6570.webp) !important;
	background-position: top center !important;
}

/* Cart & Checkout */
body.woocommerce-cart .banner.st-bg-feature,
body.woocommerce-checkout .banner.st-bg-feature {
	background-image: url(https://www.waverick.com/wp-content/uploads/2023/10/checkout-cart.webp) !important;
	background-position: center center !important;
}

/* Blog Posts (specific) */
body.postid-11485 .banner.st-bg-feature {
	background-image: url(https://www.waverick.com/wp-content/uploads/2023/10/Surf-camp-1.webp) !important;
	background-position: center bottom !important;
}

/* ========================================
   2. HEADER ICONS - Cart & User Account
   Modern minimal: no circles, color-adaptive
   ======================================== */

/* Strip parent's white circle backgrounds on all viewports */
.header__right .items .mini-cart,
.header__right .items .dropdown-account,
.header__right .items .dropdown.dropdown-minicart .dropdown-toggle,
.header__right .items .dropdown-user-dashboard .dropdown-toggle {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Icon base: consistent size + smooth transitions
   .fas = FA5 legacy, .fa-solid = FA6 naming, .stt-icon = Traveler custom font */
.header__right .items .fas,
.header__right .items .fa-solid,
.header__right .items .stt-icon {
	font-size: 20px;
	transition: color 0.3s ease, opacity 0.2s ease;
}

/* Desktop (≥992px): White icons on navy/transparent header */
@media (min-width: 992px) {
	.header__right .items .fas,
	.header__right .items .fa-solid,
	.header__right .items .stt-icon {
		color: #fff !important;
	}

	.header__right .items .fas:hover,
	.header__right .items .fa-solid:hover,
	.header__right .items .stt-icon:hover {
		opacity: 0.75;
	}
}

/* Mobile (≤991px): White on transparent top, dark on scroll/menu-open */
@media (max-width: 991px) {
	.header__right .items .fas,
	.header__right .items .fa-solid,
	.header__right .items .stt-icon {
		color: #fff !important;
		font-size: 22px !important;
		transition: color 0.3s ease;
	}

	.header.wv-scrolled .header__right .items :is(.fas, .fa-solid, .stt-icon),
	.header.wv-menu-active .header__right .items :is(.fas, .fa-solid, .stt-icon) {
		color: #1a1a2e !important;
	}
}

/* Login/Register Modal - Push down so close button is accessible */
#st-login-form .modal-dialog {
    margin-top: 100px !important;
}

/* ========================================
   HOTEL CARD RATING - Used on search results + single pages
   ======================================== */

.st-review-box-card {
	gap: 8px;
	margin-bottom: 12px;
}

.st-review-box-card .stt-icon-star1 {
	color: #ffa726;
	font-size: 18px;
}

.st-review-box-card .review-score {
	font-size: 16px;
	font-weight: 600;
	color: #1a2b48;
	line-height: 1;
}

.st-review-box-card .review-score-base {
	font-size: 14px;
	color: #5E6D77;
	line-height: 1;
}

.st-review-box-card .review-score-base span {
	color: #5E6D77;
}

/* ========================================
   VISITOR COUNTER - Used on search results + single pages
   ======================================== */

.st-view-counter {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #5E6D77;
	font-size: 13px;
	margin-right: 8px;
}

.st-view-counter .view-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.st-view-counter span {
	line-height: 1;
	white-space: nowrap;
}

.st-review-box-card .view-separator {
	color: #5E6D77;
	margin: 0 8px;
	font-size: 14px;
}

/* "New on Waverick" badge */
.st-new-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: #f0f4fa;
	border: 1px solid #d4dce8;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: #191970;
	white-space: nowrap;
}

.st-new-badge::before {
	content: '\2726';
	margin-right: 5px;
	font-size: 10px;
	color: #ee7f23;
}

.st-new-badge span {
	color: inherit;
}

/* Allow review row to wrap in narrow cards */
.st-review-box-card {
	flex-wrap: wrap;
}

/* ========================================
   SEARCH BAR - Shared styles across all page types
   ======================================== */

/* Daterangepicker & dropdown z-index */
.daterangepicker,
.daterangepicker.dropdown-menu {
	z-index: 999999 !important;
}

.search-form form .st-form-dropdown-icon {
	z-index: 1 !important;
}

/* --- Desktop pill (768px+) --- */
@media (min-width: 768px) {
	.waverick-single-page-search-bar .container {
		max-width: 1200px;
	}

	.waverick-single-page-search-bar .st-banner-search-form {
		position: relative;
		z-index: 10;
		background: #fff;
		border: 1px solid #DEDEDE !important;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		border-radius: 60px;
		padding: 12px;
	}

	.waverick-single-page-search-bar .st-search-form-el,
	.waverick-single-page-search-bar .search-form,
	.waverick-single-page-search-bar .border-right {
		border: none !important;
		box-shadow: none !important;
	}
}

/* --- Banner positioning (surf camps, rooms, tours) --- */
.banner.has-search-bar {
	position: relative;
	margin-bottom: 30px;
}

#st-content-wrapper .banner.has-search-bar {
	padding-bottom: 70px;
}

@media (max-width: 991px) {
	#st-content-wrapper .banner.has-search-bar {
		padding-bottom: 65px;
	}
}

.banner-search-bar-wrapper {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	width: 90%;
	max-width: 1200px;
	z-index: 10;
	pointer-events: auto;
}

@media (max-width: 767px) {
	.banner-search-bar-wrapper {
		width: calc(100% - 30px);
	}
}

/* --- Blog article positioning (Elementor hero) --- */
.blog-hero {
	position: relative;
	z-index: 1;
}

.blog-hero + .e-con {
	position: relative;
	z-index: 10;
}

@media (min-width: 768px) {
	.blog-hero + .e-con {
		margin-top: -33px;
	}
}

@media (max-width: 767px) {
	.blog-hero + .e-con {
		margin-top: -27px;
	}
}

.shortcode-search-bar-wrapper {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.shortcode-search-bar-wrapper {
		width: calc(100% - 30px);
	}
}

/* --- Mobile compact button + expanded overlay (<768px) --- */
@media (max-width: 767px) {
	.waverick-single-page-search-bar > .container {
		display: none;
	}

	/* Expanded form floats over content instead of pushing it down */
	.waverick-single-page-search-bar {
		position: relative;
	}

	.waverick-single-page-search-bar.expanded > .container {
		display: block !important;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 200;
		margin-top: 8px;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
		padding: 20px;
	}

	.waverick-mobile-search-compact .container {
		padding: 0 15px;
	}

	.waverick-search-compact-btn {
		width: 100%;
		background: #fff;
		border: 1px solid #DEDEDE;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		padding: 16px 20px;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.waverick-search-compact-btn:active {
		transform: scale(0.98);
	}

	.compact-search-icon {
		display: flex;
		align-items: center;
		padding-right: 10px;
		margin-right: 8px;
		border-right: 1px solid #E1E5EA;
		flex-shrink: 0;
	}

	.compact-search-icon i {
		font-size: 18px;
		color: #FF8C00;
	}

	.compact-search-items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		flex: 1;
		min-width: 0;
	}

	.compact-item {
		display: flex;
		align-items: center;
		gap: 6px;
		flex: 1;
		min-width: 0;
	}

	.compact-item i {
		font-size: 14px;
		color: #FF8C00;
		flex-shrink: 0;
	}

	.compact-label {
		font-size: 13px;
		font-weight: 500;
		color: #1A2B48;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.compact-separator {
		color: #E1E5EA;
		font-weight: 300;
		font-size: 16px;
		flex-shrink: 0;
	}
}

/* Mobile: Fix booking modal close button positioning */
@media (max-width: 768px) {
    /* Push modal content down to be visible below fixed header */
    .mfp-container .mfp-content {
        margin-top: 80px !important;
    }

    /* Position Magnific Popup close button below header - Premium Blue */
    button.mfp-close,
    .mfp-close {
        top: 85px !important;
        right: 15px !important;
        z-index: 999999 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(25, 25, 112, 0.15) !important;
        opacity: 1 !important;
        font-size: 28px !important;
        color: var(--heading-color, #191970) !important;
    }

    button.mfp-close:hover,
    .mfp-close:hover {
        background: var(--heading-color, #191970) !important;
        color: #ffffff !important;
    }

    /* Ensure the popup itself is scrollable if needed */
    .mfp-container {
        overflow-y: auto !important;
    }
}

/* ========================================
   3. GLOBAL FIX - Location Search Input Text Visibility
   ======================================== */

/* Fix text being cut off in location search inputs SITEWIDE */
input[name="location_name"],
#location_name_hotel,
#location_name_hotel_search,
#location_name_tours,
input[id^="location_name_"] {
	line-height: 1.5 !important;
	height: auto !important;
	min-height: 40px !important;
	padding: 8px 0 !important;
	font-size: 14px !important;
}

/* Ensure placeholder text is also properly visible globally */
input[name="location_name"]::placeholder,
#location_name_hotel::placeholder,
#location_name_hotel_search::placeholder,
#location_name_tours::placeholder,
input[id^="location_name_"]::placeholder {
	line-height: 1.5 !important;
	opacity: 0.6;
}

/* ========================================
   4. HIDDEN ELEMENTS - Remove unused UI elements
   ======================================== */

.sub-heading .map-view,         /* "View in a map" from hotel header */
.st-service-header2 .map-view,
.room-rates {                   /* Room rates in search results */
	display: none !important;
}

/* ========================================
   SCROLL TO TOP — Restyle parent's #gotop to match Waverick design
   Parent renders <div id="gotop"><i class="fa fa-chevron-up"></i></div>
   in footer.php. We override the dark square with a navy circle.
   Blog pages hide this via blog-article.css (#ba-btt replaces it).
   ======================================== */

#gotop {
	bottom: 24px !important;
	right: 24px !important;
	padding: 0 !important;
	width: 44px;
	height: 44px;
	border-radius: 50% !important;
	background: #191970 !important;
	/* Center icon via text-align + line-height (NOT display:flex !important,
	   which would override jQuery's inline display:none from fadeOut). */
	text-align: center;
	line-height: 44px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
	z-index: 9990 !important;
}

#gotop:hover {
	background: #FF8C00 !important;
}

#gotop i {
	font-size: 16px;
	line-height: inherit;
	color: #fff;
}

@media (max-width: 768px) {
	#gotop {
		bottom: 20px !important;
		right: 16px !important;
	}

	/* Hotel & Room pages: move above the sticky "Select Dates" booking bar */
	body.single-st_hotel #gotop,
	body.single-hotel_room #gotop {
		bottom: 80px !important;
	}
}

/* ========================================
   TOPBAR - Low z-index so menus & popups appear above it
   Only visible above regular text content
   ======================================== */
#topbar.style-elementor {
	position: relative;
	z-index: 1;
}

/* ========================================
   5. HEADER - Transparent top, Blue desktop, White mobile on scroll
   ======================================== */

/* --- 5a. CENTRALIZED CONTENT OFFSET SYSTEM ---
   The header is position:fixed on both mobile and desktop, so it's
   out of document flow. ALL content needs padding-top to clear it.
   --wv-header-h adapts per breakpoint (74px desktop, 82px mobile).
   This single system handles every page type: hotels, rooms, tours,
   locations, search, landing pages, blog, cart, checkout, 404. */

:root {
	--wv-header-h: 74px; /* Desktop — matches .header height */
}

@media (max-width: 991px) {
	:root {
		--wv-header-h: 82px; /* Mobile — matches .header min-height */
	}
}

/* All content wrappers get padding to clear the fixed header */
#st-content-wrapper,
.st-landing-page {
	padding-top: var(--wv-header-h);
}

/* Banners pull back up behind the transparent header (overlay effect).
   The negative margin cancels the wrapper's padding for the banner only,
   so the banner starts at position 0 (behind the header). */
#st-content-wrapper > .banner,
#st-content-wrapper > .divider + .banner {
	margin-top: calc(var(--wv-header-h) * -1);
}

/* --- 5b. MOBILE HEADER ---
   See waverick-header.css for mobile menu panel, hamburger, overlay. */
@media screen and (max-width: 991px) {
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 10px 15px;
		min-height: var(--wv-header-h);
		z-index: 9999;
		background: rgba(255, 255, 255, 0);
		transition: background 0.3s ease,
		            backdrop-filter 0.3s ease,
		            -webkit-backdrop-filter 0.3s ease,
		            box-shadow 0.3s ease;
		border-bottom: none !important;
		animation: none !important;
		display: flex !important;
		align-items: center !important;
	}

	/* Search pages: gap below search form before filter pills.
	   search-result-page is a class ON #st-content-wrapper, not body. */
	#st-content-wrapper.search-result-page > .st-bg-feature {
		padding-bottom: 40px;
	}

	#st-content-wrapper.st-style-elementor .st-fixed-form-booking .st-form-book-wrapper {
		padding-top: 88px !important;
	}

	#st-content-wrapper.st-style-elementor.singe-room-layout-3 .widgets .st-fixed-form-booking {
		margin-top: 84px !important;
	}

	.header__left .logo.d-block.d-lg-none img {
		height: 64px;
		width: auto;
		filter: brightness(0) invert(1);
		transition: filter 0.3s ease;
	}

	/* On scroll or menu open: revert logo to original black */
	.header.wv-scrolled .header__left .logo.d-block.d-lg-none img,
	.header.wv-menu-active .header__left .logo.d-block.d-lg-none img {
		filter: none;
	}

	/* On scroll -> WHITE translucent */
	.header.wv-scrolled {
		background: rgba(255, 255, 255, 0.92) !important;
		-webkit-backdrop-filter: saturate(140%) blur(6px);
		backdrop-filter: saturate(140%) blur(6px);
		box-shadow: 0 6px 24px rgba(0,0,0,.06);
		border-bottom: 1px solid rgba(0,0,0,.06);
	}

	/* Show header__center (nav container) — panel hidden via transform in waverick-header.css */
	.header__center {
		display: block !important;
		visibility: visible !important;
	}

	/* Currency visible on mobile */
	.header__right .dropdown-currency {
		display: block;
	}
}

/* DESKTOP (blue #191970 on scroll) */
@media screen and (min-width: 992px) {
	/* Base Header Styling - Fully Transparent at Start */
	.header {
		position: fixed;
		top: 0;
		width: 100%;
		height: 74px;
		background: rgba(255, 255, 255, 0); /* FULL transparency */
		transition: background 0.3s ease,
		            backdrop-filter 0.3s ease,
		            -webkit-backdrop-filter 0.3s ease,
		            box-shadow 0.3s ease;
		z-index: 1001;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 20px;
		isolation: isolate;
	}

	/* Change header background when scrolling down -> #191970 */
	.header.wv-scrolled {
		background: rgba(25, 25, 112, 0.90) !important;
		-webkit-backdrop-filter: saturate(140%) blur(6px);
		backdrop-filter: saturate(140%) blur(6px);
		box-shadow: 0 8px 24px rgba(0,0,0,.08);
		border-bottom: 1px solid rgba(255,255,255,.08);
	}

	/* Return to Transparent When Scrolling Back Up — !important needed
	   to beat any parent/Elementor background that might cause grey tint */
	.header:not(.wv-scrolled) {
		background: transparent !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		box-shadow: none !important;
		border-bottom: none !important;
	}

	/* Divider fix */
	.divider {
		background: transparent !important;
		z-index: 999;
		position: relative;
	}

	.header__left {
		margin-left: 50px;
	}

	.header .logo img {
		height: 65px;
		width: auto;
		transition: max-height 0.3s ease-in-out;
	}
}

/* Scroll-driven header background is handled by JS (.wv-scrolled class)
   on both mobile and desktop. CSS transitions on .header handle the
   visual animation (background, backdrop-filter, box-shadow). */

/* ========================================
   6. LAYOUT & MEDIA ADJUSTMENTS - Contact Form, Header Spacing
   ======================================== */

/* "Send Message" button in the form */
.wpcf7-form-control.wpcf7-submit,
input.submit {
	width: auto;
	height: auto;
}

/* Mobile layout/spacing adjustments removed — consolidated into Section 5 header block above */

@media screen and (min-width: 992px) {
	/* Accommodation result page adjustments */
	.stt-menu-transparent .search-result-page .banner .st-banner-search-form {
		padding-top: 70px;
	}
	.st-style-elementor.search-result-page.layout5 .st-results .page-half-map.map-left .maparea {
		z-index: 1;
		position: relative;
	}
}

/* ========================================
   7. NAVIGATION & MISCELLANEOUS - Search, Filters, Dropdowns
   ======================================== */

/* Adjust filter area search result */
.st-style-elementor.search-result-page.layout5 .st-results .page-half-map.map-left .dataarea {
	padding-left: 15px !important;
}

/* Bigger navigation buttons in bold */
.multi-search.nav.nav-pills .nav-link {
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FF8C00;
}

/* Header and footer adjustments */
body.st-header-9 #st-content-wrapper.st-style-elementor .st-heading-section {
	color: #191970;
}

.main-footer-sub {
	padding-top: 0px !important;
	padding-bottom: 15px !important;
}

/* Elementor tab styles */
.elementor-tab-title a {
	font-size: 17px !important;
}

.elementor-tab-title {
	padding: 4% 0% 4% 0% !important;
}

/* ========================================
   8. PASSWORD RESET MODAL - Center on Screen
   ======================================== */

#st-forgot-form .modal-dialog {
	display: flex;
	align-items: center;
	min-height: calc(100vh - 60px);
	margin: 30px auto;
}

#st-forgot-form .modal-content {
	width: 100%;
}