/*
Theme Name:     Traveler Childtheme
Description:    Traveler Child Theme
Theme URI:      https://travelerwp.com/
Author:         the ShineTheme
Author URI:     http://shinetheme.com
Version:        1.0
Template:       traveler
*/

/* ==========================================================================
   Trip Ooty — brand colour override (red + black only, no blue)
   Traveler's entire theme (search button, filter "Apply" button, price
   range slider, and other themed controls) is driven off ONE CSS custom
   property declared in the parent theme's :root — see
   traveler/style.css: `--main-color: #5191FA` (blue). Every "still blue"
   element reported (Search button, filter Apply button) traces back to
   this single variable, not to any of the room-card CSS below. Redeclaring
   it here, in the child theme (loaded after the parent theme's stylesheet
   — see enqueue_parent_styles() in functions.php), overrides it site-wide
   without touching the parent theme file itself.
   ========================================================================== */
:root {
	--main-color: #E53935 !important;
}

/* Direct safety net for the two specific buttons reported — in case either
   has a hardcoded colour beyond the --main-color variable above. */
.btn-search,
.btn-apply-price-range {
	background: #E53935 !important;
	border-color: #E53935 !important;
	color: #fff !important;
}
.btn-search:hover,
.btn-apply-price-range:hover {
	background: #D32F2F !important;
	border-color: #D32F2F !important;
	color: #fff !important;
}

/* ==========================================================================
   Trip Ooty — room search-result card (Task 3 / Task 6)
   Scoped entirely under .tripooty-room-card so nothing here touches any
   other Traveler card style (single hotel room list, tours, cars, etc).
   ========================================================================== */

.tripooty-room-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.15s ease;
}

.tripooty-room-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.tripooty-room-card-image {
	position: relative;
}

.tripooty-room-card-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

/* Discount flag on the image corner, OYO-style. */
.tripooty-room-discount-flag {
	position: absolute;
	top: 10px;
	left: 0;
	background: #e2261c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px 3px 8px;
	border-radius: 0 4px 4px 0;
	letter-spacing: 0.2px;
}

.tripooty-room-card-body {
	padding: 14px 16px 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.tripooty-room-hotel-name {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #8a8a8a;
	margin-bottom: 2px;
}

.tripooty-room-hotel-name a {
	color: #8a8a8a;
	text-decoration: none;
}

.tripooty-room-name {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.tripooty-room-name a {
	color: #222;
	text-decoration: none;
}

.tripooty-room-location {
	font-size: 13px;
	color: #666;
	margin-bottom: 8px;
}

.tripooty-room-meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

/* Green rating pill, matching the OYO reference. */
.tripooty-room-rating {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: #2e9c4c;
	padding: 2px 8px;
	border-radius: 4px;
	line-height: 1.5;
}

.tripooty-scarcity-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	background: #fff3ea;
	color: #d9481f;
	padding: 3px 8px;
	border-radius: 12px;
	white-space: nowrap;
}

.tripooty-room-price-row {
	margin: auto 0 12px;
	text-align: right;
}

.tripooty-room-price-block {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

/* "From" label, OYO-style — sits above the struck-through price. */
.tripooty-room-price-from {
	font-size: 12px;
	line-height: 1.3;
	font-weight: 400;
	color: #8e8e93;
}

/* Struck-through original price. */
.tripooty-room-price-regular {
	font-size: 14px;
	line-height: 1.3;
	color: #8e8e93;
	text-decoration: line-through;
}

.tripooty-room-price {
	font-size: 22px;
	line-height: 1.25;
	font-weight: 800;
	color: #000;
}

/* Discount badge — its own line, BELOW the sale price, not beside it. */
.tripooty-room-discount-badge {
	display: inline-block;
	margin-top: 2px;
	background: #e53935;
	color: #fff;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
}

.tripooty-room-price-suffix {
	font-size: 12px;
	line-height: 1.3;
	font-weight: 400;
	color: #888;
	margin-top: 2px;
}

.tripooty-room-price-taxes {
	font-size: 11px;
	line-height: 1.3;
	font-weight: 400;
	color: #8e8e93;
}

.btn-tripooty-book-now {
	display: block;
	text-align: center;
	margin-top: auto;
	padding: 10px 16px;
	background: #2e9c4c;
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 700;
}

/* ==========================================================================
   Trip Ooty — OYO-style additions for the theme's own elementorv2 search
   card (inc/modules/layouts/elementorv2/inc/views/services/hotel/loop/
   grid.php, list.php, list-2.php) — this is the template that actually
   renders on the live hotel-search-results page.
   Everything below is scoped to elements only printed when the card is a
   hotel_room (room-search context), so genuine st_hotel cards elsewhere
   on the site keep their original, unmodified look.
   ========================================================================== */

.services-item .featured-image {
	position: relative;
}

/* Discount flag on the image corner. */
.services-item .tripooty-room-discount-flag {
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 2;
	background: #e2261c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px 3px 8px;
	border-radius: 0 4px 4px 0;
	letter-spacing: 0.2px;
}

.tripooty-room-hotel-name {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #8a8a8a;
	margin-bottom: 2px;
}

/* Amenities/facilities tag row — sits between address and rating,
   matching the OYO reference's image → name → address → amenities →
   rating → price order. */
.tripooty-room-facilities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 6px 0 8px;
	padding: 0;
}

.tripooty-room-facilities li {
	font-size: 12px;
	color: #555;
	background: #f5f5f5;
	border-radius: 4px;
	padding: 3px 8px;
	white-space: nowrap;
}

/* Green rating pill, OYO-style — replaces the plain "0/5 Not Rated" text
   wherever this card is a room-search result. */
.tripooty-oyo-rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #2e9c4c;
	color: #fff;
	border-radius: 4px;
	padding: 2px 8px;
	margin-bottom: 8px;
}

.tripooty-oyo-rating .rate {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.tripooty-oyo-rating .rate-text,
.tripooty-oyo-rating .summary {
	display: none;
}

.tripooty-room-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.tripooty-room-actions .tripooty-view-details-btn,
.tripooty-room-actions .btn-tripooty-book-now {
	flex: 1;
	display: block;
	text-align: center;
	padding: 9px 12px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
}

.tripooty-room-actions .tripooty-view-details-btn {
	background: #fff;
	color: #2e9c4c;
	border: 1px solid #2e9c4c;
}

.tripooty-room-actions .tripooty-view-details-btn:hover {
	background: #f2faf4;
	color: #2e9c4c;
}

.tripooty-room-actions .btn-tripooty-book-now {
	margin-top: 0;
}

.btn-tripooty-book-now:hover {
	background: #257a3b;
	color: #fff;
}

.style-list-item .tripooty-room-card {
	flex-direction: row;
}

.style-list-item .tripooty-room-card-image {
	flex: 0 0 260px;
}

.style-list-item .tripooty-room-card-image img {
	height: 100%;
}

/* ==========================================================================
   Mobile safety net: the "floating red button" fix.
   ------------------------------------------------------------------------
   .tripooty-room-discount-flag (defined above and again at "Discount flag
   on the image corner" further down this file) is part of the DESKTOP
   room card only (inc/modules/layouts/elementorv2/.../loop/grid.php). It's
   kept off phones by that same file returning early into grid-mobile.php
   whenever wp_is_mobile() is true — grid-mobile.php never prints this
   element at all, it uses its own .tripooty-oyo-m-rating-chip badge
   instead.

   The problem: wp_is_mobile() is a user-agent guess, and WordPress's own
   regex misses a meaningful slice of real phones/tablets/in-app browsers
   (e.g. iPad Safari by default, many Android WebViews, some in-app
   browsers). On any device it misclassifies as "desktop", the DESKTOP
   card — including this red, absolutely-positioned flag — renders at
   mobile screen width. That's the "floating red button" and it's the
   same root cause as the card generally looking like "a desktop card
   squeezed into a mobile screen": wp_is_mobile() said no, so the desktop
   card ran.

   Fix: a real viewport media query, which — unlike wp_is_mobile() — is
   never wrong about the device's actual screen width. This is a pure
   visual safety net (hides one element under 768px); it does not touch
   which template renders, any query/pricing/booking logic, or the mobile
   card template itself.
   ========================================================================== */
@media (max-width: 767px) {
	.tripooty-room-discount-flag {
		display: none !important;
	}
}
/* ==========================================================================
   Trip Ooty — price block CSS for the REAL live template
   (inc/modules/layouts/elementorv2/inc/views/services/hotel/loop/grid.php).
   These are the .tripooty-oyo-price-* classes that template actually
   prints (as plain <div> tags) — previously undefined anywhere in this
   file, which is why the discount badge rendered as plain black text
   instead of a red box. Vertical stack, right-aligned, OYO-style.
   ========================================================================== */
.tripooty-oyo-card-price {
	display: flex;
	flex-direction: column;
	text-align: right;
	gap: 2px;
}

.tripooty-oyo-price-label {
	font-size: 12px;
	font-weight: 400;
	color: #8e8e93;
}

.tripooty-oyo-price-regular {
	font-size: 14px;
	color: #8e8e93;
	text-decoration: line-through;
}

.tripooty-oyo-price-now {
	font-size: 22px;
	font-weight: 800;
	color: #000;
}

/* The red discount badge. */
.tripooty-oyo-price-off {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 6px 0 0 auto;
	padding: 6px 10px;
	background: #FB0D0D !important;
	color: #FFFFFF !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .2px;
}

.tripooty-oyo-price-suffix {
	font-size: 12px;
	font-weight: 400;
	color: #888;
	margin-top: 2px;
}

.tripooty-oyo-taxes-text {
	font-size: 11px;
	font-weight: 400;
	color: #8e8e93;
	margin-bottom: 8px;
}