/*
  RealyBee — supplementary rules on top of the approved design (style.css / listings.css).
  Nothing here overrides visual intent; it only fills gaps the design source
  left unresolved: a working mobile nav drawer, a solid-header variant for
  pages without a hero, listings-page SVG icon sizing, and the map view.
  style.css / listings.css themselves are untouched.
*/

/* ---------- solid header (used on any page without a hero behind it) ---------- */
body:not(.has-hero) .site-header{
  position:sticky;top:0;
  background:#fff;
  color:var(--ink);
  background-image:none;
  border-bottom:1px solid var(--line);
}
body:not(.has-hero) .site-header .brand{color:var(--ink)}
body:not(.has-hero) .site-header .desktop-nav a{color:var(--ink)}
body:not(.has-hero) .site-header .icon-button{color:var(--ink)}
body:not(.has-hero) .site-header .lang-button{
  color:var(--ink);border-color:var(--line);background:#fff;backdrop-filter:none;
}
body:not(.has-hero) .site-header .list-button{
  background:var(--orange);border-color:var(--orange);color:#fff;
}
body.has-hero{padding-top:0}
body:not(.has-hero) main{padding-top:0}

/* ---------- nav active state ---------- */
.desktop-nav a.active{color:var(--orange)}

/* ---------- mobile nav drawer ---------- */
.nav-scrim{
  position:fixed;inset:0;background:rgba(7,17,33,.5);
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:90;
}
.nav-scrim.open{opacity:1;pointer-events:auto}
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);
  background:#fff;color:var(--ink);z-index:91;
  transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(16,24,39,.18);
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer__head{
  height:68px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;border-bottom:1px solid var(--line);
}
.mobile-drawer__head .brand{font-size:20px}
.mobile-drawer__close{width:38px;height:38px;border:0;background:var(--soft,#f7f8fb);border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.mobile-drawer__nav{padding:10px 8px;overflow-y:auto;flex:1}
.mobile-drawer__nav a{
  display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:12px;
  font-size:16px;font-weight:650;color:var(--ink);
}
.mobile-drawer__nav a.active{color:var(--orange);background:#fff3ec}
.mobile-drawer__nav a svg{width:20px;height:20px;flex:0 0 20px;color:var(--orange)}
.mobile-drawer__foot{padding:16px 18px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.mobile-drawer__foot .list-button,
.mobile-drawer__foot .lang-button{width:100%;justify-content:center;border-radius:10px;color:var(--ink)}
.mobile-drawer__foot .list-button{background:var(--orange);border-color:var(--orange);color:#fff}
body.nav-open{overflow:hidden}
@media(min-width:1280px){
  .mobile-drawer,.nav-scrim{display:none}
}

/* ---------- tablet (681-1279px): the text nav + actions don't reliably fit
   this range — verified via real-font line-count checks in Chromium: "For
   Sale"/"For Rent"/"New Developments"/"List your property" wrap to 2 lines
   at 1000-1024px AND again at 1200px (clean only in a narrow 1100px pocket),
   because flex-shrink silently squeezes items below their content width
   without ever registering as container overflow. Rather than fine-tune a
   nav that doesn't have the width budget across this whole range, fall back
   to the same hamburger + drawer already used on mobile all the way up to
   1280px, where the text nav is reliably clean. ---------- */
@media(max-width:1279px){
  .desktop-nav,.lang-button,.list-button{display:none}
  .header-actions{margin-left:auto;gap:6px}
  .mobile-only{display:block}
}

/* ---------- listings page: SVG icon sizing to match the glyph-sized design mockup ---------- */
.rb-header .svg-icon{width:20px;height:20px;flex:0 0 20px}
.rb-brand__mark{width:26px;height:26px;color:var(--orange)}
.rb-nav a{display:inline-flex;align-items:center}
.rb-header__actions a{display:inline-flex;align-items:center;gap:6px}
.rb-header__actions .svg-icon{width:18px;height:18px;flex:0 0 18px}
.rb-view-actions svg,.rb-segment svg{width:16px;height:16px}
.rb-gallery-main .svg-icon,
.rb-property-info .svg-icon,
.rb-map-card .svg-icon,
.rb-map-toolbar .svg-icon,
.rb-agency-row .svg-icon,
.rb-map-agency .svg-icon,
.rb-pagination .svg-icon,
.rb-filterbar .svg-icon,
.rb-chip-row .svg-icon{
  width:18px;height:18px;flex:0 0 18px;display:inline-flex;
}
.rb-specs .svg-icon{width:20px;height:20px;flex:0 0 20px}
.heart.is-active svg{fill:var(--orange);stroke:var(--orange)}
.jl-heart.is-active svg,
.agent-card .agent-heart.is-active svg,
.development-heart.is-active svg{fill:var(--orange);stroke:var(--orange)}
.rb-property-card .heart,.rb-property-card .prev,.rb-property-card .next{display:grid;place-items:center}
.rb-map-price button,.rb-agency-row button,.rb-pagination button{display:grid;place-items:center}
.rb-actions2 button,.rb-map-toolbar button{display:inline-flex;align-items:center;gap:8px}
.rb-map-agency button{display:inline-flex;align-items:center;gap:6px}
.more-photos{cursor:default}

/* filter bar as a real popover-friendly control */
.rb-filterbar button{cursor:pointer}
.rb-chip-row button{cursor:pointer}
.rb-chip-row span{display:inline-flex;align-items:center;gap:6px}
.rb-chip-row span button.chip-remove{border:0;background:transparent;padding:0;margin-left:2px;color:#9aa5b5;font-size:.85rem;line-height:1}

/* filter bar built from real form controls */
.rb-filterbar label{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  min-width:0;height:68px;border-right:1px solid #edf0f4;padding:11px 17px;cursor:pointer;
}
.rb-filterbar label:last-of-type{border-right:0}
.rb-filterbar label small{display:block;color:#8a95a6;font-size:.75rem}
.rb-filterbar select,.rb-filterbar input{
  border:0;background:transparent;padding:0;appearance:none;-webkit-appearance:none;
  font:inherit;font-size:.9rem;font-weight:500;color:var(--ink);width:100%;
}
.rb-filterbar select{
  padding-right:20px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:15px;
}
.rb-filterbar label:hover{background:#fafbfc}
.rb-filterbar select:focus,.rb-filterbar input:focus{outline:0}
.rb-filterbar label:focus-within{background:#fff9f6;box-shadow:inset 0 -2px 0 var(--orange)}
.rb-filterbar .more-toggle{
  border:0;background:#fff;text-align:center;font-size:.85rem;font-weight:650;
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
}
.rb-more-panel{
  display:none;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;
  padding:18px 20px;margin-top:-1px;
}
.rb-more-panel.open{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rb-more-panel .field{display:flex;flex-direction:column;gap:6px}
.rb-more-panel .field small{color:#8a95a6;font-size:.75rem}
.rb-more-panel select,.rb-more-panel input{height:42px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit}
.rb-more-panel .amenities{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.rb-more-panel .amenities label{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;font-size:.8rem;cursor:pointer;height:auto;
}
.rb-more-panel .actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px}
.rb-more-panel .actions button{height:40px;padding:0 18px;border-radius:8px;font-weight:650;font-size:.85rem}
.rb-more-panel .actions .apply{background:var(--orange);border:0;color:#fff}
.rb-more-panel .actions .reset{background:#fff;border:1px solid var(--line)}
.rb-sort-select{border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 13px;font-size:.78rem;font-weight:600;color:var(--ink)}
@media(max-width:900px){.rb-more-panel.open{grid-template-columns:1fr 1fr}}

/* empty state */
.rb-empty{padding:70px 20px;text-align:center;color:#6b7688}
.rb-empty svg{width:52px;height:52px;color:#c7cedb;margin:0 auto 14px}
.rb-empty h3{margin:0 0 6px;font-size:1.2rem;color:var(--ink)}

/* Agencies directory (front/agencies/index.blade.php) — a real wrapping grid,
   deliberately its own class rather than .agencies-small-slider: that name
   carries the home page's carousel rule below (flex !important, no wrap). */
.agencies-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.agencies-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.agencies-grid{grid-template-columns:1fr}}

/* ---------- turn the fixed CSS-grid sliders into real, always-scrollable carousels ---------- */
.just-listed-slider,
.new-agents-slider,
.agencies-small-slider{
  display:flex !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.just-listed-slider::-webkit-scrollbar,
.new-agents-slider::-webkit-scrollbar,
.agencies-small-slider::-webkit-scrollbar{display:none}
.just-listed-slider .jl-card{flex:0 0 calc(25% - 14px);scroll-snap-align:start}
.new-agents-slider .agent-card{flex:0 0 calc(25% - 14px);scroll-snap-align:start}
.agencies-small-slider .agency-card{flex:0 0 calc(50% - 8px);scroll-snap-align:start}
@media(max-width:900px){
  .just-listed-slider .jl-card,
  .new-agents-slider .agent-card{flex:0 0 78%}
  .agencies-small-slider .agency-card{flex:0 0 84%}
}
.rb-pagination a{width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}
.rb-pagination button[disabled]{opacity:.4;cursor:default}
.jl-dots,.agent-dots,.agency-dots{cursor:default}
.jl-dots span,.agent-dots span,.agency-dots span{cursor:pointer}
.jl-nav[disabled],.agent-nav[disabled],.agency-nav[disabled],.developments-dots button[disabled]{opacity:.35;cursor:default;pointer-events:none}

/* Map View (price pins, clusters, draw toolbar, results panel) now lives entirely
   in its own stylesheet — public/assets/css/realybee/map-app.css — loaded only on
   properties/map.blade.php. The old in-page Leaflet map on the List View was
   removed, so its marker/cluster/draw rules that used to live here are gone too. */