/* Charger map (findacharger.php): info-window pricing and Autocharge note, the filter chips,
   and the location list cards. Plain CSS rather than part of evcs.scss so these do not wait
   on a CodeKit rebuild. Colours follow scss/page-findacharger.scss and scss/map.scss. */

/* ---- Info window: pricing -------------------------------------------------------------- */

.loc-pricing { width: 306px; max-width: 100%; margin: 12px auto 4px; }
.loc-pricing-loading { font-size: .8rem; color: #8a8a8a; text-align: center; padding: 10px 0; }
.lp-unavailable { font-size: .8rem; color: #8a8a8a; text-align: center; padding: 6px 0; }

.lp-type { background: #fff; border-radius: 10px; box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
           padding: 12px 14px; margin-bottom: 10px; }
.lp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.lp-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #00619c; }
.lp-price { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: #0d0d0d; }
.lp-price span { font-size: .8rem; font-weight: 500; color: #555; margin-left: 2px; }
.lp-fee { font-size: .72rem; color: #555; text-align: right; line-height: 1.3; }
.lp-fee strong { font-size: .9rem; color: #0d0d0d; }

.lp-chart { position: relative; margin-top: 12px; padding-top: 18px; }
.lp-zones { position: absolute; top: 0; left: 0; right: 0; bottom: 15px; pointer-events: none; }
.lp-zone { position: absolute; top: 0; height: 100%; background: rgba(241,241,241,.7);
           border-left: 1px solid rgba(0,0,0,.05); }
.lp-zone.active { background: rgba(213,212,212,.5); }
.lp-labels { position: absolute; top: 0; left: 0; right: 0; height: 18px; }
.lp-labels div { position: absolute; transform: translateX(-50%); font-size: .7rem; font-weight: 500;
                 color: #0d0d0d; white-space: nowrap; }
.lp-bars { position: relative; display: flex; align-items: flex-end; justify-content: space-between;
           height: 36px; border-bottom: 1px solid #333; }
.lp-bar { width: 3.6%; border-radius: 2px 2px 0 0; background: #00619c; opacity: .8; }
.lp-bar.now { opacity: 1; background: rgba(240,100,50,.75); }
.lp-axis { position: relative; height: 15px; }
.lp-axis div { position: absolute; transform: translateX(-50%); font-size: .65rem; font-weight: 500; color: #0d0d0d; }

.lp-note { font-size: .7rem; color: #777; text-align: center; margin: 2px 4px 0; }

/* "Autocharge supported" note at the top of the info window, and the bolt on each charger
   that has it. Colours follow the info window's existing blue banner. */
.loc-autocharge { display: flex; align-items: flex-start; gap: 10px; width: 306px; max-width: 100%;
                  margin: 10px auto; padding: 10px 12px; border-radius: 10px;
                  background: #E7EFF6; border: 1px solid #B9CFE2; }
.loc-autocharge > .fa-bolt { flex: none; width: 26px; height: 26px; line-height: 26px; text-align: center;
                             border-radius: 50%; background: #00395F; color: #fff; font-size: .8rem; }
.loc-autocharge strong { display: block; font-size: .85rem; color: #00395F; }
.loc-autocharge span { display: block; font-size: .75rem; color: #3d4a54; line-height: 1.35; }
.loc-autocharge span .fa-bolt, .loc-autocharge-mark { color: #00619C; }

/* ---- Filter chips ------------------------------------------------------------------- */

#locations_list .connector-selector {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px;
    overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* Let the row run to the panel edge so it reads as scrollable. */
    margin-right: -15px; padding-right: 15px;
}
#locations_list .connector-selector::-webkit-scrollbar { display: none; }
#locations_list .connector-selector > div { flex: none; }

.connector-selector .chip-sep { flex: none; width: 1px; align-self: stretch; margin: 3px 2px; background: #d5d8da; }
.connector-selector .fchip { font-size: .85rem; }
.connector-selector .fchip .fa-bolt { font-size: .75rem; margin-right: 2px; }

/* Only shown while a filter is on. */
.map-filter-summary { display: flex; justify-content: space-between; align-items: center;
                      font-size: .75rem; color: #6c7276; margin-top: 6px; }
.map-filter-summary.d-none { display: none !important; }
.map-filter-summary a { color: #00619C; font-weight: 600; }
.map-filter-summary { gap: 10px; }
.map-filter-summary #map-filter-count { margin-right: auto; }

/* ---- Location list cards (views/location-list-card.php) ----------------------------------- */
.lc-header { padding: 10px 20px; font-size: .78rem; color: #6c7276; background: #f7fafc;
             border-bottom: 1px solid #e6eaee; }
.lc-header span { color: #9aa0a5; }

.lc { padding: 14px 20px; border-bottom: 1px solid #e6eaee; background: #fff; cursor: pointer;
      transition: background-color .12s ease; }
.lc:hover { background: #f7fafc; }
.lc:focus { outline: none; }
.lc:focus-visible { box-shadow: inset 3px 0 0 #00619C; }

.lc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lc-name { font-size: 1rem; font-weight: 600; color: #0d0d0d; line-height: 1.3; }
.lc-dist { flex: none; font-size: .78rem; font-weight: 600; color: #00619C; }
.lc-addr { font-size: .8rem; color: #6c7276; margin-top: 2px; }

.lc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lc-tag { font-size: .72rem; font-weight: 500; line-height: 1; padding: 5px 8px; border-radius: 6px;
          background: #f1f4f6; color: #3d4a54; white-space: nowrap; }
.lc-tag .fa-circle { font-size: .5rem; vertical-align: middle; margin-right: 2px; }
.lc-avail.ok   { background: #e8f5ee; color: #00803d; }
.lc-avail.busy { background: #fdecec; color: #c62828; }
.lc-avail.off  { background: #f1f4f6; color: #8a9196; }
.lc-ac { background: #E7EFF6; color: #00395F; }
.lc-ac .fa-bolt { font-size: .65rem; }
.lc-coming { background: #fff1ea; color: #c4501e; }

.lc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.lc-connectors { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .7rem; color: #72777C; }
.lc-connectors span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lc-connectors img { height: 18px; filter: grayscale(100%); opacity: .6; }
.lc-actions { flex: none; display: flex; gap: 12px; font-size: .78rem; font-weight: 600; }
.lc-actions a { color: #00619C; text-decoration: none; }
.lc-actions a:hover { text-decoration: underline; }
.loc-autocharge span a { color: #00619C; font-weight: 600; white-space: nowrap; }

/* ---- Search box ---------------------------------------------------------------------------- */
/* .searchbox i is absolutely positioned (for the search / clear icons); icons inside the chips
   must stay in the flow or they jump out next to the search field. */
.searchbox .connector-selector i { position: static !important; }

/* ---- Info window (desktop) and phone sheet: location and chargers -------------------------- */
.iw { width: 330px; max-width: 100%; padding: 4px 2px; font-family: inherit; }
.iw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.iw-name { font-size: 1.05rem; font-weight: 600; color: #0d0d0d; line-height: 1.3; }
.iw-addr { font-size: .8rem; color: #6c7276; margin-top: 3px; line-height: 1.35; }
.iw-go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
         border-radius: 9px; background: #00619c; color: #fff !important; font-size: .85rem;
         font-weight: 600; text-decoration: none !important; }
.iw-go:hover { background: #00507f; }
.iw-coming { margin-top: 10px; font-size: .85rem; font-weight: 600; color: #c4501e; }
.iw-banner { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #E7EFF6;
             border: 1px solid #B9CFE2; text-align: center; font-size: .85rem; }
.iw-banner strong { display: block; margin-bottom: 4px; }
.iw-banner p { margin: 0; }

/* Pricing and the Autocharge note fill the window width rather than a fixed 306px. */
.iw .loc-pricing, .iw .loc-autocharge { width: auto; margin-left: 0; margin-right: 0; }

.iw-chargers { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.iw-charger { border: 1px solid #e6eaee; border-radius: 10px; padding: 10px 12px; background: #fff; }
.iw-charger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
                   font-size: .78rem; margin-bottom: 8px; }
.iw-kw { font-weight: 600; color: #0d0d0d; }
.iw-id { color: #8a9196; white-space: nowrap; }
.iw-plugs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.iw-plug { display: flex; align-items: center; gap: 8px; min-width: 0; }
.iw-plug img { flex: none; height: 28px; width: 28px; object-fit: contain; }
.iw-plug-name { font-size: .8rem; font-weight: 600; color: #1F2730; line-height: 1.2;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iw-plug-status { font-size: .74rem; font-weight: 600; line-height: 1.3; }
.iw-plug-status .fa-circle { font-size: .5rem; vertical-align: middle; margin-right: 2px; }

/* ---- Phone: the pin opens as a bottom sheet (#mobile_overlay) ------------------------------- */
@media (max-width: 765px) {
    #find_a_charger #mobile_overlay { padding: 0; background: rgba(0,0,0,.45); }
    /* Sized to its content up to most of the screen, instead of a fixed height that left a big
       empty area under short locations. */
    #find_a_charger #mobile_overlay .mobile-overlay-content {
        height: auto !important; max-height: 82vh; padding: 0 16px 24px;
        border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.18);
        overscroll-behavior: contain;
    }
    .iw { width: 100%; padding: 0; }
    .iw-sheet-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: center;
                    align-items: center; height: 36px; margin: 0 -16px 4px; background: #fff; }
    .iw-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: #d5d8da; }
    .iw-sheet-close { position: absolute; right: 8px; top: 2px; width: 36px; height: 36px; border: 0;
                      border-radius: 50%; background: #f1f4f6; color: #3d4a54; font-size: 1rem;
                      display: flex; align-items: center; justify-content: center; }
    .iw-name { padding-right: 4px; }
    /* Keep the page behind from scrolling while the sheet is open. */
    body.iw-sheet-open { overflow: hidden; }
}
/* The site-wide grey for "not available" (#ccc) is too faint on white for a status people read. */
.iw-plug-status.not_available { color: #8a9196; }

@media (max-width: 765px) {
    /* Everything inside #locations_list is position: fixed on a phone (search, list, buttons),
       so its 30px top margin only added an empty strip under the map. The Subscribe and Save
       button used to sit over it. */
    #find_a_charger #locations_list { margin-top: 0 !important; }
    /* The List / Map button floats over the map with nothing behind it. */
    #find_a_charger #locations_list #cta { background: transparent; pointer-events: none; }
    #find_a_charger #locations_list #cta .btn { pointer-events: auto; }
}
@media (max-width: 765px) {
    /* The desktop 55vh cap left the phone list covering only part of the screen. */
    #find_a_charger #locations_list #list { max-height: none; }
}

@media (max-width: 765px) {
    /* #mobile_overlay lives inside #locations_list, which has z-index 100 — so the sheet's own
       z-index could never get above the fixed top nav (999), and its top slid under it with the
       close button out of reach. Lift the whole panel above the nav while a sheet is open. */
    body.iw-sheet-open #find_a_charger #locations_list { z-index: 10001; }

    /* vh on phones counts the area behind the browser's address bar, so 82vh could be taller
       than what is actually visible. dvh is the visible height; vh stays as the fallback. */
    #find_a_charger #mobile_overlay .mobile-overlay-content {
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}