/**
 * ZapMix — Design system compartilhado das páginas de cliente
 * (loja, cadastro/login, dashboard, obrigado).
 *
 * Tokens de cor/tipografia + componentes base (botões, cards, badges,
 * campos de formulário) reaproveitados pelos CSS específicos de cada
 * página. Carregar este arquivo ANTES dos CSS de página.
 */

:root {
    --zm-ink: #0b1220;
    --zm-ink-soft: #16213a;
    --zm-lime: #90d105;
    --zm-lime-dark: #6a9e00;
    --zm-lime-tint: #eef9d6;
    --zm-paper: #f5f6f9;
    --zm-surface: #ffffff;
    --zm-border: #e4e7ee;
    --zm-muted: #6b7280;
    --zm-text: #16213a;
    --zm-danger: #e0453c;
    --zm-danger-tint: #fde9e7;
    --zm-success: #0fa96b;
    --zm-success-tint: #dff7ec;
    --zm-warning: #d98a11;
    --zm-warning-tint: #fbedd3;
    --zm-radius: 16px;
    --zm-radius-sm: 10px;
    --zm-shadow-md: 0 10px 30px rgba(11, 18, 32, 0.08);
    --zm-shadow-lg: 0 24px 60px rgba(11, 18, 32, 0.14);
}

.zm-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--zm-text);
    line-height: 1.5;
}

.zm-page h1, .zm-page h2, .zm-page h3 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--zm-ink);
    letter-spacing: -0.01em;
}

/* Botões */
.zm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--zm-radius-sm);
    font-weight: 700;
    font-size: 14.5px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

.zm-btn:hover { transform: translateY(-2px); }
.zm-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.zm-btn-primary { background: var(--zm-lime); color: var(--zm-ink); }
.zm-btn-primary:hover { background: var(--zm-lime-dark); color: #fff; box-shadow: 0 10px 24px rgba(144,209,5,0.3); }

.zm-btn-dark { background: var(--zm-ink); color: #fff; }
.zm-btn-dark:hover { background: var(--zm-ink-soft); }

.zm-btn-outline { background: transparent; color: var(--zm-ink); border: 1.5px solid var(--zm-border); }
.zm-btn-outline:hover { border-color: var(--zm-ink); }

.zm-btn-block { width: 100%; }

/* Cards */
.zm-card {
    background: var(--zm-surface);
    border: 1px solid var(--zm-border);
    border-radius: var(--zm-radius);
    box-shadow: var(--zm-shadow-md);
}

/* Badges */
.zm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.zm-badge-lime { background: var(--zm-lime-tint); color: var(--zm-lime-dark); }
.zm-badge-dark { background: var(--zm-ink); color: var(--zm-lime); }

/* Formulários */
.zm-field { margin-bottom: 16px; text-align: left; }

.zm-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--zm-text);
    margin-bottom: 6px;
}

.zm-field label i { color: var(--zm-lime-dark); width: 14px; }

.zm-field input[type="text"],
.zm-field input[type="email"],
.zm-field input[type="tel"],
.zm-field input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--zm-border);
    border-radius: var(--zm-radius-sm);
    font-size: 14.5px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: var(--zm-paper);
}

.zm-field input:focus {
    outline: none;
    border-color: var(--zm-lime);
    background: var(--zm-surface);
    box-shadow: 0 0 0 3px rgba(144,209,5,0.18);
}

.zm-field-hint { font-size: 12px; margin-top: 5px; }
.zm-field-hint.zm-ok { color: var(--zm-success); }
.zm-field-hint.zm-bad { color: var(--zm-danger); }

.zm-checkbox-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
    color: var(--zm-muted);
    width: 100%;
    box-sizing: border-box;
}

.zm-checkbox-line input { width: 16px; height: 16px; margin-top: 2px; cursor: pointer; flex: none; }
.zm-checkbox-line span { flex: 1; min-width: 0; overflow-wrap: break-word; }
.zm-checkbox-line a { color: var(--zm-lime-dark); text-decoration: none; font-weight: 600; }

/* Mensagens inline de formulário */
.zm-form-message {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--zm-radius-sm);
    font-size: 13.5px;
    display: none;
}

.zm-form-message.zm-show { display: block; }
.zm-form-message.zm-ok { background: var(--zm-success-tint); color: #0c7a4f; }
.zm-form-message.zm-bad { background: var(--zm-danger-tint); color: #a5342d; }

/* Estado "acesso restrito / já logado" reutilizado em várias páginas */
.zm-notice-card {
    text-align: center;
    padding: 56px 28px;
    max-width: 480px;
    margin: 40px auto;
}

.zm-notice-card i.zm-notice-icon {
    font-size: 44px;
    display: block;
    margin-bottom: 16px;
}

.zm-notice-card h2 {
    font-size: 22px;
    margin: 0 0 8px;
}

.zm-notice-card p {
    color: var(--zm-muted);
    margin: 0 0 24px;
    font-size: 14.5px;
}