/**
 * forge-alerts — plugin frontend stylesheet.
 *
 * Minimal, unopinionated styles for the subscription modal, OOS button, and
 * My Account Alerts tab. All colours are defined as CSS custom properties so
 * themes can override them without specificity fights.
 *
 * Customisation:
 *   Override any --forge-alerts-* variable on :root or a scoped selector to
 *   restyle without touching this file. Example:
 *
 *     :root {
 *       --forge-alerts-accent: #ff6b35;
 *       --forge-alerts-btn-bg: #ff6b35;
 *     }
 *
 * This file ships NO BST tactical palette colours. Neutral defaults only.
 *
 * @package Ragnarok\ForgeAlerts
 */

/* ── Design tokens (CSS custom properties) ────────────────────────────────── */
:root {
  /* Surface */
  --forge-alerts-bg:           #ffffff;
  --forge-alerts-bg-subtle:    #f7f7f7;
  --forge-alerts-border:       #e0e0e0;
  --forge-alerts-radius:       8px;

  /* Text */
  --forge-alerts-text:         #1a1a1a;
  --forge-alerts-text-muted:   #666666;
  --forge-alerts-text-faint:   #999999;

  /* Accent — primary action colour */
  --forge-alerts-accent:       #0073aa;
  --forge-alerts-accent-hover: #005f8d;
  --forge-alerts-accent-text:  #ffffff;

  /* Danger / error */
  --forge-alerts-error-text:   #c0392b;
  --forge-alerts-error-bg:     rgba(192, 57, 43, 0.06);

  /* Success */
  --forge-alerts-success-text: #1e7e34;

  /* Backdrop */
  --forge-alerts-backdrop-bg:  rgba(0, 0, 0, 0.55);

  /* Transition */
  --forge-alerts-transition:   180ms ease;
}

/* ── OOS button ───────────────────────────────────────────────────────────── */
.forge-alerts-oos-wrap {
  width: 100%;
  margin-top: 0.75rem;
}

.forge-alerts-oos-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: transparent;
  color: var(--forge-alerts-accent);
  border: 1.5px solid var(--forge-alerts-accent);
  border-radius: var(--forge-alerts-radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--forge-alerts-transition),
              color var(--forge-alerts-transition);
  line-height: 1.4;
}
.forge-alerts-oos-btn:hover,
.forge-alerts-oos-btn:focus-visible {
  background: var(--forge-alerts-accent);
  color: var(--forge-alerts-accent-text);
  outline: 2px solid var(--forge-alerts-accent);
  outline-offset: 2px;
}
.forge-alerts-oos-btn:focus-visible {
  outline-offset: 3px;
}

.forge-alerts-bell-icon {
  flex-shrink: 0;
}

/* ── Backdrop ─────────────────────────────────────────────────────────────── */
.forge-alerts-backdrop {
  position: fixed;
  inset: 0;
  background: var(--forge-alerts-backdrop-bg);
  z-index: 9998;
  cursor: pointer;
}

/* ── Modal shell ──────────────────────────────────────────────────────────── */
.forge-alerts-modal,
.forge-alerts-confirm {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.forge-alerts-modal[hidden],
.forge-alerts-confirm[hidden] {
  display: none;
}
/* Closing animation — JS adds this class then sets hidden after 180ms */
.forge-alerts-modal--closing {
  opacity: 0;
  transition: opacity var(--forge-alerts-transition);
}

/* Prevent body scroll when modal is open */
body.forge-alerts-modal-open {
  overflow: hidden;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.forge-alerts-card {
  position: relative;
  z-index: 10000;
  background: var(--forge-alerts-bg);
  border-radius: var(--forge-alerts-radius);
  padding: 1.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}
.forge-alerts-card--sm {
  max-width: 340px;
}

/* ── Close button ─────────────────────────────────────────────────────────── */
.forge-alerts-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--forge-alerts-text-muted);
  transition: color var(--forge-alerts-transition);
  padding: 0;
  line-height: 1;
}
.forge-alerts-close:hover,
.forge-alerts-close:focus-visible {
  color: var(--forge-alerts-text);
  outline: 2px solid var(--forge-alerts-accent);
  outline-offset: 2px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.forge-alerts-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-right: 2rem; /* space for close button */
}
.forge-alerts-bell-icon {
  flex-shrink: 0;
  color: var(--forge-alerts-accent);
  margin-top: 2px;
}
.forge-alerts-title-group {
  flex: 1;
  min-width: 0;
}
.forge-alerts-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--forge-alerts-text);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.forge-alerts-subtitle {
  font-size: 0.8125rem;
  color: var(--forge-alerts-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Product preview ──────────────────────────────────────────────────────── */
.forge-alerts-preview {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--forge-alerts-bg-subtle);
  border-radius: calc( var(--forge-alerts-radius) - 2px );
  margin-bottom: 1rem;
}
.forge-alerts-preview[hidden] {
  display: none;
}
.forge-alerts-preview-thumb img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 4px;
}
.forge-alerts-preview-placeholder {
  width: 48px;
  height: 48px;
  background: var(--forge-alerts-border);
  border-radius: 4px;
}
.forge-alerts-preview-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--forge-alerts-text);
  line-height: 1.3;
}
.forge-alerts-preview-price {
  font-size: 0.8125rem;
  color: var(--forge-alerts-text-muted);
  margin-top: 2px;
}

/* ── Sep ──────────────────────────────────────────────────────────────────── */
.forge-alerts-sep {
  height: 1px;
  background: var(--forge-alerts-border);
  margin: 0 0 1rem;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.forge-alerts-field {
  margin-bottom: 0.75rem;
}
.forge-alerts-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--forge-alerts-text);
  margin-bottom: 0.375rem;
}
.forge-alerts-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  border: 1.5px solid var(--forge-alerts-border);
  border-radius: calc( var(--forge-alerts-radius) - 2px );
  background: var(--forge-alerts-bg);
  color: var(--forge-alerts-text);
  box-sizing: border-box;
  transition: border-color var(--forge-alerts-transition);
  line-height: 1.5;
}
.forge-alerts-input:focus {
  outline: none;
  border-color: var(--forge-alerts-accent);
  box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

/* ── Error ────────────────────────────────────────────────────────────────── */
.forge-alerts-error {
  font-size: 0.8125rem;
  color: var(--forge-alerts-error-text);
  background: var(--forge-alerts-error-bg);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.forge-alerts-error[hidden] {
  display: none;
}

/* ── Submit ───────────────────────────────────────────────────────────────── */
.forge-alerts-submit-wrap {
  margin-top: 0.75rem;
}
.forge-alerts-submit {
  display: block;
  width: 100%;
  padding: 0.625rem 1.25rem;
  background: var(--forge-alerts-accent);
  color: var(--forge-alerts-accent-text);
  border: none;
  border-radius: var(--forge-alerts-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--forge-alerts-transition);
  line-height: 1.4;
}
.forge-alerts-submit:hover,
.forge-alerts-submit:focus-visible {
  background: var(--forge-alerts-accent-hover);
  outline: 2px solid var(--forge-alerts-accent);
  outline-offset: 2px;
}
.forge-alerts-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Loading state ────────────────────────────────────────────────────────── */
.forge-alerts-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 0;
  color: var(--forge-alerts-text-muted);
  font-size: 0.9375rem;
}
.forge-alerts-loading[hidden] {
  display: none;
}
.forge-alerts-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--forge-alerts-border);
  border-top-color: var(--forge-alerts-accent);
  border-radius: 50%;
  animation: forge-alerts-spin 0.7s linear infinite;
}
@keyframes forge-alerts-spin {
  to { transform: rotate(360deg); }
}

/* ── Success state ────────────────────────────────────────────────────────── */
.forge-alerts-success {
  text-align: center;
  padding: 0.5rem 0;
}
.forge-alerts-success[hidden] {
  display: none;
}
.forge-alerts-success-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(30, 126, 52, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  color: var(--forge-alerts-success-text);
}
.forge-alerts-success-msg {
  font-size: 1rem;
  font-weight: 700;
  color: var(--forge-alerts-text);
  margin: 0 0 0.375rem;
}
.forge-alerts-success-sub {
  font-size: 0.8125rem;
  color: var(--forge-alerts-text-muted);
  margin: 0 0 1rem;
  line-height: 1.4;
}
.forge-alerts-done {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: var(--forge-alerts-bg-subtle);
  border: 1.5px solid var(--forge-alerts-border);
  border-radius: var(--forge-alerts-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--forge-alerts-text);
  cursor: pointer;
  transition: background var(--forge-alerts-transition);
}
.forge-alerts-done:hover,
.forge-alerts-done:focus-visible {
  background: var(--forge-alerts-border);
  outline: 2px solid var(--forge-alerts-accent);
  outline-offset: 2px;
}

/* ── Confirm panel ────────────────────────────────────────────────────────── */
.forge-alerts-confirm-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--forge-alerts-text);
  margin: 0 0 0.5rem;
  padding-right: 2rem;
}
.forge-alerts-confirm-sub {
  font-size: 0.8125rem;
  color: var(--forge-alerts-text-muted);
  margin: 0 0 1rem;
  line-height: 1.4;
}
.forge-alerts-confirm-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.forge-alerts-confirm-cancel,
.forge-alerts-confirm-ok {
  padding: 0.5rem 1rem;
  border-radius: calc( var(--forge-alerts-radius) - 2px );
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--forge-alerts-transition);
}
.forge-alerts-confirm-cancel {
  background: var(--forge-alerts-bg-subtle);
  border: 1.5px solid var(--forge-alerts-border);
  color: var(--forge-alerts-text);
}
.forge-alerts-confirm-cancel:hover {
  background: var(--forge-alerts-border);
}
.forge-alerts-confirm-ok {
  background: var(--forge-alerts-accent);
  border: 1.5px solid var(--forge-alerts-accent);
  color: var(--forge-alerts-accent-text);
}
.forge-alerts-confirm-ok:hover {
  background: var(--forge-alerts-accent-hover);
}
.forge-alerts-confirm-cancel:focus-visible,
.forge-alerts-confirm-ok:focus-visible {
  outline: 2px solid var(--forge-alerts-accent);
  outline-offset: 2px;
}

/* ── Account tab container ────────────────────────────────────────────────── */
.forge-alerts-account-tab {
  padding: 0;
}
.forge-alerts-tab-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--forge-alerts-text);
  margin: 0 0 0.375rem;
}
.forge-alerts-tab-lead {
  font-size: 0.9375rem;
  color: var(--forge-alerts-text-muted);
  margin: 0 0 1.25rem;
}

/* ── Watchlist list ───────────────────────────────────────────────────────── */
.forge-alerts-wl-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.forge-alerts-wl-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--forge-alerts-border);
}
.forge-alerts-wl-row:last-child {
  border-bottom: none;
}
.forge-alerts-wl-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.forge-alerts-wl-img--placeholder {
  background: var(--forge-alerts-border);
  border-radius: 4px;
}
.forge-alerts-wl-row-body {
  flex: 1;
  min-width: 0;
}
.forge-alerts-wl-row-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--forge-alerts-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}
.forge-alerts-wl-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.forge-alerts-wl-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.forge-alerts-wl-badge--pd {
  background: rgba(0, 115, 170, 0.1);
  color: var(--forge-alerts-accent);
}
.forge-alerts-wl-badge--bis {
  background: rgba(30, 126, 52, 0.1);
  color: var(--forge-alerts-success-text);
}
.forge-alerts-wl-thresh {
  font-size: 0.8125rem;
  color: var(--forge-alerts-text-muted);
}
.forge-alerts-wl-price {
  font-size: 0.875rem;
  color: var(--forge-alerts-text);
  font-weight: 600;
}
.forge-alerts-wl-date {
  font-size: 0.75rem;
  color: var(--forge-alerts-text-faint);
}
.forge-alerts-wl-stock-live {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--forge-alerts-success-text);
  background: rgba(30, 126, 52, 0.08);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Remove button */
.forge-alerts-wl-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--forge-alerts-text-faint);
  transition: color var(--forge-alerts-transition);
  padding: 0;
}
.forge-alerts-wl-remove:hover,
.forge-alerts-wl-remove:focus-visible {
  color: var(--forge-alerts-error-text);
  outline: 2px solid var(--forge-alerts-error-text);
  outline-offset: 2px;
}

/* ── Skeleton loader ──────────────────────────────────────────────────────── */
.forge-alerts-wl-loading {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.forge-alerts-wl-skel {
  height: 72px;
  border-bottom: 1px solid var(--forge-alerts-border);
  background: linear-gradient(
    90deg,
    var(--forge-alerts-bg-subtle) 25%,
    var(--forge-alerts-border)    50%,
    var(--forge-alerts-bg-subtle) 75%
  );
  background-size: 200% 100%;
  animation: forge-alerts-skel-sweep 1.2s ease infinite;
}
@keyframes forge-alerts-skel-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.forge-alerts-wl-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--forge-alerts-text-muted);
}
.forge-alerts-wl-empty-ico {
  display: block;
  margin: 0 auto 1rem;
  opacity: 0.4;
}
.forge-alerts-wl-empty-msg {
  font-size: 1rem;
  font-weight: 700;
  color: var(--forge-alerts-text);
  margin: 0 0 0.375rem;
}
.forge-alerts-wl-empty-sub {
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

/* Generic plugin button (used in error/empty states) */
.forge-alerts-btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: calc( var(--forge-alerts-radius) - 2px );
  cursor: pointer;
  transition: background var(--forge-alerts-transition);
}
.forge-alerts-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--forge-alerts-border);
  color: var(--forge-alerts-text);
}
.forge-alerts-btn--ghost:hover {
  background: var(--forge-alerts-bg-subtle);
}
.forge-alerts-btn--sm {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
}

/* ── Accessibility: reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .forge-alerts-spinner,
  .forge-alerts-wl-skel {
    animation: none;
  }
  .forge-alerts-modal--closing {
    transition: none;
  }
}