/* ============================================================
   چُرتکه - استایل موبایل (Modern Flat)
   ============================================================ */

/* ============================================================
   چُرتکه - استایل موبایل (نسخه نهایی)
   ============================================================ */

/* ===== پنهان در دسکتاپ ===== */
.mobile-bottom-nav,
.bottom-sheet,
.sheet-backdrop,
.pwa-banner,
.pwa-guide-modal {
    display: none;
}

/* ===== فقط موبایل ===== */
@media (max-width: 768px) {

    /* ═══════════════════════════════════════
       Bottom Navigation — نسخه safe-area
       ═══════════════════════════════════════ */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* ارتفاع کل شامل safe-area */
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
        z-index: 1000;
        /* padding برای safe-area */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        align-items: flex-start;
        justify-content: space-around;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    [data-theme="dark"] .mobile-bottom-nav {
        background: rgba(30, 41, 59, 0.95);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* ارتفاع دکمه‌ها ثابت 64px */
        height: 64px;
        padding: 8px 4px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        transition: color 0.2s ease;
        text-decoration: none;
        font-family: inherit;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-item:active {
        opacity: 0.6;
    }

    .bottom-nav-item.active {
        color: var(--primary);
    }

    .bottom-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        transition: transform 0.2s ease;
    }

    .bottom-nav-label {
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
    }

    .bottom-nav-item.active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background: var(--primary);
        border-radius: 0 0 3px 3px;
    }

    .bottom-nav-center {
        flex: 0 0 64px;
        position: relative;
    }

    .bottom-nav-center-icon {
        width: 46px;
        height: 46px;
        background: var(--primary);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition: transform 0.2s ease, background 0.2s ease;
        margin-top: -4px;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    }

    .bottom-nav-center:active .bottom-nav-center-icon {
        transform: scale(0.92);
        background: var(--primary-hover);
    }

    .bottom-nav-center-icon svg {
        stroke: #fff;
    }

    .bottom-nav-badge {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-30%);
        background: var(--rose);
        color: #fff;
        font-size: 9px;
        font-weight: 800;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 2px solid var(--bg-card);
    }

    /* ═══════════════════════════════════════
       محتوا با فاصله از منو
       ═══════════════════════════════════════ */
    .app-main {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ═══════════════════════════════════════
       Backdrop
       ═══════════════════════════════════════ */
    .sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1100;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .sheet-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* ═══════════════════════════════════════
       Bottom Sheet — نسخه safe-area
       ═══════════════════════════════════════ */
    .bottom-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 88vh;
        background: var(--bg-card);
        border-radius: 24px 24px 0 0;
        z-index: 1200;
        transform: translateY(100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        /* مهم: padding-bottom برای safe-area */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow: hidden;
    }

    .bottom-sheet.open {
        transform: translateY(0);
    }

    .bottom-sheet-handle {
        width: 36px;
        height: 4px;
        background: var(--border-color);
        border-radius: 2px;
        margin: 10px auto 4px;
        flex-shrink: 0;
    }

    .bottom-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 20px 14px;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
    }

    .bottom-sheet-title {
        font-size: 15px;
        font-weight: 900;
        color: var(--text-main);
        display: flex;
        align-items: center;
        margin: 0;
    }

    .bottom-sheet-close {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--bg-body);
        border: none;
        color: var(--text-sub);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .bottom-sheet-body {
        flex: 1;
        overflow-y: auto;
        /* padding-bottom اضافه برای safe-area */
        padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* ═══════════════════════════════════════
       Search
       ═══════════════════════════════════════ */
    .mobile-search-wrapper {
        position: relative;
        margin-bottom: 14px;
    }

    .mobile-search-icon {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
    }

    .mobile-search-input {
        width: 100%;
        padding: 13px 44px 13px 16px;
        background: var(--bg-body);
        border: 1.5px solid var(--border-color);
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-main);
        outline: none;
        font-family: inherit;
    }

    .mobile-search-input:focus {
        border-color: var(--primary);
        background: var(--bg-card);
    }

    .mobile-search-results {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* ═══════════════════════════════════════
       دسته‌بندی‌های Sheet
       ═══════════════════════════════════════ */
    .mobile-cat-section {
        margin-bottom: 8px;
    }

    .mobile-cat-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        background: var(--bg-body);
        border: none;
        border-radius: 12px;
        color: var(--text-main);
        font-size: 13.5px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
    }

    .mobile-cat-name {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-cat-name i {
        color: var(--primary);
        font-size: 15px;
        width: 20px;
        text-align: center;
    }

    .mobile-cat-count {
        background: var(--bg-card);
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 8px;
        margin-right: 4px;
    }

    .mobile-cat-arrow {
        color: var(--text-muted);
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    .mobile-cat-title[aria-expanded="true"] .mobile-cat-arrow {
        transform: rotate(180deg);
    }

    .mobile-cat-tools {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mobile-cat-tools.open {
        max-height: 1200px;
    }

    .mobile-tool-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        text-decoration: none;
        color: inherit;
        border-radius: 12px;
    }

    .mobile-tool-icon {
        width: 38px;
        height: 38px;
        background: var(--primary-light);
        color: var(--primary);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        flex-shrink: 0;
    }

    .mobile-tool-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .mobile-tool-title {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-tool-desc {
        font-size: 11px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ═══════════════════════════════════════
       Profile
       ═══════════════════════════════════════ */
    .profile-menu {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .profile-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 14px;
        background: transparent;
        border: none;
        border-radius: 12px;
        color: var(--text-main);
        text-decoration: none;
        cursor: pointer;
        font-family: inherit;
        text-align: right;
        width: 100%;
    }

    .profile-item:active {
        background: var(--bg-body);
    }

    .profile-item-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .profile-item-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .profile-item-title {
        font-size: 13.5px;
        font-weight: 800;
        color: var(--text-main);
    }

    .profile-item-sub {
        font-size: 11.5px;
        color: var(--text-muted);
    }

    .profile-item-arrow {
        color: var(--text-muted);
        flex-shrink: 0;
        transform: scaleX(-1);
    }

    /* ═══════════════════════════════════════
       Favorites
       ═══════════════════════════════════════ */
    .fav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        margin-bottom: 10px;
        text-decoration: none;
        color: inherit;
        transition: all 0.15s ease;
    }

    .fav-item:active {
        background: var(--primary-light);
        border-color: var(--primary);
    }

    .fav-item-icon {
        width: 44px;
        height: 44px;
        background: var(--primary-light);
        color: var(--primary);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        flex-shrink: 0;
    }

    .fav-item-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        overflow: hidden;
    }

    .fav-item-title {
        font-size: 14px;
        font-weight: 800;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fav-item-desc {
        font-size: 11.5px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fav-item-remove {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: transparent;
        border: none;
        color: var(--rose);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0;
    }

    .fav-item-remove:active {
        background: #fef2f2;
    }

    /* ═══════════════════════════════════════
       Empty State
       ═══════════════════════════════════════ */
    .empty-state {
        text-align: center;
        padding: 50px 20px;
    }

    .empty-state-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto 16px;
        background: var(--bg-body);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
    }

    .empty-state-title {
        font-size: 15px;
        font-weight: 800;
        color: var(--text-main);
        margin-bottom: 6px;
    }

    .empty-state-desc {
        font-size: 12.5px;
        color: var(--text-muted);
        line-height: 1.8;
    }

    /* ═══════════════════════════════════════
       History
       ═══════════════════════════════════════ */
    .history-item {
        background: var(--bg-body);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 8px;
    }

    .history-item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .history-item-title {
        font-size: 13px;
        font-weight: 800;
        color: var(--primary);
    }

    .history-item-time {
        font-size: 10.5px;
        color: var(--text-muted);
    }

    .history-item-text {
        font-size: 12.5px;
        color: var(--text-sub);
        line-height: 1.7;
    }

    /* ═══════════════════════════════════════
       PWA Banner — نسخه safe-area
       ═══════════════════════════════════════ */
    .pwa-banner {
        display: none;
        position: fixed;
        /* فاصله از منو + safe-area */
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        left: 12px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 14px;
        align-items: center;
        gap: 12px;
        z-index: 9999;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
        max-width: 480px;
        margin: 0 auto;
    }

    .pwa-banner.show {
        display: flex;
    }

    .pwa-banner-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        flex-shrink: 0;
        overflow: hidden;
        background: var(--primary-light);
    }

    .pwa-banner-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pwa-banner-content {
        flex: 1;
        min-width: 0;
    }

    .pwa-banner-title {
        font-size: 13.5px;
        font-weight: 900;
        color: var(--text-main);
        margin-bottom: 3px;
    }

    .pwa-banner-desc {
        font-size: 11.5px;
        color: var(--text-muted);
        line-height: 1.5;
    }

    .pwa-banner-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .pwa-banner-btn {
        border: none;
        border-radius: 10px;
        padding: 9px 16px;
        font-size: 12.5px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        background: var(--primary);
        color: #fff;
    }

    .pwa-banner-close {
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        padding: 0;
        flex-shrink: 0;
    }

    /* ═══════════════════════════════════════
       PWA Guide Modal
       ═══════════════════════════════════════ */
    .pwa-guide-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10000;
    }

    .pwa-guide-modal.show {
        display: block;
    }

    .pwa-guide-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.7);
        backdrop-filter: blur(6px);
    }

    .pwa-guide-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-card);
        border-radius: 24px 24px 0 0;
        padding: 24px 20px 32px;
        max-height: 85vh;
        overflow-y: auto;
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    }

    .pwa-guide-close {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 36px;
        height: 36px;
        background: var(--bg-body);
        border: none;
        border-radius: 10px;
        color: var(--text-sub);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .pwa-guide-title {
        font-size: 18px;
        font-weight: 900;
        color: var(--text-main);
        margin: 0;
    }

    .pwa-guide-steps {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pwa-guide-steps li {
        display: flex;
        gap: 14px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border-color);
        font-size: 13.5px;
        line-height: 1.8;
        color: var(--text-sub);
    }

    .pwa-guide-steps li:last-child {
        border-bottom: none;
    }

    .pwa-guide-step-num {
        width: 30px;
        height: 30px;
        background: var(--primary);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 900;
        flex-shrink: 0;
    }

    .pwa-guide-note {
        background: #fef3c7;
        border: 1px solid #fde68a;
        border-radius: 12px;
        padding: 14px;
        font-size: 12.5px;
        color: #92400e;
        margin-top: 20px;
        line-height: 1.8;
    }

    [data-theme="dark"] .pwa-guide-note {
        background: rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.3);
        color: #fbbf24;
    }
}

@media (max-width: 380px) {
    .bottom-nav-label {
        font-size: 9px;
    }
    .bottom-nav-icon {
        width: 22px;
        height: 22px;
    }
    .bottom-nav-center-icon {
        width: 42px;
        height: 42px;
    }
}
/* ============================================================
   فیکس کلیک روی منو — SVG نباید کلیک رو بگیره
   ============================================================ */

.mobile-bottom-nav svg,
.mobile-bottom-nav svg * {
    pointer-events: none !important;
}

.mobile-bottom-nav .bottom-nav-icon,
.mobile-bottom-nav .bottom-nav-center-icon {
    pointer-events: none !important;
}

.mobile-bottom-nav .bottom-nav-label {
    pointer-events: none !important;
}
/* ============================================================
   فیکس کلیک روی منو — نسخه نهایی
   ============================================================ */

/* ۱. SVG نباید کلیک بگیره */
.mobile-bottom-nav svg,
.mobile-bottom-nav svg *,
.mobile-bottom-nav .bottom-nav-icon,
.mobile-bottom-nav .bottom-nav-center-icon,
.mobile-bottom-nav .bottom-nav-label,
.mobile-bottom-nav .bottom-nav-badge {
    pointer-events: none !important;
}

/* ۲. خود دکمه‌ها باید کلیک بگیرن */
.mobile-bottom-nav .bottom-nav-item,
.mobile-bottom-nav button.bottom-nav-item,
.mobile-bottom-nav a.bottom-nav-item {
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ۳. z-index بالاتر برای منو */
.mobile-bottom-nav {
    z-index: 9998 !important;
}

/* ۴. اطمینان از padding-bottom برای نوار سیستم */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px) !important;
    }
}