/* contact.css (static root copy) - paleta del sitio */
/* Usa variables globales definidas en site.css: --bg, --primary, --muted, --glass, --card-bg, --glass-border, --accent-1, --accent-2 */

.contact-card{background:var(--card-bg);padding:20px;border-radius:12px;border:1px solid var(--glass-border);}
.contact-card .form-grid{display:grid;grid-template-columns:1fr;gap:14px}
.form-group{display:flex;flex-direction:column}
.form-group.full{grid-column:1/-1}
label{font-weight:600;font-size:0.95rem;color:var(--primary);margin-bottom:8px}
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea{
    padding:12px 14px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass);color:var(--text);outline:none;font-size:0.96rem
}
input::placeholder, textarea::placeholder{color:var(--muted)}
input:focus, textarea:focus, select:focus{box-shadow:0 0 0 6px rgba(78,168,255,0.07);border-color:var(--accent-2)}
.submit-group{display:flex;align-items:center;gap:12px}
.loader{width:28px;height:28px;border-radius:50%;border:4px solid rgba(255,255,255,0.06);border-top-color:var(--accent-2);display:inline-block;visibility:hidden}
.loader.active{visibility:visible;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-message{margin-top:12px;padding:12px;border-radius:10px;display:block}
.form-message.success{background:linear-gradient(90deg, rgba(123,255,228,0.06), rgba(178,249,253,0.03));color:var(--primary);border:1px solid rgba(78,255,210,0.08)}
.form-message.error{background:linear-gradient(90deg, rgba(255,200,200,0.03), rgba(255,200,200,0.02));color:#ffb3b3;border:1px solid rgba(255,180,180,0.04)}
.error{color:#ff9aa2;font-size:0.9rem;margin-top:6px}
.method-select label{margin-right:12px;font-weight:500;color:var(--muted)}
@media (min-width:720px){
    .contact-layout{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
    .contact-card .form-grid{grid-template-columns:repeat(2,1fr)}
    .form-group.full{grid-column:1/-1}
}
.contact-info.card{padding:18px;background:var(--card-bg);border:1px solid var(--glass-border)}
.contact-info a{color:var(--accent-2)}

/* Ensure select and option are visible and consistent with theme */
select{color:var(--text);background:var(--glass);border:1px solid var(--glass-border);padding:10px;border-radius:8px}
select option{color:var(--text);background:rgba(7,13,25,0.98)}