/* =============================================================
   Store Locator – Redesigned CSS (red theme, 40/60 layout)
   ============================================================= */

/* ── Outer wrapper ────────────────────────────────────────── */
.sl-wrapper {
  display: flex;
  flex-direction: row;
  min-height: 700px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── Left column (40%) ────────────────────────────────────── */
.sl-left {
  width: 40%;
  background: #f5f5f5;
  padding: 24px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 700px;
}

/* ── Right column (60%) ───────────────────────────────────── */
.sl-right {
  width: 60%;
  position: relative;
}

/* ── Map fills right column ───────────────────────────────── */
.sl-map {
  width: 100%;
  height: 100%;
  min-height: 700px;
}

/* ── Filter dropdowns ─────────────────────────────────────── */
.sl-filter-block {
  margin-bottom: 14px;
}

.sl-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border: 2px solid #cccccc;
  border-radius: 4px;
  background: #ffffff;
  color: #333333;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  box-sizing: border-box;
}

.sl-select:focus {
  outline: none;
  border-color: #cc2020;
}

/* ── Province + Brand heading in left panel ───────────────── */
.sl-panel-header {
  margin-bottom: 18px;
}

.sl-panel-title {
  font-size: 22px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 6px 0;
}

.sl-panel-underline {
  width: 48px;
  height: 3px;
  background: #cc2020;
  border-radius: 2px;
  margin-bottom: 8px;
}

.sl-panel-sub {
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* ── Dealer list ──────────────────────────────────────────── */
.sl-dealer-list {
  flex: 1;
  overflow-y: auto;
}

/* ── Dealer card ──────────────────────────────────────────── */
.sl-dealer-card {
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
  cursor: pointer;
  border-bottom: 1px solid #e0e0e0;
  transition: box-shadow 0.2s;
}

.sl-dealer-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.sl-dealer-name {
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 8px 0;
}

.sl-dealer-row {
  font-size: 13px;
  color: #444444;
  margin: 0 0 4px 0;
  line-height: 1.5;
}

.sl-dealer-row a {
  color: #cc2020;
  text-decoration: none;
}

.sl-dealer-row a:hover {
  text-decoration: underline;
}

.sl-label {
  font-weight: 600;
  color: #222222;
}

.sl-no-results {
  color: #888;
  font-size: 14px;
  padding: 10px 0;
}

/* ── Mapbox overrides ─────────────────────────────────────── */
.mapboxgl-map {
  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0);
}
.mapboxgl-canvas { left: 0; position: absolute; top: 0; }
.mapboxgl-canvas-container.mapboxgl-interactive { cursor: grab; -webkit-user-select: none; user-select: none; }
.mapboxgl-canvas-container.mapboxgl-interactive:active { cursor: grabbing; }
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right,
.mapboxgl-ctrl-top-left, .mapboxgl-ctrl-top-right { pointer-events: none; position: absolute; z-index: 2; }
.mapboxgl-ctrl-top-left { left: 0; top: 0; }
.mapboxgl-ctrl-top-right { right: 0; top: 0; }
.mapboxgl-ctrl-bottom-left { bottom: 0; left: 0; }
.mapboxgl-ctrl-bottom-right { bottom: 0; right: 0; }
.mapboxgl-ctrl { clear: both; pointer-events: auto; transform: translate(0); }
.mapboxgl-ctrl-top-left .mapboxgl-ctrl { float: left; margin: 10px 0 0 10px; }
.mapboxgl-ctrl-top-right .mapboxgl-ctrl { float: right; margin: 10px 10px 0 0; }
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { float: left; margin: 0 0 10px 10px; }
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { float: right; margin: 0 10px 10px 0; }
.mapboxgl-ctrl-group { background: #fff; border-radius: 4px; }
.mapboxgl-ctrl-group:not(:empty) { box-shadow: 0 0 0 2px rgb(0 0 0 / 10%); }
.mapboxgl-ctrl-group button { background-color: transparent; border: 0; box-sizing: border-box; cursor: pointer; display: block; height: 29px; outline: none; overflow: hidden; padding: 0; width: 29px; }
.mapboxgl-ctrl-group button + button { border-top: 1px solid #ddd; }
.mapboxgl-ctrl button .mapboxgl-ctrl-icon { background-position: 50%; background-repeat: no-repeat; display: block; height: 100%; width: 100%; }
.mapboxgl-ctrl button:not(:disabled):hover { background-color: rgb(0 0 0 / 5%); }
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E"); }
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E"); }
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E"); }
.mapboxgl-ctrl-attrib { background-color: rgb(255 255 255 / 50%); margin: 0; padding: 0 5px; }
.mapboxgl-ctrl-attrib a { color: rgb(0 0 0 / 75%); text-decoration: none; }
.mapboxgl-popup { display: flex; left: 0; pointer-events: none; position: absolute; top: 0; will-change: transform; }
.mapboxgl-popup-content { background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); padding: 10px 15px; pointer-events: auto; position: relative; }
.mapboxgl-marker { left: 0; opacity: 1; position: absolute; top: 0; transition: opacity .2s; will-change: transform; }
@keyframes mapboxgl-spin { 0% { transform: rotate(0); } to { transform: rotate(1turn); } }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .sl-wrapper {
    flex-direction: column;
  }
  .sl-left,
  .sl-right {
    width: 100%;
    max-height: none;
  }
  .sl-left {
    max-height: 60vh;
    overflow-y: auto;
  }
  .sl-map,
  .sl-right {
    min-height: 400px;
    height: 400px;
  }
}