/* Custom styles for the Personal Branding App */

/* Loading spinner */
.spinner {
  border: 2px solid #f3f4f6;
  border-radius: 50%;
  border-top: 2px solid #7c3aed;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Form animations */
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200;
}

.form-input:focus {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Button styles */
.btn-primary {
  @apply bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-semibold py-3 px-6 rounded-lg hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 flex items-center justify-center;
}

.btn-primary:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.btn-secondary {
  @apply bg-white text-gray-700 font-semibold py-3 px-6 rounded-lg border border-gray-300 hover:bg-gray-50 transition-all duration-200;
}

.btn-premium {
  @apply bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold py-4 px-8 rounded-xl hover:from-green-600 hover:to-emerald-700 transition-all duration-200 flex items-center justify-center;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.btn-premium:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.5);
}

.btn-premium:disabled {
  @apply opacity-50 cursor-not-allowed from-gray-400 to-gray-500;
  box-shadow: none;
  transform: none;
}

/* Alert styles */
.alert {
  @apply p-4 rounded-lg border-l-4 mb-4;
}

.alert-success {
  @apply bg-green-50 border-green-500 text-green-700;
}

.alert-error {
  @apply bg-red-50 border-red-500 text-red-700;
}

.alert-info {
  @apply bg-blue-50 border-blue-500 text-blue-700;
}

/* Card styles */
.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
}

.card-hover {
  @apply hover:shadow-md transition-shadow duration-200;
}

/* Enhanced card styles */
.card-enhanced {
  @apply bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all duration-300 transform hover:scale-105;
}

.card-stat {
  @apply bg-white rounded-xl shadow-md border border-gray-100 p-6 hover:shadow-lg transition-all duration-200 transform hover:scale-102;
}

/* Dashboard enhancements */
.dashboard-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon {
  @apply w-12 h-12 rounded-lg flex items-center justify-center text-white text-xl;
}

.stat-icon-purple {
  @apply bg-gradient-to-br from-purple-500 to-indigo-600;
}

.stat-icon-blue {
  @apply bg-gradient-to-br from-blue-500 to-cyan-600;
}

.stat-icon-green {
  @apply bg-gradient-to-br from-green-500 to-emerald-600;
}

/* Action cards */
.action-card {
  @apply p-4 rounded-xl border-2 border-dashed border-purple-200 hover:border-purple-400 hover:bg-purple-50 transition-all duration-200 group cursor-pointer;
}

.action-card-active {
  @apply p-4 rounded-xl border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-all duration-200 group cursor-pointer;
}

.action-card-disabled {
  @apply p-4 rounded-xl border border-gray-200 bg-gray-50 opacity-60 cursor-default;
}

.action-card-premium {
  @apply p-4 rounded-xl bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 hover:border-green-300 hover:from-green-100 hover:to-emerald-100 transition-all duration-200 group cursor-pointer;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.15);
}

.action-card-premium:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.25);
}

/* Gradient backgrounds */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-purple {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

/* Hero section styles */
.hero-pattern {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237c3aed' fill-opacity='0.05' fill-rule='nonzero'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Smooth fade-in animation */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

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

/* Mobile responsive nav */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Enhanced Wizard styles */
.step-indicator {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.step-indicator.active {
  @apply bg-purple-600 text-white shadow-lg;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.step-indicator.completed {
  @apply bg-green-500 text-white;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.step-indicator:hover:not(.active) {
  @apply bg-gray-300 transform scale-105;
}

.wizard-step {
  animation: slideIn 0.3s ease-in-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.progress-bar {
  transition: width 0.5s ease-in-out;
  background: linear-gradient(90deg, #7c3aed, #a855f7, #3b82f6);
}

/* Enhanced wizard cards */
.wizard-card {
  @apply bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden;
  transition: all 0.3s ease;
}

.wizard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.wizard-header {
  @apply p-8 text-white;
  position: relative;
}

.wizard-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='nonzero'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.wizard-header > * {
  position: relative;
  z-index: 1;
}

.wizard-header-1 {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.wizard-header-2 {
  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
}

.wizard-header-3 {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.wizard-header-4 {
  background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
}

.wizard-header-5 {
  background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%);
}

.wizard-content {
  @apply p-10;
}

/* Wizard content spacing */
.wizard-content .grid {
  gap: 2rem;
}

.wizard-content .space-y-8 > * + * {
  margin-top: 2.5rem;
}

/* Enhanced form fields */
.form-field-wizard {
  @apply w-full px-5 py-4 border-2 border-gray-200 rounded-xl focus:ring-4 focus:ring-purple-100 focus:border-purple-500 transition-all duration-200;
  font-size: 16px;
  line-height: 1.5;
  min-height: 56px;
}

.form-field-wizard:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.15);
}

.form-field-wizard::placeholder {
  color: #9ca3af;
  font-size: 15px;
}

/* Enhanced textarea sizing */
.form-field-wizard[rows] {
  min-height: auto;
  resize: vertical;
  padding: 16px 20px;
}

/* Select field styling */
.form-field-wizard[type="url"],
.form-field-wizard[type="text"],
.form-field-wizard[type="email"] {
  height: 56px;
}

select.form-field-wizard {
  height: 56px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: 48px;
  appearance: none;
}

.form-label-wizard {
  @apply block text-sm font-bold text-gray-800 mb-4;
  font-size: 14px;
  letter-spacing: 0.025em;
}

.form-label-wizard i {
  @apply text-purple-600 mr-3;
  font-size: 16px;
}

/* Form group spacing */
.form-group {
  @apply mb-8;
}

/* Enhanced checkboxes */
.checkbox-enhanced {
  @apply flex items-center p-4 rounded-xl border-2 border-gray-200 hover:border-purple-300 hover:bg-purple-50 cursor-pointer transition-all duration-200 group;
  min-height: 60px;
}

.checkbox-enhanced:has(input:checked) {
  @apply bg-purple-50 border-purple-400;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.15);
}

.checkbox-enhanced input[type="checkbox"] {
  @apply w-5 h-5 text-purple-600 bg-white border-2 border-gray-300 rounded focus:ring-purple-500 focus:ring-2 flex-shrink-0;
}

.checkbox-enhanced span {
  @apply text-sm font-medium text-gray-700 ml-4 group-hover:text-purple-700;
  line-height: 1.4;
}

/* Checkbox grid spacing */
.checkbox-grid {
  gap: 12px;
}

/* Enhanced buttons */
.btn-wizard {
  @apply font-bold py-4 px-8 rounded-xl transition-all duration-200 flex items-center;
}

.btn-wizard-primary {
  @apply bg-gradient-to-r from-purple-600 to-indigo-600 text-white hover:shadow-lg hover:scale-105;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-wizard-secondary {
  @apply bg-white text-gray-700 border-2 border-gray-300 hover:border-gray-400 hover:bg-gray-50;
}

/* Progress section enhancement */
.progress-section {
  @apply bg-white rounded-2xl shadow-lg border border-gray-100 p-8 mb-8;
}

.progress-section-header {
  @apply text-center mb-8;
}

.progress-section-title {
  @apply text-4xl font-bold text-gray-900 mb-4;
}

.progress-section-subtitle {
  @apply text-lg text-gray-600 max-w-2xl mx-auto;
}

/* Form field focus states */
.profile-input:focus {
  @apply ring-2 ring-purple-500 border-transparent;
}

.profile-checkbox:checked {
  @apply text-purple-600 bg-purple-600;
}

/* Field error styling */
.field-error {
  display: block;
  animation: fadeInError 0.3s ease-in-out;
}

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

/* Profile completion indicator */
.completion-ring {
  stroke-dasharray: 251.2; /* 2 * PI * 40 (radius) */
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 0.5s ease-in-out;
}

.completion-ring.percent-80 {
  stroke-dashoffset: 50.24; /* 80% completion */
}

/* Checkbox grid styling */
.checkbox-grid label {
  @apply p-3 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer transition-colors;
}

.checkbox-grid label:has(input:checked) {
  @apply bg-purple-50 border-purple-300;
}