:root {
    /* Site buttons sit at 3px; this rounds a touch further without going soft.
       Set to 999px if the launcher should read as a round chat bubble. */
    --hbe-contact-radius: 6px;
    --hbe-contact-edge: 1.5rem;

    /* --hbe-purple sits too close to --brand-purple to read as a state change,
       so the hover tone is its own knob. Tune here, not per-button. */
    --hbe-contact-accent: var(--brand-primary);
    --hbe-contact-accent-hover: #443e7d;

    /* The one red in the panel. Field messages and the submission summary share
       it so an error reads as one thing in two places, not two problems. */
    --hbe-contact-error: #b3261e;

    /* Lives on the panel's children, never on the scroll container itself —
       padding on a scroller is a gutter you can watch content slide through. */
    --hbe-contact-pad: 1.75rem;
}

.hbe-contact-launcher {
    position: fixed;
    inset-block-end: var(--hbe-contact-edge);
    inset-inline-end: var(--hbe-contact-edge);
    z-index: 99998;

    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 0.875rem 1.25rem;
    border: 0;
    border-radius: var(--hbe-contact-radius);

    background: var(--hbe-contact-accent);
    color: #fff;
    font: inherit;
    text-align: start;
    cursor: pointer;

    box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
    transition:
        background-color 150ms ease,
        box-shadow 150ms ease,
        translate 150ms ease,
        opacity 150ms ease;

    &:hover,
    &:focus-visible {
        background: var(--hbe-contact-accent-hover);
        box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
        translate: 0 -2px;
    }

    &:focus-visible {
        outline: 3px solid var(--hbe-green);
        outline-offset: 3px;
    }
}

.hbe-contact-launcher__icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
}

.hbe-contact-launcher__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.hbe-contact-launcher__label {
    font-weight: 600;
}

.hbe-contact-launcher__note {
    font-size: 0.75rem;
    opacity: 0.85;
}

.hbe-contact-panel {
    margin: auto var(--hbe-contact-edge) var(--hbe-contact-edge) auto;
    inline-size: min(26rem, calc(100vw - (var(--hbe-contact-edge) * 2)));
    /* Taller than it needs to be on most screens — every rem here is a rem
       nobody has to scroll for. */
    max-block-size: min(46rem, calc(100dvh - (var(--hbe-contact-edge) * 2)));

    padding: 0;
    border: 0;
    border-radius: var(--hbe-contact-radius);

    background: #fff;
    color: inherit;
    box-shadow: 0 8px 40px rgb(0 0 0 / 25%);
    overflow: hidden;

    /* Closed/exit state. display and overlay must transition too, or the panel
       is yanked out of the top layer before the fade finishes. */
    opacity: 0;
    translate: 0 1rem;

    transition-property: opacity, translate, display, overlay;
    transition-duration: 220ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
    transition-behavior: allow-discrete;

    &[open] {
        opacity: 1;
        translate: 0 0;

        @starting-style {
            opacity: 0;
            translate: 0 1rem;
        }
    }

    &::backdrop {
        background: rgb(0 0 0 / 0%);
        transition:
            background-color 220ms ease,
            display 220ms allow-discrete,
            overlay 220ms allow-discrete;
    }

    &[open]::backdrop {
        background: rgb(0 0 0 / 35%);

        @starting-style {
            background: rgb(0 0 0 / 0%);
        }
    }
}

.hbe-contact-panel__inner {
    position: relative;
    max-block-size: inherit;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Lets the pinned header and footer know whether anything is actually
       scrolled past them — see the scroll-state queries at the end of the file. */
    container-type: scroll-state;
}

/* Sits on the dialog, not inside the scroll area, so it can't scroll away. */
.hbe-contact-panel__close {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    z-index: 2;

    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;

    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;

    &:hover,
    &:focus-visible {
        opacity: 1;
    }

    &:focus-visible {
        outline: 2px solid var(--hbe-contact-accent);
        outline-offset: 2px;
    }

    svg {
        inline-size: 1.25rem;
        block-size: 1.25rem;
    }
}

/* Pinned like the footer. Without this, fields get sliced by the panel's top
   edge as they scroll past — content should pass under a surface, not off a
   cliff. */
.hbe-contact-panel__title {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;

    margin: 0 0 0.75rem;
    padding: var(--hbe-contact-pad) 3.5rem 0.75rem var(--hbe-contact-pad);

    background: #fff;
    font-size: 1.375rem;
    transition: box-shadow 150ms ease;
}

.hbe-contact-panel__note {
    margin: 0 0 1.5rem;
    padding-inline: var(--hbe-contact-pad);
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.8;
}

.hbe-contact-panel__phone {
    /* Its own row, centred under the button. Submit renders full width, so
       there was never a gap beside it to sit in — right-aligning it just hung
       it off the corner. */
    flex: 1 1 100%;
    margin: 0;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.35;
    opacity: 0.8;

    a {
        color: var(--hbe-contact-accent);
        /* Keeps real hyphens for copy-paste and dialers, unlike U+2011. */
        white-space: nowrap;
    }
}

/* Placeholder rows shown until GF finishes initialising the form. */
.hbe-contact-panel__skeleton {
    display: none;
    gap: 1.25rem;
    padding-inline: var(--hbe-contact-pad);

    span {
        display: block;
        block-size: 3.25rem;
        border-radius: var(--hbe-contact-radius);
        background: linear-gradient(90deg, #ececec 25%, #f6f6f6 37%, #ececec 63%);
        background-size: 400% 100%;
        animation: hbe-contact-shimmer 1.4s ease infinite;
    }
}

.hbe-contact-panel__skeleton--tall {
    block-size: 7rem;
}

.hbe-contact-panel.is-loading .hbe-contact-panel__skeleton {
    display: grid;
}

.hbe-contact-panel.is-loading .gform_wrapper {
    display: none;
}

@keyframes hbe-contact-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

/* Fields */
.hbe-contact-panel .gform_fields {
    display: grid;
    gap: 1.25rem;
    padding-inline: var(--hbe-contact-pad);
}

.hbe-contact-panel .gfield_label {
    display: block;
    margin-block-end: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.hbe-contact-panel .gfield_required_text {
    font-weight: 400;
    font-style: normal;
    font-size: 0.8125rem;
    /* GF ships this red and italic, which reads as an error before you've done
       anything wrong. Red is reserved for actual validation messages. */
    color: inherit;
    opacity: 0.6;
}

.hbe-contact-panel .ginput_container input[type='text'],
.hbe-contact-panel .ginput_container input[type='email'],
.hbe-contact-panel .ginput_container input[type='tel'],
.hbe-contact-panel .ginput_container textarea,
.hbe-contact-panel .ginput_container select {
    inline-size: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgb(0 0 0 / 18%);
    border-radius: var(--hbe-contact-radius);
    background: #fff;
    font: inherit;

    &:focus {
        outline: 2px solid var(--hbe-contact-accent);
        outline-offset: -1px;
        border-color: transparent;
    }
}

/* The topic dropdown keeps its native arrow — one less thing to draw, and it's
   the affordance people already know. Height comes from the shared padding
   above, so it lines up with the text fields either side of it. */
#hbe-contact-panel .ginput_container select {
    /* Divi sizes selects off a line-height that doesn't match our padding. */
    block-size: auto;
    line-height: 1.35;
    cursor: pointer;
}

/* Choice rows read as one tappable row each, not a bare list. The topic field
   is a dropdown now; this still covers any checkbox or radio left on form 94. */
.hbe-contact-panel fieldset.gfield {
    margin: 0;
    padding: 0;
    border: 0;
}

.hbe-contact-panel .gfield_radio {
    display: grid;
    gap: 1px;
}

.hbe-contact-panel .gchoice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--hbe-contact-radius);
    transition: background-color 120ms ease;

    &:hover {
        background: rgb(0 0 0 / 4%);
    }

    /* The whole row lights up, so the hit target matches what you see. */
    &:has(input:checked) {
        background: rgb(99 94 167 / 10%);
    }
}

.hbe-contact-panel .gfield-choice-input {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0;
    accent-color: var(--hbe-contact-accent);
}

.hbe-contact-panel .gchoice label {
    margin: 0;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
}

.hbe-contact-panel .gfield_validation_message,
.hbe-contact-panel .validation_message {
    margin-block-start: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.8125rem;
    color: var(--hbe-contact-error);
}

/* GF wraps the submission summary in a red-bordered, rounded, tinted box that
   shouts louder than the fields it's pointing at — and the fields already mark
   themselves. Strip the box; the icon and the red carry it, whitespace does the
   separating.

   These three go through #hbe-contact-panel rather than the class. GF's own
   rules are prefixed .gform_wrapper.gravity-theme, which outranks a two-class
   selector — same reason the submit button below is scoped by id. */
#hbe-contact-panel .gform_validation_errors {
    margin: 0 0 1.5rem;
    padding: 0 var(--hbe-contact-pad);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

#hbe-contact-panel .gform_submission_error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    /* GF pads the heading to clear the absolutely-positioned icon. */
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    color: var(--hbe-contact-error);
}

/* GF positions this icon absolutely against the box we just removed. */
#hbe-contact-panel .gform_submission_error .gform-icon {
    position: static;
    flex: none;
    inset: auto;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
}

/* Divi themes every submit button in reach, which is where the green-on-purple
   came from. Scoped to the panel so it wins on specificity without !important. */
/* Pinned to the bottom of the scroll area. Nobody scrolls a panel they can't
   tell is scrollable, so the action stays put and the fields move under it —
   the shadow is what tells you there's more above. */
.hbe-contact-panel .gform_footer {
    position: sticky;
    inset-block-end: 0;
    z-index: 1;

    margin: 1.5rem 0 0;
    padding: 1rem var(--hbe-contact-pad);

    /* Submit and the phone number sit side by side, stacking on their own when
       the panel is too narrow — no breakpoint needed. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;

    background: #fff;
    transition: box-shadow 150ms ease;
}

.hbe-contact-panel #gform_submit_button_94 {
    flex: 0 0 auto;
    min-inline-size: 8rem;
    padding: 0.875rem 1.5rem;

    border: 0;
    border-radius: var(--hbe-contact-radius);

    background: var(--hbe-contact-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;

    transition: background-color 150ms ease;

    &:hover:not(:disabled),
    &:focus-visible {
        background: var(--hbe-contact-accent-hover);
    }

    &:focus-visible {
        outline: 3px solid var(--hbe-green);
        outline-offset: 2px;
    }

    &:disabled {
        opacity: 0.6;
        cursor: default;
    }

    /* Divi hangs a pseudo-element arrow off buttons it recognises. */
    &::after {
        content: none;
    }
}

/* The brief calls for a label swap, not a spinner. */
.hbe-contact-panel .gform_ajax_spinner {
    display: none;
}

.hbe-contact-panel .gform_confirmation_message {
    padding: 0 var(--hbe-contact-pad) var(--hbe-contact-pad);
}

.hbe-contact-panel .charleft {
    display: block;
    margin-block-start: 0.375rem;
    font-size: 0.8125rem;
    opacity: 0.7;
}

/* Insurance-branch deflect (form 94 HTML field). */
.hbe-contact-deflect {
    margin: 1.5rem 0;

    p {
        margin: 0 0 0.75rem;
    }
}

.hbe-contact-deflect__cta {
    font-size: 1.5rem;
    font-weight: 600;

    a {
        text-decoration: none;
    }
}

.hbe-contact-deflect__hours {
    font-size: 0.875rem;
    opacity: 0.75;
    margin-block-end: 0;
}

/* Confirmation (form 94 confirmation message). */
.hbe-contact-success {
    p {
        margin: 0 0 0.75rem;
    }
}

.hbe-contact-success__title {
    margin: 0 0 0.75rem;
    font-size: 1.375rem;
}

.hbe-contact-success__cta {
    font-size: 1.25rem;
    font-weight: 600;

    a {
        text-decoration: none;
    }
}

.hbe-contact-success__hours {
    font-size: 0.875rem;
    opacity: 0.75;
}

.hbe-contact-success__close {
    margin-block-start: 1rem;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: var(--hbe-contact-radius);
    background: var(--hbe-contact-accent);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: background-color 150ms ease;

    &:hover,
    &:focus-visible {
        background: var(--hbe-contact-accent-hover);
    }

    &:focus-visible {
        outline: 3px solid var(--hbe-green);
        outline-offset: 2px;
    }
}

/* showModal() puts the dialog in the top layer but leaves the page scrollable. */
body:has(.hbe-contact-panel[open]) {
    overflow: hidden;
}

/* The assistance prompt is a plain div at z-index 10000, not a dialog, so it
   gets no top layer to hide the launcher behind — the launcher would float over
   its dim backdrop offering the same thing the prompt is offering. */
body:has(.assistance-modal-show) .hbe-contact-launcher {
    opacity: 0;
    pointer-events: none;
}

@media (width <= 40rem) {
    .hbe-contact-launcher__note {
        display: none;
    }

    .hbe-contact-panel {
        margin: 0;
        /* Not 100vw — that counts the scrollbar and overflows sideways. */
        inline-size: 100%;
        max-block-size: 100dvh;
        block-size: 100dvh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hbe-contact-panel__skeleton span {
        animation: none;
    }

    .hbe-contact-launcher {
        transition: none;

        &:hover,
        &:focus-visible {
            translate: none;
        }
    }

    /* Keep the fade so the panel doesn't pop, but drop the movement. */
    .hbe-contact-panel {
        translate: none;
        transition-duration: 100ms;
    }

    @starting-style {
        .hbe-contact-panel[open] {
            translate: none;
        }
    }
}

/* The pinned header and footer only cast a shadow when something is actually
   hidden behind them. A shadow with nothing under it just reads as a stray
   line. Browsers without scroll-state queries get no shadow, which is the
   right way to fail here — the surfaces still do their job. */
@container scroll-state(scrollable: top) {
    .hbe-contact-panel__title {
        box-shadow: 0 10px 12px -12px rgb(0 0 0 / 16%);
    }
}

@container scroll-state(scrollable: bottom) {
    .hbe-contact-panel .gform_footer {
        box-shadow: 0 -10px 12px -12px rgb(0 0 0 / 16%);
    }
}