/* evov-sub: Toast notifications
 *
 * Replaces WooCommerce's inline notice banners (.woocommerce-notices-wrapper,
 * .woocommerce-NoticeGroup-checkout / .woocommerce-NoticeGroup-updateOrderReview)
 * with toasts. The native wrapper is never
 * shown — js/toast.js reads its content and converts each notice into a
 * toast card, then marks the wrapper processed. Hiding happens here (CSS),
 * not via JS removal, so there is no flash of the native banner before the
 * script runs (see js/toast.js for the scan-on-load + MutationObserver pair).
 */

.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup-checkout,
/* Emitted when the checkout refreshes its order review — where a cart clamp
   from WCSB's order limits lands. Without this it rendered as an inline pink
   block inside the checkout form while every other notice on the site toasted. */
.woocommerce-NoticeGroup-updateOrderReview,
.wfacp-notices-wrapper {
  display: none !important;
}

#evov-toast-stack {
  position: fixed;
  top: 90px;
  right: 20px;
  /* Above FunnelKit's slide-in cart, which sits at the top of the int range
     (fkcart-mini-cart.css lowers it to 2147483000 so overlays can clear it).
     At 100000 the toasts rendered behind the open cart panel. */
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}

.evov-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 240px;
  max-width: 320px;
  padding: 11px 14px;
  background: #121420;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--evov-toast-accent, var(--wd-primary-color, #6366f1));
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  font-family: inherit;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.evov-toast.evov-toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.evov-toast.evov-toast-out {
  opacity: 0;
  transform: translateX(16px);
}

.evov-toast--success { --evov-toast-accent: #22c55e; }
.evov-toast--error   { --evov-toast-accent: #ef4444; }
.evov-toast--info    { --evov-toast-accent: #3b82f6; }

.evov-toast__icon {
  flex-shrink: 0;
  color: var(--evov-toast-accent);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  background: none !important;
  border: none;
  padding: 0;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.evov-toast__icon:hover,
.evov-toast__icon:focus,
.evov-toast__icon:focus-visible,
.evov-toast__icon:active {
  background: none !important;
  box-shadow: none;
}

.evov-toast__msg {
  flex: 1;
  font-size: 13px;
  line-height: 18px;
  color: #fff;
}

/* The "View cart" / "Continue shopping" action WooCommerce notices often
   end in (see toastNoticeBlock's extractForwardLink in toast.js) — styled
   as an inline link so it still reads as part of the sentence. */
.evov-toast__action {
  display: inline;
  padding: 0;
  margin: 0;
  background: none !important;
  border: none;
  font: inherit;
  font-weight: 600;
  color: var(--evov-toast-accent, var(--wd-primary-color, #6366f1));
  text-decoration: underline;
  cursor: pointer;
}

.evov-toast__action:hover,
.evov-toast__action:focus-visible {
  opacity: 0.8;
}

/* The type icon is ALSO a <button> whenever the toast is persistent — that is
   how it doubles as the close control (see toast.js: it builds a <button> when
   `persist` is set, a <span> otherwise). So it needs the same escape from
   WoodMart's 42px control height as the action link below, and for exactly the
   same reason.

   Nothing showed this until a persistent toast carried no action link: the
   "Restoring your item…" message is icon plus text only, and the icon alone
   forced the card to 66px around an 18px line, leaving the glyph stranded.
   Measured 9x42 before, 9x18 after. */
.evov-toast .evov-toast__icon {
  min-height: 0 !important;
  height: auto !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  line-height: 18px !important;
  vertical-align: baseline !important;
}

/* The action is a real <button> — it performs an action, so it should be one
   for keyboard and assistive tech — and that is what makes this necessary.
   WoodMart sizes every button to a standard control height:

       :is(.btn, .button, button, [type="submit"], [type="button"]) {
           min-height: var(--btn-height, 42px);
       }

   Inside a sentence that turns the button into a 42px-tall atomic inline box,
   so the one wrapped line that happens to contain the link gets a 42px line box
   while its neighbours sit at 17px — the uneven spacing this fixes.

   `display: inline` is deliberately NOT attempted: Chrome forces a button to at
   least inline-block, so the box has to be neutralised by height instead. The
   selector carries the toast class for the specificity to beat that :is() list;
   !important because the theme rule is on a broad element selector that would
   otherwise keep winning on later cascade position. */
.evov-toast .evov-toast__action {
  min-height: 0 !important;
  height: auto !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
}

/* Error toasts: the type icon doubles as the close control — click to
   dismiss, dimmed on hover — rather than a separate close button. */
.evov-toast__icon--closable {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.evov-toast__icon--closable:hover,
.evov-toast__icon--closable:focus-visible {
  opacity: 0.65;
}

@media (max-width: 480px) {
  #evov-toast-stack {
    right: 10px;
    left: 10px;
    max-width: none;
  }

  .evov-toast {
    max-width: none;
  }
}