/* Pixel Desistimiento — estilos del front. Autocontenidos, no dependen del tema. */

.pixeldes { max-width: 720px; margin: 0 auto; }
.pixeldes__notice--error {
  background: #fdecea;
  border-color: #f5c6cb;
  color: #7b241c;
}
.pixeldes-guest-form { max-width: 460px; }
.pixeldes-guest-form .form-group { margin-bottom: 1rem; }
.pixeldes-guest-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.pixeldes-guest-form .pixeldes-row-btn { margin-top: .5rem; }

/* Enlace de desistimiento en el pie de página */
.pixeldes-footer-link { padding: 8px 0; }
.pixeldes-footer-link__a { color: inherit; text-decoration: none; font-size: .95em; }
.pixeldes-footer-link__a:hover { text-decoration: underline; }

/* Caja en la página de confirmación del pedido */
.pixeldes-orderconfirm { margin-top: 1rem; }
.pixeldes__notice {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 1.25rem;
  color: #5f4b00;
  font-size: .95em;
}

/* Botón dentro del detalle del pedido */
.pixeldes-orderdetail {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.pixeldes-orderdetail__text { margin: 0; flex: 1 1 260px; }
.pixeldes-orderdetail__btn { flex: 0 0 auto; }

/* Listado de pedidos elegibles */
.pixeldes__orders { list-style: none; margin: 0; padding: 0; }
.pixeldes__order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  margin-bottom: .75rem;
}
.pixeldes__order-info { display: flex; flex-direction: column; gap: .15rem; }
.pixeldes__ref { font-weight: 600; }
.pixeldes__meta { color: #666; font-size: .9em; }
.pixeldes__deadline { font-size: .9em; }

/* Resumen de confirmación */
.pixeldes__summary {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.pixeldes__summary > div {
  display: flex;
  justify-content: space-between;
  padding: .35rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.pixeldes__summary > div:last-child { border-bottom: 0; }
.pixeldes__summary span { color: #666; }

/* Formulario */
.pixeldes__label { display: block; font-weight: 600; margin-bottom: .35rem; }
.pixeldes__form textarea { width: 100%; margin-bottom: 1rem; }
.pixeldes__submit { margin-top: .5rem; }

/* Pantallas de resultado */
.pixeldes--done, .pixeldes--ineligible { text-align: center; padding: 2rem 1rem; }
.pixeldes__icon-ok .material-icons { font-size: 56px; color: #2e7d32; }
.pixeldes__icon-warn .material-icons { font-size: 56px; color: #ed6c02; }

/* Móvil */
@media (max-width: 575px) {
  .pixeldes__order, .pixeldes-orderdetail { flex-direction: column; align-items: stretch; }
  .pixeldes__order .btn, .pixeldes-orderdetail__btn { width: 100%; text-align: center; }
}

/* Botón inyectado en la fila del historial de pedidos */
.pixeldes-row-actions { margin-top: 6px; }
.pixeldes-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: var(--pixeldes-btn-bg, #081541);
  color: var(--pixeldes-btn-text, #ffffff) !important;
  border: 1px solid var(--pixeldes-btn-bg, #081541);
  border-radius: 6px;
  padding: 9px 18px !important;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2 !important;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s;
  margin: 6px 0 6px 12px !important;
  vertical-align: middle;
}
.pixeldes-row-btn .material-icons { margin-right: 6px; }
.pixeldes-row-btn:hover,
.pixeldes-row-btn:focus {
  filter: brightness(1.15);
  color: var(--pixeldes-btn-text, #ffffff) !important;
  text-decoration: none;
}
.pixeldes-row-btn .material-icons { color: var(--pixeldes-btn-text, #ffffff) !important; }

/* Elección total/parcial */
.pixeldes__scope { border: 0; margin: 0 0 16px; padding: 0; }
.pixeldes__scope legend { font-weight: 600; margin-bottom: 8px; font-size: 1em; }
.pixeldes__scope-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; cursor: pointer;
}
.pixeldes__scope-opt input { width: 18px; height: 18px; margin: 0; }

/* Líneas de producto */
.pixeldes__lines {
  border: 1px solid #e2e2e2; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 16px;
}
.pixeldes__lines-help { color: #666; font-size: .9em; margin: 0 0 12px; }
.pixeldes__line {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f0f0f0;
}
.pixeldes__line:last-child { border-bottom: 0; }
.pixeldes__line-check { display: flex; align-items: center; gap: 10px; margin: 0; flex: 1 1 240px; }
.pixeldes__line-check input { width: 18px; height: 18px; min-width: 18px; margin: 0; }
.pixeldes__line-name em { color: #888; font-style: normal; font-size: .9em; }
.pixeldes__line-qty { display: flex; align-items: center; gap: 8px; }
.pixeldes__line-qty input { width: 72px; }
.pixeldes__line-max { color: #888; font-size: .85em; }

@media (max-width: 575px) {
  .pixeldes__line { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Tarjeta unificada del front (diseño neutro, igual que la CMS)
   ============================================================ */
.pixeldes {
  background: #fff;
  border: 1px solid #e4e6ea;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(20,22,28,.06);
  padding: 36px 34px;
  margin: 1.5rem auto 2.5rem;
}
.pixeldes__intro { color: #666d78; font-size: 1rem; line-height: 1.6; margin: 0 0 1.5rem; }

/* Título de sección dentro de la tarjeta */
.pixeldes__head { text-align: center; margin-bottom: 1.75rem; }
.pixeldes__head img { max-width: 160px; max-height: 70px; height: auto; margin: 0 auto 1rem; display: block; }
.pixeldes__head h2 { color: #2b2f38; font-size: 1.6rem; font-weight: 800; margin: 0; }

/* Campos de formulario neutros */
.pixeldes .form-group { margin-bottom: 1.15rem; }
.pixeldes label { color: #2b2f38; }
.pixeldes .form-control {
  border: 1px solid #d7dae0; border-radius: 8px; padding: 10px 14px;
  font-size: .95rem; width: 100%; background: #fff; color: #2b2f38;
}
.pixeldes .form-control:focus {
  border-color: #2b2f38; box-shadow: 0 0 0 3px rgba(43,47,56,.08); outline: none;
}
.pixeldes small.text-muted { color: #9aa0aa !important; font-size: .85em; }

/* Botones de acción neutros (sustituyen al azul del tema) */
.pixeldes .btn-primary,
.pixeldes .pixeldes__submit,
.pixeldes-guest-form .pixeldes-row-btn {
  background: #2b2f38 !important;
  border: 1px solid #2b2f38 !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 13px 30px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(43,47,56,.22);
  transition: background .15s;
}
.pixeldes .btn-primary:hover,
.pixeldes .pixeldes__submit:hover,
.pixeldes-guest-form .pixeldes-row-btn:hover {
  background: #40454f !important;
}

/* Resultado: iconos en tono neutro */
.pixeldes--done .pixeldes__icon-ok .material-icons { color: #2b2f38; }
.pixeldes--done h4 { color: #2b2f38; font-weight: 800; }
.pixeldes--ineligible .pixeldes__icon-warn .material-icons { color: #9aa0aa; }

/* En móvil, menos padding */
@media (max-width: 575px) {
  .pixeldes { padding: 24px 20px; }
}

/* ------------------------------------------------------------------
 * Tema Creative Elements (Elementor): el header está fijo (position:
 * fixed) y el breadcrumb del tema queda pisado por él, mostrándose
 * cortado ("...iento") sobre el contenido. Solo en las páginas de
 * este módulo ocultamos ese breadcrumb y damos aire arriba, sin
 * tocar la maquetación global de la tienda.
 * ------------------------------------------------------------------ */
#module-pixeldesistimiento-withdrawal .breadcrumb,
#module-pixeldesistimiento-withdrawal nav.breadcrumb,
#module-pixeldesistimiento-withdrawal #main > .page-header,
#module-pixeldesistimiento-withdrawal #content > h1,
#module-pixeldesistimiento-withdrawal #content-wrapper > h1,
#module-pixeldesistimiento-withdrawal .page-content > h1,
#module-pixeldesistimiento-withdrawal h1.page-heading {
  display: none !important;
}
#module-pixeldesistimiento-withdrawal #wrapper,
#module-pixeldesistimiento-withdrawal #content-wrapper {
  padding-top: 24px;
}
/* Asegura que solo NUESTRO título (dentro de la tarjeta) se vea. */
#module-pixeldesistimiento-withdrawal .pixeldes__head h2 { display: block !important; }