/**
 * notify-me.css
 *
 * "مطلع شدن از موجود شدن کالا" (back-in-stock notify) button + success
 * modal, single product page.
 *
 * Depends on dnd-tokens.css custom properties (--dnd-primary,
 * --dnd-radius-md, etc) — enqueue this with ['dnd-tokens'] as a
 * dependency, same as wishlist.css / auth-modal.css.
 *
 * The modal structure follows the DNDModalBase markup contract, same
 * pattern as .dnd-review-modal in single-product-reviews.css.
 */

/* ------------------------------------------------------------------ */
/* Button                                                              */
/* ------------------------------------------------------------------ */

.notify-me-row {
  width: 100%;
}

.btn-notify-me {
  position: relative;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--dnd-radius-md);
  background: var(--dnd-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.btn-notify-me:hover {
  background: var(--dnd-primary-dark);
}

/* Already on the waiting list — mirrors the wishlist "is-active" idea:
   a quiet outline state so it's obvious this product is already
   tracked, without looking like a disabled/error state. */
.btn-notify-me.is-active {
  background: var(--dnd-primary-soft);
  color: var(--dnd-primary-dark);
  border-color: var(--dnd-primary);
}

.btn-notify-me.is-active:hover {
  background: var(--dnd-primary-soft);
}

.btn-notify-me.is-loading {
  pointer-events: none;
}

.btn-notify-me.is-loading .btn-text,
.btn-notify-me.is-loading svg {
  visibility: hidden;
}

.btn-notify-me .btn-spinner {
  display: none;
}

.btn-notify-me.is-loading .btn-spinner {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: dandiran-spin 0.6s linear infinite;
}

.btn-notify-me.is-active.is-loading .btn-spinner {
  border-color: rgba(22, 163, 74, 0.25);
  border-top-color: var(--dnd-primary);
}

@keyframes dandiran-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------------ */
/* Toast (mirrors .wishlist-toast in wishlist.css)                     */
/* ------------------------------------------------------------------ */

.notify-me-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--dnd-text);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--dnd-radius-pill);
  font-size: 13px;
  max-width: 90vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 10000;
}

.notify-me-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------------ */
/* Success modal — centered dialog (DNDModalBase contract)             */
/* ------------------------------------------------------------------ */

.dnd-notify-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.dnd-notify-modal[hidden] {
  display: none;
}

.dnd-notify-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 30, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.dnd-notify-modal.is-active .dnd-notify-modal__overlay {
  opacity: 1;
}

.dnd-notify-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--dnd-white);
  border-radius: var(--dnd-radius-lg);
  padding: 36px 24px 24px;
  text-align: center;
  transform: translateY(16px);
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  direction: rtl;
}

.dnd-notify-modal.is-active .dnd-notify-modal__dialog {
  transform: translateY(0);
  opacity: 1;
}

.dnd-notify-modal__close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--dnd-bg-soft);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--dnd-muted);
  cursor: pointer;
}

.dnd-notify-modal__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.dnd-notify-modal__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--dnd-text);
  margin: 0 0 8px;
}

.dnd-notify-modal__subtitle {
  font-size: 13px;
  color: var(--dnd-muted);
  margin: 0 0 26px;
}

.dnd-notify-modal__cta {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--dnd-radius-md);
  background: var(--dnd-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dnd-notify-modal__cta:hover {
  background: var(--dnd-primary-dark);
}

body.dnd-modal-open {
  overflow: hidden;
}