/*
 * Signup Flow Fix – Popup Styles  v1.1.0
 * Author: Quinite Technologies | https://www.quinite.co
 *
 * Design: Clean, minimal card with a thin type-colour accent strip at top.
 * One accent colour per state; everything else stays neutral.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
  --sff-font      : 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sff-overlay   : rgba(15, 15, 20, 0.60);
  --sff-card-bg   : #ffffff;
  --sff-radius    : 16px;
  --sff-shadow    : 0 8px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* One accent per state */
  --sff-clr-info    : #2563eb;
  --sff-clr-success : #059669;
  --sff-clr-warning : #d97706;
  --sff-clr-error   : #dc2626;

  /* Icon chip backgrounds — extremely subtle */
  --sff-bg-info    : #eff6ff;
  --sff-bg-success : #ecfdf5;
  --sff-bg-warning : #fffbeb;
  --sff-bg-error   : #fef2f2;

  /* Neutral text */
  --sff-title   : #111827;
  --sff-body    : #6b7280;
  --sff-muted   : #9ca3af;
  --sff-border  : #f3f4f6;
}

/* ── Overlay ───────────────────────────────────────────────────────────────── */
.sff-overlay {
  position        : fixed;
  inset           : 0;
  z-index         : 999999;
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 16px;
  background      : var(--sff-overlay);
  backdrop-filter : blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation       : sffFadeIn .2s ease both;
}

@keyframes sffFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.sff-popup {
  position      : relative;
  width         : 100%;
  max-width     : 400px;
  background    : var(--sff-card-bg);
  border-radius : var(--sff-radius);
  box-shadow    : var(--sff-shadow);
  font-family   : var(--sff-font);
  overflow      : hidden;
  animation     : sffSlideUp .28s cubic-bezier(.34, 1.5, .64, 1) both;
}

@keyframes sffSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Thin top accent strip — coloured by state via modifier on the overlay */
.sff-popup::before {
  content      : '';
  display      : block;
  height       : 3px;
  width        : 100%;
  background   : var(--sff-accent, var(--sff-clr-info));
}

/* Accent per state */
.sff-overlay--info    .sff-popup::before { background: var(--sff-clr-info);    }
.sff-overlay--success .sff-popup::before { background: var(--sff-clr-success); }
.sff-overlay--warning .sff-popup::before { background: var(--sff-clr-warning); }
.sff-overlay--error   .sff-popup::before { background: var(--sff-clr-error);   }

/* Inner padding */
.sff-popup__body {
  padding : 32px 32px 28px;
  display : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
}

/* ── Icon chip ─────────────────────────────────────────────────────────────── */
.sff-popup__icon {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 52px;
  height          : 52px;
  border-radius   : 14px;
  margin-bottom   : 20px;
  flex-shrink     : 0;
}

.sff-popup__icon svg {
  width  : 24px;
  height : 24px;
}

.sff-popup__icon--info    { background: var(--sff-bg-info);    color: var(--sff-clr-info);    }
.sff-popup__icon--success { background: var(--sff-bg-success); color: var(--sff-clr-success); }
.sff-popup__icon--warning { background: var(--sff-bg-warning); color: var(--sff-clr-warning); }
.sff-popup__icon--error   { background: var(--sff-bg-error);   color: var(--sff-clr-error);   }

/* ── Text ──────────────────────────────────────────────────────────────────── */
.sff-popup__title {
  margin      : 0 0 8px;
  font-size   : 17px;
  font-weight : 600;
  color       : var(--sff-title);
  line-height : 1.35;
  letter-spacing: -0.2px;
}

.sff-popup__message {
  margin      : 0 0 22px;
  font-size   : 13.5px;
  color       : var(--sff-body);
  line-height : 1.6;
}

/* ── Resend section ────────────────────────────────────────────────────────── */
.sff-popup__resend {
  width         : 100%;
  margin-bottom : 16px;
}

.sff-popup__resend-status {
  margin      : 8px 0 0;
  font-size   : 12.5px;
  color       : var(--sff-clr-success);
  line-height : 1.4;
  min-height  : 16px;
}

/* ── Actions ───────────────────────────────────────────────────────────────── */
.sff-popup__actions {
  width          : 100%;
  display        : flex;
  flex-direction : column;
  gap            : 8px;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.sff-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 100%;
  padding         : 11px 20px;
  border-radius   : 10px;
  font-size       : 13.5px;
  font-weight     : 500;
  font-family     : var(--sff-font);
  cursor          : pointer;
  text-decoration : none;
  border          : none;
  outline         : none;
  transition      : opacity .18s, transform .15s;
  letter-spacing  : 0.1px;
}

.sff-btn:hover  { opacity: .85; transform: translateY(-1px); }
.sff-btn:active { opacity: 1;   transform: translateY(0);    }

/* Primary – uses the state accent colour via JS-set variable or default */
.sff-btn--primary {
  background : var(--sff-clr-info);
  color      : #ffffff;
}

.sff-overlay--success .sff-btn--primary { background: var(--sff-clr-success); }
.sff-overlay--warning .sff-btn--primary { background: var(--sff-clr-warning); }
.sff-overlay--error   .sff-btn--primary { background: var(--sff-clr-error);   }

/* Secondary – light neutral chip */
.sff-btn--secondary {
  background : var(--sff-border);
  color      : #374151;
}

/* Ghost – text link style */
.sff-btn--ghost {
  background  : transparent;
  color       : var(--sff-muted);
  font-weight : 400;
  font-size   : 13px;
}

.sff-btn--ghost:hover { color: var(--sff-title); opacity: 1; }

/* Loading state */
.sff-btn--loading { opacity: .6; pointer-events: none; }

/* ── Divider line above ghost close ────────────────────────────────────────── */
.sff-popup__actions .sff-btn--ghost {
  margin-top  : 2px;
  padding-top : 0;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sff-popup__body { padding: 28px 24px 24px; }
  .sff-popup__icon { width: 44px; height: 44px; border-radius: 11px; }
  .sff-popup__icon svg { width: 20px; height: 20px; }
  .sff-popup__title   { font-size: 16px; }
  .sff-popup__message { font-size: 13px; }
}

/* ── Password strength indicator colours ───────────────────────────────────── */
#password_strength {
  font-size   : 12.5px !important;
  font-weight : 500   !important;
  transition  : color .2s;
}

#password_strength.short,
#password_strength.bad   { color: #dc2626 !important; }
#password_strength.good  { color: #d97706 !important; }
#password_strength.strong{ color: #059669 !important; }