/* contact.css — the contact form's own styles.
   Layout (section, card, icon, inputs, btn, error, notice, responsive) → styles.css

   This was `gate.css` until 18.08.2026, and it always held two pages' rules
   under one page's name. When /gate.html was deleted the file went with it and
   took contact.html's select and textarea styling along — which is a stylesheet
   404 and an unstyled form, neither of which fails anything. The `.gate-*`
   halves are gone; what is left is what contact.html actually uses. */

/* Container width override */
.contact-container { max-width: 480px; }

/* Select styling */
.contact-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23839F9F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
    cursor: pointer;
}
.contact-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b8585' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Textarea */
.contact-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

/* Responsive: select + textarea */
@media (max-width: 768px) {
    .contact-select {
        background-position: right 12px center;
        padding-right: 40px;
    }
}
@media (max-width: 420px) {
    .form-group { margin-bottom: 16px; }
    .contact-label { font-size: 0.8rem; }
    .contact-textarea { min-height: 120px; }
}