/*
 * Trip Ooty — OYO-style MOBILE search-result room card.
 * Styles ONLY inc/modules/layouts/elementorv2/inc/views/services/hotel/
 * loop/grid-mobile.php. Enqueued only when wp_is_mobile() is true (see
 * functions.php) — has zero effect on desktop/tablet.
 *
 * THIS REVISION (flat OYO-style polish pass):
 *   - Verified badge removed entirely (rules deleted below).
 *   - Amenities moved from sharing a row with the button (content
 *     column) to their own row directly below the image, in the media
 *     column — same spot Verified used to occupy. Max 2, real data only.
 *   - Card border: thin flat 1px solid #BDBDBD, shadow removed — visible
 *     grey border, no heavy elevation, closer to OYO's flat list style.
 *   - Card radius: 4px — near-rectangular, not 8/16/20px. Image corners
 *     match at 4px.
 *   - Button: fixed 135×38px / 15px font / 8px radius (unchanged from
 *     the prior pass), now alone on its row, right-aligned.
 * Card min-height, image size/ratio, column split (43/57), title/price/
 * taxes sizing from the prior pass are all unchanged by this revision.
 */

/*
 * SAFETY NET — added after a caching-related bug report: on hosts whose
 * full-page cache doesn't vary by device (e.g. Pantheon's default edge
 * cache), the PHP-side wp_is_mobile() branch that used to decide whether
 * to render THIS card markup (grid.php -> grid-mobile.php) could serve a
 * cached mobile response to a desktop visitor. loop/grid.php has since
 * been changed to always render both card markups — see the root-cause
 * comment there — with CSS as the sole, live decision-maker of which one
 * is visible. This rule is that decision's "off" state: hidden by
 * default, shown only inside the @media block below. Paired with
 * oyo-room-card.css's mirror rule (.tripooty-oyo-card hidden ≤767px),
 * exactly one card variant is ever visible at a given viewport width,
 * decided purely by the browser — never by what was cached or which
 * User-Agent generated the response.
 */
.tripooty-oyo-m-card {
	display: none;
}

@media (max-width: 767px) {

.tripooty-oyo-m-card {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 112px; /* floor, not a ceiling — real content can grow past this */
	background: #fff;
	border: 1px solid #BDBDBD; /* visible thin grey border, no shadow */
	border-radius: 4px; /* near-rectangular, not 8/16/20px */
	overflow: hidden;
	margin: 0 0 12px;
	box-sizing: border-box;
}

/* ---------- LEFT COLUMN: image box, then the amenities row below it (normal flow) ---------- */
.tripooty-oyo-m-media {
	display: flex;
	flex-direction: column;
	flex: 0 0 47%; /* was 43% — +10% relative, per request */
	max-width: 47%;
	margin: 4px;
	box-sizing: border-box;
}

/* The image + its overlaid wishlist/rating icons now live in their own
   positioned box, sized by aspect-ratio rather than stretching to fill
   whatever height the column ends up being — so the overlay icons always
   anchor to the image's own edges, never to the badge area below it. */
.tripooty-oyo-m-image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 0;
	overflow: hidden;
	flex: 0 0 auto;
}
.tripooty-oyo-m-media-single {
	display: block;
	position: absolute;
	inset: 0;
}
.tripooty-oyo-m-main-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block;
	max-width: none;
}
.tripooty-oyo-m-wishlist {
	display: none; /* wishlist heart hidden on mobile image, per request */
}
.tripooty-oyo-m-rating-chip {
	position: absolute; /* correct use: floats over the image by design */
	bottom: 6px;
	left: 6px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 3px;
	background: #fff;
	border-radius: 4px;
	padding: 2px 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.tripooty-oyo-m-rating-chip .rate {
	font-size: 10px;
	font-weight: 800;
	color: #1a1a1a;
}
.tripooty-oyo-m-rating-chip .count {
	font-size: 8px;
	color: #6b7280;
}

/* AMENITIES — below the image, normal document flow, same spot the
   (now-removed) Verified badge used to occupy. Max 2 items, real data
   only (see grid-mobile.php). Kept to ONE line — never wraps — by
   truncating with an ellipsis if a real amenity name is too long for
   this ~43%-wide column, rather than wrapping or being clipped. */
.tripooty-oyo-m-amenities {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px; /* between the two amenities — exact spec */
	margin-top: 7px;
	overflow: hidden;
	min-width: 0;
}
.tripooty-oyo-m-amenity {
	display: flex;
	align-items: center;
	gap: 8px; /* icon-to-text gap — exact spec */
	font-size: 12px; /* exact spec */
	font-weight: 500;
	color: #374151;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.tripooty-oyo-m-amenity-icon {
	flex: 0 0 auto;
	font-size: 14px !important; /* exact spec */
	color: #E11D1D;
}

/* ---------- RIGHT COLUMN: real flex column, no absolute positioning for layout ---------- */
.tripooty-oyo-m-body {
	flex: 1 1 57%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 8px 10px; /* was 10px all round — vertical trimmed 2px per spec, horizontal unchanged so image gap/card width are untouched */
	box-sizing: border-box;
}
.tripooty-oyo-m-body-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* TITLE — 16px / 700 / max 2 lines / tight line-height (exact spec) */
.tripooty-oyo-m-room-name {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.2px !important;
	text-transform: none !important;
	color: #1a1a1a;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* HOTEL NAME — 13px grey, single line, ellipsis (exact spec) */
.tripooty-oyo-m-location {
	margin-top: 0;
	font-size: 13px;
	font-weight: 400;
	color: #8a8a8a;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tripooty-oyo-m-room-type-tag {
	display: none; /* still no room for a third text line at these sizes */
}

/* PRICE — bold red current, grey strikethrough original, green discount, taxes below (exact spec) */
.tripooty-oyo-m-price-row {
	margin-top: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap; /* was nowrap+overflow:hidden — a real discount row (current+regular+%off) now wraps visibly instead of being invisibly cut off on a narrow phone */
	gap: 5px;
}
.tripooty-oyo-m-price-now {
	font-size: 16px;
	font-weight: 800;
	color: #E11D1D;
	white-space: nowrap;
}
.tripooty-oyo-m-price-regular {
	font-size: 11px;
	color: #9ca3af;
	text-decoration: line-through;
	white-space: nowrap;
}
.tripooty-oyo-m-price-off {
	font-size: 11px;
	font-weight: 700;
	color: #0D8A4F;
	white-space: nowrap;
}
.tripooty-oyo-m-taxes {
	margin-top: 0;
	font-size: 11px;
	color: #9ca3af;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* BOTTOM ROW — now contains ONLY the "View Details" button (amenities
   moved to below the image — see above), right-aligned so the right
   side stays exactly title/hotel/price/taxes/button, nothing else.
   Pushed to the bottom of the card via margin-top:auto on THIS row (the
   flex-column "sticky footer" technique) instead of position:absolute —
   there is no fixed coordinate for anything to collide over, regardless
   of how tall the content above it grows. */
.tripooty-oyo-m-bottom-row {
	margin-top: auto;
	padding-top: 3px;
	display: flex;
	justify-content: flex-end;
}

/* BUTTON — alone on its row now, right-aligned via justify-content:flex-end
   on the parent .tripooty-oyo-m-bottom-row. Exact spec: 135×38px, 15px
   font, 8px radius. */
.tripooty-oyo-m-view-details,
.tripooty-oyo-m-view-details:link,
.tripooty-oyo-m-view-details:visited,
.tripooty-oyo-m-view-details:hover,
.tripooty-oyo-m-view-details:active,
.tripooty-oyo-m-view-details:focus {
	flex: 0 0 135px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 135px;
	height: 38px !important;
	background-color: #000000 !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1px;
	border-radius: 8px !important;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
	white-space: nowrap;
}

/* ---------- Results list spacing ---------- */
.tripooty-oyo-results {
	padding-bottom: 76px;
}

} /* end @media (max-width: 767px) safety-net wrapper */