/* AI Banner Creative Generator — Custom Styles */

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

/* Auth tabs */
.tab-active  { background: #2563EB; color: #fff; }
.tab-inactive { background: transparent; color: #6b7280; }
.tab-inactive:hover { color: #d1d5db; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #111827; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* Smooth transitions */
* { transition-property: color, background-color, border-color, opacity;
    transition-duration: 150ms; }
iframe, img, div[style] { transition: none !important; }

/* Step connector animation */
.step-connector { transition: background-color 0.3s ease; }

/* Focus ring */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 2px rgba(37,99,235,.3);
}

/* Type card hover glow */
.type-card.selected {
  box-shadow: 0 0 0 1px rgba(37,99,235,.5), 0 4px 20px rgba(37,99,235,.15);
}

/* Template card */
.template-card.selected {
  box-shadow: 0 0 0 1px rgba(37,99,235,.5);
}

/* Size card check */
.size-card.selected .size-check {
  border-color: #2563EB;
  background: #1e3a5f;
}

/* Animate spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* Pulse animation */
@keyframes pulse-scale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Loading overlay */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Preview iframe border glow */
#previewContainer iframe {
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 32px rgba(0,0,0,.5);
}

/* Dropdown menu animation */
#userMenu { animation: dropdown-in 0.15s ease; }
@keyframes dropdown-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }