/* ============================================
   FreelanceBG — Auth pages (login / register)
   Modern premium centered card. Mobile-first.
   Scoped via .fbg-auth on .section to avoid leaking
   into the rest of the site. Loaded BEFORE style.css
   (via $extraHead), so selectors are kept specific.
   ============================================ */

/* ---- Page background: soft brand aura ---- */
.fbg-auth {
  position: relative;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(99, 102, 241, 0.14), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(245, 158, 11, 0.08), transparent 55%),
    var(--gray-50, #f9fafb);
  overflow: hidden;
}
/* subtle floating blobs (decorative, behind the card) */
.fbg-auth::before,
.fbg-auth::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.fbg-auth::before {
  width: 320px; height: 320px;
  top: -80px; left: -60px;
  background: rgba(99, 102, 241, 0.18);
}
.fbg-auth::after {
  width: 280px; height: 280px;
  bottom: -90px; right: -50px;
  background: rgba(224, 231, 255, 0.55);
}

/* ---- The card wrapper (inner div with max-width) ---- */
.fbg-auth > div {
  position: relative;
  z-index: 1;
}

/* ---- The card itself ---- */
.fbg-auth .admin-card {
  border-radius: var(--radius-xl, 24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 24px 60px -18px rgba(79, 70, 229, 0.28),
    0 8px 24px -12px rgba(17, 24, 39, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  padding: 40px 34px 32px !important;
  animation: fbg-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fbg-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ---- Brand mark on top of the card ---- */
.fbg-auth-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-dark, #4f46e5));
  box-shadow: 0 8px 20px -6px rgba(79, 70, 229, 0.55);
  color: #fff;
}
.fbg-auth-badge svg { width: 28px; height: 28px; display: block; }

/* ---- Heading ---- */
.fbg-auth .admin-card > h2 {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--gray-900, #111827) !important;
  margin-bottom: 6px !important;
}
.fbg-auth-sub {
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray-500, #6b7280);
  margin: 0 0 24px;
}

/* ---- Google / OAuth button refinement ---- */
.fbg-auth .btn-outline {
  border: 1.5px solid var(--gray-200, #e5e7eb) !important;
  background: #fff;
  color: var(--gray-700, #374151) !important;
  font-weight: 600;
  border-radius: 12px !important;
  padding: 13px !important;
  transition: var(--transition, all 0.2s ease);
}
.fbg-auth .btn-outline:hover {
  border-color: var(--primary, #6366f1) !important;
  background: var(--gray-50, #f9fafb);
  box-shadow: 0 4px 14px -6px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

/* ---- Divider "или с имейл" ---- */
.fbg-auth .admin-card span[style*="или"],
.fbg-auth-divider {
  font-size: 0.8rem;
  color: var(--gray-400, #9ca3af);
  font-weight: 500;
}

/* ---- Form fields ---- */
.fbg-auth .form-group { margin-bottom: 16px; }
.fbg-auth .form-label {
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  color: var(--gray-700, #374151) !important;
  margin-bottom: 7px !important;
  display: block;
}
.fbg-auth .form-input,
.fbg-auth .form-select {
  width: 100%;
  padding: 13px 15px !important;
  font-size: 16px !important; /* 16px stops iOS zoom on focus */
  border: 1.5px solid var(--gray-200, #e5e7eb) !important;
  border-radius: 12px !important;
  background: var(--gray-50, #f9fafb) !important;
  color: var(--gray-900, #111827);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.fbg-auth .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 42px !important;
}
.fbg-auth .form-input::placeholder { color: var(--gray-400, #9ca3af); }
.fbg-auth .form-input:hover,
.fbg-auth .form-select:hover {
  border-color: var(--gray-300, #d1d5db) !important;
}
.fbg-auth .form-input:focus,
.fbg-auth .form-select:focus {
  outline: none;
  border-color: var(--primary, #6366f1) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

/* ---- Primary CTA: gradient + lift ---- */
.fbg-auth .btn-primary {
  width: 100%;
  justify-content: center;
  padding: 14px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--primary, #6366f1), var(--primary-dark, #4f46e5)) !important;
  box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.65);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  margin-top: 4px;
}
.fbg-auth .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(79, 70, 229, 0.75);
  filter: brightness(1.04);
}
.fbg-auth .btn-primary:active { transform: translateY(0); }

/* ---- Bottom switch (Вече имаш акаунт? / Нямаш акаунт?) ---- */
.fbg-auth .admin-card > div:last-child {
  border-top: 1px solid var(--gray-100, #f3f4f6);
}
.fbg-auth .admin-card > div:last-child .btn-outline {
  background: transparent;
}

/* ---- Checkbox row (terms) ---- */
.fbg-auth input[type="checkbox"] { accent-color: var(--primary, #6366f1); }

/* ---- reCAPTCHA: center it, give breathing room ---- */
.fbg-auth .g-recaptcha {
  display: flex;
  justify-content: center;
  margin: 6px 0 16px !important;
}

/* ---- Alerts ---- */
.fbg-auth .alert {
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.fbg-auth .alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* ======== Desktop polish ======== */
@media (min-width: 768px) {
  .fbg-auth .admin-card {
    padding: 48px 44px 38px !important;
  }
  /* register card a touch wider so it doesn't feel cramped */
  .fbg-auth > div { max-width: 480px; }
}

/* ======== Accessibility ======== */
@media (prefers-reduced-motion: reduce) {
  .fbg-auth .admin-card,
  .fbg-auth .btn-primary,
  .fbg-auth .btn-outline,
  .fbg-auth .form-input { animation: none !important; transition: none !important; }
}