.ppl-wrapper,
.ppl-global,
.ppl-city-section,
.ppl-points-list,
.ppl-point-card,
.ppl-map {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.ppl-wrapper {
  margin: 0;
}

.ppl-global {
  margin-bottom: 40px;
}

.ppl-map-title,
.ppl-city-title {
  color: #022743;
}

.ppl-map-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 14px;
}

.ppl-city-section {
  margin: 42px 0;
}

.ppl-city-title {
  font-size: 28px;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.ppl-map {
  min-height: 280px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  margin-bottom: 22px;
  z-index: 1;
}

.ppl-points-list {
  display: block;
}

.ppl-point-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 22px;
  margin: 0 0 22px;
  box-shadow: none;
  border-bottom: 1px solid #e8e8e8;
}

.ppl-point-card.ppl-featured .ppl-point-mainline {
  color: #022743;
  font-weight: 700;
}

.ppl-point-mainline {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.ppl-nowrap {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
}

.ppl-hours-comma {
  white-space: normal;
}

.ppl-separator {
  color: #b5b5b5;
  margin: 0 4px;
}

.ppl-icon,
.ppl-popup-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin: 0 3px 0 5px;
  vertical-align: -0.15em;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ppl-icon:first-child,
.ppl-popup-icon:first-child {
  margin-left: 0;
}

.ppl-icon-pin,
.ppl-popup-icon-pin {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ppl-icon-phone,
.ppl-popup-icon-phone {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ppl-icon-clock,
.ppl-popup-icon-clock {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.75A10.25 10.25 0 1 0 12 22.25 10.25 10.25 0 0 0 12 1.75zm.75 10.56 4.1 2.43-.76 1.28-4.84-2.87V6.5h1.5v5.81z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.75A10.25 10.25 0 1 0 12 22.25 10.25 10.25 0 0 0 12 1.75zm.75 10.56 4.1 2.43-.76 1.28-4.84-2.87V6.5h1.5v5.81z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ppl-hours-info,
.ppl-info {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.4;
  color: #555;
}

.ppl-info {
  margin-top: 4px;
}

.ppl-popup {
  line-height: 1.4;
}

.ppl-popup strong {
  display: block;
  color: #022743;
  margin-bottom: 7px;
  font-size: 15px;
}

.ppl-popup div {
  margin-top: 6px;
}

.ppl-popup-icon {
  color: #022743;
  margin-right: 5px;
}

.ppl-popup-hours-info {
  font-size: 13px;
}

@media (max-width: 767px) {
  .ppl-map-title,
  .ppl-city-title {
    font-size: 22px;
  }

  .ppl-map {
    height: 360px !important;
  }

  .ppl-point-mainline {
    font-size: 13px;
  }

  .ppl-point-line,
  .ppl-location-block,
  .ppl-phone-block,
  .ppl-hours-block {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  .ppl-nowrap {
    white-space: normal;
  }

}

/* City navigation */
.ppl-content-layout {
  position: relative;
  display: block;
  width: 100%;
}

.ppl-city-sidebar-anchor {
  position: sticky;
  top: 96px;
  z-index: 40;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.ppl-city-sidebar {
  width: 180px;
  display: block;
  transform: translateX(calc(-100% - 28px)) translateY(var(--ppl-sidebar-y, 0px));
  pointer-events: auto;
}

.ppl-city-sidebar-inner {
  padding: 12px 12px 14px;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  max-height: calc(100vh - 116px);
  overflow: auto;
}

.ppl-city-nav-title {
  color: #022743;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 9px;
  text-transform: uppercase;
}

.ppl-city-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ppl-city-nav-list li {
  margin: 0;
  padding: 0;
}

.ppl-city-nav-list a {
  display: block;
  padding: 7px 8px;
  border-radius: 6px;
  color: #022743;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.25;
}

.ppl-city-nav-list a:hover,
.ppl-city-nav-list a:focus,
.ppl-city-nav-list a.ppl-active-city-link {
  background: #f0f5f8;
  color: #ed1c24;
}

.ppl-cities-content {
  min-width: 0;
  width: 100%;
}

.ppl-mobile-city-nav {
  display: none;
}

.ppl-city-section {
  scroll-margin-top: 120px;
}

@media (max-width: 1380px) and (min-width: 901px) {
  .ppl-city-sidebar {
    width: 160px;
    transform: translateX(calc(-100% - 18px)) translateY(var(--ppl-sidebar-y, 0px));
  }

  .ppl-city-sidebar-inner {
    padding: 10px;
  }

  .ppl-city-nav-list a {
    font-size: 12px;
    padding: 6px 7px;
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  .ppl-city-sidebar {
    display: none;
  }
}

@media (max-width: 900px) {
  .ppl-content-layout {
    display: block;
  }

  .ppl-city-sidebar-anchor,
  .ppl-city-sidebar {
    display: none;
  }

  .ppl-mobile-city-nav {
    display: block;
    position: sticky;
    top: 76px;
    z-index: 50;
    padding: 10px;
    margin: 0 0 24px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
  }

  .ppl-mobile-city-nav label {
    display: block;
    color: #022743;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
  }

  .ppl-mobile-city-select {
    width: 100%;
    min-height: 38px;
    font-size: 14px;
  }

  .ppl-city-section {
    scroll-margin-top: 95px;
  }
}


/* v1.0.8: sidebar floats in the empty left margin and never changes map width */
.ppl-content-layout {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
}

.ppl-cities-content,
.ppl-city-section,
.ppl-city-section .ppl-map,
.ppl-city-section .ppl-points-list {
  width: 100%;
  max-width: none;
}

@media (min-width: 1201px) {
  .ppl-city-sidebar-anchor {
    width: 0;
    margin: 0;
    padding: 0;
  }
}

/* v1.0.9: two-line point description with consistent inline alignment */
.ppl-point-mainline {
  line-height: 1.35;
}

.ppl-point-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  line-height: 1.35;
}

.ppl-point-line-top {
  margin-bottom: 3px;
}

.ppl-point-line-hours {
  gap: 0 5px;
}

.ppl-point-line .ppl-nowrap,
.ppl-point-line .ppl-icon,
.ppl-point-line .ppl-hours-comma,
.ppl-point-line .ppl-nowrap > span {
  line-height: 1.35;
}

.ppl-point-line .ppl-nowrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
}

.ppl-point-line .ppl-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin: 0 3px 0 0;
  vertical-align: middle;
  position: relative;
  top: 0;
}

.ppl-point-line .ppl-hours-comma {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  white-space: nowrap;
}


/* v1.0.10: restore spacing before every phone block, keep icon close to text */
.ppl-point-line-top {
  column-gap: 0;
  row-gap: 3px;
}

.ppl-point-line-top .ppl-location-block {
  margin-right: 8px;
}

.ppl-point-line-top .ppl-phone-block {
  margin-right: 10px;
}

.ppl-point-line-top .ppl-phone-block .ppl-icon-phone {
  margin-right: 2px;
}

.ppl-point-line-top .ppl-phone-block:last-child {
  margin-right: 0;
}

.ppl-point-line-hours .ppl-icon-clock {
  margin-right: 3px;
}


/* v1.0.11: keep city menu above footer and format hours as comma+space */
.ppl-city-sidebar {
  will-change: transform;
}

.ppl-point-line .ppl-hours-comma {
  margin: 0;
  padding: 0;
}


/* v1.1.1: mobile wrapping for long names and clickable point cards */
.ppl-point-card[data-ppl-point-id] {
  cursor: pointer;
}

.ppl-point-card[data-ppl-point-id]:hover .ppl-point-mainline {
  color: #ed1c24;
}

@media (max-width: 767px) {
  .ppl-point-line {
    min-width: 0;
  }

  .ppl-point-line .ppl-location-block,
  .ppl-point-line .ppl-location-block > span {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .ppl-point-line .ppl-phone-block,
  .ppl-point-line .ppl-phone-block > span,
  .ppl-point-line .ppl-hours-block,
  .ppl-point-line .ppl-hours-block > span {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* v1.1.2: mobile - never clip long address/name; desktop layout unchanged */
.ppl-point-line-top {
  overflow: visible;
}

.ppl-point-line-top .ppl-location-block {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}

.ppl-point-line-top .ppl-location-block > span {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 767px) {
  .ppl-point-card,
  .ppl-point-mainline,
  .ppl-point-line,
  .ppl-point-line-top {
    overflow: visible !important;
  }

  .ppl-point-line-top {
    align-items: flex-start;
  }

  .ppl-point-line-top .ppl-location-block {
    flex: 1 1 auto;
    white-space: normal !important;
    overflow: visible !important;
  }

  .ppl-point-line-top .ppl-location-block > span {
    flex: 1 1 auto;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: visible !important;
  }

  .ppl-point-line-top .ppl-phone-block {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: visible !important;
  }
}

.ppl-popup-navigation {
  margin-top: 10px !important;
  padding-top: 8px;
  border-top: 1px solid #e8e8e8;
}

.ppl-popup-navigation a {
  display: inline-flex;
  align-items: center;
  color: #022743;
  font-weight: 700;
  text-decoration: none;
}

.ppl-popup-navigation a:hover,
.ppl-popup-navigation a:focus {
  color: #ed1c24;
  text-decoration: underline;
}

.ppl-popup-icon-navigation {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.71 2.29a1 1 0 0 0-1.05-.23l-18 7a1 1 0 0 0 .08 1.89l7.07 2.36 2.36 7.07a1 1 0 0 0 .93.68h.04a1 1 0 0 0 .93-.61l7-18a1 1 0 0 0-.36-1.16zM13.2 17.15l-1.64-4.91a1 1 0 0 0-.63-.63L6.02 9.97l12.22-4.75-5.04 11.93z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.71 2.29a1 1 0 0 0-1.05-.23l-18 7a1 1 0 0 0 .08 1.89l7.07 2.36 2.36 7.07a1 1 0 0 0 .93.68h.04a1 1 0 0 0 .93-.61l7-18a1 1 0 0 0-.36-1.16zM13.2 17.15l-1.64-4.91a1 1 0 0 0-.63-.63L6.02 9.97l12.22-4.75-5.04 11.93z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ppl-empty {
  padding: 12px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
