/* Mirna Travel post-launch UI corrections: intentionally narrow in scope. */

/* Site-wide focus-ring baseline. Most interactive elements (nav/footer
   links, every page's own .mirna-submit search button, the airport swap
   button, etc.) had no custom focus styling at all, so they fell back to
   the browser's raw default :focus outline -- a sharp blue rectangle,
   particularly ugly on a rounded pill button, and (unlike this project's
   many existing bespoke :focus-visible rules elsewhere, e.g. the language
   selector or the flight date picker) it showed on an ordinary mouse
   click too, not just keyboard navigation, since plain :focus always
   matches regardless of input method. This is the shared, global
   correction: outline:none only for the non-:focus-visible case (so a
   mouse/touch click shows nothing extra), restored as a clear ring under
   :focus-visible (so Tab/keyboard navigation keeps a visible, accessible
   indicator). This is a floor, not a replacement -- every element that
   already has its own more specific :focus-visible rule elsewhere keeps
   it unchanged (a class selector always outranks these tag selectors),
   this only fills the gap for everything that had nothing. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
	outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

/* Keep authoritative Latin location names and IATA codes readable in RTL UI. */
html[dir="rtl"] input[data-mirna-airport-input],
html[dir="rtl"] input[data-mirna-hotel-destination-input],
html[dir="rtl"] input[data-mirna-car-location-input],
html[dir="rtl"] .mirna-airport-results,
html[dir="rtl"] .mirna-hotel-destination-results,
html[dir="rtl"] .mirna-car-location-results,
html[dir="rtl"] .mirna-airport-option,
html[dir="rtl"] .mirna-hotel-destination-option,
html[dir="rtl"] .mirna-car-location-option {
	direction: ltr !important;
	text-align: left !important;
	unicode-bidi: isolate;
}

/* Arabic ONLY, origin ("من") and destination ("إلى") fields: the shared
   rule above was written for short Latin-only place names/IATA codes and
   still applies correctly everywhere else (every other language, which
   never matches html[lang="ar"] at all). Once a field holds localized
   Arabic content (e.g. "ميلانو · جميع المطارات" or a long airport name),
   forcing the whole box LTR/left-aligned either left an unnatural empty
   gap on the right or -- for "من" specifically, confirmed visually -- made
   the SAME selected airport render truncated/scrolled to a different,
   inconsistent-looking position than "إلى" showed for that identical
   value, even though the underlying confirmed string was byte-identical
   in both fields. This override was originally added for "إلى" only; "من"
   gets the exact same declaration here (not a separate, divergence-prone
   copy) so the two fields are guaranteed to always render identically for
   the same airport. unicode-bidi:isolate is kept, so an embedded
   bidi-isolated code segment like "(CMN)" still renders LTR-readable
   regardless. Higher specificity (an ID selector) than the shared rule
   above, so no extra !important arms race is needed to win the cascade --
   kept anyway for parity with that rule's own defensiveness. */
html[lang="ar"] input#mirna-flight-origin,
html[lang="ar"] input#mirna-flight-destination {
	direction: rtl !important;
	text-align: right !important;
}

/* A stable calendar glyph with the native WebKit picker hit area preserved. */
input[type="date"],
input[type="datetime-local"] {
	box-sizing: border-box;
	min-width: 0;
	padding-inline-end: 42px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b2947' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 18px 18px !important;
}
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="datetime-local"] {
	direction: ltr;
	text-align: left;
}
@supports selector(input::-webkit-calendar-picker-indicator) {
	input[type="date"]::-webkit-calendar-picker-indicator,
	input[type="datetime-local"]::-webkit-calendar-picker-indicator {
		position: absolute;
		right: 4px;
		width: 36px;
		height: 100%;
		margin: 0;
		opacity: 0;
		cursor: pointer;
	}
	input[type="date"], input[type="datetime-local"] { position: relative; }
}

/* Flight dates keep separate submitted values behind one compact control.
   Flexible Dates now lives in .mirna-search-left-block, alongside Trip
   Type, rather than under this control -- so this is a plain single-purpose
   field again, the same shape as Origin/Destination/Travellers/Class. */
.mirna-flight-date-control {
	position: relative;
	flex: 1 1 220px;
	min-width: 180px;
}
.mirna-flight-date-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	background: rgba(255,255,255,.96);
	color: #0f2947;
	font: inherit;
	font-size: .84rem;
	text-align: start;
	cursor: pointer;
}
.mirna-flight-date-trigger:focus-visible { outline: 3px solid rgba(59,130,246,.55); outline-offset: 2px; }
[data-mirna-flight-date-summary] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mirna-flight-date-trigger__icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b2947' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mirna-flight-date-panel {
	position: absolute;
	z-index: 1001;
	display: block;
	width: min(500px, calc(100vw - 24px));
	padding: 12px;
	border: 1px solid rgba(148,163,184,.35);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(3,18,35,.24);
	color: #0b2947;
	overflow: auto;
}
.mirna-flight-date-panel[hidden] { display: none !important; }
.mirna-flight-calendar-backdrop {
	position: absolute;
	z-index: 1000;
	inset: 0;
	background: transparent;
}
.mirna-flight-date-panel__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
}
.mirna-flight-date-panel__top > strong {
	font-size: .88rem;
	color: #0b2947;
}
.mirna-flight-date-nav { display: flex; gap: 6px; }
.mirna-flight-date-nav button {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #cbd5e1;
	border-radius: 50%;
	background: #fff;
	color: #0b2947;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}
.mirna-flight-date-nav button:hover { background: #eff6ff; border-color: #60a5fa; }
.mirna-flight-date-nav button:disabled { opacity: .35; cursor: not-allowed; }
.mirna-flight-date-nav button:focus-visible,
.mirna-flight-calendar-days button:focus-visible { outline: 3px solid rgba(37,99,235,.45); outline-offset: 2px; }
.mirna-flight-calendar-months {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.mirna-flight-calendar-month h3 {
	margin: 0 0 6px;
	color: #0b2947;
	font-size: .92rem;
	font-weight: 800;
	text-align: center;
}
.mirna-flight-calendar-weekdays,
.mirna-flight-calendar-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2px;
}
.mirna-flight-calendar-weekdays { margin-bottom: 4px; }
.mirna-flight-calendar-weekdays span {
	padding: 3px 0;
	color: #64748b;
	font-size: .66rem;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
}
.mirna-flight-calendar-days > span,
.mirna-flight-calendar-days button { min-width: 0; min-height: 30px; }
.mirna-flight-calendar-days button {
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #17324d;
	font: inherit;
	font-size: .84rem;
	font-weight: 700;
	cursor: pointer;
}
.mirna-flight-calendar-days button:hover:not(:disabled) { background: #dbeafe; }
.mirna-flight-calendar-days button:disabled { color: #cbd5e1; cursor: not-allowed; }
.mirna-flight-calendar-days button.is-today { box-shadow: inset 0 0 0 1px #3b82f6; }
.mirna-flight-calendar-days button.is-in-range { border-radius: 6px; background: #e0f2fe; color: #075985; }
.mirna-flight-calendar-days button.is-departure,
.mirna-flight-calendar-days button.is-return {
	background: linear-gradient(135deg,#1565d8,#08a6dd);
	color: #fff;
	box-shadow: 0 5px 13px rgba(21,101,216,.25);
}
.mirna-flight-date-panel__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e2e8f0;
}
.mirna-flight-date-panel__actions[hidden] { display: none !important; }
/* Ghost/secondary action, not a solid CTA: "Cerca voli" is the flow's one
   primary action, and a heavy blue rectangle here competed with it for
   visual weight on every calendar open. */
.mirna-flight-date-confirm {
	min-width: 0;
	width: auto;
	min-height: 34px;
	padding: 6px 14px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #1565d8;
	font: inherit;
	font-size: .84rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.mirna-flight-date-confirm:hover:not(:disabled) { background: rgba(21,101,216,.08); }
.mirna-flight-date-confirm:disabled { opacity: .42; cursor: not-allowed; }
.mirna-flight-date-confirm:focus-visible { outline: 3px solid rgba(37,99,235,.45); outline-offset: 2px; }
.mirna-flight-date-panel.is-mobile {
	top: auto !important;
	bottom: max(12px, env(safe-area-inset-bottom));
	left: 12px !important;
	right: auto;
	/* Compact sheet anchored to the date field (not edge-to-edge). */
	width: min(340px, calc(100vw - 24px));
	max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + 18px));
	padding: 12px;
	overflow: auto;
}
/* iPhone Safari calendar position fix (2026-09-22): .mirna-flight-date-
   panel's base rule (above) is position:absolute, and on mobile widths
   body never gets position:relative (that only happens at >=1400px, in
   mirna-flight-results.css) -- so this panel's actual containing block
   falls back to the initial containing block, which is anchored to the
   TOP of the DOCUMENT, not the current viewport. Its bottom/left/right
   pixel values above then place it within the page's first screenful
   regardless of scroll position, so tapping the date trigger after
   scrolling down opens the panel back up near the top of the page --
   confirmed by reproducing this exact geometry via CDP (panel rendered
   well above the trigger it was supposed to open under) and matches the
   reported "calendar opens at the top of the page" symptom exactly.
   position:fixed anchors directly to the viewport instead, regardless of
   scroll or containing-block ancestry, so the same bottom/left/right
   values now correctly place it in the current visible screen. Scoped
   to @supports (-webkit-touch-callout: none) -- true only on genuine
   iOS Safari/WebKit, never Android Chrome (verified: CSS.supports(
   '-webkit-touch-callout','none') is false in Chromium) -- so Android's
   existing .is-mobile behavior (position:absolute, unchanged) and
   desktop's own separate positionDatePanel()-computed top/left path are
   both completely untouched. */
/* (2026-09-24) Superseded: iOS now uses the same page-anchored placement
   as Android (positionDatePanel in mirna-flight-results.js), so the sheet
   scrolls with the page instead of staying fixed to the viewport. */
.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-months { grid-template-columns: 1fr; gap: 0; }
.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-days > span,
.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-days button { min-height: 38px; }
/* Compact phone calendar (<600px, 2026-09-24): smaller padding, gaps,
   header and day cells so the sheet no longer covers most of the screen.
   Width (296px max) is set inline by positionDatePanel(). Position/locking,
   tablet (600px+) and desktop are unchanged. */
@media (max-width: 599px) {
	.mirna-flight-date-panel.is-mobile { padding: 10px; border-radius: 12px; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-date-panel__top { gap: 8px; margin-bottom: 4px; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-date-panel__top > strong { font-size: .8rem; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-date-nav button { width: 28px; height: 28px; font-size: 1.05rem; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-month h3 { margin: 0 0 4px; font-size: .84rem; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-weekdays,
	.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-days { gap: 1px; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-weekdays { margin-bottom: 2px; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-weekdays span { padding: 2px 0; font-size: .6rem; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-days > span,
	.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-days button { min-height: 32px; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-calendar-days button { font-size: .8rem; border-radius: 8px; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-date-panel__actions { margin-top: 6px; padding-top: 6px; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-date-confirm { min-height: 32px; padding: 4px 12px; }
	/* Phone modal (centred by centerPhoneDatePanel() in mirna-flight-results.js):
	   only a very short viewport scrolls the panel internally -- the header
	   row (month label + prev/next) stays pinned so navigation stays usable. */
	.mirna-flight-date-panel.is-mobile { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.mirna-flight-date-panel.is-mobile .mirna-flight-date-panel__top {
		position: sticky;
		top: -10px;
		z-index: 1;
		margin: -10px -10px 4px;
		padding: 10px 10px 4px;
		background: #fff;
	}
	/* Page scroll lock while the phone calendar modal is open. */
	html.mirna-calendar-phone-open,
	html.mirna-calendar-phone-open body { overflow: hidden !important; }
}
/* Homepage phone search (<=640px): the form is a flex COLUMN there
   (front-page.html, max-width:900px), so the date control's base
   `flex: 1 1 220px` (above) became a 220px HEIGHT -- a ~175px empty band
   under the date button before Travellers. The same breakpoint already
   resets .mirna-field-group to flex-basis:auto, but the date control is not
   a .mirna-field-group. Size it to its content on phones only. */
@media (max-width: 640px) {
	.mirna-home--hero .mirna-search-card--slim .mirna-flight-date-control { flex: 0 0 auto; }
	/* Phone trip options: One way | Round trip on one row (existing 2-column
	   grid), Flexible dates as a matching full-width second row -- same box,
	   18px control, spacing and 44px touch target as the trip-type choices.
	   The generic full-width `input` rule above must not stretch the
	   checkbox. Form logic/markup unchanged. */
	.mirna-home--hero .mirna-search-card--slim .mirna-trip-choice { margin-bottom: 0; }
	.mirna-home--hero .mirna-search-card--slim .mirna-flex-toggle {
		display: flex;
		align-items: center;
		align-self: stretch;
		gap: 8px;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		min-height: 44px;
		margin: 0;
		padding: 8px 10px;
		border: 1px solid rgba(255,255,255,.16);
		border-radius: 10px;
		font-size: .72rem;
		line-height: 1.25;
		white-space: normal;
	}
	.mirna-home--hero .mirna-search-card--slim .mirna-flex-toggle input[type="checkbox"] {
		width: 18px;
		max-width: 18px;
		height: 18px;
		margin: 0;
		padding: 0;
		flex: 0 0 18px;
	}
}
body:has(.mirna-flight-date-panel.is-mobile:not([hidden])) .mirna-flight-calendar-backdrop,
.mirna-flight-calendar-backdrop:has(+ .mirna-flight-date-panel.is-mobile) {
	background: rgba(3,18,35,.48);
}
/* Android/mobile calendar (2026-09-23, revised): the sheet itself stays
   position:absolute so it scrolls WITH the page; mirna-flight-results.js
   (positionDatePanel) places it once, in page coordinates, where it is
   visible when opened. Only the dimming backdrop is pinned to the viewport,
   so it always covers the visible screen and tapping outside still closes
   the calendar. .is-mobile is only set below 760px, so tablet (760-1024)
   and desktop (>1024) are unaffected. */
body:has(.mirna-flight-date-panel.is-mobile:not([hidden])) .mirna-flight-calendar-backdrop,
.mirna-flight-calendar-backdrop:has(+ .mirna-flight-date-panel.is-mobile) {
	position: fixed;
}
html[dir="rtl"] .mirna-flight-date-panel { direction: rtl; text-align: right; }

.mirna-home--hero .mirna-flight-airport-row {
	grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
	align-items: end;
}
.mirna-home--hero .mirna-airport-swap {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: #fff;
	font: inherit;
	font-size: 1.2rem;
	cursor: pointer;
	touch-action: manipulation;
}
.mirna-home--hero .mirna-airport-swap:hover { background: rgba(255,255,255,.2); }
.mirna-home--hero .mirna-airport-swap:focus-visible { outline: 3px solid rgba(96,165,250,.72); outline-offset: 2px; }

/* Approved transparent logo assets should composite without added effects. */
.mirna-official-logo img,
.mirna-footer-logo img {
	background: transparent !important;
	box-shadow: none !important;
	filter: none !important;
}

/* Prevent translated copy and long identifiers from creating page overflow. */
.mirna-home,
.mirna-search-card,
.mirna-advertising,
.mirna-ad-campaign,
.mirna-ad-package,
.mirna-footer,
.mirna-account,
.mirna-my-booking {
	min-width: 0;
}
.mirna-advertising h1,
.mirna-advertising h2,
.mirna-advertising h3,
.mirna-advertising h4,
.mirna-advertising p,
.mirna-advertising a,
.mirna-advertising button,
.mirna-footer a,
.mirna-footer p,
.mirna-account a,
.mirna-account p,
.mirna-my-booking label,
.mirna-my-booking button {
	overflow-wrap: anywhere;
	word-break: normal;
}

@media (max-width: 640px) {
	/* Preserve every wide cinematic scene on portrait screens. The scene's
	   original image remains the only source: a softly filled backdrop avoids
	   empty bands while the foreground layer uses contain so landmarks are not
	   lost to the extreme crop produced by cover on an iPhone viewport. */
	.mirna-home--hero .mirna-cinematic__scene {
		background-size: 0 0;
		background-color: #071426;
	}
	.mirna-home--hero .mirna-cinematic__scene::before,
	.mirna-home--hero .mirna-cinematic__scene::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: inherit;
		background-repeat: no-repeat;
		background-position: center;
		pointer-events: none;
	}
	.mirna-home--hero .mirna-cinematic__scene::before {
		inset: -18px;
		background-size: cover;
		filter: blur(14px) brightness(.48) saturate(.9);
	}
	.mirna-home--hero .mirna-cinematic__scene::after {
		background-size: contain;
		filter: saturate(1.03) brightness(.94);
	}

	.mirna-home--hero .mirna-search-card--slim { padding: 14px 12px; }
	.mirna-home--hero .mirna-flight-airport-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.mirna-home--hero .mirna-airport-swap {
		justify-self: center;
		width: 44px !important;
		max-width: 44px !important;
		height: 44px;
		margin: -2px 0;
		transform: rotate(90deg);
	}
	.mirna-home--hero .mirna-search-card--slim .mirna-service-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-radius: 16px;
		gap: 5px;
	}
	.mirna-home--hero .mirna-search-card--slim .mirna-service-tab {
		min-width: 0;
		min-height: 44px;
		padding: 7px 6px;
		border-radius: 12px;
		font-size: clamp(.68rem, 3.2vw, .78rem);
		line-height: 1.2;
		white-space: normal;
		text-align: center;
	}
	.mirna-home--hero .mirna-search-card--slim .mirna-field-group,
	.mirna-home--hero .mirna-search-card--slim .mirna-flight-date-control,
	.mirna-home--hero .mirna-search-card--slim input,
	.mirna-home--hero .mirna-search-card--slim select,
	.mirna-home--hero .mirna-search-card--slim button,
	.mirna-hotel-search-card input,
	.mirna-hotel-search-card select,
	.mirna-car-search-card input,
	.mirna-car-search-card select { width: 100%; max-width: 100%; }
	/* Travellers and Class share a row on phones with enough width for both
	   at a comfortable, unclipped size (auto-fit + a 180px floor means the
	   grid picks 2 columns only when two 180px+ tracks actually fit side by
	   side, and silently falls back to a single stacked column on narrower
	   phones -- no fixed breakpoint guess needed, and no risk of forcing two
	   columns where a longer translated cabin-class label would clip). */
	.mirna-home--hero .mirna-search-card--slim .mirna-passenger-block > .mirna-field-row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 10px;
		width: 100%;
	}
	/* The broad full-width input rule above is correct for form fields but
	   must not expand native trip-type radios. Give each choice its own stable,
	   touch-friendly grid cell and restore the indicator's intrinsic size. */
	.mirna-home--hero .mirna-search-card--slim .mirna-trip-choice {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 8px;
		width: 100%;
		margin-bottom: 10px;
	}
	.mirna-home--hero .mirna-search-card--slim .mirna-trip-choice label {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		min-height: 44px;
		padding: 8px 10px;
		border: 1px solid rgba(255,255,255,.16);
		border-radius: 10px;
		line-height: 1.25;
		white-space: normal;
	}
	.mirna-home--hero .mirna-search-card--slim .mirna-trip-choice input[type="radio"] {
		width: 18px;
		max-width: 18px;
		height: 18px;
		margin: 0;
		padding: 0;
		flex: 0 0 18px;
	}
	/* .mirna-passenger-panel is intentionally excluded here: it now has its
	   own always-on compact, viewport-clamped width (see front-page.html's
	   inline styles), so it must not be forced back to full-width on phones.
	   .mirna-rooms-panel (Hotels) and .mirna-compact-select-panel are
	   unrelated to this task and keep this exact behavior unchanged. */
	.mirna-rooms-panel,
	.mirna-compact-select-panel {
		inset-inline: 0 !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: calc(100vw - 48px) !important;
	}
	.mirna-utility-bar__inner { width: calc(100% - 20px); }
	.mirna-utility-bar__meta { gap: 5px; }
	.mirna-footer-main { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
	.mirna-flight-date-control { width: 100%; min-width: 0; }
	.mirna-flight-date-panel {
		position: absolute;
		top: auto;
		bottom: max(12px, env(safe-area-inset-bottom));
		left: 12px;
		right: 12px;
		width: auto;
		grid-template-columns: 1fr;
		max-height: calc(100dvh - 24px);
		overflow: auto;
	}
}

@media (max-width: 360px) {
	.mirna-official-logo--wordmark img { width: 112px !important; }
	.mirna-home--hero .mirna-search-card--slim { padding-inline: 10px; }
	.mirna-home--hero .mirna-search-card--slim .mirna-service-tab { font-size: .67rem; }
}

/* MIRNA CARS — clean final Arabic search fields */
.mirna-car-datetime-display{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:8px 54px 8px 14px!important;
    border:1px solid #d7e2ee!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    color:#17324d!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    cursor:pointer!important;
    direction:rtl!important;
    text-align:right!important;
}
.mirna-car-datetime-display__value{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    direction:rtl!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    gap:3px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-align:right!important;
}
.mirna-car-date-part,
.mirna-car-date-time{
    direction:ltr!important;
    unicode-bidi:isolate!important;
    flex:0 0 auto!important;
}
.mirna-car-date-comma{flex:0 0 auto!important;margin:0 2px!important}
.mirna-car-datetime-display__calendar{
    position:absolute!important;
    left:10px!important;
    right:auto!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    display:grid!important;
    place-items:center!important;
    width:32px!important;
    height:32px!important;
    margin:0!important;
    border-radius:9px!important;
    background:none!important;
    box-shadow:none!important;
    pointer-events:none!important;
}
.mirna-car-datetime-display__calendar:before{
    content:""!important;
    width:18px!important;
    height:18px!important;
    background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231565d8%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%275%27 width=%2718%27 height=%2716%27 rx=%273%27/%3E%3Cpath d=%27M8 3v4M16 3v4M3 10h18%27/%3E%3C/svg%3E") center/contain no-repeat!important;
}
.mirna-car-compact-grid [data-mirna-car-location-input],
.mirna-car-compact-grid [data-mirna-airport-input]{
    direction:rtl!important;
    text-align:right!important;
    padding-right:14px!important;
}
.mirna-car-compact-grid [data-mirna-car-location-input]::placeholder,
.mirna-car-compact-grid [data-mirna-airport-input]::placeholder{
    direction:rtl!important;
    text-align:right!important;
}
.mirna-car-calendar-panel{
    width:min(390px,calc(100vw - 24px));
    z-index:1101;
}
.mirna-car-calendar-panel .mirna-flight-calendar-months{grid-template-columns:1fr}
/* Pickup / Return: DATE box + TIME box side by side (JS-built). The date box
   opens the date-only calendar; the time box opens the small wheel picker
   below (same wheel design as the Hotels time fields). */
.mirna-car-dt-pair{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:8px;min-width:0}
.mirna-car-time-trigger{display:flex!important;align-items:center;justify-content:space-between;gap:6px;width:100%;min-width:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.mirna-car-time-trigger svg{flex:none;color:#64748b}
.mirna-car-time-trigger__value{overflow:hidden;text-overflow:ellipsis}
.mirna-car-time-panel{position:absolute;top:calc(100% + 6px);z-index:1100;width:220px;box-sizing:border-box;padding:12px;background:#fff;border:1px solid #dbeafe;border-radius:14px;box-shadow:0 16px 36px rgba(15,23,42,.16);direction:rtl}
.mirna-car-time-panel[hidden]{display:none}
.mirna-car-time-panel__cols{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:6px;direction:ltr}
.mirna-car-time-panel__cols.is-12h{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr)}
.mirna-car-time-panel__head{display:block;margin:0 0 6px;color:#64748b;font-size:.72rem;font-weight:800;text-align:center}
.mirna-car-time-panel__sep{padding-bottom:86px;color:#0f172a;font-size:1.1rem;font-weight:800}
.mirna-car-wheel{position:relative;height:180px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;padding-block:72px;box-sizing:border-box;border-radius:12px;outline:none;background:linear-gradient(#eff6ff,#eff6ff) center/100% 36px no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%)}
.mirna-car-wheel::-webkit-scrollbar{display:none}
.mirna-car-wheel:focus-visible{box-shadow:0 0 0 2px rgba(37,99,235,.35)}
.mirna-car-wheel__item{height:36px;line-height:36px;scroll-snap-align:center;text-align:center;cursor:pointer;color:#64748b;font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;user-select:none}
.mirna-car-wheel__item[aria-selected="true"]{color:#1d4ed8;font-size:1.1rem;font-weight:800}
.mirna-car-clock-toggle{display:flex;gap:2px;margin:0 0 10px;padding:3px;border-radius:10px;background:#f1f5f9}
.mirna-car-clock-toggle button{flex:1;height:28px;border:0;border-radius:8px;background:transparent;color:#64748b;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.mirna-car-clock-toggle button[aria-pressed="true"]{background:#fff;color:#1d4ed8;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.mirna-car-time-panel__done{width:100%;margin-top:10px!important;padding:10px!important;border:none!important;border-radius:10px!important;background:#0f172a!important;color:#fff!important;font-weight:700!important;font-size:.82rem!important;cursor:pointer}
.mirna-car-time-trigger{height:auto!important;align-self:stretch}
/* Narrow desktop cells (~183px): compact both boxes so the full date and
   time stay visible; the time box sizes to its text, clock icon hidden. */
.mirna-field-group:has(> .mirna-car-dt-pair){container-type:inline-size}
@container (max-width:260px){
    .mirna-car-dt-pair{grid-template-columns:minmax(0,1fr) auto;gap:6px}
    html[dir="rtl"] [data-mirna-car-search="1"] .mirna-car-dt-pair .mirna-car-datetime-display{grid-template-columns:30px minmax(0,1fr)!important}
    html[dir="rtl"] [data-mirna-car-search="1"] .mirna-car-dt-pair .mirna-car-datetime-display__value{padding:0 6px!important}
    .mirna-car-time-trigger{padding:0 8px!important;justify-content:center}
    .mirna-car-time-trigger svg{display:none}
}
@media(max-width:759px){
    .mirna-car-calendar-panel{width:auto}
}

/* MIRNA CARS — date text right / icon left + all car locations RTL */
html[dir="rtl"] .mirna-car-datetime-display{padding:8px 54px 8px 14px!important}.mirna-car-datetime-display__value{position:absolute!important;right:14px!important;left:54px!important;width:auto!important;max-width:none!important;display:flex!important;flex-direction:row!important;direction:rtl!important;justify-content:flex-start!important;align-items:center!important;gap:3px!important;overflow:hidden!important;white-space:nowrap!important}.mirna-car-datetime-display__calendar{position:absolute!important;left:10px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important}.mirna-car-compact-grid input[type="text"],.mirna-car-compact-grid input[data-mirna-car-location-input],.mirna-car-compact-grid input[data-mirna-airport-input],.mirna-car-compact-grid [data-mirna-car-location-field] input,.mirna-car-compact-grid [data-mirna-car-dropoff-row] input{direction:rtl!important;text-align:right!important;padding-right:14px!important;padding-left:14px!important}.mirna-car-compact-grid input[type="text"]::placeholder,.mirna-car-compact-grid input[data-mirna-car-location-input]::placeholder,.mirna-car-compact-grid input[data-mirna-airport-input]::placeholder,.mirna-car-compact-grid [data-mirna-car-location-field] input::placeholder,.mirna-car-compact-grid [data-mirna-car-dropoff-row] input::placeholder{direction:rtl!important;text-align:right!important}

/* MIRNA CARS — FINAL Arabic date + location alignment
   Date/time field = 2-column grid (direction:ltr so column 1 is the physical
   LEFT): column 1 = 44px full-height calendar-icon section flush with the
   inner left edge (divider on its right); column 2 = the date/time text area
   (RTL, right-aligned, own 12px inner padding). Replaces the earlier
   padded-flex + negative-margin icon placement. */
html[dir="rtl"] [data-mirna-car-search="1"] .mirna-car-datetime-display{position:relative!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:stretch!important;direction:ltr!important;padding:0!important;overflow:hidden!important}html[dir="rtl"] [data-mirna-car-search="1"] .mirna-car-datetime-display__calendar{position:static!important;transform:none!important;grid-column:1!important;grid-row:1!important;align-self:stretch!important;display:grid!important;place-items:center!important;width:auto!important;height:auto!important;margin:0!important;border-right:1px solid #d7e2ee!important;border-radius:0!important}html[dir="rtl"] [data-mirna-car-search="1"] .mirna-car-datetime-display__value{position:static!important;grid-column:2!important;grid-row:1!important;align-self:center!important;min-width:0!important;width:auto!important;margin:0!important;padding:0 12px!important;display:block!important;direction:rtl!important;unicode-bidi:plaintext!important;text-align:right!important;white-space:nowrap!important;overflow:hidden!important}html[dir="rtl"] [data-mirna-car-search="1"] input[data-mirna-car-location-input],html[dir="rtl"] [data-mirna-car-search="1"] [data-mirna-car-dropoff-row] input,html[dir="rtl"] [data-mirna-car-search="1"] input[name*="location"]{direction:rtl!important;text-align:right!important;padding-right:16px!important;padding-left:16px!important}html[dir="rtl"] [data-mirna-car-search="1"] input[data-mirna-car-location-input]::placeholder,html[dir="rtl"] [data-mirna-car-search="1"] [data-mirna-car-dropoff-row] input::placeholder,html[dir="rtl"] [data-mirna-car-search="1"] input[name*="location"]::placeholder{direction:rtl!important;text-align:right!important}

/* MIRNA CARS — Arabic date visual order: DD/MM/YYYY then time */
html[dir="rtl"] [data-mirna-car-search="1"] .mirna-car-datetime-display__value{direction:rtl!important;unicode-bidi:isolate!important;text-align:right!important}html[dir="rtl"] [data-mirna-car-search="1"] .mirna-car-datetime-display__value bdi{direction:ltr!important;unicode-bidi:isolate!important;display:inline!important}

/* MIRNA CARS — real vehicle category images */
.mirna-car-category-card__icon{width:100%!important;height:112px!important;border-radius:14px!important;background:#f8fafc!important;overflow:hidden!important;margin:0 0 10px!important;display:flex!important;align-items:center!important;justify-content:center!important}.mirna-car-category-card__icon img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important;object-position:center!important;border-radius:12px!important}@media(max-width:767px){.mirna-car-category-card__icon{height:100px!important}}

/* MIRNA CARS — normalize category vehicle visual sizes */
.mirna-car-category-card:nth-child(1) .mirna-car-category-card__icon img{transform:scale(1.65)!important}.mirna-car-category-card:nth-child(2) .mirna-car-category-card__icon img{transform:scale(1.15)!important}

/* MIRNA CARS — prevent economy/sedan image clipping */
.mirna-car-category-card:nth-child(1) .mirna-car-category-card__icon img,.mirna-car-category-card:nth-child(2) .mirna-car-category-card__icon img{transform:none!important}

body.mirna-car-rental-page-active input[data-mirna-car-pickup-dt],body.mirna-car-rental-page-active input[data-mirna-car-dropoff-dt]{padding-left:42px!important;padding-right:12px!important;background-position:left 12px center!important}body.mirna-car-rental-page-active input[data-mirna-car-pickup-dt]::-webkit-calendar-picker-indicator,body.mirna-car-rental-page-active input[data-mirna-car-dropoff-dt]::-webkit-calendar-picker-indicator{left:4px!important;right:auto!important}

/* MIRNA AIRPORT AUTOCOMPLETE — shared dropdown chrome, moved here from
   front-page.html (previously homepage-only, so any other page reusing
   mirna-airport-search.js -- e.g. the Flight Results search bar --
   inherited no styling at all for this list once it's open: openList()
   re-parents it to <body>, so a page-scoped rule never matches either,
   and it fell back to position:static, rendering as a plain block at the
   bottom of the page instead of a dropdown under the field). This file is
   already loaded globally (see the RTL rules above, which already assume
   .mirna-airport-results is a site-wide concern), so this is the one
   shared source of truth for it now -- do not re-add a page-scoped copy.
   Fixed (not absolute) and positioned via JS getBoundingClientRect math
   (see mirna-airport-search.js's positionList()): an ancestor with
   overflow:hidden (the homepage hero, or any other section) would
   otherwise clip this list the moment it extends past that ancestor's
   edge -- fixed positioning escapes that entirely, the same way the
   flight date-range calendar already does. */
.mirna-airport-results {
	position: absolute;
	z-index: 1000;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: min(320px, 60vh);
	overflow-y: auto;
	background: #fff;
	border: 1px solid #dfe7f5;
	border-radius: 14px;
	box-shadow: 0 20px 46px rgba(15, 23, 42, 0.16);
}
.mirna-airport-option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 9px;
	cursor: pointer;
	font-size: 0.86rem;
}
.mirna-airport-option:hover,
.mirna-airport-option.is-active {
	background: #eff6ff;
}
.mirna-airport-option--metro {
	border-bottom: 1px solid #e2e8f0;
}
.mirna-airport-option--metro .mirna-airport-option__label {
	font-weight: 700;
}
.mirna-airport-option__code {
	font-weight: 800;
	color: #1d4ed8;
	letter-spacing: 0.02em;
}
.mirna-airport-option__label {
	min-width: 0;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mirna-airport-option__country {
	color: #94a3b8;
	font-size: 0.76rem;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.mirna-airport-results { max-height: min(260px, 50vh); }
	.mirna-airport-option { grid-template-columns: auto 1fr; }
	.mirna-airport-option__country { display: none; }
}
html[dir="rtl"] .mirna-airport-option { text-align: right; }

/* Mobile airport autocomplete compact layout */
@media (max-width: 640px) {
  .mirna-airport-results { padding: 4px; border-radius: 10px; }
  .mirna-airport-option { gap: 7px; padding: 8px 9px; font-size: 0.78rem; line-height: 1.25; }
  .mirna-airport-option__code { font-size: 0.78rem; }
  .mirna-airport-option__label { font-size: 0.78rem; }
}

/* iPhone / mobile airport autocomplete fix */
@media (max-width: 640px) {
  .mirna-airport-results { box-sizing: border-box !important; max-width: calc(100vw - 24px) !important; overflow-x: hidden !important; }
  .mirna-airport-option { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 6px !important; padding: 8px !important; font-size: 13px !important; line-height: 1.25 !important; }
  .mirna-airport-option__code { min-width: 0 !important; font-size: 13px !important; line-height: 1.25 !important; }
  .mirna-airport-option__label { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 13px !important; line-height: 1.25 !important; }
  .mirna-airport-option__country { display: none !important; }
}
/* iOS Safari flight-search stability */
@media (max-width: 640px) {
  .mirna-flight-results-page input,
  .mirna-flight-results-page select,
  .mirna-flight-results-page textarea,
  input[data-mirna-airport-input] {
    font-size: 16px !important;
  }
  input[data-mirna-airport-input] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.mirna-flight-results-page-active {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}
/* iOS Safari landscape zoom-on-load fix (2026-09-22): the max-width:640px
   rule above already forces 16px in portrait (every iPhone portrait
   width is <=430px), but EVERY iPhone in landscape exceeds 640px --
   confirmed via direct computed-style measurement on this exact page:
   input font-size fell back to the page's own 0.82rem/13.12px base value
   at 667px width (iPhone SE landscape, the narrowest landscape width any
   current iPhone has). Any text input under 16px makes Safari
   auto-zoom the whole page on focus -- with this fix missing that width
   range, a session that focused the field in landscape (or whose zoom
   state Safari carried over into a subsequent portrait reload) matches
   the reported "page opens already zoomed in" symptom exactly.
   @supports (-webkit-touch-callout: none) matches true iOS Safari/
   WebKit specifically -- Android Chrome does not support this property
   at all, so this rule can only ever affect iOS, at any width/
   orientation, leaving Android's own behavior (already fully covered by
   the width-based rule above, at every width Android actually needs it)
   completely untouched. */
@supports (-webkit-touch-callout: none) {
  .mirna-flight-results-page input,
  .mirna-flight-results-page select,
  .mirna-flight-results-page textarea,
  input[data-mirna-airport-input] {
    font-size: 16px !important;
  }
}

/* iPhone/mobile page-width guard (2026-09-24): iOS Safari widens the
   layout viewport to fit ANY horizontally overflowing element and zooms
   the whole page out -- which shifts/crops full-width sections (e.g. the
   Global Support banner) and made window.innerWidth report a desktop
   width. overflow-x:clip (unlike hidden) creates no scroll container, so
   position:sticky and page scrolling are unaffected. Desktop/tablet
   (>780px) untouched. */
@media (max-width: 780px) {
	html,
	body {
		max-width: 100%;
		overflow-x: clip;
	}
}

/* MIRNA CARS — calendar open: lock page scroll (all widths) so the
   position:fixed Car calendar (see position() in mirna-search-widgets.js)
   never drifts while the page scrolls behind the backdrop. scrollbar-gutter
   keeps desktop layout from shifting when the scrollbar is hidden. */
html.mirna-car-calendar-open { overflow: hidden !important; scrollbar-gutter: stable; }
html.mirna-car-calendar-open body { overflow: hidden !important; }