/* Probate + LOA intake form — mobile-first, sympathetic, slate + teal palette. */

:root {
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --teal-50:   #f0fdfa;
    --teal-300:  #5eead4;
    --teal-400:  #2dd4bf;
    --teal-500:  #14b8a6;
    --teal-600:  #0d9488;
    --teal-700:  #0f766e;
    --emerald-500: #10b981;
    --red-50:    #fef2f2;
    --red-200:   #fecaca;
    --red-700:   #b91c1c;
    --white:     #ffffff;
}

@keyframes dz-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

* { box-sizing: border-box; }

body.intake-page {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--slate-50);
    color: var(--slate-800);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* In embed mode the iframe sits inside the parent page; let its colour show
   through so the form looks integrated rather than pasted onto a slate slab. */
body.intake-page.embed {
    background: transparent;
}

.intake-wrap {
    max-width: 28rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}
.intake-wrap.embed {
    max-width: 100%;
    padding: 0;
    background: transparent;
}

.intake-headblock {
    text-align: center;
    margin-bottom: 1.5rem;
}
.intake-headblock h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--slate-800);
    margin: 0;
}
.intake-sub {
    color: var(--slate-500);
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

.intake-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.intake-wrap.embed .intake-card { box-shadow: none; }

.intake-intro {
    color: var(--slate-700);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}
.intake-intro p { margin: 0 0 0.5rem; }

.intake-error {
    background: var(--red-50);
    border: 1px solid var(--red-200);
    color: var(--red-700);
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.intake-field {
    display: block;
    margin-bottom: 1.25rem;
}
.intake-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.intake-row .intake-field-half {
    flex: 1;
    min-width: 0;
}
@media (max-width: 480px) {
    .intake-row { flex-direction: column; gap: 0; }
}
.intake-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--slate-700);
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.intake-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: 0.4rem;
}
.req { color: var(--red-700); margin-left: 2px; }

.intake-field input[type="text"],
.intake-field input[type="email"],
.intake-field input[type="tel"] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--slate-300);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--slate-800);
    background: var(--white);
    -webkit-appearance: none;
}
.intake-field input:focus {
    outline: 2px solid var(--teal-400);
    outline-offset: 1px;
    border-color: var(--teal-500);
}

.intake-help {
    display: block;
    color: var(--slate-500);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.intake-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--slate-50);
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
    margin-top: -0.5rem;
}
.intake-checkbox input[type="checkbox"] { margin: 0.15rem 0 0; flex-shrink: 0; }
.intake-checkbox span { font-size: 0.875rem; color: var(--slate-700); line-height: 1.4; }

/* Drop zone */
.dropzone {
    border: 2px dashed var(--slate-300);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    color: var(--slate-500);
    transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone:focus {
    border-color: var(--teal-400);
    background: var(--teal-50);
    outline: none;
}
.dropzone.has-file {
    border-color: var(--teal-500);
    background: var(--teal-50);
    color: var(--slate-700);
}
.dropzone .dz-icon { display: block; margin: 0 auto 0.5rem; color: var(--slate-500); }
.dropzone .dz-primary {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--slate-700);
    word-break: break-word;
}
.dropzone .dz-hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--slate-500);
}

.intake-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--teal-600);
    color: var(--white);
    border: 0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 0.5rem;
}
.intake-submit:hover { background: var(--teal-700); }
.intake-submit:disabled { opacity: 0.5; cursor: not-allowed; }
/* :not([hidden]) so the hidden attribute still hides it — a bare
   `display` declaration would override [hidden] and show it on load. */
.submit-spinner:not([hidden]) { display: inline-flex; align-items: center; gap: 0.5rem; }

.intake-footer {
    margin: 1rem 0 0;
    color: var(--slate-500);
    font-size: 0.75rem;
    text-align: center;
}

/* Success screen */
.intake-thanks {
    text-align: center;
    padding: 2rem;
    max-width: 32rem;
    margin: 0 auto;
}
.check-icon { margin: 0 auto 0.75rem; display: block; }
.intake-thanks h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--slate-800);
    font-weight: 700;
    outline: none;
}
.thanks-body { color: var(--slate-700); margin: 0 0 0.75rem; }
.thanks-body code { background: var(--slate-100); padding: 2px 6px; border-radius: 4px; font-size: 0.95em; }
.thanks-hint { color: var(--slate-500); font-size: 0.875rem; margin: 0; }

@media (min-width: 640px) {
    .intake-wrap { padding: 2rem 1rem 4rem; }
    .intake-card { padding: 2rem; }
}