/* ==========================================================================
   nadelani custom overrides — theme-update-safe (NOT style.css).
   Linked from partials/header.blade.php; bump its ?v= when editing this file.
   ========================================================================== */

/* the gallery wrapper (property.blade.php) caps height at 610px + overflow:hidden
   for rounded corners — let it grow so the thumbnails/button below aren't clipped. */
.featured_slick_gallery { max-height: none !important; }

/* ===== property gallery: main image + thumbnails (Zillow/yad2 style) ===== */
.nd-gallery { direction: rtl; }

.nd-gallery-main {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f2f2;
}
.nd-main-link { display: block; width: 100%; height: 100%; }
.nd-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    cursor: zoom-in;
}
.nd-counter {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    direction: rtl;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    font-size: 13px; font-weight: 600;
    padding: 4px 10px; border-radius: 20px;
    pointer-events: none;
}

/* arrows — white circle (kept), prev=right (points →), next=left (points ←) for RTL */
.nd-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 4; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: none; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer; transition: background .2s, box-shadow .2s;
    direction: ltr; /* stop RTL bidi-mirroring of the ❯/❮ chevron glyphs */
}
.nd-arrow:hover { background: #f5f5f5; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22); }
.nd-arrow::before { color: #111; font-size: 20px; line-height: 1; font-weight: 700; }
.nd-prev { right: 16px; }
.nd-next { left: 16px; }
.nd-prev::before { content: "\276F"; } /* ❯ points right = הקודם (ימין) */
.nd-next::before { content: "\276E"; } /* ❮ points left  = הבא (שמאל) */

/* thumbnails strip (horizontal scroll on mobile) */
.nd-thumbs {
    display: flex; gap: 8px; margin-top: 8px;
    overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin;
}
.nd-thumb {
    flex: 0 0 auto; width: 80px; height: 60px; padding: 0;
    border: 2px solid transparent; border-radius: 6px; overflow: hidden;
    background: none; cursor: pointer; opacity: .7;
    transition: opacity .15s, border-color .15s;
}
.nd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nd-thumb:hover { opacity: 1; }
.nd-thumb.is-active { opacity: 1; border-color: #2563eb; }

/* explicit "show all N images" button (instead of a +N overlay that hides a thumb) */
.nd-show-all {
    display: inline-block; margin-top: 10px;
    background: #fff; color: #111; font-weight: 600; font-size: 14px;
    padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 8px;
    cursor: pointer; transition: background .2s;
}
.nd-show-all:hover { background: #f5f5f5; }

@media (max-width: 767px) {
    .nd-gallery-main { height: 250px; }
    .nd-thumb { width: 64px; height: 48px; }
}

/* ===== lightbox (Magnific Popup): dark backdrop + RTL Hebrew counter ===== */
.mfp-bg { background: rgba(0, 0, 0, 0.9) !important; opacity: 1 !important; }
.mfp-counter { direction: rtl; font-size: 14px; }
.mfp-arrow { z-index: 1046 !important; opacity: .95 !important; }
.mfp-arrow:hover { opacity: 1 !important; }
.mfp-arrow-left  { left: 3% !important; right: auto !important; }
.mfp-arrow-right { right: 3% !important; left: auto !important; }

/* ===== sticky contact — desktop card + mobile bottom bar ===== */

/* desktop: make the EXISTING agent sidebar card sticky (content unchanged).
   top uses --header-h (sticky header) with a 90px fallback — calibrate later. */
@media (min-width: 992px) {
    .nd-sticky-sidebar {
        position: sticky;
        top: calc(var(--header-h, 90px) + 16px);
    }
}

/* mobile: fixed bottom contact bar (WhatsApp primary + phone). Hidden until the
   user scrolls ~300px, then custom.js adds .is-visible and it slides up once. */
.nd-mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: #fff; border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    transform: translateY(115%); transition: transform .35s ease;
}
.nd-mobile-bar.is-visible { transform: translateY(0); }
.nd-mobile-bar-name { font-size: 12px; font-weight: 600; color: #64748b; text-align: center; margin-bottom: 6px; }
.nd-mobile-bar-actions { display: flex; gap: 8px; }
.nd-mbar-wa {
    flex: 1 1 auto; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff;
    font-weight: 700; font-size: 15px; padding: 13px; border-radius: 12px; text-decoration: none;
}
.nd-mbar-tel {
    flex: 0 0 52px; min-height: 48px; display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #2563eb; font-size: 18px; border-radius: 12px; text-decoration: none;
    /* touch target 52×48 — meets Apple 44 + Material 48 even though it's visually secondary */
}

@media (max-width: 991px) {
    #back2Top { display: none !important; }   /* the sticky bar owns the mobile bottom; scroll-btn is a vestige */
    .property-detail { padding-bottom: 84px; } /* spacer so the fixed bar never covers content (scoped, not body) */
}

/* ===== property map (inline Leaflet) ===== */
#ndPropertyMap { width: 100%; height: 450px; border-radius: 12px; z-index: 0; }
@media (max-width: 767px) { #ndPropertyMap { height: 300px; } }

/* ===== share — small secondary icon row (doesn't compete with the WhatsApp CTA) ===== */
.nd-share-row {
    list-style: none; margin: 0; padding: 20px 0;
    display: flex; gap: 10px; justify-content: center;
    border-top: 1px solid #e5e7eb;
}
.nd-share-row li { margin: 0; }
.nd-share-ico {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: #f1f5f9; color: #64748b; font-size: 15px;
    text-decoration: none; transition: background .2s, color .2s;
}
.nd-share-ico:hover { background: #e2e8f0; color: #334155; }

/* ===== bottom contact form (moved from the sidebar, 6b) — full-width, 600px centered.
   Made prominent (v14): tinted brand-blue panel so the eye catches it while scrolling,
   white fields, big green send button. All scoped to .nd-bottom-form — the shared
   form-contact-consult partial is untouched, and '.simple-form form' email-count JS still fires. */
.nd-bottom-form {
    background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe; border-radius: 20px;
    padding: 40px 26px; margin: 24px 0 40px;
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.12);
}
.nd-bottom-form-inner { max-width: 600px; margin: 0 auto; }
.nd-bottom-form-title {
    font-size: 28px; font-weight: 900; color: #1e293b;
    text-align: center; margin: 0 0 6px; line-height: 1.25;
}
.nd-bottom-form-sub {
    text-align: center; font-size: 15px; color: #64748b; margin: 0 0 26px;
}

/* white fields on the tinted panel + subtle shadow */
.nd-bottom-form .form-group { margin-bottom: 14px; }
.nd-bottom-form .form-control {
    background: #fff !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 14px 16px !important; font-size: 15px; height: auto;
    transition: border-color .15s, box-shadow .15s;
}
.nd-bottom-form .form-control:focus {
    border-color: #2563eb !important; outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* big blue full-width send button — override the theme's dark .btn-black */
.nd-bottom-form button[type="submit"],
.nd-bottom-form .btn-black {
    width: 100% !important; min-height: 52px !important;
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border: none !important; color: #fff !important;
    font-size: 17px !important; font-weight: 700 !important;
    padding: 14px !important; border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.30) !important;
    transition: transform .12s ease, box-shadow .2s ease !important;
}
.nd-bottom-form button[type="submit"]:hover,
.nd-bottom-form .btn-black:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(37, 99, 235, 0.42) !important;
}

/* ===== /properties mobile: the search toggle ==============================
   The theme ships this as rgba(25,206,109,.1) on white with a 20%-opacity
   border and green text — the washed-out version of the homepage's primary
   CTA, in the same hue. Under a full-colour banner it did not read as a
   button at all, which is a problem for the one control that opens the
   filters on mobile.

   Filled, in the homepage CTA's own gradient and weight, so the primary
   action on the page looks like the primary action everywhere else.

   Two things make this selector `div.filter_search_opt a` rather than the
   plain class. The theme sets `color: #19ce6d !important`, so colour needs
   !important to answer it — and this file is linked BEFORE style.css (index
   1 against index 16 in the rendered head), so at equal specificity the
   theme wins every tie regardless of !important. The extra element in the
   selector is what actually carries the override.

   That load order is a standing problem for every rule in this file, not
   just this one; moving the link after style.css would fix them all at once
   and is a change worth making deliberately, not as a side effect here. */
div.filter_search_opt a {
    background: linear-gradient(135deg, #25d366, #1ebe5a) !important;
    border: 0;
    border-radius: 50px;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
    transition: all .25s;
}
div.filter_search_opt a:hover,
div.filter_search_opt a:focus {
    background: linear-gradient(135deg, #1ebe5a, #17a34c);
    box-shadow: 0 12px 32px rgba(37, 211, 102, .45);
    color: #fff !important;
}

/* ─── RTL, three leftovers from the English theme ────────────────────────────────────
   Resido is an LTR theme: style.css carries 31 float:left and 15 text-align:left, and
   rtl-style.css patches a fraction of them. Most of it does no damage because the layout
   is flex and grid, which follow `direction`. These three are the ones that show.

   1. .page-link is floated left, and float ignores `direction`. Every paginator on the
      site therefore lays out left to right inside an RTL page: page 1 lands on the far
      left and "previous" sits where "next" belongs. Unfloated, the row follows the page,
      and the angle glyphs the paginator emits are bidi-mirrored characters that turn
      round on their own once the direction resolves.
   2 & 3. Two blocks of Hebrew left-aligned against a right-aligned page. */
.pagination .page-item,
.pagination .page-link { float: none; }
/* ⚠ ul.pagination, NOT .pagination — and that single character was a production bug.
   style.css sets .pagination{display:table} and custom.css is linked FIRST, so a rule
   at the same specificity loses the tie (ISSUES M98). Unfloating the links without
   winning the display left the items as blocks inside a table container and the pager
   stacked into a vertical column — on every paginated page on the site. ul.pagination
   is 0,1,1 and takes it without an !important. */
ul.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

/* .ndl-made is NOT on this list after all: the footer's bottom row is a deliberate
   two-sided layout — copyright at the start, "בנוי ב ♥" at the far end — and in an RTL
   page the far end IS left. The scan flagged text-align:left without asking whether left
   was the end; it was. Left alone.

   The cookie banner is the real one: two lines of Hebrew body text ragged on the wrong
   side. !important rather than a longer selector because custom.css is linked first and
   loses every specificity tie to the stylesheets that follow it — see the load-order note
   in ISSUES. */
.cookie-consent .cookie-consent__message { text-align: right !important; }