/*
 * Contact Modal Styles
 */

.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
    padding: 1rem;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-container {
    background: #fff; border-radius: 16px; max-width: 480px; width: 100%;
    padding: 2rem; position: relative; max-height: 90vh; overflow-y: auto;
    transform: translateY(20px); transition: transform 0.2s;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-overlay.active .modal-container { transform: translateY(0); }

.modal-close {
    position: absolute; top: 12px; right: 16px; background: none; border: none;
    font-size: 28px; cursor: pointer; color: #94a3b8; line-height: 1;
    transition: color 0.2s;
}
.modal-close:hover { color: #1e293b; }

.modal-header { text-align: center; margin-bottom: 1.5rem; }
.modal-header h2 { font-size: 1.4rem; color: #1e293b; margin: 0; }
.modal-header p { color: #64748b; font-size: 0.9rem; margin: 0.25rem 0 0; }

.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.modal-field { margin-bottom: 0.75rem; }
.modal-field label {
    display: block; font-size: 0.8rem; font-weight: 600; color: #475569;
    margin-bottom: 0.25rem;
}
.modal-field input, .modal-field textarea, .modal-field select {
    width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #e2e8f0;
    border-radius: 8px; font-size: 0.95rem; transition: border-color 0.2s;
    font-family: inherit; background: #fff; color: #1e293b;
}
.modal-field input:focus, .modal-field textarea:focus {
    outline: none; border-color: var(--color-primary, #3C3B6E);
    box-shadow: 0 0 0 3px rgba(60,59,110,0.1);
}
.modal-field input.invalid { border-color: #ef4444; }
.modal-field input.invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }

.field-error { display: block; font-size: 0.75rem; color: #ef4444; margin-top: 0.2rem; min-height: 1rem; }

.modal-submit {
    width: 100%; padding: 0.75rem; background: var(--color-primary, #2E5E3E); color: #fff;
    border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: background 0.2s; margin-top: 0.5rem;
}
.modal-submit:hover { filter: brightness(1.1); }
.modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.modal-success {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    text-align: center; padding: 1.5rem 0;
}
.modal-success p { color: #475569; margin: 0; }

.modal-error {
    background: #fef2f2; color: #dc2626; padding: 0.75rem; border-radius: 8px;
    text-align: center; margin-top: 0.5rem; font-size: 0.9rem;
}

@media (max-width: 480px) {
    .modal-container { padding: 1.5rem; }
    .modal-row { grid-template-columns: 1fr; }
}

/* Dark mode */
html[data-dark="true"] .modal-container { background: #1a1a2e; }
html[data-dark="true"] .modal-header h2 { color: #f0f0f0; }
html[data-dark="true"] .modal-field input,
html[data-dark="true"] .modal-field textarea {
    background: #0f0f1a; color: #e0e0e0; border-color: #2a2a3e;
}
html[data-dark="true"] .modal-close { color: #64748b; }
html[data-dark="true"] .modal-close:hover { color: #e0e0e0; }