/* ============================================================
   GOLAZO — notify-restock.css · animated "notify when back" panel
   Replaces the flat .notify block on OOS product pages.
   Drop-in: pairs with notify-restock.js. Both themes.
   Motion respects prefers-reduced-motion (static, still pretty).
   ============================================================ */
.nrx{position:relative;overflow:hidden;border-radius:var(--radius-lg,24px);
  padding:26px 24px;isolation:isolate;color:#fff;
  background:linear-gradient(140deg,#0A7A46 0%,#086038 45%,#06351F 100%);
  border:1px solid rgba(230,184,60,.45);
  box-shadow:0 22px 56px -20px rgba(8,72,42,.65), 0 0 0 1px rgba(8,96,56,.4), inset 0 1px 1px rgba(255,255,255,.18)}
html[data-theme="dark"] .nrx{background:linear-gradient(140deg,#0A7A46 0%,#075233 50%,#04281A 100%);
  border-color:rgba(230,184,60,.5);box-shadow:0 22px 56px -20px rgba(0,0,0,.7), inset 0 1px 1px rgba(122,210,165,.2)}

/* breathing aura behind everything */
.nrx::before{content:"";position:absolute;z-index:-1;left:-12%;top:-65%;width:66%;padding-top:66%;
  border-radius:50%;background:radial-gradient(circle,rgba(230,184,60,.7),rgba(230,184,60,.15) 45%,transparent 68%);
  filter:blur(6px);mix-blend-mode:screen;animation:nrxBreathe 5s ease-in-out infinite}
.nrx::after{content:"";position:absolute;z-index:-1;right:-16%;bottom:-72%;width:70%;padding-top:70%;
  border-radius:50%;background:radial-gradient(circle,rgba(122,210,165,.55),transparent 66%);
  filter:blur(6px);mix-blend-mode:screen;animation:nrxBreathe 6.5s ease-in-out infinite reverse}
@keyframes nrxBreathe{0%,100%{transform:translate(0,0) scale(1);opacity:.8}50%{transform:translate(6%,4%) scale(1.12);opacity:1}}

.nrx__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}

/* bell with radar rings + gentle swing */
.nrx__bell{position:relative;width:54px;height:54px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#F4D06B,#E6B83C);box-shadow:0 10px 24px -6px rgba(230,184,60,.7), inset 0 2px 2px rgba(255,255,255,.5)}
.nrx__bell svg{width:25px;height:25px;stroke:#06351F;transform-origin:50% 12%;animation:nrxRing 4s ease-in-out infinite}
@keyframes nrxRing{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(13deg)}80%{transform:rotate(-11deg)}84%{transform:rotate(8deg)}88%{transform:rotate(-5deg)}92%{transform:rotate(2deg)}}
.nrx__bell i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(230,184,60,.75);animation:nrxRadar 3s ease-out infinite}
.nrx__bell i:nth-child(2){animation-delay:1.5s}
@keyframes nrxRadar{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}

.nrx__titles b{display:block;font-family:var(--font-ka);font-weight:700;font-size:17px;color:#fff}
.nrx__titles span{display:block;font-size:13px;color:rgba(247,249,246,.82);margin-top:2px}

/* form */
.nrx__form{display:flex;gap:10px}
.nrx__form input{flex:1;min-width:0;height:48px;border-radius:14px;border:1.5px solid rgba(255,255,255,.55);
  padding:0 16px;font-family:var(--font-ka);font-size:14.5px;background:rgba(255,255,255,.95);color:#141414}
.nrx__form input::placeholder{color:#5C5C5C}
.nrx__form input:focus-visible{outline:3px solid #E6B83C;outline-offset:2px}
.nrx .nrx__btn{flex:0 0 auto;height:48px;padding:0 22px;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(145deg,#F4D06B,#E6B83C)!important;color:#06351F!important;border:none!important;
  font-weight:700;box-shadow:0 8px 20px -6px rgba(230,184,60,.7)}
.nrx .nrx__btn:hover{filter:brightness(1.05)}
.nrx__btn svg{width:17px;height:17px;stroke:#06351F}
.nrx__ferr{display:none;color:#FFE0D9;font-size:12.5px;margin-top:8px;font-weight:600}
.nrx.invalid .nrx__ferr{display:block}
.nrx.invalid .nrx__form input{border-color:#FFD2C9;border-width:2px}

/* progress / scarcity hint line */
.nrx__hint{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(247,249,246,.85)}
.nrx__hint svg{width:15px;height:15px;color:#F4D06B;flex:0 0 auto}
.nrx__hint b{color:#F4D06B}

/* ---- SUCCESS state ---- */
.nrx.done .nrx__form,.nrx.done .nrx__hint{display:none}
.nrx__ok{display:none;text-align:center;padding:6px 0 2px}
.nrx.done .nrx__ok{display:block;animation:nrxIn .5s ease-out}
@keyframes nrxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nrx__okdisc{width:66px;height:66px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#F4D06B,#E6B83C);box-shadow:0 12px 30px -8px rgba(230,184,60,.75)}
.nrx__okdisc svg{width:32px;height:32px;stroke:#06351F;stroke-dasharray:28;stroke-dashoffset:28}
.nrx.done .nrx__okdisc svg{animation:nrxDraw .55s .15s ease-out forwards}
@keyframes nrxDraw{to{stroke-dashoffset:0}}
.nrx__ok b{font-family:var(--font-ka);font-size:18px;display:block;color:#fff}
.nrx__ok span{font-size:13px;color:rgba(247,249,246,.82);display:block;margin-top:4px}
.nrx__okmail{font-weight:700;color:#F4D06B}

@media (max-width:560px){.nrx__form{flex-wrap:wrap}.nrx__form input{flex:1 1 100%}.nrx__btn{flex:1 1 100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){
  .nrx::before,.nrx::after,.nrx__bell svg,.nrx__bell i{animation:none}
  .nrx__okdisc svg{animation:none;stroke-dashoffset:0}
  .nrx.done .nrx__ok{animation:none}
}

/* v1.39.0: wishlist heart kept beside the panel on OOS PDPs (Golazo — sold-out interest feeds accounts) */
.nrx-wishrow{display:flex;justify-content:flex-end;margin-top:12px}
.nrx-wishrow .btn--icon{width:46px;height:46px}