/* ULTIMATE FIX - MOBILE RESPONSIVE */

@media (max-width: 768px) {
    /* Force viewport */
    html {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        height: auto !important;
    }

    * {
        box-sizing: border-box !important;
    }

    /* Header */
    .header {
        padding: 15px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Main Container */
    .main-container {
        padding: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* Form Card & Body */
    .form-card,
    .form-body,
    .form-header {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* CRITICAL: Categories wrapper - Allow ONLY horizontal scroll HERE */
    .categories-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .categories-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    /* Categories Grid - Can be wider than screen */
    .categories-grid {
        display: flex !important;
        gap: 10px !important;
        width: max-content !important;
        padding: 0 !important;
    }

    /* Category Items - Fixed width */
    .category-item {
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        flex-shrink: 0 !important;
        padding: 8px 4px !important;
    }

    .category-icon-wrapper {
        width: 40px !important;
        height: 40px !important;
    }

    .category-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .category-label {
        font-size: 10px !important;
        margin-top: 4px !important;
    }

    /* Form Controls */
    .form-control,
    input,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
    }

    /* Buttons */
    button,
    .btn-submit,
    .btn-preview-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Upload Zone */
    .upload-zone {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Music Section */
    .music-section {
        width: 100% !important;
        max-width: 100% !important;
    }

    .music-list {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Generate Button - Responsive Fix */
    .btn-generate-preview {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
    }

    /* QR Code Container - Responsive Fix */
    .qrcode-container {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .qrcode-container canvas,
    .qrcode-container img {
        max-width: 180px !important;
        height: auto !important;
    }

    /* Share Link Text - Responsive Fix */
    #shareLink {
        font-size: 13px !important;
        color: #111827 !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }

    /* Copy Button - Responsive Fix */
    button[onclick="copyShareLink()"] {
        flex-shrink: 0 !important;
        padding: 10px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 480px) {
    .main-container {
        padding: 10px !important;
    }

    .category-item {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        padding: 6px 3px !important;
    }

    .category-icon-wrapper {
        width: 36px !important;
        height: 36px !important;
    }

    .category-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .category-label {
        font-size: 9px !important;
        margin-top: 3px !important;
    }

    #shareLink {
        font-size: 12px !important;
    }

    button[onclick="copyShareLink()"] {
        padding: 8px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}