/* GymCrush – Frosted Pill Notifications */

/* ═══════════════════════════════════════════════
   SUPPRESS LOVEDATE / TOASTIFY NATIVE NOTIFICATIONS
═══════════════════════════════════════════════ */
/* Toastify — used by LoveDate theme */
.toastify,
.toastify.on,
div[class*="toastify"],
/* LoveDate / PeepSo */
.ld-notification,
.lovedate-notification,
.lovedate-notice,
.alert-message,
[data-notification],
.theme-notification,
.ld-alert,
.ld_notification,
.peepso-notification-bar,
#ld-notification,
#lovedate-notification,
.notification-bar:not(#gcn-stage),
.notif-bar:not(#gcn-stage) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

:root {
  --gcn-success: #0ecf8e;
  --gcn-error:   #ff4d6d;
  --gcn-warning: #ffb703;
  --gcn-info:    #4cc9f0;
}

/* ── Fireworks canvas ─────────────────────────────────────── */
#gcn-fw-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999998;
  width: 100%; height: 100%;
}

/* ── Container ────────────────────────────────────────────── */
#gcn-stage {
  position: fixed;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  /* prevent stage from being wider than viewport */
  max-width: 100vw;
  box-sizing: border-box;
}

/* positions */
#gcn-stage.pos-top-left     { top: 20px;    left: 16px;  align-items: flex-start; }
#gcn-stage.pos-top-center   { top: 20px;    left: 50%;   transform: translateX(-50%); }
#gcn-stage.pos-top-right    { top: 20px;    right: 16px; align-items: flex-end; }
#gcn-stage.pos-bottom-left  { bottom: 24px; left: 16px;  align-items: flex-start; }
#gcn-stage.pos-bottom-center{ bottom: 24px; left: 50%;   transform: translateX(-50%); }
#gcn-stage.pos-bottom-right { bottom: 24px; right: 16px; align-items: flex-end; }

/* ── Frosted Pill ─────────────────────────────────────────── */
.gcn-notif {
  pointer-events: all;
  position: relative;
  display: inline-flex;
  flex-direction: row;        /* always horizontal */
  align-items: center;
  flex-wrap: nowrap;          /* icon + text + close on one line */
  gap: 10px;
  padding: 14px 20px 14px 16px;
  border-radius: 100px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 8px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.1);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  /* NO white-space:nowrap — let text wrap inside the pill */
  white-space: normal;
  word-break: break-word;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: visible;
  animation: gcn-pill-in .6s cubic-bezier(.34,1.56,.64,1) both;
  /* Max width: never overflow the viewport */
  max-width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
}

@keyframes gcn-pill-in {
  0%   { opacity: 0; transform: scale(.5) translateY(-20px); filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.gcn-notif.gcn-hiding {
  animation: gcn-pill-out .4s ease forwards !important;
  pointer-events: none;
}
@keyframes gcn-pill-out {
  to { opacity: 0; transform: scale(.8) translateY(-10px); filter: blur(3px); }
}

/* type glow border */
.gcn-notif.success { border-color: rgba(14,207,142,.45);  box-shadow: 0 8px 40px rgba(14,207,142,.22), inset 0 1px 0 rgba(255,255,255,.2); }
.gcn-notif.error   { border-color: rgba(255,77,109,.45);  box-shadow: 0 8px 40px rgba(255,77,109,.22), inset 0 1px 0 rgba(255,255,255,.2); }
.gcn-notif.warning { border-color: rgba(255,183,3,.45);   box-shadow: 0 8px 40px rgba(255,183,3,.22),  inset 0 1px 0 rgba(255,255,255,.2); }
.gcn-notif.info    { border-color: rgba(76,201,240,.45);  box-shadow: 0 8px 40px rgba(76,201,240,.22), inset 0 1px 0 rgba(255,255,255,.2); }

/* ── Icon ─────────────────────────────────────────────────── */
.gcn-icon {
  flex-shrink: 0;           /* icon never squishes */
  flex-grow: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  animation: gcn-icon-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes gcn-icon-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.gcn-icon svg {
  width: 22px; height: 22px;
  display: block;
  filter: drop-shadow(0 0 5px currentColor);
  animation: gcn-icon-glow 2.4s ease infinite;
}
@keyframes gcn-icon-glow {
  0%,100% { filter: drop-shadow(0 0 4px currentColor); }
  50%     { filter: drop-shadow(0 0 9px currentColor); }
}
.gcn-notif.success .gcn-icon { color: var(--gcn-success); }
.gcn-notif.error   .gcn-icon { color: var(--gcn-error); }
.gcn-notif.warning .gcn-icon { color: var(--gcn-warning); }
.gcn-notif.info    .gcn-icon { color: var(--gcn-info); }

/* ── Shimmer ──────────────────────────────────────────────── */
.gcn-notif::before {
  content: '';
  position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  border-radius: inherit;
  animation: gcn-shimmer 2.4s ease .5s infinite;
  pointer-events: none;
}
@keyframes gcn-shimmer {
  0%       { left: -80%; }
  55%,100% { left: 130%; }
}

/* ── Text ─────────────────────────────────────────────────── */
.gcn-text {
  flex: 1 1 0;          /* grow to fill, shrink if needed */
  min-width: 0;         /* allows text to wrap inside flex */
  line-height: 1.4;
}

/* ── Close ────────────────────────────────────────────────── */
.gcn-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.4); font-size: 17px; line-height: 1;
  padding: 0 2px; margin-left: 4px;
  transition: color .15s, transform .15s;
  font-family: inherit;
}
.gcn-close:hover { color: rgba(255,255,255,.9); transform: scale(1.2); }

/* ── Progress ─────────────────────────────────────────────── */
.gcn-progress {
  position: absolute; bottom: -5px; left: 16px; right: 16px;
  height: 3px; border-radius: 10px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.gcn-progress-fill {
  height: 100%; border-radius: 10px;
  animation: gcn-prog linear forwards;
}
.gcn-notif.success .gcn-progress-fill { background: var(--gcn-success); }
.gcn-notif.error   .gcn-progress-fill { background: var(--gcn-error); }
.gcn-notif.warning .gcn-progress-fill { background: var(--gcn-warning); }
.gcn-notif.info    .gcn-progress-fill { background: var(--gcn-info); }
@keyframes gcn-prog {
  from { width: 100%; }
  to   { width: 0; }
}

/* ── DOM Spark ────────────────────────────────────────────── */
.gcn-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: gcn-spark-fly var(--dur,.8s) ease-out var(--delay,0s) both;
}
@keyframes gcn-spark-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx,0),var(--ty,0)) scale(0); }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Stage: full-width centered, safe margin from edges */
  #gcn-stage.pos-top-center,
  #gcn-stage.pos-bottom-center {
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    align-items: stretch;
  }
  #gcn-stage.pos-top-left,
  #gcn-stage.pos-top-right,
  #gcn-stage.pos-bottom-left,
  #gcn-stage.pos-bottom-right {
    left: 16px !important;
    right: 16px !important;
    align-items: stretch;
  }

  .gcn-notif {
    max-width: 100%;
    width: 100%;
    font-size: 13.5px;
    padding: 13px 16px 13px 14px;
    border-radius: 22px;   /* slightly less rounded on narrow screens */
    gap: 10px;
    /* keep row layout — icon left, text center, close right */
    flex-direction: row;
    align-items: center;
  }

  .gcn-icon svg {
    width: 20px; height: 20px;
  }

  .gcn-close {
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* Samsung Galaxy Z Fold outer screen (≈ 260px) */
@media (max-width: 300px) {
  .gcn-notif {
    font-size: 12px;
    padding: 11px 12px;
    gap: 8px;
    border-radius: 16px;
  }
  .gcn-icon { width: 18px; height: 18px; }
  .gcn-icon svg { width: 18px; height: 18px; }
}