/*
 * Nias toast styling.
 *
 * The gooey-toast library ships its own styles in assets/css/vendor/gooey-toast.css;
 * this file holds only what is specific to this plugin - right-to-left, the theme
 * font, a layer above every modal, and the hardening against theme button styles.
 *
 * It lives apart from style.css because the toast is shared: the login modal, the
 * Elementor widget, quick buy, the product survey and the user panel all show
 * messages through it, and style.css is not loaded on all of those pages.
 * nias_login_enqueue_toast() loads this file everywhere the toast is used.
 */

/* ── Toast (gooey-toast) ──────────────────────────────────────────────────────
   The library ships its own styles in assets/css/vendor/gooey-toast.css; only
   what is specific to this plugin is set here: right-to-left, the theme font,
   and a layer above the modal.

   #nias-toast-wrap no longer lays the toasts out itself and is purely the mount
   anchor: the library builds its viewports inside it. */

/* The toast layer must sit above every modal, so the container itself creates a
   stacking context at the highest possible z-index (position + z-index). Anything
   rendered inside it then lands above .nias-modal-box (999,999,999) and
   .nias-success (2,147,483,646), regardless of the library's internal z-index.

   The container has zero size and covers nothing; the library's viewports are
   position: fixed and place themselves against the viewport. transform is
   deliberately none: an element with a transform becomes the containing block
   for fixed descendants, which puts the toasts in the wrong place. */
#nias-toast-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 2147483647;
  transform: none;
  display: block;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none !important;
  /* The container must not swallow clicks; the toasts themselves set pointer-events: auto */
  pointer-events: none;
}

/* Fallback: if a theme overrides the container's position and the stacking
   context above is lost, the viewport carries the highest z-index directly */
#nias-toast-wrap [data-gooey-viewport] {
  z-index: 2147483647;
}

#nias-toast-wrap [data-gooey-toast] {
  direction: rtl;
  text-align: right;
  font-family: inherit;
}

/* The library's default text-transform: capitalize is meaningless for Persian */
#nias-toast-wrap [data-gooey-title] {
  font-family: inherit;
  text-transform: none;
  line-height: 1.6;
}

#nias-toast-wrap [data-gooey-description] {
  font-family: inherit;
  direction: rtl;
  text-align: right;
  line-height: 1.9;
  color: #1f2937;
}

/* ── Neutralizing the theme's default button styles on the toast ──────────────
   A toast's root and its action button are both real <button> elements, so the
   theme's generic rules land on them:

       [type=button], [type=submit], button { display:inline-block; font-weight:400;
       text-align:center; white-space:nowrap; user-select:none; background-color:#fff0;
       font-size:1rem; transition:.3s }

   That does two kinds of damage. First, any property the library does not declare
   is inherited from the theme - worst of all white-space: nowrap, which stretches
   the description onto one endless line. Second, and more importantly, this theme
   even wins properties the library does declare: the computed style on a toast
   root shows width: auto, transition: .3s and -webkit-appearance: button. The
   auto width is fatal, because the library's JavaScript computes the SVG geometry
   from the measured width, and once the button shrink-wraps the body bubble
   detaches from the header.

   So rather than patching case by case, the library's whole base rule is restated
   here behind #nias-toast-wrap (1,1,0) plus !important, to make the result certain.

   Three properties are deliberately left out: transform, opacity and cursor. The
   library changes them per state ([data-ready], [data-exiting],
   [data-state=loading]) and locking them breaks the enter/exit animation. The
   theme does not touch them on <button> either. */
#nias-toast-wrap [data-gooey-toast],
#nias-toast-wrap [data-gooey-toast]:hover,
#nias-toast-wrap [data-gooey-toast]:focus,
#nias-toast-wrap [data-gooey-toast]:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: inherit !important;
}

#nias-toast-wrap [data-gooey-toast] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
  float: none !important;
  position: relative !important;
  /* The crux: with width: auto the SVG geometry becomes meaningless */
  width: min(var(--gooey-width), calc(100vw - 1.5rem)) !important;
  height: var(--_h, var(--gooey-height)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  touch-action: none !important;
  vertical-align: baseline !important;
  /* The theme's transition: .3s means property: all - everything, width and height
     included, animates on the wrong curve. The library's own value is restored. */
  transition:
    opacity calc(var(--gooey-duration) * 0.8) var(--gooey-ease),
    transform calc(var(--gooey-duration) * 0.8) var(--gooey-ease),
    height var(--gooey-duration) var(--gooey-ease) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: right !important;
  /* Without this the toast description does not wrap */
  white-space: normal !important;
}

/* The exit state's overflow: hidden must outrank the overflow: visible above */
#nias-toast-wrap [data-gooey-toast][data-exiting="true"] {
  overflow: hidden !important;
  pointer-events: none !important;
}

/* The description is a <div> and inherits nowrap from the root; closed explicitly here too */
#nias-toast-wrap [data-gooey-description] {
  white-space: normal !important;
  word-break: break-word !important;
}

/* Action button: the library's hover rule (0,1,1) ties with the theme's
   button:hover, so whichever loads later wins - both states are locked here.
   --_tone is left alone so the data-state colour keeps working. */
#nias-toast-wrap [data-gooey-button] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 1.8rem !important;
  min-height: 0 !important;
  margin: 0.75rem 0 0 !important;
  padding: 0 0.65rem !important;
  border: 0 !important;
  border-radius: 9999px !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color 140ms ease !important;
  color: var(--_tone) !important;
  background: color-mix(in oklch, var(--_tone) 15%, transparent) !important;
}

#nias-toast-wrap [data-gooey-button]:hover,
#nias-toast-wrap [data-gooey-button]:focus,
#nias-toast-wrap [data-gooey-button]:active {
  color: var(--_tone) !important;
  background: color-mix(in oklch, var(--_tone) 25%, transparent) !important;
}