:root {
    --ga-autocomplete-location-icon-color: var(--brand-primary);
    --ga-autocomplete-location-icon-margin-top: -3px;
    --ga-autocomplete-location-icon-margin-right:5px
}

.ga-autocomplete-list mark {
    background-color: transparent;
    padding: 0;
    font-weight: unset;
    color: inherit;
}
.ga-autocomplete-anchored-list-item mark {
    
    color: var(--brand-primary);
    font-weight: 600;
}

.ga-autocomplete-anchored-list-item b mark {
    color: var(--bs-body-color);
    font-weight: bold;
}

/*Footer -------------------------------------------------------------------*/
footer a {
    text-decoration: none;
    transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
}

footer ul {
    list-style: none;
}

footer li {
    padding-bottom: 5px
}
/*End Footer -------------------------------------------------------------------*/

/*Json Viewer ------------------------------------------------------------------*/

/* The viewer is always rendered inside a panel that draws the frame (.hero-json-panel and the
   demo's result box). The theme styles every `pre` with its own 1px border, 8px radius and drop
   shadow, so without these resets the panel's frame and the pre's frame stack up as a double
   border. The shadow matters as much as the border: the pre is only as tall as its content inside
   a fixed-height panel, so a leftover shadow draws a second, shorter card. The frame belongs to
   the container. */
.json-viewer {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

    .json-viewer .string {
        color: green;
    }

    .json-viewer .number {
        color: darkorange;
    }

    .json-viewer .boolean {
        color: blue;
    }

    .json-viewer .null {
        color: magenta;
    }

    .json-viewer .key {
        color: red;
    }

/* The hero's response panel. Fixed height so the panel doesn't jump as responses change size
   while typing; sized to show most of a full /get address, scrolling for the rest. */
.hero-json-panel {
    background-color: #fff;
    color: #000;
    padding: 15px;
    border: 1px solid #e2e5f1;
    border-radius: .5rem;
    height: 40rem;
    overflow: auto;
}

    /* One JSON value per line, as the API sends it: a long address label scrolls sideways rather
       than wrapping onto a second line. */
    .hero-json-panel .json-viewer {
        white-space: pre;
        word-break: normal;
    }


/*End Json Viewer --------------------------------------------------------------*/
.getAddress_autocomplete_modal_icon_location {
    color: var(--brand-primary);
}
/* Content pages -------------------------------------------------------------

   Terms, Privacy, Checkout and the about page were marked up with
   `documentation-section-mast` / `documentation-container`, which are defined in
   NO stylesheet in this solution (nor in the UK site they were carried over
   from) — they are inert class names. That was survivable on a layout with a
   static header; ours is `position-absolute` and reserves no vertical space, so
   the page title rendered underneath the logo. The inline `margin-top:70px`
   those pages carried was someone patching the same symptom by hand.

   These two rules give the pattern a real definition rather than deleting it
   from four files: the mast clears the header and separates the title, and the
   container keeps body copy at a readable measure. */
.content-section-mast {
    padding-top: 8rem;
    padding-bottom: 1.5rem;
    background-color: #f6f6f9;
}

@media (max-width: 575.98px) {
    .content-section-mast {
        padding-top: 6.5rem;
    }
}

.content-container {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

/* Terms and the privacy policy are long prose. Left to the container's full width they set at
   well over 100 characters a line, which is past the point where the eye reliably finds the next
   line. Capped at a normal reading measure instead. */
.content-container .content-article {
    max-width: 44rem;
}

.content-container .content-article p,
.content-container .content-article li {
    color: #4a4b65;
    line-height: 1.7;
}

.content-container .content-article h3 {
    margin-top: 2rem;
    margin-bottom: .75rem;
}

/* Pricing cards -------------------------------------------------------------

   Each card used to sit inside `ratio ratio-16x9` — a Bootstrap helper for
   embedded media, which absolutely positions its child and stretches it to a
   fixed aspect box. On top of that the card carried min-height:600px and the
   swiper min-height:650px. The result was a card far taller than its content,
   with card-body growing to fill it and the button stranded at the bottom
   behind ~150px of nothing. All three are gone; these two rules replace them.

   Swiper sets an equal height on slides only when told to; `height: auto` lets
   the flex row stretch every slide to the tallest, and `h-100` on the card
   fills that height. So cards in a view match each other and no card is taller
   than the content of the biggest plan. */
.pricing-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.pricing-swiper .swiper-slide > .card {
    width: 100%;
    min-width: 0;
}

/* Lets a flex child narrow below its content, so text-truncate inside it can take effect. */
.min-w-0 {
    min-width: 0;
}

/* The numbered steps in the libraries section. */
.demo-step {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--brand-primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* The libraries section's previews. A fixed height so switching tabs doesn't make the page jump. */
.library-demo-body {
    height: 468px;
}

.library-code {
    height: 468px;
    overflow: auto;
    font-size: .8125rem;
}

/* The JSON answer under the Adresser and Reverse previews: the frame the .json-viewer resets expect. */
.library-json-panel {
    background-color: #fff;
    color: #000;
    padding: 12px 15px;
    border: 1px solid #e2e5f1;
    border-radius: .5rem;
    overflow: auto;
    min-height: 0;
    font-size: .8125rem;
}

    .library-json-panel .json-viewer {
        white-space: pre;
        word-break: normal;
    }

/* dawa-autocomplete2's suggestion list (its own class names, which the plugin renders under the
   input), in the brand's colours. The Vejnavne preview reuses the same classes for its list. */
.dawa-autocomplete-container {
    position: relative;
}

.dawa-autocomplete-suggestions {
    margin: .25rem 0 0 0;
    padding: 0;
    text-align: left;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .12);
    border: 1px solid #e2e5f1;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1030;
    max-height: 18rem;
    overflow-y: auto;
}

    .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion {
        margin: 0;
        list-style: none;
        cursor: pointer;
        padding: .5rem .75rem;
        color: #3e4265;
        font-size: .875rem;
        border-bottom: 1px solid #f0f1f6;
    }

        .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:last-child {
            border-bottom: 0;
        }

        .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion.dawa-selected,
        .dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:hover {
            background: var(--brand-primary);
            color: #fff;
        }