/* WordPress theme token integration */
[class*="rv-"] {
	--mhm-primary: var(--wp--preset--color--primary, #2271b1);
	--mhm-font-base: var(--wp--preset--font-size--normal, 1rem);
	--mhm-radius: var(--wp--preset--border-radius, 4px);
	--mhm-text: var(--wp--preset--color--foreground, #1d2327);
}

/**
 * MHM Rentiva - Unified Search Widget
 * 
 * Implements Glassmorphism and high-contrast tabbed interface.
 */

.rv-unified-search {
	--rv-glass-bg: rgba(255, 255, 255, 0.98);
	--rv-shadow: var(--mhm-shadow-lg);
	--rv-radius: 10px;
	--rv-border: var(--mhm-border-primary);
	--rv-primary: var(--mhm-primary);

	background: var(--rv-glass-bg);
	border-radius: var(--rv-radius);
	box-shadow: var(--rv-shadow);
	padding-block: max(var(--mhm-space-phi-3, 1.3125rem), var(--mhm-space-6));
	padding-inline: max(var(--mhm-surface-gutter-desktop, var(--mhm-space-phi-2, 0.8125rem)), var(--mhm-space-6));
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
	z-index: 10;
	font-family: -apple-system, BlinkMacSystemFont, "DM Sans", "Segoe UI", sans-serif; /* reset monospace from <pre> wrapper */
	white-space: normal; /* reset inherited white-space:pre from wp-block-shortcode <pre> wrapper */
}

/* 
 * WPAutoP / Block Editor Defense
 * WordPress sometimes injects <br> and <p> tags into shortcode outputs 
 * within Block Themes, which completely destroys CSS Grid layouts.
 */
.rv-unified-search br {
	display: none !important;
}

.rv-unified-search p {
	margin: 0 !important;
}

/* Tabs */
.rv-unified-search__header {
	margin-bottom: var(--mhm-space-6);
	border-bottom: 2px solid var(--mhm-gray-100);
}

.rv-unified-search__tabs {
	display: flex;
	gap: var(--mhm-space-4);
}

.rv-unified-search__tab {
	background: transparent;
	border: none;
	padding: var(--mhm-space-3) var(--mhm-space-4);
	font-weight: var(--mhm-font-semibold);
	color: var(--mhm-text-secondary);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--mhm-text-base);
	margin-bottom: -2px;
	/* Overlap border */
}

.rv-unified-search__tab:hover {
	color: var(--rv-primary);
}

.rv-unified-search__tab.is-active {
	color: var(--rv-primary);
	border-bottom-color: var(--rv-primary);
}

/* Panel */
.rv-unified-search__panel {
	display: none;
	animation: rvFadeIn 0.3s ease;
}

.rv-unified-search__panel.is-active {
	display: block;
}

@keyframes rvFadeIn {
	from {
		opacity: 0;
		transform: translateY(5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Form Layout */
.rv-unified-search__group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--mhm-space-4);
	margin-bottom: var(--mhm-space-4);
}

.rv-unified-search__field {
	display: flex;
	flex-direction: column;
	gap: var(--mhm-space-2);
}

/* Inputs */
.rv-label {
	font-size: var(--mhm-text-xs);
	font-weight: var(--mhm-font-bold);
	color: var(--mhm-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.rv-input-wrapper {
	background: var(--mhm-bg-secondary);
	border: 1px solid var(--mhm-gray-200);
	border-radius: var(--mhm-radius-md);
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: var(--mhm-space-2);
	height: 48px;
	/* Fixed height for alignment */
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.rv-input-wrapper:focus-within {
	border-color: var(--rv-primary);
	background: var(--mhm-white);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.rv-input-wrapper .dashicons {
	color: var(--mhm-gray-400);
	font-size: 20px;
	width: 20px;
	height: 20px;
}

/* SVG Icon Styling (Desktop) */
.rv-input-wrapper svg {
	width: 20px;
	height: 20px;
	color: var(--mhm-gray-400, #94a3b8);
	flex-shrink: 0;
}

.rv-unified-search__tab svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.rv-input,
.rv-select {
	border: none;
	background: transparent;
	width: 100%;
	font-size: var(--mhm-text-sm);
	color: var(--mhm-text-primary);
	outline: none;
	padding: 0;
	font-family: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/* Action Button */
.rv-unified-search__action {
	margin-top: var(--mhm-space-4);
	display: flex;
	justify-content: flex-end;
}

.rv-unified-search .rv-btn {
	background: var(--rv-primary, var(--mhm-btn-bg)) !important;
	color: #ffffff !important;
	border: none;
	padding: 0 32px;
	height: 48px;
	border-radius: var(--mhm-radius-md);
	font-weight: var(--mhm-font-semibold);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background 0.2s ease;
	font-size: var(--mhm-text-base);
}

.rv-unified-search .rv-btn:hover {
	background: var(--mhm-btn-hover-bg) !important;
}

.rv-unified-search .rv-btn.is-loading {
	opacity: 0.8 !important;
	cursor: wait !important;
	position: relative;
	color: transparent !important;
}

.rv-unified-search .rv-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: 14px;
	left: 50%;
	margin-left: -10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: rvRotate 0.6s linear infinite;
}

.rv-unified-search {
	overflow: hidden;
	/* Prevent tabs and content overflow */
}


/* Responsive */
@media (max-width: 782px) {
	.rv-unified-search__group {
		grid-template-columns: 1fr;
	}

	.rv-unified-search__tabs {
		overflow-x: auto;
		padding-bottom: 2px;
	}

	.rv-btn {
		width: 100%;
	}
}

.rv-loading,
.rv-error {
	text-align: center;
	padding: var(--mhm-space-8);
	color: var(--mhm-text-secondary);
	background: var(--rv-glass-bg);
	border-radius: var(--rv-radius);
	border: var(--rv-border);
}

.rv-loading .dashicons {
	animation: rvRotate 2s linear infinite;
	font-size: 32px;
	width: 32px;
	height: 32px;
}

@keyframes rvRotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Locked / Disabled States */
.rv-input-wrapper.is-locked {
	background: var(--mhm-gray-100);
	opacity: 0.7;
	cursor: not-allowed;
}

.rv-input-wrapper.is-locked .rv-select {
	cursor: not-allowed;
	color: var(--mhm-text-secondary);
}

.rv-input-wrapper.is-locked .rv-icon-lock {
	color: var(--mhm-gray-500);
	font-size: 16px;
}

@media screen and (max-width: 782px) {
	.rv-unified-search {
		padding-block: max(var(--mhm-space-phi-2, 0.8125rem), var(--mhm-space-4));
		padding-inline: max(var(--mhm-surface-gutter-mobile, var(--mhm-space-phi-2, 0.8125rem)), var(--mhm-space-4));
	}

	.rv-unified-search__group--mobile-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		/* Precision gap */
		margin-bottom: 12px;
	}

	/* Precision Ratio for Date & Time (60/40) in Rent a Car */
	.rv-unified-search__tab-content#rent-a-car .rv-unified-search__group--mobile-grid {
		grid-template-columns: 1.6fr 1.1fr;
		margin-bottom: 12px;
	}

	.rv-unified-search__field {
		margin-bottom: 0;
	}

	.rv-unified-search__field .rv-label {
		font-size: 10px;
		margin-bottom: 5px;
		text-transform: uppercase;
		letter-spacing: 0.8px;
		color: var(--mhm-text-secondary);
		font-weight: 600;
		display: block;
		line-height: 1.2;
	}

	/* Unified Surface (Glassmorphism) */
	.rv-input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		height: 48px;
		background: rgba(255, 255, 255, 0.05);
		/* Unified background */
		border: 1px solid rgba(0, 0, 0, 0.08);
		/* Unified border */
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
		overflow: hidden;
		/* Ensure inner elements don't spill */
	}

	/* Flattened Inner Elements */
	.rv-input,
	.rv-select,
	.rv-input-wrapper.is-locked .rv-select {
		height: 100% !important;
		width: 100% !important;
		background: transparent !important;
		/* Flattened */
		border: none !important;
		/* Flattened */
		box-shadow: none !important;
		/* Flattened */
		padding: 0 12px 0 40px !important;
		/* Unified padding for icon space */
		font-size: 14px;
		color: var(--mhm-text-primary);
		display: flex;
		align-items: center;
		outline: none !important;
		appearance: none;
		-webkit-appearance: none;
		margin: 0;
	}

	/* Standardized Icon Positioning */
	.rv-input-wrapper .rv-icon,
	.rv-input-wrapper .rv-icon-calendar,
	.rv-input-wrapper .rv-icon-clock,
	.rv-input-wrapper .rv-icon-location,
	.rv-input-wrapper .rv-icon-lock {
		position: absolute;
		left: 12px;
		font-size: 18px;
		color: var(--mhm-gray-400);
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 20px;
		z-index: 2;
		pointer-events: none;
		/* Let clicks pass through to input */
	}

	/* Select Arrow Restoration for flattened select */
	.rv-input-wrapper select.rv-select {
		background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
		background-repeat: no-repeat;
		background-position: right 10px top 50%;
		background-size: 10px auto;
		padding-right: 25px !important;
	}

	.rv-unified-search__submit {
		height: 52px;
		font-size: 16px;
		letter-spacing: 0.5px;
		font-weight: 600;
		margin-top: 5px;
		border-radius: 10px;
		border: none;
		width: 100%;
	}

}

/* =============================================
   Luggage Info Tooltip
   ============================================= */
/* =========================================================================
   BROADSHEET SKIN + VERTICAL LAYOUT — design-system pilot (v5.2.0-dev)
   =========================================================================
   Scoped to this component, like the vehicle card, so the rest of the plugin
   keeps its palette until the system is rolled out.

   Tokens prefer the theme's WP preset and fall back to the design system's
   value, so the widget harmonises with its theme rather than imposing a look.
   No webfont is loaded — the display face follows the theme's heading font.
   ========================================================================= */
.rv-unified-search {
	--rv-s-surface: var(--wp--preset--color--surface, #f8f4f4);
	--rv-s-ink: var(--wp--preset--color--text, #201e1d);
	--rv-s-muted: color-mix(in srgb, var(--rv-s-ink) 60%, transparent);
	--rv-s-accent: var(--wp--preset--color--primary, #0088b0);
	--rv-s-hair: color-mix(in srgb, var(--rv-s-ink) 12%, transparent);
	--rv-s-radius: 2px;
	--rv-s-display: var(--wp--preset--font-family--heading, Georgia, "Times New Roman", serif);

	background: var(--rv-s-surface);
	border: 1px solid var(--rv-s-hair);
	border-radius: var(--rv-s-radius);
	box-shadow: 0 3px 12px color-mix(in srgb, #2d2b2b 14%, transparent);
}

/* Tabs — the active one is marked by an accent rule, not a filled pill. */
.rv-unified-search .rv-unified-search__tab {
	font-family: var(--rv-s-display);
	font-weight: 600;
	color: var(--rv-s-muted);
	border-radius: 0;
	position: relative;
}

.rv-unified-search .rv-unified-search__tab.is-active {
	color: var(--rv-s-ink);
	background: transparent;
}

.rv-unified-search .rv-unified-search__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--rv-s-accent);
}

.rv-unified-search .rv-label {
	color: var(--rv-s-muted);
	letter-spacing: 0.06em;
}

.rv-unified-search .rv-input-wrapper {
	background: color-mix(in srgb, var(--rv-s-ink) 3%, transparent);
	border-color: var(--rv-s-hair);
	border-radius: var(--rv-s-radius);
}

.rv-unified-search .rv-input-wrapper:focus-within {
	border-color: var(--rv-s-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rv-s-accent) 18%, transparent);
}

.rv-unified-search .rv-btn {
	background: var(--rv-s-accent) !important;
	border-radius: var(--rv-s-radius);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   layout="vertical" — implemented here for the first time.
   The attribute has been documented on the shortcode ('horizontal',
   'vertical', 'compact') and written into the markup as a modifier class all
   along, but no rule ever matched it, so setting it changed nothing. This is
   the stacked card the design calls for: one field per row, the action
   spanning the full width beneath them.
   ------------------------------------------------------------------------- */
.rv-unified-search--vertical .rv-unified-search__group {
	grid-template-columns: 1fr;
}

.rv-unified-search--vertical .rv-unified-search__action {
	justify-content: stretch;
}

.rv-unified-search--vertical .rv-unified-search__action .rv-btn {
	width: 100%;
}

/* On a narrow card the date/time pair still reads better side by side than
   as two full-width rows. */
@media (min-width: 480px) {
	.rv-unified-search--vertical .rv-unified-search__group--mobile-grid {
		grid-template-columns: 1fr 1fr;
	}
}