/* LovelyLimo Public Styles — premium chauffeur brand aesthetic */
.llc-wrap {
	--llc-black: #0d0d0f;
	--llc-charcoal: #1a1a1e;
	--llc-gold: #c9a24b;
	--llc-gold-light: #e0c785;
	--llc-gray: #6b6b70;
	--llc-light-gray: #f4f3f1;
	--llc-success: #2e7d32;
	--llc-error: #c0392b;
	max-width: 900px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #222;
}

.llc-wrap * { box-sizing: border-box; }

/* ---------- Steps Indicator ---------- */
.llc-steps-indicator {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
	position: relative;
}
.llc-steps-indicator:before {
	content: '';
	position: absolute;
	top: 16px; left: 0; right: 0;
	height: 2px;
	background: #e4e2dd;
	z-index: 0;
}
.llc-step-dot {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: #e4e2dd;
	color: #777;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	position: relative; z-index: 1;
	font-size: 14px;
}
.llc-step-dot em {
	position: absolute;
	top: 42px;
	font-style: normal;
	font-size: 11px;
	white-space: nowrap;
	color: #999;
	font-weight: 400;
}
.llc-step-dot.active {
	background: var(--llc-black);
	color: var(--llc-gold);
}
.llc-step-dot.active em { color: var(--llc-black); font-weight: 600; }

/* ---------- Cards ---------- */
.llc-card {
	background: #fff;
	border: 1px solid #eae8e3;
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.llc-card-centered { text-align: center; max-width: 420px; margin: 40px auto; }

/* ---------- Service Type Cards ---------- */
.llc-service-grid, .llc-vehicle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin: 20px 0;
}
.llc-service-card, .llc-vehicle-card {
	position: relative;
	border: 2px solid #e8e6e1;
	border-radius: 12px;
	padding: 20px 16px;
	text-align: center;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
	background: #fff;
}
.llc-service-card:hover, .llc-vehicle-card:hover { border-color: var(--llc-gold-light); }
.llc-service-card input, .llc-vehicle-card input { position: absolute; opacity: 0; }
.llc-service-card input:checked ~ *, .llc-vehicle-card input:checked ~ * {}
.llc-service-card:has(input:checked), .llc-vehicle-card:has(input:checked) {
	border-color: var(--llc-gold);
	background: #fdf9ef;
	box-shadow: 0 0 0 1px var(--llc-gold);
}
.llc-service-icon { font-size: 28px; display: block; margin-bottom: 8px; }
.llc-service-title, .llc-vehicle-name { font-weight: 700; display: block; margin-bottom: 4px; color: var(--llc-black); }
.llc-service-desc, .llc-vehicle-meta { font-size: 12.5px; color: var(--llc-gray); display: block; }
.llc-vehicle-card img { width: 100%; height: 80px; object-fit: contain; margin-bottom: 8px; }
.llc-vehicle-price { display: block; margin-top: 10px; font-weight: 700; color: var(--llc-gold); font-size: 17px; }

/* ---------- Form Fields ---------- */
.llc-field { margin-bottom: 16px; }
.llc-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13.5px; color: #333; }
.llc-field input[type=text], .llc-field input[type=email], .llc-field input[type=date],
.llc-field input[type=time], .llc-field input[type=number], .llc-field input[type=password],
.llc-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid #e0ded8;
	border-radius: 8px;
	font-size: 14.5px;
	transition: border-color .15s;
}
.llc-field input:focus, .llc-field textarea:focus { outline: none; border-color: var(--llc-gold); }
.llc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.llc-input-error { border-color: var(--llc-error) !important; }
.llc-checkbox { display: block; margin-bottom: 10px; font-size: 14px; }
.llc-fare-box { text-align: right; }
.llc-fare-total { font-size: 26px; font-weight: 800; color: var(--llc-gold); }

.llc-payment-methods { margin: 20px 0; }
.llc-radio-pill {
	display: inline-block;
	border: 1.5px solid #e0ded8;
	border-radius: 30px;
	padding: 8px 18px;
	margin: 4px 6px 4px 0;
	cursor: pointer;
	font-size: 13.5px;
}
.llc-radio-pill input { margin-right: 6px; }

/* ---------- Buttons ---------- */
.llc-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .15s, transform .1s;
}
.llc-btn:active { transform: scale(0.98); }
.llc-btn-primary { background: var(--llc-black); color: var(--llc-gold); }
.llc-btn-primary:hover { opacity: .88; color: var(--llc-gold-light); }
.llc-btn-secondary { background: #eceae5; color: #333; }
.llc-btn-danger { background: #fdeceb; color: var(--llc-error); }
.llc-btn-small { padding: 8px 14px; font-size: 12.5px; }
.llc-whatsapp-btn { background: #25D366; color: #fff; margin-top: 6px; }
.llc-whatsapp-btn:hover { opacity: .9; color: #fff; }

.llc-share-ride-panel {
	position: relative;
	background: #fdf9ef;
	border: 1.5px solid var(--llc-gold-light);
	border-radius: 10px;
	padding: 16px;
	margin-top: 10px;
	width: 100%;
}
.llc-share-ride-panel p { font-size: 13px; margin: 0 0 10px; }
.llc-share-link-row { display: flex; gap: 8px; }
.llc-share-link-input {
	flex: 1;
	padding: 8px 10px;
	border: 1px solid #e0ded8;
	border-radius: 6px;
	font-size: 12.5px;
	background: #fff;
}
.llc-form-actions { display: flex; justify-content: space-between; margin-top: 24px; }

/* ---------- Messages ---------- */
.llc-form-message { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.llc-msg-success { background: #e9f6ea; color: var(--llc-success); }
.llc-msg-error { background: #fdeceb; color: var(--llc-error); }
.llc-notice { background: #fff8e6; border: 1px solid #f0d98a; padding: 12px 16px; border-radius: 8px; margin: 14px 0; font-size: 14px; }
.llc-notice-error { background: #fdeceb; border-color: #eab6ae; }

/* ---------- Portal ---------- */
.llc-portal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.llc-tabs { display: flex; gap: 6px; border-bottom: 2px solid #eae8e3; margin-bottom: 20px; flex-wrap: wrap; }
.llc-tab-btn {
	background: none; border: none; padding: 10px 16px; cursor: pointer;
	font-weight: 600; font-size: 13.5px; color: var(--llc-gray);
	border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.llc-tab-btn.active { color: var(--llc-black); border-bottom-color: var(--llc-gold); }
.llc-tab-panel { display: none; }
.llc-tab-panel.active { display: block; }
.llc-empty-state { text-align: center; color: var(--llc-gray); padding: 40px 0; }

/* ---------- Booking Cards (list) ---------- */
.llc-bookings-list { display: grid; gap: 14px; }
.llc-booking-card { border: 1px solid #eae8e3; border-radius: 12px; padding: 18px; background: #fff; }
.llc-booking-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.llc-booking-card-body p { margin: 4px 0; font-size: 13.5px; }
.llc-booking-card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

.llc-status-badge {
	display: inline-block; padding: 4px 12px; border-radius: 20px;
	font-size: 11.5px; font-weight: 700; text-transform: uppercase;
	background: #eee; color: #555;
}
.llc-status-pending { background: #fff3cd; color: #856404; }
.llc-status-confirmed, .llc-status-assigned { background: #d4edff; color: #0c5aa6; }
.llc-status-en_route, .llc-status-arrived, .llc-status-in_progress { background: #fde9c8; color: #a15c00; }
.llc-status-completed { background: #d7f3d9; color: #1e7d24; }
.llc-status-cancelled { background: #fbdad7; color: #a52a1f; }

/* ---------- Driver Portal ---------- */
.llc-driver-stats { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.llc-stat-box { background: var(--llc-black); color: #fff; border-radius: 10px; padding: 16px 22px; text-align: center; min-width: 120px; }
.llc-stat-box span { display: block; font-size: 20px; font-weight: 800; color: var(--llc-gold); }
.llc-stat-box em { font-style: normal; font-size: 11.5px; color: #bbb; }

.llc-availability-toggle { display: flex; align-items: center; gap: 10px; }
.llc-switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.llc-switch input { opacity: 0; width: 0; height: 0; }
.llc-slider { position: absolute; cursor: pointer; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius: 24px; transition: .3s; }
.llc-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .3s; }
.llc-switch input:checked + .llc-slider { background: var(--llc-success); }
.llc-switch input:checked + .llc-slider:before { transform: translateX(22px); }

.llc-driver-trip-actions select { padding: 8px 10px; border-radius: 8px; border: 1.5px solid #e0ded8; }

/* ---------- Tracking ---------- */
.llc-tracking-status { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.llc-driver-info { font-size: 13.5px; color: var(--llc-gray); }
.llc-status-timeline { margin-top: 20px; border-left: 2px solid #eae8e3; padding-left: 20px; }
.llc-timeline-item { position: relative; padding-bottom: 18px; font-size: 13.5px; }
.llc-timeline-dot { position: absolute; left: -26px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--llc-gold); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.llc-field-row { grid-template-columns: 1fr; }
	.llc-step-dot em { display: none; }
	.llc-portal-header { flex-direction: column; align-items: flex-start; }
}