/* =========================================================
   Smart Contact Form – Public Styles
   ========================================================= */

/* Spinner (async loading) */
.scf-form-container.scf-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.scf-spinner {
    display: flex;
    gap: 6px;
    align-items: center;
}

.scf-spinner span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    opacity: .3;
    animation: scf-bounce 1s infinite ease-in-out;
}

.scf-spinner span:nth-child(2) { animation-delay: .15s; }
.scf-spinner span:nth-child(3) { animation-delay: .3s; }

@keyframes scf-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: .3; }
    40%            { transform: scale(1);   opacity: 1; }
}

/* Wrapper */
.scf-wrapper { position: relative; }

/* Form */
.scf-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Fields */
.scf-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.scf-field label {
    font-weight: 600;
    font-size: .9rem;
}

.scf-required {
    color: #e53e3e;
    margin-left: 2px;
}

.scf-field input,
.scf-field textarea,
.scf-field select {
    width: 100%;
    padding: .65rem .85rem;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.scf-field input:focus,
.scf-field textarea:focus,
.scf-field select:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

.scf-field textarea { resize: vertical; min-height: 120px; }

/* Error state */
.scf-field--error input,
.scf-field--error textarea,
.scf-field--error select {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, .12);
}

.scf-error {
    font-size: .82rem;
    color: #e53e3e;
    min-height: 1.1em;
}

/* Honeypot */
.scf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Form footer */
.scf-form-footer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Submit button */
.scf-submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
    align-self: flex-start;
}

.scf-submit:hover:not(:disabled) { background: #4338ca; }
.scf-submit:active:not(:disabled) { transform: scale(.98); }
.scf-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Spinner inside button */
.scf-submit__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
}

.scf-submit--loading .scf-submit__spinner {
    display: inline-block;
    animation: scf-spin .7s linear infinite;
}

@keyframes scf-spin {
    to { transform: rotate(360deg); }
}

/* Response message */
.scf-response {
    padding: .75rem 1rem;
    border-radius: 6px;
    font-size: .95rem;
    font-weight: 500;
}

.scf-response:empty { display: none; }

.scf-response--success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #86efac;
}

.scf-response--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* reCAPTCHA notice */
.scf-recaptcha-notice {
    font-size: .75rem;
    color: #6b7280;
    margin: 0;
}

.scf-recaptcha-notice a { color: inherit; }

/* Load error */
.scf-load-error {
    color: #b91c1c;
    font-style: italic;
}