/**
 * Support Page Styles
 * Specific styles for support.html
 */

/* ============================================================================
   PAGE LAYOUT
   ============================================================================ */

.support-main {

  /* ============================================================================
     CONTAINER & CARD
     ============================================================================ */

  .support-container {

    .support-card {
      background: white;
      border-radius: 12px;
      padding: 2.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

      form {
        width: 100%;
      }

      textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-size: 1rem;
        font-family: inherit;
        resize: vertical;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;

        &:focus {
          outline: none;
          border-color: #667eea;
          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        &::placeholder {
          color: #ccc;
        }
      }

      .form-group input:disabled {
        background: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.6;
      }

      button {
        width: 100%;
      }
    }

    /* ============================================================================
       SUPPORT INFO
       ============================================================================ */

    .support-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin: 3rem auto;

      .info-item {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .info-icon {
          font-size: 2rem;
          flex-shrink: 0;
        }

        .info-text {
          strong {
            display: block;
            font-size: 1rem;
            color: #1a1a2e;
            margin-bottom: 0.5rem;
          }

          p {
            color: #666;
            font-size: 0.95rem;
            margin: 0;
          }

          a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .support-main {
    .support-container {
      max-width: 100%;

      .support-card {
        padding: 1.5rem;
        border-radius: 8px;

        h2 {
          font-size: 1.5rem;
          margin-bottom: 1.5rem;
        }

        .form-group {
          margin-bottom: 1rem;

          label {
            font-size: 0.95rem;
          }

          input,
          textarea {
            font-size: 1rem;
            padding: 0.75rem;
          }

          textarea {
            min-height: 120px;
          }
        }
      }
    }
  }
}