/* SYNAPSE FORM BUILDER PRO v2 — Public Form Styles */
:root {
    --synfb-primary: #6366f1;
    --synfb-primary-hover: #818cf8;
    --synfb-primary-light: rgba(99,102,241,0.08);
    --synfb-danger: #ef4444;
    --synfb-success: #22c55e;
    --synfb-text: #1f2937;
    --synfb-text-2: #6b7280;
    --synfb-text-3: #9ca3af;
    --synfb-bg: #ffffff;
    --synfb-input-bg: #f9fafb;
    --synfb-border: #d1d5db;
    --synfb-border-focus: #6366f1;
    --synfb-radius: 8px;
    --synfb-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --synfb-transition: 150ms ease;
}
.synfb-form-wrapper { font-family:var(--synfb-font); font-size:14px; line-height:1.5; color:var(--synfb-text); max-width:720px; margin:0 auto; }
.synfb-form-wrapper *, .synfb-form-wrapper *::before, .synfb-form-wrapper *::after { box-sizing:border-box; }

/* Row Grid */
.synfb-row { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:4px; }
.synfb-w-100 { flex:0 0 100%; max-width:100%; }
.synfb-w-75 { flex:0 0 calc(75% - 8px); max-width:calc(75% - 8px); }
.synfb-w-50 { flex:0 0 calc(50% - 8px); max-width:calc(50% - 8px); }
.synfb-w-33 { flex:0 0 calc(33.333% - 11px); max-width:calc(33.333% - 11px); }
.synfb-w-25 { flex:0 0 calc(25% - 12px); max-width:calc(25% - 12px); }
@media(max-width:640px) { .synfb-w-25,.synfb-w-33,.synfb-w-50,.synfb-w-75 { flex:0 0 100%; max-width:100%; } }

/* Field */
.synfb-field { margin-bottom:16px; }

/* Label */
.synfb-label { display:block; font-weight:500; margin-bottom:4px; font-size:13.5px; color:var(--synfb-text); }
.synfb-required { color:var(--synfb-danger); margin-left:2px; }
.synfb-labels-hidden .synfb-label { display:none; }
.synfb-labels-left .synfb-field { display:flex; align-items:flex-start; gap:12px; }
.synfb-labels-left .synfb-label { flex:0 0 120px; padding-top:10px; text-align:right; }

/* Inputs */
.synfb-input {
    width:100%; padding:10px 12px;
    background:var(--synfb-input-bg); border:1.5px solid var(--synfb-border);
    border-radius:var(--synfb-radius); font-family:var(--synfb-font);
    font-size:14px; color:var(--synfb-text); outline:none;
    transition:border-color var(--synfb-transition), box-shadow var(--synfb-transition);
    -webkit-appearance:none;
}
.synfb-input::placeholder { color:var(--synfb-text-3); }
.synfb-input:focus { border-color:var(--synfb-border-focus); box-shadow:0 0 0 3px var(--synfb-primary-light); background:var(--synfb-bg); }
.synfb-input.synfb-error { border-color:var(--synfb-danger); box-shadow:0 0 0 3px rgba(239,68,68,0.08); }
.synfb-textarea { resize:vertical; min-height:80px; }
.synfb-select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' 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; }
.synfb-help { margin-top:4px; font-size:12px; color:var(--synfb-text-3); }
.synfb-field-error { margin-top:3px; font-size:12px; color:var(--synfb-danger); min-height:0; }

/* Radio & Checkbox */
.synfb-radio-group, .synfb-checkbox-group { display:flex; flex-wrap:wrap; gap:8px; }
.synfb-radio-label, .synfb-checkbox-label { display:flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; padding:6px 12px; border-radius:6px; border:1.5px solid var(--synfb-border); transition:var(--synfb-transition); background:var(--synfb-input-bg); }
.synfb-radio-label:hover, .synfb-checkbox-label:hover { border-color:var(--synfb-primary); background:var(--synfb-primary-light); }
.synfb-radio, .synfb-checkbox { accent-color:var(--synfb-primary); width:16px; height:16px; }

/* Toggle */
.synfb-toggle-label { display:inline-flex; align-items:center; cursor:pointer; }
.synfb-toggle-input { display:none; }
.synfb-toggle-switch { width:44px; height:24px; background:var(--synfb-border); border-radius:12px; position:relative; transition:background var(--synfb-transition); }
.synfb-toggle-switch::after { content:''; width:18px; height:18px; background:#fff; border-radius:50%; position:absolute; top:3px; left:3px; transition:transform var(--synfb-transition); box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.synfb-toggle-input:checked + .synfb-toggle-switch { background:var(--synfb-primary); }
.synfb-toggle-input:checked + .synfb-toggle-switch::after { transform:translateX(20px); }

/* File Upload */
.synfb-file-input { display:none; }
.synfb-file-dropzone { border:2px dashed var(--synfb-border); border-radius:var(--synfb-radius); padding:24px; text-align:center; cursor:pointer; transition:var(--synfb-transition); }
.synfb-file-dropzone:hover { border-color:var(--synfb-primary); background:var(--synfb-primary-light); }
.synfb-file-icon { font-size:24px; display:block; margin-bottom:4px; }
.synfb-file-text { font-size:13px; color:var(--synfb-text-2); }
.synfb-file-list { margin-top:8px; }
.synfb-file-item { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--synfb-input-bg); border-radius:6px; margin-bottom:4px; font-size:13px; }
.synfb-file-remove { cursor:pointer; color:var(--synfb-danger); font-weight:700; margin-left:auto; }

/* Star Rating */
.synfb-rating { display:inline-flex; gap:2px; }
.synfb-star { font-size:24px; cursor:pointer; color:var(--synfb-border); transition:color var(--synfb-transition); user-select:none; }
.synfb-star.active, .synfb-star:hover { color:#f59e0b; }

/* Slider */
.synfb-slider-wrap { display:flex; align-items:center; gap:12px; }
.synfb-slider { flex:1; -webkit-appearance:none; height:6px; background:var(--synfb-border); border-radius:3px; outline:none; }
.synfb-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; background:var(--synfb-primary); border-radius:50%; cursor:pointer; box-shadow:0 2px 6px rgba(99,102,241,0.3); }
.synfb-slider::-moz-range-thumb { width:18px; height:18px; background:var(--synfb-primary); border-radius:50%; cursor:pointer; border:none; }
.synfb-slider-value { font-size:14px; font-weight:600; color:var(--synfb-primary); min-width:36px; text-align:center; }

/* Signature */
.synfb-signature-pad { border:1.5px solid var(--synfb-border); border-radius:var(--synfb-radius); height:120px; cursor:crosshair; background:var(--synfb-input-bg); }

/* Heading & Paragraph */
.synfb-heading { font-size:20px; font-weight:700; margin:8px 0 4px; color:var(--synfb-text); }
.synfb-paragraph { font-size:14px; color:var(--synfb-text-2); margin:4px 0; }
.synfb-divider { border:none; border-top:1px solid var(--synfb-border); margin:12px 0; }

/* Buttons */
.synfb-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 24px; border-radius:var(--synfb-radius); border:1.5px solid var(--synfb-border);
    background:var(--synfb-bg); color:var(--synfb-text); font-family:var(--synfb-font);
    font-size:14px; font-weight:600; cursor:pointer; transition:var(--synfb-transition);
}
.synfb-btn:hover { background:var(--synfb-input-bg); }
.synfb-btn:disabled { opacity:0.6; cursor:not-allowed; }
.synfb-btn-primary { background:var(--synfb-primary); color:#fff; border-color:var(--synfb-primary); }
.synfb-btn-primary:hover { background:var(--synfb-primary-hover); border-color:var(--synfb-primary-hover); }

/* Multi-step */
.synfb-multistep-nav { display:flex; align-items:center; gap:4px; margin-bottom:24px; padding:0 4px; }
.synfb-step-indicator { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; font-size:12px; font-weight:600; color:var(--synfb-text-3); background:var(--synfb-input-bg); border:1.5px solid transparent; transition:var(--synfb-transition); flex:1; justify-content:center; }
.synfb-step-indicator.active { color:var(--synfb-primary); background:var(--synfb-primary-light); border-color:var(--synfb-primary); }
.synfb-step-indicator.completed { color:var(--synfb-success); }
.synfb-step-num { width:22px; height:22px; border-radius:50%; background:var(--synfb-border); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; }
.synfb-step-indicator.active .synfb-step-num { background:var(--synfb-primary); }
.synfb-step-indicator.completed .synfb-step-num { background:var(--synfb-success); }
.synfb-step-buttons { display:flex; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--synfb-border); }

/* Messages */
.synfb-message { padding:16px 20px; border-radius:var(--synfb-radius); font-size:14px; font-weight:500; }
.synfb-success { background:rgba(34,197,94,0.08); color:#166534; border:1.5px solid rgba(34,197,94,0.2); }
.synfb-error-msg { background:rgba(239,68,68,0.08); color:#991b1b; border:1.5px solid rgba(239,68,68,0.2); }

/* Theme: Material */
.synfb-theme-material .synfb-input { border-width:0 0 2px 0; border-radius:0; padding:12px 0 8px; background:transparent; }
.synfb-theme-material .synfb-input:focus { border-color:var(--synfb-primary); box-shadow:none; }
.synfb-theme-material .synfb-label { font-size:12px; color:var(--synfb-text-2); }

/* Theme: Rounded */
.synfb-theme-rounded .synfb-input { border-radius:24px; padding:10px 18px; }
.synfb-theme-rounded .synfb-btn { border-radius:24px; }
.synfb-theme-rounded .synfb-radio-label, .synfb-theme-rounded .synfb-checkbox-label { border-radius:20px; }

/* Theme: Minimal */
.synfb-theme-minimal .synfb-input { border:none; border-bottom:1.5px solid var(--synfb-border); border-radius:0; background:transparent; padding:8px 0; }
.synfb-theme-minimal .synfb-input:focus { border-color:var(--synfb-text); box-shadow:none; }
.synfb-theme-minimal .synfb-radio-label, .synfb-theme-minimal .synfb-checkbox-label { border:none; padding:4px 0; }

/* Theme: Dark */
.synfb-theme-dark { --synfb-text:#e5e7eb; --synfb-text-2:#9ca3af; --synfb-text-3:#6b7280; --synfb-bg:#111827; --synfb-input-bg:#1f2937; --synfb-border:#374151; }
.synfb-theme-dark .synfb-form-wrapper { color:var(--synfb-text); }