/* ============================================================
   Smart Contact Form — Front-end Styles
   Uses CSS custom properties set inline on the wrapper.
   ============================================================ */

.scf-form-wrap {
    --scf-accent:  #2563eb;
    --scf-text:    #1a1a1a;
    --scf-bg:      #ffffff;
    --scf-radius:  8px;
    --scf-font:    inherit;
    --scf-border:  #d1d5db;
    --scf-focus-ring: rgba(37,99,235,.25);
    --scf-gap:     16px;
    --scf-pad:     14px 16px;

    font-family: var(--scf-font);
    color: var(--scf-text);
    max-width: 100%;
    box-sizing: border-box;
}

.scf-form-wrap.scf-compact {
    --scf-gap: 10px;
    --scf-pad: 10px 12px;
}

/* ── Grid ─────────────────────────────────────────────────── */
.scf-fields-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scf-gap);
}

.scf-field-wrap {
    box-sizing: border-box;
}

.scf-full { width: 100%; }
.scf-half { width: calc(50% - var(--scf-gap) / 2); }

@media (max-width: 540px) {
    .scf-half { width: 100%; }
}

/* ── Labels ───────────────────────────────────────────────── */
.scf-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--scf-text);
}

.scf-required {
    color: #dc2626;
    margin-left: 3px;
}

/* ── Inputs ───────────────────────────────────────────────── */
.scf-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--scf-pad);
    background: var(--scf-bg);
    color: var(--scf-text);
    border: 1.5px solid var(--scf-border);
    border-radius: var(--scf-radius);
    font-family: var(--scf-font);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    resize: vertical;
}

.scf-input::placeholder { color: #9ca3af; }

.scf-input:focus {
    border-color: var(--scf-accent);
    box-shadow: 0 0 0 3px var(--scf-focus-ring);
}

.scf-input.scf-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

/* Checkbox */
.scf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: .95rem;
}

.scf-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--scf-accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Submit button ────────────────────────────────────────── */
.scf-submit-row {
    margin-top: var(--scf-gap);
}

.scf-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--scf-accent);
    color: #fff;
    border: none;
    border-radius: var(--scf-radius);
    font-family: var(--scf-font);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
    position: relative;
}

.scf-submit:hover:not(:disabled) { filter: brightness(1.1); }
.scf-submit:active:not(:disabled) { transform: scale(.98); }
.scf-submit:disabled { opacity: .65; cursor: not-allowed; }

/* Spinner */
.scf-submit-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: scf-spin .7s linear infinite;
}

.scf-submit.scf-loading .scf-submit-spinner { display: block; }
.scf-submit.scf-loading .scf-submit-label   { opacity: .75; }

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

/* ── reCAPTCHA note ───────────────────────────────────────── */
.scf-recaptcha-note {
    margin: 8px 0 0;
    font-size: .75rem;
    color: #9ca3af;
}

.scf-recaptcha-note a {
    color: #9ca3af;
    text-decoration: underline;
}

/* ── Response messages ────────────────────────────────────── */
.scf-message {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: var(--scf-radius);
    font-size: .95rem;
    font-weight: 500;
}

.scf-message--success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.scf-message--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Honeypot: absolutely hidden ─────────────────────────── */
.scf-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    tabindex: -1;
}