/* booking-form.css — the booking form only.
   Additive: loaded by booking.php alone, so nothing else on the site changes. */


/* ============================================================
   FIELD WITH A LEADING ICON
   ============================================================ */

.bf-field {
    position: relative;
    margin-bottom: 18px;
}

.bf-field > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 7px;
    color: var(--black);
}

.bf-field > label .req {
    color: #c62828;
}

.bf-field > label .opt {
    color: var(--gray-mid);
    font-weight: 500;
}

.bf-input-wrap {
    position: relative;
}

.bf-input-wrap > .bf-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--gray-mid);
    pointer-events: none;
    line-height: 1;
    z-index: 3;
}

.bf-input-wrap .form-control {
    padding-left: 42px;
}

.bf-input-wrap .form-control:focus + .bf-ico,
.bf-input-wrap .form-control:not(:placeholder-shown) + .bf-ico {
    color: var(--yellow-dark);
}


/* ============================================================
   GOOGLE PLACE AUTOCOMPLETE
   PICKUP / DROP INPUT
   ============================================================ */

.google-place-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    background: #ffffff !important;
    border-radius: 9px;
}

.google-place-autocomplete,
.bw gmp-place-autocomplete {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    background: #ffffff !important;
    color: #222222 !important;

    /*
     * Important for mobile browsers and dark-mode browsers.
     * Prevents the Google input from becoming black.
     */
    color-scheme: light !important;

    border-radius: 9px !important;

    /*
     * Google Places component variables.
     */
    --gmpx-color-surface: #ffffff !important;
    --gmpx-color-on-surface: #222222 !important;
    --gmpx-color-on-surface-variant: #666666 !important;
    --gmpx-color-primary: #1a73e8 !important;
}


/* Pickup specifically */
.bw .bf-google-from {
    background: #ffffff !important;
    color: #222222 !important;
    color-scheme: light !important;
}


/* Drop specifically */
.bw .bf-google-to {
    background: #ffffff !important;
    color: #222222 !important;
    color-scheme: light !important;
}


/*
 * Keep the Google component inside the same visual field.
 */
.bw .bf-route .google-place-wrap {
    background: #ffffff !important;
    border-radius: 9px;
    overflow: hidden;
}


/* ============================================================
   HIDDEN PHP FIELDS
   ============================================================ */

.google-place-wrap .bf-from,
.google-place-wrap .bf-to {
    display: none !important;
}


/* ============================================================
   FROM ⇄ TO ROW
   ============================================================ */

.bf-route {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.bf-route .bf-field {
    margin-bottom: 0;
}


/* ============================================================
   SWAP BUTTON
   ============================================================ */

.bf-swap {
    width: 44px;
    height: 46px;
    margin-bottom: 1px;

    border: 2px solid var(--gray-light);
    background: var(--white);

    border-radius: 50%;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    color: var(--gray-mid);

    transition: all var(--transition);
    justify-self: center;
}

.bf-swap:hover {
    border-color: var(--yellow);
    background: var(--yellow);
    color: var(--black);
}

.bf-swap.spin {
    transform: rotate(180deg);
}


/* ============================================================
   AUTOCOMPLETE DROPDOWN
   ============================================================ */

.ac-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;

    background: var(--white);
    border: 2px solid var(--gray-light);
    border-radius: 12px;

    box-shadow: var(--shadow-lg);

    max-height: 280px;
    overflow-y: auto;
    display: none;
}

.ac-list.show {
    display: block;
}

.ac-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

    width: 100%;
    padding: 11px 15px;

    border: 0;
    background: none;

    text-align: left;
    cursor: pointer;

    font: inherit;

    border-bottom: 1px solid var(--gray-light);
}

.ac-item:last-child {
    border-bottom: none;
}

.ac-item:hover,
.ac-item.is-active {
    background: rgba(197, 245, 0, 0.12);
}

.ac-main {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--black);
}

.ac-sub {
    font-size: 12px;
    color: var(--gray-mid);
    width: 100%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-tag {
    background: var(--yellow);
    color: var(--black);

    font-size: 10.5px;
    font-weight: 800;

    padding: 2px 8px;

    border-radius: 20px;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ============================================================
   RETURN DATE
   ============================================================ */

.bf-return {
    display: none;
}

.bf-return.show {
    display: block;
    animation: bfSlide 0.25s ease;
}

@keyframes bfSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* ============================================================
   SMALL HELPER NOTE
   ============================================================ */

.bf-note {
    font-size: 12.5px;
    color: var(--gray-mid);

    margin-top: 6px;

    display: block;
    min-height: 18px;
}


/* ============================================================
   TWO COLUMN ROWS
   ============================================================ */

.bf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .bf-swap,
    .bf-return.show {
        transition: none;
        animation: none;
    }

}


/* ============================================================
   WIDGET WRAPPER
   ============================================================ */

.bw {
    position: relative;
}


/* ============================================================
   CARD
   ============================================================ */

.bw--card {
    background: var(--white);
    border: 2px solid var(--gray-light);
    border-radius: var(--radius-lg);
    padding: 26px;
}


/* ============================================================
   PLAIN
   ============================================================ */

.bw--plain {
    padding: 0;
}


/* ============================================================
   DARK
   ============================================================ */

.bw--dark {
    background: var(--black);
    border-radius: var(--radius-lg);
    padding: 26px;
    position: relative;
    overflow: hidden;
}

.bw--dark::before {
    content: '';
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 70% 20%,
            rgba(197, 245, 0, 0.14) 0%,
            transparent 60%
        );
}

.bw--dark > * {
    position: relative;
}

.bw--dark .bw-title {
    color: var(--white);
}

.bw--dark .bw-sub {
    color: rgba(255,255,255,0.6);
}

.bw--dark .bf-field > label {
    color: rgba(255,255,255,0.85);
}

.bw--dark .bf-field > label .opt {
    color: rgba(255,255,255,0.45);
}

.bw--dark .bw-foot {
    color: rgba(255,255,255,0.45);
}

.bw--dark .trip-tabs {
    background: rgba(255,255,255,0.08);
}

.bw--dark .trip-tab {
    color: rgba(255,255,255,0.6);
}

.bw--dark .trip-tab.active {
    background: var(--yellow);
    color: var(--black);
}

.bw--dark .bf-swap {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: var(--white);
}

.bw--dark .bf-swap:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--black);
}

.bw--dark .bf-note {
    color: rgba(255,255,255,0.5);
}


/* ============================================================
   TITLE
   ============================================================ */

.bw-title {
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 700;

    margin: 0 0 4px;

    display: flex;
    align-items: center;
    gap: 9px;
}

.bw-title i {
    color: var(--yellow-dark);
}

.bw--dark .bw-title i {
    color: var(--yellow);
}


/* ============================================================
   SUBTITLE
   ============================================================ */

.bw-sub {
    font-size: 13.5px;
    color: var(--gray-mid);

    margin: 0 0 18px;
    line-height: 1.55;
}


/* ============================================================
   FOOTER
   ============================================================ */

.bw-foot {
    font-size: 12px;
    color: var(--gray-mid);

    text-align: center;
    margin: 12px 0 0;
}


/* ============================================================
   COMPACT
   ============================================================ */

.bw--compact .bf-field {
    margin-bottom: 12px;
}

.bw--compact .bf-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bw--compact .bf-route {
    grid-template-columns: 1fr;
    gap: 6px;
}

.bw--compact .bf-swap {
    justify-self: flex-end;
    margin: -2px 6px;

    width: 36px;
    height: 36px;

    transform: rotate(90deg);
}

.bw--compact .bf-swap.spin {
    transform: rotate(270deg);
}

.bw--compact .bw-sub {
    display: none;
}


/* Prevent dropdown clipping */
.bw .ac-list {
    z-index: 80;
}


/* ============================================================
   WIDE LAYOUT
   ============================================================ */

.bw--wide {
    max-width: 1080px;
    margin-inline: auto;
}

.bw--wide .bf-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 4px 18px;

    align-items: start;
}

.bw--wide .bf-grid .bf-row {
    display: contents;
}

.bw--wide .bf-route {
    grid-column: span 2;

    display: grid;
    grid-template-columns: 1fr 46px 1fr;

    gap: 10px;
    align-items: end;

    margin-bottom: 18px;
}

.bw--wide .bf-route .bf-field {
    margin-bottom: 0;
}

.bw--wide .bf-swap {
    margin-bottom: 1px;
}

.bw--wide .bf-return {
    grid-column: auto;
}

.bw--wide .trip-tabs {
    max-width: 520px;
    margin-inline: auto;
    margin-bottom: 22px;
}

.bw--wide .bw-title,
.bw--wide .bw-sub {
    text-align: center;
}

.bw--wide .bw-sub {
    max-width: 560px;
    margin-inline: auto;
}

.bw--wide .btn[type="submit"] {
    max-width: 340px;
    margin: 6px auto 0;
    display: flex;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .bw--wide .bf-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .bw--wide .bf-route {
        grid-column: span 2;
    }

}


/* ============================================================
   WIDE MOBILE
   ============================================================ */

@media (max-width: 620px) {

    .bw--wide {
        max-width: none;
    }

    .bw--wide .bf-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bw--wide .bf-route {
        grid-column: auto;

        grid-template-columns: 1fr;

        gap: 6px;

        margin-bottom: 18px;
    }

    .bw--wide .bf-route .bf-field {
        margin-bottom: 0;
    }

    .bw--wide .bf-swap {
        justify-self: flex-end;

        margin: -2px 6px;

        width: 38px;
        height: 38px;

        transform: rotate(90deg);
    }

    .bw--wide .bf-swap.spin {
        transform: rotate(270deg);
    }

    .bw--wide .btn[type="submit"] {
        max-width: none;
    }

}


/* ============================================================
   BOOKING STRIP
   ============================================================ */

.booking-strip {
    background: var(--off-white);

    padding: 40px 0;

    position: relative;
    z-index: 5;
}

.booking-strip .bw--card {
    box-shadow: var(--shadow-lg);

    border-color: transparent;

    max-width: 1080px;

    margin-inline: auto;
}

.booking-strip--top {
    background: transparent;
    padding: 28px 0 8px;
}

.booking-strip + .section {
    padding-top: 56px;
}


/* ============================================================
   HERO BOOKING STRIP
   ============================================================ */

.hero-booking-strip {
    position: relative;
    z-index: 5;

    padding: 28px 0 32px;
}

.hero-booking-strip .bw--card {
    box-shadow: var(--shadow-lg);

    border-color: transparent;

    max-width: 1080px;

    margin-inline: auto;
}


/* ============================================================
   HERO + BOOKING STRIP
   ============================================================ */

.hero + .hero-booking-strip,
.hero + .booking-strip {
    margin-top: -56px;
    background: transparent;
}

@media (max-width: 900px) {

    .hero + .hero-booking-strip,
    .hero + .booking-strip {
        margin-top: 0;
    }

    .booking-strip {
        padding: 26px 0;
    }

    .hero-booking-strip {
        padding: 20px 0 24px;
    }

}


/* ============================================================
   CENTRED HERO
   ============================================================ */

.hero--center {
    min-height: auto;
    padding: 64px 0 96px;
}

.hero-center {
    text-align: center;
    max-width: 780px;
    margin-inline: auto;
}

.hero-center .hero-desc {
    margin-left: auto;
    margin-right: auto;
    max-width: 60ch;
}

.hero-center .hero-stats {
    justify-content: center;
    gap: 42px;
}

@media (max-width: 900px) {

    .hero--center {
        padding: 48px 0 40px;
    }

    .hero-center .hero-stats {
        gap: 26px;
    }

}


/* ============================================================
   ROUTE MAP
   ============================================================ */

.bf-map {
    grid-column: 1 / -1;

    margin-bottom: 18px;

    border: 2px solid var(--gray-light);
    border-radius: var(--radius);

    overflow: hidden;

    background: var(--gray-light);

    animation: bfSlide 0.3s ease;
}

.bf-map[hidden] {
    display: none;
}

.bf-map-canvas {
    width: 100%;
    height: 240px;

    background: #e8ecef;
}

@media (max-width: 620px) {

    .bf-map-canvas {
        height: 190px;
    }

}

.bf-map-info {
    display: flex;
    align-items: center;

    gap: 16px;
    flex-wrap: wrap;

    padding: 11px 16px;

    background: var(--black);
}

.bf-map-stat {
    color: var(--yellow);

    font-family: var(--font-head);

    font-weight: 700;
    font-size: 14px;
}

.bf-map-stat:empty {
    display: none;
}

.bf-map-src {
    margin-left: auto;

    color: rgba(255,255,255,0.45);

    font-size: 11.5px;
}

.bf-map-src:empty {
    display: none;
}


/* ============================================================
   MAP PINS
   ============================================================ */

.bf-pin {
    border-radius: 50%;

    border: 3px solid var(--white);

    box-shadow:
        0 2px 6px rgba(0,0,0,0.35);
}

.bf-pin--from {
    background: var(--yellow);
}

.bf-pin--to {
    background: var(--black);
}


/* ============================================================
   LEAFLET
   ============================================================ */

.bf-map .leaflet-container {
    font-family: var(--font-body);
}

.bf-map .leaflet-control-attribution {
    background: rgba(255,255,255,0.85);
    font-size: 10px;
}

.bf-map .leaflet-bar a {
    color: var(--black);
    border-bottom-color: var(--gray-light);
}

.bf-map .leaflet-bar a:hover {
    background: var(--yellow);
}


/* ============================================================
   COMPACT MAP
   ============================================================ */

.bw--compact .bf-map-canvas {
    height: 170px;
}

.bw--compact .bf-map-info {
    padding: 9px 12px;
    gap: 10px;
}

.bw--compact .bf-map-stat {
    font-size: 12.5px;
}


/* ============================================================
   BOOKING CONTAINER
   ============================================================ */

.booking-container--wide {
    max-width: 1120px;
}


/* ============================================================
   FARE BREAKDOWN
   ============================================================ */

.fare-lines {
    margin-top: 12px;

    padding-top: 12px;

    border-top:
        1px dashed var(--gray-light);
}

.fare-lines:empty {
    display: none;
}

.fare-line {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    gap: 12px;

    padding: 6px 0;

    font-size: 13px;

    color: var(--gray-mid);
}

.fare-line span {
    flex: 1;
    line-height: 1.45;
}

.fare-line strong {
    color: var(--black);

    font-weight: 700;

    white-space: nowrap;
}


/* ============================================================
   STARTER SUGGESTIONS
   ============================================================ */

.ac-tag--soft {
    background: var(--gray-light);
    color: var(--gray-mid);
}


/* ============================================================
   PAGE HERO IMAGE
   ============================================================ */

.page-hero--img {
    position: relative;
    overflow: hidden;
}

.page-hero--img::before {
    content: '';

    position: absolute;
    inset: 0;

    background-image: var(--page-hero-img);

    background-size: cover;
    background-position: center;

    opacity: 0.3;
}

.page-hero--img > * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 620px) {

    .booking-strip,
    .hero-booking-strip {
        padding-left: 0;
        padding-right: 0;
    }

    .booking-strip > .container,
    .hero-booking-strip > .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bw--card {
        padding: 14px 13px;
        border-radius: 13px;
    }


    /* --------------------------------------------------------
       HEADINGS
       -------------------------------------------------------- */

    .bw-title {
        font-size: .98rem;
        margin-bottom: 2px;
    }

    .bw-sub {
        display: none;
    }


    /* --------------------------------------------------------
       FIELD SPACING
       -------------------------------------------------------- */

    .bw--wide .bf-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bw .bf-field {
        margin-bottom: 9px;
    }

    .bw .bf-field > label {
        font-size: 11.5px;

        margin-bottom: 3px;

        letter-spacing: .01em;
    }


    /* --------------------------------------------------------
       NORMAL FORM INPUTS
       -------------------------------------------------------- */

    .bw .form-control {
        font-size: 16px;

        padding: 11px 12px;

        border-radius: 9px;

        border-width: 1.5px;

        background: #ffffff !important;
        color: #222222 !important;

        color-scheme: light !important;
    }

    .bw .bf-input-wrap .form-control {
        padding-left: 36px;
    }

    .bw .bf-ico {
        font-size: 14px;
        left: 12px;
    }


    /* ========================================================
       IMPORTANT:
       PICKUP / DROP GOOGLE INPUTS
       WHITE BACKGROUND ON MOBILE
       ======================================================== */

    .bw .bf-route .bf-input-wrap {
        width: 100%;
        background: #ffffff !important;
        color: #222222 !important;

        border-radius: 9px;
    }

    .bw .bf-route .google-place-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        background: #ffffff !important;

        border-radius: 9px;

        overflow: hidden;
    }

    .bw .bf-route .google-place-autocomplete,
    .bw .bf-route gmp-place-autocomplete {
        display: block;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;

        background: #ffffff !important;

        color: #222222 !important;

        color-scheme: light !important;

        border-radius: 9px !important;

        --gmpx-color-surface: #ffffff !important;
        --gmpx-color-on-surface: #222222 !important;
        --gmpx-color-on-surface-variant: #666666 !important;
        --gmpx-color-primary: #1a73e8 !important;
    }

    .bw .bf-google-from,
    .bw .bf-google-to {
        background: #ffffff !important;
        color: #222222 !important;
        color-scheme: light !important;
    }


    /* --------------------------------------------------------
       DATE / TIME
       -------------------------------------------------------- */

    .bw--wide .bf-grid .bf-row {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 9px;
    }


    /* --------------------------------------------------------
       FROM / TO
       -------------------------------------------------------- */

    .bw--wide .bf-route {
        grid-column: auto;

        grid-template-columns: 1fr;

        gap: 4px;

        margin-bottom: 9px;

        position: relative;
    }

    .bw--wide .bf-route .bf-field {
        margin-bottom: 0;
    }


    /* --------------------------------------------------------
       SWAP
       -------------------------------------------------------- */

    .bw--wide .bf-swap {
        justify-self: end;

        margin: -1px 8px;

        width: 34px;
        height: 34px;

        font-size: 12px;

        transform: rotate(90deg);
    }

    .bw--wide .bf-swap.spin {
        transform: rotate(270deg);
    }


    /* --------------------------------------------------------
       TRIP TABS
       -------------------------------------------------------- */

    .bw .trip-tabs {
        flex-wrap: wrap;

        gap: 5px;

        padding: 5px;

        margin-bottom: 12px;
    }

    .bw .trip-tab {
        flex: 1 1 calc(50% - 5px);

        padding: 9px 4px;

        font-size: 12.5px;
    }


    /* --------------------------------------------------------
       SUBMIT BUTTON
       -------------------------------------------------------- */

    .bw--wide .btn[type="submit"] {
        max-width: none;

        padding: 14px 18px;

        font-size: 15.5px;

        margin-top: 3px;
    }


    /* --------------------------------------------------------
       FOOTER
       -------------------------------------------------------- */

    .bw-foot {
        font-size: 11px;
        margin-top: 9px;
    }


    /* --------------------------------------------------------
       SUGGESTIONS
       -------------------------------------------------------- */

    .bw .ac-list {
        max-height: 220px;
    }

    .bw .ac-item {
        padding: 11px 13px;
    }

    .bw .ac-main {
        font-size: 14.5px;
    }


    /* --------------------------------------------------------
       NOTE + MAP
       -------------------------------------------------------- */

    .bw .bf-note {
        font-size: 11px;
    }

    .bf-map-canvas {
        height: 165px;
    }

}


/* ============================================================
   SMALL PHONES — 380px AND UNDER
   ============================================================ */

@media (max-width: 380px) {

    .bw--card {
        padding: 12px 11px;
    }

    .bw .trip-tab {
        font-size: 11.5px;
        padding: 8px 3px;
    }

    .bw .bf-field > label {
        font-size: 11px;
    }

    .bw .form-control {
        padding: 10px 11px;
    }

    .bw .bf-input-wrap .form-control {
        padding-left: 34px;
    }


    /* Keep Pickup / Drop white even on very small phones */
    .bw .google-place-wrap,
    .bw .google-place-autocomplete,
    .bw gmp-place-autocomplete,
    .bw .bf-google-from,
    .bw .bf-google-to {
        background: #ffffff !important;
        color: #222222 !important;
        color-scheme: light !important;
    }

}


/* ============================================================
   LANDSCAPE PHONES / SMALL TABLETS
   ============================================================ */

@media (min-width: 621px) and (max-width: 900px) {

    .bw--wide .bf-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .bw--wide .bf-route {
        grid-column: span 2;
    }

}


/* ============================================================
   PREVENT HORIZONTAL SCROLL
   ============================================================ */

.bw,
.bw .bf-grid,
.bw .bf-field {
    min-width: 0;
}

.bw .form-control {
    max-width: 100%;
}


/* ============================================================
   HOMEPAGE SEO SECTIONS
   ============================================================ */


/* Two column explainer */
.split-block {
    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 48px;

    align-items: center;
}

@media (max-width: 900px) {

    .split-block {
        grid-template-columns: 1fr;
        gap: 32px;
    }

}

.split-text .blk-prose p {
    margin-bottom: 1rem;
}

.split-text .btn {
    margin-top: 10px;
}


/* ============================================================
   ROUND TRIP VS ONE WAY
   ============================================================ */

.compare-card {
    background: var(--black);

    border-radius: var(--radius-lg);

    padding: 30px 28px;

    position: relative;

    overflow: hidden;
}

.compare-card::before {
    content: '';

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 80% 0%,
            rgba(197,245,0,.13),
            transparent 62%
        );
}

.compare-card > * {
    position: relative;
}

.compare-row {
    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px 0;
}

.compare-row + .compare-row {
    border-top: 1px solid rgba(255,255,255,.09);
}

.compare-row > div {
    flex: none;
    width: 148px;
}

.compare-label {
    display: block;

    color: var(--white);

    font-family: var(--font-head);

    font-weight: 700;

    font-size: .98rem;
}

.compare-note {
    display: block;

    color: rgba(255,255,255,.42);

    font-size: 12px;

    margin-top: 2px;
}

.compare-bar {
    flex: 1;

    height: 34px;

    border-radius: 8px;

    background: rgba(255,255,255,.09);

    position: relative;

    overflow: hidden;
}

.compare-bar::after {
    content: '';

    position: absolute;

    inset: 0 auto 0 0;

    width: var(--w, 100%);

    border-radius: 8px;

    animation:
        cmpGrow .9s cubic-bezier(.2,.9,.3,1) both;
}

.compare-row--bad .compare-bar::after {
    background: rgba(255,255,255,.28);
}

.compare-row--good .compare-bar::after {
    background: var(--yellow);
}

@keyframes cmpGrow {
    from {
        width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .compare-bar::after {
        animation: none;
    }

}

.compare-foot {
    margin: 16px 0 0;

    color: rgba(255,255,255,.5);

    font-size: 12.5px;

    line-height: 1.65;
}

.compare-foot i {
    color: var(--yellow);
    margin-right: 5px;
}


/* ============================================================
   CITY CARDS
   ============================================================ */

.city-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(232px, 1fr)
        );

    gap: 20px;
}

.city-card {
    display: block;

    background: var(--white);

    border: 2px solid var(--gray-light);

    border-radius: var(--radius-lg);

    overflow: hidden;

    text-decoration: none;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.city-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-lg);

    border-color: var(--yellow);
}

.city-card-img {
    height: 128px;

    background:
        var(--black)
        center / cover
        no-repeat;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;
}

.city-card-img::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            160deg,
            rgba(197,245,0,.16),
            transparent 60%
        );
}

.city-card-initial {
    font-family: var(--font-head);

    font-size: 2.6rem;

    font-weight: 800;

    color: var(--yellow);

    opacity: .85;
}

.city-card-body {
    padding: 16px 18px 18px;
}

.city-card-body h3 {
    font-family: var(--font-head);

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--black);

    margin: 0 0 3px;
}

.city-card-body p {
    font-size: 12.5px;

    color: var(--gray-mid);

    margin: 0 0 10px;

    line-height: 1.5;
}

.city-card-link {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 12.5px;

    font-weight: 700;

    color: var(--yellow-dark);
}

.city-card:hover .city-card-link i {
    transform: translateX(3px);
}

.city-card-link i {
    transition: transform .18s ease;

    font-size: 11px;
}


/* ============================================================
   KEYWORD LINK BLOCKS
   ============================================================ */

.kw-blocks {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 26px;
}

.kw-block {
    background: var(--white);

    border: 2px solid var(--gray-light);

    border-radius: var(--radius);

    padding: 22px 22px 18px;
}

.kw-title {
    display: flex;

    align-items: center;

    gap: 9px;

    font-family: var(--font-head);

    font-size: .98rem;

    font-weight: 700;

    color: var(--black);

    margin: 0 0 14px;

    padding-bottom: 12px;

    border-bottom: 2px solid var(--gray-light);
}

.kw-title i {
    color: var(--yellow-dark);
    font-size: .95rem;
}

.kw-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kw-links a {
    display: block;

    padding: 6px 0;

    font-size: 13px;

    color: var(--gray-mid);

    text-decoration: none;

    line-height: 1.45;

    transition:
        color .15s ease,
        padding-left .15s ease;
}

.kw-links a:hover {
    color: var(--black);
    padding-left: 5px;
}


/* ============================================================
   KEYWORD BLOCKS — MOBILE
   ============================================================ */

@media (max-width: 620px) {

    .kw-block {
        padding: 18px 16px 14px;
    }

    .kw-links a {
        font-size: 12.5px;
    }

}