:root { --ink:#172033; --muted:#687185; --paper:#f5f7fa; --line:#e1e5eb; --yellow:#f5b400; --green:#15935e; --red:#d34d4a; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Tahoma,sans-serif; } .app-header { height:64px; display:flex;  top:0; left:0;z-index: 999; width: 100%; align-items:center; justify-content:space-between; max-width:1080px; margin:auto; padding:0 18px; } .brand { color:var(--ink); text-decoration:none; font-size:18px; font-weight:700; } .brand i { color:var(--yellow); margin-left:6px; } .whatsapp { color:#15935e; font-size:24px; } .flash {  z-index:800; top:12px; right:12px; margin:0; padding:12px 16px; background:var(--ink); color:white; border-radius:7px; }
.map-flow { z-index:500; inset:0;  grid-template-rows:64px 42px 56px minmax(0,1fr) auto; background:#fff; overflow:hidden; direction:rtl; top:45px; } .map-header { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); } .map-header h1 { margin:1px 0 0; font-size:18px; }.map-header p { margin:0; color:var(--muted); font-size:11px; }.icon-button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font-size:18px; } .progress-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; list-style:none; padding:8px 16px; margin:0; color:var(--muted); font-size:11px; text-align:center; }.progress-steps li { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.progress-steps .active { color:var(--ink); font-weight:700; }.progress-steps .complete { color:var(--green); }.map-tools { display:grid; grid-template-columns:1fr 44px; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); }.map-tools label { position:relative; }.map-tools label i { position:absolute; top:12px; right:12px; color:var(--muted); }.map-tools input { width:100%; height:40px; padding:0 38px 0 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); font:inherit; }.map-tools .icon-button { width:40px; height:40px; border-radius:6px; }.search-results { position:absolute; z-index:99900; top:207px; right:12px; left:12px; list-style:none; padding:0; margin:0; max-height:180px; overflow:auto; background:white; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px rgba(23,32,51,.15); }.search-results button { width:100%; border:0; border-bottom:1px solid var(--line); background:white; color:var(--ink); text-align:right; padding:11px; font:inherit; font-size:13px; }.map-wrap { min-height:0; }.map-wrap #bookingMap { width:100%; height:50vh; direction:ltr; }.map-panel,.route-panel { padding:12px 16px max(13px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); }.map-panel p { margin:0 0 8px; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.map-error { color:#a82c27!important; white-space:normal!important; }.primary-action { width:100%; min-height:50px; border:0; border-radius:7px; background:var(--yellow); color:#17130a; font-size:16px; font-weight:700; }.primary-action:disabled { opacity:.55; }.route-panel {  overflow:auto; }.route-panel.route-loading::before { content:"جاري حساب مسار الرحلة..."; display:block; padding:10px 0; color:var(--muted); font-size:14px; }.route-panel.route-loading > :not(#continueBooking) { opacity:.3; }.route-locations { display:grid; gap:9px; }.route-locations > div { display:grid; grid-template-columns:1fr auto; gap:4px 10px; }.route-locations span { color:var(--muted); font-size:12px; }.route-locations b { max-width:270px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; }.route-locations button { grid-row:1 / span 2; grid-column:2; align-self:center; border:1px solid var(--line); border-radius:5px; background:white; color:var(--ink); padding:4px 8px; font-size:12px; }.route-metrics { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:7px; margin:12px 0; }.route-metrics > div { padding:8px; border-radius:6px; background:#f6f7f9; text-align:center; }.route-metrics span,.route-metrics b { display:block; }.route-metrics span { color:var(--muted); font-size:11px; }.route-metrics b { margin-top:3px; font-size:14px; }.route-metrics .fare { background:#fff2bb; }.map-marker { display:grid; place-items:center; width:30px; height:30px; font-size:24px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); }.booking-form { display: none; max-width:620px; margin:0 auto; padding:12px 16px 40px;  top:45px; left:0; width: 100%;    
    overflow: auto;
    padding-bottom: 150px;}.details-screen { display:grid; gap:14px; }.trip-card { border:1px solid var(--line); border-radius:8px; background:#fff; padding:16px; box-shadow:0 5px 18px rgba(23,32,51,.06); }.trip-card h1,.trip-card h2 { font-size:18px; margin:0 0 14px; }.trip-location { display:grid; grid-template-columns:25px 1fr auto; gap:9px; padding:9px 0; border-bottom:1px solid var(--line); }.trip-location i { font-size:19px; }.trip-location .pickup { color:var(--green); }.trip-location .destination { color:var(--red); }.trip-location b,.trip-location small { display:block; }.trip-location small { color:var(--muted); font-size:12px; overflow-wrap:anywhere; margin-top:3px; }.trip-location button { border:0; background:none; color:#946800; font-size:12px; }.time-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.time-choice h2 { grid-column:1 / -1; margin-bottom:2px; }.time-button { min-height:46px; border:1px solid var(--line); background:#fff; border-radius:6px; color:var(--ink); }.time-button.active { border-color:var(--yellow); background:#fff6d4; }.time-choice input { grid-column:1 / -1; min-width:0; padding:10px; border:1px solid var(--line); border-radius:6px; }.trip-card p { display:flex; justify-content:space-between; padding:9px 0; margin:0; border-bottom:1px solid var(--line); }.trip-card .total { border:0; padding-bottom:0; font-size:16px; }.trip-card .total b { color:#8a6200; }.trip-card label { display:grid; gap:6px; margin-top:10px; color:var(--muted); font-size:13px; }.trip-card input,.trip-card textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; font:inherit; color:var(--ink); }.sending-load {  z-index:900; inset:0; display:grid; place-items:center; background:rgba(23,32,51,.6); color:#fff; font-weight:700; }.d-none { display:none!important; }
@media (min-width:768px) { .map-flow { inset:5vh 10vw; grid-template-rows:66px 42px 56px minmax(0,1fr) auto; border:1px solid var(--line); border-radius:9px; box-shadow:0 20px 60px rgba(23,32,51,.22); }.route-panel { max-height:300px; }.route-locations { grid-template-columns:1fr 1fr; }.route-locations > div { border-left:1px solid var(--line); padding-left:12px; }.route-locations > div:last-child { border:0; }.booking-form { padding-top:28px; } }

.selection-pin {
	display: grid;
	place-items: center;
	width: 38px;
	height: 46px;
	color: var(--red);
	font-size: 40px;
	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4));
}
.selection-pin.pickup { color: var(--green); }

.site-footer {
	position: relative;
	z-index: 1;
	background: #0b111c;
	border-top: 9px solid #f5a900;
	color: #fff;
}
.footer-content {
	max-width: 1100px;
	margin: auto;
	padding: 28px 24px 22px;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 48px;
}
.site-footer h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.footer-about p { max-width: 650px; margin: 0; color: #f4f5f7; font-size: 15px; line-height: 1.8; }
.social-links { display: flex; direction: ltr; gap: 32px; align-items: center; }
.social-links a { font-size: 38px; line-height: 1; text-decoration: none; }.social-links a:nth-child(1) { color: #2ea6da; }.social-links a:nth-child(2) { color: #e35d6a; }.social-links a:nth-child(3) { color: #0a65fe; }.social-links a:nth-child(4) { color: #13985c; }
.footer-copyright { margin: 0; padding: 14px 24px; border-top: 1px solid #202a38; text-align: center; font-size: 14px; }
.booking-form:has(#bookingDetails.d-none) ~ .site-footer { display: none; }
@media (max-width: 767px) { .site-footer { }.footer-content { grid-template-columns: 1fr; gap: 28px; padding: 26px 20px 20px; }.social-links { gap: 26px; }.social-links a { font-size: 34px; }.footer-about p { font-size: 14px; } }