@import url('../../css/styles.css');

.support-hero { padding-top: 140px; padding-bottom: var(--spacing-lg); text-align: center; }
.support-badge {
    display: inline-block; padding: 0.5rem 1rem;
    background: rgba(168,85,247,0.1); border-radius: 999px;
    margin-bottom: var(--spacing-sm); color: var(--accent-primary);
    font-weight: 600; border: 1px solid rgba(168,85,247,0.3); font-size: 0.9rem;
}
.support-form-section { padding: var(--spacing-lg) 0 var(--spacing-xl); }
.form-wrapper {
    max-width: 640px; margin: 0 auto;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-lg); padding: var(--spacing-lg);
}
.form-group { margin-bottom: var(--spacing-md); }
.form-group label {
    display: block; font-size: 0.875rem; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 0.5rem;
    letter-spacing: 0.02em; text-transform: uppercase;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm);
    padding: 0.875rem 1rem; color: var(--text-primary);
    font-family: var(--font-main); font-size: 1rem;
    transition: var(--transition-fast); outline: none;
    -webkit-appearance: none; appearance: none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-tertiary); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--accent-primary);
    background: rgba(168,85,247,0.05);
    box-shadow: 0 0 0 3px rgba(168,85,247,0.1);
}
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1a6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center;
    padding-right: 2.5rem; cursor: pointer;
}
.form-group select option { background: #111; color: var(--text-primary); }
.form-group textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); }
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    .form-wrapper { padding: var(--spacing-md); }
}
.submit-btn { width: 100%; padding: 1rem; font-size: 1rem; font-weight: 600; margin-top: var(--spacing-sm); }
.form-note { text-align: center; font-size: 0.85rem; color: var(--text-tertiary); margin-top: var(--spacing-sm); }
.info-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md); max-width: 640px; margin: var(--spacing-lg) auto 0;
}
.info-card {
    background: var(--bg-tertiary); border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-md); padding: var(--spacing-md); text-align: center;
}
.info-card .icon { font-size: 1.75rem; margin-bottom: 0.75rem; }
.info-card h4 { font-size: 1rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.info-card p { font-size: 0.875rem; color: var(--text-tertiary); }
.success-message { display: none; text-align: center; padding: var(--spacing-lg); }
.success-message .success-icon { font-size: 3rem; margin-bottom: var(--spacing-sm); }
.success-message h3 { color: var(--text-primary); margin-bottom: 0.5rem; }