/* ============================================
   MOTION-TOOLS — Responsive CSS
   ============================================ */

/* ─── TABLET (≤ 1024px) ──────────────────────── */
@media (max-width: 1024px) {
    .formats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .core-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-block {
        gap: 30px;
    }
    .feature-title {
        font-size: 28px;
    }
    .feature-desc {
        font-size: 16px;
    }
    .conversion-grid {
        gap: 16px;
    }
}

/* ─── TABLET PORTRAIT ≤ 768px ──────────────── */
@media (max-width: 768px) {

    /* -- Navbar (Motion-Tools has its own .navbar) -- */
    .navbar .nav-content {
        padding: 0 12px;
    }
    .nav-links {
        display: none;
    }
    .nav-right {
        gap: 12px;
    }
    .credits-badge {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* -- Hero -- */
    .hero-section {
        padding: 50px 16px 40px;
    }
    .hero-title {
        font-size: 32px;
    }
    .hero-subtitle {
        font-size: 15px;
    }

    /* -- Format Cards -- */
    .formats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px;
    }
    .format-card {
        padding: 20px;
    }
    .card-header h3 {
        font-size: 20px;
    }
    .check-list li {
        font-size: 13px;
    }

    /* -- Features Section -- */
    .features-container {
        padding: 0 16px;
    }
    .features-title,
    .section-title,
    .section-heading {
        font-size: 24px;
        margin-bottom: 30px;
    }

    /* -- Core Grid -- */
    .core-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .core-card {
        padding: 24px;
    }

    /* -- Steps -- */
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .step-card {
        padding: 24px 20px;
    }

    /* -- Feature Blocks (long feature sections) -- */
    .feature-block {
        flex-direction: column !important;
        gap: 30px;
        margin-bottom: 60px;
    }
    .feature-visual {
        order: -1;
    }
    .icon-block {
        width: 140px;
        height: 140px;
        font-size: 56px;
    }
    .feature-title {
        font-size: 24px;
    }
    .feature-desc {
        font-size: 15px;
    }

    /* -- Conversion Grid -- */
    .conversion-grid {
        gap: 12px;
    }
    .conv-card {
        padding: 18px;
    }

    /* -- Workspace Upload -- */
    .workspace-title {
        font-size: 28px;
    }
    .workspace-subtitle {
        font-size: 15px;
    }
    .format-chips-hero {
        flex-wrap: wrap;
        gap: 8px;
    }
    .upload-zone-centered {
        height: 200px;
    }

    /* -- Supports Chips -- */
    .supports-chips {
        gap: 8px;
    }
    .chip {
        padding: 6px 14px;
        font-size: 12px;
    }

    /* -- FAB Chat -- */
    .fab-chat {
        bottom: 80px;
        right: 16px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* ─── MOBILE ≤ 480px ──────────────────────── */
@media (max-width: 480px) {
    body {
        padding-top: 52px !important;
        padding-bottom: 72px !important;
    }

    .hero-section {
        padding: 30px 12px 30px;
    }
    .hero-title {
        font-size: 22px;
        letter-spacing: -0.5px;
    }
    .hero-subtitle {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .formats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .format-card {
        padding: 18px;
    }

    .features-title,
    .section-title,
    .section-heading {
        font-size: 18px !important;
        margin-bottom: 24px !important;
    }

    .feature-block {
        padding: 0 12px;
        margin-bottom: 40px;
    }

    .workspace-title {
        font-size: 20px !important;
    }
    .upload-zone-centered {
        height: 160px;
        border-radius: 16px;
    }
    .upload-icon-wrapper {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .preview-mockup {
        border-radius: 8px;
    }
    .mockup-content {
        height: 250px;
    }
}

/* ============================================
   PRO PAGE — Responsive
   ============================================ */
@media (max-width: 1024px) {
    .pro-plans-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .pro-hero {
        padding: 40px 16px;
    }
    .pro-hero h1 {
        font-size: 28px;
    }
    .pro-hero p {
        font-size: 14px;
    }
    .pro-benefits {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }
    .pro-plans-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        max-width: 400px;
        margin: 0 auto;
    }
    .plan-card {
        padding: 24px 20px;
    }
    .plan-formats {
        gap: 6px;
    }
    .plan-format-tag {
        font-size: 11px;
        padding: 4px 8px;
    }
}

/* ============================================
   WORKSPACE / EDITOR — Mobile notice
   ============================================ */
@media (max-width: 768px) {

    /* Upload view — fix hidden title under navbar */
    #upload-view.workspace {
        margin-top: 52px !important;
        min-height: calc(100vh - 52px - 64px) !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #upload-view .workspace-title {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
    }
    #upload-view .workspace-subtitle {
        font-size: 0.78rem !important;
        margin-bottom: 14px !important;
        line-height: 1.6 !important;
    }
    #upload-view .upload-zone-centered {
        min-height: 180px !important;
        height: auto !important;
        max-height: 220px !important;
    }

    /* Format chips — compact for mobile */
    .workspace .format-chips-hero {
        gap: 5px !important;
        margin-bottom: 14px !important;
        padding: 0 !important;
    }
    .workspace .hero-chip {
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
    }

    /* Upload icon — smaller on mobile */
    .workspace .upload-icon-wrapper {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }

    /* Workspace container — tighter vertical spacing */
    .workspace .workspace-container {
        gap: 12px !important;
        padding: 12px 0 !important;
    }
    .workspace .workspace-text-content {
        margin-bottom: 4px !important;
    }

    /* Upload text label */
    .workspace .upload-text-label {
        font-size: 0.75rem !important;
    }

    .editor-container {
        flex-direction: column !important;
        padding: 0 !important;
        margin-top: 52px !important;
        height: calc(100vh - 52px - 64px) !important;
    }

    /* Canvas takes full space */
    .center-stage {
        flex: 1 !important;
        width: 100% !important;
        min-height: 0 !important;
        order: 1 !important;
    }

    /* Panels become slide-up bottom sheets */
    .left-panel,
    .right-panel {
        position: fixed !important;
        bottom: 64px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 55vh !important;
        background: rgba(14, 12, 10, 0.97) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 16px 16px 0 0 !important;
        border-top: 1px solid rgba(245, 158, 11, 0.15) !important;
        border-left: none !important;
        border-right: none !important;
        z-index: 99998 !important;
        overflow-y: auto !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,0.5) !important;
    }

    .left-panel.mob-panel-open,
    .right-panel.mob-panel-open {
        transform: translateY(0) !important;
    }

    /* Drag handle on panels */
    .left-panel::before,
    .right-panel::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.2);
        border-radius: 2px;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    /* Floating toggle buttons */
    .mob-editor-toolbar {
        /* display is controlled by JS — shown only after file upload */
        position: fixed !important;
        bottom: 95px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        gap: 8px !important;
        z-index: 99997 !important;
        padding: 6px !important;
        background: rgba(14, 12, 10, 0.9) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-radius: 14px !important;
        border: 1px solid rgba(245,158,11,0.15) !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
    }

    .mob-editor-btn {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 8px 14px !important;
        border-radius: 10px !important;
        border: none !important;
        background: rgba(255,255,255,0.06) !important;
        color: #a8a29e !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        font-family: inherit !important;
        cursor: pointer !important;
        transition: all 200ms !important;
        white-space: nowrap !important;
    }

    .mob-editor-btn.active {
        background: rgba(245,158,11,0.15) !important;
        color: #f59e0b !important;
    }

    .mob-editor-btn i,
    .mob-editor-btn [class*="ph-"] {
        font-size: 16px !important;
    }

    /* Panel backdrop */
    .mob-panel-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 99996;
    }
    .mob-panel-backdrop.visible {
        display: block;
    }

    /* Assets grid fix - ensure visible height in bottom sheet */
    .panel-section.flex-grow {
        flex: none !important;
        min-height: auto !important;
    }
    .assets-grid {
        min-height: 160px !important;
        max-height: 35vh !important;
        overflow-y: auto !important;
    }

    /* Playback controls adapt */
    .playback-controls {
        min-width: 200px !important;
        width: 80% !important;
        bottom: 80px !important;
        padding: 6px 12px 6px 16px !important;
        border-radius: 16px !important;
    }

    /* Marquee adjust */
    .marquee-banner {
        top: 0 !important;
    }

    /* =============================================
       MODALS — Mobile Responsive (overrides inline styles)
       ============================================= */

    /* Base modal card — full width on mobile */
    .modal-card,
    .modal-card.large {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        border-radius: 14px !important;
        padding: 0 !important;
    }

    .modal-header {
        padding: 16px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        position: relative !important;
    }
    .modal-header h3 {
        font-size: 16px !important;
    }

    .modal-body {
        padding: 12px 16px !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Force ALL flex-row modal bodies to column on mobile */
    .modal-body.flex-row {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        gap: 16px !important;
        padding: 12px 16px !important;
    }

    /* All direct children of flex-row bodies should be full width */
    .modal-body.flex-row > div {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* --- Watermark Modal --- */
    #modal-watermark .modal-card {
        width: 95vw !important;
        max-height: 90vh !important;
    }
    #watermark-preview-container {
        width: 100% !important;
        height: 200px !important;
        order: -1 !important;
    }

    /* --- Feather Modal --- */
    #modal-feather .modal-card {
        width: 95vw !important;
        max-height: 90vh !important;
    }
    /* Preview at TOP and bigger */
    #modal-feather .modal-body.flex-row > div:first-of-type {
        order: -1 !important;
        height: 45vh !important;
        min-height: 45vh !important;
    }
    /* Settings below */
    #modal-feather .modal-body.flex-row > div:last-of-type {
        order: 2 !important;
    }

    /* --- Batch Modal --- */
    #modal-batch .modal-card {
        width: 95vw !important;
        max-height: 90vh !important;
    }
    #modal-batch .modal-body {
        max-height: 62vh !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }
    .batch-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .batch-item {
        flex-direction: column !important;
    }
    .batch-preview {
        width: 100% !important;
        height: 100px !important;
    }
    .batch-controls {
        width: 100% !important;
        padding: 6px !important;
    }
    .batch-name {
        font-size: 10px !important;
    }
    .batch-replace-btn {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }
    .batch-rename-input {
        font-size: 11px !important;
        padding: 4px !important;
    }
    .batch-delete-cb + span {
        font-size: 10px !important;
    }

    /* --- Image Edit Modal --- */
    #modal-image-edit .modal-card {
        width: 95vw !important;
    }
    .image-edit-preview {
        height: 180px !important;
    }

    /* Modal footer buttons */
    .modal-footer .btn,
    .modal-footer button {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }

    /* Ensure modals sit above everything on mobile */
    .modal-overlay {
        z-index: 999999 !important;
    }
    .modal-overlay.active {
        padding: 0 !important;
    }
}


/* ============================================
   COMPOSITOR — Enhanced Mobile
   ============================================ */
@media (max-width: 768px) {
    .comp-layout {
        flex-direction: column !important;
        gap: 16px;
    }
    .comp-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        order: 2;
    }
    .comp-main {
        width: 100% !important;
        order: 1;
    }
    .comp-canvas-wrap {
        max-height: 50vh;
    }
}

/* ============================================
   ACCOUNT PAGE — Responsive
   ============================================ */
@media (max-width: 768px) {
    .account-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .account-sidebar {
        width: 100% !important;
    }
    .account-main {
        width: 100% !important;
    }
}

/* ============================================
   LOGIN / AUTH — Responsive
   ============================================ */
@media (max-width: 480px) {
    .auth-card {
        padding: 24px 16px;
        margin: 16px;
        border-radius: 16px;
    }
    .auth-card h1 {
        font-size: 22px;
    }
}