/* © 2025 Spwig. All rights reserved. */

/**
 * Form Builder - Frontend Form Styles
 * Provides styling for rendered forms on the frontend
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
    /* Theme token integration - fallbacks for standalone usage */
    --form-primary-color: var(--theme-element-form-primary-color, var(--theme-color-primary, #3b82f6));
    --form-primary-hover: var(--theme-element-form-primary-hover, var(--theme-color-primary-hover, #2563eb));
    --form-success-color: var(--theme-element-form-success-color, var(--theme-color-success, #22c55e));
    --form-error-color: var(--theme-element-form-error-color, var(--theme-color-error, #ef4444));
    --form-warning-color: var(--theme-element-form-warning-color, var(--theme-color-warning, #f59e0b));
    --form-text-color: var(--theme-element-form-text-color, var(--theme-color-text, #374151));
    --form-text-muted: var(--theme-element-form-text-muted, var(--theme-color-text-muted, #6b7280));
    --form-border-color: var(--theme-element-form-border-color, var(--theme-color-border, #d1d5db));
    --form-bg-color: var(--theme-element-form-bg-color, var(--theme-color-surface, #ffffff));
    --form-bg-light: var(--theme-element-form-bg-light, var(--theme-color-background-secondary, #f3f4f6));
    --form-input-bg: var(--theme-element-form-input-bg, var(--theme-color-surface, #ffffff));
    --form-input-border: var(--theme-element-form-input-border, var(--theme-color-border, #d1d5db));
    --form-input-focus-border: var(--theme-element-form-input-focus-border, var(--theme-color-primary, #3b82f6));
    --form-input-disabled-bg: var(--theme-element-form-input-disabled-bg, var(--theme-color-background-secondary, #f3f4f6));
    --form-radius: var(--theme-element-form-input-radius, var(--theme-radius-md, 0.5rem));
    --form-shadow: var(--theme-element-form-shadow, var(--theme-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1)));
    --form-transition: var(--theme-element-form-transition, all 0.2s ease);
    --form-focus-shadow: var(--theme-element-form-focus-shadow, 0 0 0 3px var(--theme-color-primary-light, rgba(59, 130, 246, 0.1)));
    --form-label-color: var(--theme-element-form-label-color, var(--theme-color-text, #374151));
    --form-label-size: var(--theme-element-form-label-size, var(--theme-font-size-sm, 0.875rem));
    --form-help-color: var(--theme-element-form-help-color, var(--theme-color-text-muted, #6b7280));
    --form-title-size: var(--theme-element-form-title-size, var(--theme-font-size-xl, 1.75rem));
    --form-heading-size: var(--theme-element-form-heading-size, var(--theme-font-size-lg, 1.25rem));
    --form-font-weight-bold: var(--theme-element-form-font-weight-bold, var(--theme-font-weight-semibold, 600));
    --form-font-weight-medium: var(--theme-element-form-font-weight-medium, var(--theme-font-weight-medium, 500));
    --form-spacing-lg: var(--theme-element-form-spacing-lg, var(--theme-space-6, 1.5rem));
    --form-spacing-md: var(--theme-element-form-spacing-md, var(--theme-space-4, 1rem));
    --form-spacing-sm: var(--theme-element-form-spacing-sm, var(--theme-space-3, 0.75rem));
    --form-spacing-xs: var(--theme-element-form-spacing-xs, var(--theme-space-2, 0.5rem));
    --form-container-max-width: var(--theme-element-form-container-max-width, 720px);
    --form-container-padding: var(--theme-element-form-container-padding, var(--theme-space-6, 2rem));
    --form-button-padding-x: var(--theme-element-form-button-padding-x, var(--theme-space-6, 1.5rem));
    --form-button-padding-y: var(--theme-element-form-button-padding-y, var(--theme-space-3, 0.75rem));
    --form-button-radius: var(--theme-element-form-button-radius, var(--theme-radius-md, 0.5rem));
    --form-checkbox-size: var(--theme-element-form-checkbox-size, 1.25rem);
    --form-star-empty-color: var(--theme-element-form-star-empty-color, var(--theme-color-border, #d1d5db));
    --form-star-filled-color: var(--theme-element-form-star-filled-color, #fbbf24);
    --form-progress-height: var(--theme-element-form-progress-height, 8px);
    --form-step-circle-size: var(--theme-element-form-step-circle-size, 36px);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.fb-hidden {
    display: none;
}

/* ==========================================================================
   Form Container
   ========================================================================== */

.form-container {
    max-width: var(--form-container-max-width);
    margin: 0 auto;
    padding: var(--form-container-padding);
}

.spwig-form {
    background: var(--form-bg-color);
    border-radius: var(--form-radius);
    box-shadow: var(--form-shadow);
    padding: var(--form-container-padding);
}

.form-title {
    font-size: var(--form-title-size);
    font-weight: var(--form-font-weight-bold);
    color: var(--form-text-color);
    margin: 0 0 var(--form-spacing-xs) 0;
}

.form-description {
    color: var(--form-text-muted);
    margin: 0 0 2rem 0;
    line-height: 1.6;
}

/* ==========================================================================
   Preview Banner
   ========================================================================== */

.preview-banner {
    background: linear-gradient(135deg, var(--form-primary-color) 0%, var(--form-primary-hover) 100%);
    color: white;
    padding: var(--form-spacing-md) var(--form-spacing-md);
    border-radius: var(--form-radius);
    margin-bottom: var(--form-spacing-lg);
}

.preview-banner-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.preview-banner-title i {
    font-size: 0.9rem;
}

.preview-banner-info {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.9;
    line-height: 1.4;
}

/* ==========================================================================
   Form Fields
   ========================================================================== */

.form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.form-field {
    width: 100%;
    margin-bottom: 0;
}

.form-field.field-width-half {
    width: calc(50% - 0.75rem);
}

.form-field.field-width-third {
    width: calc(33.333% - 1rem);
}

@media (max-width: 640px) {
    .form-field.field-width-half,
    .form-field.field-width-third {
        width: 100%;
    }
}

/* ==========================================================================
   Labels & Help Text
   ========================================================================== */

.field-label {
    display: block;
    font-weight: var(--form-font-weight-medium);
    font-size: var(--form-label-size);
    color: var(--form-label-color);
    margin-bottom: var(--form-spacing-xs);
}

.required-indicator {
    color: var(--form-error-color);
    margin-left: 0.25rem;
}

.field-help-text {
    display: block;
    font-size: 0.875rem;
    color: var(--form-text-muted);
    margin-top: 0.375rem;
}

.field-error {
    display: none;
    font-size: 0.875rem;
    color: var(--form-error-color);
    margin-top: 0.375rem;
}

.field-error:not(:empty) {
    display: block;
}

/* ==========================================================================
   Input Styles
   ========================================================================== */

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--form-text-color);
    background: var(--form-input-bg);
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-radius);
    transition: var(--form-transition);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--form-primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
    background: #f3f4f6;
    cursor: not-allowed;
}

.form-input.error,
.form-textarea.error,
.form-select.error {
    border-color: var(--form-error-color);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* ==========================================================================
   Checkbox & Radio Styles
   ========================================================================== */

.checkbox-wrapper,
.checkbox-item,
.radio-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.form-checkbox,
.form-radio {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    accent-color: var(--form-primary-color);
    cursor: pointer;
}

.checkbox-label,
.radio-label {
    color: var(--form-text-color);
    cursor: pointer;
    line-height: 1.5;
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ==========================================================================
   Star Rating
   ========================================================================== */

.rating-stars-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stars-container {
    display: flex;
    gap: 0.25rem;
}

.stars-container.size-sm .star-btn { font-size: 1rem; }
.stars-container.size-md .star-btn { font-size: 1.25rem; }
.stars-container.size-lg .star-btn { font-size: 1.5rem; }
.stars-container.size-xl .star-btn { font-size: 2rem; }

.star-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--form-star-empty-color);
    transition: var(--form-transition);
    position: relative;
}

.star-btn:hover,
.star-btn.active {
    color: var(--star-color, var(--form-star-filled-color));
}

.star-btn .star-icon-empty {
    display: block;
}

.star-btn .star-icon {
    display: none;
}

.star-btn.active .star-icon-empty {
    display: none;
}

.star-btn.active .star-icon {
    display: block;
}

.rating-value-display {
    font-size: 0.875rem;
    color: var(--form-text-muted);
}

/* ==========================================================================
   Likert Scale
   ========================================================================== */

.rating-likert-wrapper {
    width: 100%;
}

.likert-scale {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.rating-likert-wrapper.layout-vertical .likert-scale {
    flex-direction: column;
}

.likert-option {
    flex: 1;
    text-align: center;
}

.rating-likert-wrapper.layout-vertical .likert-option {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.likert-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.likert-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border: 2px solid var(--form-border-color);
    border-radius: var(--form-radius);
    cursor: pointer;
    transition: var(--form-transition);
}

.rating-likert-wrapper.layout-vertical .likert-option label {
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    width: 100%;
}

.likert-option input[type="radio"]:checked + label {
    border-color: var(--form-primary-color);
    background: rgba(59, 130, 246, 0.05);
}

.likert-option input[type="radio"]:focus + label {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.likert-value {
    font-weight: 600;
    color: var(--form-text-color);
}

.likert-label {
    font-size: 0.75rem;
    color: var(--form-text-muted);
    margin-top: 0.25rem;
}

@media (max-width: 640px) {
    .likert-option label {
        padding: 0.75rem 0.25rem;
    }

    .likert-label {
        display: none;
    }
}

/* ==========================================================================
   NPS Scale
   ========================================================================== */

.rating-nps-wrapper {
    width: 100%;
}

.nps-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--form-text-muted);
}

.nps-scale {
    display: flex;
    gap: 0.25rem;
}

.nps-option {
    flex: 1;
}

.nps-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.nps-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 2px solid var(--form-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    font-weight: 600;
    transition: var(--form-transition);
}

.nps-option.detractor label { border-color: #fecaca; }
.nps-option.passive label { border-color: #fef08a; }
.nps-option.promoter label { border-color: #bbf7d0; }

.nps-option input[type="radio"]:checked + label {
    color: white;
}

.nps-option.detractor input[type="radio"]:checked + label {
    background: var(--form-error-color);
    border-color: var(--form-error-color);
}

.nps-option.passive input[type="radio"]:checked + label {
    background: var(--form-warning-color);
    border-color: var(--form-warning-color);
}

.nps-option.promoter input[type="radio"]:checked + label {
    background: var(--form-success-color);
    border-color: var(--form-success-color);
}

.nps-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    font-size: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.legend-item::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-item.detractor::before { background: var(--form-error-color); }
.legend-item.passive::before { background: var(--form-warning-color); }
.legend-item.promoter::before { background: var(--form-success-color); }

@media (max-width: 640px) {
    .nps-option label {
        height: 40px;
        font-size: 0.875rem;
    }

    .nps-legend {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   File Upload
   ========================================================================== */

.file-upload-wrapper {
    width: 100%;
}

.file-dropzone {
    position: relative;
    border: 2px dashed var(--form-border-color);
    border-radius: var(--form-radius);
    padding: 2rem;
    text-align: center;
    transition: var(--form-transition);
    cursor: pointer;
}

.file-dropzone:hover,
.file-dropzone.dragover {
    border-color: var(--form-primary-color);
    background: rgba(59, 130, 246, 0.02);
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-icon {
    font-size: 2.5rem;
    color: var(--form-primary-color);
    margin-bottom: 1rem;
}

.dropzone-text {
    color: var(--form-text-color);
    margin: 0 0 0.5rem 0;
}

.browse-link {
    color: var(--form-primary-color);
    font-weight: 500;
}

.dropzone-hint {
    font-size: 0.875rem;
    color: var(--form-text-muted);
    margin: 0;
}

.file-list {
    margin-top: 1rem;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: var(--form-radius);
    margin-bottom: 0.5rem;
}

.file-item-icon {
    color: var(--form-primary-color);
}

.file-item-info {
    flex: 1;
}

.file-item-name {
    font-weight: 500;
    color: var(--form-text-color);
}

.file-item-size {
    font-size: 0.875rem;
    color: var(--form-text-muted);
}

.file-item-remove {
    background: none;
    border: none;
    color: var(--form-error-color);
    cursor: pointer;
    padding: 0.25rem;
}

/* ==========================================================================
   Product Select
   ========================================================================== */

.product-select-wrapper {
    width: 100%;
}

.product-search {
    position: relative;
}

.product-search-input {
    padding-left: 2.5rem;
}

.product-search .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--form-text-muted);
}

.selected-products {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.selected-product {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f3f4f6;
    border-radius: var(--form-radius);
}

.selected-product-remove {
    background: none;
    border: none;
    color: var(--form-text-muted);
    cursor: pointer;
    padding: 0;
}

.product-results {
    margin-top: 0.5rem;
    border: 1px solid var(--form-border-color);
    border-radius: var(--form-radius);
    max-height: 250px;
    overflow-y: auto;
}

.product-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: var(--form-transition);
}

.product-result-item:hover {
    background: #f9fafb;
}

.product-result-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.product-result-name {
    font-weight: 500;
    color: var(--form-text-color);
}

.product-result-price {
    font-size: 0.875rem;
    color: var(--form-text-muted);
}

/* ==========================================================================
   Layout Elements
   ========================================================================== */

.field-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--form-text-color);
    margin: 1.5rem 0 0.5rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--form-border-color);
}

.form-field:first-child .field-heading {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.field-heading-description {
    color: var(--form-text-muted);
    margin: 0;
}

.field-paragraph {
    color: var(--form-text-color);
    line-height: 1.6;
}

.field-divider {
    border: none;
    border-top: 1px solid var(--form-border-color);
    margin: 1.5rem 0;
}

/* ==========================================================================
   Multi-Step Progress
   ========================================================================== */

.form-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}

.form-progress::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--form-border-color);
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.step-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--form-bg-color);
    border: 2px solid var(--form-border-color);
    border-radius: 50%;
    font-weight: 600;
    color: var(--form-text-muted);
    transition: var(--form-transition);
}

.progress-step.active .step-number,
.progress-step.completed .step-number {
    border-color: var(--form-primary-color);
    background: var(--form-primary-color);
    color: white;
}

.progress-step.completed .step-number::after {
    content: '\2713';
}

.step-title {
    font-size: 0.875rem;
    color: var(--form-text-muted);
    white-space: nowrap;
}

.progress-step.active .step-title {
    color: var(--form-primary-color);
    font-weight: 500;
}

@media (max-width: 640px) {
    .step-title {
        display: none;
    }
}

/* ==========================================================================
   Form Steps
   ========================================================================== */

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.form-step .step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--form-text-color);
    margin: 0 0 0.5rem 0;
}

.form-step .step-description {
    color: var(--form-text-muted);
    margin: 0 0 1.5rem 0;
}

.step-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--form-border-color);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--form-border-color);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--form-radius);
    cursor: pointer;
    transition: var(--form-transition);
    border: none;
}

.btn-primary {
    background: var(--form-primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--form-primary-hover);
}

.btn-secondary {
    background: white;
    color: var(--form-text-color);
    border: 1px solid var(--form-border-color);
}

.btn-secondary:hover {
    background: #f9fafb;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Messages
   ========================================================================== */

.form-messages {
    display: none;
    padding: 1.5rem;
    border-radius: var(--form-radius);
    text-align: center;
}

.form-messages.success,
.form-messages.error {
    display: block;
}

.success-message {
    display: none;
    color: var(--form-success-color);
}

.error-message {
    display: none;
    color: var(--form-error-color);
}

.form-messages.success {
    background: rgba(34, 197, 94, 0.1);
}

.form-messages.success .success-message {
    display: block;
}

.form-messages.error {
    background: rgba(239, 68, 68, 0.1);
}

.form-messages.error .error-message {
    display: block;
}

/* ==========================================================================
   Honeypot
   ========================================================================== */

.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* ==========================================================================
   Page Builder Form Element
   ========================================================================== */

.fb-form {
    width: 100%;
}

.fb-form-wrapper {
    position: relative;
}

/* Form Header */
.fb-form-header {
    margin-bottom: 2rem;
    text-align: center;
}

.fb-form-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--form-text-color);
    margin: 0 0 0.5rem 0;
}

.fb-form-description {
    color: var(--form-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================================
   Step Indicators - Progress Bar
   ========================================================================== */

.fb-step-indicator--progress-bar {
    margin-bottom: 2rem;
}

.fb-progress-bar {
    height: 8px;
    background: var(--form-border-color);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.fb-progress-bar-fill {
    height: 100%;
    background: var(--form-primary-color);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.fb-progress-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.fb-progress-step {
    font-size: 0.875rem;
    color: var(--form-text-muted);
    text-align: center;
    flex: 1;
}

.fb-progress-step.active,
.fb-progress-step.completed {
    color: var(--form-primary-color);
    font-weight: 500;
}

/* ==========================================================================
   Step Indicators - Numbered Circles
   ========================================================================== */

.fb-step-indicator--numbered-circles {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 2rem;
    position: relative;
    padding: 0 1rem;
}

/* Connecting line */
.fb-step-indicator--numbered-circles::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--form-border-color);
    z-index: 0;
}

.fb-numbered-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    flex: 1;
    max-width: 150px;
}

.fb-step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--form-bg-color);
    border: 2px solid var(--form-border-color);
    border-radius: 50%;
    font-weight: 600;
    color: var(--form-text-muted);
    transition: var(--form-transition);
}

.fb-numbered-step.active .fb-step-number {
    border-color: var(--form-primary-color);
    background: var(--form-primary-color);
    color: white;
}

.fb-numbered-step.completed .fb-step-number {
    border-color: var(--form-success-color);
    background: var(--form-success-color);
    color: white;
}

.fb-numbered-step.completed .fb-step-number::after {
    content: '\2713';
    font-size: 1rem;
}

.fb-step-label {
    font-size: 0.875rem;
    color: var(--form-text-muted);
    text-align: center;
    line-height: 1.3;
}

.fb-numbered-step.active .fb-step-label {
    color: var(--form-primary-color);
    font-weight: 500;
}

@media (max-width: 640px) {
    .fb-step-label {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Step Indicators - Page Builder Form Element Styles
   These styles support the page builder form element template
   ========================================================================== */

/* Container for step circles - horizontal layout */
.fb-step-circles {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Individual step circle */
.fb-step-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.fb-step-circle__number {
    display: block;
}

.fb-step-circle__label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5rem;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Connector line between circles */
.fb-step-connector {
    flex: 1;
    min-width: 20px;
    max-width: 100px;
}

/* Progress bar container */
.fb-progress-bar {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.fb-progress-bar__fill {
    transition: width 0.3s ease;
}

.fb-progress-bar__text {
    text-align: center;
    font-size: 0.875rem;
    color: var(--form-text-muted, #6b7280);
    margin-bottom: 1.5rem;
}

/* Step indicator container */
.fb-form__step-indicator {
    margin-bottom: 1.5rem;
}

/* Hide required indicator */
.fb-form--hide-required .fb-field__required,
.fb-form--hide-required .required-indicator,
.fb-form--hide-required .fb-required {
    display: none !important;
}

/* Hide help text */
.fb-form--hide-help .fb-field__help,
.fb-form--hide-help .help-text,
.fb-form--hide-help .fb-help-text {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .fb-step-circles {
        gap: 0;
    }

    .fb-step-circle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.875rem;
    }

    .fb-step-circle__label {
        font-size: 0.75rem;
    }

    .fb-step-connector {
        min-width: 10px;
    }
}

/* ==========================================================================
   Step Indicators - Breadcrumb
   ========================================================================== */

.fb-step-indicator--breadcrumb {
    margin-bottom: 2rem;
}

.fb-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-radius: var(--form-radius);
}

.fb-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--form-text-muted);
}

.fb-breadcrumb-item.active {
    color: var(--form-primary-color);
    font-weight: 500;
}

.fb-breadcrumb-item.completed {
    color: var(--form-success-color);
}

.fb-breadcrumb-item:not(:last-child)::after {
    content: '\203A';
    margin-left: 0.25rem;
    color: var(--form-border-color);
}

.fb-breadcrumb-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.fb-breadcrumb-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Step Indicators - Steps Text
   ========================================================================== */

.fb-step-indicator--steps-text {
    margin-bottom: 2rem;
    text-align: center;
}

.fb-steps-text {
    font-size: 0.875rem;
    color: var(--form-text-muted);
}

.fb-steps-text strong {
    color: var(--form-primary-color);
}

/* ==========================================================================
   Form Steps Container
   ========================================================================== */

.fb-form-steps {
    position: relative;
    overflow: hidden;
}

.fb-form-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.fb-form-step.active {
    display: block;
}

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

/* Step Header */
.fb-step-header {
    margin-bottom: 1.5rem;
}

.fb-step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--form-text-color);
    margin: 0 0 0.5rem 0;
}

.fb-step-description {
    color: var(--form-text-muted);
    margin: 0;
}

/* ==========================================================================
   Form Fields - Page Builder Integration
   ========================================================================== */

.fb-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.fb-field {
    width: 100%;
}

.fb-field--full {
    width: 100%;
}

.fb-field--half {
    width: calc(50% - 0.75rem);
}

.fb-field--third {
    width: calc(33.333% - 1rem);
}

@media (max-width: 640px) {
    .fb-field--half,
    .fb-field--third {
        width: 100%;
    }
}

/* Hidden fields (conditional logic) */
.fb-field[data-hidden="true"] {
    display: none;
}

/* Required indicator */
.form-required {
    color: var(--form-error-color);
    margin-left: 0.25rem;
}

/* ==========================================================================
   Field Styles - Minimal
   ========================================================================== */

.fb-form--style-minimal .form-input,
.fb-form--style-minimal .form-textarea,
.fb-form--style-minimal .form-select {
    border: none;
    border-bottom: 2px solid var(--form-border-color);
    border-radius: 0;
    padding: 0.75rem 0;
    background: transparent;
}

.fb-form--style-minimal .form-input:focus,
.fb-form--style-minimal .form-textarea:focus,
.fb-form--style-minimal .form-select:focus {
    border-color: var(--form-primary-color);
    box-shadow: none;
}

.fb-form--style-minimal .form-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Field Styles - Filled
   ========================================================================== */

.fb-form--style-filled .form-input,
.fb-form--style-filled .form-textarea,
.fb-form--style-filled .form-select {
    background: #f3f4f6;
    border: none;
    border-bottom: 2px solid transparent;
}

.fb-form--style-filled .form-input:focus,
.fb-form--style-filled .form-textarea:focus,
.fb-form--style-filled .form-select:focus {
    background: #e5e7eb;
    border-bottom-color: var(--form-primary-color);
    box-shadow: none;
}

/* ==========================================================================
   Field Styles - Outlined (Default)
   ========================================================================== */

/* Default outlined style is already in base styles */

/* ==========================================================================
   Form Actions - Step Navigation
   ========================================================================== */

.fb-form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--form-border-color);
}

.fb-step-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.fb-step-navigation .fb-btn-back {
    order: 1;
}

.fb-step-navigation .fb-btn-next,
.fb-step-navigation .fb-btn-submit {
    order: 2;
    margin-left: auto;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--form-radius);
    cursor: pointer;
    transition: var(--form-transition);
    border: none;
    text-decoration: none;
}

.fb-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Full Width */
.fb-form--button-full-width .fb-form-actions {
    display: block;
}

.fb-form--button-full-width .fb-btn {
    width: 100%;
}

.fb-form--button-full-width .fb-step-navigation {
    flex-direction: column-reverse;
    gap: 0.75rem;
}

.fb-form--button-full-width .fb-step-navigation .fb-btn {
    width: 100%;
    margin-left: 0;
}

/* Button Style - Primary */
.fb-btn--primary {
    background: var(--form-primary-color);
    color: white;
}

.fb-btn--primary:hover {
    background: var(--form-primary-hover);
}

/* Button Style - Secondary */
.fb-btn--secondary {
    background: #6b7280;
    color: white;
}

.fb-btn--secondary:hover {
    background: #4b5563;
}

/* Button Style - Outline */
.fb-btn--outline {
    background: transparent;
    color: var(--form-primary-color);
    border: 2px solid var(--form-primary-color);
}

.fb-btn--outline:hover {
    background: var(--form-primary-color);
    color: white;
}

/* Button Style - Ghost */
.fb-btn--ghost {
    background: transparent;
    color: var(--form-primary-color);
}

.fb-btn--ghost:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   Messages - Success & Error
   ========================================================================== */

.fb-form-messages {
    display: none;
}

.fb-form-messages.show {
    display: block;
}

.fb-message-success,
.fb-message-error {
    padding: 1.5rem;
    border-radius: var(--form-radius);
    text-align: center;
}

.fb-message-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--form-success-color);
}

.fb-message-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--form-error-color);
}

.fb-message-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.fb-message-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.fb-message-text {
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.fb-form--loading {
    pointer-events: none;
}

.fb-form--loading .fb-btn-submit,
.fb-form--loading .fb-btn-next {
    position: relative;
    color: transparent;
}

.fb-form--loading .fb-btn-submit::after,
.fb-form--loading .fb-btn-next::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Validation Display
   ========================================================================== */

/* Inline validation */
.fb-form--validation-inline .form-error {
    display: none;
    font-size: 0.875rem;
    color: var(--form-error-color);
    margin-top: 0.375rem;
}

.fb-form--validation-inline .fb-field.has-error .form-error {
    display: block;
}

.fb-form--validation-inline .fb-field.has-error .form-input,
.fb-form--validation-inline .fb-field.has-error .form-textarea,
.fb-form--validation-inline .fb-field.has-error .form-select {
    border-color: var(--form-error-color);
}

/* Tooltip validation */
.fb-form--validation-tooltip .form-error {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--form-error-color);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--form-radius);
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 100;
    margin-bottom: 0.25rem;
}

.fb-form--validation-tooltip .form-error::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 1rem;
    border: 6px solid transparent;
    border-top-color: var(--form-error-color);
}

.fb-form--validation-tooltip .fb-field {
    position: relative;
}

.fb-form--validation-tooltip .fb-field.has-error .form-error {
    display: block;
}

/* Summary validation */
.fb-form--validation-summary .fb-validation-summary {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--form-error-color);
    border-radius: var(--form-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.fb-form--validation-summary .fb-validation-summary-title {
    font-weight: 600;
    color: var(--form-error-color);
    margin: 0 0 0.5rem 0;
}

.fb-form--validation-summary .fb-validation-summary-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--form-error-color);
}

.fb-form--validation-summary .fb-validation-summary-list li {
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   Form Placeholder / Empty State
   ========================================================================== */

.fb-form-placeholder {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--form-text-muted);
}

.fb-form-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.fb-form-placeholder p {
    margin: 0;
}

/* ==========================================================================
   Rating Fields - Page Builder
   ========================================================================== */

.form-star-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-star {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--form-star-empty-color);
    font-size: 1.5rem;
    transition: var(--form-transition);
}

.form-star:hover,
.form-star.active {
    color: var(--form-star-filled-color);
}

.form-star.active i.far {
    display: none;
}

.form-star.active i.fas {
    display: inline;
}

.form-star i.fas {
    display: none;
}

/* NPS Rating */
.form-nps-rating {
    width: 100%;
}

.form-nps-scale {
    display: flex;
    gap: 0.25rem;
}

.form-nps-btn {
    flex: 1;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--form-border-color);
    background: var(--form-bg-color);
    border-radius: 0.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--form-transition);
}

.form-nps-btn:hover {
    border-color: var(--form-primary-color);
}

.form-nps-btn.active {
    background: var(--form-primary-color);
    border-color: var(--form-primary-color);
    color: white;
}

.form-nps-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--form-text-muted);
}

/* Likert Scale */
.form-likert-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.form-likert-option {
    flex: 1;
    min-width: 80px;
}

.form-likert-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.form-likert-label {
    display: block;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 2px solid var(--form-border-color);
    border-radius: var(--form-radius);
    cursor: pointer;
    transition: var(--form-transition);
    font-size: 0.875rem;
}

.form-likert-option input[type="radio"]:checked + .form-likert-label {
    border-color: var(--form-primary-color);
    background: rgba(59, 130, 246, 0.05);
}

.form-likert-option input[type="radio"]:focus + .form-likert-label {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   File Upload - Page Builder
   ========================================================================== */

.form-file-upload {
    position: relative;
}

.form-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.form-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 2px dashed var(--form-border-color);
    border-radius: var(--form-radius);
    cursor: pointer;
    transition: var(--form-transition);
    color: var(--form-text-muted);
}

.form-file-label:hover {
    border-color: var(--form-primary-color);
    background: rgba(59, 130, 246, 0.02);
}

.form-file-label i {
    font-size: 1.5rem;
    color: var(--form-primary-color);
}

.form-file-info {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--form-text-muted);
}

/* ==========================================================================
   Checkbox & Radio - Page Builder
   ========================================================================== */

.form-checkbox,
.form-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.form-checkbox__input,
.form-radio__input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    accent-color: var(--form-primary-color);
    cursor: pointer;
}

.form-checkbox__label,
.form-radio__label {
    color: var(--form-text-color);
    line-height: 1.5;
}

.form-checkbox-group,
.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ==========================================================================
   Layout Elements - Page Builder
   ========================================================================== */

.fb-field__heading {
    margin: 1.5rem 0 1rem 0;
}

.fb-field__heading h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--form-text-color);
    margin: 0 0 0.25rem 0;
}

.fb-field__heading p {
    color: var(--form-text-muted);
    margin: 0;
    font-size: 0.875rem;
}

.fb-field__paragraph {
    color: var(--form-text-color);
    line-height: 1.6;
}

.fb-field__paragraph p {
    margin: 0;
}

.fb-field__divider {
    border: none;
    border-top: 1px solid var(--form-border-color);
    margin: 1.5rem 0;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .fb-form-header {
        text-align: left;
    }

    .fb-form-title {
        font-size: 1.5rem;
    }

    .fb-step-indicator--numbered-circles {
        padding: 0;
    }

    .fb-step-indicator--numbered-circles::before {
        left: 5%;
        right: 5%;
    }

    .fb-step-number {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .form-nps-btn {
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
    }

    .form-likert-scale {
        flex-direction: column;
    }

    .form-likert-option {
        min-width: 100%;
    }
}

/* ==========================================================================
   Form Visibility Toggle Classes (for live preview)
   ========================================================================== */

/* Hide required indicators when toggled off */
.fb-form--hide-required .form-required {
    display: none !important;
}

/* Hide help text when toggled off */
.fb-form--hide-help .form-help-text {
    display: none !important;
}