/**
 * Customização de cores - Substituição do amarelo (warning) pela cor da identidade Agenndei
 * Cor principal: #C76F47
 */

:root {
  --bs-warning: #C76F47;
  --bs-warning-rgb: 199, 111, 71;
  --bs-warning-text-emphasis: #8B4E2A;
  --bs-warning-bg-subtle: #F5E6DF;
  --bs-warning-border-subtle: #E8C9B8;
}

/* Seção Benefícios - fundo customizado */
#beneficios {
  background-color: #F2EBD9 !important;
}

#beneficios h2.display-5 {
  color: #C76F47 !important;
}

/* Seção Vantagens - mesmo estilo da seção Benefícios */
#vantagens {
  background-color: #F2EBD9 !important;
}

#vantagens h2.display-5 {
  color: #C76F47 !important;
}

/* Seção Como Funciona - fundo transparente, textos brancos */
#como-funciona {
  background-color: transparent !important;
  color: #fff;
}

/* overflow: clip no .section (main.css) pode “cortar” círculos no Safari iOS */
#como-funciona.section {
  overflow: visible !important;
}

#como-funciona .how-step,
#como-funciona .how-step-header {
  overflow: visible !important;
}

#como-funciona h2,
#como-funciona h5,
#como-funciona p,
#como-funciona .text-muted {
  color: #fff !important;
}

/* Círculos numerados (passos) na seção Como Funciona */
#como-funciona .bg-primary {
  background-color: #C76F47 !important;
}

/* Seção CTA - fundo customizado (desktop + mobile; reforça sobre .section e shorthands) */
section#cta.section {
  background-color: #4F616D !important;
  background-image: none !important;
}

.btn-cta-destaque {
  background-color: #C76F47 !important;
  border-color: #C76F47 !important;
  color: #ffffff !important;
}

.btn-cta-destaque:hover,
.btn-cta-destaque:focus {
  background-color: #B8623F !important;
  border-color: #B8623F !important;
  color: #ffffff !important;
}

#como-funciona .text-muted {
  text-align: left !important;
}

#como-funciona .how-step-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
}

#como-funciona .how-step-number {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: #C76F47 !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  flex: 0 0 44px;
  flex-shrink: 0;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Safari/iOS: gap em flex às vezes falha em versões antigas — margem de reserva */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    #como-funciona .how-step-header {
      gap: 0;
    }

    #como-funciona .how-step-number {
      margin-right: 0.75rem;
    }
  }
}

/* Botões Warning */
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #C76F47;
  --bs-btn-border-color: #C76F47;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #B85E37;
  --bs-btn-hover-border-color: #A8542F;
  --bs-btn-focus-shadow-rgb: 199, 111, 71;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #A8542F;
  --bs-btn-active-border-color: #9A4A28;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #C76F47;
  --bs-btn-disabled-border-color: #C76F47;
}

.btn-outline-warning {
  --bs-btn-color: #C76F47;
  --bs-btn-border-color: #C76F47;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #C76F47;
  --bs-btn-hover-border-color: #C76F47;
  --bs-btn-focus-shadow-rgb: 199, 111, 71;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #C76F47;
  --bs-btn-active-border-color: #C76F47;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #C76F47;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #C76F47;
  --bs-gradient: none;
}

/* Texto Warning */
.text-warning {
  color: #C76F47 !important;
}

.text-warning-emphasis {
  color: #8B4E2A !important;
}

/* Background Warning */
.bg-warning {
  background-color: #C76F47 !important;
}

.bg-warning-subtle {
  background-color: #F5E6DF !important;
}

/* Border Warning */
.border-warning {
  border-color: #C76F47 !important;
}

.border-warning-subtle {
  border-color: #E8C9B8 !important;
}

/* Alert Warning */
.alert-warning {
  --bs-alert-color: #8B4E2A;
  --bs-alert-bg: #F5E6DF;
  --bs-alert-border-color: #E8C9B8;
  --bs-alert-link-color: #8B4E2A;
}

/* Progress Bar Warning */
.progress-bar.bg-warning {
  background-color: #C76F47 !important;
}

/* Link Warning */
.link-warning {
  color: #C76F47 !important;
}

.link-warning:hover,
.link-warning:focus {
  color: #B85E37 !important;
}

/* List Group Warning */
.list-group-item-warning {
  --bs-list-group-color: #8B4E2A;
  --bs-list-group-bg: #F5E6DF;
  --bs-list-group-border-color: #E8C9B8;
}

/* Navbar: manter hover em branco */
.header .navmenu li:hover > a,
.header .navmenu a:hover,
.header .navmenu a:hover i,
.header .navmenu a:focus,
.header .navmenu a:focus i {
  color: #ffffff !important;
}

.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
  --bs-list-group-action-hover-bg: #E8C9B8;
}

.list-group-item-warning.list-group-item-action.active {
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #C76F47;
  --bs-list-group-active-border-color: #C76F47;
}

/* Table Warning */
.table-warning {
  --bs-table-color: #000;
  --bs-table-bg: #F5E6DF;
  --bs-table-border-color: #E8C9B8;
  --bs-table-striped-bg: #F0DDD1;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #E8C9B8;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #E8C9B8;
  --bs-table-hover-color: #000;
}

/* Focus Ring Warning */
.focus-ring-warning {
  --bs-focus-ring-color: rgba(199, 111, 71, 0.25);
}

/* Text Background Warning */
.text-bg-warning {
  color: #fff !important;
  background-color: RGBA(199, 111, 71, var(--bs-bg-opacity, 1)) !important;
}

/* Link Underline Warning */
.link-underline-warning {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(199, 111, 71, var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(199, 111, 71, var(--bs-link-underline-opacity)) !important;
}

/* Badge Warning (se houver) */
.badge.bg-warning {
  background-color: #C76F47 !important;
}