/* Custom Styles */
.step-section.hidden {
    display: none;
}

/* Base touch-friendly improvements */
* {
    touch-action: manipulation;
}

/* Responsive layout for small screens */
@media (max-width: 1023px) {
    body {
        overflow: hidden;
    }
    
    .flex-col {
        flex-direction: column;
    }
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    #wizard-content h2 {
        font-size: 1.5rem;
    }
    
    /* Ensure inputs are at least 16px to prevent zoom on iOS */
    input, select, textarea, button {
        font-size: 16px !important;
        min-height: 44px;
        min-width: 44px;
    }
    
    .grid {
        gap: 0.75rem;
    }
    
    /* Prevent horizontal scroll */
    body {
        width: 100%;
        overflow-x: hidden;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .space-y-6 {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    }
    
    .px-6, .px-8 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Ensure preview is visible on mobile */
@media (max-width: 1023px) {
    #preview-wrapper {
        max-height: 400px;
        min-height: 600px;
    }
    
    .flex-1 {
        flex-basis: auto;
    }
}

/* Range Inputs */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
    height: 32px;
    display: flex;
    align-items: center;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #2563EB;
    cursor: pointer;
    margin-top: 0;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #E5E7EB;
    border-radius: 3px;
}

/* Firefox range input */
input[type=range]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #2563EB;
    cursor: pointer;
    border: none;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
input[type=range]::-moz-range-track {
    background: transparent;
    border: none;
}
input[type=range]::-moz-range-progress {
    background: #2563EB;
    height: 6px;
    border-radius: 3px;
}

/* Custom Toggle Switch for checkboxes */
.toggle-checkbox:checked {
    right: 0;
    border-color: #2563EB;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #2563EB;
}

/* Loader Animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

/* Scrollbar styling for the preview container if needed */
#preview-wrapper::-webkit-scrollbar {
    width: 6px;
}
#preview-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#preview-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
#preview-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar */
#preview-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* AI Generation Loading State */
.ai-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Device preview wrapper sizing */
.device-mobile #preview-wrapper {
    width: 375px !important;
    max-width: calc(100vw - 32px);
    margin: 0 auto;
}

.device-tablet #preview-wrapper {
    width: 768px !important;
    max-width: calc(100vw - 32px);
    margin: 0 auto;
}

.device-desktop #preview-wrapper {
    width: 100% !important;
    max-width: 1200px;
}

/* Mobile accessibility improvements */
@media (max-width: 640px) {
    button {
        padding: 0.5rem 1rem;
        min-height: 44px;
    }
    
    a {
        padding: 0.25rem;
        display: inline-block;
    }
    
    .text-sm {
        font-size: 0.875rem;
    }
    
    header, footer {
        padding: 0.75rem;
    }
    
    /* Improve button tapping on mobile */
    button, a[role="button"] {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
    
    /* Better form layout for mobile */
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}