/* ==============================================================================
   Blown Film Pro - Auth & Admin Enhancements CSS
   ============================================================================== */

/* Magic Eye Toggle styling */
.bfp-password-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.bfp-password-wrapper input {
  width: 100% !important;
  padding-right: 42px !important;
}

[dir="rtl"] .bfp-password-wrapper input {
  padding-right: 14px !important;
  padding-left: 42px !important;
}

.bfp-eye-btn {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: #94a3b8 !important;
  padding: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
  z-index: 5 !important;
}

[dir="rtl"] .bfp-eye-btn {
  right: auto !important;
  left: 12px !important;
}

.bfp-eye-btn:hover {
  color: #06b6d4 !important;
  background: rgba(6, 182, 212, 0.12) !important;
}

.bfp-eye-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
}

/* ==============================================================================
   Professional Google Sign-In Button (Top Positioned)
   ============================================================================== */
.bfp-google-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
}

.bfp-google-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.bfp-google-btn:active {
  transform: scale(0.99) !important;
}

/* Light / Custom Themes support */
[data-theme="warm-beige"] .bfp-google-btn,
[data-theme="rose"] .bfp-google-btn,
[data-theme="sage"] .bfp-google-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="warm-beige"] .bfp-google-btn:hover,
[data-theme="rose"] .bfp-google-btn:hover,
[data-theme="sage"] .bfp-google-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

.bfp-google-icon {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Auth Divider ("── or continue with email ──") */
.bfp-divider {
  display: flex !important;
  align-items: center !important;
  margin: 22px 0 18px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.bfp-divider::before,
.bfp-divider::after {
  content: "" !important;
  flex: 1 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
}

.bfp-divider span {
  padding: 0 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Security footer badge */
.bfp-security-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #64748b !important;
  margin-top: 24px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
}

/* Modal Overlay & Card Styling */
.bfp-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
  animation: bfpFadeIn 0.2s ease-out !important;
}

.bfp-modal-card {
  width: 100% !important;
  max-width: 520px !important;
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
  border-radius: 24px !important;
  padding: 32px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(6, 182, 212, 0.15) !important;
  color: #f8fafc !important;
  position: relative !important;
  font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
  animation: bfpScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bfp-modal-card.bfp-card-large {
  max-width: 680px !important;
}

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

@keyframes bfpScaleUp {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Custom form elements inside modal */
.bfp-field {
  margin-bottom: 16px !important;
}

.bfp-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  margin-bottom: 6px !important;
}

.bfp-input, .bfp-select, .bfp-textarea {
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid #334155 !important;
  background-color: #020617 !important;
  color: #f8fafc !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
}

.bfp-input:focus, .bfp-select:focus, .bfp-textarea:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
}

.bfp-btn-primary {
  width: 100% !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  padding: 13px 20px !important;
  font-size: 15px !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.bfp-btn-primary:hover:not(:disabled) {
  opacity: 0.95 !important;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35) !important;
}

.bfp-btn-primary:active:not(:disabled) {
  transform: scale(0.98) !important;
}

.bfp-btn-primary:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.bfp-btn-secondary {
  border-radius: 10px !important;
  border: 1px solid #334155 !important;
  background: #1e293b !important;
  color: #cbd5e1 !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.bfp-btn-secondary:hover {
  background: #334155 !important;
  color: #fff !important;
}

.bfp-btn-danger {
  border-radius: 10px !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  background: rgba(244, 63, 94, 0.1) !important;
  color: #fda4af !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.bfp-btn-danger:hover {
  background: rgba(244, 63, 94, 0.25) !important;
  color: #fff !important;
}

/* Toast Notifications */
.bfp-toast-container {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  pointer-events: none !important;
}

[dir="rtl"] .bfp-toast-container {
  right: auto !important;
  left: 20px !important;
}

.bfp-toast {
  pointer-events: auto !important;
  min-width: 280px !important;
  max-width: 420px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  animation: bfpSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
}

@keyframes bfpSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.bfp-toast-success {
  background: #064e3b !important;
  border: 1px solid #059669 !important;
  color: #a7f3d0 !important;
}

.bfp-toast-error {
  background: #4c0519 !important;
  border: 1px solid #e11d48 !important;
  color: #fecdd3 !important;
}

.bfp-toast-info {
  background: #0c4a6e !important;
  border: 1px solid #0284c7 !important;
  color: #bae6fd !important;
}

/* Tier Card Badges */
.bfp-badge {
  display: inline-block !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.bfp-badge-cyan { background: rgba(6, 182, 212, 0.15) !important; color: #22d3ee !important; border: 1px solid rgba(6, 182, 212, 0.3) !important; }
.bfp-badge-blue { background: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; }
.bfp-badge-slate { background: rgba(148, 163, 184, 0.15) !important; color: #cbd5e1 !important; border: 1px solid rgba(148, 163, 184, 0.3) !important; }
.bfp-badge-green { background: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }
.bfp-badge-red { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; }
.bfp-badge-amber { background: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; }

/* ==============================================================================
   Executive Auth Card & Inputs Polish
   ============================================================================== */
main div.max-w-md {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  border-radius: 28px !important;
  padding: 36px 32px !important;
  transition: all 0.3s ease !important;
}

[data-theme="warm-beige"] main div.max-w-md,
[data-theme="rose"] main div.max-w-md,
[data-theme="sage"] main div.max-w-md {
  background: #ffffff !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

main form input {
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

main form input:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
}

main form button[type="submit"] {
  background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  padding: 13px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35) !important;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s !important;
  cursor: pointer !important;
}

main form button[type="submit"]:hover:not(:disabled) {
  opacity: 0.95 !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 22px rgba(6, 182, 212, 0.45) !important;
}

main form button[type="submit"]:active:not(:disabled) {
  transform: scale(0.99) !important;
}