/* SnatchIT Login – Frontend Styles */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --si-accent:       #FF6B35;
  --si-accent-dark:  #e55a26;
  --si-accent-light: #fff2ec;
  --si-text:         #1a1a2e;
  --si-text-muted:   #6b7280;
  --si-border:       #e5e7eb;
  --si-bg:           #ffffff;
  --si-bg-overlay:   rgba(0, 0, 0, 0.55);
  --si-radius:       12px;
  --si-radius-sm:    8px;
  --si-shadow:       0 24px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  --si-font:         'Segoe UI', system-ui, -apple-system, sans-serif;
  --si-transition:   0.2s ease;
}

/* ── Button ──────────────────────────────────────────────────────────────── */
.snatchit-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         12px 22px;
  border:          none;
  border-radius:   var(--si-radius-sm);
  font-family:     var(--si-font);
  font-size:       15px;
  font-weight:     600;
  cursor:          pointer;
  transition:      background var(--si-transition), transform var(--si-transition), box-shadow var(--si-transition);
  text-decoration: none;
  line-height:     1;
}
.snatchit-btn svg {
  width:  18px;
  height: 18px;
  flex-shrink: 0;
}
.snatchit-btn--primary {
  background: var(--si-accent);
  color:      #fff;
  box-shadow: 0 2px 8px rgba(255,107,53,0.3);
}
.snatchit-btn--primary:hover {
  background:  var(--si-accent-dark);
  transform:   translateY(-1px);
  box-shadow:  0 4px 16px rgba(255,107,53,0.4);
}
.snatchit-btn--primary:active {
  transform:   translateY(0);
  box-shadow:  0 2px 8px rgba(255,107,53,0.3);
}
.snatchit-btn--full { width: 100%; }
.snatchit-btn:disabled {
  opacity:  0.7;
  cursor:   not-allowed;
  transform: none !important;
}

/* ── WP login page extras ────────────────────────────────────────────────── */
.snatchit-wp-login-divider {
  display:         flex;
  align-items:     center;
  margin:          18px 0;
  gap:             12px;
  color:           var(--si-text-muted);
  font-size:       13px;
}
.snatchit-wp-login-divider::before,
.snatchit-wp-login-divider::after {
  content: '';
  flex:    1;
  height:  1px;
  background: var(--si-border);
}
.snatchit-wp-login-wrap {
  margin-bottom: 10px;
}
.snatchit-wp-login-wrap .snatchit-btn {
  width: 100%;
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.snatchit-overlay {
  position:        fixed;
  inset:           0;
  z-index:         999999;
  background:      var(--si-bg-overlay);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
  animation:       si-fade-in 0.2s ease;
  backdrop-filter: blur(4px);
}
.snatchit-overlay[hidden] { display: none; }

@keyframes si-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal card ──────────────────────────────────────────────────────────── */
.snatchit-modal {
  background:    var(--si-bg);
  border-radius: var(--si-radius);
  box-shadow:    var(--si-shadow);
  width:         100%;
  max-width:     420px;
  padding:       32px 28px 28px;
  position:      relative;
  animation:     si-slide-up 0.25s ease;
}

@keyframes si-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Close button */
.snatchit-modal__close {
  position:         absolute;
  top:              14px;
  right:            14px;
  width:            32px;
  height:           32px;
  border:           none;
  background:       transparent;
  cursor:           pointer;
  border-radius:    6px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--si-text-muted);
  transition:       background var(--si-transition), color var(--si-transition);
}
.snatchit-modal__close:hover {
  background: var(--si-accent-light);
  color:      var(--si-accent);
}
.snatchit-modal__close svg { width: 16px; height: 16px; }

/* Brand header */
.snatchit-modal__brand {
  display:      flex;
  align-items:  center;
  gap:          14px;
  margin-bottom: 24px;
}
.snatchit-modal__logo svg { width: 40px; height: 40px; }
.snatchit-modal__title {
  margin:      0 0 2px;
  font-size:   20px;
  font-weight: 700;
  color:       var(--si-text);
  line-height: 1.2;
}
.snatchit-modal__subtitle {
  margin:    0;
  font-size: 13px;
  color:     var(--si-text-muted);
}

/* ── Alert ───────────────────────────────────────────────────────────────── */
.snatchit-alert {
  padding:       12px 14px;
  border-radius: var(--si-radius-sm);
  font-size:     14px;
  margin-bottom: 16px;
  line-height:   1.5;
}
.snatchit-alert[hidden] { display: none; }
.snatchit-alert--error {
  background: #fef2f2;
  color:      #b91c1c;
  border:     1px solid #fecaca;
}
.snatchit-alert--success {
  background: #f0fdf4;
  color:      #15803d;
  border:     1px solid #bbf7d0;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.snatchit-form { display: flex; flex-direction: column; gap: 16px; }

.snatchit-field label {
  display:      block;
  font-size:    13px;
  font-weight:  600;
  color:        var(--si-text);
  margin-bottom: 6px;
}
.snatchit-field__input-wrap {
  position: relative;
}
.snatchit-field__icon {
  position: absolute;
  left:     12px;
  top:      50%;
  transform: translateY(-50%);
  width:    16px;
  height:   16px;
  color:    var(--si-text-muted);
  pointer-events: none;
}
.snatchit-field input[type="text"],
.snatchit-field input[type="password"] {
  width:         100%;
  padding:       10px 40px 10px 38px;
  border:        1.5px solid var(--si-border);
  border-radius: var(--si-radius-sm);
  font-size:     14px;
  font-family:   var(--si-font);
  color:         var(--si-text);
  background:    #fff;
  transition:    border-color var(--si-transition), box-shadow var(--si-transition);
  box-sizing:    border-box;
  outline:       none;
  -webkit-appearance: none;
}
.snatchit-field input:focus {
  border-color: var(--si-accent);
  box-shadow:   0 0 0 3px rgba(255,107,53,0.15);
}

/* toggle visibility */
.snatchit-field__toggle {
  position:   absolute;
  right:      10px;
  top:        50%;
  transform:  translateY(-50%);
  background: transparent;
  border:     none;
  cursor:     pointer;
  color:      var(--si-text-muted);
  padding:    4px;
  border-radius: 4px;
  display:    flex;
  align-items: center;
  transition: color var(--si-transition);
}
.snatchit-field__toggle:hover { color: var(--si-accent); }
.snatchit-field__toggle svg   { width: 16px; height: 16px; }

/* ── Submit / Spinner ────────────────────────────────────────────────────── */
.snatchit-btn__spinner { display: inline-flex; }
.snatchit-btn__spinner[hidden] { display: none; }

.snatchit-spinner {
  width:  18px;
  height: 18px;
  animation: si-spin 0.8s linear infinite;
}
@keyframes si-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ── Success state ───────────────────────────────────────────────────────── */
.snatchit-success { text-align: center; padding: 12px 0 4px; }
.snatchit-success[hidden] { display: none; }

.snatchit-success__icon {
  width:       56px;
  height:      56px;
  background:  var(--si-accent);
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  margin:      0 auto 16px;
  animation:   si-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.snatchit-success__icon svg {
  width:  28px;
  height: 28px;
  color:  #fff;
}
.snatchit-success p {
  font-size:   16px;
  font-weight: 600;
  color:       var(--si-text);
}

@keyframes si-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}