/* =========================================================================
   Muscat Smart Tours theme styles
   Reproduces the approved prototype design (omantours-jrtzpv3r.manus.space)
   Global tokens come from theme.json custom properties.
   ========================================================================= */

:root {
	--mst-radius-card: var(--wp--custom--radius--card, 0.9rem);
	--mst-radius-btn: var(--wp--custom--radius--button, 0.775rem);
	--mst-radius-field: var(--wp--custom--radius--field, 0.6rem);
	--mst-shadow-card: var(--wp--custom--shadow--card, 0 1px 3px rgba(28,37,38,.06), 0 8px 24px rgba(28,37,38,.07));
	--mst-shadow-card-hover: var(--wp--custom--shadow--card-hover, 0 4px 12px rgba(28,37,38,.1), 0 16px 40px rgba(28,37,38,.12));
	--mst-section-pad: var(--wp--custom--section--padding, 5.5rem);
	--mst-section-pad-mobile: var(--wp--custom--section--padding-mobile, 3rem);
	--mst-sand: var(--wp--preset--color--sand);
	--mst-sand-deep: var(--wp--preset--color--sand-deep);
	--mst-teal: var(--wp--preset--color--teal-brand);
	--mst-teal-deep: var(--wp--preset--color--teal-deep);
	--mst-teal-tint: var(--wp--preset--color--teal-tint);
	--mst-orange: var(--wp--preset--color--orange-brand);
	--mst-orange-deep: var(--wp--preset--color--orange-deep);
	--mst-charcoal: var(--wp--preset--color--charcoal);
	--mst-border: var(--wp--preset--color--border-sand);
	--mst-muted: var(--wp--preset--color--muted);
}

/* Visible focus states (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--mst-teal);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------------ Sections */
.mst-section { padding-top: var(--mst-section-pad); padding-bottom: var(--mst-section-pad); }
@media (max-width: 781px) {
	.mst-section { padding-top: var(--mst-section-pad-mobile); padding-bottom: var(--mst-section-pad-mobile); }
}

.mst-eyebrow {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--mst-teal);
}
.mst-eyebrow::before {
	content: ""; width: 2rem; height: 2px; background: var(--mst-orange); display: inline-block;
}

.mst-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.mst-view-all { font-weight: 600; color: var(--mst-teal); text-decoration: none; white-space: nowrap; }
.mst-view-all::after { content: " ›"; }
.mst-view-all:hover { color: var(--mst-teal-deep); text-decoration: underline; }

/* ------------------------------------------------------------ Buttons */
.mst-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body); font-size: 0.9375rem; font-weight: 600;
	padding: 0.75rem 1.5rem; border-radius: var(--mst-radius-btn);
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
	line-height: 1.2;
}
.mst-btn-primary, .wp-block-button__link { background: var(--mst-orange); color: #fff !important; }
.mst-btn-primary:hover, .wp-block-button__link:hover { background: var(--mst-orange-deep); color: #fff; }
.mst-btn-outline { background: transparent; color: var(--mst-teal); border-color: var(--mst-border); width: 100%; }
.mst-btn-outline:hover { border-color: var(--mst-teal); background: var(--mst-teal-tint); color: var(--mst-teal-deep); }
.mst-btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
.mst-btn-ghost-light:hover { background: rgba(255,255,255,.24); }
.mst-btn-block { width: 100%; }

/* --------------------------------------------------------------- Header */
.mst-header {
	position: sticky; top: 0; z-index: 60; background: #fff;
	border-bottom: 1px solid var(--mst-border);
}
.mst-header-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
	max-width: 1400px; margin: 0 auto; padding: 0.65rem 1.5rem;
}
.mst-header .custom-logo { max-height: 52px; width: auto; }
.mst-nav { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.mst-nav a { color: var(--mst-charcoal); font-weight: 500; font-size: 0.9375rem; text-decoration: none; }
.mst-nav a:hover { color: var(--mst-teal); }
.mst-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.mst-header-toggle { font-size: 0.8125rem; font-weight: 600; color: var(--mst-muted); background: none; border: 1px solid var(--mst-border); border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; }
.mst-whatsapp-icon { color: var(--mst-teal); display: inline-flex; }

@media (max-width: 900px) {
	.mst-nav { display: none; }
	.mst-nav.mst-nav-open {
		display: flex; flex-direction: column; position: absolute; inset: 100% 0 auto 0;
		background: #fff; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--mst-border);
		box-shadow: var(--mst-shadow-card);
	}
}
.mst-menu-btn { display: none; background: none; border: 1px solid var(--mst-border); border-radius: 8px; padding: 0.45rem 0.6rem; cursor: pointer; }
@media (max-width: 900px) { .mst-menu-btn { display: inline-flex; } }

/* ----------------------------------------------------------------- Hero */
.mst-hero {
	position: relative; min-height: 640px; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center;
	padding: 5rem 1.5rem 4rem; overflow: hidden;
}
.mst-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mst-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,27,.45) 0%, rgba(20,26,27,.25) 45%, rgba(20,26,27,.5) 100%); }
.mst-hero > :not(.mst-hero-bg) { position: relative; z-index: 1; }
.mst-hero h1 { color: #fff; margin: 0 0 1rem; }
.mst-hero-sub { color: rgba(255,255,255,.92); font-size: 1.125rem; max-width: 560px; margin: 0 auto 2.5rem; }

/* Hero search card */
.mst-search-card {
	width: min(920px, 100%); background: #fff; border-radius: var(--mst-radius-card);
	box-shadow: var(--mst-shadow-card-hover); padding: 1rem 1.25rem 1.25rem; text-align: start;
}
.mst-search-tabs { display: flex; border-bottom: 1px solid var(--mst-border); margin-bottom: 1.1rem; }
.mst-search-tab {
	flex: 1; text-align: center; background: none; border: none; padding: 0.8rem 0.5rem;
	font-weight: 600; font-size: 0.9375rem; color: var(--mst-muted); cursor: pointer;
	border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.mst-search-tab[aria-selected="true"] { color: var(--mst-teal); border-bottom-color: var(--mst-orange); }
.mst-search-panel[hidden] { display: none; }
.mst-search-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.mst-field label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: .02em; color: var(--mst-charcoal); margin-bottom: 0.35rem; }
.mst-field input, .mst-field select {
	width: 100%; padding: 0.7rem 0.8rem; font-size: 0.9375rem; font-family: inherit;
	border: 1px solid var(--mst-border); border-radius: var(--mst-radius-field);
	background: #fff; color: var(--mst-charcoal);
}
.mst-field input:focus, .mst-field select:focus { border-color: var(--mst-teal); }

/* Autocomplete dropdown */
.mst-autocomplete { position: relative; }
.mst-autocomplete-list {
	position: absolute; inset: 100% 0 auto 0; z-index: 40; background: #fff;
	border: 1px solid var(--mst-border); border-radius: 0 0 var(--mst-radius-field) var(--mst-radius-field);
	box-shadow: var(--mst-shadow-card); max-height: 280px; overflow-y: auto; list-style: none; margin: 0; padding: 0;
}
.mst-autocomplete-list li { padding: 0.6rem 0.8rem; cursor: pointer; font-size: 0.9rem; }
.mst-autocomplete-list li[aria-selected="true"], .mst-autocomplete-list li:hover { background: var(--mst-teal-tint); }
.mst-autocomplete-list .mst-loc-meta { display: block; font-size: 0.78rem; color: var(--mst-muted); }

/* --------------------------------------------------------- Trust badges */
.mst-trust-strip { background: #fff; border-bottom: 1px solid var(--mst-border); }
.mst-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.75rem; padding: 2.2rem 0; }
.mst-trust-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.mst-trust-icon {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
	background: var(--mst-teal-tint); color: var(--mst-teal);
	display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.mst-trust-item h3 { font-size: 0.9875rem; margin: 0 0 0.2rem; font-family: var(--wp--preset--font-family--body); font-weight: 700; }
.mst-trust-item p { margin: 0; font-size: 0.875rem; color: var(--mst-muted); }

/* ------------------------------------------------------------ Grids */
.mst-grid { display: grid; gap: 1.5rem; }
.mst-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mst-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mst-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) {
	.mst-grid-4, .mst-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
	.mst-grid-3, .mst-grid-4, .mst-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.mst-grid-3, .mst-grid-4, .mst-grid-5 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- Cards */
.mst-card {
	background: #fff; border-radius: var(--mst-radius-card); box-shadow: var(--mst-shadow-card);
	overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}
.mst-card:hover { box-shadow: var(--mst-shadow-card-hover); transform: translateY(-2px); }
.mst-card-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--mst-radius-card) var(--mst-radius-card) 50% 50% / var(--mst-radius-card) var(--mst-radius-card) 14% 14%; }
.mst-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mst-media-placeholder { width: 100%; height: 100%; min-height: 160px; background: repeating-linear-gradient(45deg, var(--mst-sand-deep), var(--mst-sand-deep) 12px, var(--mst-sand) 12px, var(--mst-sand) 24px); display:flex; align-items:center; justify-content:center; color: var(--mst-muted); font-size: .8rem; }
.mst-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.mst-card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mst-eyebrow-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mst-teal); }
.mst-badge { font-size: 0.72rem; font-weight: 600; background: var(--mst-sand-deep); color: var(--mst-charcoal); border-radius: 999px; padding: 0.2rem 0.65rem; }
.mst-card-title { font-size: 1.0625rem; font-family: var(--wp--preset--font-family--body); font-weight: 700; margin: 0; line-height: 1.35; }
.mst-card-title a { color: var(--mst-charcoal); text-decoration: none; }
.mst-card-title a:hover { color: var(--mst-teal); }
.mst-card-info-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; font-size: 0.84rem; color: var(--mst-muted); }
.mst-pickup { color: var(--mst-teal); font-weight: 600; }
.mst-stars { display: flex; align-items: center; gap: 0.35rem; font-size: 0.84rem; }
.mst-star-icons { color: var(--mst-orange); letter-spacing: 0.05em; }
.mst-review-count { color: var(--mst-muted); }
.mst-card-footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.4rem; border-top: 1px solid var(--mst-sand-deep); }
.mst-price-amount { color: var(--mst-teal); font-weight: 800; font-size: 1.15rem; }
.mst-price-basis, .mst-price-label { color: var(--mst-muted); font-size: 0.8rem; }

/* Transfer + itinerary detail lists */
.mst-transfer-details, .mst-itinerary-details, .mst-vehicle-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; color: var(--mst-muted); }
.mst-transfer-details li::before, .mst-itinerary-details li::before, .mst-vehicle-specs li::before { content: "•"; color: var(--mst-teal); margin-inline-end: 0.5rem; }

/* --------------------------------------------------- Three ways cards */
.mst-service-card { padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.mst-service-card .mst-trust-icon { width: 56px; height: 56px; font-size: 1.5rem; }
.mst-service-card h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.45rem; margin: 0; }
.mst-service-card p { margin: 0; color: var(--mst-muted); flex: 1; }
.mst-service-card.mst-service-highlight { background: var(--mst-teal-deep); }
.mst-service-highlight h3, .mst-service-highlight p { color: #fff; }
.mst-service-highlight p { color: rgba(255,255,255,.85); }
.mst-service-highlight .mst-trust-icon { background: rgba(255,255,255,.14); color: #fff; }

/* -------------------------------------------------- Make My Trip band */
.mst-mmt-band { position: relative; color: #fff; overflow: hidden; border-radius: 0; }
.mst-mmt-band .mst-eyebrow { color: #ffce9c; }
.mst-mmt-band h2 { color: #fff; }
.mst-mmt-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mst-mmt-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mst-mmt-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,32,31,.88) 0%, rgba(15,32,31,.65) 55%, rgba(15,32,31,.45) 100%); }
.mst-mmt-inner { position: relative; z-index: 1; }
.mst-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin: 2.2rem 0; }
@media (max-width: 820px) { .mst-steps { grid-template-columns: 1fr; } }
.mst-step { display: flex; gap: 1rem; align-items: flex-start; }
.mst-step-number {
	flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
	background: var(--mst-orange); color: #fff; font-weight: 800; font-size: 1.1rem;
	display: inline-flex; align-items: center; justify-content: center;
}
.mst-step h3 { font-size: 1.05rem; margin: 0 0 0.25rem; color: #fff; font-family: var(--wp--preset--font-family--body); font-weight: 700; }
.mst-step p { margin: 0; color: rgba(255,255,255,.82); font-size: 0.9rem; }

/* --------------------------------------------------- Destination cards */
.mst-destination-card { display: block; text-decoration: none; }
.mst-destination-media { aspect-ratio: 1 / 1.15; border-radius: var(--mst-radius-card); overflow: hidden; margin-bottom: 0.7rem; }
.mst-destination-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mst-destination-card:hover .mst-destination-media img { transform: scale(1.05); }
.mst-destination-name { font-size: 1rem; margin: 0; color: var(--mst-charcoal); font-family: var(--wp--preset--font-family--body); font-weight: 700; }
.mst-destination-count { font-size: 0.82rem; color: var(--mst-muted); }

/* ------------------------------------------------------ Travel styles */
.mst-style-card {
	background: #fff; border: 1px solid var(--mst-border); border-radius: var(--mst-radius-card);
	padding: 1.4rem 1.2rem; text-align: center; text-decoration: none; display: block;
	color: var(--mst-charcoal); font-weight: 700; font-size: 0.95rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.mst-style-card:hover { border-color: var(--mst-teal); box-shadow: var(--mst-shadow-card); color: var(--mst-teal-deep); }

/* ----------------------------------------------------- Why travel */
.mst-why-item h3 { font-size: 1.05rem; margin: 0 0 0.3rem; font-family: var(--wp--preset--font-family--body); font-weight: 700; }
.mst-why-item p { margin: 0; color: var(--mst-muted); font-size: 0.92rem; }
.mst-why-item { padding: 1.5rem; background: #fff; border-radius: var(--mst-radius-card); box-shadow: var(--mst-shadow-card); }

/* -------------------------------------------------------------- Team */
.mst-team-card {
	display: grid; grid-template-columns: 320px 1fr; gap: 2rem; background: #fff;
	border-radius: var(--mst-radius-card); box-shadow: var(--mst-shadow-card); overflow: hidden;
}
@media (max-width: 820px) { .mst-team-card { grid-template-columns: 1fr; } }
.mst-team-media img, .mst-team-placeholder { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.mst-team-body { padding: 2rem 2rem 2rem 0; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
@media (max-width: 820px) { .mst-team-body { padding: 0 1.5rem 1.5rem; } }
.mst-team-name { margin: 0; font-family: var(--wp--preset--font-family--heading); }
.mst-team-role { margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; color: var(--mst-teal); }
.mst-team-body h4 { margin: 0.4rem 0 0.1rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mst-charcoal); }
.mst-team-body p { margin: 0; color: var(--mst-muted); font-size: 0.92rem; }

/* --------------------------------------------------------------- FAQ */
.mst-faq-list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.8rem; }
.mst-faq-item { background: #fff; border: 1px solid var(--mst-border); border-radius: var(--mst-radius-card); overflow: hidden; }
.mst-faq-question { margin: 0; }
.mst-faq-toggle {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	background: none; border: none; text-align: start; padding: 1.05rem 1.3rem;
	font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--mst-charcoal); cursor: pointer;
}
.mst-faq-icon { font-size: 1.3rem; color: var(--mst-teal); }
.mst-faq-answer { padding: 0 1.3rem 1.2rem; color: var(--mst-muted); }

/* ------------------------------------------------------ Reviews */
.mst-review-text { margin: 0; font-style: italic; color: var(--mst-charcoal); border: none; padding: 0; }
.mst-review-attribution { font-size: 0.85rem; color: var(--mst-muted); display: flex; flex-direction: column; gap: 0.15rem; }
.mst-review-source { color: var(--mst-teal); font-weight: 600; }
.mst-placeholder-note {
	text-align: center; color: var(--mst-muted); background: #fff; border: 1px dashed var(--mst-border);
	border-radius: var(--mst-radius-card); padding: 2.2rem 1.5rem; max-width: 760px; margin: 0 auto;
}

/* ------------------------------------------------------ Vehicles */
.mst-vehicle-model { margin: 0; font-size: 0.85rem; color: var(--mst-muted); }
.mst-vehicle-card .mst-card-media { border-radius: 0; aspect-ratio: 16/10; }

/* ---------------------------------------------------- Final CTA */
.mst-final-cta { background: var(--mst-teal-deep); color: #fff; text-align: center; }
.mst-final-cta h2 { color: #fff; }
.mst-final-cta p { color: rgba(255,255,255,.85); }
.mst-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }

/* ------------------------------------------------------------- Footer */
.mst-footer { background: var(--mst-charcoal); color: rgba(255,255,255,.78); font-size: 0.9rem; }
.mst-footer-inner { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 2rem; }
.mst-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: 2rem; margin-bottom: 2.5rem; }
@media (max-width: 980px) { .mst-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mst-footer-grid { grid-template-columns: 1fr; } }
.mst-footer h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.9rem; font-family: var(--wp--preset--font-family--body); }
.mst-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mst-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.mst-footer a:hover { color: #fff; text-decoration: underline; }
.mst-footer-logo img { max-height: 46px; width: auto; background: #fff; border-radius: 10px; padding: 4px 8px; }
.mst-footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; font-size: 0.82rem; color: rgba(255,255,255,.6); }

/* -------------------------------------------------- Consent banner */
.mst-consent-banner {
	position: fixed; inset: auto 1rem 1rem 1rem; z-index: 100; background: #fff;
	border-radius: var(--mst-radius-card); box-shadow: var(--mst-shadow-card-hover);
	padding: 1.1rem 1.3rem; max-width: 480px; margin-inline-start: auto;
	display: flex; flex-direction: column; gap: 0.8rem; font-size: 0.9rem;
}
.mst-consent-actions { display: flex; gap: 0.7rem; }
.mst-consent-actions .mst-btn-outline { width: auto; }

/* ------------------------------------------ Transfer results & forms */
.mst-results { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.mst-result-card {
	display: grid; grid-template-columns: 180px 1fr auto; gap: 1.25rem; align-items: center;
	background: #fff; border: 1px solid var(--mst-border); border-radius: var(--mst-radius-card);
	padding: 1.1rem 1.3rem; box-shadow: var(--mst-shadow-card);
}
@media (max-width: 820px) { .mst-result-card { grid-template-columns: 1fr; } }
.mst-result-media img { width: 100%; border-radius: var(--mst-radius-field); }
.mst-result-name { font-weight: 800; font-size: 1.05rem; margin: 0 0 0.1rem; }
.mst-result-model { color: var(--mst-muted); font-size: 0.85rem; margin: 0 0 0.5rem; }
.mst-result-specs { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.85rem; color: var(--mst-muted); list-style: none; margin: 0; padding: 0; }
.mst-result-price { text-align: end; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.mst-result-total { font-size: 1.35rem; font-weight: 800; color: var(--mst-teal); }
.mst-result-basis { font-size: 0.8rem; color: var(--mst-muted); }
.mst-quote-note {
	background: var(--mst-teal-tint); border: 1px solid var(--mst-teal); color: var(--mst-teal-deep);
	border-radius: var(--mst-radius-card); padding: 1.3rem 1.5rem; margin-top: 1.5rem;
}

/* Multi-step form */
.mst-form { background: #fff; border-radius: var(--mst-radius-card); box-shadow: var(--mst-shadow-card); padding: 2rem; max-width: 860px; margin: 0 auto; }
.mst-form-progress { display: flex; gap: 0.4rem; margin-bottom: 1.75rem; }
.mst-form-progress span { flex: 1; height: 6px; border-radius: 999px; background: var(--mst-sand-deep); }
.mst-form-progress span.done { background: var(--mst-orange); }
.mst-form-step[hidden] { display: none; }
.mst-form-step h3 { margin-top: 0; font-family: var(--wp--preset--font-family--heading); }
.mst-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.mst-form textarea { width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--mst-border); border-radius: var(--mst-radius-field); font-family: inherit; font-size: 0.9375rem; min-height: 100px; }
.mst-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.7rem; }
.mst-choice {
	position: relative; display: flex; align-items: center; gap: 0.55rem; background: var(--mst-sand);
	border: 1px solid var(--mst-border); border-radius: var(--mst-radius-field); padding: 0.75rem 0.9rem;
	font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.mst-choice input { accent-color: var(--mst-teal); width: 1.05rem; height: 1.05rem; }
.mst-choice:has(input:checked) { border-color: var(--mst-teal); background: var(--mst-teal-tint); color: var(--mst-teal-deep); }
.mst-form-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; }
.mst-form-error { color: #b3261e; font-size: 0.85rem; margin: 0.3rem 0 0; }
.mst-form-success { text-align: center; padding: 2rem 1rem; }
.mst-form-success h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.6rem; }
.mst-field .mst-error-msg { color: #b3261e; font-size: 0.8rem; margin-top: 0.25rem; display: none; }
.mst-field.has-error input, .mst-field.has-error select, .mst-field.has-error textarea { border-color: #b3261e; }
.mst-field.has-error .mst-error-msg { display: block; }

/* Number stepper for passengers */
.mst-stepper { display: flex; align-items: center; border: 1px solid var(--mst-border); border-radius: var(--mst-radius-field); overflow: hidden; }
.mst-stepper button { background: var(--mst-sand); border: none; width: 42px; height: 42px; font-size: 1.2rem; cursor: pointer; color: var(--mst-teal); }
.mst-stepper input { border: none; text-align: center; width: 100%; -moz-appearance: textfield; }
.mst-stepper input::-webkit-outer-spin-button, .mst-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Utility */
.mst-text-center { text-align: center; }
.mst-mw-narrow { max-width: 640px; margin-inline: auto; }
.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; word-wrap: normal;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Ensure [hidden] always wins over display rules */
[hidden] { display: none !important; }

/* ==========================================================================
   Enhanced transfer location search (hybrid Google + internal directory)
   Reuses the approved design tokens; no unrelated sections are affected.
   ========================================================================== */

.mst-loc-panel {
	position: absolute;
	inset: calc(100% + 4px) 0 auto 0;
	background: #fff;
	border: 1px solid var(--mst-border);
	border-radius: var(--mst-radius-field);
	box-shadow: var(--mst-shadow-card-hover);
	z-index: 60;
	max-height: 340px;
	overflow-y: auto;
	padding: 6px;
	text-align: start;
}

.mst-loc-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 9px;
	cursor: pointer;
}
.mst-loc-option:hover,
.mst-loc-option.is-active { background: var(--mst-teal-tint); }

.mst-loc-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mst-sand-deep);
	border-radius: 8px;
	font-size: 15px;
}

.mst-loc-text { display: flex; flex-direction: column; min-width: 0; }
.mst-loc-text strong {
	font-size: 0.92rem;
	color: var(--mst-charcoal);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mst-loc-panel .mst-loc-meta,
.mst-loc-card .mst-loc-meta {
	font-size: 0.78rem;
	color: var(--mst-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mst-loc-heading {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mst-muted);
	padding: 10px 10px 4px;
}

.mst-loc-loading,
.mst-loc-empty,
.mst-loc-error {
	padding: 12px 10px;
	font-size: 0.85rem;
	color: var(--mst-muted);
}
.mst-loc-error { color: #a4442e; }
.mst-loc-retry {
	background: none;
	border: none;
	color: var(--mst-orange);
	font-weight: 700;
	cursor: pointer;
	padding: 0 4px;
	text-decoration: underline;
}

/* Confirmation card — "Exact location confirmed" */
.mst-loc-confirm { margin-top: 4px; }
.mst-loc-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border: 1.5px solid #cfe4d9;
	background: #f4faf7;
	border-radius: var(--mst-radius-field);
	text-align: start;
}
.mst-loc-card .mst-loc-text strong { white-space: normal; }
.mst-loc-status {
	font-size: 0.75rem;
	font-weight: 700;
	color: #1c7a4f;
}
.mst-loc-card[data-status="manual_quote_required"],
.mst-loc-card[data-status="inactive"] {
	border-color: #ecd9b8;
	background: #fdf8ee;
}
.mst-loc-card[data-status="manual_quote_required"] .mst-loc-status,
.mst-loc-card[data-status="inactive"] .mst-loc-status { color: #a97614; }

.mst-loc-actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}
.mst-loc-map { font-size: 1rem; text-decoration: none; }
.mst-loc-change {
	background: none;
	border: 1px solid var(--mst-border);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--mst-charcoal);
	cursor: pointer;
}
.mst-loc-change:hover { border-color: var(--mst-orange); color: var(--mst-orange); }

.mst-loc-note {
	margin: 6px 2px 0;
	font-size: 0.8rem;
	color: #a97614;
}
.mst-loc-unsupported {
	padding: 10px 12px;
	border: 1.5px solid #ecd9b8;
	background: #fdf8ee;
	border-radius: var(--mst-radius-field);
	font-size: 0.85rem;
}
.mst-loc-unsupported p { margin: 0 0 8px; }

/* Route confirmation preview */
.mst-route-preview { margin: 10px 0 2px; }
.mst-route-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--mst-sand);
	border-radius: var(--mst-radius-field);
	text-align: start;
}
.mst-route-line {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}
.mst-route-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mst-teal);
}
.mst-route-dot-end { background: var(--mst-orange); }
.mst-route-bar { width: 2px; height: 18px; background: var(--mst-border); }
.mst-route-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mst-route-points { font-size: 0.86rem; color: var(--mst-charcoal); }
.mst-route-note a { color: var(--mst-teal); }

/* Luggage & requirements step */
.mst-req-step {
	background: #fff;
	border: 1px solid var(--mst-border);
	border-radius: var(--mst-radius-card);
	padding: 14px;
	margin-top: 10px;
	text-align: start;
}
.mst-req-title { margin: 0 0 10px; font-size: 1.05rem; font-family: var(--wp--preset--font-family--body); font-weight: 700; }
.mst-req-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	grid-column: 1 / -1;
}
.mst-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 0;
}
.mst-check input { width: auto; }
.mst-btn-small { padding: 6px 12px; font-size: 0.8rem; }
.mst-btn-secondary { background: var(--mst-teal); color: #fff !important; }
.mst-btn-secondary:hover { background: var(--mst-teal-deep); }

/* Field error state for unconfirmed locations */
.mst-field.has-error .mst-loc-input { border-color: #c0492c; }

@media (max-width: 640px) {
	.mst-loc-panel { max-height: 280px; }
	.mst-loc-card { flex-wrap: wrap; }
	.mst-loc-actions { margin-inline-start: 0; }
}

.mst-cross-border { margin: 2px 0 8px; color: var(--mst-muted); font-size: 0.82rem; }

/* ==========================================================================
   Hotel finder (searchable selector) + suggestion labels
   ========================================================================== */

.mst-loc-label {
display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px;
font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.5;
}
.mst-loc-label-instant { background: #e5f6ef; color: #0e7a52; }
.mst-loc-label-confirm { background: #fff4e0; color: #a05e03; }
.mst-loc-label-manual  { background: #eef1f6; color: #4a5568; }

.mst-loc-more { border-top: 1px solid var(--mst-sand-deep); }
.mst-loc-morebtn {
display: block; width: 100%; padding: 10px 14px; background: none; border: 0;
text-align: start; font-size: 0.85rem; font-weight: 600; color: var(--mst-orange-deep); cursor: pointer;
}
.mst-loc-morebtn:hover { background: var(--mst-sand); }
.mst-loc-cantfind { color: var(--mst-teal); }

.mst-loc-unknown {
background: #fff; border: 1px solid var(--mst-border); border-radius: var(--mst-radius-field);
padding: 14px; display: grid; gap: 8px;
}
.mst-loc-unknown p { margin: 0; font-size: 0.85rem; color: var(--mst-charcoal); }
.mst-loc-unknown .mst-input {
width: 100%; padding: 8px 10px; border: 1px solid var(--mst-border);
border-radius: var(--mst-radius-field); font: inherit; font-size: 0.85rem;
}
.mst-loc-unknown-actions { display: flex; align-items: center; gap: 10px; }
.mst-loc-unknown .mst-loc-change { background: none; border: 0; color: var(--mst-muted); cursor: pointer; font-size: 0.85rem; text-decoration: underline; }

/* Selector modal */
.mst-hotel-selector-overlay {
position: fixed; inset: 0; z-index: 10000; background: rgba(19,26,34,.55);
display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px;
}
.mst-hotel-selector {
background: #fff; border-radius: var(--mst-radius-card);
box-shadow: var(--mst-shadow-card-hover); width: 100%; max-width: 560px; max-height: 82vh;
display: flex; flex-direction: column; padding: 16px; gap: 10px;
}
.mst-hs-head { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; }
.mst-hs-close { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--mst-muted); cursor: pointer; padding: 2px 8px; }
.mst-hs-search {
width: 100%; padding: 11px 14px; border: 1.5px solid var(--mst-border);
border-radius: var(--mst-radius-field); font: inherit; font-size: 0.95rem;
}
.mst-hs-search:focus { border-color: var(--mst-teal); }
.mst-hs-areas { display: flex; flex-wrap: wrap; gap: 6px; max-height: 84px; overflow-y: auto; }
.mst-hs-chip {
border: 1px solid var(--mst-border); background: #fff; border-radius: 999px;
padding: 4px 12px; font-size: 0.75rem; font-weight: 600; color: var(--mst-charcoal);
cursor: pointer; white-space: nowrap;
}
.mst-hs-chip.is-active { background: var(--mst-teal-deep); border-color: var(--mst-teal-deep); color: #fff; }
.mst-hs-results { overflow-y: auto; border: 1px solid var(--mst-sand-deep); border-radius: var(--mst-radius-field); min-height: 120px; }
.mst-hs-results .mst-loc-option { display: flex; gap: 10px; padding: 10px 14px; cursor: pointer; align-items: flex-start; }
.mst-hs-results .mst-loc-option:hover { background: var(--mst-sand); }
.mst-hs-results .mst-loc-heading, .mst-loc-panel .mst-loc-heading {
padding: 10px 14px 4px; font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--mst-muted);
}
.mst-hs-results .mst-loc-icon { flex: 0 0 auto; }
.mst-hs-results .mst-loc-text { display: flex; flex-direction: column; }
.mst-hs-results .mst-loc-meta { font-size: 0.78rem; color: var(--mst-muted); }

@media (max-width: 640px) {
.mst-hotel-selector-overlay { padding: 0; align-items: stretch; }
.mst-hotel-selector { max-width: none; max-height: none; border-radius: 0; }
}


/* ========================================================================
   Homepage compact refinement — v1.3.3
   ======================================================================== */
.mst-section-compact {
	padding-top: 3.75rem;
	padding-bottom: 3.75rem;
}
.mst-section-head-compact { margin-bottom: 1.5rem; }

/* Compact travel styles */
.mst-style-grid-compact { gap: 0.85rem; }
.mst-style-grid-compact .mst-style-card {
	min-height: 64px;
	padding: 0.85rem 1rem;
	border-radius: 0.8rem;
	font-size: 0.95rem;
	line-height: 1.25;
}

/* Compact Why Travel With Us */
.mst-why-grid-compact { gap: 0.85rem; }
.mst-why-grid-compact .mst-why-item {
	padding: 1rem 1.1rem;
	min-height: 0;
	border-radius: 0.8rem;
}
.mst-why-grid-compact .mst-why-item h3 {
	font-size: 0.96rem;
	line-height: 1.3;
	margin-bottom: 0.2rem;
}
.mst-why-grid-compact .mst-why-item p {
	font-size: 0.84rem;
	line-height: 1.5;
}

/* Compact popular routes */
.mst-route-chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
}
.mst-route-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 58px;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--mst-border);
	border-radius: 0.8rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(28,37,38,.04);
	color: var(--mst-charcoal);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}
.mst-route-chip b { color: var(--mst-teal); font-size: 1.05rem; }
.mst-route-chip:hover {
	border-color: var(--mst-teal);
	background: var(--mst-teal-tint);
	color: var(--mst-teal-deep);
}

/* Compact vehicle illustration cards. No real vehicle photos required. */
.mst-vehicle-slider {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.85rem;
}
.mst-vehicle-choice {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem;
	border: 1px solid var(--mst-border);
	border-radius: 0.9rem;
	background: #fff;
	box-shadow: var(--mst-shadow-card);
}
.mst-vehicle-illustration {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: 0.8rem;
	background: var(--mst-teal-tint);
	font-size: 1.8rem;
	line-height: 1;
}
.mst-vehicle-choice h3 {
	margin: 0 0 0.2rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 800;
}
.mst-vehicle-choice p,
.mst-vehicle-choice small {
	display: block;
	margin: 0;
	color: var(--mst-muted);
	font-size: 0.82rem;
	line-height: 1.4;
}
.mst-vehicle-choice small { color: var(--mst-teal-deep); margin-top: 0.15rem; }

@media (max-width: 900px) {
	.mst-route-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mst-vehicle-slider {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 0.75rem;
		padding-bottom: 0.35rem;
		-webkit-overflow-scrolling: touch;
	}
	.mst-vehicle-choice {
		flex: 0 0 min(78vw, 320px);
		scroll-snap-align: start;
	}
}
@media (max-width: 540px) {
	.mst-section-compact {
		padding-top: 2.25rem;
		padding-bottom: 2.25rem;
	}
	.mst-section-head-compact { margin-bottom: 1.05rem; }
	.mst-section-head-compact h2 { font-size: clamp(1.75rem, 9vw, 2.35rem); line-height: 1.08; }
	.mst-style-grid-compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
	}
	.mst-style-grid-compact .mst-style-card {
		min-height: 54px;
		padding: 0.65rem 0.55rem;
		font-size: 0.82rem;
	}
	.mst-why-grid-compact {
		grid-template-columns: 1fr;
		gap: 0.65rem;
	}
	.mst-why-grid-compact .mst-why-item { padding: 0.85rem 0.95rem; }
	.mst-why-grid-compact .mst-why-item h3 { font-size: 0.92rem; }
	.mst-why-grid-compact .mst-why-item p { font-size: 0.8rem; }
	.mst-route-chips { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
	.mst-route-chip {
		min-height: 52px;
		padding: 0.65rem 0.55rem;
		font-size: 0.76rem;
		gap: 0.28rem;
	}
	.mst-vehicle-choice { padding: 0.85rem; }
	.mst-vehicle-illustration { width: 48px; height: 48px; font-size: 1.55rem; }
}
