/* Pickup cards: text and fees stay in HTML; the existing Services controller
   owns selection, prices and booking links. Maps are decorative local assets. */
.services-open .sp-area-control.sp-pickup {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  scroll-margin-top: 125px;
}
.services-open .sp-pickup::after,
.services-open .sp-pickup .sp-area-label::before { content: none; }
.services-open .sp-pickup .sp-area-label {
  display: block; width: 100%; padding: 0; margin: 0 0 40px;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 750; letter-spacing: -.035em;
}
.services-open .sp-pickup .sp-selection-controls:disabled { opacity: 1; }
.services-open .sp-pickup .sp-pickup-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  max-width: none; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.services-open .sp-pickup .sp-pickup-card {
  --pickup-edge: #00d4ff;
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  justify-content: center; gap: 18px; flex: none; width: 100%; min-width: 0;
  min-height: 170px; padding: 25px 28px; margin: 0;
  border: 1px solid #344c77; border-radius: 22px; text-align: left;
  background: linear-gradient(115deg, #111e36, #081424 76%);
  color: #f4f8ff; font: inherit; cursor: pointer; white-space: normal;
  box-shadow: inset 0 1px 0 #a4d8ff0c, 0 10px 25px #02061020;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.services-open .sp-pickup .sp-pickup-card.active[data-zone] {
  color: #f4f8ff; border-color: var(--pickup-edge);
  background: linear-gradient(115deg, #10223e, #08172d 76%);
  box-shadow: inset 0 0 0 1px #00d4ff77, 0 0 23px #00b8ff17, 0 12px 26px #02061030;
}
.services-open .sp-pickup .sp-pickup-card:focus-visible {
  outline: 3px solid #c9efff; outline-offset: 5px;
}
.services-open .sp-pickup .sp-pickup-card:disabled { cursor: default; }
.services-open .sp-pickup .sp-pickup-core { min-height: 218px; }
.services-open .sp-pickup .sp-pickup-art {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.services-open .sp-pickup .sp-pickup-art img {
  position: absolute; width: 53%; height: 100%; right: 0; bottom: 0;
  object-fit: cover; object-position: right center; opacity: .76;
  transition: opacity .25s ease;
}
.services-open .sp-pickup .sp-pickup-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #0b182e 12%, #0b182ebd 46%, #0b182e0a 82%);
}
.services-open .sp-pickup .sp-pickup-highway img { width: 58%; opacity: .8; }
.services-open .sp-pickup .sp-pickup-highway::after {
  background: linear-gradient(90deg, #0b182e 14%, #0b182ee8 39%, #0b182e45 76%, #0b182e15),
              linear-gradient(0deg, #07122515, #0712255c);
}
.services-open .sp-pickup .active .sp-pickup-art img { opacity: 1; }
.services-open .sp-pickup .sp-pickup-heading {
  display: flex; align-items: center; gap: 13px; position: relative; min-height: 34px;
}
.services-open .sp-pickup .sp-pickup-title {
  font-size: 1.5rem; font-weight: 780; line-height: 1.15; letter-spacing: -.045em;
  color: #f4f8ff; text-shadow: 0 2px 14px #031020;
}
.services-open .sp-pickup .sp-pickup-title-tail { white-space: nowrap; }
.services-open .sp-pickup .sp-pickup-check {
  position: relative; display: block; flex: 0 0 27px; height: 27px;
  border-radius: 50%; border: 2px solid #56759d; background: #071527bb;
  box-shadow: inset 0 2px 4px #0007; transition: border-color .2s ease;
}
.services-open .sp-pickup .sp-pickup-check::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  background: #00d4ff; opacity: 0; transform: scale(.4);
  box-shadow: 0 0 10px #00d4ff55; transition: opacity .2s ease, transform .2s ease;
}
.services-open .sp-pickup .active .sp-pickup-check { border-color: #3ed9ff; }
.services-open .sp-pickup .active .sp-pickup-check::after { opacity: 1; transform: scale(1); }
.services-open .sp-pickup .sp-pickup-free {
  position: absolute; z-index: 2; top: -34px; right: 26px;
  color: #b7ddff; font-size: clamp(4.6rem, 8vw, 7rem); font-weight: 900;
  letter-spacing: -.055em; line-height: 1; transform: rotate(-8deg);
  text-shadow: 1px 2px #70baf0, 2px 4px #5798d2, 3px 6px #3966af,
               4px 8px #344fac, 5px 10px #413e8f, 6px 12px #362868,
               0 18px 25px #020714bb;
  pointer-events: none; transition: transform .25s ease;
}
.services-open .sp-pickup .sp-pickup-core .sp-pickup-heading { padding-right: 210px; }
.services-open .sp-pickup .sp-pickup-neighbourhoods {
  position: relative; display: block; max-width: 69%; color: #c7d7ed;
  font-size: .95rem; line-height: 1.65; font-weight: 450; text-wrap: pretty;
  text-shadow: 0 1px 8px #061225;
}
.services-open .sp-pickup .sp-pickup-description {
  display: block; position: relative; max-width: 75%; color: #65e2ff;
  font-size: .92rem; line-height: 1.5; font-weight: 650; text-wrap: pretty;
}
.services-open .sp-pickup .sp-pickup-fee {
  display: flex; flex-direction: column; flex-shrink: 0; margin-left: auto;
  margin-right: 25%; color: #f4f8ff;
}
.services-open .sp-pickup .sp-pickup-fee strong {
  color: inherit; font-size: 2.5rem; font-weight: 850; line-height: 1.08; letter-spacing: -.06em;
}
.services-open .sp-pickup .sp-pickup-fee > span {
  color: #b5c4dd; font-size: .78rem; font-weight: 450; line-height: 1.6;
  white-space: nowrap; letter-spacing: 0;
}
.services-open .sp-pickup .sp-pickup-terms {
  margin: 13px 0 0; color: #a9bad3; font-size: .75rem; line-height: 1.6;
}
.services-open .sp-pickup .sp-pickup-status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (hover: hover) and (pointer: fine) {
  .services-open .sp-pickup .sp-pickup-card:hover:not(.active) {
    color: #f4f8ff; border-color: #64b5eb; background: linear-gradient(115deg, #142440, #0b1b32);
    box-shadow: 0 0 20px #147eff14;
  }
  .services-open .sp-pickup .sp-pickup-card:hover .sp-pickup-art img { opacity: 1; }
  .services-open .sp-pickup .sp-pickup-card:hover .sp-pickup-free { transform: translateY(-3px) rotate(-8deg); }
}
@media (min-width: 1100px) {
  .services-open .sp-pickup .sp-pickup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .services-open .sp-pickup .sp-area-label { margin-bottom: 45px; }
  .services-open .sp-pickup .sp-pickup-card { justify-content: flex-start; padding: 34px 23px 24px; min-height: 290px; gap: 17px; }
  .services-open .sp-pickup .sp-pickup-free { font-size: 5.2rem; top: -37px; right: 20px; }
  .services-open .sp-pickup .sp-pickup-core .sp-pickup-heading { padding-right: 0; }
  .services-open .sp-pickup .sp-pickup-title { font-size: 1.3rem; }
  .services-open .sp-pickup .sp-pickup-heading { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .services-open .sp-pickup .sp-pickup-title { flex: 1; min-width: 0; padding-top: 2px; }
  .services-open .sp-pickup .sp-pickup-fee { width: 100%; margin: 0; padding-left: 37px; box-sizing: border-box; }
  .services-open .sp-pickup .sp-pickup-fee strong { font-size: 2.3rem; }
  .services-open .sp-pickup .sp-pickup-neighbourhoods { max-width: 100%; font-size: .875rem; }
  .services-open .sp-pickup .sp-pickup-description { max-width: 100%; font-size: .86rem; margin-top: auto; }
  .services-open .sp-pickup .sp-pickup-art img { width: 100%; opacity: .5; }
  .services-open .sp-pickup .sp-pickup-art::after { background: linear-gradient(100deg, #0b182ee6, #0b182e99 70%, #0b182e12); }
  .services-open .sp-pickup .sp-pickup-highway img { width: 100%; height: 73%; bottom: 0; }
  .services-open .sp-pickup .sp-pickup-highway::after { background: linear-gradient(180deg, #0b182e 12%, #0b182eaa 49%, #0b182e08), linear-gradient(90deg, #0b182e88, transparent); }
  .services-open .sp-pickup .sp-pickup-abbotsford .sp-pickup-neighbourhoods { margin-top: auto; text-shadow: 0 1px 8px #000, 0 1px 3px #000; }
}
@media (max-width: 680px) {
  .services-open .sp-pickup .sp-area-label { font-size: 1.4rem; margin-bottom: 40px; }
  .services-open .sp-pickup .sp-pickup-grid { gap: 12px; }
  .services-open .sp-pickup .sp-pickup-card { min-height: 154px; padding: 20px 17px; gap: 16px; border-radius: 18px; }
  .services-open .sp-pickup .sp-pickup-core { min-height: 215px; padding-top: 26px; }
  .services-open .sp-pickup .sp-pickup-free { top: -29px; right: 17px; font-size: 4.6rem; }
  .services-open .sp-pickup .sp-pickup-core .sp-pickup-heading { padding-right: 117px; }
  .services-open .sp-pickup .sp-pickup-heading { gap: 9px; }
  .services-open .sp-pickup .sp-pickup-title { font-size: 1.13rem; line-height: 1.2; }
  .services-open .sp-pickup .sp-pickup-check { flex-basis: 22px; height: 22px; border-width: 1.5px; }
  .services-open .sp-pickup .sp-pickup-check::after { inset: 4px; }
  .services-open .sp-pickup .sp-pickup-neighbourhoods { max-width: 87%; font-size: .8125rem; line-height: 1.65; }
  .services-open .sp-pickup .sp-pickup-description { max-width: 100%; font-size: .8125rem; line-height: 1.5; }
  .services-open .sp-pickup .sp-pickup-fee { margin-right: 17px; }
  .services-open .sp-pickup .sp-pickup-fee strong { font-size: 1.9rem; }
  .services-open .sp-pickup .sp-pickup-fee > span { font-size: .72rem; }
  .services-open .sp-pickup .sp-pickup-art img { width: 64%; opacity: .85; }
  .services-open .sp-pickup .sp-pickup-art::after { background: linear-gradient(90deg, #0b182e 3%, #0b182edd 39%, #0b182e70 70%, #0b182e26); }
  .services-open .sp-pickup .sp-pickup-highway img { width: 79%; object-position: 69% center; opacity: .85; }
  .services-open .sp-pickup .sp-pickup-highway::after { background: linear-gradient(90deg, #0b182e 2%, #0b182edb 37%, #0b182e77 64%, #0b182e44), linear-gradient(180deg, #0b182e77, transparent); }
  .services-open .sp-pickup .sp-pickup-terms { font-size: .7rem; }
}
@media (max-width: 380px) {
  .services-open .sp-pickup .sp-pickup-free { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .services-open .sp-pickup *, .services-open .sp-pickup *::after { transition: none !important; animation: none !important; }
}
