/* ============================================ Fill Form - Public Form Styles Modern, soft, light design (Hebrew + Arabic) ============================================ */ /* -------------------------------------------- Mixed-script font support (Hebrew + Arabic) --------------------------------------------- Heebo and Tajawal are loaded via Google Fonts in the page . Each ships with its own unicode-range @font-face rules, so when both are listed in the font-family stack the browser automatically picks the right font per-glyph - even on a single mixed line (e.g. Hebrew + Arabic in the same paragraph). -------------------------------------------- */ :root { --color-bg-1: #eef2ff; --color-bg-2: #f5f3ff; --color-bg-3: #fdf2f8; --color-card: #ffffff; --color-card-soft: #fafbff; --color-primary: #6366f1; --color-primary-2: #8b5cf6; --color-primary-soft: #eef2ff; --color-primary-ring: rgba(99, 102, 241, 0.18); --color-accent: #ec4899; --color-text: #1e293b; --color-text-muted: #64748b; --color-text-soft: #94a3b8; --color-border: #e2e8f0; --color-border-soft: #eef0f5; --color-danger: #ef4444; --color-danger-soft: #fef2f2; --color-success-1: #34d399; --color-success-2: #10b981; --shadow-card: 0 10px 30px rgba(99, 102, 241, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04); --shadow-card-strong: 0 20px 50px rgba(99, 102, 241, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Heebo', 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: radial-gradient(1200px 600px at 10% -10%, #e0e7ff 0%, transparent 60%), radial-gradient(1000px 600px at 110% 10%, #fce7f3 0%, transparent 55%), radial-gradient(900px 700px at 50% 110%, #ccfbf1 0%, transparent 55%), linear-gradient(135deg, var(--color-bg-1) 0%, var(--color-bg-2) 50%, var(--color-bg-3) 100%); background-attachment: fixed; min-height: 100vh; direction: rtl; color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Explicit overrides when an element is tagged with a language. Scoped to text-bearing elements only - never icons - so we don't clobber Font Awesome / Material Icons / etc. */ [lang="ar"]:not(i):not(svg):not([class*="fa-"]), [lang="ar"] :is(p, h1, h2, h3, h4, h5, h6, span, label, a, li, td, th, button, input, textarea, select, option) { font-family: 'Tajawal', 'Heebo', sans-serif; } [lang="he"]:not(i):not(svg):not([class*="fa-"]), [lang="he"] :is(p, h1, h2, h3, h4, h5, h6, span, label, a, li, td, th, button, input, textarea, select, option) { font-family: 'Heebo', 'Tajawal', sans-serif; } /* Defensive: keep Font Awesome icons rendering as icons, even if a parent element forces a text font-family. */ .fa, .fas, .fa-solid, .far, .fa-regular, .fal, .fa-light, .fad, .fa-duotone, .fa-thin, i[class^="fa-"], i[class*=" fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important; } .fab, .fa-brands { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; } .fill-form-wrapper { min-height: 100vh; padding: 40px 20px; display: flex; justify-content: center; align-items: flex-start; } /* -------------------------------------------- Loading State -------------------------------------------- */ .form-loading { background: var(--color-card); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: 60px 40px; text-align: center; box-shadow: var(--shadow-card); width: 100%; max-width: 500px; margin-top: 50px; } .loading-spinner { width: 48px; height: 48px; border: 4px solid var(--color-border-soft); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { to { transform: rotate(360deg); } } .form-loading p { color: var(--color-text-muted); font-size: 16px; } /* -------------------------------------------- Error State -------------------------------------------- */ .form-error { background: var(--color-card); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: 60px 40px; text-align: center; box-shadow: var(--shadow-card); width: 100%; max-width: 500px; margin-top: 50px; } .error-icon { width: 84px; height: 84px; background: linear-gradient(135deg, #fee2e2 0%, #fecdd3 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .error-icon i { font-size: 36px; color: #f43f5e; } .form-error h2 { margin: 0 0 12px; font-size: 22px; color: var(--color-text); font-weight: 600; } .form-error p { margin: 0 0 24px; color: var(--color-text-muted); font-size: 15px; } .btn-home { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%); color: #fff; text-decoration: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; transition: all 0.2s; box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25); } .btn-home:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(99, 102, 241, 0.32); } /* -------------------------------------------- Auth State -------------------------------------------- */ .form-auth { width: 100%; max-width: 460px; margin-top: 50px; } .auth-container { background: var(--color-card); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-card); } .auth-header { text-align: center; margin-bottom: 30px; } .auth-logo { width: 64px; height: 64px; background: linear-gradient(135deg, #c7d2fe 0%, #ddd6fe 50%, #fbcfe8 100%); border-radius: var(--radius-md); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(139, 92, 246, 0.18); } .auth-logo img { max-width: 80%; max-height: 80%; } .auth-header h2 { margin: 0 0 8px; font-size: 22px; color: var(--color-text); font-weight: 600; } .auth-header p { margin: 0; color: var(--color-text-muted); font-size: 14px; } .auth-form .form-group { margin-bottom: 20px; } .auth-form label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--color-text); } .code-sent-to { font-size: 13px; color: var(--color-text-muted); margin-bottom: 12px; } .code-sent-to span { font-weight: 600; color: var(--color-text); direction: ltr; unicode-bidi: bidi-override; } .code-input { text-align: center; font-size: 24px; letter-spacing: 8px; font-weight: 600; } .btn-link { background: none; border: none; color: var(--color-primary); font-size: 14px; font-family: inherit; cursor: pointer; margin-top: 12px; } .btn-link:hover { text-decoration: underline; } /* -------------------------------------------- Form Container -------------------------------------------- */ .form-container { background: var(--color-card); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); width: 100%; max-width: 720px; overflow: hidden; } .form-header { position: relative; background: radial-gradient(120% 120% at 0% 0%, #eef2ff 0%, transparent 60%), radial-gradient(120% 120% at 100% 0%, #fce7f3 0%, transparent 55%), linear-gradient(135deg, #f5f3ff 0%, #fdf2f8 100%); padding: 32px 28px 28px; text-align: center; color: var(--color-text); border-bottom: 1px solid var(--color-border-soft); } .form-header::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, transparent 0%, #c7d2fe 25%, #ddd6fe 50%, #fbcfe8 75%, transparent 100%); } .form-logo { margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; } .form-logo img { max-height: 80px; } .form-header h1 { margin: 0 0 8px; font-size: 26px; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; white-space: pre-line; } .form-header p { margin: 0; font-size: 15px; color: var(--color-text-muted); line-height: 1.5; } /* -------------------------------------------- Progress Bar -------------------------------------------- */ .form-progress { padding: 12px 26px; background: var(--color-card-soft); border-bottom: 1px solid var(--color-border-soft); display: flex; align-items: center; gap: 12px; } .progress-bar { flex: 1; height: 8px; background: #eef0f7; border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-2) 50%, var(--color-accent) 100%); border-radius: 999px; transition: width 0.35s ease; width: 0%; } .progress-text { font-size: 13px; font-weight: 600; color: var(--color-text-muted); min-width: 40px; text-align: left; } /* -------------------------------------------- Form Body / Fields -------------------------------------------- */ .form-body { padding: 22px 26px; } .form-fields-container { display: flex; flex-wrap: wrap; gap: 14px 16px; } .form-group { margin-bottom: 0; width: 100%; flex: 0 0 100%; } .form-group.half-width { flex: 0 0 calc(50% - 8px); width: calc(50% - 8px); } .form-group.third-width { flex: 0 0 calc(33.333% - 11px); width: calc(33.333% - 11px); } .form-group.quarter-width { flex: 0 0 calc(25% - 12px); width: calc(25% - 12px); } .form-group label { display: block; margin-bottom: 5px; font-size: 13.5px; font-weight: 500; color: var(--color-text); line-height: 1.4; } .form-group .required { color: var(--color-danger); margin-right: 2px; } .form-control { width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; background: #ffffff; color: var(--color-text); } .form-control:hover { border-color: #cbd5e1; } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-ring); background: #ffffff; } /* Flatpickr */ .flatpickr-input { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236366f1' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-left: 40px; } .flatpickr-calendar { font-family: inherit; direction: rtl; border-radius: var(--radius-md); box-shadow: var(--shadow-card-strong); border: 1px solid var(--color-border-soft); } .flatpickr-calendar.open { z-index: 99999; } .form-control.error { border-color: var(--color-danger); background: var(--color-danger-soft); } .form-control.error:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); } .form-control::placeholder { color: var(--color-text-soft); } textarea.form-control { resize: vertical; min-height: 110px; line-height: 1.55; } select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-left: 40px; } /* Help / error text */ .help-text { font-size: 12px; color: var(--color-text-soft); margin-top: 4px; line-height: 1.4; } .error-text { font-size: 12px; color: var(--color-danger); margin-top: 4px; font-weight: 500; line-height: 1.4; } /* -------------------------------------------- Radio & Checkbox -------------------------------------------- */ .options-list { display: flex; flex-direction: column; gap: 10px; } .option-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--color-card-soft); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; } .option-item:hover { border-color: #c7d2fe; background: #f8faff; } .option-item input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary); } .option-item.selected { border-color: var(--color-primary); background: var(--color-primary-soft); } /* -------------------------------------------- File Upload -------------------------------------------- */ .file-upload-area { border: 2px dashed #c7d2fe; background: #fafbff; border-radius: var(--radius-sm); padding: 30px; text-align: center; cursor: pointer; transition: all 0.15s; } .file-upload-area:hover, .file-upload-area.dragover { border-color: var(--color-primary); background: var(--color-primary-soft); } .file-upload-area i { font-size: 36px; color: var(--color-primary); margin-bottom: 12px; } .file-upload-area p { margin: 0; color: var(--color-text-muted); font-size: 14px; } .file-upload-area span { color: var(--color-primary); font-weight: 600; } .file-hint { display: block; margin-top: 4px; color: var(--color-text-soft); font-size: 11px; letter-spacing: 0.01em; } .uploaded-files { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .uploaded-file { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--color-card-soft); border: 1.5px solid var(--color-border); border-radius: 8px; font-size: 13px; color: var(--color-text); position: relative; overflow: hidden; transition: border-color 0.2s, background 0.2s; } .uploaded-file .file-status-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 15px; } .uploaded-file .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uploaded-file .file-size { color: var(--color-text-soft); font-size: 12px; flex-shrink: 0; } .uploaded-file .file-error-msg { color: var(--color-danger); font-size: 11px; flex-shrink: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Upload states */ .uploaded-file.uploading { border-color: #c7d2fe; background: #f8faff; } .uploaded-file.uploading .file-status-icon { color: var(--color-primary); } .uploaded-file.upload-success { border-color: #a7f3d0; background: #ecfdf5; } .uploaded-file.upload-success .file-status-icon { color: #10b981; } .uploaded-file.upload-error { border-color: #fecaca; background: #fef2f2; } .uploaded-file.upload-error .file-status-icon { color: var(--color-danger); } /* Progress bar inside file item */ .file-progress-bar { position: absolute; bottom: 0; right: 0; left: 0; height: 3px; background: #eef0f7; } .file-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-2) 100%); transition: width 0.2s ease; width: 0%; border-radius: 0 0 8px 8px; } .uploaded-file .remove-file { width: 22px; height: 22px; border: none; background: transparent; color: var(--color-text-soft); border-radius: 50%; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; line-height: 1; } .uploaded-file .remove-file:hover { background: var(--color-danger-soft); color: var(--color-danger); } .uploaded-file.upload-error .remove-file { color: var(--color-danger); } /* -------------------------------------------- Signature Field -------------------------------------------- */ .signature-area { border: 2px dashed #c7d2fe; background: #fafbff; border-radius: var(--radius-sm); padding: 20px; text-align: center; cursor: pointer; transition: all 0.15s; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .signature-area:hover { border-color: var(--color-primary); background: var(--color-primary-soft); } .signature-area i { font-size: 32px; color: var(--color-primary); margin-bottom: 8px; } .signature-area p { margin: 0; color: var(--color-text-muted); font-size: 14px; } .signature-preview { max-width: 100%; max-height: 80px; } .signature-actions { margin-top: 10px; } .btn-clear-signature { font-size: 13px; color: var(--color-danger); background: none; border: none; cursor: pointer; font-family: inherit; } /* -------------------------------------------- Rating -------------------------------------------- */ .rating-container { display: flex; gap: 8px; flex-direction: row-reverse; } .rating-star { font-size: 32px; color: #e2e8f0; cursor: pointer; transition: all 0.15s; } .rating-star:hover, .rating-star.active { color: #fbbf24; transform: scale(1.1); } /* -------------------------------------------- Header / Paragraph / Divider (margins are 0 - the flex gap handles spacing) -------------------------------------------- */ .field-header { margin: 6px 0 0; width: 100%; flex: 0 0 100%; } .field-header h3 { margin: 0; font-size: 17px; color: var(--color-text); font-weight: 600; line-height: 1.4; } .field-paragraph { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.65; width: 100%; flex: 0 0 100%; } .field-divider { border: none; border-top: 1px solid var(--color-border-soft); margin: 4px 0; width: 100%; flex: 0 0 100%; } /* Inline Text with Fields */ .field-inline-text { font-size: 15px; line-height: 2.4; color: var(--color-text); width: 100%; flex: 0 0 100%; } .inline-text-input { display: inline-block; border: none; border-bottom: 1.5px solid var(--color-primary); background: transparent; padding: 2px 6px; font-size: 14px; font-family: inherit; color: var(--color-text); min-width: 100px; text-align: center; outline: none; transition: border-color 0.15s, background 0.15s; margin: 0 2px; vertical-align: baseline; } .inline-text-input:focus { border-bottom-color: var(--color-primary-dark, #3949ab); background: rgba(92, 107, 192, 0.04); } .inline-text-input::placeholder { color: var(--color-primary); opacity: 0.5; font-size: 12px; } .inline-text-input.inline-required { border-bottom-color: #e53935; } .inline-text-input.inline-required::placeholder { color: #e53935; opacity: 0.6; } /* -------------------------------------------- Form Footer -------------------------------------------- */ .form-footer { padding: 18px 26px; background: var(--color-card-soft); border-top: 1px solid var(--color-border-soft); } .btn-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%); color: #fff; border: none; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s; font-family: inherit; box-shadow: 0 8px 18px rgba(99, 102, 241, 0.28); } .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(99, 102, 241, 0.36); } .btn-submit:active { transform: translateY(0); } .btn-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; } .btn-submit i { font-size: 18px; } /* -------------------------------------------- Success State -------------------------------------------- */ .form-success { background: var(--color-card); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: 60px 40px; text-align: center; box-shadow: var(--shadow-card); width: 100%; max-width: 500px; margin-top: 50px; } .success-icon { width: 100px; height: 100px; background: linear-gradient(135deg, var(--color-success-1) 0%, var(--color-success-2) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; animation: successPulse 0.6s ease; box-shadow: 0 12px 28px rgba(16, 185, 129, 0.28); } @keyframes successPulse { 0% { transform: scale(0); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .success-icon i { font-size: 48px; color: #fff; } .form-success h2 { margin: 0 0 12px; font-size: 24px; color: var(--color-text); font-weight: 600; } .form-success p { margin: 0 0 24px; color: var(--color-text-muted); font-size: 15px; line-height: 1.6; } .success-actions { display: flex; justify-content: center; gap: 12px; } /* Auto-redirect progress bar */ .redirect-progress { max-width: 360px; margin: 0 auto 20px; } .redirect-progress-bar { width: 100%; height: 8px; background: var(--color-border, #e2e8f0); border-radius: 999px; overflow: hidden; } .redirect-progress-fill { height: 100%; width: 0%; background: var(--color-primary, #1a73e8); border-radius: 999px; } .redirect-progress-text { display: block; margin-top: 8px; font-size: 13px; color: var(--color-text-muted, #64748b); text-align: center; } /* -------------------------------------------- Signature Modal -------------------------------------------- */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-overlay.active { display: flex; } .modal-container { background: var(--color-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-strong); width: 100%; max-width: 540px; overflow: hidden; border: 1px solid var(--color-border-soft); } .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--color-border-soft); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { margin: 0; font-size: 18px; color: var(--color-text); font-weight: 600; } .modal-close { width: 32px; height: 32px; border: none; background: var(--color-card-soft); border-radius: 8px; color: var(--color-text-muted); cursor: pointer; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .modal-close:hover { background: var(--color-primary-soft); color: var(--color-primary); } .modal-body { padding: 24px; text-align: center; } #signatureCanvas { border: 2px solid var(--color-border); border-radius: var(--radius-sm); cursor: crosshair; touch-action: none; background: #ffffff; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--color-border-soft); display: flex; justify-content: flex-end; gap: 10px; } .btn-secondary { padding: 10px 20px; background: var(--color-card-soft); color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .btn-secondary:hover { background: #eef0f7; color: var(--color-text); } .btn-primary { padding: 10px 20px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 6px 14px rgba(99, 102, 241, 0.25); transition: transform 0.15s, box-shadow 0.2s; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(99, 102, 241, 0.32); } /* -------------------------------------------- Preview Mode Banner -------------------------------------------- */ .preview-banner { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(135deg, #fde68a 0%, #fdba74 100%); color: #7c2d12; text-align: center; padding: 10px; font-size: 14px; font-weight: 600; z-index: 1001; box-shadow: 0 4px 14px rgba(251, 146, 60, 0.25); } .preview-banner a { color: #7c2d12 !important; text-decoration: underline; } .preview-banner + .fill-form-wrapper { padding-top: 60px; } /* -------------------------------------------- Responsive -------------------------------------------- */ @media (max-width: 768px) { .fill-form-wrapper { padding: 16px; } .form-container { border-radius: var(--radius-md); } .form-header { padding: 30px 20px; } .form-header h1 { font-size: 22px; } .form-body { padding: 20px; } .form-group.half-width, .form-group.third-width, .form-group.quarter-width { flex: 0 0 100%; width: 100%; } .form-footer { padding: 20px; } .auth-container { padding: 28px 22px; } } /* ============================================ Toast Notifications ============================================ */ #ff-toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .ff-toast { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.5; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15); pointer-events: auto; opacity: 0; transform: translateY(-16px); transition: opacity 0.3s, transform 0.3s; max-width: 460px; text-align: right; } .ff-toast i { font-size: 18px; flex-shrink: 0; } .ff-toast-show { opacity: 1; transform: translateY(0); } .ff-toast-hide { opacity: 0; transform: translateY(-12px); } .ff-toast-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .ff-toast-error i { color: #dc2626; } .ff-toast-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; } .ff-toast-warning i { color: #f59e0b; } .ff-toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .ff-toast-success i { color: #10b981; } /* ============================================ Privacy Consent Modal ============================================ */ .privacy-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 100001; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s; } .privacy-modal-overlay.visible { opacity: 1; } .privacy-modal { background: #fff; border-radius: 16px; width: 92%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); transform: translateY(20px); transition: transform 0.25s; overflow: hidden; } .privacy-modal-overlay.visible .privacy-modal { transform: translateY(0); } .privacy-modal-header { padding: 18px 24px; font-size: 17px; font-weight: 600; color: #1a1f36; border-bottom: 1px solid #eef0f7; display: flex; align-items: center; gap: 10px; } .privacy-modal-header i { color: var(--color-primary, #4f6ef7); font-size: 20px; } .privacy-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; font-size: 14px; line-height: 1.8; color: #4a5568; } .privacy-modal-consent { padding: 14px 24px; border-top: 1px solid #eef0f7; background: #f9fafb; } .privacy-modal-consent label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: #374151; } .privacy-modal-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-primary, #4f6ef7); } .privacy-modal-footer { padding: 14px 24px; display: flex; justify-content: flex-start; gap: 10px; border-top: 1px solid #eef0f7; } .privacy-btn-cancel { padding: 10px 24px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #6b7280; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .privacy-btn-cancel:hover { background: #f3f4f6; color: #374151; } .privacy-btn-confirm { padding: 10px 28px; border: none; border-radius: 8px; background: var(--color-primary, #4f6ef7); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .privacy-btn-confirm:hover:not(:disabled) { filter: brightness(1.08); } .privacy-btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================ Duplicate Submission Block ============================================ */ .duplicate-block { text-align: center; padding: 60px 30px; animation: fadeInUp 0.4s ease; } .duplicate-block-icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: #fef3c7; display: flex; align-items: center; justify-content: center; } .duplicate-block-icon i { font-size: 32px; color: #d97706; } .duplicate-block-title { font-size: 22px; font-weight: 700; color: #1a1f36; margin: 0 0 12px; } .duplicate-block-msg { font-size: 15px; color: #6b7280; line-height: 1.7; max-width: 400px; margin: 0 auto; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ Step Indicator (Multi-Step Form) ============================================ */ .step-indicator { display: flex; align-items: center; justify-content: center; gap: 0; padding: 16px 12px 24px; flex-wrap: wrap; } .step-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; min-width: 50px; } .step-dot-num { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: #e8eaef; color: #8895a7; transition: all 0.25s; border: 2px solid transparent; } .step-dot.active .step-dot-num { background: var(--ff-primary, #4f6ef7); color: #fff; border-color: var(--ff-primary, #4f6ef7); box-shadow: 0 2px 10px rgba(79, 110, 247, 0.3); } .step-dot.completed .step-dot-num { background: #34c38f; color: #fff; border-color: #34c38f; } .step-dot-label { font-size: 11px; color: #8895a7; font-weight: 500; max-width: 80px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .step-dot.active .step-dot-label { color: var(--ff-primary, #4f6ef7); font-weight: 600; } .step-dot.completed .step-dot-label { color: #34c38f; } .step-connector { width: 40px; height: 2px; background: #e0e4e9; margin-top: -18px; flex-shrink: 0; transition: background 0.25s; } .step-connector.completed { background: #34c38f; } /* Step Navigation Buttons */ .step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0 4px; margin-top: 12px; border-top: 1px solid #f0f1f5; } .step-nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; font-family: inherit; } .step-nav-next { background: var(--ff-primary, #4f6ef7); color: #fff; margin-inline-start: auto; } .step-nav-next:hover { background: var(--ff-primary-dark, #3d5bd9); transform: translateX(-2px); } .step-nav-prev { background: #f4f5f7; color: #697386; } .step-nav-prev:hover { background: #e8eaef; color: #1a1f36; } /* ============================================ Welcome Message Modal ============================================ */ .welcome-modal-overlay { position: fixed; inset: 0; background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; opacity: 0; transition: opacity 0.25s; } .welcome-modal-overlay.visible { opacity: 1; } .welcome-modal { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); overflow: hidden; animation: welcomeSlideUp 0.35s ease; direction: rtl; } @keyframes welcomeSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .welcome-modal-body { padding: 32px 28px 20px; font-size: 15px; line-height: 1.8; color: #1a1f36; max-height: 55vh; overflow-y: auto; } .welcome-modal-footer { padding: 12px 28px 24px; display: flex; justify-content: center; } .welcome-btn-start { display: inline-flex; align-items: center; gap: 8px; padding: 12px 36px; border-radius: 10px; border: none; background: var(--ff-primary, #4f6ef7); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; } .welcome-btn-start:hover { background: var(--ff-primary-dark, #3d5bd9); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79, 110, 247, 0.3); } /* Managed List Autocomplete */ .managed-list-autocomplete { position: relative; } .managed-list-autocomplete .ml-search-input { width: 100%; } .ml-dropdown { position: fixed; z-index: 10000; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.14); } .ml-dropdown .ml-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background 0.15s; } .ml-dropdown .ml-item:hover { background: #f0f4ff; } .ml-dropdown .ml-item strong { display: block; font-size: 14px; } .ml-dropdown .ml-item .ml-item-contact { font-size: 12px; color: #888; } .ml-dropdown .ml-no-results { padding: 12px; text-align: center; color: #999; } .ml-add-btn { margin-top: 8px; background: none; border: 1px dashed #4f6ef7; color: #4f6ef7; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: all 0.2s; } .ml-add-btn:hover { background: #f0f4ff; } /* Add Item Modal */ .ml-add-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; } .ml-add-modal { position: relative; background: #fff; border-radius: 12px; padding: 24px; width: 90%; max-width: 400px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); } .ml-add-close { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px; border: none; background: #f1f5f9; color: #64748b; border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .ml-add-close:hover { background: #e2e8f0; color: #1e293b; } .ml-add-modal h3 { margin: 0 0 16px; font-size: 18px; } .ml-add-field { margin-bottom: 12px; } .ml-add-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; } .ml-add-actions { display: flex; gap: 8px; margin-top: 16px; } .ml-add-actions .btn { flex: 1; padding: 10px; border-radius: 8px; border: none; cursor: pointer; font-weight: 500; } .ml-add-actions .btn-primary { background: #4f6ef7; color: #fff; } .ml-add-actions .btn-secondary { background: #f0f0f0; color: #333; } /* Form Toast */ .form-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); padding: 12px 24px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; z-index: 99999; transition: transform 0.3s ease; opacity: 0.95; } .form-toast.show { transform: translateX(-50%) translateY(0); } .form-toast-success { background: #2ecc71; } .form-toast-error { background: #e74c3c; } .form-toast-warning { background: #f39c12; }