/* public_html/assets/css/base/alerts.css */
/* ServexHub — Unified Alert Modal (Hybrid: Custom Modal + SweetAlert2 fallback)
   - Overlay blur + scroll lock
   - Variants: info/success/warn/danger
   - Buttons: 0 / 1 / 2
   - Responsive + Reduced Motion
   - ✅ NEW: Ring glow around icon edges (safe, no overlay on image)
*/

:root{
  /* Overlay + glass */
  --svx-alert-overlay: rgba(2, 12, 24, .55);
  --svx-alert-blur: 5px;

  /* Sizing */
  --svx-alert-w: min(520px, calc(100vw - 28px));
  --svx-alert-radius: 22px;

  /* Typography */
  --svx-alert-title-size: var(--fs-h3, 20px);
  --svx-alert-text-size: var(--fs-14, 14px);

  /* Card */
  --svx-alert-card: var(--card, #fff);
  --svx-alert-ink: var(--ink, #0f2233);
  --svx-alert-muted: var(--muted, #6b7280);
  --svx-alert-line: var(--line, #e6eefb);
  --svx-alert-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.18));

  /* Brand */
  --svx-alert-brand: var(--brand, #0b5cab);
  --svx-alert-brand-2: var(--brand-2, #146ca5);

  /* States */
  --svx-alert-info: var(--brand, #0b5cab);
  --svx-alert-success: var(--ok, #166534);
  --svx-alert-warn: var(--warn, #b45309);
  --svx-alert-danger: var(--bad, #7a1620);

  /* Icon assets (web paths) */
  --svx-alert-ico-warning: url("/assets/img/ui/warning.svg");
  --svx-alert-ico-check:   url("/assets/img/ui/checkmark.svg");
  --svx-alert-ico-info:    url("/assets/img/ui/info.svg");
}

/* Page lock when modal is open */
body.svx-alert-lock{
  overflow: hidden !important;
  touch-action: none;
}

/* Root container injected by JS */
.svx-alert-root{
  position: fixed;
  inset: 0;
  z-index: 2147480000;
  display: none;
}
.svx-alert-root.is-open{ display: block; }

/* Overlay */
.svx-alert-overlay{
  position: absolute;
  inset: 0;
  background: var(--svx-alert-overlay);

  /* ✅ Real blur */
  backdrop-filter: blur(var(--svx-alert-blur));
  -webkit-backdrop-filter: blur(var(--svx-alert-blur));

  opacity: 0;
  transition: opacity 160ms ease;
}

/* Dialog wrapper to center */
.svx-alert-wrap{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
}

/* Card */
.svx-alert{
  width: var(--svx-alert-w);
  background: var(--svx-alert-card);
  border-radius: var(--svx-alert-radius);
  box-shadow: var(--svx-alert-shadow);
  overflow: hidden;
  border: 1px solid rgba(15, 34, 51, .08);

  transform: translateY(12px) scale(.985);
  opacity: 0;
  transition: transform 190ms ease, opacity 190ms ease;
  position: relative;
  direction: rtl;

  /* ✅ Accent (defaults to info) */
  --svx-alert-accent: var(--svx-alert-info);
}

.svx-alert[data-variant="info"]   { --svx-alert-accent: var(--svx-alert-info); }
.svx-alert[data-variant="success"]{ --svx-alert-accent: var(--svx-alert-success); }
.svx-alert[data-variant="warn"]   { --svx-alert-accent: var(--svx-alert-warn); }
.svx-alert[data-variant="danger"] { --svx-alert-accent: var(--svx-alert-danger); }

/* Top gradient header */
.svx-alert-top{
  position: relative;
  padding: 18px 18px 12px;
  background:
    radial-gradient(900px 220px at 50% -10%, rgba(255,255,255,.85), rgba(255,255,255,.55) 55%, rgba(255,255,255,.08) 100%),
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,0));
}

.svx-alert-top::before{
  content:"";
  position:absolute;
  inset: 0;
  opacity: .92;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0));
}

/* Subtle wash based on variant */
.svx-alert-badgeglow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background: linear-gradient(180deg, rgba(11,92,171,.0), rgba(11,92,171,.35));
}

.svx-alert[data-variant="info"]   .svx-alert-badgeglow{ background: linear-gradient(180deg, rgba(11,92,171,.05), rgba(11,92,171,.45)); }
.svx-alert[data-variant="success"].svx-alert-badgeglow{ background: linear-gradient(180deg, rgba(22,101,52,.05), rgba(22,101,52,.45)); }
.svx-alert[data-variant="warn"]   .svx-alert-badgeglow{ background: linear-gradient(180deg, rgba(180,83,9,.05), rgba(180,83,9,.45)); }
.svx-alert[data-variant="danger"] .svx-alert-badgeglow{ background: linear-gradient(180deg, rgba(122,22,32,.05), rgba(122,22,32,.45)); }

/* ==========================
 * ✅ Icon bubble + ring glow on edges
 * ========================== */

@keyframes svxAlertRingPulse {
  0%, 100%{
    opacity: .40;
    transform: scale(1);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--svx-alert-accent) 28%, transparent),
      0 0 20px 6px color-mix(in srgb, var(--svx-alert-accent) 22%, transparent),
      0 0 44px 14px color-mix(in srgb, var(--svx-alert-accent) 16%, transparent);
  }
  50%{
    opacity: .72;
    transform: scale(1.03);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--svx-alert-accent) 38%, transparent),
      0 0 26px 8px color-mix(in srgb, var(--svx-alert-accent) 28%, transparent),
      0 0 56px 18px color-mix(in srgb, var(--svx-alert-accent) 18%, transparent);
  }
}

.svx-alert-icon{
  width: 78px;
  height: 78px;
  border-radius: 999px;
  margin: 14px auto 10px;
  display: grid;
  place-items: center;
  position: relative;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,34,51,.10);

  isolation: isolate;
}

/* ✅ Ring glow around edges (behind icon content, never covers it) */
.svx-alert-icon::after{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 999px;
  z-index: 0;
  pointer-events:none;

  /* Start ring */
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--svx-alert-accent) 28%, transparent),
    0 0 20px 6px color-mix(in srgb, var(--svx-alert-accent) 22%, transparent),
    0 0 44px 14px color-mix(in srgb, var(--svx-alert-accent) 16%, transparent);

  opacity: .45;
  animation: svxAlertRingPulse 2.2s ease-in-out infinite;
}

/* Ensure icon mark always above */
.svx-alert-iconmark{
  width: 30px;
  height: 30px;
  display: block;
  position: relative;
  z-index: 2;
  background: var(--svx-alert-accent);

  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Map icons */
.svx-alert-iconmark[data-icon="warning"]{
  -webkit-mask-image: var(--svx-alert-ico-warning);
          mask-image: var(--svx-alert-ico-warning);
}
.svx-alert-iconmark[data-icon="checkmark"]{
  -webkit-mask-image: var(--svx-alert-ico-check);
          mask-image: var(--svx-alert-ico-check);
}
.svx-alert-iconmark[data-icon="info"]{
  -webkit-mask-image: var(--svx-alert-ico-info);
          mask-image: var(--svx-alert-ico-info);
}

/* ==========================
 * ✅ Content
 * ========================== */

.svx-alert-body{
  padding: 8px 18px 18px;
  text-align: center;
}

.svx-alert-title{
  margin: 6px 0 8px;
  font-family: var(--font-sans, "Cairo", sans-serif);
  font-weight: var(--fw-bold, 700);
  font-size: var(--svx-alert-title-size);
  line-height: var(--lh-title, 1.35);
  color: var(--svx-alert-accent);
}

.svx-alert-divider{
  width: 84px;
  height: 4px;
  border-radius: 99px;
  margin: 0 auto 10px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--svx-alert-accent) 70%, transparent),
    transparent
  );
  opacity: .9;
}

.svx-alert-text{
  margin: 0 auto;
  max-width: 46ch;
  font-family: var(--font-sans, "Cairo", sans-serif);
  font-weight: var(--fw-regular, 400);
  font-size: var(--svx-alert-text-size);
  line-height: var(--lh-body, 1.9);
  overflow-wrap: anywhere;
  color: var(--svx-alert-muted);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .svx-alert-text{
    color: color-mix(in srgb, var(--svx-alert-accent) 55%, var(--svx-alert-muted));
  }
}

/* Footer buttons */
.svx-alert-actions{
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(15,34,51,.08);
  background: rgba(248,251,255,.55);
}

.svx-alert-actions[data-buttons="0"]{ display:none; }
.svx-alert-actions[data-buttons="1"]{ grid-template-columns: 1fr; }

.svx-alert-actions[data-buttons="2"]{ grid-template-columns: 1fr; }
@media (min-width: 520px){
  .svx-alert-actions[data-buttons="2"]{
    grid-template-columns: 1fr 1fr;
  }
}

/* Buttons base */
.svx-alert-btn{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(15,34,51,.10);
  background: #fff;
  color: var(--svx-alert-ink);
  font-family: var(--font-sans, "Cairo", sans-serif);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-14, 14px);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.svx-alert-btn:hover{ transform: translateY(-1px); }
.svx-alert-btn:active{ transform: translateY(0px) scale(.99); }

/* Primary button per variant */
.svx-alert-btn.primary{
  border-color: rgba(0,0,0,0);
  color: #fff;
  box-shadow: 0 10px 22px rgba(11,92,171,.20);
  background: linear-gradient(180deg, var(--svx-alert-brand-2), var(--svx-alert-brand));
}

.svx-alert[data-variant="success"] .svx-alert-btn.primary{
  background: linear-gradient(180deg, #1d7a43, var(--svx-alert-success));
  box-shadow: 0 10px 22px rgba(22,101,52,.20);
}
.svx-alert[data-variant="warn"] .svx-alert-btn.primary{
  background: linear-gradient(180deg, #d97706, var(--svx-alert-warn));
  box-shadow: 0 10px 22px rgba(180,83,9,.18);
}
.svx-alert[data-variant="danger"] .svx-alert-btn.primary{
  background: linear-gradient(180deg, #a11f2a, var(--svx-alert-danger));
  box-shadow: 0 10px 22px rgba(122,22,32,.18);
}

/* Secondary / cancel */
.svx-alert-btn.secondary{
  background: rgba(255,255,255,.85);
}
.svx-alert-btn.secondary:hover{
  background: rgba(255,255,255,1);
  border-color: rgba(15,34,51,.16);
}

/* Open state transitions */
.svx-alert-root.is-open .svx-alert-overlay{ opacity: 1; }
.svx-alert-root.is-open .svx-alert{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Responsive tweaks */
@media (max-width: 360px){
  .svx-alert-title{ font-size: clamp(18px, 3.8vw + 6px, 20px); }
  .svx-alert-btn{ height: 44px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .svx-alert-overlay{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
  }
  .svx-alert,
  .svx-alert-root.is-open .svx-alert{
    transition: none !important;
    transform: none !important;
  }
  .svx-alert-btn{ transition: none !important; }

  .svx-alert-icon::after{
    animation: none !important;
  }
}