/**
 * Feedspace Settings Page Styles
 *
 * Styles specific to the settings page
 *
 * @package Feedspace
 * @since 1.0.0
 */

@use 'shared' as *;

// Settings page specific styles
.feedspace-admin {
  // Getting Started section
  .feedspace-getting-started {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    .feedspace-step {
      display: flex;
      align-items: flex-start;
      padding: 1.5rem;
      background: #f8f9fa;
      border-radius: 8px;
      border: 1px solid #e9ecef;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .feedspace-step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        background: $primary-color;
        color: white;
        border-radius: 50%;
        font-weight: 600;
        font-size: 1.1rem;
        margin-right: 1rem;
        flex-shrink: 0;
      }

      .feedspace-step-content {
        flex: 1;

        h3 {
          margin: 0 0 0.75rem 0;
          font-size: 1.1rem;
          font-weight: 600;
          color: $text-color;
        }

        p {
          margin: 0 0 1rem 0;
          color: #666;
          font-size: 0.9rem;
          line-height: 1.5;
        }

        .feedspace-button {
          @include button-style($primary-color);
          font-size: 0.9rem;
          padding: 0.5rem 1rem;
        }
      }
    }
  }

  // Advanced Settings styles
  .feedspace-setting-item {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;

    .feedspace-checkbox-label {
      display: flex;
      align-items: flex-start;
      cursor: pointer;
      margin: 0;
      font-weight: normal;

      input[type="checkbox"] {
        margin: 0.125rem 0.75rem 0 0;
        transform: scale(1.1);
        cursor: pointer;
        flex-shrink: 0;
      }

      .feedspace-checkbox-text {
        flex: 1;
        line-height: 1.4;
        color: $text-color;
        margin-top: 0.125rem;
      }
    }

    .feedspace-setting-description {
      margin: 0.75rem 0 0 0;
      color: #666;
      font-size: 0.9rem;
      line-height: 1.5;
      padding-left: 1.75rem;
    }
  }

  // Form section styles for settings
  .feedspace-form-section {
    margin-bottom: 0;
    
    .feedspace-button-group {
      margin-top: 1rem;
      padding-top: 0.75rem;
      border-top: 1px solid #e9ecef;
    }
  }

  // Info Notice styles
  .feedspace-info-notice {
    display: flex;
    align-items: flex-start;
    padding: 1.5rem;
    background: #e3f2fd;
    border-radius: 8px;
    border: 1px solid #2196f3;
    border-left: 4px solid #2196f3;

    .feedspace-info-icon {
      font-size: 1.5rem;
      margin-right: 1rem;
      color: #1976d2;
      flex-shrink: 0;
      margin-top: 0.25rem;
    }

    .feedspace-info-content {
      flex: 1;

      h3 {
        margin: 0 0 0.75rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #1565c0;
      }

      p {
        margin: 0 0 0.75rem 0;
        color: #424242;
        font-size: 0.9rem;
        line-height: 1.5;

        &:last-child {
          margin-bottom: 0;
        }

        strong {
          color: #1565c0;
        }
      }
    }
  }
}