/* ================================================================
   WANDER HOME — GUESTY LISTINGS STYLESHEET

   Token reference (mirrors Elementor + single property vars):
   Colors:    --nt-primary   #132845
              --nt-secondary #91B6D9
              --nt-accent    #525252
              --nt-gold      #F5C142
              --nt-white     #FFFFFF
              --nt-bg        #F7F7F7
              --nt-error     #d32f2f
   Radius:    --nt-r 16px  |  --nt-r-sm 10px
   Font size: --nt-fs-xs 11px  |  --nt-fs-sm 13px  |  --nt-fs-label 14px
              --nt-fs-body 18px  |  --nt-fs-title-sm 22px
   Buttons:   large  14px 30px  |  small  8px 14px
   Structure:
   1.  Design Tokens
   2.  Base
   3.  Map
   4.  Search Bar
   5.  Dropdown Panels
   6.  Calendar
   7.  Adults Panel
   8.  Amenities Panel
   9.  Sort Panel
   10. Property Grid (legacy)
   11. Load More Button
   12. Skeleton Cards
   13. Property Listing — Wrapper, Card, Image, Content, Meta, Owl Dots
   14. Home Listing
   15. MEDIA QUERIES (all consolidated at bottom)
================================================================ */


/* ================================================================
   1. DESIGN TOKENS
================================================================ */
:root {
    /* Colors */
    --nt-primary:   var(--e-global-color-primary,   #132845);
    --nt-secondary: var(--e-global-color-secondary, #91B6D9);
    --nt-accent:    var(--e-global-color-accent,     #525252);
    --nt-gold:      var(--e-global-color-8d39b28,    #F5C142);
    --nt-white:     #FFFFFF;
    --nt-bg:        var(--e-global-color-4719491,    #F7F7F7);
    --nt-error:     #d32f2f;
    --nt-hover-bg:  #f5f5f5;
    --nt-selected:  #f0f4ff;
    --nt-divider:   #eee;
    --nt-card-bg: #F1F1F1; 
    /* Radius */
    --nt-r:    16px;
    --nt-r-sm: 10px;

    /* Font sizes */
    --nt-fs-xs:       11px;   /* tiny buttons, dow labels */
    --nt-fs-sm:       13px;   /* small UI, dropdown items */
    --nt-fs-label:    14px;   /* labels, meta, main buttons */
    --nt-fs-body:     18px;   /* regular text */
    --nt-fs-title-sm: 22px;   /* card titles */

    /* Button padding */
    --nt-btn-pad:    14px 30px;  /* large buttons */
    --nt-btn-pad-sm: 8px 14px;   /* small buttons (calendar, reset) */
}


/* ================================================================
   2. BASE
================================================================ */
.nt-listing-wrap { margin: 0 auto; }


/* ================================================================
   3. MAP
================================================================ */
.nt-map {
    width: 100%;
    height: 400px;
    border-radius: var(--nt-r);
    margin-bottom: 60px;
    background: #f0f0f0;
    border: 1px solid var(--nt-divider);
}


/* ================================================================
   4. SEARCH BAR
================================================================ */
.nt-hero-search-wrap {
    margin: 0px !important;
/*    top: -40px !important;*/
}

.nt-search-wrap {
    display: flex;
    align-items: stretch;
    gap: 10px;
    position: relative;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.nt-search-field {
    background: var(--nt-white);
    border-radius: var(--nt-r);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    border: 0.5px solid transparent;
    transition: border-color 0.15s;
    position: relative;
}
.nt-search-field:hover  { border-color: var(--nt-accent); }
.nt-search-field.active { border-color: var(--nt-primary); box-shadow: 0 0 0 2px rgba(26,46,74,.10); }

.nt-search-field-dates {
    display: flex;
    flex: 2.7;
    background: var(--nt-white);
    border-radius: var(--nt-r);
    overflow: visible;
    position: relative;
    border: 0.5px solid transparent;
    transition: border-color 0.15s;
}
.nt-search-field-dates .nt-search-field         { border-radius: var(--nt-r); flex: 1; border: none; box-shadow: none; }
.nt-search-field-dates .nt-search-field:first-child { border-right: 1px solid var(--nt-divider); border-radius: var(--nt-r) 0 0 var(--nt-r); }
.nt-search-field-dates .nt-search-field:last-child  { border-radius: 0 var(--nt-r) var(--nt-r) 0; }
.nt-search-field-dates.active { border-color: var(--nt-primary); box-shadow: 0 0 0 2px rgba(26,46,74,.10); }

/* Error state */
#ntsfDatesGroup.nt-error {
    border: 2px solid var(--nt-error);
}
.nt-field-error {
    display: none;
    color: var(--nt-error);
    font-size: var(--nt-fs-sm);
    position: absolute;
    bottom: -40px;
    text-align: left;
    width: 100%;
}
#ntsfDatesGroup.nt-error .nt-field-error {
    display: block;
}

.nt-search-label {
    font-size: var(--nt-fs-label);
    color: var(--nt-accent);
    margin-bottom: 3px;
    line-height: 1em;
}

.nt-search-value {
    font-size: var(--nt-fs-body);
    color: var(--nt-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}
.nt-search-value.placeholder { color: var(--nt-primary); }

/* Chevron. Was the ▼ character at 9px, which the system font drew solid and
   heavier than every other arrow on the site; this is the same SVG path the
   calendar nav and the property page use, so all of them now match.
   currentColor means it inherits the field's own colour instead of a hardcoded
   grey that stayed pale against the active border. */
.nt-search-arrow {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-left: auto;
    /* Full navy, no fade. It was set to .45 opacity, which on a white field
       left it a pale grey smudge that was hard to see at 9px — the arrow is
       the only cue these fields open at all, so it should not be the faintest
       thing in them. */
    fill: var(--nt-primary);
    transition: transform .18s ease;
}
/* Points up while its panel is open — the arrow now says which way it goes. */
.nt-search-field.active .nt-search-arrow { transform: rotate(180deg); }

/* Search button */
.nt-search-btn {
    background: var(--nt-secondary) !important;
    color: var(--nt-primary) !important;
    border: none;
    border-radius: var(--nt-r) !important;
    padding: var(--nt-btn-pad);
    font-size: var(--nt-fs-label);
    font-weight: 600;
    letter-spacing: 1.5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 90px;
}
.nt-search-btn-dark {
    background: var(--nt-primary) !important;
    color: var(--nt-white) !important;
}
.nt-search-btn-dark:hover,
.nt-search-btn-dark:focus,
.nt-search-btn-dark:active,
.nt-hero-search-wrap .nt-search-btn:hover,
.nt-hero-search-wrap .nt-search-btn:active,
.nt-hero-search-wrap .nt-search-btn:focus {
    background: var(--nt-gold) !important;
    color: var(--nt-primary) !important;
}

/* Search button spinner */
.nt-search-btn.loading { color: transparent !important; position: relative; }
.nt-search-btn.loading::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: var(--nt-white);
    border-radius: 50%;
    animation: nt-spin 0.65s linear infinite;
}

/* ── Clear / Reset button ──────────────────────────────────────────
   Deliberately a secondary, outlined button rather than a third solid
   colour: SEARCH is the action people want, and a destructive reset
   sitting next to it with equal weight invites mis-clicks. It inherits
   .nt-search-btn for sizing so the two always match height, and only
   the colours are overridden here.                                     */
.nt-search-btn-clear {
    background: transparent !important;
    color: var(--nt-primary) !important;
    border: 2px solid var(--nt-primary) !important;
    min-width: 80px;
}
/* Greyed out until something is actually filtering. PHP renders the disabled
   attribute and ntSB keeps it in step.

   Disabled rather than hidden on purpose: this button sits in the same flex
   row as SEARCH, so hiding it made the whole bar jump sideways whenever a
   filter changed. Greying keeps the layout still.

   The hover rule above has to be neutralised here, or a disabled button still
   turns solid navy under the cursor and looks clickable. */
.nt-search-btn-clear:disabled,
.nt-search-btn-clear[disabled] {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;   /* also stops the title tooltip implying it works */
}
.nt-search-btn-clear:disabled:hover,
.nt-search-btn-clear[disabled]:hover,
.nt-search-btn-clear:disabled:focus,
.nt-search-btn-clear[disabled]:focus {
    background: transparent !important;
    color: var(--nt-primary) !important;
}
.nt-search-btn-clear:hover,
.nt-search-btn-clear:focus,
.nt-search-btn-clear:active {
    background: var(--nt-primary) !important;
    color: var(--nt-white) !important;
}
/* The spinner rule above paints a white-on-white spinner on this variant,
   so give it one in the button's own ink. */
.nt-search-btn-clear.loading::after {
    border-color: rgba(19, 40, 69, 0.25);
    border-top-color: var(--nt-primary);
}


/* ================================================================
   5. DROPDOWN PANELS
================================================================ */
.nt-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--nt-white);
    border-radius: var(--nt-r);
    border: 0.5px solid #e0e0e0;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 9999;
    padding: 12px;
}

/* Panel open animation */
.nt-panel.open {
    display: block;
    animation: ntPanelIn 0.2s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes ntPanelIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   6. CALENDAR
================================================================ */
.nt-cal-panel { width: 100%; }
.nt-cal-wrap  { display: flex; gap: 24px; }
.nt-cal-month { flex: 1; }

.nt-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.nt-cal-header span {
    font-size: var(--nt-fs-label);
    font-weight: 600;
    color: var(--nt-primary);
}

.nt-cal-nav {
    width: 36px;
    height: 36px;
    background: var(--nt-primary) !important;
    border-radius: var(--nt-r-sm) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nt-white) !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border: none;
    transition: background .15s;
}
.nt-cal-nav:hover,
.nt-cal-nav:active {
    background: var(--nt-gold) !important;
    color: var(--nt-white);
}
.nt-cal-nav svg {
    fill: var(--nt-white);
    width: 15px;
    height: 15px;
}

.nt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.nt-cal-dow {
    font-size: var(--nt-fs-xs);
    color: var(--nt-accent);
    text-align: center;
    padding: 4px 0;
    font-weight: 500;
}

.nt-cal-day {
    font-size: var(--nt-fs-sm);
    text-align: center;
    padding: 7px 4px;
    border-radius: var(--nt-r-sm);
    cursor: pointer;
    color: var(--nt-accent);
    transition: all .1s;
}
.nt-cal-day:hover:not(.nt-cal-dis) { background: var(--nt-selected); }
.nt-cal-dis      { color: #ddd; cursor: not-allowed; background: #fafafa; }
.nt-cal-start    { background: var(--nt-primary) !important; color: var(--nt-white) !important; border-radius: var(--nt-r-sm) 0 0 var(--nt-r-sm); }
.nt-cal-end      { background: var(--nt-primary) !important; color: var(--nt-white) !important; border-radius: 0 var(--nt-r-sm) var(--nt-r-sm) 0; }
.nt-cal-start.nt-cal-end { border-radius: var(--nt-r-sm) !important; }
.nt-cal-in-range { background: #d0e0f0 !important; color: #333 !important; border-radius: 0 !important; }

.nt-cal-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 0.5px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Small calendar buttons (Clear / Apply) */
.nt-cal-clear {
    background: none;
    color: var(--nt-white);
    border: none;
    border-radius: var(--nt-r-sm) !important;
    padding: var(--nt-btn-pad-sm) !important;
    font-size: var(--nt-fs-xs) !important;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.nt-cal-apply,
.nt-amen-clear-btn {
    background: var(--nt-primary);
    color: var(--nt-white);
    border: none;
    border-radius: var(--nt-r-sm) !important;
    padding: var(--nt-btn-pad-sm) !important;
    font-size: var(--nt-fs-xs) !important;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.nt-cal-clear:hover,
.nt-cal-clear:focus,
.nt-cal-clear:active,
.nt-cal-apply:hover,
.nt-cal-apply:focus,
.nt-cal-apply:active,
.nt-cal-nav:hover,
.nt-cal-nav:focus,
.nt-cal-nav:active,
.nt-amen-clear-btn:hover,
.nt-amen-clear-btn:focus,
.nt-amen-clear-btn:active {
    background: var(--nt-gold) !important;
    color: var(--nt-primary) !important;
}


/* Hero search: calendar always opens above the date fields */
.nt-hero-search-wrap .nt-cal-panel {
    top: auto;
    bottom: calc(100% + 8px);
}
.nt-hero-search-wrap .nt-cal-panel.open {
    animation-name: ntPanelUp;
}
@keyframes ntPanelUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Hero search: guests panel opens above too */
.nt-hero-search-wrap .nt-adults-panel {
    top: auto;
    bottom: calc(100% + 8px);
}
.nt-hero-search-wrap .nt-adults-panel.open {
    animation-name: ntPanelUp;
}
/* Panel flipped above its field (set by JS when space below is tight) */
/*.nt-panel.nt-panel-up {
    top: auto;
    bottom: calc(100% + 8px);
}
.nt-panel.nt-panel-up.open {
    animation-name: ntPanelUp;
}
@keyframes ntPanelUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}*/

/* ================================================================
   7. ADULTS PANEL
================================================================ */
.nt-adults-panel {
    width: 100%;
    max-height: 360px;
    overflow-y: scroll;
}

.nt-adults-opt {
    padding: 8px 12px;
    border-radius: var(--nt-r);
    cursor: pointer;
    font-size: var(--nt-fs-sm);
    color: var(--nt-accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 2px apart. Flush rows meant a hovered row's grey block sat directly against
   the selected row's blue one with no seam — two filled shapes touching, which
   read as one smeared block rather than two states. The gap is small enough to
   change nothing else and is what separates them. */
.nt-adults-opt + .nt-adults-opt { margin-top: 2px; }
.nt-adults-opt       { transition: background .15s ease, color .15s ease; }
.nt-adults-opt:hover { background: var(--nt-hover-bg); }
.nt-adults-opt.sel   { background: var(--nt-selected); color: var(--nt-primary); font-weight: 600; }
/* Selected stays selected under the cursor, rather than greying out. */
.nt-adults-opt.sel:hover { background: var(--nt-selected); }


/* ================================================================
   8. AMENITIES PANEL
================================================================ */
.nt-amen-panel { width: 100%; }

.nt-amen-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--nt-primary) !important;
    border-radius: var(--nt-r-sm) !important;
    font-size: var(--nt-fs-sm);
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
    color: var(--nt-primary) !important;
}
.nt-amen-search:focus { border-color: var(--nt-primary) !important; }

.nt-amen-list { max-height: 220px; overflow-y: auto; }

.nt-amen-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    /* Radius lives here, not on :hover. Applying it only on hover meant the
       row's corners snapped square-to-round under the cursor. */
    border-radius: var(--nt-r-sm);
    border-bottom: 0.5px solid var(--nt-hover-bg);
    cursor: pointer;
    transition: background .15s ease;
}
.nt-amen-item:last-child { border-bottom: none; }
.nt-amen-item:hover      { background: var(--nt-hover-bg); }
/* A ticked row keeps its tint, so the chosen filters stay readable while the
   cursor moves over the list. */
.nt-amen-item.is-on       { background: var(--nt-selected); }
.nt-amen-item.is-on:hover { background: var(--nt-selected); }
.nt-amen-item.is-on .nt-amen-label { color: var(--nt-primary); font-weight: 600; }

.nt-amen-cb    { width: 16px; height: 16px; accent-color: var(--nt-primary); flex-shrink: 0; cursor: pointer; }
.nt-amen-label { font-size: var(--nt-fs-sm); color: var(--nt-accent); cursor: pointer; flex: 1; }

.nt-amen-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nt-amen-count { font-size: 12px; color: var(--nt-accent); }


/* ================================================================
   9. SORT PANEL
================================================================ */
.nt-sort-panel { width: 100%; }

.nt-sort-opt {
    padding: 10px 12px;
    border-radius: var(--nt-r);
    cursor: pointer;
    font-size: var(--nt-fs-sm);
    color: var(--nt-accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Same 2px seam as the guests list — see the note there. */
.nt-sort-opt + .nt-sort-opt { margin-top: 2px; }
.nt-sort-opt       { transition: background .15s ease, color .15s ease; }
.nt-sort-opt:hover { background: var(--nt-hover-bg); }
.nt-sort-opt.sel   { background: var(--nt-selected); color: var(--nt-primary); font-weight: 600; }
.nt-sort-opt.sel:hover { background: var(--nt-selected); }
.nt-sort-chk       { color: var(--nt-primary); font-size: var(--nt-fs-label); display: inline-flex; }

/* The selected-option tick, in the sort and guests panels. Sized once here so
   the two panels cannot drift apart; fill: currentColor lets it take the row's
   own colour rather than carrying a hardcoded one. */
.nt-tick {
    width: 11px;
    height: 11px;
    fill: currentColor;
    flex-shrink: 0;
}
.nt-adults-chk { display: inline-flex; align-items: center; color: var(--nt-primary); }


/* ================================================================
   10. PROPERTY GRID (legacy shortcodes)
================================================================ */
.nt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}
.nt-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    background: var(--nt-hover-bg);
    border-radius: var(--nt-r, 12px);
    color: var(--nt-accent);
}
.nt-no-results-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    /* Stroke, not fill — a hairline outline reads as an illustration rather
       than competing with the navy buttons for attention. */
    fill: none;
    stroke: var(--nt-primary);
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: .45;
}
.nt-no-results-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
    color: var(--nt-primary);
}
.nt-no-results-text {
    margin: 0 auto 24px;
    max-width: 46ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--nt-accent);
}

.nt-no-results-btn {
    display: inline-block;
    padding: 12px 28px;
    border: none !important;
    border-radius: var(--nt-r-sm, 8px);
    background: transparent;
    color: var(--nt-primary);
    font-size: 13px;
    cursor: pointer;
}
.nt-no-results-btn:hover {
    background: var(--nt-primary);
    color: #fff;
}

@media (max-width: 767px) {
    .nt-no-results       { padding: 44px 18px; }
    .nt-no-results-title { font-size: 18px; }
}


/* ================================================================
   11. LOAD MORE BUTTON
================================================================ */
.nt-load-more-container { text-align: center; margin: 70px 0 0; }

.nt-load-more-btn {
    background: var(--nt-primary);
    color: var(--nt-white);
    border: none;
    border-radius: var(--nt-r-sm);
    padding: var(--nt-btn-pad);
    font-size: var(--nt-fs-label);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    min-width: 140px;
    position: relative;
}
.nt-load-more-btn:hover,
.nt-load-more-btn:focus {
    background: var(--nt-gold) !important;
    color: var(--nt-primary) !important;
}
.nt-load-more-btn:disabled { cursor: not-allowed; }

/* Spinner inside Load More */
.nt-load-more-btn.loading { color: transparent !important; }
.nt-load-more-btn.loading::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: var(--nt-white);
    border-radius: 50%;
    animation: nt-spin 0.65s linear infinite;
}

@keyframes nt-spin    { to { transform: rotate(360deg); } }


/* ================================================================
   12. SKELETON CARDS
================================================================ */
@keyframes nt-shimmer {
    0%   { background-position: -700px 0; }
    100% { background-position:  700px 0; }
}

.nt-sk-img,
.nt-sk-line {
    background: linear-gradient(90deg, #ececec 0%, #f8f8f8 40%, #ececec 80%);
    background-size: 700px 100%;
    animation: nt-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--nt-r-sm);
    display: block;
}

.nt-skeleton-card {
    background: var(--nt-white);
    border-radius: var(--nt-r);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.nt-sk-img  { width: 100%; height: 220px; border-radius: 0; }
.nt-sk-body { padding: 16px 18px 20px; }
.nt-sk-meta { display: flex; gap: 12px; }

/* Stagger shimmer delays */
.nt-skeleton-card:nth-child(1)  .nt-sk-img, .nt-skeleton-card:nth-child(1)  .nt-sk-line { animation-delay: 0.00s; }
.nt-skeleton-card:nth-child(2)  .nt-sk-img, .nt-skeleton-card:nth-child(2)  .nt-sk-line { animation-delay: 0.10s; }
.nt-skeleton-card:nth-child(3)  .nt-sk-img, .nt-skeleton-card:nth-child(3)  .nt-sk-line { animation-delay: 0.20s; }
.nt-skeleton-card:nth-child(4)  .nt-sk-img, .nt-skeleton-card:nth-child(4)  .nt-sk-line { animation-delay: 0.30s; }
.nt-skeleton-card:nth-child(5)  .nt-sk-img, .nt-skeleton-card:nth-child(5)  .nt-sk-line { animation-delay: 0.10s; }
.nt-skeleton-card:nth-child(6)  .nt-sk-img, .nt-skeleton-card:nth-child(6)  .nt-sk-line { animation-delay: 0.20s; }
.nt-skeleton-card:nth-child(7)  .nt-sk-img, .nt-skeleton-card:nth-child(7)  .nt-sk-line { animation-delay: 0.00s; }
.nt-skeleton-card:nth-child(8)  .nt-sk-img, .nt-skeleton-card:nth-child(8)  .nt-sk-line { animation-delay: 0.10s; }
.nt-skeleton-card:nth-child(9)  .nt-sk-img, .nt-skeleton-card:nth-child(9)  .nt-sk-line { animation-delay: 0.20s; }
.nt-skeleton-card:nth-child(10) .nt-sk-img, .nt-skeleton-card:nth-child(10) .nt-sk-line { animation-delay: 0.30s; }
.nt-skeleton-card:nth-child(11) .nt-sk-img, .nt-skeleton-card:nth-child(11) .nt-sk-line { animation-delay: 0.10s; }
.nt-skeleton-card:nth-child(12) .nt-sk-img, .nt-skeleton-card:nth-child(12) .nt-sk-line { animation-delay: 0.20s; }


/* ================================================================
   13. PROPERTY LISTING
================================================================ */

/* ── Wrapper ── */
.nt-property-listing-wrapper {
    padding: 40px 0 60px;
}
.nt-property-listing-slider.owl-carousel,
.nt-property-listing-slider.owl-loaded {
    display: block !important;
}

.nt-property-listing-slider .owl-stage { display: flex; }
.nt-property-listing-slider .owl-item  { display: flex; }
.nt-property-listing-slider .owl-item > * { width: 100%; }

/* ── Card ── */
.nt-property-item-card {
    background: var(--nt-bg);
    border-radius: var(--nt-r);
    padding: 15px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.nt-sp-related .nt-property-item-card {
    background: var(--nt-white);
}

/* Card background is set to f1f1f1*/
.nt-grid .nt-property-item-card { background: var(--nt-card-bg); }

/* Beats the .nt-sp-related white rule above on specificity (3 classes vs 2),
   so no !important is needed. */
.page-id-1970 .nt-sp-related .nt-property-item-card { background: var(--nt-card-bg); }
/* .page-id-1970 .nt-sp-related .nt-property-item-card {
    background: var(--nt-bg);
} */
/* ── Image ── */
.nt-property-item-image {
    position: relative;
    width: 100%;
}
.nt-property-item-image .nt-property-item-fetured img {
    width: 100%;
    height: 260px !important;
    object-fit: cover;
    border-radius: var(--nt-r) !important;
    display: block;
}
.nt-property-hot-tub-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px !important;
    height: auto !important;
}
.nt-property-paw-icon {
    position: absolute;
    top: 60px;
    right: 22px;
    width: 32px !important;
    height: auto !important;
}

/* ── Content ── */
.nt-property-item-content {
    padding: 15px 5px 5px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.nt-property-item-category {
    font-size: var(--nt-fs-label);
    color: var(--e-global-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.nt-property-item-title {
    margin: 5px 0 10px;
    word-break: break-word;
}
.nt-property-item-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.8em;
}
.nt-property-item-price {
    background: var(--e-global-color-8d39b28);
    color: var(--e-global-color-primary);
    padding: var(--nt-btn-pad);
    border-radius: var(--nt-r);
    display: inline-block;
    margin: 30px 0 20px;
    font-weight: 600;
    font-size: var(--nt-fs-label);
    align-self: flex-start;
    text-transform: uppercase;
    line-height: 1.6em !important;
}

.nt-grid .nt-property-item-price,
.nt-property-listing-wrapper .nt-property-item-price {
    align-self: center;
}

.nt-property-item-card > a {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.nt-property-item-excerpt { margin-bottom: 30px; }
.nt-property-item-price   { margin-top: auto; }

/* ── Meta ── */
.nt-property-item-meta {
    border-top: 1px solid var(--e-global-color-primary);
    padding-top: 20px;
    margin-top: 0;
}
.nt-property-item-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.nt-property-item-meta-row:last-child { margin-bottom: 0; }
.nt-property-item-meta img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    flex-shrink: 0;
}
.nt-property-item-meta-row span {
    font-size: var(--nt-fs-label);
    color: var(--e-global-color-primary);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ── Owl Dots ── */
.nt-property-listing-slider .owl-dots,
.nt-home-listing-mobile .owl-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 60px;
}
.nt-property-listing-slider .owl-dots button,
.nt-home-listing-mobile .owl-dots button {
    all: unset;
    cursor: pointer;
}
.nt-property-listing-slider .owl-dot span,
.nt-home-listing-mobile .owl-dots span {
    width: 8px;
    height: 8px;
    background: var(--e-global-color-primary);
    border-radius: 50%;
    display: block;
    transition: all 0.3s ease;
}
.nt-property-listing-slider .owl-dot.active span,
.nt-home-listing-mobile .owl-dot.active span {
    background: var(--e-global-color-8d39b28);
    transform: scale(1.2);
}


/* ================================================================
   14. HOME LISTING
================================================================ */
.nt-home-listing-mobile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

/* Card entrance animation */
/*.nt-home-listing-item {
    min-width: 0;
    animation: ntFadeUp 0.7s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

.nt-home-listing-item:nth-child(1) { animation-delay: 0.05s; }
.nt-home-listing-item:nth-child(2) { animation-delay: 0.10s; }
.nt-home-listing-item:nth-child(3) { animation-delay: 0.15s; }
.nt-home-listing-item:nth-child(4) { animation-delay: 0.20s; }
.nt-home-listing-item:nth-child(5) { animation-delay: 0.25s; }
.nt-home-listing-item:nth-child(6) { animation-delay: 0.30s; }*/


@media (min-width: 1025px) {
    .nt-home-listing-mobile.nt-hl-stagger .nt-home-listing-item {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item {
        animation: nt-hl-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item:nth-child(1){ animation-delay:.00s; }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item:nth-child(2){ animation-delay:.08s; }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item:nth-child(3){ animation-delay:.16s; }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item:nth-child(4){ animation-delay:.24s; }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item:nth-child(5){ animation-delay:.32s; }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item:nth-child(6){ animation-delay:.40s; }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item:nth-child(7){ animation-delay:.48s; }
    .nt-home-listing-mobile.nt-hl-stagger.nt-hl-go .nt-home-listing-item:nth-child(8){ animation-delay:.56s; }
}
@keyframes nt-hl-rise {
    from { opacity: 0; transform: translate3d(0, 50px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .nt-home-listing-mobile.nt-hl-stagger .nt-home-listing-item { opacity: 1; transform: none; animation: none; }
}

@keyframes ntFadeUp {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Card link — makes whole card clickable */
.nt-home-listing-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.nt-home-listing-img {
    width: 100%;
    overflow: hidden;
    border-radius: var(--nt-r);
    margin-bottom: 16px;
}
.nt-home-listing-img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: var(--nt-r);
    display: block;
}

.nt-home-listing-body { padding: 0 2px; }

.nt-home-listing-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

/* Title */
/*.nt-home-listing-title {
    color: var(--nt-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
    font-size: var(--nt-fs-title-sm);
    font-weight: 600;
    line-height: 1.2;
    margin: 0px;
    flex: 1 1 0%;
    overflow: hidden;
}*/

.nt-home-listing-title-wrap {
    flex: 1 1 0%;            /* moved here from the title */
    min-height: 61.59px;
    display: flex;
    align-items: center;
}

.nt-home-listing-title {
    color: var(--nt-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    font-size: var(--nt-fs-title-sm);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    width: 100%;            /* fill the wrapper */
    /* flex:1 removed — it's on the wrapper now */
}

/* Price tag — kept at its own sizing (10px 15px) as designed */
.nt-home-listing-price {
    background-color: var(--e-global-color-8d39b28, #f0c84a);
    font-size: var(--nt-fs-label) !important;
    font-weight: 600 !important;
    fill: var(--nt-primary);
    color: var(--nt-primary);
    border-radius: var(--nt-r);
    padding: 10px 15px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-transform: uppercase;
    display: inline-block;
    line-height: 1.6em !important;
}

/* "From" line inside the price badge. */
.nt-hl-price-from {
    display: block;
    text-align: center;
    font-size: 10px;
    line-height: 1.15 !important;
}

/* Hover effect (commented out — kept for reference) */
/*.nt-home-listing-card-link:hover .nt-home-listing-price {
    background-color: var(--nt-primary);
    color: var(--nt-white);
}*/

/* Subtitle */
.nt-home-listing-subtitle {
    margin: 0;
    font-size: 16px;
    color: var(--nt-accent);
    line-height: 1.6;
    max-width: 200px;
}

/* Owl Carousel override */
.nt-home-listing-mobile.owl-carousel .nt-home-listing-item {
    height: auto;
}

.nt-home-listing-info{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}

.nt-hl-divider{
  width:1px;
  height:16px;
  background:#d5dbe2;
  flex:0 0 1px;
}
.nt-home-listing-meta{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.nt-hl-meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:var(--nt-primary, #132845);
  line-height: 17px;
}
.nt-hl-meta-item img{
  flex:0 0 20px !important;
  border-radius: 0px !important;
  object-fit: contain !important;
    width: 20px !important;
    height: 20px !important;
    aspect-ratio: auto !important;

}
@media screen and (min-width: 1025px) and (max-width: 1260px) {
    .nt-home-listing-info {
    gap: 8px;
}
.nt-home-listing-subtitle{
  font-size:12px;
}
.nt-hl-meta-item {
    gap: 6px;
    font-size: 11px;
    line-height: 14px;
}
.nt-home-listing-meta {
    gap: 10px;
}
.nt-hl-meta-item img {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
}
.nt-home-listing-subtitle{
        max-width: 160px;
}
}
/* ================================================================
   15. MEDIA QUERIES
   Order: largest → smallest
================================================================ */

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .nt-home-listing-item {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ── max-width: 1080px ── */
@media (max-width: 1080px) {
    .nt-property-listing-recent .nt-property-item-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

/* ── max-width: 1024px ── */
@media (max-width: 1024px) {
    /* Search bar */
    .nt-search-wrap { flex-direction: column; }
    .nt-search-field-dates { 
        flex-direction: column; 
        border: 1px solid var(--nt-primary);
    }
     .nt-search-field{
        border: 1px solid var(--nt-primary);
    }
    .nt-search-field-dates .nt-search-field:first-child {
        border-right: none;
        border-bottom: 1px solid var(--nt-divider);
        border-radius: var(--nt-r) var(--nt-r) 0 0;
    }
    .nt-search-field-dates .nt-search-field:last-child { border-radius: 0 0 var(--nt-r) var(--nt-r); }
    .nt-cal-panel { width: 100%; left: 0%; transform: translateX(-50%); }
    .nt-cal-wrap  { flex-direction: column; }

    .nt-hero-search-wrap .nt-cal-panel {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        max-height: 60vh;
        overflow-y: auto;
        transform:none !important;
    }

    /* Map + search spacing */
    .nt-search-wrap,
    .nt-map { margin-bottom: 60px; }

    /* Property listing */
    .nt-property-item-title      { font-size: 21px; }
    .nt-load-more-container      { margin: 60px 0 0; }
    .nt-property-listing-wrapper { padding: 30px 0 40px; }

    /* Home listing */
    .nt-home-listing-mobile { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .nt-home-listing-title  { font-size: 20px; }
}

/* ── max-width: 900px ── */
@media (max-width: 900px) {
    .nt-grid { grid-template-columns: 1fr; }
    #ntsfDatesGroup.nt-error {
    /*  border: 2px solid var(--nt-error); */
        margin-bottom: 40px;
    }
}

/* ── max-width: 767px ── */
@media (max-width: 767px) {
    /* Calender   */
    .nt-cal-month:nth-child(2) { display: none; }

    /* Property listing */
    .nt-property-item-title   { font-size: 20px; }
    .nt-property-item-excerpt { font-size: 15px; line-height: 1.5em; }
    .nt-property-listing-wrapper { margin: 0 -20px; }
    .nt-property-listing-wrapper .owl-carousel .owl-stage {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    /*  .nt-property-item-price { font-size: 13px; } */

    /* Search */
    .nt-search-value { font-size: 16px; }

    /* Home listing */
    .nt-home-listing-mobile:not(.owl-carousel) {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .nt-home-listing-img img  { height: 220px; }
    .nt-home-listing-title    { font-size: 18px; }
}

/* ── max-width: 640px ── */
@media (max-width: 640px) {
    .nt-property-listing-recent .nt-property-item-card {
        flex: 0 0 100%;
    }
    .nt-property-listing-recent { padding: 0 20px; }
}