/* ==========================================================================
   Locations / Find a Location - Ring Power
   Branch finder (search, service pills, results list, Leaflet map) and the
   branch detail pages. Shares the equipment pages' visual language: the
   uSkinned short banner (_LocationsHero), .ne-search-bar, .ne-btn and
   .ne-section-title all come from new-equipment.css, which loads site-wide.
   ========================================================================== */

:root {
    --rp-yellow: #F2C714;
    --rp-yellow-hover: #dab30f;
    --rp-dark: #333333;
    --rp-ink: #1a1a1a;
    --rp-gray: #666666;
    --rp-light-gray: #f5f5f5;
    --rp-border: #e0e0e0;
    --rp-card-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --rp-open: #2e7d32;
    --rp-closed: #c62828;
    --rp-origin: #1d6fb8;
    --loc-pane-height: clamp(520px, calc(100vh - 200px), 760px);
}

.loc-page__intro {
    max-width: 60rem;
    margin-bottom: 24px;
    color: var(--rp-gray);
}

/* ---------- Search ---------- */
.loc-search {
    position: relative;
    margin-bottom: 16px;
}

.loc-q-group {
    position: relative;
}

.loc-q-group .form-control {
    padding-right: 44px;
}

.loc-geolocate {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: var(--rp-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loc-geolocate:hover,
.loc-geolocate:focus-visible {
    color: var(--rp-ink);
}

.loc-search .form-select:disabled {
    background-color: var(--rp-light-gray);
    color: #999;
    cursor: not-allowed;
}

.loc-status {
    font-size: 13px;
    color: var(--rp-gray);
    margin-top: 8px;
    min-height: 18px;
}

.loc-status:empty {
    min-height: 0;
    margin-top: 0;
}

.loc-status.is-error {
    color: var(--rp-closed);
}

/* Suggestions sit above Leaflet's panes and controls (z-index up to 1000). */
.loc-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1100;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.loc-suggest__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 14px;
    font-size: 14px;
    color: var(--rp-dark);
    cursor: pointer;
}

.loc-suggest__item small {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rp-gray);
    white-space: nowrap;
}

.loc-suggest__item:hover,
.loc-suggest__item[aria-selected="true"] {
    background: var(--rp-light-gray);
}

.loc-suggest__item--near {
    border-top: 1px solid var(--rp-border);
    font-weight: 600;
}

/* ---------- Service pills ---------- */
.loc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.loc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rp-dark);
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.loc-pill:hover {
    border-color: var(--rp-ink);
}

.loc-pill__count {
    font-size: 11px;
    font-weight: 700;
    color: var(--rp-gray);
}

.loc-pill[aria-pressed="true"] {
    background: var(--rp-ink);
    border-color: var(--rp-ink);
    color: #fff;
}

.loc-pill[aria-pressed="true"] .loc-pill__count {
    color: var(--rp-yellow);
}

.loc-pill--open::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rp-open);
}

@media (max-width: 767px) {
    /* One swipeable row on phones instead of a wall of pills. */
    .loc-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }

    .loc-pill {
        flex: 0 0 auto;
    }
}

/* ---------- Toolbar ---------- */
.loc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 12px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--rp-yellow);
}

.loc-toolbar__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.loc-count {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rp-dark);
}

.loc-context {
    font-size: 13px;
    color: var(--rp-gray);
}

.loc-clear {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rp-dark);
    text-decoration: underline;
    text-decoration-color: var(--rp-yellow);
    text-underline-offset: 3px;
    cursor: pointer;
}

.loc-clear:hover {
    color: var(--rp-yellow-hover);
}

.loc-view-toggle {
    display: none;
    flex-shrink: 0;
    border: 1px solid var(--rp-ink);
    border-radius: 3px;
    overflow: hidden;
}

.loc-view-toggle button {
    background: #fff;
    border: none;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rp-ink);
    cursor: pointer;
}

.loc-view-toggle button[aria-pressed="true"] {
    background: var(--rp-ink);
    color: #fff;
}

/* ---------- Layout: list + map ---------- */
.loc-layout {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: 24px;
    height: var(--loc-pane-height);
}

.loc-results {
    min-width: 0;
    overflow-y: auto;
    padding: 2px 6px 2px 2px;
    scrollbar-width: thin;
}

.loc-map-wrap {
    min-width: 0;
}

.loc-map {
    height: 100%;
    width: 100%;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    background: #eceef0;
}

@media (max-width: 991.98px) {
    .loc-view-toggle { display: inline-flex; }

    .loc-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .loc-results {
        overflow: visible;
        padding: 0;
    }

    .loc-map { height: 70vh; min-height: 420px; }

    .loc-layout[data-view="list"] .loc-map-wrap,
    .loc-layout[data-view="map"] .loc-results { display: none; }
}

/* ---------- Result cards ---------- */
.loc-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.loc-results-list > li + li {
    margin-top: 12px;
}

.loc-card {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    box-shadow: var(--rp-card-shadow);
    padding: 16px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.loc-card:hover,
.loc-card.is-hover {
    border-color: #cfcfcf;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.loc-card.is-active {
    border-color: var(--rp-yellow);
    box-shadow: inset 4px 0 0 var(--rp-yellow), 0 4px 14px rgba(0,0,0,0.1);
}

.loc-card:focus-visible {
    outline: 2px solid var(--rp-ink);
    outline-offset: 2px;
}

.loc-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.loc-card__num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rp-yellow);
    color: var(--rp-ink);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loc-card.is-active .loc-card__num {
    background: var(--rp-ink);
    color: var(--rp-yellow);
}

.loc-card__title {
    flex: 1;
    min-width: 0;
}

.loc-card__name {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: var(--rp-dark);
    margin: 0 0 4px;
}

.loc-card__name a {
    color: inherit;
    text-decoration: none;
}

.loc-card__name a:hover {
    text-decoration: underline;
    text-decoration-color: var(--rp-yellow);
    text-underline-offset: 3px;
}

.loc-card__addr {
    font-size: 13px;
    color: var(--rp-gray);
    line-height: 1.4;
    margin: 0;
}

.loc-card__aside {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.loc-card__distance {
    font-size: 14px;
    font-weight: 700;
    color: var(--rp-dark);
    white-space: nowrap;
}

.loc-card__hours {
    font-size: 12px;
    color: var(--rp-gray);
    margin: 8px 0 0;
}

.loc-card__services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.loc-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rp-gray);
    background: var(--rp-light-gray);
    border: 1px solid var(--rp-border);
    border-radius: 2px;
    padding: 2px 8px;
}

.loc-tag--more {
    background: transparent;
    border-style: dashed;
}

.loc-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.loc-card__actions:empty {
    display: none;
}

.loc-card__actions .ne-btn {
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.loc-badge {
    display: inline-block;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 2px;
    color: #fff;
    line-height: 1.4;
}

.loc-badge--open { background: var(--rp-open); }
.loc-badge--closed { background: var(--rp-closed); }
.loc-badge--nearest { background: var(--rp-yellow); color: var(--rp-ink); }

.loc-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--rp-gray);
    border: 1px dashed var(--rp-border);
    border-radius: 4px;
}

.loc-empty .ne-btn {
    flex: 0 0 auto;
    display: inline-flex;
}

/* ---------- Basemap tint ----------
   The stock OSM raster tiles run orange/green, which competes with the yellow
   pins and the rest of the brand palette. Knocking the saturation down on the
   tile pane leaves a soft grey basemap with just enough blue in the water to
   read. Markers, popups, controls and attribution live in sibling panes, so
   they keep their full colour. */
.loc-map .leaflet-tile-pane,
.loc-detail__map .leaflet-tile-pane {
    filter: saturate(0.28) brightness(1.06) contrast(0.94);
}

.loc-map.leaflet-container,
.loc-detail__map.leaflet-container {
    font-family: inherit;
}

/* The theme underlines #site-content links unless they carry .btn or
   .nav-button-link, so button-style links and map controls get
   .nav-button-link in markup / script and follow the theme's button setting. */

/* ---------- Pins ----------
   A 26px square with one sharp corner, turned 45deg so the corner points
   down. Its tip lands at (15, 36) inside the 30x38 icon box, which is the
   iconAnchor used in the scripts. */
.loc-pin-wrap {
    background: none;
    border: none;
}

.loc-pin {
    position: absolute;
    left: 2px;
    top: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    background: var(--rp-yellow);
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.35);
    transform: rotate(-45deg);
    transition: transform 0.15s ease, background 0.15s ease;
}

.loc-pin__inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
    font-size: 12px;
    font-weight: 700;
    color: var(--rp-ink);
}

.loc-pin:not(.has-num) .loc-pin__inner::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rp-ink);
}

.loc-pin.is-active {
    background: var(--rp-ink);
}

.loc-pin.is-active .loc-pin__inner {
    color: var(--rp-yellow);
}

.loc-pin.is-active:not(.has-num) .loc-pin__inner::after {
    background: var(--rp-yellow);
}

.loc-pin-wrap.is-hover .loc-pin,
.loc-pin.is-active {
    transform: rotate(-45deg) scale(1.15);
}

.leaflet-marker-icon.loc-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rp-ink);
    border: 3px solid var(--rp-yellow);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.15s ease;
}

.leaflet-marker-icon.loc-cluster.is-hover {
    transform: scale(1.12);
}

.loc-origin-wrap {
    background: none;
    border: none;
}

.loc-origin {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--rp-origin);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.loc-origin::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: rgba(29,111,184,0.25);
    animation: loc-pulse 2s ease-out infinite;
}

@keyframes loc-pulse {
    from { transform: scale(0.5); opacity: 1; }
    to { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .loc-origin::after { animation: none; }
    .loc-pin, .loc-cluster { transition: none; }
}

/* ---------- Map controls ---------- */
.loc-map-reset a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-ink);
}

.loc-map-follow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rp-ink);
    cursor: pointer;
}

.loc-map-follow input {
    accent-color: var(--rp-ink);
    margin: 0;
}

/* ---------- Popups ---------- */
.loc-leaflet-popup .leaflet-popup-content-wrapper {
    border-radius: 4px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.loc-leaflet-popup .leaflet-popup-content {
    margin: 16px 18px;
    font-size: 13px;
    line-height: 1.45;
}

.loc-popup__name {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 18px 6px 0;
    color: var(--rp-dark);
}

.leaflet-container .loc-popup__name a {
    color: inherit;
    text-decoration: none;
}

.loc-popup__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--rp-gray);
}

.leaflet-container .loc-popup p {
    margin: 0 0 6px;
}

.loc-popup__addr,
.loc-popup__dist {
    color: var(--rp-gray);
}

.loc-popup__dist {
    font-weight: 600;
}

.leaflet-container .loc-popup__phone a {
    color: var(--rp-dark);
    font-weight: 700;
    text-decoration: none;
}

.loc-popup__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.loc-popup__actions .ne-btn {
    padding: 8px 10px;
    font-size: 12px;
}

/* Leaflet colours every link in the map blue; keep the brand buttons. */
.leaflet-container .loc-popup a.ne-btn--primary,
.leaflet-container .loc-popup a.ne-btn--primary:hover {
    color: var(--rp-dark);
}

.leaflet-container .loc-popup a.ne-btn--outline {
    color: var(--rp-dark);
}

.leaflet-container .loc-popup a.ne-btn--outline:hover {
    color: #fff;
}

/* ---------- Branch detail ---------- */
.loc-detail__back {
    margin-bottom: 16px;
    font-size: 14px;
}

.loc-detail__back a {
    color: var(--rp-dark);
    font-weight: 600;
    text-decoration: none;
}

.loc-detail__back a:hover {
    text-decoration: underline;
    text-decoration-color: var(--rp-yellow);
    text-underline-offset: 3px;
}

.loc-detail__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 767px) {
    .loc-detail__grid { grid-template-columns: 1fr; }
}

.loc-panel {
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    box-shadow: var(--rp-card-shadow);
    padding: 24px;
}

.loc-panel + .loc-panel {
    margin-top: 24px;
}

.loc-detail__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rp-gray);
    margin: 0 0 6px;
}

.loc-detail__label:not(:first-child) {
    margin-top: 20px;
}

.loc-detail__status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

.loc-detail__addr {
    font-size: 16px;
    color: var(--rp-dark);
    line-height: 1.5;
    margin: 0;
}

.loc-detail__phone {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.loc-detail__phone a {
    color: var(--rp-dark);
    text-decoration: none;
}

.loc-detail__today {
    font-size: 13px;
    color: var(--rp-gray);
}

.loc-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.loc-detail__actions .ne-btn {
    flex: 0 0 auto;
    padding: 11px 20px;
}

.loc-detail__map-col {
    min-height: 380px;
}

.loc-detail__map {
    height: 100%;
    min-height: 380px;
    width: 100%;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    background: #eceef0;
}

/* table.loc-hours out-ranks misc_tables.css, which boxes every cell. */
table.loc-hours {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}

table.loc-hours th,
table.loc-hours td {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--rp-border);
}

table.loc-hours th {
    text-align: left;
    font-weight: 700;
    color: var(--rp-dark);
    padding: 8px 12px 8px 8px;
    width: 70px;
    text-transform: uppercase;
    font-size: 12px;
}

table.loc-hours td {
    padding: 8px 8px 8px 0;
    color: var(--rp-gray);
}

table.loc-hours tr:last-child th,
table.loc-hours tr:last-child td {
    border-bottom: 0;
}

.loc-hours tr.is-today th,
.loc-hours tr.is-today td {
    color: var(--rp-dark);
    font-weight: 700;
    background: rgba(242,199,20,0.12);
}

/* ---------- Departments (on a city Location page) ---------- */
.loc-departments {
    margin-top: 2.5rem;
}

.loc-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.loc-dept-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    background: #fff;
    border: 1px solid var(--rp-border);
    border-top: 3px solid var(--rp-yellow);
    border-radius: 4px;
    box-shadow: var(--rp-card-shadow);
    padding: 16px 18px;
    text-decoration: none;
    color: var(--rp-dark);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.loc-dept-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-3px);
    color: var(--rp-dark);
}

.loc-dept-card__name {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.loc-dept-card a {
    color: var(--rp-dark);
    text-decoration: none;
}

.loc-dept-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.loc-dept-card__addr {
    font-size: 13px;
    color: var(--rp-gray);
}

.loc-dept-card__phone {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 700;
}

.loc-dept-card__phone:hover {
    text-decoration: underline;
}

.loc-dept-card__more {
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rp-yellow-hover);
}