/* ─────────────────────────────────────────────────────────────────────────────
   Property navbar - desktop / laptop (>= 1200px). Phone + tablet markup is untouched.
   Ideas taken from Agoda / DDproperty / Fastwork (user, 2026-11-06):
   - "ค้นหา" opens a quick-search panel (the same smart search as the home hero) from any page, "/" key too
   - "ดูตามประเภท" is a mega menu: types with listing counts + popular provinces (hover or click)
   - one soft hover surface glides between the center items; the current page keeps its underline
   - the header is flat at the top of the page and gets a soft shadow once the page scrolls
   - chat / bell show a styled tooltip instead of the slow native title
   Behaviour: assets/js/navbar-desktop.js
   ───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1200px) {
    /* ── Header elevation: hairline at the top, soft shadow after scrolling (no height change = nothing jumps) ── */
    .property-navbar.shadow-sm {
        box-shadow: none !important;
        transition: box-shadow .2s ease;
    }

    .property-navbar.shadow-sm.is-scrolled {
        box-shadow: 0 10px 24px -18px rgba(15, 39, 27, .42), 0 1px 2px rgba(15, 39, 27, .04) !important;
    }

    /* ── Center items ── */
    #mainNavbar [data-nvd-nav] { gap: 2px; }

    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link {
        position: relative;
        z-index: 1;
        gap: 7px;
        padding: 0 .8rem !important;
        border: 0;
        border-radius: 10px;
        background: transparent;
        font-size: 15px;
        transition: color .15s ease, background-color .15s ease;
    }

    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link > .bi:not(.navbar-type-chevron) { font-size: 16px; }
    #mainNavbar [data-nvd-nav] .navbar-type-chevron { margin-left: -1px; }
    #mainNavbar [data-nvd-nav] .navbar-type-chevron::before { transition: transform .2s ease; }

    /* hover surface without JS; the glide below takes over once navbar-desktop.js runs */
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link:hover,
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link[aria-expanded="true"] {
        background: var(--theme-primary-light, #e3f3e9);
        color: var(--theme-primary) !important;
    }

    #mainNavbar [data-nvd-nav].nvd-has-glide > .nav-item > .nav-link:hover:not([aria-expanded="true"]) {
        background: transparent;
    }

    /* property.css grows an underline under the hovered link - the glide is the hover now, so only the
       current page keeps a bar: short, rounded, just under the label (inside the header, not on its bottom
       edge - there it sat 17px from the text and merged into the hero photo; user, 2026-11-06) */
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link::after { display: none; }
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link.active { box-shadow: none; }

    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link.active::after {
        content: '';
        display: block;
        position: absolute;
        left: .8rem;
        right: .8rem;
        bottom: 4px;
        width: auto;
        height: 3px;
        margin: 0;
        border: 0;
        border-radius: 3px;
        background: var(--theme-primary);
        transform: none;
        transition: none;
    }

    /* the logo never shrinks to make room (it used to squeeze for owners at 1200-1399) */
    .property-navbar .navbar-brand { flex-shrink: 0; }
}

/* 1200-1399px (container 1140px): an owner's 4 items + chat + bell + name must fit beside the full logo */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link { gap: 6px; padding: 0 .6rem !important; }
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link.active::after { left: .6rem; right: .6rem; }
    #mainNavbar .navbar-cta.ms-xl-3 { margin-left: .5rem !important; }

    #mainNavbar .nvd-nav--compact > .nav-item > .nav-link > .bi:not(.navbar-type-chevron, .bi-search),
    #mainNavbar .nvd-nav--compact .navbar-action-label > .bi { display: none; }

    /* owners have 5 center items: measured 22px over the row without these (the page scrolled sideways at 1200) */
    #mainNavbar .nvd-nav--compact { gap: 0; }
    #mainNavbar .nvd-nav--compact > .nav-item > .nav-link { padding-inline: .45rem !important; }
    #mainNavbar .nvd-nav--compact > .nav-item > .nav-link.active::after { left: .45rem; right: .45rem; }
    .property-navbar .navbar-cta--compact .navbar-account-name { max-width: 6rem; }
}

@media (min-width: 1400px) {
    .property-navbar .navbar-cta--compact .navbar-account-name { max-width: 7.5rem; }

    /* the longest name with 5 items measured 9.7px over the row at 1400+ */
    #mainNavbar .nvd-nav--compact > .nav-item > .nav-link { padding-inline: .7rem !important; }
    #mainNavbar .nvd-nav--compact > .nav-item > .nav-link.active::after { left: .7rem; right: .7rem; }
}

/* ทรัพย์ของฉัน's count sits on the corner like the bell's, not in the row: inline it added 38px and pushed
   the header past its edge the moment a count appeared */
@media (min-width: 1200px) {
    #mainNavbar .nav-link.navbar-action-link .navbar-action-badge {
        position: absolute;
        top: 1px;
        right: -3px;
        z-index: 1;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 10px;
    }
}

/* The JS appends the glide to the navbar on every width and keeps the inline width/height of the last hover.
   Below 1200px it must not be a flex item of the header: after a desktop hover and a narrower window it became an
   invisible 131x44 box on a second row and the header grew from 60 to 97px (user, 2026-11-06). */
.nvd-glide { display: none; }

@media (min-width: 1200px) {

    .nvd-glide {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 0;
        height: 0;
        border-radius: 10px;
        background: var(--theme-primary-light, #e3f3e9);
        opacity: 0;
        pointer-events: none;
        transition: transform .3s cubic-bezier(.22, .8, .24, 1), width .3s cubic-bezier(.22, .8, .24, 1), opacity .16s ease;
        will-change: transform, width;
    }

    .nvd-glide.is-on { opacity: 1; }

    /* ── Panels (quick search + mega menu): drop from the whole header, centred on the page ── */
    #mainNavbar .nvd-dd { position: static; }

    #mainNavbar .nvd-panel {
        --nvd-w: 760px;
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        width: var(--nvd-w);
        max-width: calc(100vw - 32px);
        margin: 0 0 0 calc(var(--nvd-w) / -2);
        padding: 18px;
        border: 1px solid #e0e9e4;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 22px 48px -20px rgba(15, 39, 27, .32), 0 4px 14px rgba(15, 39, 27, .06);
        color: #1f2d25;
        text-align: left;
    }

    /* invisible bridge over the gap under the header: moving the mouse from the item to the panel keeps it open */
    #mainNavbar .nvd-panel::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -18px;
        height: 18px;
    }

    #mainNavbar .nvd-panel.show { animation: nvdPanelIn .18s ease-out; }

    @keyframes nvdPanelIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .nvd-panel-head {
        display: block;
        margin: 0 0 8px 10px;
        color: #5f7a6c;
        font-size: 13px;
        font-weight: 700;
        line-height: 18px; /* whole-pixel line heights in the panels: fractional rows (1.4 x 13px) made each
                              row snap differently, so the same pin icon sat .87px off in one row and not the next */
    }

    /* Bootstrap paints .dropdown-item:active solid blue - keep the soft green of the site */
    #mainNavbar .nvd-panel .dropdown-item {
        white-space: normal;
        color: inherit;
    }

    #mainNavbar .nvd-panel .dropdown-item:is(:hover, :focus, :active) {
        background: #f1f7f3;
        color: inherit;
    }

    #mainNavbar .nvd-panel .dropdown-item:focus-visible {
        outline: 2px solid var(--theme-primary);
        outline-offset: -2px;
    }

    /* ── Mega menu: ดูตามประเภท ── */
    #mainNavbar .nvd-mega { padding-bottom: 8px; }

    .nvd-mega-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 232px;
        gap: 0 18px;
    }

    .nvd-mega-col--places {
        padding-left: 18px;
        border-left: 1px solid #edf1ee;
    }

    .nvd-type-list,
    .nvd-place-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nvd-type-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 6px;
    }

    #mainNavbar .nvd-type {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 7px 10px;
        border-radius: 12px;
    }

    .nvd-type-icon {
        display: flex;
        flex: 0 0 40px;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #eef6f1;
        color: var(--theme-primary);
        transition: background-color .15s ease, color .15s ease;
    }

    .nvd-type-icon .bi { font-size: 20px; }

    /* measured at 4x: the briefcase glyph draws .87px above the centre of its tile */
    .nvd-type-icon .bi-briefcase { position: relative; top: 1px; }

    /* layouts/property loads no web font: Thai falls back to Tahoma but digits stay Times New Roman (serif).
       Counts are digits only, so a sans face here changes no Thai letter. */
    .nvd-num { font-family: Tahoma, "Segoe UI", Arial, sans-serif; }

    .nvd-type-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .nvd-type-name {
        color: #1f2d25;
        font-size: 15px;
        font-weight: 600;
        line-height: 21px;
    }

    .nvd-type-count {
        color: #6b7d72;
        font-size: 13px;
        line-height: 18px;
    }

    #mainNavbar .nvd-type:is(:hover, :focus) .nvd-type-icon {
        background: var(--theme-primary);
        color: #fff;
    }

    #mainNavbar .nvd-type:is(:hover, :focus) .nvd-type-name { color: var(--theme-primary); }

    .nvd-type--empty .nvd-type-icon { background: #f3f5f4; color: #93a39a; }
    .nvd-type--empty .nvd-type-name { color: #6b7d72; font-weight: 500; }
    .nvd-type--empty .nvd-type-count { color: #93a39a; }

    #mainNavbar .nvd-place {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 10px;
        font-size: 15px;
        line-height: 21px;
    }

    .nvd-place > .bi { flex: 0 0 auto; color: #7f9a8b; font-size: 16px; }

    .nvd-place-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nvd-place-count {
        flex: 0 0 auto;
        padding: 1px 8px;
        border-radius: 999px;
        background: #f1f5f2;
        color: #5f7a6c;
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
    }

    #mainNavbar .nvd-place:is(:hover, :focus) { color: var(--theme-primary); }
    #mainNavbar .nvd-place:is(:hover, :focus) > .bi { color: var(--theme-primary); }
    #mainNavbar .nvd-place:is(:hover, :focus) .nvd-place-count { background: #dff0e6; color: var(--theme-primary); }

    #mainNavbar .nvd-mega-all {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        padding: 10px 10px 12px; /* measured: the words sat 1.5px low with 11px / 11px */
        border-top: 1px solid #edf1ee;
        border-radius: 0 0 10px 10px;
        color: var(--theme-primary);
        font-size: 15px;
        font-weight: 600;
        line-height: 21px;
    }

    #mainNavbar .nvd-mega-all:is(:hover, :focus) { color: var(--theme-primary); }
    #mainNavbar .nvd-mega-all > .bi { position: relative; top: 1px; font-size: 16px; transition: transform .18s ease; }
    #mainNavbar .nvd-mega-all:hover > .bi { transform: translateX(3px); }

    /* ── Quick search panel: ค้นหา ── */
    #mainNavbar .nvd-search { --nvd-w: 640px; padding: 16px 18px 14px; }
    #mainNavbar .nvd-search .nvd-panel-head { margin-left: 2px; }

    .nvd-search-row {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .nvd-search-field {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* search-assistant.js lifts its wrapper to z-index 1060 on focus (for the floating box elsewhere);
       here that would cover the magnifier, and the box lives inside the panel anyway */
    #mainNavbar .nvd-search-field .search-assistant-wrapper { z-index: auto !important; }

    .nvd-search-field > .bi {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 2;
        color: #7d9187;
        font-size: 18px;
        pointer-events: none;
    }

    #mainNavbar .nvd-search-input {
        width: 100%;
        height: 48px;
        padding: 0 14px 0 44px;
        border: 1.5px solid #d4e2da;
        border-radius: 12px;
        background: #fff;
        color: #1f2d25;
        font-size: 15px;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    #mainNavbar .nvd-search-input::placeholder { color: #8a9a91; }

    #mainNavbar .nvd-search-input:focus {
        border-color: var(--theme-primary);
        outline: 0;
        box-shadow: 0 0 0 4px rgba(3, 84, 50, .12);
    }

    .nvd-search-submit {
        flex: 0 0 auto;
        min-width: 96px;
        height: 48px;
        padding: 0 20px;
        border: 0;
        border-radius: 12px;
        background: var(--theme-primary);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        transition: background-color .15s ease;
    }

    .nvd-search-submit:hover { background: var(--theme-primary-hover, #024028); }

    .nvd-search-submit:focus-visible {
        outline: 2px solid var(--theme-primary);
        outline-offset: 2px;
    }

    /* the smart-search history / suggestions box moved in here by the JS: part of the panel, not a floating card */
    #mainNavbar .nvd-search-suggest .search-dropdown-menu {
        position: static;
        margin: 14px 0 0;
        padding: 14px 2px 2px;
        border: 0;
        border-top: 1px solid #edf1ee;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    .nvd-search-tip {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 12px 0 0 2px;
        color: #6b7d72;
        font-size: 13px;
        line-height: 18px;
    }

    .nvd-search-tip kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border: 1px solid #d4e2da;
        border-bottom-width: 2px;
        border-radius: 6px;
        background: #f7faf8;
        color: #3f5448;
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }
}

/* ── Icon ↔ label alignment (user, 2026-11-06: "ไอคอนกับตัวอักษรไม่อยู่ระหว่างกลางกัน") ──
   Measured at 4x: the icon's drawn centre vs the BODY of the Thai letters (rows with >= 45% of the densest
   row's ink, so tone marks and upper/lower vowels don't pull it), and that body vs the centre of the surface.
   Before: three layers of nudges (navbar inline -.75px / -.5px / +1px and icon-label-align's .065em) left
   icons .75-1.25px off. Here one explicit value per glyph replaces them on desktop. `top` and
   `inset-block-start` are both set because the older rules use one or the other. */
@media (min-width: 1200px) {
    /* center items: the letters sat 1.25px below the middle of the 44px item - lift the whole row.
       Whole pixels only: fractional offsets snapped differently per element (2.5px lifted the text 2px). */
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link { padding-bottom: 2px !important; }

    #mainNavbar [data-nvd-nav] .navbar-link-label,
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link > .bi,
    #mainNavbar [data-nvd-nav] .navbar-action-label > .bi {
        position: relative;
        top: 0;
        inset-block-start: 0;
    }

    /* measured -.75 / -.75 / -1.25px (icon above the letters) -> 1px down = within .25px */
    #mainNavbar [data-nvd-nav] > .nav-item > .nav-link > :is(.bi-house-door, .bi-house-door-fill, .bi-search, .bi-grid, .bi-list-task, .navbar-type-chevron) { top: 1px; inset-block-start: 1px; }

    /* contact / post / sign in / register (14px labels): the label body sits in the middle already */
    .property-navbar .navbar-cta .navbar-quick-action > :is(.navbar-quick-label, .navbar-account-name),
    .property-navbar .navbar-cta .navbar-quick-action > .bi {
        position: relative;
        top: 0;
        inset-block-start: 0;
    }

    /* measured +.88px (icon below the letters) -> 1px up */
    .property-navbar .navbar-cta .navbar-quick-action > :is(.bi-plus-circle, .bi-box-arrow-in-right, .bi-person-plus) {
        top: -1px;
        inset-block-start: -1px;
    }
}

/* ── Account button (user, 2026-11-06: "ปรับให้สวยงามและทันสมัย น่าใช้ เฟรนลี่") ──
   An account chip: avatar flush in the pill's rounded end (concentric), name, chevron.
   Rest = transparent like the other header actions; hover = the shared soft green;
   open = a white pill with a hairline border and soft shadow, the same surface as the menu card below it,
   so it reads as "this opened that". No lift, no width change between states. */
@media (min-width: 1200px) {
    .property-navbar .navbar-cta .navbar-account-toggle {
        gap: 8px;
        padding: var(--navbar-action-inset) 11px var(--navbar-action-inset) 3px;
        border-radius: 999px;
    }

    .property-navbar .navbar-cta .navbar-account-toggle::before {
        border: 1px solid transparent;
        transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .property-navbar .navbar-cta .navbar-account-toggle[aria-expanded="true"] {
        --navbar-action-fill: #fff;
        color: var(--theme-primary);
    }

    .property-navbar .navbar-cta .navbar-account-toggle[aria-expanded="true"]::before {
        border-color: #cfe2d6;
        box-shadow: 0 8px 18px -10px rgba(3, 84, 50, .42), 0 1px 2px rgba(15, 39, 27, .06);
    }

    .property-navbar .navbar-cta .navbar-account-toggle > :is(.navbar-profile-img, .navbar-profile-initial) {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #d3e4da;
        transition: box-shadow .15s ease;
    }

    .property-navbar .navbar-cta .navbar-account-toggle:is(:hover, [aria-expanded="true"]) > :is(.navbar-profile-img, .navbar-profile-initial) {
        box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--theme-primary);
    }

    /* Thai initial: Tahoma keeps the looped letters (the loopless fallback drew "บ" like a Latin "U") */
    .property-navbar .navbar-cta .navbar-profile-initial {
        background: linear-gradient(145deg, #0B7A46 0%, #035432 100%);
        color: #fff;
        font-family: Tahoma, "Segoe UI", sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        padding-bottom: .1em;
    }

    .property-navbar .navbar-cta .navbar-profile-initial--latin { padding-bottom: 0; padding-top: .08em; }

    .property-navbar .navbar-cta .navbar-account-name { font-weight: 500; }

    /* measured: the name's letters sat .63px below the middle of the pill -> name + chevron 1px up */
    .property-navbar .navbar-cta .navbar-account-toggle > :is(.navbar-account-name, .navbar-account-chevron) {
        position: relative;
        top: -1px;
        inset-block-start: -1px;
    }

    .property-navbar .navbar-cta .navbar-account-chevron {
        color: #7a8a80;
        transition: transform .2s ease, color .15s ease;
    }

    .property-navbar .navbar-cta .navbar-account-toggle:is(:hover, [aria-expanded="true"]) .navbar-account-chevron { color: var(--theme-primary); }

    /* the menu's own avatar initial: same looped face as the button */
    .property-navbar .navbar-cta .navbar-menu-avatar-initial {
        font-family: Tahoma, "Segoe UI", sans-serif;
        font-size: 18px;
        font-weight: 700;
        transform: none;
        padding-bottom: 4px; /* measured at 4x: 0 = 2.1-2.6px low, 4px = .1-.6px */
    }

    .property-navbar .navbar-cta .navbar-menu-avatar-initial--latin { padding-bottom: 0; padding-top: .08em; }

    /* Account menu rows: whole-pixel sizes (were .85rem = 13.6px, .68rem, .92rem...). Fractional row positions
       made the same icon tile sit .75px off its label in some rows and centred in others. */
    .property-navbar .navbar-cta .navbar-menu-profile-name::before { font-size: 11px; line-height: 15px; }
    .property-navbar .navbar-cta .navbar-menu-profile-name { font-size: 15px; line-height: 20px; }
    .property-navbar .navbar-cta .navbar-menu-profile-meta { font-size: 11px; line-height: 15px; }
    .property-navbar .navbar-cta .navbar-menu-section { font-size: 11px; line-height: 16px; }
    .property-navbar .navbar-cta .navbar-menu-item { font-size: 14px; line-height: 20px; }
    .property-navbar .navbar-cta .navbar-menu-label { line-height: 20px; }
    .property-navbar .navbar-cta .navbar-menu-label .mmenu-subtext { font-size: 11px; line-height: 15px; }
    .property-navbar .navbar-cta .navbar-menu-label small { font-size: 12px; line-height: 16px; } /* agent-usability.css: 12px x 1.35 */

    /* agents read 15px rows (agent-usability.css): there the letters sat .75px below the tile's middle in every row */
    .agent-session .property-navbar .navbar-cta .navbar-menu-label { position: relative; top: -1px; }
}

/* ── Tooltip on the icon-only chat / bell buttons (mouse only) ── */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .navbar-cta [data-nvd-tip]::after {
        content: attr(data-nvd-tip);
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        z-index: 5;
        padding: 5px 10px;
        border-radius: 8px;
        background: #1f2d25;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        white-space: nowrap;
        opacity: 0;
        transform: translate(-50%, -3px);
        pointer-events: none;
        transition: opacity .14s ease, transform .14s ease;
    }

    .navbar-cta [data-nvd-tip]:hover::after {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-delay: .3s;
    }

    .navbar-cta [data-nvd-tip][aria-expanded="true"]::after { opacity: 0; transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
    .nvd-glide,
    .property-navbar.shadow-sm,
    #mainNavbar [data-nvd-nav] .navbar-type-chevron::before,
    #mainNavbar .nvd-mega-all > .bi { transition: none; }

    #mainNavbar .nvd-panel.show { animation: none; }
    .navbar-cta [data-nvd-tip]::after { transition: none; }

    .property-navbar .navbar-cta .navbar-account-toggle::before,
    .property-navbar .navbar-cta .navbar-account-toggle > :is(.navbar-profile-img, .navbar-profile-initial),
    .property-navbar .navbar-cta .navbar-account-chevron { transition: none; }
}