/*
 * Notify Me — storefront styles.
 *
 * Split deliberately:
 *
 *   The CTA and submit BUTTONS carry no appearance rules here. They wear the
 *   theme's own `.button` / `.wp-element-button` classes, so the theme supplies
 *   colour, radius, font and hover. Styling them here would mean competing with
 *   every theme on specificity and losing on most.
 *
 *   The MODAL is ours. No theme provides one, so it needs a complete, neutral
 *   skin — but it inherits font-family and colour from the page so it still
 *   reads as part of the site.
 */

.stocksignal-notify { margin: 1.25em 0; }
.stocksignal-notify [hidden] { display: none !important; }

/* ------------------------------------------------------------------- modal */
.stocksignal-notify__modal {
  position: fixed;
  inset: 0;
  z-index: 999999;          /* above sticky headers and cart drawers */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.stocksignal-notify__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 20, .55);
  animation: ss-fade .18s ease-out;
}

.stocksignal-notify__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 32px 28px 28px;
  border-radius: 14px;
  background: #fff;
  color: #16161a;
  font-family: inherit;     /* the site's typeface, not ours */
  box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
  animation: ss-rise .22s cubic-bezier(.16, 1, .3, 1);
  text-align: left;
}

@keyframes ss-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ss-rise { from { opacity: 0; transform: translateY(12px) scale(.98) } to { opacity: 1; transform: none } }

.stocksignal-notify__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  color: #6b6b76;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.stocksignal-notify__close:hover { background: rgba(0, 0, 0, .06); color: #16161a; }
.stocksignal-notify__close svg { width: 18px; height: 18px; }

.stocksignal-notify__heading {
  margin: 0 0 8px;
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
}

.stocksignal-notify__lede {
  margin: 0 0 20px;
  font-size: .92em;
  line-height: 1.55;
  color: #52525e;
}

/* ------------------------------------------------------------------- form */
.stocksignal-notify__form { margin: 0; }

.stocksignal-notify__email {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #d8d8e0;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: .95em;
}
.stocksignal-notify__email:focus {
  outline: none;
  border-color: #8b89ea;
  box-shadow: 0 0 0 3px rgba(94, 92, 230, .18);
}

.stocksignal-notify__consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  font-size: .85em;
  line-height: 1.5;
  color: #52525e;
  cursor: pointer;
}
.stocksignal-notify__consent input { margin: 2px 0 0; flex: none; }

.stocksignal-notify__submit { width: 100%; cursor: pointer; }
.stocksignal-notify__dialog button[disabled] { opacity: .6; cursor: default; }

.stocksignal-notify__msg:empty { display: none; }
.stocksignal-notify__msg {
  margin: 12px 0 0;
  font-size: .85em;
  line-height: 1.45;
}
.stocksignal-notify__msg[data-state="error"]   { color: #b3261e; }
.stocksignal-notify__msg[data-state="success"] { color: #1b6b3a; }

/* Off-screen rather than display:none — bots read the DOM, not the pixels. */
.stocksignal-notify__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------- confirmation */
.stocksignal-notify__done { text-align: center; }
.stocksignal-notify__celebrate {
  position: relative;
  width: 96px; height: 96px;
  margin: 4px auto 18px;
}
.stocksignal-notify__product {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}
.stocksignal-notify__tick {
  position: absolute; right: -10px; bottom: -10px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1f9d55;
  color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(31, 157, 85, .35);
}
.stocksignal-notify__celebrate:not(:has(img)) .stocksignal-notify__tick {
  position: static; margin: 20px auto 0; width: 56px; height: 56px;
}
.stocksignal-notify__tick svg { width: 22px; height: 22px; }
.stocksignal-notify__confetti {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 11px;
  border-radius: 2px;
  opacity: 0;
  background: hsl(calc(var(--i) * 36deg) 80% 60%);
}
.stocksignal-notify__place {
  display: inline-block;
  margin: -4px 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(31, 157, 85, .12);
  color: #17803d;
  font-size: .85em;
  font-weight: 600;
}
.stocksignal-notify__done .stocksignal-notify__lede { margin-bottom: 20px; }

.is-live .stocksignal-notify__product { animation: ss-rise 420ms cubic-bezier(.32, .72, 0, 1) both; }
.is-live .stocksignal-notify__tick { animation: ss-pop 520ms cubic-bezier(.34, 1.56, .64, 1) 180ms both; }
.is-live .stocksignal-notify__tick svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: ss-draw 360ms ease-out 480ms forwards; }
.is-live .stocksignal-notify__confetti { animation: ss-burst 900ms cubic-bezier(.2, .7, .3, 1) 260ms both; }
.is-live .stocksignal-notify__heading,
.is-live .stocksignal-notify__place,
.is-live .stocksignal-notify__lede { animation: ss-rise 420ms cubic-bezier(.32, .72, 0, 1) 200ms both; }

@keyframes ss-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ss-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ss-draw { to { stroke-dashoffset: 0; } }
@keyframes ss-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0) translateY(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--i) * 36deg)) translateY(-78px) rotate(200deg); }
}

/* On the page, once they've joined. */
.stocksignal-notify.is-joined [data-ss-open] { opacity: .8; }

/* Applied by notify.js only when the theme clearly did not style the button. */
.stocksignal-notify--unstyled .stocksignal-notify__button {
  display: inline-block;
  padding: .8em 1.4em;
  border: 0;
  border-radius: 8px;
  background: #16161a;
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .stocksignal-notify__backdrop,
  .stocksignal-notify__dialog,
  .is-live .stocksignal-notify__product,
  .is-live .stocksignal-notify__tick,
  .is-live .stocksignal-notify__heading,
  .is-live .stocksignal-notify__place,
  .is-live .stocksignal-notify__lede { animation: none; }
  .is-live .stocksignal-notify__confetti { display: none; }
  .is-live .stocksignal-notify__tick svg path { animation: none; stroke-dashoffset: 0; }
}

.stocksignal-notify__fine { margin: 10px 0 0; font-size: .8em; opacity: .7; text-align: center; }