/* MoodTag WooCommerce notices (0.9.8, work item 41): the "added to your cart" message (snippet #85's wording and
   links), errors, info notes, and the cart and checkout notices, in the product page layer's card style. Loaded on the
   WooCommerce pages (body class mtd-notices, set with mtd-chrome). Rules:
   - Look only: no notice is hidden, moved or reworded. Snippet #85's inline styles are taken off on the server by the
     plugin (mtd_notices_atc_html), which puts classes in their place: .mtd-atc-note, .mtd-atc-actions, .mtd-atc-secondary.
   - Additional CSS styles these notices with !important, so every rule here starts with body.mtd-notices #wrapper
     and uses !important where an Additional CSS rule on the same property does.
   - Greens only. Errors use the layer's rust (as the Final Quality Check box does).
   - Not the checkout's "Have a discount code?" note: a snippet shows it as a plain link on purpose, so it is left as is. */

body.mtd-notices #wrapper {
  --n-ink: #1a202c; --n-ink-2: #2d3748; --n-muted: #5f6a64; --n-line: #e8e3d8; --n-cream: #fbf9f4;
  --n-green: #1f7a4c; --n-green-dark: #13612e; --n-green-soft: #dff3e7; --n-rust: #b42318;
  --n-sans: "Jakarta", system-ui, sans-serif;
}

/* ---------- the card ---------- */
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *)) {
  --n-accent: var(--n-green);
  position: relative !important; display: block !important; box-sizing: border-box;
  width: auto !important; margin: 0 0 20px !important; padding: 18px 22px 18px 62px !important;
  background: #fff !important; border: 1px solid var(--n-line) !important; border-radius: 20px !important;
  box-shadow: 0 18px 40px -30px rgba(43, 36, 32, .45) !important;
  color: var(--n-ink-2) !important; font-family: var(--n-sans) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.5 !important;
  letter-spacing: 0 !important; text-align: left !important; text-transform: none !important;
  list-style: none !important; overflow-wrap: anywhere;
}
body.mtd-notices #wrapper .woocommerce-info:where(:not(.woocommerce-form-coupon-toggle > *)) { --n-accent: var(--n-green-dark); background: var(--n-cream) !important; }
body.mtd-notices #wrapper .woocommerce-error { --n-accent: var(--n-rust); background: #fdf1f0 !important; border-color: #f2d3cf !important; }
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *)):focus { outline: none; }

/* the icon: a filled circle in the accent colour with a white mark (tick, i, !) */
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *))::before {
  content: "" !important; display: block !important; position: absolute !important; left: 20px !important; top: 18px !important;
  width: 26px !important; height: 26px !important; margin: 0 !important; border-radius: 50%;
  background: var(--n-accent) no-repeat center / 16px 16px; font-family: inherit !important;
}
body.mtd-notices #wrapper .woocommerce-message::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.mtd-notices #wrapper .woocommerce-info:where(:not(.woocommerce-form-coupon-toggle > *))::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='4.2' r='1.3' fill='%23fff'/%3E%3Cpath d='M8 7.2v5' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.mtd-notices #wrapper .woocommerce-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v5.3' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='1.3' fill='%23fff'/%3E%3C/svg%3E"); }

/* error lists: one line per problem */
body.mtd-notices #wrapper .woocommerce-error li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.mtd-notices #wrapper .woocommerce-error li + li { margin-top: 6px !important; }

/* links in notices (Undo?, Have a discount code?, links in errors) */
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *)) a:not(.button) {
  color: var(--n-green) !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
body.mtd-notices #wrapper .woocommerce-error a:not(.button) { color: var(--n-rust) !important; }
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *)) a:not(.button):hover { color: var(--n-green-dark) !important; }
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *)) a:focus-visible { outline: 3px solid rgba(47, 166, 106, .45) !important; outline-offset: 3px; border-radius: 6px; }

/* ---------- buttons in notices: the layer's pills. Primary filled green; #85's Shop Accessories is the outlined secondary ---------- */
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *)) a.button {
  display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
  float: none !important; width: auto !important; min-height: 46px; margin: 0 !important; padding: 10px 22px !important;
  border: 0 !important; border-radius: 999px !important; background: var(--n-green) !important; color: #fff !important; box-shadow: none !important;
  font-family: var(--n-sans) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important;
  letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; text-align: center !important; white-space: nowrap;
  animation: none !important; transform: none !important; transition: background-color .15s ease, color .15s ease !important;
}
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *)) a.button:hover { background: var(--n-green-dark) !important; color: #fff !important; }
body.mtd-notices #wrapper .woocommerce-message a.button.mtd-atc-secondary { background: #fff !important; color: var(--n-green) !important; box-shadow: inset 0 0 0 1.5px var(--n-green) !important; }
body.mtd-notices #wrapper .woocommerce-message a.button.mtd-atc-secondary:hover { background: var(--n-green-soft) !important; color: var(--n-green-dark) !important; }

/* ---------- #85 "added to your cart": sentence, note, then the two buttons ---------- */
body.mtd-notices #wrapper .woocommerce-message .mtd-atc-note { margin: 2px 0 0; color: var(--n-muted); font-size: .94em; font-weight: 500; }
body.mtd-notices #wrapper .woocommerce-message .mtd-atc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* desktop: words on the left, buttons on the right (the sentence is a bare text node, so it takes the first free cell) */
@media (min-width: 861px) {
  body.mtd-notices #wrapper .woocommerce-message:has(> .mtd-atc-actions) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; }
  body.mtd-notices #wrapper .woocommerce-message > .mtd-atc-note { grid-column: 1; grid-row: 2; }
  body.mtd-notices #wrapper .woocommerce-message > .mtd-atc-actions { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; flex-wrap: nowrap; }
}
/* phones: the buttons stack, full width */
@media (max-width: 600px) {
  body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *)) { padding: 16px 18px 16px 56px !important; }
  body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):where(:not(.woocommerce-form-coupon-toggle > *))::before { left: 18px !important; top: 16px !important; }
  body.mtd-notices #wrapper .woocommerce-message .mtd-atc-actions { flex-direction: column; margin-left: -38px; }
  body.mtd-notices #wrapper .woocommerce-message .mtd-atc-actions a.button { width: 100% !important; white-space: normal; }
}

/* ---------- notices with a WooCommerce button (e.g. My account "No order has been made yet." + Browse products):
   WooCommerce prints the button before the words in some templates; words first, button on the right (phones:
   under the words, full width). Only notices that hold nothing but words and the button, so nothing else is split. ---------- */
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info):where(:not(.woocommerce-form-coupon-toggle > *)):has(> a.button):not(:has(> :not(a.button))) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 12px; align-items: center;
}
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info):where(:not(.woocommerce-form-coupon-toggle > *)):has(> a.button):not(:has(> :not(a.button))) > a.button {
  grid-column: 2; grid-row: 1; float: none !important; margin: 0 !important;
}
@media (max-width: 600px) {
  body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info):where(:not(.woocommerce-form-coupon-toggle > *)):has(> a.button):not(:has(> :not(a.button))) { grid-template-columns: minmax(0, 1fr); }
  body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info):where(:not(.woocommerce-form-coupon-toggle > *)):has(> a.button):not(:has(> :not(a.button))) > a.button { grid-column: 1; grid-row: 2; margin-left: -38px !important; width: calc(100% + 38px) !important; }
}
body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info):where(:not(.woocommerce-form-coupon-toggle > *)):has(> a.button):not(:has(> :not(a.button)))::after { display: none !important; } /* WooCommerce's clearfix would be a second grid row */
@media (min-width: 601px) {
  body.mtd-notices #wrapper :is(.woocommerce-message, .woocommerce-info):where(:not(.woocommerce-form-coupon-toggle > *)):has(> a.button):not(:has(> :not(a.button)))::before { top: 50% !important; transform: translateY(-50%); }
}