/**
 * Decorative product mockups (phone UI, map illustration).
 * Kept separate so Tailwind output stays lean.
 */
.phone-stack {
	position: relative;
	display: grid;
	min-height: 410px;
	place-items: center;
}

.phone,
.mini-phone {
	width: min(74vw, 250px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 30px;
	padding: 10px;
	background: linear-gradient(160deg, #303235, #090a0b);
	box-shadow: 0 26px 54px rgba(0, 0, 0, 0.48);
}

.phone--front {
	position: relative;
	z-index: 2;
	transform: translateX(-14px) rotate(-3deg);
}

.phone--back {
	position: absolute;
	z-index: 1;
	transform: translate(70px, 20px) scale(0.9) rotate(5deg);
	opacity: 0.92;
}

.phone__screen,
.mini-phone__screen {
	overflow: hidden;
	min-height: 410px;
	border-radius: 22px;
	background: #111417;
	color: #ffffff;
}

.phone__topline {
	width: 74px;
	height: 5px;
	margin: 14px auto;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.2);
}

.mobile-map {
	position: relative;
	height: 220px;
	margin: 12px;
	border-radius: 0.75rem;
	background:
		linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.05) 50%, transparent 51%),
		linear-gradient(0deg, transparent 49%, rgba(255, 255, 255, 0.05) 50%, transparent 51%),
		#1a1d20;
	background-size: 54px 54px;
}

.map-route {
	position: absolute;
	top: 82px;
	left: 38px;
	width: 154px;
	height: 88px;
	border-top: 3px solid #eab308;
	border-right: 3px solid #eab308;
	border-radius: 40px 8px 40px 8px;
}

.map-pin {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 3px solid #111111;
	border-radius: 50%;
	background: #eab308;
	box-shadow: 0 0 0 5px rgba(234, 179, 8, 0.18);
}

.map-pin--one {
	top: 78px;
	left: 34px;
}

.map-pin--two {
	right: 38px;
	bottom: 58px;
}

.ride-card,
.driver-tile {
	margin: -22px 20px 0;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	background: rgba(22, 25, 28, 0.96);
}

.ride-card strong,
.ride-card span,
.driver-tile strong,
.driver-tile small {
	display: block;
}

.ride-card span,
.driver-tile small {
	color: rgba(255, 255, 255, 0.62);
	font-size: 13px;
}

.mini-progress {
	height: 7px;
	margin-top: 14px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.1);
}

.mini-progress span {
	display: block;
	width: 68%;
	height: 100%;
	background: #eab308;
}

.mini-list {
	display: grid;
	gap: 12px;
	padding: 26px 18px 0;
}

.mini-list span {
	display: block;
	height: 46px;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.08);
}

.invoice-chip {
	width: max-content;
	margin: 18px;
	padding: 8px 10px;
	border-radius: 0.75rem;
	background: rgba(234, 179, 8, 0.15);
	color: #eab308;
	font-size: 13px;
	font-weight: 800;
}

.driver-tile {
	display: flex;
	gap: 12px;
	margin-top: 18px;
}

.driver-tile > span,
.avatar-line span {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #eab308, #f59e0b);
}

.mini-phone {
	width: min(46vw, 185px);
	border-radius: 24px;
}

.mini-phone--raised {
	margin-left: -34px;
	transform: translateY(-24px);
}

.mini-phone__screen {
	min-height: 300px;
	padding: 18px 14px;
	border-radius: 16px;
}

.mini-phone__screen strong {
	display: block;
	margin-bottom: 18px;
	font-size: 14px;
}

.ui-row {
	display: flex;
	height: 42px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	padding: 10px;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.08);
}

.ui-row span {
	width: 58%;
	height: 8px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.18);
}

.ui-row b {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #eab308;
}

.ui-button {
	height: 42px;
	margin-top: 18px;
	border-radius: 0.75rem;
	background: linear-gradient(135deg, #eab308, #f59e0b);
}

.avatar-line {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.avatar-line i {
	display: block;
	width: 76px;
	height: 10px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.18);
}

.doc-list {
	display: grid;
	gap: 10px;
}

.doc-list em {
	display: block;
	height: 36px;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.08);
}

.preview-phone {
	position: relative;
	min-height: 280px;
	margin-top: 18px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 24px;
	background: #111417;
}

.preview-phone--map {
	background:
		linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.05) 50%, transparent 51%),
		linear-gradient(0deg, transparent 49%, rgba(255, 255, 255, 0.05) 50%, transparent 51%),
		#eef8ef;
	background-size: 44px 44px;
}

.preview-phone--map span {
	position: absolute;
	top: 92px;
	left: 34px;
	width: 170px;
	height: 78px;
	border-top: 3px solid #eab308;
	border-right: 3px solid #eab308;
	background: transparent;
}

.preview-phone--map i,
.preview-phone--map b {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 3px solid #111111;
	border-radius: 50%;
	background: #eab308;
	box-shadow: 0 0 0 5px rgba(234, 179, 8, 0.18);
}

.preview-phone--map i {
	top: 88px;
	left: 30px;
}

.preview-phone--map b {
	right: 54px;
	bottom: 80px;
}

.preview-phone--booking,
.preview-phone--invoice {
	display: grid;
	align-content: start;
	gap: 12px;
	padding: 22px 16px;
	background: #111417;
}

.preview-phone--booking span,
.preview-phone--invoice span {
	height: 44px;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.08);
}

.preview-phone--booking b,
.preview-phone--invoice b {
	display: block;
	width: 100%;
	height: 44px;
	margin-top: 8px;
	border: 0;
	border-radius: 0.75rem;
	background: linear-gradient(135deg, #eab308, #f59e0b);
	box-shadow: none;
}

.preview-phone--invoice i {
	display: block;
	height: 80px;
	border-radius: 0.75rem;
	background: rgba(234, 179, 8, 0.14);
}