/**
 * Thông báo WooCommerce (.woocommerce-notices-wrapper) — theme tắt style mặc định WC.
 */

:root {
  --hl-wc-notice-radius: 14px;
  --hl-wc-notice-shadow: 0 10px 40px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(15, 23, 42, 0.04);
  --hl-wc-notice-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.woocommerce-notices-wrapper {
  margin: 0 0 1.25rem;
  padding: 0;
  max-width: 100%;
}

.woocommerce-notices-wrapper:empty {
  display: none;
  margin: 0;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
  margin: 0 0 0.75rem;
  padding: 1rem 1.15rem 1rem 3.35rem;
  border-radius: var(--hl-wc-notice-radius);
  font-family: var(--hl-wc-notice-font);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.55;
  color: #0f172a;
  position: relative;
  border: 1px solid transparent;
  box-shadow: var(--hl-wc-notice-shadow);
  background-clip: padding-box;
}

.woocommerce-notices-wrapper .woocommerce-message:last-child,
.woocommerce-notices-wrapper .woocommerce-info:last-child,
.woocommerce-notices-wrapper .woocommerce-error:last-child {
  margin-bottom: 0;
}

/* Icon vòng tròn + tick */
.woocommerce-notices-wrapper .woocommerce-message::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}

.woocommerce-notices-wrapper .woocommerce-message::after {
  content: "";
  position: absolute;
  left: 1.42rem;
  top: 50%;
  width: 0.32rem;
  height: 0.55rem;
  margin-top: -0.08rem;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-50%) rotate(45deg);
}

.woocommerce-notices-wrapper .woocommerce-message {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 45%, #ffffff 100%);
  border-color: rgba(16, 185, 129, 0.28);
}

/* Thông tin */
.woocommerce-notices-wrapper .woocommerce-info::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #3b82f6 0%, #1e4fad 100%);
  box-shadow: 0 2px 8px rgba(30, 79, 173, 0.28);
}

.woocommerce-notices-wrapper .woocommerce-info::after {
  content: "i";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.65rem;
  height: 1.65rem;
  line-height: 1.65rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  pointer-events: none;
}

.woocommerce-notices-wrapper .woocommerce-info {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 55%, #ffffff 100%);
  border-color: rgba(59, 130, 246, 0.28);
}

/* Lỗi */
.woocommerce-notices-wrapper .woocommerce-error::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
}

.woocommerce-notices-wrapper .woocommerce-error::after {
  content: "!";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.65rem;
  height: 1.65rem;
  line-height: 1.65rem;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}

.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper ul.woocommerce-error {
  background: linear-gradient(135deg, #fef2f2 0%, #fffbeb 30%, #ffffff 100%);
  border-color: rgba(248, 113, 113, 0.35);
  list-style: none;
}

.woocommerce-notices-wrapper ul.woocommerce-error {
  padding: 1rem 1.15rem 1rem 3.35rem;
}

.woocommerce-notices-wrapper ul.woocommerce-error li {
  margin: 0.35rem 0;
}

.woocommerce-notices-wrapper ul.woocommerce-error li:first-child {
  margin-top: 0;
}

.woocommerce-notices-wrapper ul.woocommerce-error li:last-child {
  margin-bottom: 0;
}

/* Nút "Xem giỏ hàng" / CTA */
.woocommerce-notices-wrapper a.button,
.woocommerce-notices-wrapper .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0 0.5rem;
  padding: 0.45rem 1.1rem;
  min-height: 2.25rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  text-transform: none;
  line-height: 1.2;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
  background: linear-gradient(135deg, #1e4fad 0%, #2563eb 52%, #1d4ed8 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 79, 173, 0.35);
}

.woocommerce-notices-wrapper .woocommerce-message a.button:hover,
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(30, 79, 173, 0.42);
  transform: translateY(-1px);
}

.woocommerce-notices-wrapper .woocommerce-message a.button:active,
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward:active {
  transform: translateY(0);
}

.woocommerce-notices-wrapper .woocommerce-info a.button {
  background: linear-gradient(135deg, #2563eb 0%, #1e4fad 100%);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.woocommerce-notices-wrapper .woocommerce-error a.button {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
}

@media (max-width: 520px) {

  .woocommerce-notices-wrapper .woocommerce-message,
  .woocommerce-notices-wrapper .woocommerce-info,
  .woocommerce-notices-wrapper .woocommerce-error,
  .woocommerce-notices-wrapper ul.woocommerce-error {
    padding: 1rem 1rem 1rem 3rem;
    font-size: 0.875rem;
  }

  .woocommerce-notices-wrapper a.button,
  .woocommerce-notices-wrapper .button {
    margin-left: 0;
    margin-top: 0.65rem;
    width: 100%;
  }
}

/* —— Trang giỏ hàng: canh lề + thông báo gọn (đồng bộ .hl-cart-page) —— */
body.woocommerce-cart .woocommerce-notices-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
  margin-bottom: 1.15rem;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.85rem 1rem 0.85rem 3.15rem;
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::before {
  left: 12px;
  width: 1.5rem;
  height: 1.5rem;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::after {
  left: 1.31rem;
  width: 0.28rem;
  height: 0.48rem;
  border-width: 0 2px 2px 0;
}

body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a.button,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
  margin: 0;
  flex-shrink: 0;
}

@media (min-width: 560px) {

  body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a.button,
  body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
    margin-left: auto;
  }
}

/* —— Trang thanh toán —— */
body.woocommerce-checkout .hl-checkout-page .woocommerce-notices-wrapper {
  padding: 0;
  margin-bottom: 1rem;
}

body.woocommerce-checkout .hl-checkout-page .woocommerce-info,
body.woocommerce-checkout .hl-checkout-page .woocommerce-message,
body.woocommerce-checkout .hl-checkout-page .woocommerce-error {
  border-radius: 12px;
  font-size: 0.9rem;
}

/* —— Trang thank-you —— */
body.woocommerce-order-received .hl-thankyou-page .woocommerce-notices-wrapper {
  padding: 0;
  margin-bottom: 1rem;
}

/* —— Trang My Account —— */
body.woocommerce-account .hl-account-page .woocommerce-notices-wrapper {
  padding: 0;
  margin-bottom: 1rem;
}

body.woocommerce-account .hl-account-guest .woocommerce-notices-wrapper {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * WPBakery / custom CSS in header thường dùng !important — bắt buộc giữ kiểu thông báo WC.
 * Selector sâu + load file notices sau cùng (header.php, trước <body>).
 */
.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message {
  padding: 1rem 1.15rem 1rem 3.35rem !important;
  border-radius: var(--hl-wc-notice-radius) !important;
  font-family: var(--hl-wc-notice-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: #0f172a !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 45%, #ffffff 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  box-shadow: var(--hl-wc-notice-shadow) !important;
  position: relative !important;
}

.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message::before {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.65rem !important;
  height: 1.65rem !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message::after {
  content: "" !important;
  position: absolute !important;
  left: 1.42rem !important;
  top: 50% !important;
  width: 0.32rem !important;
  height: 0.55rem !important;
  margin-top: -0.08rem !important;
  border: solid #fff !important;
  border-width: 0 2.5px 2.5px 0 !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message a.button,
.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0.35rem 0 0 0.5rem !important;
  padding: 0.45rem 1.1rem !important;
  min-height: 2.25rem !important;
  border-radius: 999px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #1e4fad 0%, #2563eb 52%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 79, 173, 0.35) !important;
  border: none !important;
}