/* ================================================================
   DEECLIQ — MOBILE APP FEEL
   Shows only on screens ≤ 768px. Adds:
   - Bottom navigation bar (app-style)
   - Touch-friendly tap sizes
   - Smooth momentum scroll
   - Safe-area insets (iPhone notch / home bar)
   ================================================================ */

/* ── Global mobile feel ── */
@media (max-width: 768px) {
    * { -webkit-tap-highlight-color: transparent; }
    html { scroll-behavior: smooth; }
    body { -webkit-overflow-scrolling: touch; }

    /* Add padding-bottom so content isn't hidden behind bottom nav */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    /* Enlarge tap targets everywhere */
    a, button { min-height: 44px; }

    /* Prevent font size bump on orientation change (iOS) */
    html { -webkit-text-size-adjust: 100%; }
}

/* ── Bottom Navigation Bar ── */
.dk-bnav {
    display: none;
}

@media (max-width: 768px) {
    .dk-bnav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 99999;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.09);
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
        /* GPU layer — scroll ke waqt jank nahi hoga */
        transform: translateZ(0);
        will-change: transform;
        -webkit-transform: translateZ(0);
    }
    html[data-theme="dark"] .dk-bnav {
        background: #12121a;
        border-top-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.35);
    }

    .dk-bnav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        text-decoration: none;
        color: #9ca3af;
        font-size: .58rem;
        font-weight: 600;
        letter-spacing: .02em;
        padding: 8px 4px 4px;
        transition: color .18s;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
    }
    html[data-theme="dark"] .dk-bnav-item { color: #6b7280; }

    .dk-bnav-item i {
        font-size: 1.15rem;
        transition: transform .15s ease, color .12s;
        display: block;
        will-change: transform;
    }

    .dk-bnav-item.dk-bnav-active {
        color: #2563eb;
    }
    html[data-theme="dark"] .dk-bnav-item.dk-bnav-active { color: #60a5fa; }

    .dk-bnav-item.dk-bnav-active i {
        transform: translateY(-2px) scale(1.1);
    }

    /* Active dot indicator */
    .dk-bnav-item.dk-bnav-active::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px; height: 4px;
        border-radius: 50%;
        background: #2563eb;
    }
    html[data-theme="dark"] .dk-bnav-item.dk-bnav-active::after { background: #60a5fa; }

    /* Center Tools button — bigger, highlighted */
    .dk-bnav-item.dk-bnav-center {
        flex: 0 0 72px;
    }
    .dk-bnav-item.dk-bnav-center .dk-bnav-icon-wrap {
        width: 46px; height: 46px;
        border-radius: 14px;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 16px rgba(37, 99, 235, .35);
        transition: transform .15s ease, box-shadow .15s;
        margin-bottom: 2px;
        will-change: transform;
    }
    .dk-bnav-item.dk-bnav-center i {
        color: #fff;
        font-size: 1.1rem;
        transform: none !important;
    }
    .dk-bnav-item.dk-bnav-center:active .dk-bnav-icon-wrap,
    .dk-bnav-item.dk-bnav-center.dk-bnav-active .dk-bnav-icon-wrap {
        transform: translateY(-4px) scale(1.08);
        box-shadow: 0 8px 24px rgba(37, 99, 235, .45);
    }
    .dk-bnav-item.dk-bnav-center.dk-bnav-active::after { display: none; }
    .dk-bnav-item.dk-bnav-center.dk-bnav-active { color: #6b7280; }
    html[data-theme="dark"] .dk-bnav-item.dk-bnav-center.dk-bnav-active { color: #6b7280; }

    /* Press ripple effect */
    .dk-bnav-item:active i { transform: scale(.88); }
    .dk-bnav-item.dk-bnav-center:active i { transform: scale(.92) !important; }

    /* Badge for login */
    .dk-bnav-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 20px);
        background: #ef4444;
        color: #fff;
        font-size: .5rem;
        font-weight: 900;
        width: 16px; height: 16px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid #fff;
        pointer-events: none;
    }
    html[data-theme="dark"] .dk-bnav-badge { border-color: #12121a; }
}

/* ── Mobile top nav spacing ── */
@media (max-width: 768px) {
    .dl-nav { padding: 10px 5vw !important; gap: 14px !important; }
    .dl-nav.dl-nav-scrolled { padding: 8px 5vw !important; }

    /* Burger ↔ logo ke beech thoda gap */
    .dl-nav-burger { margin-right: 6px; flex-shrink: 0; }
    .dl-nav-brand { margin-right: auto; }

    /* Smoother page-level scroll */
    .tl-layout, .dl-page { scroll-behavior: smooth; }
}

/* ── iOS safe area fix for tool pages ── */
@media (max-width: 768px) {
    .pthnav { padding-bottom: env(safe-area-inset-bottom, 0); }
}