/* ===========================================================
   Agrawal Properties — theme layer on top of Bootstrap 5
   Fonts: Bricolage Grotesque (display) + Hanken Grotesk (body)
   =========================================================== */
:root{
  --green:#234B3F; --green-dark:#1B3A30; --green-soft:#EEF3F0; --green-tint:#EBF0ED;
  --amber:#C0863A; --amber-dark:#A8722C; --amber-soft:#FBF1E4;
  --ink:#1B1A17; --muted:#6E675B; --faint:#9A9284;
  --bg:#F6F4EF; --surface:#FFFFFF; --sand:#F8F6F1; --line:#ECE7DE; --line-2:#E0DACE;
  --footer:#16261F;
}
html,body{ overflow-x:hidden; max-width:100%; }
*{ text-underline-offset:3px; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{ font-family:'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.02em; }
a{ color:var(--green); text-decoration:none; }
a:hover{ color:var(--amber); }
::selection{ background:var(--green); color:var(--bg); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }
.container{ max-width:1240px; padding-left:clamp(16px,4vw,28px); padding-right:clamp(16px,4vw,28px); }

/* utilities */
.text-green{ color:var(--green)!important; }
.text-amber{ color:var(--amber)!important; }
.text-muted-2{ color:var(--muted)!important; }
.bg-sand{ background:var(--sand); }
.eyebrow{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); }
.rounded-20{ border-radius:20px; }
.rounded-24{ border-radius:24px; }

/* buttons */
.btn{ font-weight:600; border-radius:999px; padding:.7rem 1.4rem; }
.btn-lg{ padding:.9rem 1.6rem; font-size:1rem; }
.btn-brand{ background:var(--green); color:#fff; border:1px solid var(--green); }
.btn-brand:hover,.btn-brand:focus{ background:var(--green-dark); color:#fff; border-color:var(--green-dark); }
.btn-amber{ background:var(--amber); color:#fff; border:1px solid var(--amber); }
.btn-amber:hover,.btn-amber:focus{ background:var(--amber-dark); color:#fff; border-color:var(--amber-dark); }
.btn-ghost{ background:#fff; color:var(--green); border:1px solid var(--line-2); }
.btn-ghost:hover{ background:var(--green-soft); color:var(--green); }
.btn-soft{ background:var(--green-soft); color:var(--green); border:none; border-radius:12px; }
.btn-soft:hover{ background:var(--green); color:#fff; }

/* header */
.site-nav{ position:sticky; top:0; z-index:1030; background:rgba(246,244,239,.85); backdrop-filter:blur(14px); border-bottom:1px solid #E7E2D8; }
.brand-mark{ width:38px; height:38px; border-radius:12px; background:var(--green); display:grid; place-items:center; }
.brand-mark i{ color:var(--amber); font-size:15px; transform:rotate(45deg); }
.brand-name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:19px; line-height:1; }
.brand-sub{ font-size:11px; color:var(--faint); }
.site-nav .nav-link{ color:#3A362E; font-weight:500; font-size:15px; }
.site-nav .nav-link:hover,.site-nav .nav-link.active{ color:var(--green); }
/* off-canvas mobile menu */
.ap-offcanvas{ background:var(--bg); width:min(84vw,340px); z-index:1045; }
.offcanvas-backdrop{ z-index:1044; }
.ap-offcanvas .offcanvas-header{ border-bottom:1px solid #E7E2D8; padding:18px 22px; }
.ap-offcanvas .offcanvas-body{ padding:14px 22px 24px; }
.ap-oc-link{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:22px; color:var(--ink);
  padding:14px 0; border-bottom:1px solid #E7E2D8; letter-spacing:-.01em; }
.ap-oc-link:hover,.ap-oc-link.active{ color:var(--green); }

/* hero */
.hero{ position:relative; overflow:hidden; }
.hero .blob{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.hero .blob-1{ top:-160px; right:-120px; width:520px; height:520px; background:radial-gradient(circle,rgba(35,75,63,.13),transparent 70%); }
.hero .blob-2{ bottom:-140px; left:-100px; width:420px; height:420px; background:radial-gradient(circle,rgba(192,134,58,.13),transparent 70%); }
.hero h1{ font-weight:800; font-size:clamp(38px,6.4vw,68px); line-height:1.02; }
.tab-pill{ font-size:14px; font-weight:600; padding:.55rem 1.25rem; border-radius:999px; background:#fff; border:1px solid var(--line-2); color:#3A362E; cursor:pointer; }
.tab-pill:hover{ background:var(--green-soft); }
.tab-pill.active{ background:var(--green); border-color:var(--green); color:#fff; }
/* Purpose toggle (Buy/Rent) no longer auto-submits on click — this keeps the
   pill's selected look in sync with the radio the instant it's clicked,
   without a page navigation. Falls back gracefully (no visual flip until the
   next page load) in browsers without :has() support. */
.tab-pill:has(input:checked){ background:var(--green); border-color:var(--green); color:#fff; }
.search-card{ background:#fff; border:1px solid #DBE4DF; border-radius:26px; padding:14px;
  box-shadow:0 0 0 7px rgba(35,75,63,.05), 0 44px 84px -44px rgba(27,26,23,.55); }
.search-field{ display:flex; flex-direction:column; gap:5px; padding:12px 16px; border-radius:14px; }
.search-field:hover{ background:var(--sand); }
.search-field + .search-field{ border-left:1px solid #EFEAE0; }
.search-field label{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
.search-field select,.search-field input{ border:none; background:transparent; font-size:15px; font-weight:500; color:var(--ink); padding:2px 0; }
.search-field select:focus,.search-field input:focus{ outline:none; }
.trend-chip{ font-size:13px; font-weight:500; color:#3A362E; background:#fff; border:1px solid #E7E2D8; padding:.35rem .8rem; border-radius:999px; }
.trend-chip:hover{ border-color:var(--green); color:var(--green); }
.stat .num{ font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:800; }
.stat .lbl{ font-size:13px; color:var(--faint); }

/* property card */
.prop-card{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; height:100%;
  display:flex; flex-direction:column; box-shadow:0 4px 22px -14px rgba(27,26,23,.22);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.prop-card:hover{ transform:translateY(-4px); box-shadow:0 26px 48px -24px rgba(27,26,23,.4); }
.prop-media{ position:relative; aspect-ratio:3/2; background:linear-gradient(135deg,#EDE8DF 0%,#E4DDD0 60%,#DED6C6 100%);
  display:grid; place-items:center; }
.prop-media .ph{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:#A79E8E; }
.prop-media .tl{ position:absolute; top:13px; left:13px; display:flex; flex-wrap:wrap; gap:7px; }
.badge-sale{ background:var(--green); color:#fff; }
.badge-rent{ background:var(--amber); color:#fff; }
.badge-pill{ font-size:11px; font-weight:700; padding:.4rem .75rem; border-radius:999px; }
.badge-verify{ background:rgba(255,255,255,.94); color:var(--green); }
.badge-new{ background:var(--ink); color:#fff; }
.badge-spec{ position:absolute; top:13px; right:13px; background:rgba(255,255,255,.9); color:#4A453B; font-size:11px; font-weight:600; padding:.35rem .7rem; border-radius:999px; }
.img-count{ position:absolute; bottom:13px; left:13px; background:rgba(27,26,23,.72); color:#fff; font-size:11px; font-weight:600; padding:.3rem .7rem; border-radius:999px; }
.save-btn{ position:absolute; top:13px; right:13px; width:36px; height:36px; border-radius:999px; border:none;
  background:rgba(255,255,255,.92); color:var(--faint); display:grid; place-items:center; font-size:16px; cursor:pointer;
  box-shadow:0 4px 12px -6px rgba(27,26,23,.4); transition:transform .2s ease; }
.save-btn:hover{ transform:scale(1.1); }
.save-btn.active{ color:var(--amber); }
/* when save present, move spec badge to make room (spec hidden on card, kept for detail) */
.prop-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.prop-type{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--amber); }
.prop-title{ font-weight:700; font-size:19.5px; line-height:1.18; color:var(--ink); margin:0; }
.prop-price{ font-family:'Bricolage Grotesque',sans-serif; font-size:23px; font-weight:800; }
.spec-strip{ font-size:13px; color:#5F5849; background:var(--sand); border-radius:10px; padding:.55rem .8rem; }
.chip{ font-size:12px; font-weight:500; color:#5F5849; background:#F4F1EA; padding:.3rem .7rem; border-radius:999px; }

/* listings */
.filter-panel{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; }
.filter-group{ padding:16px 0; border-top:1px solid #F0ECE3; }
.filter-group:first-of-type{ border-top:none; padding-top:6px; }
.filter-label{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-bottom:11px; }
.filter-panel .form-check-input:checked{ background-color:var(--green); border-color:var(--green); }
.filter-panel .form-check-label{ font-size:14px; color:#3A362E; }
.bhk-pill{ font-size:13.5px; font-weight:600; padding:.4rem .9rem; border-radius:999px; border:1px solid var(--line-2); background:#fff; color:#3A362E; cursor:pointer; }
.bhk-pill.active{ background:var(--green); border-color:var(--green); color:#fff; }
input[type=range]{ accent-color:var(--green); width:100%; }

/* Dual-handle range (Budget filter) — two native range inputs stacked on
   one shared track, each input's own track hidden (appearance:none +
   transparent) so the .dual-range-track/.dual-range-fill divs beneath them
   are the only visible track; each input still draws its own native-style
   thumb (restyled to match the brand green used everywhere else via
   accent-color) and only the thumb is clickable (pointer-events:none on the
   input itself, re-enabled on ::-webkit-slider-thumb/::-moz-range-thumb) so
   the two overlapping inputs don't fight over clicks along the track. */
.dual-range{ position:relative; height:28px; display:flex; align-items:center; }
.dual-range-track{ position:absolute; left:0; right:0; height:4px; border-radius:999px; background:var(--line-2); pointer-events:none; }
.dual-range-fill{ position:absolute; height:4px; border-radius:999px; background:var(--green); pointer-events:none; }
.dual-range input[type=range]{
  position:absolute; left:0; width:100%; margin:0; background:transparent; pointer-events:none;
  -webkit-appearance:none; appearance:none;
}
.dual-range input[type=range]::-webkit-slider-runnable-track{ background:transparent; -webkit-appearance:none; }
.dual-range input[type=range]::-moz-range-track{ background:transparent; }
.dual-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; cursor:pointer;
  width:18px; height:18px; border-radius:50%; margin-top:-7px;
  background:var(--green); border:2px solid #fff; box-shadow:0 1px 4px rgba(27,26,23,.3);
}
.dual-range input[type=range]::-moz-range-thumb{
  pointer-events:auto; cursor:pointer; width:18px; height:18px; border-radius:50%; border:2px solid #fff;
  background:var(--green); box-shadow:0 1px 4px rgba(27,26,23,.3);
}
.chip-filter{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line-2); font-size:13.5px; font-weight:500; padding:.45rem .5rem .45rem .9rem; border-radius:999px; }
.chip-filter button, .chip-filter a{ width:20px; height:20px; border:none; border-radius:999px; background:#F4F1EA; color:var(--faint); font-size:11px; display:grid; place-items:center; cursor:pointer; text-decoration:none; }
.chip-filter button:hover, .chip-filter a:hover{ background:var(--green); color:#fff; }
.page-btn{ min-width:44px; height:44px; display:inline-grid; place-items:center; border-radius:12px; border:1px solid var(--line-2); background:#fff; color:#4A453B; font-weight:600; cursor:pointer; padding:0 14px; }
.page-btn.active{ background:var(--green); border-color:var(--green); color:#fff; }
.page-btn:disabled{ color:#BBB4A6; cursor:not-allowed; }

/* detail */
.gallery-main{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/3;
  background:linear-gradient(135deg,#EDE8DF 0%,#E4DDD0 60%,#DED6C6 100%); display:grid; place-items:center; }
.gallery-thumb{ aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#EDE8DF,#E1D9CA); display:grid; place-items:end center; }
.gallery-thumb span{ font-size:9px; font-weight:600; color:#A79E8E; padding-bottom:7px; }
.gallery-thumb{ cursor:pointer; border:1.5px solid transparent; transition:border-color .2s ease, transform .2s ease; }
.gallery-thumb:hover{ transform:translateY(-2px); }
.gallery-thumb.active{ border-color:var(--green); }
.gallery-main{ cursor:zoom-in; }
.gallery-zoom{ position:absolute; bottom:14px; right:14px; z-index:1; background:rgba(27,26,23,.72); color:#fff;
  font-size:12px; font-weight:600; padding:.4rem .8rem; border-radius:999px; pointer-events:none; }

/* thumbnail row — a horizontal-scroll strip (not a wrapping grid), so a
   property with many photos scrolls sideways instead of growing the page
   downward; the scroll-arrow buttons (only rendered past 4 thumbnails —
   see show.blade.php) sit on top of its left/right edges. */
.gallery-thumbs-row{ display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; }
.gallery-thumbs-row::-webkit-scrollbar{ display:none; }
.gallery-thumbs-row .gallery-thumb{ flex:0 0 23%; }
.gallery-thumb-scroll-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:#fff;
  box-shadow:0 2px 8px rgba(27,26,23,.15); display:grid; place-items:center; padding:0; }
.gallery-thumb-scroll-prev{ left:-4px; }
.gallery-thumb-scroll-next{ right:-4px; }

/* enlarge lightbox — a plain Bootstrap modal with its default dialog/content
   chrome stripped out entirely, so the ONLY visible thing is the enlarged
   photo itself (with its own shadow for definition against the backdrop)
   and a close button that's fixed to the viewport (not the image's own
   bounding box, which varies by photo aspect ratio — pinning it to the
   image would put it in a different spot for every portrait vs. landscape
   photo). */
.gallery-lightbox-dialog{ max-width:95vw; width:auto; margin:1.5rem auto; display:flex; justify-content:center; }
.gallery-lightbox-content{ background:transparent; border:none; width:auto; max-width:100%; }
.gallery-lightbox-img{ display:block; max-width:95vw; max-height:90vh; width:auto; height:auto;
  object-fit:contain; border-radius:12px; margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.55); }
.gallery-lightbox-close{ position:fixed; top:20px; right:24px; z-index:1056;
  width:44px; height:44px; border-radius:50%; border:none; background:rgba(20,20,20,.7); color:#fff;
  font-size:28px; line-height:1; display:grid; place-items:center; cursor:pointer; }
.gallery-lightbox-close:hover{ background:rgba(20,20,20,.9); }
/* Only the lightbox's own backdrop (tagged via JS on open — see
   show.blade.php) gets darkened; Change Location/Contact keep Bootstrap's
   default so this stays scoped to the lightbox alone. */
.modal-backdrop.gallery-lightbox-backdrop.show{ opacity:.9; }

/* mobile sticky contact bar (detail page) */
.mobile-cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:1040; display:none;
  gap:10px; padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line); }
.mobile-cta-bar .btn{ flex:1; }
@media (max-width:991px){ .mobile-cta-bar.show{ display:flex; } body.has-cta-bar{ padding-bottom:82px; } }

/* skeleton loading */
.skel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.skel-card{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; height:420px; }
.skel-line,.skel-img{ background:linear-gradient(100deg,#EEE9E0 30%,#F6F2EB 50%,#EEE9E0 70%);
  background-size:200% 100%; animation:skelShimmer 1.3s ease-in-out infinite; }
.skel-img{ height:200px; }
.skel-body{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.skel-line{ height:14px; border-radius:6px; }
.skel-line.w-40{ width:40%; } .skel-line.w-70{ width:70%; } .skel-line.w-90{ width:90%; } .skel-line.lg{ height:24px; width:55%; }
@keyframes skelShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){ .skel-line,.skel-img{ animation:none; } }
.summary-card{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:clamp(22px,3vw,30px);
  box-shadow:0 20px 50px -34px rgba(27,26,23,.4); position:sticky; top:96px; }
.spec-box{ background:var(--sand); border-radius:14px; padding:13px 15px; }
.spec-box .k{ font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--faint); }
.spec-box .v{ font-size:15px; font-weight:500; margin-top:5px; }
.amenity{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:#3A362E; }
.amenity .tick{ width:22px; height:22px; border-radius:999px; background:var(--green-soft); color:var(--green); display:grid; place-items:center; font-size:11px; flex:none; }
.delisted-veil{ position:absolute; inset:0; background:rgba(27,26,23,.5); display:grid; place-items:center; z-index:2; }

/* budget/type tiles */
.tile{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; display:block; height:100%;
  transition:transform .25s ease, box-shadow .25s ease; }
.tile:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -26px rgba(27,26,23,.4); }
.tile .big{ font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:800; color:var(--green); }

/* locality band + trust */
.band-green{ background:var(--green); color:var(--bg); border-radius:28px; position:relative; overflow:hidden; }
.band-green .glow{ position:absolute; top:-80px; right:-60px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(192,134,58,.28),transparent 70%); }
.loc-chip{ font-size:14.5px; font-weight:500; color:var(--bg); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); padding:.6rem 1.1rem; border-radius:999px; }
.loc-chip:hover{ background:var(--amber); border-color:var(--amber); color:#fff; }
.value-ico{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:20px; }
.quote-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; height:100%; }

/* footer */
.site-footer{ background:var(--footer); color:#B9C4BF; position:relative; overflow:hidden; }
.site-footer .glow{ position:absolute; top:-120px; right:-80px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(192,134,58,.16),transparent 70%); }
.site-footer h6{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); }
.site-footer a{ color:#B9C4BF; }
.site-footer a:hover{ color:#fff; }
.footer-cta{ border-bottom:1px solid #26382F; }
.trust-chip{ font-size:12px; font-weight:600; color:#C7D0CB; background:#22342C; border:1px solid #2F4239; padding:.35rem .75rem; border-radius:999px; }
.soc{ width:38px; height:38px; border-radius:11px; background:#22342C; border:1px solid #2F4239; display:grid; place-items:center; color:#C7D0CB; }
.soc:hover{ background:var(--amber); border-color:var(--amber); color:#16261F; }
.footer-bottom{ border-top:1px solid #26382F; font-size:12.5px; color:#7B8C84; }
.footer-bottom a{ color:#7B8C84; }

/* modal */
.modal-content{ border:none; border-radius:24px; overflow:hidden; }
.recaptcha-ph{ border:1px solid var(--line-2); background:#fff; border-radius:12px; padding:15px 16px; display:flex; align-items:center; gap:12px; }
.recaptcha-ph .box{ width:26px; height:26px; border:2px solid #C9C2B3; border-radius:5px; flex:none; }
.form-control{ border:1px solid var(--line-2); border-radius:12px; padding:.7rem .9rem; }
.form-control:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(35,75,63,.12); }
.field-label{ font-size:12px; font-weight:600; color:var(--muted); }

/* entrance animation */
@keyframes riseIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.anim-rise{ animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; scroll-behavior:auto!important; } }

/* responsive */
@media (max-width:991px){
  .filter-panel,.summary-card{ position:static; }
  .search-field + .search-field{ border-left:none; }
  /* tighten oversized desktop gutters on tablet/mobile */
  .site-footer .row.g-5{ --bs-gutter-y:2rem; --bs-gutter-x:1.5rem; }
  .footer-cta .container{ padding-top:2.5rem!important; padding-bottom:2.5rem!important; }
}
@media (max-width:575px){
  .hero h1{ font-size:clamp(32px,9vw,44px); }
  .container>.py-5{ padding-top:2.5rem!important; padding-bottom:2.5rem!important; }
  .site-footer .py-5{ padding-top:2.25rem!important; padding-bottom:2.25rem!important; }
  .search-card{ padding:10px; }
  .search-field{ padding:12px 14px; }
  .tab-pill{ font-size:13px; padding:.5rem 1rem; }
}

/* Google Places Autocomplete dropdown (.pac-container is appended straight
   to <body> by the Maps JS API, not inside our own markup, so it has to be
   restyled globally here rather than scoped to a component class) — matches
   the site's card/typography language instead of Google's default look. */
.pac-container{
  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  border:1px solid var(--line-2); border-radius:14px; margin-top:6px;
  box-shadow:0 16px 40px -12px rgba(27,26,23,.25); padding:6px; z-index:2000;
}
.pac-container:after{ display:none; } /* hide Google's own logo/attribution strip */
.pac-item{
  border-top:1px solid var(--line); border-radius:10px; padding:9px 10px;
  font-size:14px; color:var(--ink); cursor:pointer;
}
.pac-item:first-child{ border-top:none; }
.pac-item:hover,.pac-item.pac-item-selected{ background:var(--green-soft); }
.pac-icon{ display:none; } /* Google's default pin/clock icon doesn't match the brand marks used elsewhere */
.pac-item-query{ font-size:14px; font-weight:600; color:var(--ink); padding-right:4px; }
.pac-matched{ color:var(--green); font-weight:700; }
}