/**
 * WooCommerce notices (success, info, error) in the Maatos design: soft tinted
 * boxes with an icon, instead of WooCommerce's purple top border.
 * Used on the shop, cart, checkout and account pages.
 */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
  --n-color: #555b64;
  --n-bg: #f2f5f9;
  --n-border: #e3e5e8;
  --n-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: auto;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--n-border);
  border-top: 1px solid var(--n-border) !important;
  border-radius: 8px;
  background: var(--n-bg);
  font-size: 14px;
  line-height: 1.5;
  color: #1f2328;
  list-style: none;
  overflow-wrap: anywhere;
}

body .woocommerce-message {
  --n-color: #1a7f37;
  --n-bg: #f0faf2;
  --n-border: #b9e2c3;
  --n-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E");
}

body .woocommerce-error {
  --n-color: #c62828;
  --n-bg: #fdf1f1;
  --n-border: #f2bfbf;
  --n-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
}

/* Icon: replaces WooCommerce's font icon. */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
  content: "";
  position: static;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  background-color: var(--n-color);
  -webkit-mask: var(--n-icon) center / contain no-repeat;
  mask: var(--n-icon) center / contain no-repeat;
  font-size: 0;
}

/* Error list: one line per problem, under each other, next to the icon. */
body ul.woocommerce-error {
  display: block;
  padding-left: 48px;
}

body ul.woocommerce-error::before {
  position: absolute;
  top: 15px;
  left: 16px;
}

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

body .woocommerce-error > li + li {
  margin-top: 4px;
}

body .woocommerce-error a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

body .woocommerce-error a:hover {
  text-decoration: underline;
}

body .woocommerce-message a:not(.button),
body .woocommerce-info a:not(.button) {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* "View cart" button: a link at the end of the message. */
body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button {
  order: 3;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--n-color);
  text-decoration: underline;
  float: none;
}

body .woocommerce-message .button:hover,
body .woocommerce-info .button:hover,
body .woocommerce-error .button:hover {
  background: none;
  color: var(--n-color);
  opacity: 0.8;
}