/* SheetForm Pro — frontend form styles */

.sfp-wrap { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; max-width:720px; margin:0 auto; box-sizing:border-box; }
.sfp-wrap *, .sfp-wrap *::before, .sfp-wrap *::after { box-sizing:inherit; }

.sfp-card { background:#fff; border:1px solid #e5e7eb; border-radius:var(--sfp-radius,10px); overflow:hidden; }

.sfp-header { padding:1.5rem 1.75rem 1.25rem; border-bottom:1px solid #f0f0f0; }
.sfp-title { font-size:1.35rem; font-weight:600; color:#111827; margin:0 0 4px; }
.sfp-subtitle { font-size:.875rem; color:#6b7280; margin:0; }

/* ── Multi-column row grid ── */
.sfp-form { padding:1.5rem 1.75rem; }
.sfp-rows { display:flex; flex-direction:column; gap:1rem; }

.sfp-row { display:grid; gap:1rem; }
.sfp-cols-1 { grid-template-columns:1fr; }
.sfp-cols-2 { grid-template-columns:1fr 1fr; }
.sfp-cols-3 { grid-template-columns:1fr 1fr 1fr; }

@media (max-width:520px) {
    .sfp-cols-2, .sfp-cols-3 { grid-template-columns:1fr; }
}

.sfp-cell { display:flex; flex-direction:column; gap:5px; }

.sfp-label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; }
.sfp-req { color:var(--sfp-brand,#1a6b4a); margin-left:2px; }
.sfp-heading { font-size:1rem; font-weight:600; color:#111827; padding:6px 0 2px; border-bottom:1px solid #e5e7eb; margin-bottom:4px; }

.sfp-input, .sfp-textarea, select.sfp-input {
    display:block; width:100%; padding:10px 12px;
    font-size:.9375rem; font-family:inherit; color:#111827;
    background:#f9fafb; border:1px solid #e5e7eb;
    border-radius:calc(var(--sfp-radius,10px) * 0.7);
    transition:border-color .15s, box-shadow .15s;
    appearance:none;
}
.sfp-input:focus, .sfp-textarea:focus, select.sfp-input:focus {
    outline:none; border-color:var(--sfp-brand,#1a6b4a);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--sfp-brand,#1a6b4a) 12%,transparent);
}
.sfp-textarea { resize:vertical; min-height:100px; }
select.sfp-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }

.sfp-field-error { font-size:.75rem; color:#ef4444; min-height:.9rem; }

/* Submit */
.sfp-footer { margin-top:1.25rem; }
.sfp-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 20px; font-size:.9375rem; font-weight:600; font-family:inherit; cursor:pointer; transition:filter .15s,transform .1s; }
.sfp-btn:hover { filter:brightness(1.08); }
.sfp-btn:active { transform:scale(0.98); }
.sfp-btn:disabled { opacity:.6; cursor:not-allowed; }
.sfp-btn-spinner { display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sfp-spin .6s linear infinite; }
.sfp-btn.is-loading .sfp-btn-spinner { display:inline-block; }
.sfp-btn.is-loading .sfp-btn-text { opacity:.6; }
@keyframes sfp-spin { to { transform:rotate(360deg); } }

/* Messages */
.sfp-msg { margin-top:1rem; padding:12px 16px; border-radius:8px; font-size:.9rem; font-weight:500; }
.sfp-msg--success { background:color-mix(in srgb,var(--sfp-brand,#1a6b4a) 10%,#fff); color:var(--sfp-dark,#0f3d28); border:1px solid color-mix(in srgb,var(--sfp-brand,#1a6b4a) 25%,transparent); }
.sfp-msg--error   { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Powered by */
.sfp-powered { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; font-size:.7rem; color:#9ca3af; border-top:1px solid #f0f0f0; }
.sfp-powered-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* ── Templates ─────────────────────────────────────────────── */
.sfp-template-dark .sfp-card { background:var(--sfp-dark,#0f3d28); border-color:transparent; }
.sfp-template-dark .sfp-title { color:#fff; }
.sfp-template-dark .sfp-subtitle, .sfp-template-dark .sfp-label { color:rgba(255,255,255,.6); }
.sfp-template-dark .sfp-input, .sfp-template-dark .sfp-textarea { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff; }
.sfp-template-dark .sfp-input::placeholder, .sfp-template-dark .sfp-textarea::placeholder { color:rgba(255,255,255,.35); }
.sfp-template-dark .sfp-header, .sfp-template-dark .sfp-powered { border-color:rgba(255,255,255,.12); }
.sfp-template-dark .sfp-powered { color:rgba(255,255,255,.35); }

.sfp-template-split .sfp-card { display:grid; grid-template-columns:160px 1fr; }
.sfp-template-split .sfp-header { background:var(--sfp-dark,#0f3d28); border-bottom:none; border-right:none; display:flex; flex-direction:column; justify-content:center; padding:2rem 1.25rem; grid-row:1/3; }
.sfp-template-split .sfp-title { color:#fff; }
.sfp-template-split .sfp-subtitle { color:rgba(255,255,255,.6); }
.sfp-template-split .sfp-powered { grid-column:2; border-top:1px solid #f0f0f0; }
@media (max-width:480px) { .sfp-template-split .sfp-card { grid-template-columns:1fr; } .sfp-template-split .sfp-header { grid-row:auto; border-bottom:1px solid rgba(255,255,255,.15); } .sfp-template-split .sfp-powered { grid-column:1; } }

.sfp-template-glass { background:var(--sfp-brand,#1a6b4a); padding:2rem; border-radius:12px; }
.sfp-template-glass .sfp-card { background:rgba(255,255,255,.55); backdrop-filter:blur(12px); border-color:rgba(255,255,255,.7); }

.sfp-template-stripe .sfp-card { border-top:6px solid var(--sfp-brand,#1a6b4a); }
.sfp-template-rounded .sfp-card { border-radius:20px; }
.sfp-template-rounded .sfp-input, .sfp-template-rounded .sfp-textarea, .sfp-template-rounded .sfp-btn { border-radius:50px !important; }

/* Dark mode */
@media (prefers-color-scheme:dark) {
    .sfp-card { background:#1f2937; border-color:#374151; }
    .sfp-title { color:#f9fafb; }
    .sfp-subtitle, .sfp-label { color:#9ca3af; }
    .sfp-header, .sfp-powered { border-color:#374151; }
    .sfp-input, .sfp-textarea { background:#111827; border-color:#374151; color:#f9fafb; }
    .sfp-powered { color:#4b5563; }
}