/* ==========================================================================
   WooCommerce — avisos
   Todo el sitio: .woocommerce-message (éxito), .woocommerce-info (neutro),
   .woocommerce-error (lista de errores), .woocommerce-notice--* (página de
   pedido recibido), aviso de la tienda (p.demo_store) y validación de campos.

   Plano, como el resto del sistema: fondo suave + borde lateral de 3px del
   color del estado + icono. El texto siempre en --color-ink.

   Divi 4.6.1 fija color, fondo, padding, tamaño y borde de los avisos con
   !important y oculta su ::before (icono de Woo) con display:none!important:
   por eso acá también van !important (comentados donde aplica).
   ========================================================================== */

/* ---------- Iconos (máscaras SVG, se pintan con currentColor) ---------- */
:root {
  --notice-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E");
  --notice-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --notice-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
}

/* ---------- Caja ----------
   !important: Divi (`.woocommerce-error, .woocommerce-info, .woocommerce-message`)
   pone padding, borde, color y tamaño con !important. */
body.byc .woocommerce-message,
body.byc .woocommerce-info,
body.byc .woocommerce-error,
body.byc .woocommerce-notice--success,
body.byc .woocommerce-notice--info,
body.byc .woocommerce-notice--error {
  --notice-color: var(--color-ink);
  --notice-icon: var(--notice-icon-info);

  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  width: auto;
  margin: 0 0 32px;
  padding: 16px 20px 16px 52px !important;
  border: 0 !important;
  border-left: 3px solid var(--notice-color) !important;
  border-radius: 0;
  background: var(--color-cream) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-base) !important;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-shadow: none !important;
  box-shadow: none !important;
  list-style: none !important; /* #left-area ul / .entry-content ul de Divi le ponen viñetas */
}

body.byc .woocommerce-message,
body.byc .woocommerce-notice--success {
  --notice-color: var(--color-success);
  --notice-icon: var(--notice-icon-success);
  background: var(--color-success-soft) !important;
}

body.byc .woocommerce-error,
body.byc .woocommerce-notice--error {
  --notice-color: var(--color-danger);
  --notice-icon: var(--notice-icon-error);
  background: var(--color-danger-soft) !important;
}

/* Icono: reemplaza al de la fuente WooCommerce.
   !important: Divi oculta el ::before con display:none!important. */
body.byc .woocommerce-message::before,
body.byc .woocommerce-info::before,
body.byc .woocommerce-error::before,
body.byc .woocommerce-notice--success::before,
body.byc .woocommerce-notice--info::before,
body.byc .woocommerce-notice--error::before {
  content: "" !important;
  position: absolute;
  top: 18px;
  left: 18px;
  display: block !important;
  width: 20px;
  height: 20px;
  margin: 0;
  background-color: var(--notice-color);
  color: var(--notice-color) !important;
  font-family: inherit;
  -webkit-mask: var(--notice-icon) center / contain no-repeat;
  mask: var(--notice-icon) center / contain no-repeat;
}

/* Divi y Woo agregan un clearfix con ::after: sobra en flex */
body.byc .woocommerce-message::after,
body.byc .woocommerce-info::after,
body.byc .woocommerce-error::after {
  display: none;
}

/* ---------- Errores: una línea por error ---------- */
body.byc .woocommerce-error {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

body.byc .woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Links y botones dentro del aviso ----------
   !important en color: Divi pone los links de .woocommerce-info en blanco con !important. */
body.byc :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
  color: var(--color-ink) !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* "Ver carrito", "Confirmar dirección de correo electrónico", "Ir a la tienda"…
   Woo imprime el botón antes del texto: `order` lo manda al final (a la derecha).
   Estilo de contorno (secundario), para no competir con el CTA de la página.
   Especificidad 0-5-1: le gana a los botones de woocommerce.css (0-4-1). */
body.byc :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button.button:not([class*="button--"]) {
  order: 1;
  flex: 0 0 auto;
  min-height: 40px;
  margin: 0 0 0 auto;
  padding: 10px 20px;
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink) !important; /* Divi: .woocommerce-info a { color:#fff!important } */
  font-size: var(--fs-xs);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  float: none;
}

body.byc :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button.button:not([class*="button--"]):hover {
  padding: 10px 20px;
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white) !important;
}

/* ---------- Contenedor de avisos ---------- */
body.byc .woocommerce-notices-wrapper:empty {
  display: none;
}

/* ---------- Aviso de la tienda (modo demo / "Aviso de la tienda" del personalizador) ----------
   Divi lo fija abajo con !important; acá solo se alinea con el sistema. */
body.byc p.woocommerce-store-notice,
body.byc p.demo_store {
  padding: 12px var(--gutter);
  background: var(--color-ink);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  box-shadow: none;
}

body.byc p.woocommerce-store-notice a,
body.byc p.demo_store a {
  margin-left: 12px;
  color: var(--color-white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Validación de campos ----------
   Solo cambia el color del borde/label: el resto del input queda como está. */
body.byc .woocommerce form .form-row.woocommerce-invalid label {
  color: var(--color-danger);
}

body.byc .woocommerce form .form-row.woocommerce-invalid .input-text,
body.byc .woocommerce form .form-row.woocommerce-invalid select,
body.byc .woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection {
  border-color: var(--color-danger);
}

/* Woo marca en verde los campos válidos: se deja el borde neutro */
body.byc .woocommerce form .form-row.woocommerce-validated .input-text,
body.byc .woocommerce form .form-row.woocommerce-validated select,
body.byc .woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
  border-color: var(--color-line-strong);
}

body.byc .woocommerce-invalid #terms {
  outline-color: var(--color-danger);
}

/* Mensajes en línea bajo el campo (checkout) y bajo el cupón (carrito) */
body.byc .checkout-inline-error-message,
body.byc .coupon-error-notice {
  margin: 6px 0 0;
  padding: 0;
  color: var(--color-danger);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

/* ---------- Responsive ---------- */
@container site (max-width: 767px) {
  body.byc .woocommerce-message,
  body.byc .woocommerce-info,
  body.byc .woocommerce-error,
  body.byc .woocommerce-notice--success,
  body.byc .woocommerce-notice--info,
  body.byc .woocommerce-notice--error {
    padding: 14px 16px 14px 46px !important;
    font-size: var(--fs-sm) !important;
  }

  body.byc .woocommerce-message::before,
  body.byc .woocommerce-info::before,
  body.byc .woocommerce-error::before,
  body.byc .woocommerce-notice--success::before,
  body.byc .woocommerce-notice--info::before,
  body.byc .woocommerce-notice--error::before {
    top: 15px;
    left: 16px;
  }

  /* El botón pasa abajo, a todo el ancho */
  body.byc :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button.button:not([class*="button--"]) {
    flex-basis: 100%;
    margin-left: 0;
  }

  body.byc p.woocommerce-store-notice,
  body.byc p.demo_store {
    padding-inline: 20px;
  }
}