/* gate.css – Gate & Contact page-specific styles */
/* Layout (section, card, icon, inputs, btn, error, notice, responsive) → styles.css */

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

/* Select styling (contact only) */
.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 only) */
.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; }
    .gate-label, .contact-label { font-size: 0.8rem; }
    .contact-textarea { min-height: 120px; }
}