/* --- Media Query for Tablets and Mobiles (Max Width 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Set up Vertical Split Container (unchanged) */
    body {
        height: 100vh;
        padding: 0;
    }
    .generator-container {
        flex-direction: column; /* Stack vertically on mobile */
        height: 100vh; /* Use full viewport height */
        padding: 0;
        gap: 0;
        align-items: center;
        /* overflow: hidden; */
    }

            .background-selector {
           
            max-width: 315px;
        }

    /* 2. Define 50% Height and Individual Scrolling for BOTH Columns (unchanged) */
    .preview-column,
    .input-column {
        flex: none; 
       min-width: 91%;
        width: 91%;
        height: 50vh; 
        overflow-y: auto; 
        position: static; 
        padding: 20px 15px; 
        max-height: none; 
    }
    
    /* 3. Reorder for Preview Top, Form Bottom (unchanged) */
    .preview-column {
        order: -1; 
        padding-top: 20px;
        background: none; 
        align-items: center;
    }
    
    /* 4. Beautiful Styling for the Mobile Form (.input-column) */
    .input-column {
        order: 1; 
        /* Reset background to white/light gray for a cleaner bottom half */
        background: #fcfcfc; /* Very subtle off-white for contrast */
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow at the top edge */
        border-radius: 0; /* No rounded corners on mobile bottom half */
        
        /* Ensure text is dark and readable on the light background */
        color: #333; 
        
        /* Reset floating card effects */
        backdrop-filter: none;
    }
    
    /* Adjust form headers for the new background */
    .input-column h2,
    .input-column h3 {
        color: #333; /* Ensure titles are dark */
                color: #333;
        background: -webkit-linear-gradient(#01315e, #0063ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* 5. Center Card Preview (unchanged) */
    .preview-card-wrapper {
        max-width: 330px; 
        margin: 0 auto;
        transform: scale(0.7);
        align-self: center;
    }
    
    /* 6. Cleanup for Mobile Scrollbars (unchanged) */
    .input-column::-webkit-scrollbar, .preview-column::-webkit-scrollbar {
        width: 6px;
    }
    .input-column::-webkit-scrollbar-thumb, .preview-column::-webkit-scrollbar-thumb {
        background-color: #515bd4;
        border-radius: 10px;
    }
    .input-column::-webkit-scrollbar-track, .preview-column::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    /* 7. Typography (unchanged, relies on global styles in index.php) */
    .form-group label,
    .form-group input::placeholder,
    .form-group textarea::placeholder {
        font-size: 10px; 
    }
    
}