/* ---------- Floating "Book a Bike" button ---------- */
.mouau-riders-fab {
	position: fixed;
	/* Sits above a typical mobile bottom-nav bar (~64px) plus safe-area inset,
	   so it doesn't cover footer buttons like a Profile tab. Override
	   --mouau-riders-fab-bottom on <body> if your theme's nav bar is taller. */
	bottom: calc(var(--mouau-riders-fab-bottom, 88px) + env(safe-area-inset-bottom, 0px));
	right: 20px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1e824c, #146c3f);
	border: none;
	box-shadow: 0 6px 18px rgba(20, 108, 63, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 99999;
	animation: mouau-riders-float 2.6s ease-in-out infinite;
}
.mouau-riders-fab-icon { font-size: 26px; line-height: 1; }
.mouau-riders-fab-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #1e824c;
	animation: mouau-riders-pulse 1.8s ease-out infinite;
}
@keyframes mouau-riders-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes mouau-riders-pulse {
	0% { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Ride panel ---------- */
.mouau-riders-panel {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 100000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.mouau-riders-panel-inner {
	background: #fff;
	width: 100%;
	max-width: 420px;
	border-radius: 18px 18px 0 0;
	padding: 24px 20px 32px;
	position: relative;
	max-height: 85vh;
	overflow-y: auto;
}
@media (min-width: 600px) {
	.mouau-riders-panel { align-items: center; }
	.mouau-riders-panel-inner { border-radius: 18px; }
}
.mouau-riders-panel-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 26px;
	cursor: pointer;
	line-height: 1;
}
.mouau-riders-step label { display: block; margin: 10px 0; font-weight: 600; font-size: 13px; }
.mouau-riders-step input[type="text"] { width: 100%; padding: 10px; margin-top: 4px; border: 1px solid #ccc; border-radius: 8px; font-weight: normal; }
.mouau-riders-otp-display { font-size: 36px; font-weight: 700; letter-spacing: 6px; text-align: center; margin: 16px 0; color: #146c3f; }
.mouau-riders-warning { background: #fff4e5; border: 1px solid #f0c36d; color: #92620a; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.mouau-riders-arrived-notice { background: #ecfdf5; border: 1px solid #6ee7b7; color: #047857; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.mouau-riders-spinner { width: 36px; height: 36px; border: 4px solid #ddd; border-top-color: #1e824c; border-radius: 50%; margin: 20px auto; animation: mouau-riders-spin 0.9s linear infinite; }
@keyframes mouau-riders-spin { to { transform: rotate(360deg); } }
.mouau-riders-location-status { font-size: 13px; color: #666; }
.mouau-riders-wallet-balance { font-size: 12px; color: #146c3f; font-weight: 600; text-align: right; margin-bottom: 8px; }
.mouau-riders-wallet-balance.is-low { color: #b32d2e; }
.mouau-riders-ride-mode-tabs { display: flex; gap: 6px; margin-bottom: 14px; background: #f3f3f3; border-radius: 10px; padding: 4px; }
.mouau-riders-mode-tab { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #666; cursor: pointer; }
.mouau-riders-mode-tab.is-active { background: #fff; color: #146c3f; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
#mouau-riders-negotiate-controls { display: flex; gap: 8px; margin: 14px 0; }
#mouau-riders-counter-input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 8px; }

/* ---------- Registration form ---------- */
.mouau-riders-form fieldset { border: 1px solid #e2e2e2; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.mouau-riders-form legend { font-weight: 700; padding: 0 6px; }
.mouau-riders-form label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; }
.mouau-riders-form input[type=text], .mouau-riders-form input[type=email], .mouau-riders-form input[type=tel], .mouau-riders-form input[type=date], .mouau-riders-form input[type=password], .mouau-riders-form input[type=file], .mouau-riders-form textarea {
	width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-weight: normal;
}
.mouau-riders-camera-box { text-align: center; }
.mouau-riders-camera-preview, .mouau-riders-camera-shot { width: 100%; max-width: 320px; border-radius: 10px; margin-bottom: 8px; background: #000; }
.mouau-riders-alert { padding: 12px 14px; border-radius: 8px; }
.mouau-riders-alert-warn { background: #fff4e5; border: 1px solid #f0c36d; color: #92620a; }
.mouau-riders-form-msg { min-height: 20px; font-size: 13px; margin: 10px 0; }
.mouau-riders-form-msg.is-error { color: #b32d2e; }
.mouau-riders-form-msg.is-success { color: #146c3f; }

/* Plain-CSS equivalent of the dashboard's Tailwind input styling, so the
   registration fields look consistent even before Tailwind's CDN JIT has
   scanned the DOM, and match exactly when it has. */
.mouau-riders-input {
	width: 100%;
	border-radius: 0.75rem;
	border: 1px solid #e5e7eb;
	background: #f9fafb;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
}
.mouau-riders-input:focus { outline: 2px solid #10b981; border-color: transparent; }

/* ---------- Rider app shell ---------- */
.mouau-riders-app-shell { max-width: 480px; margin: 0 auto; font-family: inherit; }
.mouau-riders-shell-header { display: flex; align-items: center; justify-content: space-between; background: #f6f7f7; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.mouau-riders-online-toggle { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.mouau-riders-empty-state { color: #888; font-size: 13px; }
.mouau-riders-ride-card { border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.mouau-riders-ride-card strong { display: block; font-size: 13px; color: #111827; margin-bottom: 2px; }
.mouau-riders-ride-card div { font-size: 12px; color: #6b7280; margin-bottom: 2px; }
.mouau-riders-ride-card a { color: #146c3f; font-size: 12px; }
.mouau-riders-fare-tag { font-weight: 700 !important; color: #146c3f !important; font-size: 13px !important; }
.mouau-riders-ride-card button { margin-top: 8px; margin-right: 6px; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; }
.mouau-riders-ride-card .mouau-riders-accept-btn, .mouau-riders-ride-card .mouau-riders-hire-accept-btn { background: #1e824c; color: #fff; }
.mouau-riders-ride-card .mouau-riders-hire-counter-btn { background: #f3f4f6; color: #374151; }
.mouau-riders-open-rides { display: flex; flex-direction: column; gap: 10px; }
#mouau-rider-transactions .mouau-riders-txn-row { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 13px; }
#mouau-rider-transactions .mouau-riders-txn-row .txn-reason { color: #6b7280; font-size: 11px; }
#mouau-rider-transactions .mouau-riders-txn-amount.is-credit { color: #146c3f; font-weight: 600; }
#mouau-rider-transactions .mouau-riders-txn-amount.is-debit { color: #b32d2e; font-weight: 600; }
.mouau-riders-active-ride { border: 1px solid #1e824c; border-radius: 10px; padding: 14px 16px; margin-top: 16px; background: #f3faf6; }
.mouau-riders-otp-entry { display: flex; gap: 8px; margin-top: 10px; }
.mouau-riders-otp-entry input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #ccc; letter-spacing: 3px; font-size: 16px; }

/* ---------- Admin ---------- */
.mouau-riders-badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.mouau-riders-badge-approved, .mouau-riders-badge-completed { background: #e3f5e9; color: #146c3f; }
.mouau-riders-badge-pending, .mouau-riders-badge-requested, .mouau-riders-badge-accepted, .mouau-riders-badge-in_progress { background: #fff4e5; color: #92620a; }
.mouau-riders-badge-rejected, .mouau-riders-badge-cancelled, .mouau-riders-badge-suspended { background: #fbe4e4; color: #b32d2e; }
.mouau-riders-inline-form label { margin-right: 12px; font-weight: 600; font-size: 13px; }
.mouau-riders-inline-form { margin: 16px 0; padding: 14px; background: #f6f7f7; border-radius: 8px; }