// General Info Fields Styling
.general-info-fields {
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;

  // Status and plan section
  .status-section {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    padding: 20px 24px;
    margin: -24px -24px 32px -24px;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid #e1e8ed;

    .ant-form-item {
      margin-bottom: 0;
    }

    .ant-form-item-label > label {
      font-weight: 600;
      color: #1f2937;
    }
  }

  // Main content sections
  .form-section {
    margin-bottom: 32px;

    &-title {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid #e5e7eb;
      display: flex;
      align-items: center;

      &::before {
        content: '';
        width: 4px;
        height: 20px;
        background: #1890ff;
        margin-right: 12px;
        border-radius: 2px;
      }
    }
  }

  // Basic info section
  .basic-info-section {
    background: #fafbfc;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 24px;
  }

  // Contact info section
  .contact-info-section {
    background: #f9fafb;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 24px;
  }

  // Social media section
  .social-media-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #bae6fd;
    margin-bottom: 24px;

    .ant-input {
      &:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
      }
    }
  }

  // Description section
  .description-section {
    background: #fefce8;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #fde047;
    margin-bottom: 24px;

    .ant-form-item-label > label {
      font-weight: 600;
      color: #713f12;
    }
  }

  // Upload section
  .upload-section {
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    padding: 32px 24px;
    border-radius: 8px;
    border: 1px solid #e9d5ff;
    margin-bottom: 24px;

    .upload-container {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      justify-content: space-around;

      .upload-item {
        flex: 1;
        min-width: 200px;
        max-width: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: white;
        padding: 20px;
        border-radius: 8px;
        border: 2px dashed #d1d5db;
        transition: all 0.3s ease;

        &:hover {
          border-color: #9333ea;
          transform: translateY(-2px);
          box-shadow: 0 8px 16px rgba(147, 51, 234, 0.1);
        }

        .upload-label {
          font-weight: 600;
          color: #4b5563;
          margin-bottom: 16px;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }

  // Enhanced form items
  .ant-form-item {
    margin-bottom: 24px;

    &-label > label {
      font-weight: 500;
      color: #374151;
      font-size: 14px;

      &.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
        color: #ef4444;
      }
    }
  }

  // Input styling
  .ant-input,
  .ant-input-number,
  .ant-select-selector {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;

    &:hover {
      border-color: #9ca3af;
    }

    &:focus,
    &.ant-input-focused {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
    }
  }

  // Switch styling
  .ant-switch {
    &.ant-switch-checked {
      background-color: #10b981;
    }
  }

  // Editor styling
  .rsw-editor,
  .rsw-ce {
    min-height: 150px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease;

    &:focus-within {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
    }
  }

  .rsw-toolbar {
    border-radius: 6px 6px 0 0;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
  }

  // Rating styling
  .ant-rate {
    font-size: 24px;
    color: #fbbf24;
  }

  // Responsive design
  @media (max-width: 768px) {
    padding: 16px;

    .status-section {
      margin: -16px -16px 24px -16px;
      padding: 16px;
    }

    .form-section-title {
      font-size: 14px;
    }

    .basic-info-section,
    .contact-info-section,
    .social-media-section,
    .description-section,
    .upload-section {
      padding: 16px;
    }

    .upload-section {
      .upload-container {
        flex-direction: column;

        .upload-item {
          max-width: 100%;
        }
      }
    }
  }

  // Animation for form fields
  .ant-col {
    animation: fadeInUp 0.4s ease-out backwards;

    @for $i from 1 through 30 {
      &:nth-child(#{$i}) {
        animation-delay: #{$i * 0.03}s;
      }
    }
  }

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

  // Icon enhancements for social media
  .ant-input-prefix {
    color: #6b7280;
    margin-right: 8px;
  }

  // Success states
  .ant-form-item-has-success {
    .ant-input,
    .ant-input-number,
    .ant-select-selector {
      border-color: #10b981;
    }
  }

  // Error states
  .ant-form-item-has-error {
    .ant-input,
    .ant-input-number,
    .ant-select-selector {
      border-color: #ef4444;
      
      &:focus {
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
      }
    }
  }

  // Loading states
  .ant-form-item-is-validating {
    .ant-input,
    .ant-input-number,
    .ant-select-selector {
      border-color: #3b82f6;
    }
  }
}