/* Start Service — service-address lookup widget.
   Ported from parcel-address-search.html. Fonts come from fonts.css (already
   loaded on the host page), so no @font-face lives here. Every selector is
   namespaced (maison-energy-start-service-*) to avoid colliding with the
   portal's existing styles, and the original global resets (*, html, body) are
   intentionally dropped — the host page owns those. */

#start-service-section {
    --me-ss-app-surface: #F4F6FB;
    --me-ss-ink: #101F2A;
    --me-ss-surface: #FFFFFF;
    --me-ss-tint: #F4F6FB;
    --me-ss-edge: #D6DBE8;
    --me-ss-type: #000000;
    --me-ss-muted: rgba(16, 31, 42, .55);
    --me-ss-amber: #F5B93F;
    --me-ss-amber-deep: #C98A18;
    --me-ss-hair: #EAECF0;
    --me-ss-ease: cubic-bezier(.62, .02, .14, 1);
    /* The widget is contained to this box, not the viewport. It is the
       positioning context for the map, panel, pin, tether and scale (all
       absolute), and it clips them to its own rounded bounds. */
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 400px;
    padding: 0;
}
#start-service-section,
#start-service-section * { box-sizing: border-box; }

/* The Start Service widget fills its section edge-to-edge, so the login form's
   default padding is removed while this tab is active (the other tabs keep it).
   .start-service-mode is toggled on .login-outage-wrap by public-nav.js. */
.login-outage-wrap.start-service-mode .login-form { padding: 0; }
/* Positioning context for the hidden preload box (absolute, full wrap width). */
.login-outage-wrap { position: relative; }
/* Hidden-but-sized so Mapbox can init WebGL and fetch tiles before the tab
   opens. !important beats the inline display:none public-nav writes. */
#start-service-section[data-preload="1"] {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
}

#maison-energy-start-service-map { position: absolute; inset: 0; }
.mapboxgl-ctrl-bottom-right { display: none; }
.mapboxgl-ctrl-bottom-left { display: none; }
.mapboxgl-ctrl-attrib {
    font-family: 'Roboto', sans-serif !important; font-size: 9.5px !important;
    background: rgba(255, 255, 255, .7) !important;
}

/* chrome ----------------------------------------------------------- */
.maison-energy-start-service-scale {
    position: absolute; left: 22px; bottom: 22px; z-index: 5; pointer-events: none;
    font-family: 'Roboto', sans-serif;
    font-size: 10px; letter-spacing: .14em; color: rgba(16, 31, 42, .6);
}
.maison-energy-start-service-bar {
    width: 110px;
    height: 5px; border: 1px solid rgba(16, 31, 42, .4); border-top: 0; margin-bottom: 6px;
}

/* panel: the morphing element -------------------------------------- */
#maison-energy-start-service-panel {
    position: absolute; z-index: 20; background: var(--me-ss-surface); color: var(--me-ss-type);
    /* Horizontal centering + width owned by CSS (no JS-set left). The 80px keeps
       the same left/right gap the login cards have on narrow widths; the map
       stays full-width behind it. */
    left: 0; right: 0;
    margin-left: auto; margin-right: auto;
    width: min(400px, 100% - 80px);
    border-radius: 30px; overflow: hidden;
    box-shadow: 0 0 0 1px var(--me-ss-edge), 0 10px 10px -17px rgba(16, 31, 42, .28), 0 2px 10px -5px rgb(215 219 231);
    /* Only the morph animates (top/height/border-radius). Width and horizontal
       position never transition, so resizing re-centers instantly. */
    transition:
        top .3s var(--me-ss-ease), height .3s var(--me-ss-ease),
        padding-top .3s var(--me-ss-ease),
        border-radius .3s var(--me-ss-ease);
    /* No will-change: top/height aren't GPU-composited anyway, and forcing a
       permanent layer makes the SVG (and other content) blurry at fractional
       display scaling on Windows. */
}
/* Positioned once with transitions off so it doesn't slide in from the corner
   on first paint; JS removes data-init after the initial layout. */
#maison-energy-start-service-panel[data-init="1"] { transition: none; }
#maison-energy-start-service-panel[data-morph="1"] { transition-duration: .68s, .68s, .68s, .3s; }
#maison-energy-start-service-panel[data-settled="1"] { transition: none; }
.maison-energy-start-service-layer { position: absolute; inset: 0; transition: opacity .22s ease, transform .34s var(--me-ss-ease); }
.maison-energy-start-service-layer[data-off="1"] { opacity: 0; pointer-events: none; }

/* New-service signup plan card, centered directly below the search pill on the
   map. The pill top is min(96, sectionHeight*0.13) and it is 50px tall, so this
   lands just under it. z-index is below the panel (20) so the suggestion list
   overlays it while typing.
   The look was adapted from the reel's plan card, but classes are namespaced to
   this feature (not `renewal-plan-card`/`.mefr`): the values are inlined here so
   it renders standalone, and a `.mefr` in the DOM would hijack index.js's
   document.querySelector('.mefr') and break the reel. */
#maison-energy-start-service-signup {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: min(400px, 100% - 80px);
    z-index: 19;
    font-family: 'MefrRoboto', sans-serif;
    color: #000000;
    transition: opacity .3s ease;
}
/* Hidden while the pill is morphing for suggestions or an address is selected;
   toggled by start-service.js (updateSignup). */
#maison-energy-start-service-signup[data-hidden="1"] {
    opacity: 0;
    pointer-events: none;
}

#maison-energy-start-service-signup .maison-energy-start-service-signup-card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: hsl(0deg 0% 100%);
    outline: 1px solid #d7dbe7;
    border-radius: 15px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding: 20px 10px 5px;
    cursor: default;
    text-align: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    filter: brightness(1.02);
}
#maison-energy-start-service-signup .maison-energy-start-service-signup-rate {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    margin: 20px 0 8px;
    border-bottom: dashed 1px #d7dbe7;
    padding-bottom: 5px;
    width: 100%;
    max-width: 200px;
}
#maison-energy-start-service-signup .maison-energy-start-service-signup-rate-value { font-size: 30px; font-weight: 400; color: #000000; }
#maison-energy-start-service-signup .maison-energy-start-service-signup-rate-unit { font-size: 14px; color: #000000; }
#maison-energy-start-service-signup .maison-energy-start-service-signup-rate-cent { font-size: 75%; }
#maison-energy-start-service-signup .maison-energy-start-service-signup-chips {
    margin: 0 0px 10px;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(3, 0fr);
    justify-content: center;
    gap: 1px;
}
/* Chip styling is on the class itself (not scoped to the signup card) so the
   same button can also live in the search pill (layer-search). */
.maison-energy-start-service-signup-chip {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 3px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    white-space: nowrap;
    position: relative;
}
/* In the search pill it's content-width and pinned to the right (the flex:1
   input pushes it there). */
/* Legacy signup-card chip colors (green) are obsolete now that the chip lives in
   the search pill as a toggle item — the toggle rules below own its look. */
#maison-energy-start-service-layer-search .maison-energy-start-service-signup-chip {
    width: auto;
    flex: none;
    cursor: pointer;
}
/* Hide the pill EFL button while the loading spinner is showing, or once the
   address input has more than 2 characters. */
#maison-energy-start-service-layer-search[data-loading="1"] .maison-energy-start-service-signup-chip,
#maison-energy-start-service-layer-search[data-typing="1"] .maison-energy-start-service-signup-chip,
#maison-energy-start-service-layer-search[data-loading="1"] .maison-energy-start-service-docs-indicator,
#maison-energy-start-service-layer-search[data-typing="1"] .maison-energy-start-service-docs-indicator {
    display: none;
}
@media (hover: hover) {
    .maison-energy-start-service-signup-chip:hover {
        border-color: #097951;
        color: #097951;
        background-color: #eef7f2;
    }
}
.maison-energy-start-service-signup-chip:active {
    border-color: #097951;
    color: #097951;
}
/* One-time load cue: fade a chip to its active look and back (JS staggers the
   three so they light up one at a time). */
@keyframes maison-energy-start-service-signup-chip-flash {
    0%   { border-color: transparent; color: #000000; background-color: transparent; }
    50%  { border-color: #097951; color: #097951; background-color: #eef7f2; }
    100% { border-color: transparent; color: #000000; background-color: transparent; }
}
#maison-energy-start-service-signup .maison-energy-start-service-signup-chip-flash {
    animation: maison-energy-start-service-signup-chip-flash 0.7s ease;
}

#maison-energy-start-service-layer-search {
    position: relative;
    inset: auto;
    height: 50px;
    flex: none;
    display: flex;
    align-items: center;
    /* Centered always (not toggled) — the buttons center as the fields collapse
       and slide back to the right as they expand, with no instant jump. In
       normal mode the fields fill the row, so there is no free space to center. */
    justify-content: center;
    gap: 0;
    padding: 0 15px;
}
#maison-energy-start-service-layer-search[data-off="1"] { transform: scale(.97); }

/* Docs mode (EFL toggled): the glyph + input collapse away and the three
   document buttons center in the bar. The collapse/expand of the fields (its
   max-width) is driven by JS (animateFields) so it always animates from the
   CURRENT width at 0.6s easeInOutQuart — no max-width dead-zone, no jump. */
.maison-energy-start-service-search-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    /* Fades in with the crossfade when the toggle closes (layout reverts while the
       toggle is invisible, then the normal bar fades back in). Forward (opening)
       fades it out via the 0s override below. */
    transition: opacity .15s ease;
    transition-delay: 0s;
}
/* In docs mode the fields drop out of flow (absolute) so the buttons settle to
   their true centered positions instantly (EFL is FLIP-slid there). They just
   fade out in place — no width collapse. */
#maison-energy-start-service-layer-search[data-docs="1"] .maison-energy-start-service-search-fields {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition-delay: 0s;
}
/* The two extra document buttons (YRAC, TOS). Opening order: EFL slide → YRAC →
   TOS. Closing order (reverse): TOS → YRAC → EFL slide-back. Forward delays live
   in the [data-docs] rules; reverse delays are the base ones here. */
.maison-energy-start-service-doc-extra {
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
    border-right-width: 0;
    margin-left: 0;
    overflow: hidden;
    transform: translateX(-6px);
    /* Only opacity + transform animate; the button's SIZE (max-width/padding/
       border/margin) changes instantly so its slot is reserved from the start —
       fading the next button in never pushes the previous one out of place. */
    transition: opacity .25s ease, transform .25s ease;
    transition-delay: .25s;   /* closing: YRAC fades out after TOS */
}
.maison-energy-start-service-doc-extra ~ .maison-energy-start-service-doc-extra {
    transition-delay: 0s;   /* closing: TOS fades out first */
}
#maison-energy-start-service-layer-search[data-docs="1"] .maison-energy-start-service-doc-extra {
    max-width: 90px;
    padding-left: 8px;
    padding-right: 8px;
    border-left-width: 1px;
    border-right-width: 1px;
    margin-left: 7px;
    opacity: 1;
    transform: translateX(0);
    transition-delay: .6s;   /* opening: YRAC after the EFL slide (0.6s) */
}
#maison-energy-start-service-layer-search[data-docs="1"] .maison-energy-start-service-doc-extra ~ .maison-energy-start-service-doc-extra {
    transition-delay: .725s;   /* opening: TOS a half-fade after YRAC */
}
/* Docs-mode segmented toggle — same look as the outage screen's .toggle-buttons:
   a gray rounded pill; the first item (EFL) is the selected (white) option. */
.maison-energy-start-service-docs-toggle {
    display: inline-flex;
    align-items: center;
    flex: none;
    position: relative;   /* positioning context for the sliding selection pill */
    border-radius: 30px;
    background: transparent;
    /* On open, the gray track fades in only AFTER the .6s EFL slide finishes.
       (The close fade-out uses a JS inline transition with no delay.) */
    transition: background-color .4s ease;
    transition-delay: .6s;
}
#maison-energy-start-service-layer-search[data-docs="1"] .maison-energy-start-service-docs-toggle {
    background: #f5f6fb;
    display: inline-flex;
    border: 0px;
    border-radius: 30px;
    font-size: 12px;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    padding: 5px;
}
#maison-energy-start-service-layer-search[data-docs="1"] .maison-energy-start-service-docs-toggle .maison-energy-start-service-signup-chip {
    border: 0;   /* .toggle-item has no border (selected uses outline) — match its height */
    background: transparent;
    color: #000000;
    font-size: 12px;
    font-weight: 200;
    padding: 6px 12px;
    margin-left: 0;
    border-radius: 30px;
    cursor: pointer;
    position: relative;   /* text sits above the sliding pill */
    z-index: 1;
}
/* EFL (first item) keeps its box in normal mode too — same size/font at both ends
   of the slide (the FLIP is a pure move, no morph). Its white "selected" look now
   comes from the sliding indicator behind it, not its own background. */
#maison-energy-start-service-layer-search .maison-energy-start-service-docs-toggle .maison-energy-start-service-signup-chip:first-of-type {
    border: 0;
    background: transparent;
    color: #000000;
    font-size: 12px;
    padding: 6px 12px;
    margin-left: 0;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
/* The selected item reads bolder (matches the outage toggle's selected weight). */
#maison-energy-start-service-layer-search .maison-energy-start-service-docs-toggle .maison-energy-start-service-signup-chip.maison-energy-start-service-chip-selected {
    font-weight: 400;
}
/* In NORMAL mode (docs closed) EFL wears its white "selected" pill directly, via
   CSS — so it always paints correctly on first load without waiting on JS. In
   docs mode this turns off and the sliding indicator (below) takes over. */
#maison-energy-start-service-layer-search:not([data-docs="1"]) .maison-energy-start-service-docs-toggle .maison-energy-start-service-signup-chip:first-of-type {
    background: #ffffff;
    outline: 1px solid #d7dbe7;
    font-weight: 400;
}
/* The single white pill that slides under whichever item is selected, only while
   docs are open. JS sets its left/top/width/height to cover the selected chip; it
   slides between items and FLIP-moves with the toggle on open/close. */
.maison-energy-start-service-docs-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: #ffffff;
    outline: 1px solid #d7dbe7;
    border-radius: 30px;
    z-index: 0;
    pointer-events: none;
    display: none;
}
#maison-energy-start-service-layer-search[data-docs="1"] .maison-energy-start-service-docs-indicator {
    display: block;
}
/* Back-to-search arrow: sits at EFL's original spot (right of the pill) and fades
   in once EFL has slid into the toggle. Clicking it closes docs (EFL slides back).
   Hidden and non-interactive in normal mode. */
.maison-energy-start-service-back-arrow {
    position: absolute;
    right: 15px;
    /* Full-height + flex centering keeps the glyph on integer pixels — a
       translateY(-50%) here lands on a half-pixel and blurs the rotated arrow. */
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 3;
}
#maison-energy-start-service-layer-search[data-docs="1"] .maison-energy-start-service-back-arrow {
    opacity: 1;
    pointer-events: auto;
    /* Fade in only AFTER the panel's grow-up morph (~.68s) has fully settled, so
       the arrow never appears during the top/padding-top rounding jitter. */
    transition-delay: .72s;
}
.back-to-search-icon {
    /* Rotation now lives INSIDE the svg (viewBox 17.34x16.09, polygon in a rotated
       <g>). No CSS transform here on purpose — a CSS transform forces a GPU layer
       that snaps a couple px each time the opacity fade crosses the composited
       boundary. With no transform, the fade can't move it. */
    height: 13px;
    width: 23px;
    display: block;
    position: relative;
    top: -2px;   /* safe now — no transform on the element, so the fade can't snap it */
    fill: #000000;
}
/* Docs content — fills the panel below the toggle in docs mode; shows the panel
   for whichever chip (EFL/YRAC/TOS) is selected. Fades in only after the grow-up
   morph settles (same .72s as the arrow) to dodge the top/padding jitter. */
#maison-energy-start-service-docs-content {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 68px;
    bottom: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1;
}
#maison-energy-start-service-layer-search[data-docs="1"] ~ #maison-energy-start-service-docs-content {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .72s;
}
.maison-energy-start-service-doc-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    text-align: center;
    border-radius: 15px;
    background: #f6f7fb;
    padding-top: 0px;
}
.maison-energy-start-service-doc-panel[data-active="1"] { display: flex; }
.maison-energy-start-service-doc-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #000000;
}
.maison-energy-start-service-doc-date {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}
.maison-energy-start-service-doc-download {
    border: 0;
    background: transparent;
    padding: 0;
    margin-top: 5px;
    line-height: 0;
    cursor: pointer;
}
.maison-energy-start-service-doc-download img,
.maison-energy-start-service-doc-svg {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: contain;
}
/* Hover: a green stroke "snakes" around each outline (draws itself in via
   stroke-dashoffset) to replace the gray. Every path is normalized to
   pathLength=100 so this one rule drives them all. */
.maison-energy-start-service-doc-svg .ss-snake {
    stroke: #d7dbe7;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset .8s ease;
}
.maison-energy-start-service-doc-download:hover .ss-snake {
    stroke-dashoffset: 0;
}
/* The black PDF tab turns brand-green on hover/active. */
.maison-energy-start-service-doc-svg .ss-tab {
    fill: #000000;
    transition: fill .3s ease;
}
.maison-energy-start-service-doc-download:hover .ss-tab,
.maison-energy-start-service-doc-download:active .ss-tab {
    fill: #01754b;
}
@media (prefers-reduced-motion: reduce) {
    .maison-energy-start-service-doc-svg .ss-snake { transition: none; }
}
.maison-energy-start-service-glyph {
    flex: none;
    width: 20px;
    height: 20px;
    opacity: 1;
}
#maison-energy-start-service-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--me-ss-type);
    caret-color: var(--me-ss-amber-deep);
    letter-spacing: 0em;
    padding: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}
#maison-energy-start-service-input::placeholder { color: #000000; font-weight: 300; }
/* Kill the global autofill 1px #d6dbe8 ring — on iOS it clips to a vertical
   line on the left of this field (parent is overflow:hidden). Keep the white
   inset so Safari's yellow autofill wash doesn't show. */
#maison-energy-start-service-input:autofill,
#maison-energy-start-service-input:autofill:hover,
#maison-energy-start-service-input:autofill:focus,
#maison-energy-start-service-input:autofill:active,
#maison-energy-start-service-input:-webkit-autofill,
#maison-energy-start-service-input:-webkit-autofill:hover,
#maison-energy-start-service-input:-webkit-autofill:focus,
#maison-energy-start-service-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    border: 0 !important;
    background-clip: border-box !important;
}

/* Loading spinner on the right of the search box — same look as the button
   spinners (18px green ring). Uses the global `spin` keyframes from styles.css.
   Hidden until a lookup is in flight. */
.maison-energy-start-service-spinner {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(1, 117, 75, .25);
    border-top-color: #01754b;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
}
#maison-energy-start-service-layer-search[data-loading="1"] .maison-energy-start-service-spinner { display: block; }

#maison-energy-start-service-layer-info {
    padding: 20px 20px 20px;
    overflow: hidden;
}
#maison-energy-start-service-layer-info[data-off="1"] { transform: translateY(8px); }
.maison-energy-start-service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgb(16 31 42 / 90%);
}
.maison-energy-start-service-addr {
    margin: 10px 0 2px;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0em;
}
.maison-energy-start-service-addr-unit {
    margin: 1px 0 2px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0em;
}
.maison-energy-start-service-sub {
    font-size: 14px;
    color: rgb(16 31 42);
    font-weight: 300;
}
.maison-energy-start-service-tag {
    display: inline-block; margin-top: 12px; padding: 4px 9px 3px;
    background: var(--me-ss-tint); border: 1px solid var(--me-ss-edge);
    border-radius: 3px; font-family: 'Roboto', sans-serif;
    font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #7A5205;
}
.maison-energy-start-service-facts { margin: 15px 0 0; border-top: 1px solid var(--me-ss-hair); }
.maison-energy-start-service-fact {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 8px 0 7px; border-bottom: 1px solid var(--me-ss-hair);
    opacity: 0; transform: translateY(5px);
}
#maison-energy-start-service-layer-info[data-in="1"] .maison-energy-start-service-fact { opacity: 1; transform: none; transition: opacity .3s ease, transform .3s var(--me-ss-ease); }
.maison-energy-start-service-fact dt {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgb(16 31 42 / 75%);
    flex: none;
}
.maison-energy-start-service-fact dd {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.maison-energy-start-service-coords {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    letter-spacing: .05em;
    color: rgb(16 31 42 / 69%);
}
.maison-energy-start-service-close {
    flex: none; width: 26px; height: 26px; margin: -5px -5px -5px 0;
    display: grid; place-items: center; border: 0; border-radius: 5px;
    background: transparent; color: var(--me-ss-muted); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.maison-energy-start-service-close:hover { background: var(--me-ss-tint); color: var(--me-ss-type); }

/* dropdown --------------------------------------------------------- */
#maison-energy-start-service-list {
    height: 0; overflow-y: hidden; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 10px 10px 10px 10px;
    border-top: 1px solid transparent;
    opacity: 0; pointer-events: none;
    transition: opacity .16s ease, height .3s var(--me-ss-ease), border-color .16s ease;
}
#maison-energy-start-service-list[data-open="1"] { border-top-color: var(--me-ss-hair); }
#maison-energy-start-service-list[data-open="1"] { opacity: 1; pointer-events: auto; overflow-y: auto; }
.maison-energy-start-service-row {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
    padding: 10px 10px; border: 0; border-radius: 15px; background: transparent;
    cursor: pointer; font-family: inherit; color: inherit;
    opacity: 0; transform: translateY(6px);
}
#maison-energy-start-service-list[data-open="1"] .maison-energy-start-service-row { opacity: 1; transform: none; transition: opacity .26s ease, transform .3s var(--me-ss-ease), background .12s ease; }
.maison-energy-start-service-row + .maison-energy-start-service-row { margin-top: 3px; }
.maison-energy-start-service-row:hover,
.maison-energy-start-service-row[aria-selected="true"] { background: var(--me-ss-tint); }

.maison-energy-start-service-rdot {
    flex: none; width: 15px; height: 18px; margin-top: 2px;
    color: #097951; /* lightning stroke via currentColor — green for active */
}
.maison-energy-start-service-rdot svg { display: block; width: 100%; height: 100%; }
.maison-energy-start-service-rdot.maison-energy-start-service-off { color: #b1b7c5; } /* gray for de-energized */
.maison-energy-start-service-rbody { flex: 1; min-width: 0; }
.maison-energy-start-service-rt {
    display: block;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.maison-energy-start-service-rs {
    display: block;
    margin-top: 2px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    letter-spacing: 0em;
    color: rgb(16 31 42 / 85%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.maison-energy-start-service-row mark { background: transparent; color: #000000; font-weight: 400; }
/* no visible scrollbar; the list still scrolls by wheel/touch/keys */
#maison-energy-start-service-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
#maison-energy-start-service-list { scrollbar-width: none; -ms-overflow-style: none; }
.maison-energy-start-service-empty {
    padding: 5px 15px 5px;
    font-size: 14px;
    color: var(--me-ss-muted);
    line-height: unset;
    font-weight: 300;
    text-align: center;
}
.maison-energy-start-service-empty b { display: block; color: var(--me-ss-type); font-weight: 400; margin-bottom: 3px; }

/* pin + tether ----------------------------------------------------- */
#maison-energy-start-service-pin { position: absolute; z-index: 15; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; }
#maison-energy-start-service-pin[data-on="1"] { opacity: 1; }
.maison-energy-start-service-pin-in {
    position: absolute;
    left: -8px;
    top: -8px;
    width: 18px;
    height: 18px;
    transform: translateY(-26px) scale(.4);
    opacity: 0;
}
#maison-energy-start-service-pin[data-on="1"] .maison-energy-start-service-pin-in { transform: none; opacity: 1; transition: transform .62s cubic-bezier(.2, 1.5, .45, 1), opacity .2s ease; }
.maison-energy-start-service-pin-dot {
    position: absolute;
    left: 1px;
    top: 1px;
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 0px;
    border-radius: 50%;
    border: 2px solid #01754B;
    background: #FFFFFF;
}
.maison-energy-start-service-pin-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    opacity: 0;
}
#maison-energy-start-service-pin[data-on="1"] .maison-energy-start-service-pin-ring { animation: maison-energy-start-service-ring 2.6s ease-out .45s infinite; }
@keyframes maison-energy-start-service-ring { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(4.6); opacity: 0; } }
#maison-energy-start-service-tether {
    position: absolute; z-index: 14; width: 0;
    border-left: 1px dashed #adb0b9;
    transform-origin: top center; transform: scaleY(0); opacity: 0;
}
#maison-energy-start-service-tether[data-on="1"] { transform: scaleY(1); opacity: 1; transition: transform .4s var(--me-ss-ease) .06s, opacity .2s ease; }

#start-service-section :focus-visible { outline: 2px solid var(--me-ss-amber); outline-offset: 2px; }
#maison-energy-start-service-input:focus-visible,
#maison-energy-start-service-input:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { #start-service-section * { transition-duration: .01ms !important; animation: none !important; } }