:root {
  --brand-primary: #0D6EFD;
  --brand-secondary: #212529;
}

body.checkout-page {
  --wizard-primary: var(--brand-secondary);
  --wizard-secondary: var(--brand-primary);
}

body.checkout-page .wl-checkout-progress-start { width: 10%; }
body.checkout-page .wl-checkout-progress-payment { width: 50%; }
body.checkout-page .wl-checkout-progress-payment.wl-checkout-progress-review { width: 100%; }
body.checkout-page .wizard-step-item.active .step-icon {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
}
body.checkout-page .payment-method-card:hover,
body.checkout-page .payment-method-card.selected {
  border-color: var(--brand-primary);
  background-color: color-mix(in srgb, var(--brand-primary) 6%, #fff);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
body.checkout-page .payment-method-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
  outline-offset: 2px;
}
body.checkout-page .btn-prev {
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}
body.checkout-page .btn-next,
body.checkout-page .btn-wizard[type="submit"] {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.wl-brand-bg { background-color: var(--brand-primary); }
.wl-brand-text { color: var(--brand-primary); }
.wl-brand-secondary-text { color: var(--brand-secondary) !important; }
.wl-brand-button { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.wl-brand-button:hover, .wl-brand-button:focus { background: var(--brand-secondary); border-color: var(--brand-secondary); color: #fff; }
.wl-brand-primary-button { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }
.wl-brand-primary-button:hover, .wl-brand-primary-button:focus { background-color: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; color: #fff !important; }
.wl-brand-primary-badge { background-color: var(--brand-primary) !important; color: #fff !important; }

/* Mantém a geometria da loja oficial, substituindo apenas o verde fixo
   dos títulos pela identidade visual do tenant. */
.title-underline {
  background: var(--brand-primary) !important;
}
.section-header .title-underline {
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)) !important;
}

/* O tipo do produto conserva o badge sutil da loja oficial, mas sua
   identidade visual acompanha a cor primária do tenant. */
.badge.text-bg-success-subtle {
  color: var(--brand-primary) !important;
  background-color: color-mix(in srgb, var(--brand-primary) 12%, #fff) !important;
}
.badge.border-success-subtle {
  border-color: color-mix(in srgb, var(--brand-primary) 32%, #fff) !important;
}
.badge.text-success-emphasis {
  color: var(--brand-primary) !important;
}

.bg-primary,
.bg-success,
.badge.bg-primary,
.badge.bg-success { background-color: var(--brand-primary) !important; }
.wl-logo { max-height: 54px; max-width: 190px; object-fit: contain; }

.wl-error-page {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-primary) 7%, #fff),
    color-mix(in srgb, var(--brand-secondary) 7%, #fff)
  );
}
.wl-error-card {
  border-top: 4px solid var(--brand-primary) !important;
  box-shadow: 0 1rem 3rem color-mix(in srgb, var(--brand-primary) 14%, transparent) !important;
}

/* A loja oficial usa as variantes primary e success como identidade visual.
   No espelho Whitelabel elas continuam com o mesmo papel, mas recebem a
   paleta do tenant resolvido pelo host. */
body .text-primary,
body .text-success { color: var(--brand-primary) !important; }
body .btn-primary,
body .btn-success {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-success:hover,
body .btn-success:focus {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
}
body .btn-secondary {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
}
body .btn-secondary:hover,
body .btn-secondary:focus,
body .btn-secondary:active {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
  filter: brightness(0.9);
}
body .btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}
body .btn-outline-primary:hover,
body .btn-outline-primary:focus,
body .btn-outline-primary:active {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-primary) 20%, transparent) !important;
}
body .btn-outline-secondary {
  background-color: transparent !important;
  border-color: var(--brand-secondary) !important;
  color: var(--brand-secondary) !important;
}
body .btn-outline-secondary:hover,
body .btn-outline-secondary:focus,
body .btn-outline-secondary:active {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #fff !important;
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-secondary) 20%, transparent) !important;
}
body .bg-primary-subtle {
  background-color: color-mix(in srgb, var(--brand-primary) 12%, #fff) !important;
}

/* A estrutura da página de produto é a mesma da loja oficial; estas regras
   aplicam a paleta do tenant aos seletores visuais herdados dela. */
#calendar .text-primary,
.wl-tenant-calendar .text-primary,
#tarifas-container .text-primary { color: var(--brand-primary) !important; }
#tarifas-container .quantity-selector-container:hover,
#tarifas-container .quantity-selector-container:focus-within {
  border-color: var(--brand-primary) !important;
  box-shadow: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
}
#tarifas-container .quantity-btn:hover:not(:disabled),
#tarifas-container .quantity-btn:focus-visible:not(:disabled),
#tarifas-container .quantity-btn:active:not(:disabled) {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Flatpickr da página de produto: todas as cores interativas pertencem à
   marca resolvida pelo host atual, sem afetar componentes fora da Whitelabel. */
#calendar .flatpickr-day.selected,
#calendar .flatpickr-day.startRange,
#calendar .flatpickr-day.endRange,
#calendar .flatpickr-day.selected.inRange,
#calendar .flatpickr-day.startRange.inRange,
#calendar .flatpickr-day.endRange.inRange,
#calendar .flatpickr-day.selected:focus,
#calendar .flatpickr-day.startRange:focus,
#calendar .flatpickr-day.endRange:focus,
#calendar .flatpickr-day.selected:hover,
#calendar .flatpickr-day.startRange:hover,
#calendar .flatpickr-day.endRange:hover,
#calendar .flatpickr-day.selected.prevMonthDay,
#calendar .flatpickr-day.startRange.prevMonthDay,
#calendar .flatpickr-day.endRange.prevMonthDay,
#calendar .flatpickr-day.selected.nextMonthDay,
#calendar .flatpickr-day.startRange.nextMonthDay,
#calendar .flatpickr-day.endRange.nextMonthDay,
.wl-tenant-calendar .flatpickr-day.selected,
.wl-tenant-calendar .flatpickr-day.startRange,
.wl-tenant-calendar .flatpickr-day.endRange,
.wl-tenant-calendar .flatpickr-day.selected.inRange,
.wl-tenant-calendar .flatpickr-day.startRange.inRange,
.wl-tenant-calendar .flatpickr-day.endRange.inRange,
.wl-tenant-calendar .flatpickr-day.selected:focus,
.wl-tenant-calendar .flatpickr-day.startRange:focus,
.wl-tenant-calendar .flatpickr-day.endRange:focus,
.wl-tenant-calendar .flatpickr-day.selected:hover,
.wl-tenant-calendar .flatpickr-day.startRange:hover,
.wl-tenant-calendar .flatpickr-day.endRange:hover,
.wl-tenant-calendar .flatpickr-day.selected.prevMonthDay,
.wl-tenant-calendar .flatpickr-day.startRange.prevMonthDay,
.wl-tenant-calendar .flatpickr-day.endRange.prevMonthDay,
.wl-tenant-calendar .flatpickr-day.selected.nextMonthDay,
.wl-tenant-calendar .flatpickr-day.startRange.nextMonthDay,
.wl-tenant-calendar .flatpickr-day.endRange.nextMonthDay {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}
#calendar .flatpickr-day:not(.flatpickr-disabled):hover,
#calendar .flatpickr-day:not(.flatpickr-disabled):focus,
.wl-tenant-calendar .flatpickr-day:not(.flatpickr-disabled):hover,
.wl-tenant-calendar .flatpickr-day:not(.flatpickr-disabled):focus {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}
#calendar .flatpickr-months .flatpickr-prev-month:hover svg,
#calendar .flatpickr-months .flatpickr-next-month:hover svg,
#calendar .flatpickr-months .flatpickr-prev-month svg,
#calendar .flatpickr-months .flatpickr-next-month svg,
.wl-tenant-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.wl-tenant-calendar .flatpickr-months .flatpickr-next-month:hover svg,
.wl-tenant-calendar .flatpickr-months .flatpickr-prev-month svg,
.wl-tenant-calendar .flatpickr-months .flatpickr-next-month svg {
  fill: var(--brand-primary) !important;
}
#calendar .flatpickr-current-month,
#calendar .flatpickr-weekday,
.wl-tenant-calendar .flatpickr-current-month,
.wl-tenant-calendar .flatpickr-weekday { color: var(--brand-primary) !important; }

.wl-tenant-calendar .flatpickr-day.flatpickr-disabled.today,
.wl-tenant-calendar .flatpickr-day.prevMonthDay.flatpickr-disabled.today,
.wl-tenant-calendar .flatpickr-day.nextMonthDay.flatpickr-disabled.today {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(57, 57, 57, .45) !important;
  opacity: .55;
}