/*
 * Motofy - Frontend styles
 * Paleta: laranja primário (#FF5722), grafite, branco frio.
 */

/* ---------------------------------------------------------------- */
/* Tokens                                                            */
/* ---------------------------------------------------------------- */
.motofy-app, .motofy-auth, .motofy-track, .motofy-sub-required, .motofy-plan-grid, .motofy-status-screen {
	--m-primary: #FF5722;
	--m-primary-dark: #E64A19;
	--m-primary-soft: #FFF1EC;
	--m-secondary: #1F2937;
	--m-text: #111827;
	--m-text-muted: #6B7280;
	--m-bg: #F8FAFC;
	--m-card: #FFFFFF;
	--m-border: #E5E7EB;
	--m-shadow: 0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
	--m-shadow-lg: 0 10px 25px rgba(17,24,39,0.08), 0 4px 10px rgba(17,24,39,0.04);
	--m-radius: 12px;
	--m-radius-sm: 8px;
	--m-success: #10B981;
	--m-warning: #F59E0B;
	--m-danger: #EF4444;
	--m-info: #3B82F6;

	color: var( --m-text );
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.motofy-app *, .motofy-auth *, .motofy-track *, .motofy-sub-required *, .motofy-plan-grid *, .motofy-status-screen * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- */
/* Botões                                                            */
/* ---------------------------------------------------------------- */
.motofy-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border: 1px solid transparent;
	border-radius: var( --m-radius-sm );
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: all .15s ease;
	font-family: inherit;
}
.motofy-btn:disabled { opacity: .55; cursor: not-allowed; }
.motofy-btn-block { width: 100%; }
.motofy-btn-primary {
	background: var( --m-primary ); color: #fff;
}
.motofy-btn-primary:hover { background: var( --m-primary-dark ); }
.motofy-btn-secondary {
	background: var( --m-secondary ); color: #fff;
}
.motofy-btn-secondary:hover { background: #111827; }
.motofy-btn-ghost {
	background: transparent; color: var( --m-text-muted );
	border-color: var( --m-border );
}
.motofy-btn-ghost:hover { background: var( --m-bg ); color: var( --m-text ); }
.motofy-btn-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: var( --m-bg ); color: var( --m-text-muted );
	text-decoration: none; font-size: 18px;
	border: 1px solid var( --m-border );
}
.motofy-btn-icon:hover { color: var( --m-primary ); border-color: var( --m-primary ); }

/* ---------------------------------------------------------------- */
/* Forms                                                             */
/* ---------------------------------------------------------------- */
.motofy-form, .motofy-auth-form {
	display: flex; flex-direction: column; gap: 14px;
}
.motofy-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.motofy-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.motofy-field label, .motofy-section-label {
	font-size: 13px; font-weight: 600; color: var( --m-text );
}
.motofy-field input, .motofy-field textarea, .motofy-field select {
	padding: 11px 14px;
	border: 1px solid var( --m-border );
	border-radius: var( --m-radius-sm );
	background: #fff; color: var( --m-text );
	font-size: 14px; font-family: inherit;
	transition: border-color .15s, box-shadow .15s;
}
.motofy-field input:focus, .motofy-field textarea:focus, .motofy-field select:focus {
	outline: none;
	border-color: var( --m-primary );
	box-shadow: 0 0 0 3px rgba( 255, 87, 34, .15 );
}
.motofy-help { color: var( --m-text-muted ); font-size: 12px; }
.motofy-check {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; color: var( --m-text-muted ); cursor: pointer;
}
.motofy-form-msg {
	font-size: 13px; padding: 8px 0; min-height: 20px;
}
.motofy-form-msg.error   { color: var( --m-danger ); }
.motofy-form-msg.success { color: var( --m-success ); }

.motofy-geo-suggest {
	position: absolute; top: 100%; left: 0; right: 0;
	background: #fff; border: 1px solid var( --m-border );
	border-radius: var( --m-radius-sm ); margin-top: 4px;
	box-shadow: var( --m-shadow-lg ); z-index: 1000;
	max-height: 280px; overflow-y: auto;
}
.motofy-geo-item {
	display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
	padding: 10px 14px; background: none; border: none;
	font-size: 13px; cursor: pointer; color: var( --m-text );
	font-family: inherit; line-height: 1.4;
	border-bottom: 1px solid #F3F4F6;
}
.motofy-geo-item:last-child { border-bottom: none; }
.motofy-geo-item:hover { background: var( --m-primary-soft ); color: var( --m-primary-dark ); }
.motofy-geo-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.motofy-geo-text { flex: 1; }
.motofy-geo-loading {
	padding: 14px; color: var( --m-text-muted ); font-size: 13px; text-align: center;
}
.motofy-geo-empty {
	padding: 14px; color: var( --m-text-muted ); font-size: 13px;
}
.motofy-geo-empty strong { color: var( --m-text ); display: block; margin-bottom: 6px; }
.motofy-geo-empty p { margin: 6px 0 4px; font-weight: 600; color: var( --m-text ); }
.motofy-geo-empty ul { margin: 4px 0 0; padding-left: 18px; }
.motofy-geo-empty li { padding: 2px 0; }

/* Botão "Marcar no mapa" no label */
.motofy-field label {
	display: flex; justify-content: space-between; align-items: center;
}
.motofy-pin-btn {
	background: var( --m-primary-soft ); color: var( --m-primary-dark );
	border: 1px solid #FED7C5; border-radius: 6px;
	padding: 4px 10px; font-size: 11px; font-weight: 600;
	cursor: pointer; font-family: inherit;
	display: inline-flex; align-items: center; gap: 4px;
}
.motofy-pin-btn:hover { background: var( --m-primary ); color: #fff; border-color: var( --m-primary ); }

/* Modo "marcar no mapa" - cursor crosshair e banner */
.motofy-picking { cursor: crosshair !important; }
.motofy-picking .leaflet-container { cursor: crosshair !important; }
.motofy-pick-banner {
	position: absolute; top: 16px; left: 50%;
	transform: translateX( -50% );
	background: var( --m-primary ); color: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	box-shadow: var( --m-shadow-lg );
	z-index: 1000;
	display: flex; align-items: center; gap: 12px;
	font-size: 13px; font-weight: 600;
	animation: slideDown .25s ease;
}
.motofy-pick-cancel {
	background: rgba( 255, 255, 255, .25 ); color: #fff;
	border: none; padding: 4px 10px; border-radius: 999px;
	font-size: 11px; font-weight: 700; cursor: pointer;
	font-family: inherit;
}
.motofy-pick-cancel:hover { background: rgba( 255, 255, 255, .4 ); }
@keyframes slideDown {
	from { opacity: 0; transform: translate( -50%, -10px ); }
	to   { opacity: 1; transform: translate( -50%, 0 ); }
}

/* ---------------------------------------------------------------- */
/* Auth Gate                                                         */
/* ---------------------------------------------------------------- */
.motofy-auth {
	min-height: 600px;
	background: linear-gradient( 135deg, #FFF8F4 0%, #FFFFFF 70% );
	padding: 40px 20px;
}
.motofy-auth-shell {
	max-width: 1080px; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 460px;
	gap: 60px; align-items: center;
}
.motofy-auth-side .motofy-auth-brand {
	display: flex; align-items: center; gap: 10px;
	color: var( --m-primary ); margin-bottom: 24px;
}
.motofy-auth-logo {
	width: 44px; height: 44px;
	background: var( --m-primary ); color: #fff;
	border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
}
.motofy-auth-logo svg { width: 24px; height: 24px; }
.motofy-auth-brandname { font-weight: 800; font-size: 22px; color: var( --m-text ); letter-spacing: -.5px; }
.motofy-auth-title {
	font-size: 38px; line-height: 1.1; margin: 0 0 12px;
	color: var( --m-text ); font-weight: 800; letter-spacing: -1px;
}
.motofy-auth-subtitle {
	color: var( --m-text-muted ); font-size: 16px; line-height: 1.5;
	margin: 0 0 24px;
}
.motofy-auth-bullets {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 12px;
}
.motofy-auth-bullets li {
	display: flex; align-items: center; gap: 12px;
	color: var( --m-text ); font-weight: 500;
}
.motofy-auth-bullets li span { font-size: 22px; }

.motofy-auth-card {
	background: var( --m-card ); border-radius: 16px;
	box-shadow: var( --m-shadow-lg );
	padding: 28px;
	border: 1px solid var( --m-border );
}
.motofy-auth-tabs {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 0; padding: 4px; background: var( --m-bg );
	border-radius: var( --m-radius-sm ); margin-bottom: 22px;
}
.motofy-auth-tab {
	padding: 10px; background: transparent; border: none;
	font-weight: 600; color: var( --m-text-muted );
	border-radius: 6px; cursor: pointer; font-size: 14px;
	font-family: inherit;
}
.motofy-auth-tab.active {
	background: #fff; color: var( --m-text );
	box-shadow: var( --m-shadow );
}
.motofy-auth-form { display: none; }
.motofy-auth-form.active { display: flex; }
.motofy-auth-link {
	text-align: center; font-size: 13px; color: var( --m-text-muted );
	text-decoration: none; margin-top: 4px;
}
.motofy-auth-link:hover { color: var( --m-primary ); }

@media ( max-width: 860px ) {
	.motofy-auth-shell { grid-template-columns: 1fr; gap: 30px; }
	.motofy-auth-title { font-size: 28px; }
	.motofy-field-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* Plans grid (auth e tela de assinatura)                           */
/* ---------------------------------------------------------------- */
.motofy-plan-grid {
	display: grid; gap: 12px;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
}
.motofy-plan-grid-public {
	gap: 20px;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	max-width: 1000px; margin: 0 auto;
}
.motofy-plan-pick {
	display: block; cursor: pointer; position: relative;
}
.motofy-plan-pick input { position: absolute; opacity: 0; }
.motofy-plan-pick-inner {
	border: 2px solid var( --m-border ); border-radius: var( --m-radius );
	padding: 14px; background: #fff;
	transition: all .15s; height: 100%; position: relative;
}
.motofy-plan-pick:hover .motofy-plan-pick-inner { border-color: var( --m-primary ); }
.motofy-plan-pick input:checked + .motofy-plan-pick-inner {
	border-color: var( --m-primary ); background: var( --m-primary-soft );
	box-shadow: 0 0 0 3px rgba( 255, 87, 34, .12 );
}
.motofy-plan-pick.featured .motofy-plan-pick-inner { border-color: var( --m-primary ); }
.motofy-plan-name { font-weight: 700; font-size: 15px; color: var( --m-text ); }
.motofy-plan-price { font-size: 14px; color: var( --m-text ); margin: 4px 0 8px; }
.motofy-plan-price strong { color: var( --m-primary ); font-size: 18px; }
.motofy-plan-price span { color: var( --m-text-muted ); font-size: 12px; }
.motofy-plan-desc { font-size: 12px; color: var( --m-text-muted ); margin: 0 0 8px; line-height: 1.4; }
.motofy-plan-feats { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var( --m-text-muted ); }
.motofy-plan-feats li { padding: 2px 0; }
.motofy-plan-feats li::before { content: '✓'; color: var( --m-primary ); margin-right: 6px; font-weight: 700; }
.motofy-plan-badge {
	position: absolute; top: -10px; right: 12px;
	background: var( --m-primary ); color: #fff;
	font-size: 11px; font-weight: 700; padding: 4px 10px;
	border-radius: 999px; letter-spacing: .3px;
}

.motofy-plan-card {
	background: #fff; border-radius: var( --m-radius );
	border: 1px solid var( --m-border );
	padding: 28px 22px; position: relative;
	box-shadow: var( --m-shadow );
	display: flex; flex-direction: column; gap: 12px;
}
.motofy-plan-card.featured {
	border-color: var( --m-primary ); border-width: 2px;
	box-shadow: var( --m-shadow-lg );
	transform: translateY( -4px );
}
.motofy-plan-card h3 { margin: 0; font-size: 20px; }
.motofy-plan-price-big {
	display: flex; align-items: baseline; gap: 4px; margin: 6px 0;
}
.motofy-plan-price-big .symbol { color: var( --m-text-muted ); font-size: 16px; }
.motofy-plan-price-big strong { font-size: 36px; color: var( --m-text ); font-weight: 800; }
.motofy-plan-price-big .period { color: var( --m-text-muted ); font-size: 13px; }
.motofy-plan-card .motofy-plan-feats { font-size: 14px; flex: 1; }
.motofy-plan-card .motofy-plan-feats li { padding: 4px 0; }

/* ---------------------------------------------------------------- */
/* Subscription required                                             */
/* ---------------------------------------------------------------- */
.motofy-sub-required {
	max-width: 1100px; margin: 0 auto;
	padding: 60px 20px;
	background: var( --m-bg );
	min-height: 600px;
}
.motofy-sub-header { text-align: center; margin-bottom: 40px; }
.motofy-sub-icon {
	width: 64px; height: 64px;
	background: var( --m-primary ); color: #fff;
	border-radius: 50%; display: inline-flex;
	align-items: center; justify-content: center;
	font-size: 32px; margin-bottom: 16px;
}
.motofy-sub-header h2 { font-size: 28px; margin: 0 0 8px; color: var( --m-text ); }
.motofy-sub-header p { color: var( --m-text-muted ); margin: 0; font-size: 16px; }
.motofy-pending-payment {
	background: #FFFBEB; border: 1px solid #FCD34D;
	max-width: 500px; margin: 0 auto 30px;
	text-align: center; padding: 20px;
}
.motofy-pending-payment h3 { color: #92400E; margin: 0 0 8px; }
.motofy-sub-footer { text-align: center; margin-top: 30px; }
.motofy-link { color: var( --m-text-muted ); text-decoration: none; }
.motofy-link:hover { color: var( --m-primary ); }

/* ---------------------------------------------------------------- */
/* Status screens (motoboy pendente/suspenso)                        */
/* ---------------------------------------------------------------- */
.motofy-status-screen {
	max-width: 480px; margin: 0 auto;
	padding: 60px 20px; text-align: center;
}
.motofy-status-icon {
	width: 80px; height: 80px;
	background: var( --m-primary-soft ); color: var( --m-primary );
	border-radius: 50%; display: inline-flex;
	align-items: center; justify-content: center;
	font-size: 40px; margin-bottom: 20px;
}
.motofy-status-screen.suspended .motofy-status-icon {
	background: #FEE2E2; color: var( --m-danger );
}
.motofy-status-screen h2 { font-size: 24px; margin: 0 0 12px; }
.motofy-status-screen p { color: var( --m-text-muted ); margin: 8px 0; }
.motofy-status-screen .muted { font-size: 14px; }
.motofy-status-actions { margin-top: 24px; }

/* ---------------------------------------------------------------- */
/* App shell (dashboards)                                            */
/* ---------------------------------------------------------------- */
.motofy-app {
	background: var( --m-bg );
	min-height: 600px; height: 86vh;
	display: flex; flex-direction: column;
	border-radius: var( --m-radius );
	overflow: hidden;
	box-shadow: var( --m-shadow );
}

/* Topbar */
.motofy-topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 20px;
	background: #fff; border-bottom: 1px solid var( --m-border );
	flex-shrink: 0;
}
.motofy-topbar-brand {
	display: flex; align-items: center; gap: 10px;
	color: var( --m-primary ); font-weight: 800; font-size: 18px;
}
.motofy-logo-icon {
	width: 28px; height: 28px;
	background: var( --m-primary ); color: #fff;
	border-radius: 8px; padding: 4px;
}
.motofy-topbar-user {
	display: flex; align-items: center; gap: 12px;
}
.motofy-rating {
	display: flex; align-items: center; gap: 4px;
	background: var( --m-bg ); padding: 6px 12px;
	border-radius: 999px; font-size: 13px;
}
.motofy-rating .star { color: var( --m-warning ); }
.motofy-rating small { color: var( --m-text-muted ); }
.motofy-online-toggle {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px;
}
.motofy-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.motofy-switch input { opacity: 0; width: 0; height: 0; }
.motofy-slider {
	position: absolute; cursor: pointer; inset: 0;
	background: #CBD5E1; border-radius: 999px;
	transition: .2s;
}
.motofy-slider:before {
	content: ''; position: absolute;
	height: 16px; width: 16px;
	left: 3px; top: 3px;
	background: #fff; border-radius: 50%;
	transition: .2s;
}
.motofy-switch input:checked + .motofy-slider { background: var( --m-success ); }
.motofy-switch input:checked + .motofy-slider:before { transform: translateX( 18px ); }
.motofy-online-label { font-weight: 600; color: var( --m-success ); }

.motofy-sub-pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: var( --m-primary-soft ); color: var( --m-primary-dark );
	padding: 6px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 600;
}
.motofy-sub-pill .dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var( --m-success ); animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.motofy-user-chip {
	display: flex; align-items: center; gap: 8px;
}
.motofy-avatar {
	width: 32px; height: 32px;
	background: var( --m-primary ); color: #fff;
	border-radius: 50%; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px;
}
.motofy-user-name { font-size: 13px; font-weight: 600; }

/* Shell layout */
.motofy-shell {
	display: grid;
	grid-template-columns: 380px 1fr;
	flex: 1;
	min-height: 0;
}
.motofy-sidebar {
	background: var( --m-bg );
	border-right: 1px solid var( --m-border );
	overflow-y: auto;
	padding: 16px;
	display: flex; flex-direction: column; gap: 14px;
}
.motofy-sidebar.wide { grid-template-columns: 440px 1fr; }
.motofy-shell:has( .motofy-sidebar.wide ) { grid-template-columns: 440px 1fr; }
.motofy-main {
	position: relative;
}
.motofy-map {
	width: 100%; height: 100%; min-height: 400px;
	background: #E8EEF3;
}

/* Tabs */
.motofy-tabs {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 4px; padding: 4px; background: #fff;
	border: 1px solid var( --m-border );
	border-radius: var( --m-radius-sm );
}
.motofy-tab {
	padding: 10px; background: transparent; border: none;
	font-weight: 600; color: var( --m-text-muted );
	border-radius: 6px; cursor: pointer; font-size: 13px;
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px; font-family: inherit;
}
.motofy-tab.active { background: var( --m-primary ); color: #fff; }
.motofy-tab-count {
	background: rgba( 255, 255, 255, .3 );
	padding: 2px 8px; border-radius: 999px; font-size: 11px;
}
.motofy-tab:not(.active) .motofy-tab-count {
	background: var( --m-bg ); color: var( --m-text-muted );
}

/* Cards */
.motofy-card {
	background: #fff; border-radius: var( --m-radius );
	border: 1px solid var( --m-border );
	padding: 16px;
	box-shadow: var( --m-shadow );
}
.motofy-card-head { margin-bottom: 14px; }
.motofy-card-head h3 { margin: 0; font-size: 16px; }
.motofy-card-sub { font-size: 12px; color: var( --m-text-muted ); display: block; margin-top: 2px; }
.motofy-list-head h3 { margin: 8px 4px 0; font-size: 14px; color: var( --m-text-muted ); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.motofy-list { display: flex; flex-direction: column; gap: 10px; }

.motofy-card-delivery {
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}
.motofy-card-delivery:hover {
	transform: translateY( -1px );
	box-shadow: var( --m-shadow-lg );
}
.motofy-card-row {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 12px;
}
.motofy-card-fee {
	font-size: 18px; font-weight: 700; color: var( --m-text );
}
.motofy-card-addresses {
	display: flex; flex-direction: column; gap: 6px;
	margin-bottom: 12px;
	position: relative;
}
.motofy-card-addresses::before {
	content: ''; position: absolute;
	left: 5px; top: 14px; bottom: 14px;
	width: 2px; background: var( --m-border );
}
.motofy-addr-line {
	display: flex; gap: 10px; align-items: flex-start;
	font-size: 13px;
	z-index: 1;
}
.motofy-addr-line .dot {
	width: 12px; height: 12px; border-radius: 50%;
	margin-top: 3px; flex-shrink: 0;
	background: #fff; border: 3px solid var( --m-text-muted );
}
.motofy-addr-pickup .dot { border-color: var( --m-success ); }
.motofy-addr-drop .dot { border-color: var( --m-danger ); }
.motofy-card-meta {
	display: flex; gap: 12px; font-size: 12px;
	color: var( --m-text-muted ); margin-bottom: 10px;
}

/* Status pills */
.motofy-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px; font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.motofy-status-pending   { background: #FEF3C7; color: #92400E; }
.motofy-status-accepted  { background: #DBEAFE; color: #1E40AF; }
.motofy-status-picked_up { background: #E0E7FF; color: #3730A3; }
.motofy-status-delivered { background: #D1FAE5; color: #065F46; }
.motofy-status-cancelled { background: #FEE2E2; color: #991B1B; }

/* Empty / skeleton */
.motofy-empty {
	text-align: center; padding: 30px 16px;
	background: #fff; border: 1px dashed var( --m-border );
	border-radius: var( --m-radius );
}
.motofy-empty p { margin: 0 0 6px; font-weight: 600; color: var( --m-text ); }
.motofy-empty small { color: var( --m-text-muted ); }
.motofy-skeleton {
	height: 110px; border-radius: var( --m-radius );
	background: linear-gradient( 90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75% );
	background-size: 200% 100%;
	animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Fee preview */
.motofy-fee-preview {
	background: var( --m-primary-soft );
	border-radius: var( --m-radius-sm );
	padding: 14px;
	border: 1px solid #FED7C5;
}
.motofy-fee-row {
	display: flex; justify-content: space-between;
	padding: 4px 0; font-size: 13px;
}
.motofy-fee-row.total {
	border-top: 1px solid #FED7C5; margin-top: 6px;
	padding-top: 10px; font-size: 15px;
}
.motofy-fee-row.total strong { color: var( --m-primary ); font-size: 20px; }

/* Map pins */
.motofy-divicon { background: transparent !important; border: none !important; }
.motofy-pin {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 50px;
	position: relative;
}
.motofy-pin::after {
	content: ''; position: absolute;
	bottom: 0; left: 50%; transform: translateX( -50% );
	width: 0; height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid currentColor;
}
.motofy-pin > span {
	width: 36px; height: 36px;
	border-radius: 50%; background: currentColor;
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 18px; box-shadow: 0 4px 12px rgba( 0, 0, 0, .25 );
	border: 3px solid #fff;
}
.motofy-pin > span::before { content: ''; position: absolute; }
.motofy-pin-moto   { color: var( --m-primary ); }
.motofy-pin-pickup { color: var( --m-success ); }
.motofy-pin-drop   { color: var( --m-danger ); }

/* ---------------------------------------------------------------- */
/* Tracking page                                                     */
/* ---------------------------------------------------------------- */
.motofy-track {
	min-height: 600px;
	background: var( --m-bg );
	border-radius: var( --m-radius );
	overflow: hidden;
	box-shadow: var( --m-shadow );
}
.motofy-track-shell {
	display: grid; grid-template-columns: 380px 1fr;
	min-height: 600px;
}
.motofy-track-info {
	padding: 30px 26px;
	background: #fff; border-right: 1px solid var( --m-border );
	overflow-y: auto;
}
.motofy-track-status {
	display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.motofy-track-status-icon {
	width: 56px; height: 56px;
	background: var( --m-primary-soft ); color: var( --m-primary );
	border-radius: 16px; display: inline-flex;
	align-items: center; justify-content: center;
	font-size: 28px;
}
.motofy-track-status small {
	color: var( --m-text-muted ); font-size: 12px;
	text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
}
.motofy-track-status h2 { margin: 0; font-size: 22px; }
.motofy-track-detail {
	background: var( --m-bg );
	padding: 14px; border-radius: var( --m-radius-sm );
	margin-bottom: 24px;
}
.motofy-track-detail strong { font-size: 18px; }
.motofy-track-detail .muted { color: var( --m-text-muted ); font-size: 13px; margin-top: 4px; }
.motofy-track-steps {
	display: flex; flex-direction: column; gap: 4px;
	position: relative;
	padding-left: 8px;
}
.motofy-track-step {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 0;
	color: var( --m-text-muted );
	position: relative;
}
.motofy-track-step::before {
	content: ''; position: absolute;
	left: 6px; top: 30px; bottom: -10px;
	width: 2px; background: var( --m-border );
}
.motofy-track-step:last-child::before { display: none; }
.motofy-step-bullet {
	width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 2px solid var( --m-border );
	flex-shrink: 0; z-index: 1;
}
.motofy-track-step.done { color: var( --m-text ); }
.motofy-track-step.done .motofy-step-bullet { background: var( --m-success ); border-color: var( --m-success ); }
.motofy-track-step.done::before { background: var( --m-success ); }
.motofy-track-step.current .motofy-step-bullet {
	background: var( --m-primary ); border-color: var( --m-primary );
	box-shadow: 0 0 0 4px rgba( 255, 87, 34, .2 );
	animation: pulse 1.6s infinite;
}
.motofy-track-map { position: relative; }

/* Status bar para motoboy */
.motofy-status-bar {
	position: absolute; bottom: 16px; left: 50%;
	transform: translateX( -50% );
	background: #fff; padding: 10px 18px;
	border-radius: 999px; box-shadow: var( --m-shadow-lg );
	font-size: 13px; font-weight: 600;
	z-index: 1000;
}
.motofy-status-bar:empty { display: none; }

/* ---- WhatsApp / share buttons (cards) ----- */
.motofy-btn-whatsapp {
	background: #25D366; color: #fff;
	border: none;
}
.motofy-btn-whatsapp:hover { background: #128C7E; color: #fff; }
.motofy-btn-icon-only {
	width: 40px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.motofy-card-share-row {
	display: flex; gap: 6px; margin-bottom: 8px;
}
.motofy-card-share-row .motofy-btn-whatsapp {
	flex: 1; padding: 8px 12px; font-size: 12px;
	border-radius: 8px; gap: 6px;
}

/* ---- Modal pós-criação ---- */
.motofy-modal-backdrop {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba( 15, 23, 42, .55 );
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; transition: opacity .2s;
	-webkit-backdrop-filter: blur( 4px ); backdrop-filter: blur( 4px );
}
.motofy-modal-backdrop.is-visible { opacity: 1; }
.motofy-modal {
	background: #fff; border-radius: 20px;
	max-width: 420px; width: 100%;
	padding: 32px 28px;
	text-align: center;
	box-shadow: 0 25px 50px rgba( 0, 0, 0, .25 );
	transform: translateY( 20px ); transition: transform .25s ease;
}
.motofy-modal-backdrop.is-visible .motofy-modal { transform: translateY( 0 ); }
.motofy-modal-icon {
	width: 64px; height: 64px;
	background: #D1FAE5; color: #065F46;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 32px; margin-bottom: 12px;
}
.motofy-modal h2 { margin: 0 0 6px; font-size: 22px; color: var( --m-text ); }
.motofy-modal p { margin: 4px 0; color: var( --m-text-muted ); font-size: 14px; }
.motofy-modal p strong { color: var( --m-text ); }
.motofy-modal-sub { margin-top: 14px !important; }
.motofy-modal-actions {
	margin-top: 20px;
	display: flex; flex-direction: column; gap: 8px;
}

/* ---- Toast ---- */
.motofy-toast {
	position: fixed; bottom: 24px; left: 50%;
	transform: translate( -50%, 60px );
	background: #1F2937; color: #fff;
	padding: 12px 20px; border-radius: 999px;
	font-size: 14px; font-weight: 600;
	box-shadow: 0 10px 25px rgba( 0, 0, 0, .25 );
	z-index: 9998; opacity: 0;
	transition: transform .25s, opacity .25s;
	pointer-events: none;
}
.motofy-toast.is-visible {
	transform: translate( -50%, 0 ); opacity: 1;
}
.motofy-toast.is-success { background: #065F46; }
.motofy-toast.is-error   { background: #991B1B; }

/* ---------------------------------------------------------------- */
/* Mobile                                                            */
/* ---------------------------------------------------------------- */
@media ( max-width: 860px ) {
	.motofy-shell, .motofy-track-shell {
		grid-template-columns: 1fr; grid-template-rows: 1fr 320px;
	}
	.motofy-shell .motofy-sidebar, .motofy-shell .motofy-sidebar.wide {
		border-right: none; border-top: 1px solid var( --m-border );
		grid-row: 2;
	}
	.motofy-shell .motofy-main, .motofy-track-map { grid-row: 1; }
	.motofy-track-info { border-right: none; border-bottom: 1px solid var( --m-border ); }
	.motofy-app { height: auto; min-height: 700px; }
	.motofy-topbar-user .motofy-user-name { display: none; }
}