/*!
 * ComprasGuate Delivery — Repartidor portal styles (v1.5.2).
 * Brand-aligned with the marketplace: ECF0F4 calm background, #1e73be
 * blue primary actions, chapín 5-color stripe for personality.
 */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
body.cgmp-rep-body {
	margin: 0;
	background: #ECF0F4;
	color: #111827;
	font-size: 14px;
	min-height: 100vh;
}

/* ===========================================================================
   AUTH PAGES (login + onboarding)
   =========================================================================== */
body.cgmp-rep-body--auth {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: #ECF0F4;
	/* subtle dot grid — same as marketplace pattern */
	background-image: radial-gradient(circle at 30px 30px, rgba(148, 163, 184, 0.4) 1.5px, transparent 1.5px);
	background-size: 60px 60px;
	position: relative;
}
/* Chapín corner accent stripes — quiet brand wink */
body.cgmp-rep-body--auth::before,
body.cgmp-rep-body--auth::after {
	content: "";
	position: fixed;
	width: 200px;
	height: 3px;
	opacity: 0.5;
	background: linear-gradient(to right,
		#F97316 0 40px,
		#FBBF24 40px 80px,
		#0EA5E9 80px 120px,
		#EC4899 120px 160px,
		#10B981 160px 200px);
	pointer-events: none;
}
body.cgmp-rep-body--auth::before { top: 0; left: 0; }
body.cgmp-rep-body--auth::after  { bottom: 0; right: 0; transform: scaleX(-1); }

.cgmp-rep-auth, .cgmp-rep-onboard {
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 18px;
	padding: 32px 28px;
	box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
	position: relative;
	overflow: hidden;
}
/* Chapín 5-color stripe on top edge of the card */
.cgmp-rep-auth::before, .cgmp-rep-onboard::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: linear-gradient(to right,
		#F97316 0 20%,
		#FBBF24 20% 40%,
		#0EA5E9 40% 60%,
		#EC4899 60% 80%,
		#10B981 80% 100%);
}

.cgmp-rep-auth-brand {
	text-align: center;
	margin-top: 8px;
	margin-bottom: 22px;
}
.cgmp-rep-auth-logo {
	width: 64px;
	height: 64px;
	margin: 0 auto 12px;
	background: linear-gradient(135deg, #1e73be, #155490);
	color: #fff;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 22px;
}
.cgmp-rep-auth-logo--dim { background: #F3F4F6; color: #B91C1C; }
/* v2.91.7 — Uploaded custom logo. When set, drop the blue gradient pill
 * and let the image breathe — most logos already carry their own shape. */
.cgmp-rep-auth-logo:has(.cgmp-rep-brand-logo) {
	background: transparent;
	width: auto;
	height: auto;
	padding: 4px;
}
.cgmp-rep-brand-logo {
	display: block;
	max-width: 140px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
}
/* Same treatment for the small top-bar logo on dashboard. */
.cgmp-rep-app-top-logo:has(.cgmp-rep-brand-logo) {
	background: transparent;
	width: auto;
	height: auto;
	padding: 0;
}
.cgmp-rep-app-top-logo .cgmp-rep-brand-logo {
	max-width: 96px;
	max-height: 32px;
}
.cgmp-rep-auth-brand-label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	color: #9CA3AF;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.cgmp-rep-auth-brand-title {
	margin: 4px 0 4px;
	font-size: 28px;
	font-weight: 800;
	color: #111827;
	letter-spacing: -0.02em;
}
.cgmp-rep-auth-brand-sub {
	margin: 0;
	font-size: 13px;
	color: #6B7280;
}

.cgmp-rep-flash {
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 12.5px;
	margin-bottom: 16px;
	font-weight: 600;
}
.cgmp-rep-flash--success { background: #ECFDF5; color: #15803D; border: 1px solid #86EFAC; }
.cgmp-rep-flash--error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

.cgmp-rep-auth-form { display: flex; flex-direction: column; gap: 14px; }
.cgmp-rep-field { display: flex; flex-direction: column; gap: 6px; }
.cgmp-rep-field-label {
	font-size: 11px;
	font-weight: 700;
	color: #374151;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.cgmp-rep-field input,
.cgmp-rep-field select {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px;
	border: 1.5px solid #D1D5DB;
	border-radius: 8px;
	background: #fff;
	color: #111827;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.cgmp-rep-field input:focus,
.cgmp-rep-field select:focus {
	outline: none;
	border-color: #1e73be;
	box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.18);
}
.cgmp-rep-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.cgmp-rep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 800;
	border-radius: 10px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.1s, background 0.15s, opacity 0.15s;
}
.cgmp-rep-btn:active { transform: scale(0.98); }
.cgmp-rep-btn-primary {
	background: linear-gradient(135deg, #1e73be, #155490);
	color: #fff;
}
.cgmp-rep-btn-primary:hover { opacity: 0.92; }
.cgmp-rep-btn-ghost {
	background: #fff;
	color: #6B7280;
	border: 1.5px solid #E5E7EB;
}
.cgmp-rep-btn-ghost:hover { background: #F9FAFB; }

.cgmp-rep-auth-help {
	margin: 18px 0 0;
	font-size: 11.5px;
	color: #6B7280;
	text-align: center;
	line-height: 1.5;
}

/* ===========================================================================
   APP SHELL (dashboard + sub-pages)
   =========================================================================== */
body.cgmp-rep-body--app {
	background: #ECF0F4;
	padding-bottom: 88px; /* room for the bottom tab bar */
}

.cgmp-rep-app-top {
	background: linear-gradient(135deg, #1e73be, #155490);
	color: #fff;
	padding: 14px 16px;
	padding-top: calc(14px + env(safe-area-inset-top, 0));
	display: flex;
	align-items: center;
	gap: 12px;
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Thin chapín ribbon below the top bar — keeps the personality */
.cgmp-rep-app-top::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -3px;
	height: 3px;
	background: linear-gradient(to right,
		#F97316 0 20%,
		#FBBF24 20% 40%,
		#0EA5E9 40% 60%,
		#EC4899 60% 80%,
		#10B981 80% 100%);
}

.cgmp-rep-app-top-logo {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.92);
	color: #1e73be;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	flex-shrink: 0;
}
.cgmp-rep-app-top-body { flex: 1; min-width: 0; line-height: 1.2; }
.cgmp-rep-app-top-brand {
	display: block;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.08em;
}
.cgmp-rep-app-top-name {
	display: block;
	font-size: 14px;
	font-weight: 800;
	margin-top: 2px;
}

.cgmp-rep-online-toggle {
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cgmp-rep-online-toggle[aria-pressed="true"] { background: #16A34A; border-color: #16A34A; }
.cgmp-rep-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }

.cgmp-rep-app { padding: 16px; max-width: 720px; margin: 0 auto; }

.cgmp-rep-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 10px;
	padding: 14px 12px;
	margin-bottom: 18px;
}
.cgmp-rep-stat { display: flex; flex-direction: column; align-items: center; }
.cgmp-rep-stat-value {
	font-size: 18px;
	font-weight: 800;
	color: #111827;
}
.cgmp-rep-stat-value--money { color: #16A34A; }
.cgmp-rep-stat-label {
	font-size: 9.5px;
	font-weight: 700;
	color: #9CA3AF;
	letter-spacing: 0.06em;
	margin-top: 2px;
}

.cgmp-rep-section { background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 14px; }
.cgmp-rep-section-title {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	color: #6B7280;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cgmp-rep-empty { text-align: center; padding: 32px 12px; }
.cgmp-rep-empty-emoji { font-size: 36px; margin: 0 0 8px; }
.cgmp-rep-empty-title { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: #111827; }
.cgmp-rep-empty-sub { margin: 0; font-size: 12px; color: #6B7280; line-height: 1.5; }

.cgmp-rep-wallet-balance {
	background: linear-gradient(135deg, #1e73be, #155490);
	color: #fff;
	border-radius: 14px;
	padding: 22px 22px;
	text-align: center;
	display: block;
}
.cgmp-rep-wallet-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0.75;
}
.cgmp-rep-wallet-amount {
	display: block;
	font-size: 36px;
	font-weight: 800;
	margin: 8px 0;
	letter-spacing: -0.01em;
}
.cgmp-rep-wallet-sub { display: block; font-size: 11.5px; opacity: 0.8; }

.cgmp-rep-info-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #F3F4F6;
	font-size: 13px;
}
.cgmp-rep-info-row:last-child { border-bottom: 0; }
.cgmp-rep-info-row span { color: #6B7280; }
.cgmp-rep-info-row strong { color: #111827; font-weight: 700; }

.cgmp-rep-status {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.cgmp-rep-status--pending   { background: #FEF3C7; color: #92400E; }
.cgmp-rep-status--approved  { background: #ECFDF5; color: #15803D; }
.cgmp-rep-status--suspended { background: #F3F4F6; color: #6B7280; }
.cgmp-rep-status--rejected  { background: #FEE2E2; color: #991B1B; }

.cgmp-rep-logout-form { margin-top: 18px; }

/* Bottom tab bar */
.cgmp-rep-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid #E5E7EB;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-bottom: env(safe-area-inset-bottom, 0);
	z-index: 100;
}
.cgmp-rep-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 4px;
	text-decoration: none;
	color: #9CA3AF;
	font-size: 10px;
	font-weight: 700;
}
.cgmp-rep-tab-icon { font-size: 20px; line-height: 1; }
.cgmp-rep-tab.is-active { color: #1e73be; }

/* =============================================================================
   v1.5.3 — JOB CARDS
   ============================================================================= */
.cgmp-rep-job {
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 12px;
}
.cgmp-rep-job--active {
	border-color: #BFDBFE;
	background: linear-gradient(135deg, #EFF6FF 0%, #fff 60%);
}
.cgmp-rep-job-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 8px;
}
.cgmp-rep-job-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
}
.cgmp-rep-job-tag--active { background: #1e73be; color: #fff; }
.cgmp-rep-job-payout {
	font-size: 16px;
	font-weight: 800;
	color: #16A34A;
}
.cgmp-rep-job-route {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: #111827;
}
.cgmp-rep-job-name {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	color: #374151;
}
.cgmp-rep-job-addr {
	margin: 0;
	font-size: 12px;
	color: #6B7280;
}
.cgmp-rep-job-cod {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: #15803D;
	background: #ECFDF5;
	padding: 6px 10px;
	border-radius: 6px;
	display: inline-block;
}
.cgmp-rep-job-accept-form { margin: 12px 0 0; }
.cgmp-rep-job-accept { width: auto; padding: 10px 22px; font-size: 13px; }

/* =============================================================================
   v2.9.2 — Tablet / desktop redesign + presence picker + profile photo
   ============================================================================= */

/* Presence picker — 3 buttons in the header */
.cgmp-rep-presence-picker {
	display: flex;
	gap: 6px;
	background: rgba(255,255,255,0.14);
	padding: 4px;
	border-radius: 999px;
}

/* v2.91.6 — Locale switcher pill sits next to the presence picker in the
 * dark blue header. Override the default light-bg widget chrome so it
 * matches the surrounding chrome instead of looking like a popover. */
.cgmp-rep-app-top-locale .cgmp-locale {
	position: static;
	margin: 0;
}
.cgmp-rep-app-top-locale .cgmp-locale-trigger {
	background: rgba(255,255,255,0.14);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
	padding: 7px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	box-shadow: none;
}
.cgmp-rep-app-top-locale .cgmp-locale-trigger:hover {
	background: rgba(255,255,255,0.22);
	border-color: rgba(255,255,255,0.3);
}
.cgmp-rep-app-top-locale .cgmp-locale-trigger[aria-expanded="true"] {
	background: rgba(255,255,255,0.28);
	border-color: rgba(255,255,255,0.4);
}
.cgmp-rep-app-top-locale .cgmp-locale-label { color: #fff; }
.cgmp-rep-app-top-locale .cgmp-locale-chev  { color: rgba(255,255,255,0.7); }
/* Panel sits below the pill — keep its default light-bg look since the
 * dropdown belongs to the page surface, not the dark header. */
.cgmp-rep-app-top-locale .cgmp-locale-panel {
	right: 0;
	top: calc(100% + 6px);
}
@media (max-width: 640px) {
	/* On narrow widths the header wraps; let the switcher drop to next line
	 * naturally instead of overflowing. */
	.cgmp-rep-app-top { flex-wrap: wrap; row-gap: 8px; }
	.cgmp-rep-app-top-locale { order: 99; }
	/* Edge-to-edge: full-bleed auth card + dashboard sections; no overflow. */
	body.cgmp-rep-body--auth { padding: 0; }
	.cgmp-rep-auth, .cgmp-rep-onboard { max-width: none; border-radius: 0; box-shadow: none; padding: 28px 16px; min-width: 0; }
	.cgmp-rep-app { padding: 0; max-width: none; }
	.cgmp-rep-grid { padding-left: 0; padding-right: 0; }
	.cgmp-rep-grid > *, .cgmp-rep-section { min-width: 0; }
	.cgmp-rep-section { border-radius: 0; border-left: 0; border-right: 0; }
}
.cgmp-rep-presence-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	color: rgba(255,255,255,0.85);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.cgmp-rep-presence-btn:hover { color: #fff; }
.cgmp-rep-presence-btn .cgmp-rep-presence-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #94A3B8;
}
.cgmp-rep-presence-btn[data-presence="online"]  .cgmp-rep-presence-dot { background: #16A34A; }
.cgmp-rep-presence-btn[data-presence="break"]   .cgmp-rep-presence-dot { background: #F59E0B; }
.cgmp-rep-presence-btn[data-presence="offline"] .cgmp-rep-presence-dot { background: #94A3B8; }
.cgmp-rep-presence-btn.is-active {
	background: #fff;
	color: #1E3A8A;
	box-shadow: 0 2px 6px rgba(15,23,42,0.15);
}
.cgmp-rep-presence-btn.is-active[data-presence="online"]  { color: #15803D; }
.cgmp-rep-presence-btn.is-active[data-presence="break"]   { color: #92400E; }
.cgmp-rep-presence-btn.is-active[data-presence="offline"] { color: #475569; }

/* Hide the old toggle (replaced by picker) */
.cgmp-rep-online-toggle { display: none !important; }

/* Wide-mode grid: only kicks in ≥900px. Phones keep the single-column flow. */
.cgmp-rep-app--wide { padding: 0; }
.cgmp-rep-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 14px 90px; /* room for mobile tabbar */
}

@media (min-width: 900px) {
	body.cgmp-rep-body--app { background: #F1F5F9; }
	.cgmp-rep-app--wide {
		max-width: 1400px;
		margin: 0 auto;
	}
	.cgmp-rep-grid {
		display: grid;
		grid-template-columns: 280px 1fr 320px;
		gap: 22px;
		padding: 22px 24px;
	}
	.cgmp-rep-tabbar { display: none; }
}

@media (min-width: 1280px) {
	.cgmp-rep-grid { grid-template-columns: 300px 1fr 360px; gap: 28px; padding: 28px 32px; }
}

/* Profile card (left rail) */
.cgmp-rep-side { display: flex; flex-direction: column; gap: 14px; }
.cgmp-rep-profile-card {
	background: #fff;
	border-radius: 14px;
	padding: 24px 22px 22px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
.cgmp-rep-photo-wrap {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto 14px;
}
.cgmp-rep-photo-wrap img,
.cgmp-rep-photo-fallback {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid #fff;
	box-shadow: 0 4px 14px rgba(15,23,42,0.12);
}
.cgmp-rep-photo-fallback {
	background: linear-gradient(135deg, #1e73be, #155490);
	color: #fff;
	font-size: 46px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cgmp-rep-photo-upload-btn {
	position: absolute;
	bottom: 28px;
	right: -4px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1e73be;
	color: #fff;
	border: 3px solid #fff;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(15,23,42,0.2);
}
.cgmp-rep-photo-upload-btn:hover { background: #155490; }
.cgmp-rep-photo-upload-btn:disabled { opacity: 0.5; cursor: wait; }

.cgmp-rep-presence-pill {
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.cgmp-rep-presence-pill--online  { background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC; }
.cgmp-rep-presence-pill--break   { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.cgmp-rep-presence-pill--offline { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }

.cgmp-rep-profile-name { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: #0F172A; }
.cgmp-rep-profile-meta { margin: 0 0 4px; font-size: 13px; color: #6B7280; }
.cgmp-rep-profile-city { margin: 0; font-size: 13px; color: #475569; font-weight: 600; }

/* Side nav (desktop only — hidden on mobile by tabbar) */
.cgmp-rep-side-nav {
	background: #fff;
	border-radius: 14px;
	padding: 8px;
	display: none;
	flex-direction: column;
	gap: 2px;
	box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
@media (min-width: 900px) {
	.cgmp-rep-side-nav { display: flex; }
}
.cgmp-rep-side-nav-item {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	color: #475569;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.cgmp-rep-side-nav-item:hover { background: #F1F5F9; color: #0F172A; }
.cgmp-rep-side-nav-item.is-active { background: #EFF6FF; color: #1e73be; }
.cgmp-rep-side-nav-icon { font-size: 18px; }
.cgmp-rep-side-logout { margin: 8px 0 0; padding: 4px; }
.cgmp-rep-side-logout button {
	width: 100%;
	padding: 10px;
	border: 1px solid #E5E7EB;
	background: #fff;
	color: #6B7280;
	border-radius: 10px;
	font-weight: 600;
	cursor: pointer;
}
.cgmp-rep-side-logout button:hover { color: #B91C1C; border-color: #FECACA; }

/* Main center column */
.cgmp-rep-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Right rail */
.cgmp-rep-rail { display: none; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .cgmp-rep-rail { display: flex; } }
.cgmp-rep-rail-card {
	background: #fff;
	border-radius: 14px;
	padding: 22px;
	box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
.cgmp-rep-rail-card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: #0F172A; }
.cgmp-rep-rail-card ul { margin: 0; padding: 0 0 0 18px; }
.cgmp-rep-rail-card li { font-size: 13px; color: #475569; margin: 6px 0; line-height: 1.5; }
.cgmp-rep-rail-card--soft { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.cgmp-rep-rail-card p { margin: 0 0 12px; font-size: 13px; color: #1E3A8A; line-height: 1.5; }

/* Offline banner (when driver is not online) */
.cgmp-rep-offline-banner {
	background: linear-gradient(135deg, #FEF3C7, #FDE68A);
	border: 1px solid #FCD34D;
	border-left: 4px solid #F59E0B;
	border-radius: 12px;
	padding: 18px 20px;
	color: #78350F;
}
.cgmp-rep-offline-banner strong { display: block; font-size: 15px; margin-bottom: 6px; }
.cgmp-rep-offline-banner p { margin: 0; font-size: 13px; line-height: 1.5; }

/* v2.69.0 — Job lifecycle action buttons (active job card) */
.cgmp-rep-job-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cgmp-rep-job-action-form { margin: 0; }
.cgmp-rep-job-action-form .cgmp-rep-btn { width: auto; }

/* v2.69.0 — Driver wallet (owed ledger) */
.cgmp-rep-wallet-vendors { display: flex; flex-direction: column; gap: 10px; }
.cgmp-rep-wallet-vendor { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 14px 16px; }
.cgmp-rep-wallet-vendor-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cgmp-rep-wallet-vendor-body strong { font-size: 14px; color: #0F172A; }
.cgmp-rep-wallet-vendor-body span { font-size: 12px; color: #6B7280; }
.cgmp-rep-wallet-vendor-amount { font-size: 16px; font-weight: 800; color: #15803D; white-space: nowrap; }

.cgmp-rep-wallet-recent { display: flex; flex-direction: column; gap: 8px; }
.cgmp-rep-wallet-recent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; padding: 10px 14px; }
.cgmp-rep-wallet-recent-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cgmp-rep-wallet-recent-body strong { font-size: 13px; color: #0F172A; }
.cgmp-rep-wallet-recent-body span { font-size: 11px; color: #9CA3AF; }
.cgmp-rep-wallet-recent-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.cgmp-rep-wallet-recent-amount .cgmp-rep-amt--in  { font-weight: 800; color: #15803D; }
.cgmp-rep-wallet-recent-amount .cgmp-rep-amt--out { font-weight: 800; color: #B45309; }
.cgmp-rep-wallet-recent-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #9CA3AF; }

/* Stats strip — bigger on desktop */
@media (min-width: 900px) {
	.cgmp-rep-stats { background: #fff; border-radius: 14px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(15,23,42,0.05); display: grid; grid-template-columns: repeat(4, 1fr); }
	.cgmp-rep-stat-value { font-size: 28px; }
}