/* Wizard Container - Remove overflow restrictions */
.fi-fo-wizard {
    overflow: visible !important;
    position: relative !important;
}

.fi-section:has(.fi-fo-wizard) {
    overflow: visible !important;
}

/* Also fix parent containers */
.fi-section-content-ctn:has(.fi-fo-wizard) {
    overflow: visible !important;
}

.fi-fo {
    overflow: visible !important;
}

/* Sticky Wizard Header - Enhanced for all devices including iPad */
.fi-fo-wizard[data-sticky-header="true"] .fi-fo-wizard-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sticky-wizard-top-offset, 5rem) !important;
    z-index: 40 !important;
    margin-bottom: 1rem !important;

    /* Background with blur effect */
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;

    /* Border and shadow */
    border-bottom: 1px solid rgb(229 231 235) !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08),
                0 4px 12px -4px rgba(0, 0, 0, 0.04) !important;

    /* Performance optimizations for smooth scrolling on all devices */
    will-change: transform !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;

    /* Prevent layout shifts */
    contain: layout style paint !important;

    /* Smooth transition */
    transition: box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* Dark mode support */
.dark .fi-fo-wizard[data-sticky-header="true"] .fi-fo-wizard-header {
    background-color: rgba(17, 24, 39, 0.98) !important;
    border-bottom-color: rgb(55 65 81) !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3),
                0 4px 12px -4px rgba(0, 0, 0, 0.2) !important;
}

/* Enhanced shadow on scroll */
.fi-fo-wizard[data-sticky-header="true"] .fi-fo-wizard-header.is-scrolled {
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12),
                0 8px 16px -4px rgba(0, 0, 0, 0.08) !important;
}

.dark .fi-fo-wizard[data-sticky-header="true"] .fi-fo-wizard-header.is-scrolled {
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4),
                0 8px 16px -4px rgba(0, 0, 0, 0.3) !important;
}

/* Mobile and tablet optimizations */
@media (max-width: 1024px) {
    .fi-fo-wizard[data-sticky-header="true"] .fi-fo-wizard-header {
        z-index: 45 !important;
        /* Stronger background for mobile */
        background-color: rgba(255, 255, 255, 0.99) !important;
    }

    .dark .fi-fo-wizard[data-sticky-header="true"] .fi-fo-wizard-header {
        background-color: rgba(17, 24, 39, 0.99) !important;
    }

    .fi-topbar {
        z-index: 50 !important;
    }

    .fi-sidebar {
        z-index: 48 !important;
    }

    .fi-main-ctn {
        z-index: 1 !important;
    }
}

/* iPad specific fixes */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
    .fi-fo-wizard[data-sticky-header="true"] .fi-fo-wizard-header {
        /* Force hardware acceleration on iPad */
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Step content padding adjustment */
.fi-fo-wizard[data-sticky-header="true"] .fi-fo-wizard-step {
    padding-top: 0.5rem !important;
}