/*
 * Responsive / touch layer for the booking screens (search form, results, seat plan,
 * passenger forms, summary, popups, date picker). Loaded AFTER prime.css and
 * prime_search.css, so it only refines them. Mobile-first thinking:
 *   <= 600px  phones          601-1024px  tablets / small laptops          >1024px  desktop
 */

/* ---------- Base: never overflow the screen, readable media ---------- */
.prime_style,
.prime_search_area,
.prime_search_result,
.prime-taxi-lists,
.prime_registration_area {
	box-sizing: border-box;
	max-width: 100%;
}
.prime_style *,
.prime_search_area *,
.prime_registration_area * { box-sizing: border-box; }
.prime_search_result img,
.prime_registration_area img,
.prime-taxi-popup img { max-width: 100%; height: auto; }

/* Keyboard users on desktop: always show where the focus is. */
.prime_search_area :focus-visible,
.prime_search_result :focus-visible,
.prime_registration_area :focus-visible,
.prime-taxi-popup :focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* ---------- Taxi custom fields (all sizes) ---------- */
.prime_taxi_fields_area .prime_tf_item label,
.prime_taxi_seat_item .prime_tf_item label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}
.prime_taxi_fields_area input.formControl,
.prime_taxi_fields_area select.formControl,
.prime_taxi_fields_area textarea.formControl,
.prime_taxi_seat_item input.formControl,
.prime_taxi_seat_item select.formControl,
.prime_taxi_seat_item textarea.formControl {
	width: 100%;
	min-height: 44px;
}
.prime_taxi_fields_area textarea.formControl,
.prime_taxi_seat_item textarea.formControl { min-height: 76px; }
.prime_tf_nid { letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.prime_tf_nid.prime_tf_invalid,
.prime_input_error { border-color: #d63638 !important; box-shadow: 0 0 0 1px #d63638; }
.prime_tf_nid_msg { display: none; margin-top: 4px; color: #d63638; font-size: 13px; line-height: 1.5; }

/* One passenger block per seat: header + fields in a responsive grid (side by side when there is room). */
.prime_taxi_seat_item .mpPanelHeader { padding: 0 0 10px; margin: 0 0 12px; border-bottom: 1px solid #e5e7eb; }
.prime_taxi_seat_item .mpPanelHeader h5 { margin: 0; font-size: 15px; }
.prime_taxi_seat_item .mpPanelBody {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 16px;
}
.prime_taxi_seat_item .mpPanelBody .prime_tf_item { margin: 0 !important; min-width: 0; }
.prime_taxi_seat_item .mpPanelBody .prime_tf_item:has(textarea) { grid-column: 1 / -1; }

/* ---------- Seat plan: scrolls instead of breaking the layout, big touch targets ---------- */
.prime_seat_plan_area { max-width: 100%; }
.prime_seat_plan_area .prime_deck_pane,
.prime_seat_plan_area .prime_taxi_deck_pane,
.prime_seat_plan_area .prime_cabin_seat_plan { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prime_seat_legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.prime_taxi_deck_tabs,
.prime_cabin_deck_tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.prime_taxi_deck_tab,
.prime_cabin_deck_tab { min-height: 40px; }

/* ---------- Totals / summary tables never push the page wider ---------- */
.prime_booking_summary_card,
.prime_selected_seat_details,
.prime_ex_service_area { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Popups ---------- */
.prime-taxi-popup-inner {
	max-width: min(96vw, 980px);
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- Tablets & small laptops ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
	.prime_search_input_fields_holder,
	.prime_input_fields_holder { flex-wrap: wrap; gap: 10px; }
	.prime_search_input_fields_holder > *,
	.prime_input_fields_holder > * { flex: 1 1 calc(50% - 10px); min-width: 200px; }
	.prime_search_action_button,
	.prime_taxi_search_button_holder { flex: 1 1 100%; }
}

/* ---------- Phones ---------- */
@media (max-width: 600px) {
	/* 16px inputs stop iOS Safari from zooming the page on focus; 44px = comfortable tap target. */
	.prime_search_area input[type="text"],
	.prime_search_area input[type="search"],
	.prime_search_area input[type="tel"],
	.prime_search_area input[type="number"],
	.prime_search_area select,
	.prime_registration_area input[type="text"],
	.prime_registration_area input[type="tel"],
	.prime_registration_area input[type="email"],
	.prime_registration_area input[type="number"],
	.prime_registration_area select,
	.prime_registration_area textarea,
	.prime-taxi-popup input,
	.prime-taxi-popup select,
	.prime-taxi-popup textarea {
		font-size: 16px !important;
		min-height: 44px;
	}
	.prime_search_area button,
	.prime_registration_area button,
	.prime_registration_area .prime_loading_button,
	.prime_taxi_submit { min-height: 46px; }

	/* Search form: one field per row, full-width search button. */
	.prime_search_input_fields_holder,
	.prime_input_fields_holder,
	.prime_input_start_end_location,
	.prime_input_start_end_date {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}
	.prime_search_input_fields_holder > *,
	.prime_input_fields_holder > *,
	.prime_input_start_end_location > *,
	.prime_input_start_end_date > * { width: 100%; max-width: 100%; margin: 0; }
	.prime_search_action_button,
	.prime_taxi_search_button_holder,
	.prime_taxi_submit { width: 100%; }

	/* Seat plan: slightly tighter grid but taps stay >= 40px. */
	.prime_seat_plan_area .mp_seat_item { min-width: 40px; min-height: 40px; }
	.prime_seat_plan_area table { margin-inline: auto; }

	/* Passenger blocks: single column, tighter padding. */
	.prime_attendee_area .prime_attendee_item,
	.prime_taxi_fields_area { padding: 14px !important; border-radius: 12px !important; }
	.prime_taxi_seat_item .mpPanelBody { grid-template-columns: 1fr; }

	/* Summary + extra services as readable tables that scroll sideways only if truly needed. */
	.prime_booking_summary_table,
	.prime_ex_service_area table { min-width: 0; width: 100%; font-size: 14px; }

	/* Price + "book" bar stays reachable while scrolling a long form. */
	.prime_form_submit_area {
		position: sticky;
		bottom: 0;
		z-index: 20;
		background: #fff;
		box-shadow: 0 -6px 18px rgba(15, 23, 42, .12);
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		margin-inline: -2px;
	}
	.prime_form_submit_area .prime_loading_button { width: 100%; }

	/* Popups become near-full-screen sheets. */
	.prime-taxi-popup-inner { max-width: 100vw; width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }

	/* Jalali date picker: bottom sheet, easy to hit with a thumb. */
	.prime-jd {
		position: fixed !important;
		left: 8px !important;
		right: 8px !important;
		top: auto !important;
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		width: auto !important;
		max-width: none !important;
		padding: 14px;
		border-radius: 14px;
	}
	.prime-jd-head select,
	.prime-jd-nav { height: 44px; font-size: 16px; }
	.prime-jd-nav { flex-basis: 44px; width: 44px; }
	.prime-jd-day a,
	.prime-jd-day span { height: 42px; line-height: 42px; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
	.prime_attendee_area .prime_attendee_item,
	.prime_taxi_fields_area { padding: 10px !important; }
	.prime-jd-day a,
	.prime-jd-day span { height: 38px; line-height: 38px; font-size: 13px; }
}

/* ---------- Large screens: calmer reading width, hover affordances ---------- */
@media (min-width: 1025px) {
	.prime_registration_area { max-width: 100%; }
	.prime_taxi_fields_area,
	.prime_attendee_area .prime_attendee_item { max-width: 920px; }
	.prime_seat_plan_area .mp_seat_item.seat_available:hover .seat_visual { transform: translateY(-1px); }
}

/* ---------- Touch devices: no hover-only affordances, bigger hit areas ---------- */
@media (hover: none) and (pointer: coarse) {
	.prime_seat_plan_area .mp_seat_item { touch-action: manipulation; }
	.prime_attendee_area input,
	.prime_attendee_area select,
	.prime_attendee_area textarea { font-size: 16px; }
}

/* ---------- Respect users who turn animations off ---------- */
@media (prefers-reduced-motion: reduce) {
	.prime_search_area *,
	.prime_search_result *,
	.prime_registration_area *,
	.prime-jd * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}