/* ============================================================
   CredCerto Empréstimos — Design System (páginas de fluxo)
   Override unificado para alinhar todas as etapas com a home.
   Carregado APÓS o <style> interno de cada página, vencendo
   por ordem de cascata (e !important nas regras críticas).
   ============================================================ */

/* ---------- TOKENS DE COR ---------- */
:root {
  --green-primary: #1F7A52 !important;   /* verde médio institucional */
  --green-dark: #0f5132 !important;       /* verde escuro principal */
  --green-darker: #063D2E !important;     /* verde profundo */
  --green-light: #E8F5EF !important;      /* verde off-white */
  --green-soft: #C8F5DA !important;       /* verde claro acentuação */
  --green-accent: #12B76A !important;     /* verde acento (poucos usos) */
  --whatsapp-light: #E8F5EF !important;   /* balão usuário no chat */

  --bg: #F4F8F5 !important;               /* off-white verde corpo */
  --card: #ffffff !important;
  --text: #0f1f17 !important;
  --text-light: #6c7a73 !important;
  --muted: #6c7a73 !important;
  --success: #16a34a !important;
  --danger: #ef4444 !important;
  --warning: #f59e0b !important;

  --radius: 20px !important;
}

/* ---------- TIPOGRAFIA ---------- */
/* Força Inter em texto, mas preserva Font Awesome e ícones por classe. */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6,
p, span, label, a, li, ul, ol, div, small, strong, em {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Restaura fontes de ícones (Font Awesome usa elementos <i> com classe fa-*) */
i.fa, i.fas, i.far, i.fab, i.fal,
[class^="fa-"], [class*=" fa-"] {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands',
               'Font Awesome 5 Free', 'Font Awesome 5 Brands', FontAwesome !important;
}

html { background: #F4F8F5; }

body {
  background: #F4F8F5 !important;
  color: #0f1f17 !important;
  -webkit-font-smoothing: antialiased;
}

/* ---------- HEADER ---------- */
header.header {
  background: linear-gradient(180deg, #0f5132 0%, #063D2E 100%) !important;
  box-shadow: 0 2px 12px rgba(6,61,46,0.20) !important;
  backdrop-filter: none !important;
}

.user-icon-wrapper {
  background: rgba(255,255,255,0.12) !important;
  border: 2px solid rgba(255,255,255,0.22) !important;
}

.menu-icon,
.header-icon {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

.notification-badge { border-color: #0f5132 !important; }

.user-avatar {
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.12) 100%) !important;
  border: 2px solid rgba(255,255,255,0.22) !important;
}

/* ---------- CARDS PRINCIPAIS ---------- */
.card,
.main-content,
.chat-container,
.pix-receipt,
.approval-content,
.loading-content,
.loading-container {
  border-radius: 24px !important;
  box-shadow:
    0 30px 60px rgba(15,52,36,0.10),
    0 8px 20px rgba(15,52,36,0.05),
    0 1px 2px rgba(15,52,36,0.04) !important;
  border: 1px solid rgba(15,52,36,0.05) !important;
}

/* .container só recebe estilos de card quando está dentro de .main-container ou
   for usado como cartão principal. Excluímos header-content/footer-inner. */
.main-container > .container {
  border-radius: 24px !important;
  box-shadow:
    0 30px 60px rgba(15,52,36,0.10),
    0 8px 20px rgba(15,52,36,0.05),
    0 1px 2px rgba(15,52,36,0.04) !important;
  border: 1px solid rgba(15,52,36,0.05) !important;
  background: #ffffff !important;
}

/* ---------- PROGRESS BAR ---------- */
.progress-fill {
  background: linear-gradient(90deg, #1F7A52, #0f5132) !important;
}

/* ---------- TÍTULOS ---------- */
h1, h2, h3 { color: #0f1f17 !important; letter-spacing: -0.012em; }
.section-title, .page-title, .copy-title, .insurance-title { color: #0f1f17 !important; }
.subtitle, .page-subtitle, .section-subtitle, .copy-text, p.lead { color: #6c7a73 !important; }
.user-greeting, .highlight, .info-highlight, .copy-highlight { color: #0f5132 !important; }

/* ---------- BOTÕES PRIMÁRIOS ---------- */
.btn-primary,
.btn-submit,
.btn-custom,
.btn-continue,
.btn.primary {
  background: linear-gradient(180deg, #1F7A52 0%, #0f5132 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow:
    0 8px 22px rgba(15,52,36,0.22),
    0 1px 3px rgba(15,52,36,0.10) !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}

.btn-primary:hover,
.btn-submit:hover,
.btn-custom:hover,
.btn-continue:hover,
.btn.primary:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 28px rgba(15,52,36,0.30),
    0 2px 6px rgba(15,52,36,0.15) !important;
}

/* shimmer / shine sobre botões — mantemos transparente sutil */
.btn-primary::before,
.btn-primary::after,
.btn-submit::after,
.btn-custom::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent) !important;
}

/* ---------- BOTÕES SECUNDÁRIOS ---------- */
.btn-secondary,
.btn.secondary,
.btn.ghost {
  background: #F4F8F5 !important;
  color: #0f5132 !important;
  border: 1px solid rgba(15,52,36,0.12) !important;
  border-radius: 12px !important;
}
.btn.ghost { background: transparent !important; }
.btn-secondary:hover,
.btn.ghost:hover { background: #E8F5EF !important; }

/* ---------- BOTÕES DE OPÇÃO ---------- */
.btn-option,
.option-button {
  background: #F4F8F5 !important;
  border: 1px solid rgba(15,52,36,0.08) !important;
  color: #0f1f17 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.btn-option:hover,
.option-button:hover {
  background: #E8F5EF !important;
  border-color: #1F7A52 !important;
  color: #0f5132 !important;
  transform: translateY(-1px) !important;
}

/* ---------- INPUTS ---------- */
input:not([type="hidden"]):not([type="range"]):not([type="file"]),
textarea,
select,
.form-input,
.form-select,
.chat-input {
  border-radius: 12px !important;
  border: 2px solid rgba(15,52,36,0.10) !important;
  background: #fff !important;
  color: #0f1f17 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-select:focus,
.chat-input:focus {
  border-color: #1F7A52 !important;
  box-shadow: 0 0 0 4px rgba(31,122,82,0.12) !important;
  outline: none !important;
}

.form-input.success,
.form-select.success,
.form-group.completed .form-select {
  border-color: #1F7A52 !important;
  background-color: #F4F8F5 !important;
}

.form-input.error,
.form-select.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10) !important;
}

/* ---------- DATE DISPLAY ---------- */
.date-display {
  background: #E8F5EF !important;
  border: 2px solid #1F7A52 !important;
  color: #0f5132 !important;
  border-radius: 12px !important;
}

/* ---------- SUCCESS ICONS ---------- */
.success-icon {
  background: linear-gradient(180deg, #1F7A52, #0f5132) !important;
  box-shadow: 0 12px 28px rgba(15,52,36,0.30) !important;
}

/* ---------- TIME / STATUS BADGES ---------- */
.time-badge,
.status-badge {
  background: #E8F5EF !important;
  color: #0f5132 !important;
  border-radius: 9999px !important;
}

/* ---------- INFO CARDS ---------- */
.info-card {
  background: linear-gradient(180deg, #E8F5EF, #d8efe1) !important;
  border: 1px solid rgba(31,122,82,0.22) !important;
  border-radius: 14px !important;
}
.info-card.warning {
  background: linear-gradient(180deg, #fffbeb, #fef3c7) !important;
  border-color: rgba(245,158,11,0.30) !important;
}
.info-icon,
.info-icon-box {
  background: linear-gradient(180deg, #1F7A52, #0f5132) !important;
  border-radius: 10px !important;
}
.info-text { color: #0f5132 !important; }
.info-title { color: #0f5132 !important; }
.info-list li { color: #0f5132 !important; }
.info-list li .check-icon,
.feature-check { background: #1F7A52 !important; }

/* ---------- ATTENDANT (5.html) ---------- */
.attendant-photo {
  border: 4px solid #1F7A52 !important;
  box-shadow: 0 6px 18px rgba(15,52,36,0.22) !important;
}
.top-badge { border-color: #fff !important; }
.attendant-name { color: #0f1f17 !important; }
.attendant-title { color: #6c7a73 !important; }

/* ---------- CHAT (6.html) ---------- */
.chat-header {
  background: linear-gradient(180deg, #1F7A52 0%, #0f5132 100%) !important;
  box-shadow: 0 2px 10px rgba(15,52,36,0.22) !important;
}
.message.attendant .message-name { color: #0f5132 !important; }
.message.user .message-bubble { background: #E8F5EF !important; }
.message.user .message-bubble { color: #0f1f17 !important; }
.user-avatar.user-avatar,
.message .user-avatar { background: #1F7A52 !important; }
.send-btn { background: #0f5132 !important; }
.send-btn:active { background: #063D2E !important; }
.option-button {
  border: 2px solid #1F7A52 !important;
  color: #0f5132 !important;
  background: #fff !important;
}
.option-button:hover {
  background: #E8F5EF !important;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(15,52,36,0.20) !important;
}
.chat-messages {
  background-color: #F4F8F5 !important;
}

/* ---------- AUTOCOMPLETE ---------- */
.autocomplete-list {
  border-radius: 14px !important;
  border: 1px solid rgba(15,52,36,0.06) !important;
  box-shadow: 0 -8px 24px rgba(15,52,36,0.10) !important;
}
.autocomplete-item:active { background: #E8F5EF !important; }

/* ---------- INSTALLMENT CARDS (chat) ---------- */
.installment-card { border-radius: 12px !important; }
.installment-card:active {
  border-color: #1F7A52 !important;
  background: #E8F5EF !important;
}
.installment-months { color: #0f5132 !important; }

/* ---------- APPROVAL MODAL ---------- */
.approval-icon {
  background: linear-gradient(180deg, #1F7A52, #0f5132) !important;
  box-shadow: 0 10px 28px rgba(15,52,36,0.30) !important;
}
.approval-title { color: #0f5132 !important; }
.approval-details {
  background: #E8F5EF !important;
  border-radius: 14px !important;
}
.approval-detail { border-color: rgba(31,122,82,0.18) !important; }
.detail-value { color: #0f5132 !important; }

/* ---------- RECEIPT (PIX) ---------- */
.receipt-amount {
  background: #E8F5EF !important;
  border-radius: 12px !important;
}
.receipt-amount-value,
.receipt-title { color: #0f5132 !important; }
.receipt-status {
  background: #E8F5EF !important;
  color: #0f5132 !important;
}

/* ---------- APPROVED CARDS / PRICING (8.html, 10.html) ---------- */
.approved-card {
  background: linear-gradient(180deg, #E8F5EF, #d1f0e0) !important;
  border: 2px solid #1F7A52 !important;
  border-radius: 14px !important;
}
.approved-amount,
.approved-installments { color: #0f5132 !important; }

.pricing-card {
  background: #fff !important;
  border: 2px solid #1F7A52 !important;
  border-radius: 14px !important;
}
.pricing-row { border-bottom-color: rgba(15,52,36,0.08) !important; }
.pricing-row:last-child { border-top-color: #1F7A52 !important; }

/* ---------- INSURANCE (10.html) ---------- */
.insurance-section {
  background: #F4F8F5 !important;
  border: 1px solid rgba(15,52,36,0.08) !important;
  border-radius: 14px !important;
}
.insurance-icon-box {
  background: linear-gradient(180deg, #1F7A52, #0f5132) !important;
  border-radius: 10px !important;
}
.insurance-title { color: #0f1f17 !important; }
.insurance-subtitle { color: #6c7a73 !important; }

/* ---------- CONSENT ITEMS (7.html) ---------- */
.consent-item {
  background: #E8F5EF !important;
  border: 1px solid rgba(31,122,82,0.18) !important;
  border-radius: 14px !important;
}
.consent-item svg { color: #0f5132 !important; }

/* ---------- CAMERA / FACIAL (7.html) ---------- */
.guide .ring {
  border: 3px solid #1F7A52 !important;
  box-shadow: 0 8px 22px rgba(15,52,36,0.25) !important;
}
.capture-success {
  background: #E8F5EF !important;
  border: 2px solid #0f5132 !important;
  color: #0f5132 !important;
  border-radius: 12px !important;
}
.scroll-indicator { background: #0f5132 !important; }

/* ---------- LOADING / SPINNER ---------- */
.spinner,
.loading-spinner {
  border-color: #E8F5EF !important;
  border-top-color: #1F7A52 !important;
}
.loading-text { color: #0f5132 !important; }

/* ---------- SUCCESS FEEDBACK ---------- */
.success-feedback {
  background: linear-gradient(180deg, #E8F5EF, #d1f0e0) !important;
  border: 2px solid #1F7A52 !important;
  color: #0f5132 !important;
  border-radius: 12px !important;
}

/* ---------- BENEFITS BOX (5.html) ---------- */
.benefits-box {
  background: #F4F8F5 !important;
  border: 1px solid rgba(15,52,36,0.06) !important;
  border-radius: 12px !important;
}
.benefits-box li::before { color: #1F7A52 !important; }

/* ---------- FOOTER ---------- */
footer.site-footer {
  background: linear-gradient(180deg, #0f5132 0%, #063D2E 100%) !important;
  color: #fff !important;
  box-shadow: 0 -2px 12px rgba(6,61,46,0.18) !important;
}

/* ---------- SCROLLBARS GLOBAIS ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,52,36,0.18); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,52,36,0.32); }

/* ---------- SLIDERS (caso alguma página tenha) ---------- */
input[type="range"]::-webkit-slider-thumb {
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(15,52,36,0.4), 0 0 0 4px #0f5132 !important;
}