/* ============================================================
   EazyTransfer — Shared Responsive Stylesheet
   Place at: ~/design/css/responsive.css
   Link in _Layout.cshtml AFTER all other CSS links:
   <link rel="stylesheet" href="~/design/css/responsive.css" />
   ============================================================ */

/* ── 0. VIEWPORT / BOX MODEL ─────────────────────────────── */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

*, *::before, *::after {
	box-sizing: border-box;
}

/* ── 1. IMAGES ───────────────────────────────────────────── */
img {
	max-width: 100%;
	height: auto;
}

/* ── 2. NAVBAR — hamburger on mobile ────────────────────── */
.navbar {
	padding: 8px 15px;
}

.navbar-toggler {
	border: 2px solid rgba(255,193,7,.6);
	padding: 4px 8px;
	border-radius: 6px;
}

	.navbar-toggler:focus {
		box-shadow: 0 0 0 3px rgba(255,193,7,.25);
		outline: none;
	}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,193,7,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width:991px) {
	.navbar-collapse {
		background: #111;
		padding: 15px;
		border-radius: 10px;
		margin-top: 10px;
		border: 1px solid rgba(255,193,7,.2);
	}

	.navbar-nav .nav-item {
		border-bottom: 1px solid rgba(255,255,255,.07);
		padding: 4px 0;
	}

		.navbar-nav .nav-item:last-child {
			border-bottom: none;
		}
}

/* ── 3. BOOKING WIDGET (shared across pages) ─────────────── */
.date-time-field {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

	.date-time-field input[type="text"],
	.date-time-field select {
		flex: 1;
		min-width: 110px;
	}

.route-box {
	width: 100%;
}

.route-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}

.route-field {
	flex: 1;
	min-width: 0;
}

	.route-field input.form-control {
		width: 100%;
	}

@media (max-width:767px) {
	/* booking form inner col stack */
	#step-1 .col-lg-6 {
		width: 100%;
	}

		#step-1 .col-lg-6 .row .col-lg-6,
		#step-1 .col-lg-6 .row .col-md-6 {
			width: 100%;
			margin-bottom: 12px;
		}
}

@media (max-width:575px) {
	/* full-width find vehicle button */
	input[type="button"].btn-main,
	#send_message[type="button"] {
		width: 100% !important;
		float: none !important;
		margin: 8px 0 !important;
	}

	.pull-right {
		float: none !important;
		display: block;
		width: 100%;
	}

	.date-time-field {
		flex-direction: column;
	}

		.date-time-field input, .date-time-field select {
			width: 100%;
			min-width: unset;
		}
}

/* ── 4. HERO HEADING ─────────────────────────────────────── */
h1.heading-main {
	font-size: clamp(1rem,4vw,2rem);
	line-height: 1.3;
}

/* ── 5. MARQUEE ──────────────────────────────────────────── */
.marquee-section, .marquee-wrapper {
	overflow: hidden;
	width: 100%;
}

/* ── 6. BOOKING PAGE ─────────────────────────────────────── */
@media (max-width:767px) {
	.ride-booking-section {
		padding: 90px 0 10px 0 !important;
	}

	.booking-container {
		padding: 14px !important;
		border-radius: 12px !important;
	}

	#map {
		min-height: 220px !important;
	}
}

#map {
	min-height: 300px;
	border-radius: 16px;
}

.trip-summary-strip {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width:575px) {
	#vehicleGrid > div {
		width: 100% !important;
	}

	.fare-actions {
		flex-direction: column;
	}

	.fare-chip {
		width: 100%;
		min-width: unset;
	}

	.selectable-vehicle img {
		width: 60px !important;
	}
}

/* ── 7. STEPPER (Summary + Payment) ─────────────────────── */
@media (max-width:480px) {
	.stepper {
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 6px;
	}

	.stepper-line {
		width: 16px !important;
		flex-shrink: 0;
	}

	.step-label {
		display: none;
	}

	.step-circle {
		width: 26px !important;
		height: 26px !important;
		font-size: 10px !important;
	}
}

/* ── 8. BOOKING SUMMARY ──────────────────────────────────── */
@media (max-width:600px) {
	.data-grid {
		grid-template-columns: 1fr !important;
	}

	.bs-actions {
		grid-template-columns: 1fr !important;
	}

	.vehicle-block {
		flex-wrap: wrap;
		gap: 10px !important;
	}

		.vehicle-block > div:last-child {
			margin-left: 0 !important;
			width: 100%;
		}

	.bs-page {
		padding: 90px 0 50px !important;
	}

	.bs-section {
		padding: 16px !important;
	}
}

@media (max-width:480px) {
	.passenger-block {
		flex-wrap: wrap;
	}

	.route-stop-addr {
		font-size: 12px !important;
	}
}

/* ── 9. PAYMENT PAGE ─────────────────────────────────────── */
@media (max-width:767px) {
	.pay-page {
		padding: 90px 0 60px !important;
	}

	.pay-grid {
		grid-template-columns: 1fr !important;
	}

	.order-card {
		position: static !important;
	}

	.pm-tab {
		padding: 10px 4px !important;
		font-size: 11px !important;
	}

		.pm-tab i {
			font-size: 18px !important;
		}

	.cf-row {
		grid-template-columns: 1fr !important;
	}

	.user-banner {
		flex-wrap: wrap;
		gap: 10px;
	}

	.user-profile-link {
		margin-left: 0 !important;
	}
}

/* ── 10. USER PROFILE ────────────────────────────────────── */
@media (max-width:575px) {
	.profile-section {
		padding: 90px 0 50px 0 !important;
	}

	.profile-header-card {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 16px !important;
		padding: 20px !important;
	}

	.stat-pill {
		padding: 6px 10px !important;
	}

		.stat-pill .num {
			font-size: 18px !important;
		}

	.profile-meta .email-badge {
		font-size: 11px;
	}
}

.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.trips-table {
	min-width: 640px;
}

.profile-tabs {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	flex-wrap: nowrap !important;
}

/* ── 11. THANK YOU PAGE ──────────────────────────────────── */
@media (max-width:575px) {
	.ty-wrapper {
		padding: 90px 0 50px !important;
	}

	.ty-card {
		padding: 22px 14px !important;
	}

	.ty-actions {
		flex-direction: column;
		align-items: stretch;
	}

		.ty-actions .btn {
			width: 100%;
		}

	.ref-badge {
		padding: 10px 14px !important;
	}

	.ty-lbl {
		width: 80px !important;
	}
}

/* ── 12. BOOKING CONFIRMATION ───────────────────────────── */
@media (max-width:575px) {
	.confirm-card {
		padding: 22px 14px !important;
	}

	.confirm-detail-row {
		flex-direction: column;
		gap: 2px;
	}

	.confirm-section {
		padding: 90px 0 40px !important;
	}
}

/* ── 13. CONTACT PAGE ────────────────────────────────────── */
@media (max-width:767px) {
	#contact_form .col-md-4 {
		width: 100%;
		margin-bottom: 10px;
	}

	.de-box {
		margin-bottom: 20px;
	}
}

/* ── 14. ABOUT PAGE ──────────────────────────────────────── */
@media (max-width:991px) {
	.image-container.pull-right {
		position: static !important;
		width: 100% !important;
		height: 240px;
		margin-top: 28px;
		border-radius: 12px;
		float: none !important;
	}

	#section-img-with-tab .col-lg-5.offset-lg-7 {
		margin-left: 0 !important;
		width: 100% !important;
	}
}

@media (max-width:767px) {
	#section-call-to-action .col-lg-7,
	#section-call-to-action .col-lg-4 {
		width: 100%;
		text-align: center !important;
		margin-bottom: 16px;
	}
}

/* ── 15. SERVICES PAGE ───────────────────────────────────── */
@media (max-width:767px) {
	.service-row {
		padding: 16px !important;
	}

	.service-content {
		padding: 14px 0 0 0 !important;
	}
}

/* ── 16. DRIVE WITH US PAGE ──────────────────────────────── */
@media (max-width:991px) {
	#section-hero.full-height .col-lg-6 + .col-lg-6 {
		margin-top: 28px;
	}

	#section-hero .col-lg-6 .col-lg-6 {
		width: 100%;
		margin-bottom: 12px;
	}
}

/* ── 17. AUTH PAGES (Login / Register / Forgot) ─────────── */
@media (max-width:575px) {
	.padding40 {
		padding: 22px 16px !important;
	}

	#registerForm .col-md-6 {
		width: 100%;
	}

	.col-lg-4.offset-lg-4 {
		max-width: 100%;
		padding: 0 12px;
	}

	.col-lg-6 .padding40 {
		margin: 0 8px;
	}
}

/* ── 18. PRIVACY / TERMS PAGES ───────────────────────────── */
@media (max-width:767px) {
	#section-content .col-lg-10.offset-lg-1 {
		width: 100% !important;
		margin-left: 0 !important;
	}

	.de-post-type-1 h2 {
		font-size: 1.4rem;
	}

	.de-post-type-1 h4 {
		font-size: 1.05rem;
	}

	.de-post-type-1 p, .de-post-type-1 li {
		font-size: 14px;
		line-height: 1.75;
	}
}

/* ── 19. FORMS — touch-friendly inputs ───────────────────── */
.form-control, select.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="password"].form-control {
	min-height: 44px;
	font-size: 15px;
}

textarea.form-control {
	min-height: 100px;
	font-size: 15px;
}

/* ── 20. TABLES — scrollable everywhere ─────────────────── */
.de-post-type-1 table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

/* ── 21. SECTION SPACING ────────────────────────────────── */
@media (max-width:767px) {
	section {
		padding-top: 36px !important;
		padding-bottom: 36px !important;
	}

	.spacer-double {
		height: 18px !important;
	}

	.spacer-single {
		height: 9px !important;
	}

	h1 {
		font-size: clamp(1.4rem,6vw,2.4rem) !important;
	}

	h2 {
		font-size: clamp(1.2rem,5vw,1.9rem) !important;
	}

	h3 {
		font-size: clamp(1.05rem,4vw,1.45rem) !important;
	}
}

/* ── 22. INDEX — testimonials / why-us / timeline ───────── */
@media (max-width:575px) {
	.de-image-text .d-text {
		padding: 18px;
	}

	.container-timeline ul {
		padding-left: 8px;
	}

		.container-timeline ul li {
			margin-bottom: 16px;
		}
}

/* ── 23. BUTTON WIDTHS ───────────────────────────────────── */
@media (max-width:575px) {
	.btn-main {
		padding: 12px 18px;
		font-size: 14px;
	}

		.btn-main.btn-lg {
			display: block;
			width: 100%;
			text-align: center;
		}

		.btn-main.pull-right {
			float: none !important;
			display: block;
			width: 100%;
		}
}

/* ── 24. SUBHEADER ───────────────────────────────────────── */
@media (max-width:767px) {
	#subheader {
		min-height: 130px;
		padding: 60px 0 28px;
	}

		#subheader h1 {
			font-size: clamp(1.3rem,6vw,2rem);
		}
}

/* ── 25. MISC ────────────────────────────────────────────── */
@media (max-width:575px) {
	.clearfix::after {
		display: table;
		clear: both;
		content: "";
	}

	.phone-num-big {
		margin-bottom: 12px;
	}
}