/* ==========================================================================
   Aöra — "Desistir del contrato aquí" (inc/withdrawal.php)
   Loaded only on the page `desistimiento`, Mi cuenta and the thank-you page.
   Everything else comes from base.css / aora.css (.aora-cuenta) / woo.css.
   ========================================================================== */

/* Page layout: the form, and "Cómo funciona" beside it on wide screens */
.wd-lead { max-width: 68ch; }
.wd-layout { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .wd-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}
.wd .card,
.wd-main .card {
  background: var(--c-white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
@media (max-width: 480px) {
  .wd .card, .wd-main .card { padding: var(--s-5) var(--s-4); }
}

/* Status and error boxes (woo.css is not loaded on the public page) */
.wd-notice {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-1);
}
.wd-notice-error { border-left-color: var(--c-clay); background: var(--c-clay-tint); }

/* Forms */
.wd-form { display: flex; flex-direction: column; gap: var(--s-5); }
.wd-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wd-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wd-fieldset legend { padding: 0; margin-bottom: var(--s-3); }
.wd-items { display: flex; flex-direction: column; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.wd-items .check {
  padding: var(--s-3) var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.wd-items .check.is-done { background: var(--c-cream); border-color: var(--rule); color: var(--text-2); cursor: default; }
.wd-item-meta { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-2); }
.wd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }

/* The facts of the order and of the statement */
.wd-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1) var(--s-5);
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: var(--c-cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.wd-facts dt { font-weight: 600; color: var(--c-ink); }
.wd-facts dd { margin: 0 0 var(--s-3); color: var(--text-1); overflow-wrap: anywhere; }
.wd-facts dd:last-child { margin-bottom: 0; }
.wd-dd-note { color: var(--text-2); }
@media (min-width: 640px) {
  .wd-facts { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .wd-facts dd { margin-bottom: 0; }
}

/* Numbered steps */
.wd-next { counter-reset: wd; display: flex; flex-direction: column; gap: var(--s-3); list-style: none; padding: 0; margin-left: 0; }
.wd-next li { position: relative; padding-left: 36px; font-size: var(--fs-sm); color: var(--text-2); min-height: 26px; }
.wd-next li::before {
  counter-increment: wd; content: counter(wd);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-ink); color: var(--c-white);
  font-size: var(--fs-xs); font-weight: 700;
}
.wd-aside { padding-top: var(--s-2); }

/* Mi cuenta: space under the greeting */
.woocommerce-MyAccount-content .wd > .card { margin-top: var(--s-6); }

/* Mi cuenta table: the button must not stretch the row */
.wd-otable .btn { white-space: nowrap; }

/* Phone: one block per order, so the button is never scrolled out of sight */
@media (max-width: 639px) {
  .aora-cuenta .otable.wd-otable { min-width: 0; width: 100%; }
  .wd-otable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wd-otable tr { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
  .aora-cuenta .wd-otable th, .aora-cuenta .wd-otable td { display: block; padding: 0; border: 0; }
  .wd-otable td:last-child { margin-top: var(--s-2); }
}

/* Line under the order table (Ver pedido, thank-you page) */
.wd-orderline {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--c-cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.wd-orderline a { font-weight: 600; }