:root { --rsdlc-top-offset: 80px; }

.rsdlc-grid {
  display: grid;
  grid-template-columns: minmax(320px,420px) 1fr;
  gap: 1rem;
  align-items: start;
  min-height: 100vh;
}

.rsdlc-right { position: sticky; top: var(--rsdlc-top-offset); }
.rsdlc-right .rsdlc-map-wrap { height: calc(100vh - var(--rsdlc-top-offset)); }
.rsdlc-right .rsdlc-map-wrap > div { height: 100%; }

.rsdlc-form { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.rsdlc-form input[type="text"] { padding:.6rem .8rem; min-width:12rem; }

.rsdlc-msg { margin:.5rem 0; color:#b00; }
.rsdlc-summary { margin:.25rem 0 1rem; }

.rsdlc-results { list-style:none; padding-left:0; margin:0; display:grid; gap:.75rem;}
.rsdlc-item { border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; background:#fff; }
.rsdlc-item-top { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.rsdlc-item-title { font-weight:700; line-height:1.25; }
.rsdlc-item-dist { opacity:.75; margin-top:2px; }
.rsdlc-item-addr { opacity:.85; margin-top:6px; }
.rsdlc-item-phone { margin-top:6px; }
.rsdlc-item-actions { display:flex; align-items:flex-start; gap:8px; }

.rsdlc-empty-hint { opacity:.8; }

@media (max-width: 640px) {
  .rsdlc-grid { grid-template-columns: 1fr; min-height: auto; }
  .rsdlc-right { position: static; }
  .rsdlc-right .rsdlc-map-wrap { height: 320px; }
  .rsdlc-right .rsdlc-map-wrap > div { height: 100%; }
}
/* === Two-column FLEX layout === */
.rsdlc-locator.rsdlc-grid{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}
.rsdlc-left{         /* fixed-ish sidebar for the form/results */
  flex:0 0 420px;
  max-width:420px;
}
.rsdlc-right{        /* map column */
  flex:1 1 auto;
  min-width:0;
  position:sticky;
  top:80px;
}

/* === Search bar: one line === */
.rsdlc-locator .rsdlc-form{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:nowrap;          /* force single line */
  white-space:nowrap;
}
.rsdlc-locator .rsdlc-form input[type="text"]{
  flex:1 1 auto;
  min-width:0;               /* prevents overflow */
}
.rsdlc-locator .button{
  padding:.45rem .65rem;
  font-size:.9rem;
  line-height:1.15;
  border-radius:6px;
  white-space:nowrap;
}
/* Hover/focus color */
.rsdlc-locator .button:hover,
.rsdlc-locator .button:focus{
  background:#a20808 !important;
  border-color:#a20808 !important;
  color:#fff !important;
}

/* Responsive: stack on small screens */
@media (max-width: 900px){
  .rsdlc-locator.rsdlc-grid{ flex-direction:column; }
  .rsdlc-left{ flex:0 1 auto; max-width:none; }
  .rsdlc-right{ position:static; }
  .rsdlc-locator .rsdlc-form{ flex-wrap:wrap; white-space:normal; }
}

/* === Search layout: input full row, buttons same row below === */
.rsdlc-locator .rsdlc-form{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap !important;   /* override any previous nowrap */
}

.rsdlc-locator .rsdlc-form input[type="text"]{
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;                 /* prevent overflow in flex */
}

/* Buttons sit next to each other */
.rsdlc-locator .rsdlc-form .button{
  flex: 0 0 auto;
  padding:.75rem 1rem;
  font-size:.9rem;
  line-height:1.15;
  border-radius:6px;
  white-space:nowrap;
      width: 49%;
}

/* Hover/focus color */
.rsdlc-locator .rsdlc-form .button:hover,
.rsdlc-locator .rsdlc-form .button:focus{
  background:#a20808 !important;
  border-color:#a20808 !important;
  color:#fff !important;
}

/* Ensure the map has height at all breakpoints */
.rsdlc-map-wrap > div{
  height: 100vh;
  min-height: 320px;
}

/* Tablet */
@media (max-width: 900px){
  .rsdlc-right{ width:100%; min-width:0; position:static; }
  .rsdlc-map-wrap > div{ height: 50vh !important; } /* override any inline */
}

/* Mobile */
@media (max-width: 600px){
  .rsdlc-map-wrap > div{ height: 45vh !important; }
}


/* ---------- Card list container (scroll on desktop) ---------- */
.rsdlc-locator .rsdlc-results{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:calc(100vh - 230px);   /* leaves room for search + summary */
  overflow:auto;
  padding-right:4px;                /* space for custom scrollbar */
}

/* nicer scrollbar (webkit) */
.rsdlc-locator .rsdlc-results::-webkit-scrollbar{ width:10px; }
.rsdlc-locator .rsdlc-results::-webkit-scrollbar-thumb{
  background:#dde2ea; border-radius:8px;
}
.rsdlc-locator .rsdlc-results:hover::-webkit-scrollbar-thumb{
  background:#c9d0db;
}

/* On tablet/mobile let the list grow naturally (no scroll frame) */
@media (max-width: 900px){
  .rsdlc-locator .rsdlc-results{ max-height:none; overflow:visible; }
}

/* ---------- Card ---------- */
.rsdlc-locator .rsdlc-item{
  background:#fff;
  border:1px solid #e6eaf0;
  border-radius:16px;
  box-shadow:0 2px 10px rgba(16,24,40,.06);
  padding:18px;
  transition:box-shadow .2s ease, transform .12s ease;
}
.rsdlc-locator .rsdlc-item:hover{
  box-shadow:0 8px 24px rgba(16,24,40,.12);
  transform:translateY(-1px);
}

.rsdlc-locator .rsdlc-item-top{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  justify-content:space-between;
}

.rsdlc-locator .rsdlc-item-main{ min-width:0; }
.rsdlc-locator .rsdlc-item-title a{
  font-weight:800;
  font-size:1.15rem;
  color:#1f2937;
  text-decoration:none;
}
.rsdlc-locator .rsdlc-item-title a:hover{ color:#a20808; }

.rsdlc-locator .rsdlc-item-dist{
  margin-top:.3rem;
  font-size:.9rem;
  color:#667085;
}

/* Address + phone rows with tiny icons */
.rsdlc-locator .rsdlc-item-addr,
.rsdlc-locator .rsdlc-item-phone{
  margin-top:.6rem;
  font-size:1rem;
  color:#344054;
  display:flex;
  align-items:flex-start;
  gap:.5rem;
}
.rsdlc-locator .rsdlc-item-addr::before{
  content:'';
  width:20px;height:20px;margin-top:2px;flex:0 0 20px;
  background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21s7-7.17 7-11a7 7 0 10-14 0c0 3.83 7 11 7 11z' stroke='%23a20808' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='3' stroke='%23a20808' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.rsdlc-locator .rsdlc-item-phone::before{
  content:'';
  width:20px;height:20px;margin-top:2px;flex:0 0 20px;
  background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 16.92V20a2 2 0 01-2.18 2A19.8 19.8 0 012 4.18 2 2 0 014 2h3.09a2 2 0 012 1.72c.12.9.33 1.77.63 2.6a2 2 0 01-.45 2.11L8 9a16 16 0 007 7l.57-.27a2 2 0 012.11-.45c.83.3 1.7.51 2.6.63A2 2 0 0122 16.92z' stroke='%23a20808' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Action buttons ---------- */
.rsdlc-locator .rsdlc-item-actions{
  display:flex;
  gap:.75rem;
  align-items:center;
}
@media (max-width:520px){
  .rsdlc-locator .rsdlc-item-actions{ flex-direction:column; align-items:stretch; }
}

/* Base button look for cards (bigger than form buttons) */
.rsdlc-locator .rsdlc-item-actions .button{
  border-radius:10px;
  padding:.75rem 1rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  border:1px solid transparent;
  box-shadow:0 2px 6px rgba(16,24,40,.06);
}

/* Primary = first button (red)  |  Secondary = second button (blue) */
.rsdlc-locator .rsdlc-item-actions .button:first-child{
  background:#c51717; color:#fff;
}
.rsdlc-locator .rsdlc-item-actions .button:first-child:hover{
  background:#a20808; border-color:#a20808; color:#fff;
}
.rsdlc-locator .rsdlc-item-actions .button:last-child{
  background:#3fa3da; color:#fff;
}
.rsdlc-locator .rsdlc-item-actions .button:last-child:hover{
  filter:brightness(.92);
}

/* hide items beyond the initial cap */
.rsdlc-hidden{ display:none !important; }

/* show-more area */
.rsdlc-more-wrap{ margin-top:10px; }
.rsdlc-more{
  background:#f5f6f8; border:1px solid #e6eaf0; border-radius:8px;
  padding:.6rem .9rem; font-weight:700;
}
.rsdlc-more:hover{ background:#a20808; border-color:#a20808; color:#fff; }


/* Map loading overlay */
.rsdlc-map-wrap { position: relative; }
.rsdlc-map-outer { position: relative; }

.rsdlc-map-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(1px);
  z-index: 20;
}

.rsdlc-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #e6eaf0;
  border-top-color: #a20808; /* brand red on top */
  animation: rsdlc-spin 0.9s linear infinite;
}

.rsdlc-loading-text {
  margin-top: 8px;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  letter-spacing: .2px;
}

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