/* Mapa punktów serwisowych Elgar */
.dssp { margin: 24px 0 8px; }
.dssp__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.dssp__search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 480px;
    background: #fff; border: 1px solid #dfe3ea; border-radius: 12px; padding: 6px 8px 6px 12px;
    box-shadow: 0 1px 2px rgba(4,30,66,.05);
}
.dssp__search-ico { color: #8a93a6; font-size: 22px; }
.dssp__input {
    flex: 1; border: 0; outline: 0; font: 400 15px/1.3 "Open Sans", sans-serif;
    color: #041e42; background: transparent; padding: 8px 4px;
}
.dssp__btn {
    display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
    background: #2C46CB; color: #fff; font: 700 14px/1 "Manrope", sans-serif;
    border-radius: 9px; padding: 11px 18px; transition: background .15s;
}
.dssp__btn:hover { background: #041e42; }
.dssp__btn--ghost { background: #fff; color: #2C46CB; border: 1px solid #2C46CB; }
.dssp__btn--ghost:hover { background: #eef1fd; color: #2C46CB; }
.dssp__btn .material-icons { font-size: 18px; }
.dssp__count { font: 400 14px/1.3 "Open Sans", sans-serif; color: #55606f; white-space: nowrap; }
.dssp__count strong { color: #E30613; font-size: 16px; }

.dssp__layout {
    display: grid; grid-template-columns: 360px 1fr; gap: 16px;
    border: 1px solid #e6e9ef; border-radius: 14px; overflow: hidden; background: #fff;
}
.dssp__list {
    max-height: 560px; overflow-y: auto; border-right: 1px solid #eef0f4;
    display: flex; flex-direction: column;
}
.dssp__item {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name city" "addr addr" "dist dist";
    gap: 2px 8px; text-align: left; width: 100%; border: 0; border-bottom: 1px solid #f0f2f6;
    background: #fff; cursor: pointer; padding: 13px 16px; transition: background .12s;
}
.dssp__item:hover { background: #f5f7ff; }
.dssp__item-name { grid-area: name; font: 700 14.5px/1.25 "Manrope", sans-serif; color: #041e42; }
.dssp__item-city { grid-area: city; font: 600 12px/1 "Open Sans", sans-serif; color: #2C46CB;
    background: #eef1fd; border-radius: 20px; padding: 4px 10px; align-self: start; white-space: nowrap; }
.dssp__item-addr { grid-area: addr; font: 400 12.5px/1.4 "Open Sans", sans-serif; color: #667085; }
.dssp__item-dist { grid-area: dist; font: 700 12px/1 "Manrope", sans-serif; color: #E30613; }
.dssp__item-dist:empty { display: none; }
.dssp__empty { padding: 24px 16px; color: #8a93a6; font: 400 14px/1.4 "Open Sans", sans-serif; text-align: center; }

.dssp__mapwrap { min-height: 560px; }
.dssp__map { width: 100%; height: 560px; }
.dssp__map--nokey { display: flex; align-items: center; justify-content: center; background: #f2f4f8; color: #55606f; padding: 24px; text-align: center; }
.dssp-iw { font: 400 13px/1.5 "Open Sans", sans-serif; color: #041e42; }
.dssp-iw a { color: #2C46CB; font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
    .dssp__layout { grid-template-columns: 1fr; }
    .dssp__list { max-height: 320px; border-right: 0; border-bottom: 1px solid #eef0f4; order: 2; }
    .dssp__mapwrap { order: 1; min-height: 380px; }
    .dssp__map { height: 380px; }
}
@media (max-width: 560px) {
    .dssp__geo-txt { display: none; }
    .dssp__count { width: 100%; }
}

/* ---- Strona "Punkty serwisowe": pełna szerokość contentu + stepper ---- */
#content.page-cms-16{max-width:100%}
.page-cms-16 .cms-sp-intro{max-width:1180px;margin:0 auto}
.page-cms-16 .sp-lead{font-size:20px;line-height:1.55;color:#041e42;text-align:center;max-width:840px;margin:6px auto 0}
.sp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:30px 0 24px;position:relative}
.sp-step{position:relative;background:#fff;border:1px solid #e6e9ef;border-radius:16px;padding:28px 22px 24px;text-align:center;box-shadow:0 2px 6px rgba(4,30,66,.05);transition:transform .18s,box-shadow .18s}
.sp-step:before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#2C46CB,#E30613)}
.sp-step:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(44,70,203,.15)}
.sp-step__badge{width:66px;height:66px;margin:6px auto 16px;border-radius:50%;background:linear-gradient(135deg,#2C46CB,#041e42);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(44,70,203,.30)}
.sp-step__num{color:#fff;font:800 27px/1 "Manrope",sans-serif}
.sp-step__txt h3{margin:0 0 8px;font-size:17px;color:#041e42;font-weight:700}
.sp-step__txt p{margin:0;color:#55607a;line-height:1.5;font-size:14.5px}
.sp-step:not(:last-child):after{content:"";position:absolute;top:56px;right:-15px;width:20px;height:20px;border-top:3px solid #c9d2e6;border-right:3px solid #c9d2e6;transform:rotate(45deg);z-index:2}
.sp-hint{font-weight:600;color:#041e42;text-align:center;margin:6px 0 0}
@media(max-width:820px){
  .sp-steps{grid-template-columns:1fr;gap:16px}
  .sp-step:not(:last-child):after{top:auto;bottom:-14px;right:50%;transform:translateX(50%) rotate(135deg)}
}