/* contact.css - Contact Modal */

.contact-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 8888;
    backdrop-filter: blur(2px);
}
.contact-overlay.open { display: block; }

.contact-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(.96);
    width: 580px; max-width: 95vw;
    max-height: 92vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    z-index: 8889;
    overflow-y: auto;
    transition: transform .25s ease, opacity .25s ease;
    opacity: 0;
    font-family: 'Microsoft JhengHei', 'Segoe UI', sans-serif;
}
.contact-modal.open {
    display: block;
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
}

.contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    position: sticky; top: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
}
.contact-modal-header h3 {
    margin: 0; font-size: 18px; font-weight: 700; color: #333;
}
.contact-close {
    background: none; border: none; font-size: 24px;
    color: #aaa; cursor: pointer; line-height: 1;
    padding: 0; transition: color .15s;
}
.contact-close:hover { color: #333; }

.contact-modal-body { padding: 20px 24px 28px; }

.contact-row { margin-bottom: 14px; }
.contact-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.contact-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: #555; margin-bottom: 5px;
}
.contact-field label span { color: #e74c3c; }

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field input[type="number"] {
    width: 100%; padding: 10px 13px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 14px; font-family: inherit;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.contact-field input:focus {
    border-color: #ED6E00;
    box-shadow: 0 0 0 3px rgba(237,110,0,.12);
}

.contact-field textarea {
    width: 100%; padding: 10px 13px;
    border: 1px solid #ddd; border-radius: 8px;
    font-size: 14px; font-family: inherit;
    box-sizing: border-box; resize: vertical;
    min-height: 110px; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.contact-field textarea:focus {
    border-color: #ED6E00;
    box-shadow: 0 0 0 3px rgba(237,110,0,.12);
}

.captcha-field input { max-width: 160px; }

.contact-error {
    background: #fdecea; border: 1px solid #f5c0c0;
    color: #c0392b; padding: 10px 14px; border-radius: 8px;
    font-size: 13px; margin-top: 4px;
}

.contact-actions { margin-top: 18px; }
.contact-btn {
    padding: 12px 28px; background: #ED6E00;
    color: #fff; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: background .2s;
}
.contact-btn:hover { background: #c55a00; }
.contact-btn:disabled { background: #ccc; cursor: not-allowed; }

@media (max-width: 480px) {
    .contact-row.two-col { grid-template-columns: 1fr; }
    .contact-modal { border-radius: 12px; }
}