:root{
    --hoho-red:#ff0000;
    --hoho-red-hover:#d90000;
    --hoho-black:#111111;
    --hoho-text:#222222;
    --hoho-secondary:#444444;
    --hoho-border:#d6d6d6;
    --hoho-light:#f4f4f4;
    --hoho-green:#126b3a;
    --hoho-yellow:#ffd51b;
}

.hoho-finder{
    width:min(94vw,500px);
    max-height:92vh;
    padding:0;
    border:0;
    border-radius:14px;
    background:#fff;
    color:#111;
    overflow-x:hidden;
    overflow-y:auto;
    font-family:'GT Eesti Display',Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    box-shadow:0 14px 46px rgba(0,0,0,.28);
}

.hoho-finder::backdrop{
    background:rgba(0,0,0,.72);
}

.hoho-screen{
    box-sizing:border-box;
    padding:36px 30px 27px;
}

.hoho-start-screen{
    padding-top:27px;
}

.hoho-result-screen{
    padding-top:29px;
}

.hoho-close{
    position:absolute;
    top:10px;
    right:10px;
    z-index:1000;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
    transition:background .15s ease,transform .15s ease;
}

.hoho-close:hover{
    background:#ededed;
}

.hoho-close:active{
    transform:scale(.96);
}

.hoho-finder button:focus-visible,
.hoho-finder a:focus-visible{
    outline:3px solid rgba(255,0,0,.28);
    outline-offset:3px;
}

.hoho-finder h2{
    margin:0 0 10px;
    color:#111;
    font-size:33px;
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.25px;
}

.hoho-intro{
    margin:0;
    color:var(--hoho-text);
    font-size:17px;
    line-height:1.5;
}

.hoho-start-shell{
    border:1px solid #cfcfcf;
    border-radius:16px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.10);
}

.hoho-start-hero{
    position:relative;
    min-height:245px;
    box-sizing:border-box;
    padding:22px 24px 27px;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(255,0,0,.34),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #171717 0%,
            #080808 70%,
            #000 100%
        );
    color:#fff;
    overflow:hidden;
}

.hoho-start-hero::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:var(--hoho-red);
}

.hoho-start-brand{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.76);
    font-size:10px;
    font-weight:700;
    letter-spacing:.8px;
}

.hoho-live-dot{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--hoho-red);
    box-shadow:0 0 0 4px rgba(255,0,0,.16);
}

.hoho-route-visual{
    position:absolute;
    top:48px;
    right:-8px;
    width:175px;
    height:95px;
    opacity:.85;
    transform:rotate(-7deg);
}

.hoho-route-line{
    position:absolute;
    top:46px;
    left:0;
    width:185px;
    height:3px;
    border-radius:10px;
    background:linear-gradient(
        90deg,
        rgba(255,0,0,.08),
        var(--hoho-red)
    );
}

.hoho-route-point{
    position:absolute;
    top:40px;
    width:14px;
    height:14px;
    box-sizing:border-box;
    border:3px solid var(--hoho-red);
    border-radius:50%;
    background:#111;
}

.hoho-route-point-one{
    left:32px;
}

.hoho-route-point-two{
    left:92px;
}

.hoho-route-point-three{
    left:153px;
    background:var(--hoho-red);
    box-shadow:0 0 0 6px rgba(255,0,0,.15);
}

.hoho-start-pin{
    position:relative;
    z-index:5;
    width:64px;
    height:64px;
    margin-top:30px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hoho-pin-core{
    position:relative;
    z-index:3;
    width:58px;
    height:58px;
    border-radius:15px;
    background:var(--hoho-red);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:23px;
    box-shadow:0 8px 22px rgba(255,0,0,.32);
}

.hoho-pin-pulse{
    position:absolute;
    inset:3px;
    border-radius:18px;
    background:rgba(255,0,0,.30);
    animation:hohoLocationPulse 2.1s ease-out infinite;
}

@keyframes hohoLocationPulse{
    0%{
        transform:scale(.9);
        opacity:.8;
    }

    70%,
    100%{
        transform:scale(1.35);
        opacity:0;
    }
}

.hoho-start-kicker{
    position:relative;
    z-index:5;
    display:block;
    margin-bottom:5px;
    color:#ff4a4a;
    font-size:10px;
    font-weight:800;
    letter-spacing:.9px;
}

.hoho-start-hero h2{
    position:relative;
    z-index:5;
    max-width:360px;
    margin:0 0 7px;
    color:#fff;
    font-size:36px;
    font-weight:700;
    line-height:1;
    letter-spacing:-.7px;
}

.hoho-start-hero p{
    position:relative;
    z-index:5;
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:15px;
    font-weight:500;
}

.hoho-start-action-area{
    padding:16px 18px 17px;
    background:#fff;
}

.hoho-start-features{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:12px;
}

.hoho-start-features span{
    min-height:36px;
    box-sizing:border-box;
    padding:7px 12px;
    border:1px solid #e0e0e0;
    border-radius:22px;
    background:linear-gradient(
        180deg,
        #f9f9f9,
        #eeeeee
    );
    color:#191919;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:12.5px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.hoho-start-features i{
    color:var(--hoho-red);
    font-size:12px;
}

.hoho-find-button{
    position:relative;
    width:100%;
    min-height:72px;
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid #b98a00;
    border-radius:11px;
    background:linear-gradient(
        180deg,
        #fff26a 0%,
        #ffdc21 46%,
        #ffc400 100%
    );
    color:#111;
    display:flex;
    align-items:center;
    gap:12px;
    font-family:inherit;
    cursor:pointer;
    overflow:hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -2px 0 rgba(120,80,0,.18),
        0 6px 15px rgba(150,105,0,.23);
    transition:transform .15s ease,box-shadow .15s ease;
}

.hoho-find-button::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:46%;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.56),
        transparent
    );
    pointer-events:none;
}

.hoho-find-button::after{
    content:"";
    position:absolute;
    top:-65%;
    left:-42%;
    width:24%;
    height:230%;
    transform:rotate(20deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.72),
        transparent
    );
    animation:hohoFindShine 4.8s ease-in-out infinite;
    pointer-events:none;
}

@keyframes hohoFindShine{
    0%,
    70%{
        left:-42%;
    }

    95%,
    100%{
        left:125%;
    }
}

.hoho-find-button:hover{
    transform:translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -2px 0 rgba(120,80,0,.18),
        0 9px 21px rgba(150,105,0,.31);
}

.hoho-find-button:active{
    transform:scale(.995);
}

.hoho-find-button-icon{
    position:relative;
    z-index:3;
    width:47px;
    height:47px;
    flex:0 0 47px;
    border-radius:10px;
    background:#111;
    color:var(--hoho-yellow);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
}

.hoho-find-button strong{
    position:relative;
    z-index:3;
    flex:1;
    color:#111;
    font-size:19px;
    font-weight:800;
    line-height:1;
    text-align:left;
    transform-origin:left center;
    animation:hohoFindText 4.8s ease-in-out infinite;
}

@keyframes hohoFindText{
    0%,
    70%,
    100%{
        transform:translateX(0) scale(1);
    }

    77%{
        transform:translateX(3px) scale(1.025);
    }

    84%{
        transform:translateX(1px) scale(1.01);
    }
}

.hoho-find-button-arrow{
    position:relative;
    z-index:3;
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:50%;
    background:rgba(0,0,0,.12);
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    animation:hohoFindArrow 4.8s ease-in-out infinite;
}

@keyframes hohoFindArrow{
    0%,
    70%,
    100%{
        transform:translateX(0);
    }

    79%{
        transform:translateX(3px);
    }
}

.hoho-start-privacy{
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#555;
    font-size:10px;
    font-weight:600;
}

.hoho-start-privacy i{
    font-size:9px;
}

.hoho-all-stops{
    min-height:43px;
    margin-top:8px;
    color:#222;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.hoho-all-stops > i:first-child{
    color:var(--hoho-red);
}

.hoho-all-stops > i:last-child{
    font-size:9px;
    transition:transform .15s ease;
}

.hoho-all-stops:hover{
    color:var(--hoho-red);
}

.hoho-all-stops:hover > i:last-child{
    transform:translateX(2px);
}

.hoho-loading-screen{
    position:relative;
    isolation:isolate;
    min-height:430px;
    padding:0;
    overflow:hidden;
    background:#f5f5f5;
}

.hoho-loading-map{
    position:absolute;
    inset:-12px;
    z-index:0;
    pointer-events:none;
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0;
    transform:scale(1.045);
    filter:
        grayscale(.10)
        saturate(.62)
        contrast(.88)
        brightness(1.08);
    transition:opacity .45s ease;
}

.hoho-loading-map.is-ready{
    opacity:.46;
}

.hoho-loading-map-wash{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 88% 7%,
            rgba(255,0,0,.09),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.68) 0%,
            rgba(255,255,255,.75) 48%,
            rgba(255,255,255,.86) 100%
        );
}

.hoho-loading-map-wash::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 31% 51%,
            rgba(255,255,255,.45) 0%,
            rgba(255,255,255,.25) 36%,
            transparent 67%
        );
}

.hoho-loading-map-wash::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42%;
    background:linear-gradient(
        180deg,
        transparent,
        rgba(255,255,255,.30)
    );
}

.hoho-loading-content{
    position:relative;
    z-index:2;
    min-height:430px;
    box-sizing:border-box;
    padding:30px 30px 27px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
}

.hoho-loading-brand{
    position:absolute;
    top:24px;
    left:30px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#282828;
    font-size:10px;
    font-weight:800;
    letter-spacing:.8px;
}

.hoho-loading-pin{
    position:relative;
    width:74px;
    height:74px;
    margin:20px 0 19px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hoho-loading-pin-core{
    position:relative;
    z-index:5;
    width:58px;
    height:58px;
    border-radius:15px;
    background:var(--hoho-red);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:
        0 9px 24px rgba(255,0,0,.38),
        0 2px 6px rgba(0,0,0,.10);
}

.hoho-loading-pin-pulse{
    position:absolute;
    inset:8px;
    z-index:2;
    border-radius:18px;
    background:rgba(255,0,0,.25);
    animation:hohoLoadingPulse 1.8s ease-out infinite;
}

@keyframes hohoLoadingPulse{
    0%{
        transform:scale(.85);
        opacity:.9;
    }

    72%,
    100%{
        transform:scale(1.48);
        opacity:0;
    }
}

.hoho-loading-orbit{
    position:absolute;
    inset:0;
    z-index:4;
    box-sizing:border-box;
    border:2px solid rgba(255,0,0,.18);
    border-top-color:var(--hoho-red);
    border-right-color:rgba(255,0,0,.55);
    border-radius:22px;
    animation:hohoLoadingOrbit 1.1s linear infinite;
}

@keyframes hohoLoadingOrbit{
    to{
        transform:rotate(360deg);
    }
}

.hoho-loading-kicker{
    display:block;
    margin-bottom:5px;
    color:var(--hoho-red);
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}

.hoho-loading-screen h2{
    max-width:360px;
    margin:0 0 7px;
    color:#080808;
    font-size:35px;
    font-weight:700;
    line-height:1;
    letter-spacing:-.7px;
}

.hoho-loading-copy{
    max-width:330px;
    margin:0;
    color:#202020;
    font-size:15px;
    font-weight:500;
    line-height:1.42;
}

.hoho-loading-status{
    min-height:49px;
    box-sizing:border-box;
    margin-top:20px;
    padding:11px 14px;
    border:1px solid rgba(185,185,185,.88);
    border-radius:10px;
    background:rgba(255,255,255,.93);
    color:#111;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    font-weight:700;
    box-shadow:0 6px 19px rgba(0,0,0,.08);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.hoho-spinner{
    width:20px;
    height:20px;
    flex:0 0 20px;
    box-sizing:border-box;
    border:3px solid #dedede;
    border-top-color:var(--hoho-red);
    border-radius:50%;
    animation:hohoSpinner .7s linear infinite;
}

@keyframes hohoSpinner{
    to{
        transform:rotate(360deg);
    }
}

.hoho-loading-route-progress{
    margin-top:14px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#333;
    font-size:10px;
    font-weight:700;
}

.hoho-loading-route-progress span{
    min-height:29px;
    box-sizing:border-box;
    padding:5px 9px;
    border:1px solid rgba(200,200,200,.92);
    border-radius:18px;
    background:rgba(255,255,255,.88);
    display:flex;
    align-items:center;
    gap:5px;
    box-shadow:0 2px 7px rgba(0,0,0,.04);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.hoho-loading-route-progress span i{
    color:var(--hoho-red);
}

.hoho-loading-route-progress > i{
    color:#777;
    font-size:8px;
}

.hoho-found{
    margin-bottom:13px;
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--hoho-green);
    font-size:14px;
    font-weight:700;
}

.hoho-stop{
    padding:20px;
    border:1px solid var(--hoho-border);
    border-radius:12px;
    background:#fff;
}

.hoho-stop-heading{
    margin-bottom:13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.hoho-stop-number{
    display:inline-flex;
    padding:7px 11px;
    border-radius:6px;
    background:var(--hoho-red);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.hoho-route{
    color:var(--hoho-secondary);
    font-size:13px;
    font-weight:600;
}

.hoho-stop h2{
    margin:0 0 8px;
    color:#111;
    font-size:29px;
    font-weight:700;
    line-height:1.08;
}

.hoho-description{
    margin:0;
    color:var(--hoho-text);
    font-size:15px;
    line-height:1.45;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.hoho-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:17px;
}

.hoho-stat{
    min-height:66px;
    box-sizing:border-box;
    padding:11px 12px;
    border-radius:9px;
    background:var(--hoho-light);
    display:flex;
    align-items:center;
    gap:10px;
}

.hoho-stat > i{
    width:20px;
    color:var(--hoho-red);
    font-size:18px;
    text-align:center;
}

.hoho-stat small{
    display:block;
    margin-bottom:3px;
    color:var(--hoho-secondary);
    font-size:11px;
    font-weight:600;
}

.hoho-stat strong{
    display:block;
    color:#111;
    font-size:18px;
    font-weight:700;
}

.hoho-next-bus{
    min-height:78px;
    box-sizing:border-box;
    margin-top:9px;
    padding:11px 12px;
    border:1px solid #cfcfcf;
    border-radius:10px;
    background:#fff;
    color:#111;
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.hoho-next-bus:hover{
    border-color:#111;
    background:#fafafa;
    color:#111;
}

.hoho-next-bus:active{
    transform:scale(.995);
}

.hoho-next-bus-icon{
    width:45px;
    height:45px;
    flex:0 0 45px;
    border-radius:50%;
    background:#111;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
}

.hoho-next-bus-copy{
    flex:1;
    min-width:0;
}

.hoho-next-bus-copy > small{
    display:block;
    margin-bottom:3px;
    color:var(--hoho-secondary);
    font-size:11px;
    font-weight:700;
}

.hoho-next-bus-main{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:5px 8px;
}

#nearestNextBusTime{
    color:#111;
    font-size:23px;
    font-weight:700;
    line-height:1;
}

#nearestNextBusCountdown{
    color:var(--hoho-red);
    font-size:14px;
    font-weight:700;
}

#nearestNextBusStatus{
    display:block;
    margin-top:5px;
    color:var(--hoho-secondary);
    font-size:12px;
    line-height:1.25;
    transition:opacity .16s ease;
}

.hoho-next-walk{
    min-width:43px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}

.hoho-next-walk small{
    font-size:9px;
    font-weight:700;
}

.hoho-next-walk i{
    width:31px;
    height:31px;
    border-radius:50%;
    background:#ececec;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
}

.hoho-next-bus:hover .hoho-next-walk i{
    background:#111;
    color:#fff;
}

.hoho-book{
    position:relative;
    min-height:78px;
    box-sizing:border-box;
    margin-top:11px;
    padding:12px 15px;
    border:1px solid #bc8f00;
    border-radius:11px;
    background:linear-gradient(
        180deg,
        #fff47a 0%,
        #ffe033 43%,
        #ffc400 100%
    );
    color:#111;
    display:flex;
    align-items:center;
    gap:13px;
    text-decoration:none;
    overflow:hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -2px 0 rgba(130,90,0,.18),
        0 5px 13px rgba(130,90,0,.20);
    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.hoho-book::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:45%;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.55),
        rgba(255,255,255,.02)
    );
    pointer-events:none;
}

.hoho-book::after{
    content:"";
    position:absolute;
    top:-60%;
    left:-45%;
    width:25%;
    height:220%;
    transform:rotate(20deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.70),
        transparent
    );
    animation:hohoBookShine 5.5s ease-in-out infinite;
    pointer-events:none;
}

@keyframes hohoBookShine{
    0%,
    72%{
        left:-45%;
    }

    94%,
    100%{
        left:125%;
    }
}

.hoho-book:hover{
    color:#111;
    transform:translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -2px 0 rgba(130,90,0,.18),
        0 8px 18px rgba(130,90,0,.28);
}

.hoho-book-icon{
    position:relative;
    z-index:2;
    width:47px;
    height:47px;
    flex:0 0 47px;
    border-radius:10px;
    background:#111;
    color:var(--hoho-yellow);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
}

.hoho-book-copy{
    position:relative;
    z-index:2;
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.hoho-book-message{
    min-height:14px;
    margin-bottom:3px;
    color:#493600;
    font-size:11px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:.5px;
    transition:
        opacity .18s ease,
        transform .18s ease;
}

.hoho-book-message.is-changing{
    opacity:0;
    transform:translateY(-3px);
}

.hoho-book-copy strong{
    color:#111;
    font-size:18px;
    font-weight:700;
    line-height:1.08;
}

.hoho-book-arrow{
    position:relative;
    z-index:2;
    width:35px;
    height:35px;
    flex:0 0 35px;
    border-radius:50%;
    background:rgba(0,0,0,.12);
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
}

.hoho-book:hover .hoho-book-arrow{
    background:#111;
    color:var(--hoho-yellow);
}

.hoho-footer-actions{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #ddd;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px 22px;
}

.hoho-link-button{
    min-height:36px;
    border:0;
    background:none;
    padding:6px 2px;
    color:#222;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
}

.hoho-link-button i{
    margin-right:4px;
}

.hoho-link-button:hover{
    color:var(--hoho-red);
}

.hoho-error-status{
    margin-bottom:13px;
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--hoho-red);
    font-size:14px;
    font-weight:700;
}

.hoho-error-card{
    padding:20px;
    border:1px solid var(--hoho-border);
    border-radius:12px;
    background:#fff;
}

.hoho-error-heading{
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:14px;
}

.hoho-error-heading small{
    display:block;
    margin-bottom:4px;
    color:var(--hoho-secondary);
    font-size:11px;
    font-weight:700;
}

.hoho-error-heading h2{
    margin:0;
    font-size:27px;
}

.hoho-icon{
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hoho-icon-error{
    background:#fff0f0;
    color:var(--hoho-red);
}

.hoho-primary{
    width:100%;
    min-height:58px;
    box-sizing:border-box;
    margin-top:22px;
    padding:0 18px;
    border:0;
    border-radius:9px;
    background:var(--hoho-red);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:inherit;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
}

.hoho-primary:hover{
    background:var(--hoho-red-hover);
}

.hoho-finder-debug{
    margin-top:12px;
    padding:10px 12px;
    border:1px dashed #bdbdbd;
    border-radius:8px;
    background:#f5f5f5;
    color:#333;
    font-size:11px;
    font-weight:500;
    line-height:1.5;
}

.hoho-finder-debug strong{
    display:block;
    margin-bottom:2px;
    color:#111;
    font-size:11px;
    font-weight:800;
}

@media(max-width:600px){

    .hoho-finder{
        width:calc(100% - 14px);
        max-height:94vh;
        border-radius:12px;
    }

    .hoho-screen{
        padding:28px 17px 21px;
    }

    .hoho-start-screen{
        padding-top:25px;
    }

    .hoho-result-screen{
        padding-top:25px;
    }

    .hoho-start-hero{
        min-height:225px;
        padding:19px 18px 23px;
    }

    .hoho-route-visual{
        top:42px;
        right:-30px;
        transform:scale(.9) rotate(-7deg);
    }

    .hoho-start-pin{
        margin-top:27px;
        margin-bottom:15px;
    }

    .hoho-start-hero h2{
        font-size:31px;
    }

    .hoho-start-hero p{
        font-size:14px;
    }

    .hoho-start-action-area{
        padding:14px 13px 15px;
    }

    .hoho-start-features{
        min-height:43px;
        gap:6px;
        margin-bottom:11px;
    }

    .hoho-start-features span{
        min-height:34px;
        padding:7px 9px;
        gap:5px;
        font-size:11.5px;
    }

    .hoho-start-features i{
        font-size:11px;
    }

    .hoho-find-button{
        min-height:68px;
        padding:9px 10px;
        gap:10px;
    }

    .hoho-find-button-icon{
        width:44px;
        height:44px;
        flex-basis:44px;
        font-size:18px;
    }

    .hoho-find-button strong{
        font-size:17px;
    }

    .hoho-find-button-arrow{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .hoho-loading-screen{
        min-height:400px;
    }

    .hoho-loading-map{
        inset:-15px;
        transform:scale(1.09);
        filter:
            grayscale(.12)
            saturate(.58)
            contrast(.86)
            brightness(1.10);
    }

    .hoho-loading-map.is-ready{
        opacity:.42;
    }

    .hoho-loading-map-wash{
        background:
            radial-gradient(
                circle at 88% 7%,
                rgba(255,0,0,.08),
                transparent 39%
            ),
            linear-gradient(
                180deg,
                rgba(255,255,255,.70) 0%,
                rgba(255,255,255,.77) 48%,
                rgba(255,255,255,.87) 100%
            );
    }

    .hoho-loading-content{
        min-height:400px;
        padding:28px 19px 23px;
    }

    .hoho-loading-brand{
        top:21px;
        left:19px;
    }

    .hoho-loading-pin{
        width:68px;
        height:68px;
        margin:18px 0 17px;
    }

    .hoho-loading-pin-core{
        width:54px;
        height:54px;
        font-size:20px;
    }

    .hoho-loading-screen h2{
        font-size:30px;
    }

    .hoho-loading-copy{
        max-width:285px;
        font-size:14px;
    }

    .hoho-loading-status{
        margin-top:17px;
        background:rgba(255,255,255,.95);
        font-size:11.5px;
    }

    .hoho-loading-route-progress{
        gap:5px;
    }

    .hoho-loading-route-progress span{
        padding:5px 7px;
        gap:4px;
        background:rgba(255,255,255,.91);
        font-size:9px;
    }

    .hoho-finder h2{
        font-size:29px;
    }

    .hoho-intro{
        font-size:16px;
    }

    .hoho-found{
        font-size:13px;
    }

    .hoho-stop{
        padding:16px;
    }

    .hoho-route{
        display:none;
    }

    .hoho-stop h2{
        font-size:27px;
    }

    .hoho-description{
        font-size:14px;
        line-height:1.4;
        -webkit-line-clamp:1;
    }

    .hoho-stats{
        margin-top:14px;
        gap:8px;
    }

    .hoho-stat{
        min-height:61px;
        padding:9px 10px;
        gap:8px;
    }

    .hoho-stat > i{
        font-size:16px;
    }

    .hoho-stat small{
        font-size:10px;
    }

    .hoho-stat strong{
        font-size:17px;
    }

    .hoho-next-bus{
        min-height:73px;
        padding:10px;
        gap:10px;
    }

    .hoho-next-bus-icon{
        width:41px;
        height:41px;
        flex-basis:41px;
        font-size:15px;
    }

    .hoho-next-bus-copy > small{
        font-size:10px;
    }

    #nearestNextBusTime{
        font-size:21px;
    }

    #nearestNextBusCountdown{
        font-size:13px;
    }

    #nearestNextBusStatus{
        font-size:11px;
    }

    .hoho-next-walk{
        min-width:36px;
    }

    .hoho-next-walk small{
        font-size:9px;
    }

    .hoho-next-walk i{
        width:29px;
        height:29px;
    }

    .hoho-book{
        min-height:74px;
        padding:10px 12px;
        gap:10px;
    }

    .hoho-book-icon{
        width:43px;
        height:43px;
        flex-basis:43px;
        font-size:17px;
    }

    .hoho-book-message{
        font-size:10px;
    }

    .hoho-book-copy strong{
        font-size:17px;
    }

    .hoho-book-arrow{
        width:33px;
        height:33px;
        flex-basis:33px;
    }

    .hoho-footer-actions{
        margin-top:13px;
        padding-top:11px;
        gap:7px 14px;
    }

    .hoho-link-button{
        font-size:13px;
    }

    .hoho-error-card{
        padding:16px;
    }

    .hoho-error-heading{
        gap:11px;
    }

    .hoho-error-heading h2{
        font-size:24px;
    }

    .hoho-finder-debug{
        margin-top:10px;
        padding:9px 10px;
        font-size:10.5px;
    }
}

@media(max-width:360px){

    .hoho-start-features{
        gap:4px;
    }

    .hoho-start-features span{
        padding:6px 7px;
        gap:4px;
        font-size:10.5px;
    }

    .hoho-find-button strong{
        font-size:16px;
    }

    .hoho-loading-route-progress{
        gap:4px;
    }

    .hoho-loading-route-progress > i{
        display:none;
    }

    .hoho-loading-route-progress span{
        padding:5px 6px;
    }
}

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

    .hoho-pin-pulse,
    .hoho-find-button::after,
    .hoho-find-button strong,
    .hoho-find-button-arrow,
    .hoho-loading-pin-pulse,
    .hoho-loading-orbit,
    .hoho-spinner,
    .hoho-book::after{
        animation:none;
    }

    .hoho-loading-map{
        transition:none;
    }

    .hoho-book-message{
        transition:none;
    }

    #nearestNextBusStatus{
        transition:none;
    }
}
@media(max-width:767px){

    .header-banner{
        overflow:visible !important;
    }

    .header-banner > .container{
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .header-banner > .container > .row.items-center.justify-between{
        width:100% !important;
        min-height:30px !important;
        margin:0 !important;
        padding:0 !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:center !important;
        column-gap:10px !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto{
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child{
        min-width:0 !important;
        overflow:hidden !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:last-child{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        position:relative !important;
        z-index:50 !important;
        justify-self:end !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child > .row{
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child > .row > .col-auto{
        margin:0 !important;
        padding:0 !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child > .row > .col-auto:not(:first-child){
        display:none !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:last-child > .row{
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-end !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:last-child > .row > .col-auto{
        margin:0 !important;
        padding:0 !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:last-child > .row > .col-auto:not(:last-child){
        display:none !important;
    }

    .header-banner .content-to-hide{
        display:none !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child a{
        max-width:100% !important;
        min-height:28px !important;
        margin:0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        color:#fff !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        font-size:14px !important;
        font-weight:700 !important;
        line-height:1 !important;
        letter-spacing:-.1px !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child a strong{
        max-width:100% !important;
        min-height:28px !important;
        margin:0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:5px !important;
        color:#fff !important;
        white-space:nowrap !important;
        line-height:1 !important;
    }

    .header-banner .icon-star{
        width:16px !important;
        height:16px !important;
        min-width:16px !important;
        flex:0 0 16px !important;
        margin:0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        align-self:center !important;
        color:#fff !important;
        font-size:14px !important;
        line-height:16px !important;
        vertical-align:middle !important;
        position:relative !important;
        top:-1px !important;
        transform:none !important;
    }

    .header-banner [data-hoho-stop-finder]{
        width:auto !important;
        min-width:max-content !important;
        max-width:none !important;
        min-height:28px !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        color:#fff !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        visibility:visible !important;
        opacity:1 !important;
        position:relative !important;
        z-index:100 !important;
        white-space:nowrap !important;
        font-family:'GT Eesti Display',Arial,sans-serif !important;
        font-size:14px !important;
        font-weight:700 !important;
        line-height:1 !important;
        letter-spacing:-.1px !important;
    }

    .header-banner [data-hoho-stop-finder] > span{
        min-height:28px !important;
        margin:0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:5px !important;
        color:#fff !important;
        white-space:nowrap !important;
        line-height:1 !important;
    }

    .header-banner [data-hoho-stop-finder] strong{
        min-height:28px !important;
        margin:0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:4px !important;
        color:#fff !important;
        white-space:nowrap !important;
        font-size:14px !important;
        font-weight:700 !important;
        line-height:1 !important;
        letter-spacing:-.1px !important;
    }

    .header-banner [data-hoho-stop-finder] .fa-bus{
        width:16px !important;
        height:16px !important;
        min-width:16px !important;
        flex:0 0 16px !important;
        margin:0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        align-self:center !important;
        color:#fff !important;
        font-size:14px !important;
        line-height:16px !important;
        vertical-align:middle !important;
        position:relative !important;
        top:0 !important;
        transform:none !important;
    }

    .header-banner [data-hoho-stop-finder] .fa-circle-stop{
        width:11px !important;
        height:11px !important;
        min-width:11px !important;
        flex:0 0 11px !important;
        margin:0 !important;
        padding:0 !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        align-self:center !important;
        color:#fff !important;
        font-size:10px !important;
        line-height:11px !important;
        vertical-align:middle !important;
        position:relative !important;
        top:0 !important;
        transform:none !important;
    }

}

@media(max-width:430px){

    .header-banner > .container{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .header-banner > .container > .row.items-center.justify-between{
        column-gap:7px !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child a{
        font-size:13.5px !important;
    }

    .header-banner [data-hoho-stop-finder],
    .header-banner [data-hoho-stop-finder] strong{
        font-size:13.5px !important;
    }

    .header-banner .icon-star,
    .header-banner [data-hoho-stop-finder] .fa-bus{
        width:15px !important;
        height:15px !important;
        min-width:15px !important;
        flex-basis:15px !important;
        font-size:13px !important;
        line-height:15px !important;
    }

    .header-banner [data-hoho-stop-finder] .fa-circle-stop{
        display:none !important;
    }

}

@media(max-width:380px){

    .header-banner > .container{
        padding-left:6px !important;
        padding-right:6px !important;
    }

    .header-banner > .container > .row.items-center.justify-between{
        column-gap:5px !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child a{
        font-size:13px !important;
        letter-spacing:-.2px !important;
    }

    .header-banner [data-hoho-stop-finder],
    .header-banner [data-hoho-stop-finder] strong{
        font-size:13px !important;
        letter-spacing:-.2px !important;
    }

    .header-banner .icon-star,
    .header-banner [data-hoho-stop-finder] .fa-bus{
        width:15px !important;
        height:15px !important;
        min-width:15px !important;
        flex-basis:15px !important;
        font-size:13px !important;
        line-height:15px !important;
    }

}

@media(max-width:340px){

    .header-banner > .container{
        padding-left:5px !important;
        padding-right:5px !important;
    }

    .header-banner > .container > .row.items-center.justify-between{
        column-gap:4px !important;
    }

    .header-banner > .container > .row.items-center.justify-between > .col-auto:first-child a{
        font-size:11.5px !important;
        letter-spacing:-.25px !important;
    }

    .header-banner [data-hoho-stop-finder],
    .header-banner [data-hoho-stop-finder] strong{
        font-size:11.5px !important;
        letter-spacing:-.25px !important;
    }

    .header-banner .icon-star,
    .header-banner [data-hoho-stop-finder] .fa-bus{
        width:13px !important;
        height:13px !important;
        min-width:13px !important;
        flex-basis:13px !important;
        font-size:11px !important;
        line-height:13px !important;
    }

    .header-banner .icon-star{
        top:-1px !important;
    }

}