/* ═══════════════════════════════════════════════════════════
   Larrly — Global responsive (mobile / tablet / all devices)
   ═══════════════════════════════════════════════════════════ */

/* ── Dashboard mobile footer nav ── */
.dash-mnav,
.dash-mnav-backdrop { display: none; }

@media (max-width: 768px) {
    .dash-mnav {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 400;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .dash-mnav-bar {
        display: grid;
        grid-template-columns: 1fr 1fr 56px 1fr 1fr 52px;
        align-items: end;
        gap: 2px;
        padding: 8px 8px 10px;
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(16px);
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -8px 32px rgba(15,23,42,.08);
    }

    .dash-mnav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        border-radius: 12px;
        text-decoration: none;
        color: #64748b;
        font-size: 10px;
        font-weight: 600;
        min-height: 52px;
        transition: color .12s, background .12s;
    }
    .dash-mnav-item-icon { display: flex; align-items: center; justify-content: center; }
    .dash-mnav-item-icon svg { width: 20px; height: 20px; }
    .dash-mnav-item-label { line-height: 1.1; text-align: center; }
    .dash-mnav-item.active,
    .dash-mnav-item:hover { color: #1a9e94; background: rgba(37,184,173,.1); }

    .dash-mnav-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin: -18px auto 0;
        border-radius: 16px;
        background: linear-gradient(145deg, #25b8ad, #1a9e94);
        color: #fff;
        text-decoration: none;
        box-shadow: 0 8px 24px rgba(37,184,173,.45);
        grid-column: 3;
        grid-row: 1;
        transition: transform .15s, box-shadow .15s;
    }
    .dash-mnav-fab:active { transform: scale(.94); }

    .dash-mnav-more {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px;
        border: none;
        background: transparent;
        color: #64748b;
        font-size: 10px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        border-radius: 12px;
        min-height: 52px;
    }
    .dash-mnav-more.is-open { color: #1a9e94; background: rgba(37,184,173,.1); }
    .dash-mnav-more.is-open .dash-mnav-more-icon { transform: rotate(180deg); }

    .dash-mnav-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        max-height: min(70vh, 520px);
        background: #fff;
        border: 1px solid #e2e8f0;
        border-bottom: none;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(15,23,42,.12);
        transform: translateY(110%);
        opacity: 0;
        visibility: hidden;
        transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .25s, visibility .25s;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .dash-mnav-sheet.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .dash-mnav-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px 10px;
        border-bottom: 1px solid #f1f5f9;
        flex-shrink: 0;
    }
    .dash-mnav-sheet-head span {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -.02em;
    }
    .dash-mnav-sheet-close {
        width: 32px;
        height: 32px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #64748b;
    }

    .dash-mnav-sheet-body {
        overflow-y: auto;
        padding: 8px 12px 16px;
        -webkit-overflow-scrolling: touch;
    }

    .dash-mnav-section { margin-bottom: 12px; }
    .dash-mnav-section-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #94a3b8;
        padding: 8px 10px 4px;
    }
    .dash-mnav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        border-radius: 12px;
        text-decoration: none;
        color: #475569;
        font-size: 14px;
        font-weight: 600;
    }
    .dash-mnav-link:hover { background: #f8fafc; }
    .dash-mnav-link.active {
        background: rgba(37,184,173,.12);
        color: #1a9e94;
    }
    .dash-mnav-link-icon { display: flex; width: 20px; flex-shrink: 0; }
    .dash-mnav-upgrade {
        display: block;
        margin: 8px 10px 4px;
        padding: 12px 14px;
        border-radius: 14px;
        background: linear-gradient(145deg, #121827, #1a9e94);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
    }

    .dash-mnav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.4);
        z-index: 390;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s, visibility .25s;
    }
    .dash-mnav-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Hide desktop sidebar + old hamburger */
    .dash-sidebar { display: none !important; }
    .dash-mobile-toggle,
    .dash-mobile-overlay { display: none !important; }

    .dz-body .dash-shell {
        padding: 0;
        gap: 0;
    }
    .dz-body .dash-main {
        margin: 0;
        border-radius: 0;
        border: none;
        width: 100%;
    }
    .dz-body .dash-topbar {
        border-radius: 0;
        padding: 0 12px;
        height: 56px;
        gap: 8px;
    }
    .dz-body .dash-content {
        padding: 16px 14px calc(88px + env(safe-area-inset-bottom, 0));
    }

    .dash-topbar-search {
        max-width: none;
        flex: 1;
        min-width: 0;
    }
    .dash-topbar-shortcut { display: none; }
    .dash-topbar-icon[aria-label="Berichten"] { display: none; }
    .dash-topbar-user div { display: none; }
    .dash-topbar-user { padding: 0; }
    .dash-topbar-actions { gap: 4px; }

    .dash-topbar::before {
        content: '';
        display: block;
        width: 26px;
        height: 30px;
        flex-shrink: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Crect x='5' y='0' width='14' height='16' rx='4' fill='%2325b8ad' transform='rotate(38 12 13)'/%3E%3Crect x='5' y='10' width='14' height='16' rx='4' fill='%2325b8ad' opacity='.55' transform='rotate(38 12 13)'/%3E%3C/svg%3E") center / contain no-repeat;
        margin-right: 4px;
    }

    .dz-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .dz-page-head h1 { font-size: 22px; }
    .dz-page-actions {
        width: 100%;
    }
    .dz-page-actions .dz-btn {
        flex: 1;
        justify-content: center;
    }
    .dz-grid-mid,
    .dz-grid-bottom,
    .dz-analytics-grid,
    .dz-analytics-grid--bottom { grid-template-columns: 1fr !important; }
    .dz-body .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .dz-body .stat-card { min-height: 120px; padding: 16px; }
    .dz-body .stat-card-value { font-size: 28px; }
    .dz-team-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 8px;
    }
    .dz-team-head { display: none; }
    .settings-layout { grid-template-columns: 1fr !important; }
    .settings-subnav {
        position: static;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        padding: 10px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .settings-subnav-title { display: none; }
    .settings-subnav nav {
        flex-direction: row;
        gap: 6px;
    }
    .settings-subnav a {
        white-space: nowrap;
        padding: 8px 14px;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { width: 100%; justify-content: center; }

    .table-wrap,
    .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 560px; }

    .card[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .lvg-plans-grid { grid-template-columns: 1fr !important; }
    .lvg-integrations-grid { grid-template-columns: 1fr !important; }
    .lvg-stat-row { grid-template-columns: 1fr 1fr !important; }

    .form-loading-box { margin: 16px; }

    body.dash-mnav-open { overflow: hidden; }

    .dz-body [style*="grid-template-columns:repeat(auto-fill"] {
        grid-template-columns: 1fr !important;
    }

    #modal-site > div,
    #modal-add-page > div {
        width: 100% !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px;
    }

    .dz-chart-wrap { overflow-x: auto; }
    .dz-chart-svg { min-width: 480px; }
}

@media (max-width: 480px) {
    .dz-body .stats-grid { grid-template-columns: 1fr !important; }
    .dz-mini-stats { grid-template-columns: 1fr !important; }
    .dash-mnav-bar {
        grid-template-columns: 1fr 1fr 48px 1fr 1fr 44px;
        padding: 6px 4px 8px;
    }
    .dash-mnav-fab { width: 48px; height: 48px; margin-top: -14px; }
    .dash-mnav-item-label,
    .dash-mnav-more span { font-size: 9px; }
}

/* Homepage — horizontale carousels altijd flex, nooit grid */
.home-page .tpl-grid,
.home-page .tpl-grid-track .tpl-grid {
    display: flex !important;
    grid-template-columns: unset !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tablet */
@media (max-width: 1024px) {
    .dz-grid-mid,
    .dz-grid-bottom { grid-template-columns: 1fr; }
    .dz-analytics-grid { grid-template-columns: 1fr; }
    .home-hero-grid,
    .home-dash-grid { grid-template-columns: 1fr; }
    .home-feat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .wix-menu { display: none; }
    .wix-nav .container { gap: 4px; }
    .wix-nav-right a:not(.btn) { display: none; }
    .home-hero { padding: 32px 0 48px; }
    .home-hero-copy h1 { font-size: 32px; }
    .home-hero-cta { flex-direction: column; }
    .home-hero-cta .btn { width: 100%; }
    .home-cta-band { margin: 0 12px 48px; padding: 24px 20px; }
    .home-cta-inner { flex-direction: column; text-align: center; }
    .footer-top { grid-template-columns: 1fr !important; gap: 24px; }
}

/* Builder mobile extras */
@media (max-width: 768px) {
    .bld-topbar {
        padding: 0 10px;
        gap: 4px;
    }
    .bld-topbar-right .dash-topbar-controls .lang-dropdown-toggle span,
    .bld-topbar-right .bld-btn-ghost span { display: none; }
    .bld-save-status span { display: none; }
    .bld-btn-publish { padding: 8px 12px; font-size: 11px; }
    .bld-btn-close { display: none; }
    .bld-site-select-btn span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Dark mode — mobile nav */
[data-theme="dark"] .dash-mnav-bar {
    background: rgba(21,27,36,.96);
    border-top-color: #1e293b;
}
[data-theme="dark"] .dash-mnav-item { color: #94a3b8; }
[data-theme="dark"] .dash-mnav-item.active { color: #4fd1c5; background: rgba(37,184,173,.12); }
[data-theme="dark"] .dash-mnav-sheet { background: #151b24; border-color: #1e293b; }
[data-theme="dark"] .dash-mnav-sheet-head span { color: #f1f5f9; }
[data-theme="dark"] .dash-mnav-sheet-close { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .dash-mnav-link { color: #cbd5e1; }
[data-theme="dark"] .dash-mnav-link:hover { background: #1e293b; }
[data-theme="dark"] .dash-mnav-link.active { color: #4fd1c5; }
[data-theme="dark"] .dash-mnav-more { color: #94a3b8; }

/* Auth — stack on small screens (supplements auth.css) */
@media (max-width: 768px) {
    .auth-split { flex-direction: column; }
    .auth-left { min-height: auto; padding: 32px 24px; }
    .auth-right { padding: 24px 16px 40px; }
    .auth-headline { font-size: 28px; }
}

/* Homepage mobile nav toggle */
@media (max-width: 768px) {
    .wix-nav .btn { padding: 8px 14px; font-size: 13px; }
    .home-pricing-grid,
    .home-logos-row { flex-wrap: wrap; justify-content: center; }
    .home-section { padding-left: 16px; padding-right: 16px; }
}