/* ── UniCarpool Design System — v2.0 (Green Stitch Edition) ──────────────
   Tokens globais alinhados com o design system gerado no Google Stitch.
   Paleta verde universitária · Mobile-first · Light + Dark mode
────────────────────────────────────────────────────────────────────────── */

/* ─ Light theme (default) ─────────────────────────────────────────────── */
:root {
    /* Brand — Verde Vibrante como primário */
    --ucp-primary:        #1BAF52;
    --ucp-primary-hover:  #0D8344;
    --ucp-primary-light:  #e7f9e0;
    --ucp-primary-rgb:    27, 175, 82;

    /* Escala tonal verde (50–900) — ancorada na marca (#1BAF52 = 500) */
    --ucp-green-50:   #ecfdf3;
    --ucp-green-100:  #d1f7df;
    --ucp-green-200:  #a8efc1;
    --ucp-green-300:  #6fe09b;
    --ucp-green-400:  #38cc75;
    --ucp-green-500:  #1BAF52;
    --ucp-green-600:  #0D8344;
    --ucp-green-700:  #0a6b39;
    --ucp-green-800:  #0a5530;
    --ucp-green-900:  #08442a;

    /* Neutros premium (slate frio) — para texto/bordas/superfícies refinadas */
    --ucp-neutral-50:  #f8faf9;
    --ucp-neutral-100: #f1f5f3;
    --ucp-neutral-200: #e4eae7;
    --ucp-neutral-300: #cdd6d1;
    --ucp-neutral-400: #9aa8a1;
    --ucp-neutral-500: #6b7b73;
    --ucp-neutral-600: #4d5a53;
    --ucp-neutral-700: #3a453f;
    --ucp-neutral-800: #232b27;
    --ucp-neutral-900: #131a16;

    /* Material Design 3 green surface tokens */
    --ucp-surface-lowest: #ffffff;
    --ucp-surface-low:    #e7f9e0;
    --ucp-surface-mid:    #e1f3da;
    --ucp-surface-high:   #dbedd5;
    --ucp-surface-highest:#d6e8cf;

    /* Surfaces (legacy compat + new) */
    --ucp-bg:             #edffe6;
    --ucp-card-bg:        #ffffff;
    --ucp-surface:        #F5F7F5;
    --ucp-overlay:        rgba(0, 0, 0, .45);

    /* Text */
    --ucp-text:           #111f10;
    --ucp-text-secondary: #3d4a3d;
    --ucp-text-muted:     #6d7b6c;
    --ucp-muted:          #bccaba;

    /* Borders */
    --ucp-border:         #E4EDDB;
    --ucp-border-focus:   #1BAF52;

    /* Semantic */
    --ucp-success:        #006e2f;
    --ucp-success-bg:     #e7f9e0;
    --ucp-danger:         #ba1a1a;
    --ucp-error:          #ba1a1a;
    --ucp-danger-bg:      #ffdad6;
    --ucp-warning:        #e8821a;
    --ucp-warning-bg:     #fff3e0;
    --ucp-info:           #0057a3;
    --ucp-info-bg:        #e8f4ff;

    /* Radius */
    --ucp-radius-xs:      4px;
    --ucp-radius-sm:      8px;
    --ucp-radius:         16px;
    --ucp-radius-lg:      20px;
    --ucp-radius-xl:      24px;
    --ucp-radius-full:    9999px;

    /* Shadow — green-tinted */
    --ucp-shadow-xs:  0 1px 2px  rgba(18,32,17,.04);
    --ucp-shadow-sm:  0 2px 8px  rgba(18,32,17,.06);
    --ucp-shadow:     0 4px 12px rgba(18,32,17,.08);
    --ucp-shadow-lg:  0 4px 24px rgba(18,32,17,.10);
    --ucp-shadow-xl:  0 8px 32px rgba(18,32,17,.14);
    --ucp-shadow-2xl: 0 16px 48px rgba(18,32,17,.18);
    --ucp-shadow-green: 0 6px 18px rgba(27,175,82,.32);

    /* Gradientes premium */
    --ucp-grad-primary: linear-gradient(135deg, #22c25d 0%, #1BAF52 55%, #0D8344 100%);
    --ucp-grad-hero:    linear-gradient(160deg, #edffe6 0%, #d1f7df 45%, #a8efc1 100%);
    --ucp-grad-sheen:   linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
    --ucp-grad-card:    linear-gradient(135deg, var(--ucp-card-bg) 0%, var(--ucp-primary-light) 220%);

    /* Spacing scale (8px grid) */
    --ucp-space-1:  0.25rem;   /*  4px */
    --ucp-space-2:  0.5rem;    /*  8px */
    --ucp-space-3:  0.75rem;   /* 12px */
    --ucp-space-4:  1rem;      /* 16px */
    --ucp-space-5:  1.25rem;   /* 20px */
    --ucp-space-6:  1.5rem;    /* 24px */
    --ucp-space-8:  2rem;      /* 32px */
    --ucp-space-10: 2.5rem;    /* 40px */
    --ucp-space-12: 3rem;      /* 48px */

    /* Typography */
    --ucp-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ucp-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ucp-font-mono:    'SF Mono', 'Fira Code', Consolas, monospace;
    --ucp-text-xs:      0.75rem;    /* 12px */
    --ucp-text-sm:      0.8125rem;  /* 13px */
    --ucp-text-base:    1rem;       /* 16px */
    --ucp-text-lg:      1.125rem;   /* 18px */
    --ucp-text-xl:      1.25rem;    /* 20px */
    --ucp-text-2xl:     1.5rem;     /* 24px */
    --ucp-text-3xl:     1.75rem;    /* 28px */
    --ucp-line-height:  1.6;

    /* Transitions */
    --ucp-transition:   150ms ease;
    --ucp-transition-slow: 300ms ease;

    /* Z-index scale */
    --ucp-z-dropdown:   100;
    --ucp-z-sticky:     200;
    --ucp-z-overlay:    300;
    --ucp-z-modal:      400;
    --ucp-z-toast:      500;
    --ucp-z-nav:        600;
}

/* ─ Dark theme ────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --ucp-primary:       #1BAF52;
    --ucp-primary-hover: #5ae07c;
    --ucp-primary-light: #0d2218;
    --ucp-primary-rgb:   27, 175, 82;

    /* Surface tokens dark */
    --ucp-surface-lowest: #0e0e0e;
    --ucp-surface-low:    #1c1b1b;
    --ucp-surface-mid:    #201f1f;
    --ucp-surface-high:   #2a2a2a;
    --ucp-surface-highest:#353534;

    --ucp-bg:            #0A0A0A;
    --ucp-card-bg:       #111811;
    --ucp-surface:       #0D1A0D;
    --ucp-overlay:       rgba(0, 0, 0, .65);

    --ucp-text:           #e5e2e1;
    --ucp-text-secondary: #bccaba;
    --ucp-text-muted:     #6d7b6c;
    --ucp-muted:          #3d4a3d;

    --ucp-border:         #1E2C1E;
    --ucp-border-focus:   #1BAF52;

    --ucp-success-bg:  #0d2218;
    --ucp-danger-bg:   #3d0707;
    --ucp-error:       #ff8585;
    --ucp-warning-bg:  #2d1a00;
    --ucp-info-bg:     #061a33;

    --ucp-shadow-xs: 0 1px 2px  rgba(0,0,0,.3);
    --ucp-shadow-sm: 0 2px 8px  rgba(0,0,0,.35);
    --ucp-shadow:    0 4px 12px rgba(0,0,0,.5);
    --ucp-shadow-lg: 0 4px 24px rgba(0,0,0,.6);
    --ucp-shadow-xl: 0 8px 32px rgba(0,0,0,.7);
    --ucp-shadow-2xl: 0 16px 48px rgba(0,0,0,.75);
    --ucp-shadow-green: 0 4px 14px rgba(27,175,82,.2);

    /* Neutros premium — invertidos para dark */
    --ucp-neutral-50:  #131a16;
    --ucp-neutral-100: #1b231e;
    --ucp-neutral-200: #232b27;
    --ucp-neutral-300: #3a453f;
    --ucp-neutral-400: #4d5a53;
    --ucp-neutral-500: #6b7b73;
    --ucp-neutral-600: #9aa8a1;
    --ucp-neutral-700: #cdd6d1;
    --ucp-neutral-800: #e4eae7;
    --ucp-neutral-900: #f8faf9;

    /* Gradientes dark */
    --ucp-grad-primary: linear-gradient(135deg, #1fbf5b 0%, #1BAF52 55%, #0a6b39 100%);
    --ucp-grad-hero:    linear-gradient(160deg, #0d2218 0%, #0f1a12 60%, #0A0A0A 100%);
    --ucp-grad-sheen:   linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
    --ucp-grad-card:    linear-gradient(135deg, var(--ucp-card-bg) 0%, #16221a 220%);
}

/* ─ Base reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--ucp-bg);
    color: var(--ucp-text);
    font-family: var(--ucp-font);
    font-size: var(--ucp-text-base);
    line-height: var(--ucp-line-height);
    transition: background-color var(--ucp-transition-slow), color var(--ucp-transition-slow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/* ─ Global mobile: tap targets + no double-tap delay ──────────────────── */
button, a, [role="button"], label,
.ucp-nav-tab, .ucp-trip-card, .ucp-request-card,
.ucp-tnav-btn, .ucp-tnav-link, .ucp-tnav-user {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure all interactive elements are at least 44×44px on touch devices */
@media (max-width: 768px) and (pointer: coarse) {
    button:not([class*="ucp-nav-tab"]):not(#ucp-theme-toggle):not(#ucp-messages-btn) {
        min-height: 44px;
    }
    .ucp-tnav-btn  { min-height: 44px; }
    .ucp-nav-tab   { min-height: 56px; }
}

/* ─ Typography scale ──────────────────────────────────────────────────── */
.ucp-headline-lg {
    font-family: var(--ucp-font-display);
    font-size: var(--ucp-text-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ucp-text);
}

.ucp-headline-md {
    font-family: var(--ucp-font-display);
    font-size: var(--ucp-text-2xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--ucp-text);
}

.ucp-headline-sm {
    font-family: var(--ucp-font-display);
    font-size: var(--ucp-text-lg);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ucp-text);
}

/* Títulos de página e seção usam a fonte display (premium) */
.ucp-ct-page-title,
.ucp-section-header h1,
.ucp-profile-name,
.ucp-dash-title {
    font-family: var(--ucp-font-display);
    letter-spacing: -0.02em;
}

/* Números tabulares para preços, contadores e tempos */
.ucp-card-price, .ucp-trip-price-badge, .ucp-driver-rep-num, .ucp-gam-board-row strong,
.ucp-eta-value, .ucp-summary-row strong, .ucp-stat-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.ucp-label-caps {
    font-size: var(--ucp-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ucp-text-muted);
}

.ucp-caption {
    font-size: var(--ucp-text-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ucp-text-muted);
}

/* ─ Utility classes ───────────────────────────────────────────────────── */
.ucp-container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: var(--ucp-space-4);
}

/* ─ Buttons — pill-shaped per Stitch ─────────────────────────────────── */
.ucp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ucp-space-2);
    padding: 0 1.5rem;
    height: 52px;
    border-radius: var(--ucp-radius-full);
    font-size: var(--ucp-text-xs);
    font-weight: 700;
    font-family: var(--ucp-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background var(--ucp-transition), color var(--ucp-transition),
                box-shadow var(--ucp-transition), opacity var(--ucp-transition),
                transform var(--ucp-transition);
    white-space: nowrap;
    line-height: 1;
    vertical-align: middle;
}

.ucp-btn-sm {
    height: 40px;
    padding: 0 1.1rem;
    font-size: 0.6875rem;
}

.ucp-btn-primary,
.ucp-btn--primary,
.ucp-btn-success {
    position: relative;
    background: var(--ucp-grad-primary);
    color: #fff;
    box-shadow: var(--ucp-shadow-green);
    overflow: hidden;
    isolation: isolate;
}
/* Brilho sutil no topo (sheen) */
.ucp-btn-primary::before,
.ucp-btn--primary::before,
.ucp-btn-success::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ucp-grad-sheen);
    pointer-events: none;
    z-index: -1;
}

.ucp-btn-primary:hover:not(:disabled),
.ucp-btn--primary:hover:not(:disabled),
.ucp-btn-success:hover:not(:disabled) {
    box-shadow: 0 8px 24px rgba(var(--ucp-primary-rgb), .42);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(1.03);
}

.ucp-btn-outline {
    background: transparent;
    color: var(--ucp-primary);
    border: 1.5px solid var(--ucp-primary);
    box-shadow: none;
}

.ucp-btn-outline:hover:not(:disabled) {
    background: rgba(var(--ucp-primary-rgb), .08);
    color: var(--ucp-primary);
    text-decoration: none;
}

.ucp-btn-danger,
.ucp-btn--danger-ghost {
    background: transparent;
    color: var(--ucp-danger);
    border: 1.5px solid var(--ucp-danger);
}

.ucp-btn-danger:hover:not(:disabled),
.ucp-btn--danger-ghost:hover:not(:disabled) {
    background: var(--ucp-danger-bg);
}

.ucp-btn--ghost {
    background: transparent;
    color: var(--ucp-text-secondary);
    border: 1.5px solid var(--ucp-border);
}

.ucp-btn--ghost:hover:not(:disabled) {
    background: var(--ucp-surface-low);
}

.ucp-btn:disabled,
.ucp-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Press feedback (escala) + foco por teclado */
.ucp-btn:active:not(:disabled) {
    transform: translateY(0) scale(.97);
}
.ucp-btn:focus-visible {
    outline: 3px solid rgba(var(--ucp-primary-rgb), .45);
    outline-offset: 2px;
}

/* Estado de carregamento (spinner) */
.ucp-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}
.ucp-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255,255,255,.55);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ucp-spin .6s linear infinite;
}
.ucp-btn-outline.is-loading::after,
.ucp-btn--ghost.is-loading::after { border-color: rgba(var(--ucp-primary-rgb),.4); border-top-color: var(--ucp-primary); }
@keyframes ucp-spin { to { transform: rotate(360deg); } }

/* Icon-only circular button */
.ucp-btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--ucp-surface-low);
    color: var(--ucp-text-secondary);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ucp-transition), color var(--ucp-transition);
    font-size: 1.1rem;
}

.ucp-btn-icon:hover { background: var(--ucp-surface-mid); color: var(--ucp-primary); }
.ucp-btn-icon.ucp-btn-icon--danger:hover { background: var(--ucp-danger-bg); color: var(--ucp-danger); }

/* ─ Form inputs ───────────────────────────────────────────────────────── */
.ucp-input,
.ucp-select,
.ucp-textarea {
    width: 100%;
    padding: 0 0.875rem;
    height: 52px;
    border: 1.5px solid var(--ucp-border);
    border-radius: var(--ucp-radius-sm);
    background: var(--ucp-card-bg);
    color: var(--ucp-text);
    font-family: var(--ucp-font);
    font-size: var(--ucp-text-base);
    transition: border-color var(--ucp-transition), box-shadow var(--ucp-transition),
                background var(--ucp-transition);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.ucp-textarea {
    height: auto;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    resize: vertical;
}

.ucp-input:focus,
.ucp-select:focus,
.ucp-textarea:focus {
    border-color: var(--ucp-border-focus);
    box-shadow: 0 0 0 3px rgba(var(--ucp-primary-rgb), .12);
    background: var(--ucp-card-bg);
}

.ucp-input--icon-left { padding-left: 2.75rem; }

/* Select dropdown arrow */
.ucp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d7b6c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 2.5rem;
}

[data-theme="dark"] .ucp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23bccaba' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Form label */
.ucp-field-label {
    display: block;
    font-size: var(--ucp-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ucp-text-secondary);
    margin-bottom: 6px;
}

.ucp-field-hint {
    font-size: var(--ucp-text-xs);
    color: var(--ucp-text-muted);
    margin-top: 4px;
}

.ucp-field-optional {
    font-size: var(--ucp-text-xs);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ucp-text-muted);
    margin-left: 4px;
}

/* Input wrap with icon */
.ucp-input-has-icon {
    position: relative;
}

.ucp-input-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ucp-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
    font-size: 20px;
}

/* ─ Cards ─────────────────────────────────────────────────────────────── */
.ucp-card {
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-radius: var(--ucp-radius);
    box-shadow: var(--ucp-shadow-sm);
    transition: box-shadow var(--ucp-transition-slow), transform var(--ucp-transition-slow);
    padding: var(--ucp-space-4);
}

.ucp-card:hover {
    box-shadow: var(--ucp-shadow-lg);
    transform: translateY(-2px);
}

/* Variante premium: topo com acento + leve gradiente */
.ucp-card--accent {
    border-top: 3px solid var(--ucp-primary);
    background: var(--ucp-grad-card);
}

/* ─ Badges / Status pills ─────────────────────────────────────────────── */
.ucp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--ucp-radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ucp-badge-green  { background: var(--ucp-primary-light); color: var(--ucp-primary-hover); }
.ucp-badge-amber  { background: rgba(232,130,26,.15);     color: #c26a00; }
.ucp-badge-red    { background: var(--ucp-danger-bg);     color: var(--ucp-danger); }
.ucp-badge-gray   { background: var(--ucp-surface-high);  color: var(--ucp-text-muted); }
.ucp-badge-khaki  { background: rgba(197,203,142,.25);    color: #5a6330; }

/* Status badges (legacy class compat) */
.ucp-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--ucp-radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ucp-status-badge--active    { background: var(--ucp-primary-light); color: var(--ucp-primary-hover); }
.ucp-status-badge--cancelled { background: var(--ucp-surface-high);  color: var(--ucp-text-muted); }
.ucp-status-badge--completed { background: rgba(197,203,142,.25);    color: #5a6330; }

/* ─ Notices / Alerts ──────────────────────────────────────────────────── */
.ucp-notice,
.ucp-alert {
    padding: var(--ucp-space-3) var(--ucp-space-4);
    border-radius: var(--ucp-radius-sm);
    border-left: 3px solid;
    font-size: var(--ucp-text-base);
    line-height: 1.5;
}

.ucp-notice,
.ucp-alert--info   { border-color: var(--ucp-primary); background: var(--ucp-primary-light); color: var(--ucp-text); }
.ucp-alert--warning { border-color: var(--ucp-warning); background: var(--ucp-warning-bg);   color: var(--ucp-text); }
.ucp-alert--danger  { border-color: var(--ucp-danger);  background: var(--ucp-danger-bg);    color: var(--ucp-text); }
.ucp-alert--success { border-color: var(--ucp-success); background: var(--ucp-success-bg);   color: var(--ucp-text); }

/* ─ Empty state ───────────────────────────────────────────────────────── */
.ucp-empty-state {
    text-align: center;
    padding: var(--ucp-space-12) var(--ucp-space-4);
    color: var(--ucp-text-muted);
    font-size: var(--ucp-text-base);
    border: 1.5px dashed var(--ucp-border);
    border-radius: var(--ucp-radius);
    background: var(--ucp-surface-low);
}

/* ─ Feedback toast (shared) ───────────────────────────────────────────── */
.ucp-req-feedback,
.ucp-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: var(--ucp-radius-full);
    font-size: var(--ucp-text-sm);
    font-weight: 600;
    z-index: var(--ucp-z-toast);
    box-shadow: var(--ucp-shadow-xl);
    white-space: nowrap;
    pointer-events: none;
}

.ucp-feedback-success,
.ucp-toast-success { background: var(--ucp-primary); color: #fff; }
.ucp-feedback-error,
.ucp-toast-error   { background: var(--ucp-danger);  color: #fff; }

/* ─ Form section wrapper ─────────────────────────────────────────────── */
.ucp-form-section {
    padding-bottom: var(--ucp-space-6);
    margin-bottom: var(--ucp-space-6);
    border-bottom: 1px solid var(--ucp-border);
}

.ucp-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ucp-form-section h3 {
    font-size: var(--ucp-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ucp-text-secondary);
    margin: 0 0 var(--ucp-space-4);
}

.ucp-form-grid {
    display: grid;
    gap: var(--ucp-space-4);
    grid-template-columns: 1fr;
}

.ucp-form-grid--2 { grid-template-columns: 1fr 1fr; }
.ucp-form-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 640px) {
    .ucp-form-grid--2,
    .ucp-form-grid--3 { grid-template-columns: 1fr; }
}

.ucp-field { display: flex; flex-direction: column; }
.ucp-field label,
.ucp-field .ucp-field-label { margin-bottom: 6px; }
.ucp-field--full { grid-column: 1 / -1; }

.ucp-form-actions {
    display: flex;
    align-items: center;
    gap: var(--ucp-space-3);
    padding-top: var(--ucp-space-6);
    flex-wrap: wrap;
}

.ucp-form-status {
    font-size: var(--ucp-text-sm);
    color: var(--ucp-text-muted);
}

/* ─ Section header ────────────────────────────────────────────────────── */
.ucp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ucp-space-4);
    margin-bottom: var(--ucp-space-6);
    flex-wrap: wrap;
}

.ucp-section-header h2 {
    font-size: var(--ucp-text-3xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ucp-text);
    margin: 0;
}

/* ─ Avatar placeholder ────────────────────────────────────────────────── */
.ucp-avatar-placeholder {
    background: var(--ucp-primary);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    user-select: none;
}

/* ─ Dark mode toggle button (Material Symbols) ────────────────────────── */
#ucp-theme-toggle {
    position: fixed;
    bottom: 5.5rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    border-radius: var(--ucp-radius-full);
    background: var(--ucp-card-bg);
    border: 1.5px solid var(--ucp-border);
    box-shadow: var(--ucp-shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--ucp-z-sticky);
    transition: background var(--ucp-transition), border-color var(--ucp-transition),
                box-shadow var(--ucp-transition), transform var(--ucp-transition), color var(--ucp-transition);
    color: var(--ucp-text-muted);
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#ucp-theme-toggle .ucp-theme-icon {
    font-size: 22px;
    transition: transform var(--ucp-transition);
    line-height: 1;
}

#ucp-theme-toggle:hover {
    background: var(--ucp-primary);
    border-color: var(--ucp-primary);
    color: #fff;
    box-shadow: var(--ucp-shadow-green);
    transform: scale(1.08);
}

#ucp-theme-toggle:active {
    transform: scale(0.92);
}

[data-theme="dark"] #ucp-theme-toggle {
    background: var(--ucp-surface-low);
    border-color: var(--ucp-border);
    color: var(--ucp-text-muted);
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

[data-theme="dark"] #ucp-theme-toggle:hover {
    background: var(--ucp-primary);
    border-color: var(--ucp-primary);
    color: #fff;
    box-shadow: var(--ucp-shadow-green);
}

/* ── Floating messages button + popover ─────────────────────────────── */
#ucp-messages-wrap {
    position: fixed;
    bottom: 5.5rem;
    right: 1rem;
    z-index: var(--ucp-z-sticky);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

#ucp-messages-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ucp-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ucp-shadow-green);
    transition: opacity var(--ucp-transition), transform var(--ucp-transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    flex-shrink: 0;
}

#ucp-messages-btn:hover  { opacity: .9; transform: scale(1.06); }
#ucp-messages-btn:active { transform: scale(0.94); }

#ucp-msg-popover {
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-radius: 14px;
    box-shadow: var(--ucp-shadow-lg);
    overflow: hidden;
    min-width: 200px;
    animation: ucpPopoverIn 140ms ease;
    transform-origin: bottom right;
}

#ucp-msg-popover[hidden] { display: none; }

@keyframes ucpPopoverIn {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.ucp-msg-popover-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--ucp-text);
    font-size: var(--ucp-text-sm);
    font-weight: 600;
    font-family: var(--ucp-font);
    transition: background var(--ucp-transition), color var(--ucp-transition);
}

.ucp-msg-popover-item:not(:last-child) { border-bottom: 1px solid var(--ucp-border); }

.ucp-msg-popover-item:hover {
    background: var(--ucp-surface-low);
    color: var(--ucp-primary);
    text-decoration: none;
}

.ucp-msg-popover-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--ucp-primary);
    flex-shrink: 0;
}

[data-theme="dark"] #ucp-msg-popover {
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
}

@media (max-width: 768px) {
    #ucp-messages-wrap {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 0.75rem);
    }
}

/* ─ Scrollbar styling ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ucp-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ucp-text-muted); }

/* ─ Material Symbols sizing ──────────────────────────────────────────── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    vertical-align: middle;
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
}

.material-symbols-outlined.ms-fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.ms-sm { font-size: 16px; }
.ms-lg { font-size: 24px; }
.ms-xl { font-size: 32px; }

/* ─ Route timeline (dot–line–dot) ────────────────────────────────────── */
.ucp-route-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    padding-left: 20px;
}

.ucp-route-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--ucp-border);
}

.ucp-route-point {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    min-height: 24px;
}

.ucp-route-dot {
    position: absolute;
    left: -20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ucp-text-muted);
    background: var(--ucp-card-bg);
    z-index: 1;
}

.ucp-route-dot--origin { border-color: var(--ucp-text-muted); }
.ucp-route-dot--dest   { background: var(--ucp-primary); border-color: var(--ucp-primary); }

.ucp-route-time {
    font-size: var(--ucp-text-sm);
    font-weight: 600;
    color: var(--ucp-text-secondary);
    width: 44px;
    flex-shrink: 0;
}

.ucp-route-time--dest { color: var(--ucp-primary); }

.ucp-route-addr {
    font-size: var(--ucp-text-base);
    color: var(--ucp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─ Requests badge ────────────────────────────────────────────────────── */
.ucp-requests-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--ucp-radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ucp-requests-badge--pending  { background: rgba(232,130,26,.15); color: #c26a00; }
.ucp-requests-badge--accepted { background: var(--ucp-primary-light); color: var(--ucp-primary-hover); }

/* ─ Driver wrap / page wrapper ───────────────────────────────────────── */
.ucp-driver-wrap,
.ucp-pending-wrap,
.ucp-passenger-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--ucp-space-6) var(--ucp-space-4);
    padding-bottom: calc(var(--ucp-space-6) + 80px); /* bottom nav clearance */
}

/* ─ Rating stars ──────────────────────────────────────────────────────── */
.ucp-star-picker {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.ucp-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--ucp-border);
    transition: color var(--ucp-transition), transform var(--ucp-transition);
    line-height: 1;
}

.ucp-star-btn.is-active,
.ucp-star-btn:hover { color: #F59E0B; }
.ucp-star-btn:hover  { transform: scale(1.1); }

/* ─ Responsive helpers ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ucp-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .ucp-hide-desktop { display: none !important; }
}

/* ─ Mobile spacing overrides ─────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Container: tighter horizontal padding */
    .ucp-container { padding-inline: 14px; }

    /* Cards: less internal padding */
    .ucp-card { padding: var(--ucp-space-3); }

    /* Headlines: scale down */
    .ucp-headline-lg { font-size: 1.375rem; }
    .ucp-headline-md { font-size: 1.125rem; }

    /* Section headers */
    .ucp-section-header      { margin-bottom: var(--ucp-space-4); }
    .ucp-section-header h2   { font-size: var(--ucp-text-2xl); }

    /* Form grids: single column */
    .ucp-form-grid--2,
    .ucp-form-grid--3 { grid-template-columns: 1fr; }

    /* Form sections: tighter gaps */
    .ucp-form-section  { padding-bottom: var(--ucp-space-4); margin-bottom: var(--ucp-space-4); }
    .ucp-form-actions  { gap: var(--ucp-space-2); padding-top: var(--ucp-space-4); flex-direction: column; }
    .ucp-form-actions .ucp-btn { width: 100%; justify-content: center; }

    /* Inputs: 48px touch targets + font-size 16px prevents iOS auto-zoom */
    .ucp-input,
    .ucp-select,
    .ucp-textarea { height: 48px; font-size: 16px; }
    .ucp-textarea  { height: auto; }

    /* Buttons: slightly shorter on tiny screens */
    .ucp-btn     { height: 48px; }
    .ucp-btn-sm  { height: 38px; }

    /* Badges: slightly smaller */
    .ucp-badge { font-size: 0.625rem; padding: 2px 8px; }

    /* Driver/passenger wrap: remove excess horizontal padding */
    .ucp-driver-wrap,
    .ucp-pending-wrap,
    .ucp-passenger-wrap { padding-inline: 12px; }
}

/* ── PWA Splash Screen ────────────────────────────────────────────────── */

#ucp-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0a3d1e;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s ease;
}

#ucp-splash.ucp-splash-fade { opacity: 0; pointer-events: none; }

.ucp-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: ucp-splash-in .5s ease both;
}

@keyframes ucp-splash-in {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}

.ucp-splash-logo {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ucp-splash-name {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -.02em;
    font-family: var(--ucp-font, 'Inter', sans-serif);
}

.ucp-splash-tagline {
    font-size: .875rem;
    color: rgba(255,255,255,.6);
    font-family: var(--ucp-font, 'Inter', sans-serif);
}

/* ── PWA Install Banner (mobile only) ────────────────────────────────── */

#ucp-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
    padding: 0 0 env(safe-area-inset-bottom, 0);
}

#ucp-install-banner.ucp-install-banner--visible { transform: translateY(0); }

.ucp-install-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-top: 1px solid #c8e6c9;
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}

.ucp-install-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e7f9e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ucp-install-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-family: var(--ucp-font, 'Inter', sans-serif);
    font-size: .8125rem;
    color: var(--ucp-text-secondary, #3d4a3d);
    min-width: 0;
}

.ucp-install-banner-text strong {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ucp-text, #111f10);
}

.ucp-install-banner-btn {
    background: #1baf52;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--ucp-font, 'Inter', sans-serif);
    flex-shrink: 0;
}

.ucp-install-banner-close {
    background: none;
    border: none;
    color: var(--ucp-text-muted, #6d7b6c);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    #ucp-splash { background: #071f0f; }
    .ucp-install-banner-inner { background: #1a1a1a; border-color: #2a3d2a; }
    .ucp-install-banner-text { color: #bccaba; }
    .ucp-install-banner-text strong { color: #e5e2e1; }
    .ucp-install-banner-close { color: #6b8a6a; }
}

/* ── Chips de tags na avaliação ──────────────────────────────────────────── */
.ucp-rating-tags { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.ucp-tag-chip { cursor:pointer; }
.ucp-tag-chip input { position:absolute; opacity:0; pointer-events:none; }
.ucp-tag-chip span {
    display:inline-block; padding:6px 12px; border-radius:9999px;
    border:1.5px solid var(--ucp-border,#d7dee0); font-size:.82rem; color:var(--ucp-text-secondary,#3d4a3d);
    transition:all .12s ease; user-select:none;
}
.ucp-tag-chip input:checked + span {
    background:var(--ucp-primary,#1BAF52); border-color:var(--ucp-primary,#1BAF52); color:#fff; font-weight:600;
}
.ucp-tag-chip input:focus-visible + span { outline:2px solid var(--ucp-primary,#1BAF52); outline-offset:2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM UI — segmented controls, chips, skeletons, micro-animações (v2.1)
═══════════════════════════════════════════════════════════════════════════ */

/* ─ Segmented control (grupo de botões em pílula) ─────────────────────────── */
.ucp-segment {
    display: inline-flex;
    background: var(--ucp-surface-low);
    border: 1px solid var(--ucp-border);
    border-radius: var(--ucp-radius-full);
    padding: 4px;
    gap: 2px;
    width: 100%;
}
.ucp-segment-opt {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: var(--ucp-text-secondary);
    font: 600 0.85rem/1 var(--ucp-font);
    border-radius: var(--ucp-radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ucp-transition), color var(--ucp-transition), box-shadow var(--ucp-transition);
}
.ucp-segment-opt:hover { color: var(--ucp-text); }
.ucp-segment-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ucp-segment-opt.is-active,
.ucp-segment-opt:has(input:checked) {
    background: var(--ucp-card-bg);
    color: var(--ucp-primary);
    box-shadow: var(--ucp-shadow-sm);
}
.ucp-segment-opt:focus-within { outline: 2px solid rgba(var(--ucp-primary-rgb),.45); outline-offset: 2px; }

/* ─ Chips selecionáveis (genérico) ────────────────────────────────────────── */
.ucp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--ucp-radius-full);
    border: 1.5px solid var(--ucp-border);
    background: var(--ucp-card-bg);
    color: var(--ucp-text-secondary);
    font: 600 0.82rem/1 var(--ucp-font);
    cursor: pointer;
    transition: all var(--ucp-transition);
    user-select: none;
}
.ucp-chip:hover { border-color: var(--ucp-primary); color: var(--ucp-text); }
.ucp-chip.is-active,
.ucp-chip[aria-pressed="true"] {
    background: var(--ucp-primary);
    border-color: var(--ucp-primary);
    color: #fff;
}
.ucp-chip:focus-visible { outline: 2px solid rgba(var(--ucp-primary-rgb),.45); outline-offset: 2px; }

/* ─ Skeleton (shimmer) ────────────────────────────────────────────────────── */
.ucp-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--ucp-surface-mid);
    border-radius: var(--ucp-radius-sm);
}
.ucp-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    animation: ucp-shimmer 1.3s infinite;
}
[data-theme="dark"] .ucp-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
.ucp-skeleton--text { height: 12px; margin: 6px 0; }
.ucp-skeleton--title { height: 18px; width: 60%; margin: 8px 0; }
.ucp-skeleton--card { height: 120px; border-radius: var(--ucp-radius); }
.ucp-skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; }
@keyframes ucp-shimmer { to { transform: translateX(100%); } }

/* ─ Micro-animações: entrada e stagger ────────────────────────────────────── */
@keyframes ucp-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ucp-animate-in { animation: ucp-fade-up 320ms cubic-bezier(.22,.61,.36,1) both; }
.ucp-stagger > * { animation: ucp-fade-up 320ms cubic-bezier(.22,.61,.36,1) both; }
.ucp-stagger > *:nth-child(1) { animation-delay: 30ms; }
.ucp-stagger > *:nth-child(2) { animation-delay: 70ms; }
.ucp-stagger > *:nth-child(3) { animation-delay: 110ms; }
.ucp-stagger > *:nth-child(4) { animation-delay: 150ms; }
.ucp-stagger > *:nth-child(5) { animation-delay: 190ms; }
.ucp-stagger > *:nth-child(6) { animation-delay: 230ms; }
.ucp-stagger > *:nth-child(n+7) { animation-delay: 270ms; }

/* Press scale para cards/elementos tocáveis */
.ucp-pressable { transition: transform var(--ucp-transition), box-shadow var(--ucp-transition); }
.ucp-pressable:active { transform: scale(.98); }

/* ─ Acessibilidade: respeitar redução de movimento ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─ Toasts globais (window.ucpToast) ──────────────────────────────────────── */
.ucp-toast-stack {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: var(--ucp-z-toast);
    width: min(92vw, 420px);
    pointer-events: none;
}
.ucp-toast-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ucp-radius);
    background: var(--ucp-card-bg);
    color: var(--ucp-text);
    border: 1px solid var(--ucp-border);
    border-left: 4px solid var(--ucp-primary);
    box-shadow: var(--ucp-shadow-xl);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity 220ms ease-out, transform 220ms cubic-bezier(.22,.61,.36,1);
}
.ucp-toast-item.is-in  { opacity: 1; transform: translateY(0) scale(1); }
.ucp-toast-item.is-out { opacity: 0; transform: translateY(8px) scale(.98); transition-duration: 150ms; }
.ucp-toast-ic { font-size: 22px; flex: 0 0 auto; color: var(--ucp-primary); }
.ucp-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ucp-toast-title { font: 700 0.85rem/1.2 var(--ucp-font-display); }
.ucp-toast-msg { font-size: 0.85rem; line-height: 1.35; color: var(--ucp-text-secondary); }
.ucp-toast-x { background: none; border: none; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--ucp-text-muted); padding: 0 2px; flex: 0 0 auto; }
.ucp-toast-x:hover { color: var(--ucp-text); }
.ucp-toast-success { border-left-color: var(--ucp-success); }
.ucp-toast-success .ucp-toast-ic { color: var(--ucp-success); }
.ucp-toast-error   { border-left-color: var(--ucp-danger); }
.ucp-toast-error .ucp-toast-ic { color: var(--ucp-danger); }
.ucp-toast-warning { border-left-color: var(--ucp-warning); }
.ucp-toast-warning .ucp-toast-ic { color: var(--ucp-warning); }
.ucp-toast-info    { border-left-color: var(--ucp-info); }
.ucp-toast-info .ucp-toast-ic { color: var(--ucp-info); }
@media (min-width: 769px) {
    .ucp-toast-stack { left: auto; right: 24px; bottom: 24px; transform: none; }
}

/* ─ Ride bar: modal flutuante "em carona" (estilo Uber) ───────────────────── */
.ucp-ride-bar {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    transform: translate(-50%, 130%);
    width: min(94vw, 460px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ucp-radius-lg);
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    box-shadow: var(--ucp-shadow-2xl);
    z-index: 550; /* acima da nav (600 é a top-nav; fica abaixo dela, acima da bottom-nav) */
    opacity: 0;
    transition: transform 320ms cubic-bezier(.22,.61,.36,1), opacity 240ms ease-out;
}
.ucp-ride-bar.is-in { transform: translate(-50%, 0); opacity: 1; }
.ucp-ride-bar::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    border-radius: var(--ucp-radius-lg) 0 0 var(--ucp-radius-lg);
    background: var(--ucp-grad-primary);
}
.ucp-ride-dot {
    width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
    background: var(--ucp-primary);
    box-shadow: 0 0 0 0 rgba(var(--ucp-primary-rgb), .6);
    animation: ucp-ride-pulse 1.6s infinite;
}
@keyframes ucp-ride-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--ucp-primary-rgb), .55); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--ucp-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--ucp-primary-rgb), 0); }
}
.ucp-ride-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ucp-ride-status {
    font: 700 0.62rem/1 var(--ucp-font); text-transform: uppercase; letter-spacing: .08em;
    color: var(--ucp-primary);
}
.ucp-ride-route {
    font: 700 0.9rem/1.25 var(--ucp-font-display);
    color: var(--ucp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ucp-ride-sub { font-size: 0.74rem; color: var(--ucp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ucp-ride-cta {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    background: var(--ucp-grad-primary); color: #fff;
    border-radius: var(--ucp-radius-full); padding: 10px 14px;
    font: 700 0.78rem/1 var(--ucp-font); text-decoration: none;
    box-shadow: var(--ucp-shadow-green);
    transition: transform var(--ucp-transition), filter var(--ucp-transition);
}
.ucp-ride-cta:hover { transform: translateY(-1px); filter: brightness(1.04); color: #fff; }
.ucp-ride-cta .material-symbols-outlined { font-size: 18px; }
.ucp-ride-x { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--ucp-text-muted); flex: 0 0 auto; padding: 0 2px; }
.ucp-ride-x:hover { color: var(--ucp-text); }
@media (max-width: 480px) {
    .ucp-ride-cta-txt { display: none; } /* no celular, só o ícone */
    .ucp-ride-cta { padding: 11px; }
}
@media (min-width: 769px) {
    .ucp-ride-bar { left: 24px; transform: translate(0, 130%); right: auto; }
    .ucp-ride-bar.is-in { transform: translate(0, 0); }
}

/* ─ Date picker custom (popover) ──────────────────────────────────────────── */
.ucp-dp-input { cursor: pointer; }
.ucp-dp-pop {
    position: absolute;
    z-index: var(--ucp-z-dropdown);
    width: 300px;
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-radius: var(--ucp-radius);
    box-shadow: var(--ucp-shadow-xl);
    padding: 12px;
    animation: ucp-fade-up 160ms ease-out both;
}
.ucp-dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ucp-dp-title { font: 700 0.95rem/1 var(--ucp-font-display); color: var(--ucp-text); }
.ucp-dp-nav {
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--ucp-surface-low); color: var(--ucp-text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
}
.ucp-dp-nav:hover { background: var(--ucp-surface-mid); color: var(--ucp-primary); }
.ucp-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ucp-dp-dowc { text-align: center; font: 700 0.68rem/1 var(--ucp-font); color: var(--ucp-text-muted); padding: 4px 0; }
.ucp-dp-day {
    aspect-ratio: 1; border: none; background: transparent; cursor: pointer;
    border-radius: var(--ucp-radius-sm); font: 600 0.85rem/1 var(--ucp-font);
    color: var(--ucp-text); transition: background var(--ucp-transition), color var(--ucp-transition);
}
.ucp-dp-day:hover:not(.is-disabled) { background: var(--ucp-surface-low); }
.ucp-dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--ucp-primary); color: var(--ucp-primary); }
.ucp-dp-day.is-selected { background: var(--ucp-grad-primary); color: #fff; }
.ucp-dp-day.is-focus:not(.is-selected) { outline: 2px solid rgba(var(--ucp-primary-rgb),.5); outline-offset: -2px; }
.ucp-dp-day.is-disabled { opacity: .3; cursor: not-allowed; }
.ucp-dp-chips { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ucp-border); }
.ucp-dp-chip { flex: 1; justify-content: center; min-height: 34px; font-size: .78rem; }

/* ─ Nudge de boas-vindas (bottom-sheet sutil) ─────────────────────────────── */
.ucp-nudge {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
    transform: translate(-50%, 130%);
    width: min(92vw, 360px);
    background: var(--ucp-card-bg);
    border: 1px solid var(--ucp-border);
    border-radius: var(--ucp-radius-lg);
    box-shadow: var(--ucp-shadow-2xl);
    padding: 20px 18px 18px;
    text-align: center;
    z-index: 540;
    opacity: 0;
    transition: transform 340ms cubic-bezier(.22,.61,.36,1), opacity 260ms ease-out;
}
.ucp-nudge.is-in { transform: translate(-50%, 0); opacity: 1; }
.ucp-nudge-x { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--ucp-text-muted); cursor: pointer; }
.ucp-nudge-ic { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; background: var(--ucp-grad-hero); display: flex; align-items: center; justify-content: center; }
.ucp-nudge-ic .material-symbols-outlined { font-size: 28px; color: var(--ucp-primary); }
.ucp-nudge-title { display: block; font: 800 1.05rem/1.2 var(--ucp-font-display); margin-bottom: 6px; }
.ucp-nudge-text { font-size: 0.85rem; color: var(--ucp-text-secondary); line-height: 1.45; margin: 0 0 14px; }
.ucp-nudge-cta { width: 100%; }
@media (min-width: 769px) { .ucp-nudge { left: 24px; transform: translate(0, 130%); } .ucp-nudge.is-in { transform: translate(0,0); } }