/* Email confirmation layout */
.fb-email-confirm-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .fb-email-confirm-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Row grid layout — single column on mobile, multi-column from md breakpoint up */
.fb-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: start;
}

.fb-row > .fb-row-cell {
    min-width: 0;
}

@media (min-width: 768px) {
    .fb-row.fb-row-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .fb-row.fb-row-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fb-row.fb-row-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fb-row.fb-row-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fb-row > .fb-row-cell:empty {
        display: none;
    }
}

/* Field helper notes */
.fb-help-text {
    color: var(--color-secondary-foreground, #64748b);
    font-size: 0.75rem;
    line-height: 1.25rem;
    margin-top: 0.25rem;
}

/* Progress Bar */
.form-progress-bar {
    height: 0.5rem;
    background: var(--color-border, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
}

.form-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary, #14b8a6), var(--color-primary-active, #0d9488));
    border-radius: 9999px;
    transition: width 0.4s ease;
}

/* Signature Pad */
.signature-pad-wrapper {
    position: relative;
    border: 2px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
    background: var(--color-background, #fff);
    overflow: hidden;
}
.signature-pad-wrapper canvas {
    display: block;
    width: 100%;
    touch-action: none;
}
.signature-pad-wrapper .signature-clear-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--color-secondary-foreground, #64748b);
    cursor: pointer;
}
.signature-pad-wrapper .signature-clear-btn:hover {
    background: #fee2e2;
    color: var(--color-danger, #dc2626);
    border-color: var(--color-danger, #dc2626);
}

/* Field Wrapper */
.form-field-wrapper {
    margin-bottom: 1rem;
}
.form-field-wrapper.has-error input,
.form-field-wrapper.has-error textarea,
.form-field-wrapper.has-error select,
.fb-field-group.has-error .select2-container--default .select2-selection--single,
.fb-field-group.has-error .select2-container--default .select2-selection--multiple,
.select2-container.has-error .select2-selection--single,
.select2-container.has-error .select2-selection--multiple {
    border-color: var(--color-danger, #ef4444);
}

/* Error Messages */
.field-error {
    font-size: 0.75rem;
    color: var(--color-danger, #ef4444);
    margin-top: 0.25rem;
}

.fb-field-group.has-success .fb-label {
    color: #15803d;
}

.fb-field-group.has-success .kt-input {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.field-feedback-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.field-feedback-alert__icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    font-size: 0.95rem;
}

.field-feedback-alert.is-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.field-feedback-alert.is-error .field-feedback-alert__icon {
    color: #dc2626;
}

.field-feedback-alert.is-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.field-feedback-alert.is-success .field-feedback-alert__icon {
    color: #16a34a;
}

/* Required Marker */
.required-marker {
    color: var(--color-danger, #ef4444);
    margin-left: 0.125rem;
}

/* Conditional Visibility */
.conditional-hidden {
    display: none !important;
}

/* File Upload Preview */
.file-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--color-muted, #f8fafc);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}
.file-preview .file-icon {
    font-size: 1.5rem;
    color: var(--color-primary, #14b8a6);
}
.file-preview .file-info {
    flex: 1;
    font-size: 0.8rem;
    color: var(--color-secondary-foreground, #475569);
}
.file-preview .file-remove {
    color: var(--color-secondary-foreground, #94a3b8);
    cursor: pointer;
}
.file-preview .file-remove:hover {
    color: var(--color-danger, #ef4444);
}

/* Section Styles */
.form-section {
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-foreground, #1e293b);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-primary, #14b8a6);
}

/* Section title ribbon (fieldset legend) */
fieldset.fb-section > legend {
    background-color: var(--color-primary, #14b8a6);
    color: #fff;
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    margin-bottom: 16px;
    display: block;
    width: 100%;
}

/* Preview Device Frames */
.preview-device-mobile {
    max-width: 375px;
    margin: 0 auto;
}
.preview-device-tablet {
    max-width: 768px;
    margin: 0 auto;
}

/* Success Animation */
@keyframes successBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}
.success-icon {
    animation: successBounce 1s ease;
}

/* Print styles */
@media print {
    .no-print { display: none !important; }
    .form-section { break-inside: avoid; }
    body { background: #fff; }
}

/* ──────────────────────────────────────────────────────────────────────
   Radio :indeterminate override.

   Per the CSS spec, an HTML radio button matches :indeterminate
   whenever no radio in its name group is checked. KTUI's stock
   .kt-radio:indeterminate rule paints those radios with the same
   filled primary background as :checked, which makes every empty
   radio in a freshly-rendered form look pre-selected. We reset the
   indeterminate state back to the unchecked (empty) appearance so
   only an actually :checked radio renders the filled dot.
   ────────────────────────────────────────────────────────────────── */
.kt-radio:indeterminate {
    background-color: var(--background);
    border-color: var(--input);
    background-image: none;
    color: inherit;
}

/* ──────────────────────────────────────────────────────────────────────
   KTSelect searchable dropdown: selected option highlight.

   Style only the .selected class (not aria-selected) so empty placeholder
   options with a stale aria-selected="true" are not highlighted too.
   ────────────────────────────────────────────────────────────────── */
.kt-select-option.selected {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

.kt-select-option.selected .kt-select-option-selected\:block {
    display: block;
}

/* ──────────────────────────────────────────────────────────────────────
   Toggle Switch (kt-toggle / kt-toggle-slider)
   Used by the "Toggle Switch" form builder element type.
   ────────────────────────────────────────────────────────────────── */
.kt-toggle {
    display: inline-block;
    width: 2.75rem;   /* 44px */
    height: 1.5rem;   /* 24px */
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

/* Hide the raw checkbox input inside the toggle (sr-only equivalent) */
.kt-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.kt-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}

.kt-toggle-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.2rem;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: left 0.2s ease;
}

/* When the peer checkbox is checked, the sibling .kt-toggle-slider activates */
input[type="checkbox"]:checked ~ .kt-toggle-slider,
input[type="checkbox"].peer:checked ~ .kt-toggle-slider {
    background-color: var(--color-primary, #14b8a6);
}

input[type="checkbox"]:checked ~ .kt-toggle-slider::after,
input[type="checkbox"].peer:checked ~ .kt-toggle-slider::after {
    left: calc(100% - 1.3rem);
}