/* =============================================================================
   WooCommerce notices — DPL tokens (WooCommerce's own stylesheets are off)
   ============================================================================= */

.dpl-notices {
  margin: 0 0 24px;
}

/*
 * WooCommerce prints notices into its own wrapper at the top of <main>, before our markup runs —
 * so "Waardebon is succesvol toegepast." came out full-bleed against the left edge of the window
 * while the rest of the checkout sat in the 1280px column. `.dpl-notices` never applied to it,
 * because the notice was never inside it: WooCommerce clears the queue when it prints, so by the
 * time snippets/dpl-notices.php runs there is nothing left to show.
 *
 * Rather than move the output — which would mean unhooking WooCommerce's own and risking a page
 * that shows no errors at all — the wrapper is given the same container as everything else. The
 * values are `.page-width`'s, not new ones.
 */
.woocommerce-notices-wrapper {
  max-width: var(--page-width);
  margin: 0 auto;
  /* `.page-width` in base.css: 1.5rem below 750px, 5rem above. Copied rather than shared because
     the wrapper is WooCommerce's markup and carries no class of ours. If base.css changes, change
     these two with it — the notice sitting 35px inside the heading is what a mismatch looks like. */
  padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
  .woocommerce-notices-wrapper {
    padding: 0 5rem;
  }
}

/*
 * The checkout is wider than `--page-width`: `.dpl-checkout` sets 1280px where the site default is
 * 1200px. Aligning to the default left the notice visibly inset from the form it belongs to, which
 * is a different kind of wrong from the original, so the wrapper follows the page it is on.
 */
body.woocommerce-checkout .woocommerce-notices-wrapper {
  max-width: 1280px;
}

/* An empty wrapper is on every WooCommerce page; it must not add space where there is no notice. */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.dpl-notices ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.dpl-notices .woocommerce-message,
.dpl-notices .woocommerce-error,
.dpl-notices .woocommerce-info,
.dpl-notices .woocommerce-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  background: #F7F7F7;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: #4B4B4B;
  list-style: none;
}

.dpl-notices .woocommerce-message {
  border-color: #FF9A01;
  background: #FFF6E9;
  color: #0D0D0D;
}

.dpl-notices .woocommerce-error {
  border-color: #DC2626;
  background: #FEF2F2;
  color: #0D0D0D;
}

.dpl-notices li + li {
  margin-top: 8px;
}

.dpl-notices a {
  color: #0D0D0D;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dpl-notices a:hover {
  color: #FF9A01;
}

/* The "View cart" / "Undo?" buttons WooCommerce puts inside a notice. */
.dpl-notices .button,
.dpl-notices .wc-forward {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none !important;
  font-size: 13px;
  color: #0D0D0D;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-width: unset;
}

.dpl-notices .button:hover {
  background: transparent;
  color: #FF9A01;
  box-shadow: none !important;
}