/* ═══════════════════════════════════════════════════════════════════
   mclbrand.css — Merclari Brand Colors
   Hummingbird usa Bootstrap 5.3 con CSS custom properties.
   Sobrescribir las variables en :root y en cada componente
   cambia TODO el azul de PS por el verde Merclari sin romper nada.

   Paleta:
     Verde marca  #237738  (primary)
     Verde oscuro #163826  (hover / active)
     Verde claro  #b2d9bb  (light / muted)
     Borde        #e7ece7
     Fondo card   #f7fdf9
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Variables globales Bootstrap 5.3 ───────────────────────── */
:root {
  /* Color primario */
  --bs-primary:              #237738;
  --bs-primary-rgb:          35, 119, 56;

  /* Links */
  --bs-link-color:           #237738;
  --bs-link-color-rgb:       35, 119, 56;
  --bs-link-hover-color:     #163826;
  --bs-link-hover-color-rgb: 22, 56, 38;

  /* Focus ring global */
  --bs-focus-ring-color:     rgba(35, 119, 56, 0.28);

  /* Utilidades de color */
  --bs-primary-text-emphasis:   #163826;
  --bs-primary-bg-subtle:       #f7fdf9;
  --bs-primary-border-subtle:   #b2d9bb;
}

/* ── 2. .btn-primary ───────────────────────────────────────────── */
/*
 * Bootstrap 5.3 utiliza CSS vars dentro de cada clase .btn-*
 * Redefinirlas aquí es suficiente; no necesitamos !important.
 */
.btn-primary {
  --bs-btn-color:              #ffffff;
  --bs-btn-bg:                 #237738;
  --bs-btn-border-color:       #237738;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #163826;
  --bs-btn-hover-border-color: #163826;
  --bs-btn-focus-shadow-rgb:   35, 119, 56;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #163826;
  --bs-btn-active-border-color:#163826;
  --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.12);
  --bs-btn-disabled-color:     #ffffff;
  --bs-btn-disabled-bg:        #237738;
  --bs-btn-disabled-border-color: #237738;
}
/* Fallback explícito para navegadores que no soporten las vars */
.btn-primary,
input.btn-primary,
a.btn-primary {
  background-color: #237738 !important;
  border-color:     #237738 !important;
  color:            #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show,
input.btn-primary:hover,
a.btn-primary:hover {
  background-color: #163826 !important;
  border-color:     #163826 !important;
  color:            #ffffff !important;
}
.btn-primary:focus-visible,
.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(35,119,56,0.38) !important;
}

/* ── 3. .btn-outline-primary ───────────────────────────────────── */
.btn-outline-primary {
  --bs-btn-color:              #237738;
  --bs-btn-border-color:       #237738;
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           #237738;
  --bs-btn-hover-border-color: #237738;
  --bs-btn-focus-shadow-rgb:   35, 119, 56;
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          #237738;
  --bs-btn-active-border-color:#237738;
  --bs-btn-disabled-color:     #237738;
  --bs-btn-disabled-border-color: #237738;
}
.btn-outline-primary,
a.btn-outline-primary {
  color:        #237738 !important;
  border-color: #237738 !important;
  background:   transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
a.btn-outline-primary:hover {
  background-color: #237738 !important;
  border-color:     #237738 !important;
  color:            #ffffff !important;
}
.btn-outline-primary:focus-visible,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(35,119,56,0.32) !important;
}

/* ── 4. Inputs de formulario — borde focus verde ────────────────── */
.form-control:focus,
.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
  border-color: #237738 !important;
  box-shadow:   0 0 0 0.2rem rgba(35,119,56,0.2) !important;
  outline:      none !important;
}

/* ── 5. Checkboxes y radios ─────────────────────────────────────── */
.form-check-input:checked {
  background-color: #237738 !important;
  border-color:     #237738 !important;
}
.form-check-input:focus {
  border-color: #237738 !important;
  box-shadow:   0 0 0 0.2rem rgba(35,119,56,0.2) !important;
}
/* Radio seleccionado: punto interior */
.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* ── 6. Utilidades de color Bootstrap ───────────────────────────── */
.text-primary,
.link-primary {
  color: #237738 !important;
}
.text-primary:hover,
.link-primary:hover {
  color: #163826 !important;
}

.bg-primary {
  background-color: #237738 !important;
}

.border-primary {
  border-color: #237738 !important;
}

/* ── 7. Badges ──────────────────────────────────────────────────── */
.badge.bg-primary,
.badge.text-bg-primary {
  background-color: #237738 !important;
  color: #ffffff !important;
}

/* ── 8. Paginación ──────────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: #237738 !important;
  border-color:     #237738 !important;
  color:            #ffffff !important;
}
.page-link {
  color: #237738 !important;
}
.page-link:hover {
  color: #163826 !important;
}
.page-link:focus {
  box-shadow: 0 0 0 0.25rem rgba(35,119,56,0.22) !important;
}

/* ── 9. Tabs / Nav activos ──────────────────────────────────────── */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color:              #237738 !important;
  border-bottom-color:#237738 !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #237738 !important;
  color:            #ffffff !important;
}
.nav-link {
  color: #237738;
}
.nav-link:hover,
.nav-link:focus {
  color: #163826;
}

/* ── 10. Progress bars ──────────────────────────────────────────── */
.progress-bar {
  background-color: #237738 !important;
}

/* ── 11. Spinner ────────────────────────────────────────────────── */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: #237738 !important;
}

/* ── 12. Alertas primary ────────────────────────────────────────── */
.alert-primary {
  --bs-alert-color:        #163826;
  --bs-alert-bg:           #f7fdf9;
  --bs-alert-border-color: #b2d9bb;
  color:        #163826 !important;
  background:   #f7fdf9 !important;
  border-color: #b2d9bb !important;
}

/* ── 13. Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb-item a {
  color: #237738;
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: #163826;
  text-decoration: underline;
}

/* ── 14. PS Checkout — botones específicos ──────────────────────── */
/* Por si algún botón de checkout usa id o clase específica */
#payment-confirmation .btn,
#checkout-payment-step .btn-primary,
button[data-link-action="sign-in"],
button[data-link-action="register-new-customer"] {
  background-color: #237738 !important;
  border-color:     #237738 !important;
  color:            #ffffff !important;
}
button[data-link-action="sign-in"]:hover,
button[data-link-action="register-new-customer"]:hover {
  background-color: #163826 !important;
  border-color:     #163826 !important;
}

/* ── 15. Newsletter submit ──────────────────────────────────────── */
input[name="submitNewsletter"],
button[name="submitNewsletter"] {
  background-color: #237738 !important;
  border-color:     #237738 !important;
  color:            #ffffff !important;
}
input[name="submitNewsletter"]:hover,
button[name="submitNewsletter"]:hover {
  background-color: #163826 !important;
  border-color:     #163826 !important;
}

/* ── 16. Botón "show password" (ojo azul en login) ──────────────── */
.btn-show-password,
[data-action="show-password"],
.input-group .btn {
  --bs-btn-bg:                 #237738;
  --bs-btn-border-color:       #237738;
  --bs-btn-hover-bg:           #163826;
  --bs-btn-hover-border-color: #163826;
}
.input-group .btn:not(.btn-outline-primary):not(.btn-outline-secondary) {
  background-color: #237738 !important;
  border-color:     #237738 !important;
  color:            #ffffff !important;
}
.input-group .btn:hover {
  background-color: #163826 !important;
  border-color:     #163826 !important;
}

/* ── 17. Offcanvas / Modal — botones de acción ──────────────────── */
.modal-footer .btn-primary,
.offcanvas-body .btn-primary {
  background-color: #237738 !important;
  border-color:     #237738 !important;
}
.modal-footer .btn-primary:hover,
.offcanvas-body .btn-primary:hover {
  background-color: #163826 !important;
  border-color:     #163826 !important;
}