:root {
  --brand-primary: #0D6EFD;
  --brand-secondary: #212529;
  /* Componentes RGB da marca: o Bootstrap aplica opacidade por rgba(), entao
     as utilidades bg-opacity-* precisam deles. O PHP sobrescreve por tenant. */
  --brand-primary-rgb: 13, 110, 253;
  --brand-secondary-rgb: 33, 37, 41;
}

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; }

.wl-cart-preview-image {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  object-fit: cover;
  background: #eef1f4;
}

.wl-mobile-cart-panel {
  z-index: 1080;
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.wl-mobile-cart-open {
  overflow: hidden;
}

body.wl-mobile-cart-open::before {
  position: fixed;
  inset: 0;
  z-index: 1025;
  content: "";
  background: rgba(0, 0, 0, .42);
}

/* 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;
}

/* `rgba(..., var(--bs-bg-opacity, 1))` em vez do hex direto: o Bootstrap aplica
   bg-opacity-* por essa variavel, e sobrescrever `background-color` com a cor
   cheia anulava a opacidade. Era o que deixava
   `bg-primary bg-opacity-10 text-primary` como texto da marca sobre fundo
   solido da marca — o rotulo sumia dentro do proprio badge. */
.bg-primary,
.bg-success,
.badge.bg-primary,
.badge.bg-success { background-color: rgba(var(--brand-primary-rgb, 13, 110, 253), var(--bs-bg-opacity, 1)) !important; }

/* Fundo esmaecido pede texto escuro: a primaria sobre 10% dela mesma nao
   alcanca contraste legivel em marcas saturadas. */
body .bg-primary.bg-opacity-10.text-primary,
body .bg-primary.bg-opacity-10.text-success,
body .bg-primary.bg-opacity-25.text-primary,
body .bg-primary.bg-opacity-25.text-success,
body .bg-success.bg-opacity-10.text-primary,
body .bg-success.bg-opacity-10.text-success,
body .bg-success.bg-opacity-25.text-primary,
body .bg-success.bg-opacity-25.text-success { color: var(--brand-secondary) !important; }
/* Reserva uma área previsível no header para logos de qualquer proporção.
   A imagem ocupa a área por contain, sem distorção nem impacto no menu. */
#mainNavbar .wl-header-logo-frame {
  align-items: center;
  display: flex;
  flex: 0 0 130px;
  height: 54px;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  width: 130px;
}
#mainNavbar .wl-logo {
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  width: 100%;
}

@media (max-width: 575.98px) {
  #mainNavbar .wl-header-logo-frame {
    flex-basis: 110px;
    height: 44px;
    width: 110px;
  }
}

.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;
}

/* Badge sutil: fundo tingido pela primária, texto na secundária.
   Usar a primária nos dois lados deixava o badge ilegível em tenants de cor
   saturada — com #FF0000, por exemplo, virava vermelho sobre rosa claro. A
   secundária é a cor de texto da marca, então o contraste volta sem que o
   badge perca a identidade. Precisa vir depois de `body .text-primary` e das
   regras de `.badge` acima para vencer no desempate por ordem. */
.badge.text-bg-success-subtle,
.badge.text-success-emphasis,
body .badge.bg-primary-subtle,
body .badge.bg-primary-subtle.text-primary,
body .badge.bg-primary-subtle.text-primary-emphasis {
  color: var(--brand-secondary) !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;
}