/**
 * Styles for the [amd_contact_form] shortcode form. Self-contained so it looks
 * clean on any theme (does not rely on the site's CSS framework).
 */

.amdf {
    --amdf-brand: #2563eb;
    --amdf-brand-dark: #1d4ed8;
    --amdf-border: #e2e8f0;
    --amdf-text: #0f172a;
    --amdf-muted: #64748b;
    max-width: 640px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--amdf-text);
}

.amdf-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 6px;
}
.amdf-desc {
    color: var(--amdf-muted);
    font-size: 0.9rem;
    margin: 0 0 18px;
}

.amdf-form { display: flex; flex-wrap: wrap; gap: 16px; }
/* Every field spans the full row by default; half-width fields sit two-up. */
.amdf-form > .amdf-field { flex: 1 1 100%; }
.amdf-form > .amdf-field.amdf-half { flex: 1 1 calc(50% - 8px); }
.amdf-form > .amdf-btn { flex: 0 0 auto; }
@media (max-width: 520px) { .amdf-form > .amdf-field.amdf-half { flex: 1 1 100%; } }

.amdf-row { display: flex; gap: 16px; flex: 1 1 100%; }
.amdf-row .amdf-field { flex: 1; }
@media (max-width: 520px) { .amdf-row { flex-direction: column; } }

.amdf-field { display: flex; flex-direction: column; gap: 6px; }
.amdf-req { color: #dc2626; }

/* Checkbox / radio groups */
.amdf-check,
.amdf-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--amdf-text);
    cursor: pointer;
}
.amdf-check input,
.amdf-radio input { width: auto; margin: 0; }
.amdf-radios { display: flex; flex-direction: column; gap: 8px; }
.amdf-field label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--amdf-muted);
}
.amdf-field input,
.amdf-field select,
.amdf-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--amdf-text);
    background: #f8fafc;
    border: 1px solid var(--amdf-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    font-family: inherit;
}
.amdf-field textarea { resize: vertical; min-height: 110px; }
.amdf-field input:focus,
.amdf-field select:focus,
.amdf-field textarea:focus {
    border-color: var(--amdf-brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Submit button */
.amdf-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: var(--amdf-brand);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
}
.amdf-btn:hover { background: var(--amdf-brand-dark); }
.amdf-btn:active { transform: translateY(1px); }
.amdf-btn:disabled { opacity: 0.85; cursor: wait; }

/* Loading spinner (shown while the button is disabled during submit) */
.amd-btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: amdf-spin 0.6s linear infinite;
}
#contact-submit-btn:disabled .amd-btn-spinner,
.amdf-btn:disabled .amd-btn-spinner { display: inline-block; }
#contact-submit-btn:disabled .amd-send-icon,
.amdf-btn:disabled .amd-send-icon { display: none; }
@keyframes amdf-spin { to { transform: rotate(360deg); } }

/* Success / error messages */
.amdf-success {
    margin-top: 16px;
    padding: 16px 18px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    border-radius: 10px;
    font-size: 0.9rem;
}
.amdf-error {
    margin-top: 12px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    font-size: 0.9rem;
}

/* Honeypot: hidden from humans */
.amdf-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* JS toggles this class; define it so the form works even without a CSS framework. */
.amdf .hidden { display: none !important; }