.navbar {
    display: none;
}

@media (min-width: 769px) {

    /* ── Navbar shell ── */
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        top: 0;
        z-index: 100;
        padding: 0 40px;
        height: 62px;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        font-family: 'Satoshi', sans-serif;
        width: 100%;
    }

    .nav-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* ── Logo ── */
    .nav-logo {
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 700;
        font-size: 1rem;
        color: #1a1a2e;
        text-decoration: none;
        white-space: nowrap;
    }

    .nav-logo .logo-icon {
        width: 75px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* ── List Your Property ── */
    .nav-pill {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 16px;
        border-radius: 20px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        color: #4b5563;
        font-size: 0.84rem;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        font-family: 'Satoshi', sans-serif;
    }

    .nav-pill:hover {
        background: #ede9f8;
        color: var(--main);
        border-color: var(--main);
    }

    /* ── Find Your Stay CTA ── */
    .nav-cta-search {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 20px;
        border-radius: 24px;
        background: linear-gradient(135deg, #500EAF, #9810FA);
        color: #ffffff;
        font-size: 0.88rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 3px 14px rgba(107, 72, 232, 0.30);
        transition: opacity 0.2s, transform 0.2s;
        font-family: 'Satoshi', sans-serif;
    }

    .nav-cta-search:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    /* ── Icon buttons (heart, bell) ── */
    .nav-icon-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #4b5563;
        position: relative;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        flex-shrink: 0;
    }

    .nav-icon-btn:hover {
        background: #ede9f8;
        color: var(--main);
        border-color: var(--main);
    }

    /* ── Notification badge ── */
    .notif-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: #EF4444;
        color: #ffffff;
        font-size: 0.62rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #ffffff;
        font-family: 'Satoshi', sans-serif;
    }

    /* ── Profile avatar button ── */
    .nav-avatar {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 5px 10px 5px 5px;
        border-radius: 24px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        cursor: pointer;
        color: #4b5563;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
        font-family: 'Satoshi', sans-serif;
    }

    .nav-avatar:hover {
        background: #e2d7ff;
        color: var(--main);
        border-color: var(--main);
    }

    /* ════════════════════════════════
     POPUP BASE
  ════════════════════════════════ */
    .popup-wrap {
        position: relative;
    }

    .popup {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 12px 50px rgba(0, 0, 0, 0.15);
        border: 1px solid #e5e7eb;
        z-index: 300;
        overflow: hidden;
        animation: desktopPopupIn 0.18s ease;
    }

    .popup.open {
        display: block;
    }

    @keyframes desktopPopupIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ════════════════════════════════
     PROFILE POPUP
  ════════════════════════════════ */
    .profile-popup {
        width: 240px;
        padding: 8px 0;
    }

    .profile-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        text-decoration: none;
        color: #1a1a2e;
        font-size: 1rem;
        font-weight: 500;
        transition: background 0.15s;
        font-family: 'Satoshi', sans-serif;
    }

    .profile-item:hover {
        background: #f7f5ff;
    }

    .profile-item-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .profile-divider {
        height: 1px;
        background: #e5e7eb;
        margin: 0 20px;
    }

    /* ════════════════════════════════
     NOTIFICATION POPUP
  ════════════════════════════════ */
    .notif-popup {
        width: 360px;
        padding: 22px 20px 16px;
        max-height: 520px;
        overflow-y: auto;
    }

    .notif-popup::-webkit-scrollbar {
        width: 5px;
    }

    .notif-popup::-webkit-scrollbar-track {
        background: transparent;
    }

    .notif-popup::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 10px;
    }

    .popup-title {
        font-size: 1.4rem;
        font-weight: 800;
        color: #1a1a2e;
        margin-bottom: 18px;
        padding: 0 2px;
        font-family: 'Satoshi', sans-serif;
    }

    .notif-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .notif-card {
        display: flex;
        gap: 14px;
        background: #f9f9fb;
        border: 1px solid #eeecf5;
        border-radius: 16px;
        padding: 16px 14px;
        transition: box-shadow 0.2s;
    }

    .notif-card:hover {
        box-shadow: 0 4px 18px rgba(107, 72, 232, 0.08);
    }

    .notif-icon-wrap {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .notif-icon-blue {
        background: #edf4fd;
    }

    .notif-icon-purple {
        background: #f0ebfe;
    }

    .notif-body {
        flex: 1;
        min-width: 0;
    }

    .notif-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 4px;
    }

    .notif-heading {
        font-size: 0.97rem;
        font-weight: 700;
        color: #1a1a2e;
        font-family: 'Satoshi', sans-serif;
    }

    .notif-heading.won {
        color: #4A6CF7;
    }

    .notif-tag {
        font-size: 0.7rem;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 20px;
        white-space: nowrap;
        flex-shrink: 0;
        font-family: 'Satoshi', sans-serif;
    }

    .tag-booking {
        background: #e8edff;
        color: #4A6CF7;
    }

    .tag-offer {
        background: #f3ebfe;
        color: #7B5EA7;
    }

    .notif-time {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.76rem;
        color: #9ca3af;
        margin-bottom: 8px;
        font-family: 'Satoshi', sans-serif;
    }

    .notif-msg {
        font-size: 0.85rem;
        color: #1a1a2e;
        line-height: 1.55;
        margin-bottom: 12px;
        font-family: 'Satoshi', sans-serif;
    }

    .notif-card:last-child .notif-msg {
        margin-bottom: 0;
    }

    .notif-action-btn {
        display: inline-block;
        padding: 10px 28px;
        border-radius: 24px;
        background: linear-gradient(135deg, #5B3FE8, #7B5AE8);
        color: #ffffff;
        font-size: 0.88rem;
        font-weight: 600;
        font-family: 'Satoshi', sans-serif;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s, transform 0.2s;
        box-shadow: 0 4px 14px rgba(91, 63, 232, 0.35);
    }

    .notif-action-btn:hover {
        opacity: 0.88;
        transform: translateY(-1px);
    }

}

/* end @media (min-width: 769px) */