/* ===========================================
   SEMBI FORM BUILDER - FRONTEND BASE
   =========================================== */

.sfb-form-wrapper {
    width: 100%;
}

.sfb-form-wrapper *,
.sfb-form-wrapper *::before,
.sfb-form-wrapper *::after {
    box-sizing: border-box;
}

/* Animations */
@keyframes sfb-spin {
    to { transform: rotate(360deg); }
}

@keyframes sfb-fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sfb-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.sfb-submit-loading svg {
    animation: sfb-spin 1s linear infinite;
}

.sfb-message {
    animation: sfb-fadeIn 0.3s ease;
}

.sfb-form.sfb-submitted .sfb-form-grid {
    display: none;
}

.sfb-field-error .sfb-input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    animation: sfb-shake 0.3s ease;
}

/* Placeholder styling */
.sfb-form .sfb-input::placeholder {
    opacity: 0.5;
}

/* Accessibility */
.sfb-form .sfb-input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* File input */
.sfb-file-input {
    cursor: pointer;
}

/* Range input */
.sfb-range {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    outline: none;
}

/* Print */
@media print {
    .sfb-form-wrapper {
        box-shadow: none !important;
    }
}