/* =========================
CITY PAGE
tylko dodatki do index.css
========================= */

.city-homepage{
    position:relative;
    z-index:2;
}

/* =========================
LOCAL HERO
========================= */

.city-hero-small{
    padding:18px 0 10px;
}

.city-hero-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) 420px;
    gap:22px;
    align-items:stretch;
    padding:24px;
    border-radius:26px;
    background:
        radial-gradient(circle at top left, rgba(255,193,7,.08), transparent 35%),
        radial-gradient(circle at bottom right, rgba(80,140,255,.10), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.22);
}

.city-hero-content{
    min-width:0;
}

.city-hero-badge{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,193,7,.12);
    border:1px solid rgba(255,193,7,.22);
    color:#ffd76a;
    font-size:12px;
    font-weight:800;
    margin-bottom:14px;
}

.city-hero-title{
    margin:0 0 10px;
    font-size:36px;
    line-height:1.08;
    font-weight:900;
    color:#fff;
    letter-spacing:-.03em;
}

.city-hero-subtitle{
    margin:0;
    font-size:15px;
    line-height:1.7;
    color:#b8c7d9;
    max-width:720px;
}

.city-hero-mini-stats{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}

.city-hero-stat{
    min-width:140px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.city-hero-stat strong{
    display:block;
    font-size:24px;
    line-height:1;
    margin-bottom:6px;
    color:#fff;
    font-weight:900;
}

.city-hero-stat span{
    display:block;
    color:#9fb3c8;
    font-size:13px;
}

.city-hero-search{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:20px;
    border-radius:22px;
    background:rgba(8,18,30,.72);
    border:1px solid rgba(255,255,255,.08);
    min-width:0;
}

.city-hero-search-top{
    margin-bottom:12px;
}

.city-hero-search-label{
    font-size:13px;
    font-weight:800;
    color:#dbe6f5;
    margin-bottom:4px;
}

.city-hero-search-help{
    font-size:13px;
    color:#9fb3c8;
}

/* wspólny search-box z home */
.city-hero-search .hero-search{
    width:100%;
}

.city-hero-search .hero-search-form{
    width:100%;
}

.city-hero-search .hero-search-input-wrap{
    width:100%;
}

.city-hero-search .hero-search-input{
    width:100%;
    min-width:0;
    background:rgba(255,255,255,.05);
}

.city-hero-search .hero-nearby-btn{
    margin-top:10px;
    width:100%;
}

.city-hero-quick-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

.city-hero-quick-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    border-radius:12px;
    text-decoration:none;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#dbe6f5;
    font-size:13px;
    font-weight:700;
    transition:.18s ease;
}

.city-hero-quick-links a:hover{
    border-color:rgba(255,193,7,.22);
    color:#fff;
    background:rgba(255,255,255,.06);
}

/* =========================
SEKCJE CITY
tylko wrappery
========================= */

.city-home-updates{
    padding-top:20px;
}

.city-home-updates .updates-layout{
    align-items:flex-start;
}

.city-stations-section{
    padding:14px 0 10px;
}

.city-stations-head{
    margin-bottom:20px;
}

.city-stations-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
    gap:18px;
}



/* =========================
RESPONSIVE
========================= */

@media(max-width:980px){
    .city-hero-box{
        grid-template-columns:1fr;
    }

    .city-hero-title{
        font-size:30px;
    }

    .city-station-time{
        white-space:normal;
    }
}

@media(max-width:640px){
    .city-hero-small{
        padding:14px 0 6px;
    }

    .city-hero-box{
        padding:18px;
        border-radius:22px;
    }

    .city-hero-title{
        font-size:26px;
    }

    .city-hero-subtitle{
        font-size:14px;
    }

    .city-hero-search{
        padding:16px;
        border-radius:18px;
    }

    .city-hero-mini-stats{
        display:grid;
        grid-template-columns:1fr;
    }

    .city-hero-stat{
        min-width:0;
    }

    .city-stations-grid{
        grid-template-columns:1fr;
    }
}

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

.city-stations-section{
    padding:14px 0 10px;
}

.city-stations-head{
    margin-bottom:20px;
}

.city-stations-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    align-items:stretch;
}

.city-fuel-card{
    display:flex;
    flex-direction:column;
    min-height:100%;
    padding:20px;
    border-radius:22px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.city-fuel-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.city-fuel-brand-wrap{
    display:flex;
    align-items:flex-start;
    gap:14px;
    min-width:0;
    flex:1;
}

.city-fuel-logo{
    width:52px;
    height:52px;
    flex:0 0 52px;
    object-fit:contain;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    padding:6px;
}

.city-fuel-main{
    min-width:0;
    flex:1;
}

.city-fuel-brand{
    margin:0 0 6px;
    font-size:18px;
    line-height:1.2;
    font-weight:800;
}

.city-fuel-brand a{
    color:#fff;
    text-decoration:none;
}

.city-fuel-brand a:hover{
    color:#ffd76a;
}

.city-fuel-address{
    font-size:14px;
    line-height:1.5;
    color:#9fb3c8;
}

.city-fuel-updated{
    font-size:12px;
    color:#9fb3c8;
    white-space:nowrap;
    padding-top:2px;
}

.city-fuel-prices{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.city-fuel-pill{
    background:rgba(8,20,34,.92);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:12px 12px 10px;
    min-width:0;
}

.city-fuel-pill span{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    text-transform:uppercase;
    color:#8ea3bb;
}

.city-fuel-pill strong{
    display:block;
    font-size:17px;
    line-height:1.1;
    color:#fff;
    font-weight:800;
}

.city-fuel-pill small{
    display:block;
    margin-top:6px;
    font-size:11px;
    line-height:1.2;
    color:#7f95ad;
}

.city-fuel-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:auto;
    padding-top:16px;
}

.city-fuel-actions .btn{
    width:100%;
    min-height:44px;
    justify-content:center;
}

@media(max-width:980px){
    .city-stations-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){
    .city-fuel-card-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .city-fuel-updated{
        white-space:normal;
    }

    .city-fuel-actions{
        grid-template-columns:1fr;
    }
}

@media(max-width:520px){
    .city-fuel-prices{
        grid-template-columns:1fr;
    }
}

/* =========================
CITY LIVE SECTION - CLEAN
========================= */

.city-live-section{
    padding:20px 0 8px;
}

.city-live-layout{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) 340px;
    gap:22px;
    align-items:start;
}

.city-live-left,
.city-live-right{
    min-width:0;
}

.city-section-header{
    margin-bottom:18px;
}

.city-live-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.city-live-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:100%;
    padding:18px;
    border-radius:22px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.16);
    color:#fff;
    text-decoration:none;
    transition:.18s ease;
}

.city-live-card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,193,7,.22);
    background:rgba(255,255,255,.05);
    color:#fff;
}

.city-live-card-top{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:14px;
}

.city-live-logo{
    width:46px;
    height:46px;
    flex:0 0 46px;
    object-fit:contain;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    padding:4px;
}

.city-live-main{
    min-width:0;
    flex:1;
}

.city-live-brand{
    font-size:16px;
    font-weight:800;
    line-height:1.2;
    color:#fff;
    margin-bottom:6px;
}

.city-live-address{
    font-size:14px;
    line-height:1.45;
    color:#9fb3c8;
    word-break:break-word;
}

.city-live-prices{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}

.city-live-price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(8,20,34,.92);
    border:1px solid rgba(255,255,255,.08);
}

.city-live-price-row span{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    color:#8ea3bb;
}

.city-live-price-row strong{
    font-size:15px;
    font-weight:800;
    color:#fff;
    white-space:nowrap;
}

.city-live-time{
    margin-top:14px;
    font-size:12px;
    color:#7f95ad;
}

/* prawa kolumna */

.city-cheap-card{
    display:block;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.16);
    transition:.18s ease;
    margin-bottom:14px;
}

.city-cheap-card:last-child{
    margin-bottom:0;
}

.city-cheap-card:hover{
    transform:translateY(-2px);
    border-color:rgba(255,193,7,.22);
    background:rgba(255,255,255,.05);
    color:#fff;
}

.city-cheap-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.city-cheap-fuel{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    color:#8ea3bb;
}

.city-cheap-price{
    font-size:22px;
    font-weight:900;
    color:#fff;
    white-space:nowrap;
}

.city-cheap-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,193,7,.12);
    border:1px solid rgba(255,193,7,.20);
    color:#ffd76a;
    font-size:12px;
    font-weight:700;
    margin-bottom:14px;
}

.city-cheap-bottom{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.city-cheap-logo{
    width:72px;
    height:72px;
    flex:0 0 72px;
    object-fit:contain;
}

.city-cheap-main{
    min-width:0;
    flex:1;
}

.city-cheap-brand{
    font-size:16px;
    font-weight:800;
    color:#fff;
    margin-bottom:6px;
}

.city-cheap-address{
    font-size:14px;
    line-height:1.45;
    color:#9fb3c8;
}

/* =========================
CITY BUTTONS
========================= */

.city-station-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 14px;
    border-radius:14px;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    transition:.18s ease;
    border:1px solid transparent;
}

.city-station-btn-main{
    background:linear-gradient(180deg,#ffca2c 0%, #f2b705 100%);
    color:#08111d;
    box-shadow:0 10px 24px rgba(255,193,7,.16);
}

.city-station-btn-main:hover{
    transform:translateY(-1px);
    color:#08111d;
}

.city-station-btn-ghost{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
    color:#dbe6f5;
}

.city-station-btn-ghost:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,193,7,.22);
    color:#fff;
}

/* =========================
RESPONSIVE LIVE
========================= */

@media(max-width:1180px){
    .city-live-layout{
        grid-template-columns:1fr;
    }

    .city-live-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:760px){
    .city-live-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .city-live-card{
        padding:14px;
        border-radius:18px;
    }

    .city-live-card-top{
        gap:10px;
        margin-bottom:12px;
    }

    .city-live-logo{
        width:40px;
        height:40px;
        flex:0 0 40px;
        border-radius:10px;
        padding:3px;
    }

    .city-live-brand{
        font-size:14px;
        line-height:1.15;
        margin-bottom:4px;
    }

    .city-live-address{
        font-size:12px;
        line-height:1.35;
        word-break:break-word;
    }

    .city-live-price-row{
        padding:9px 10px;
        border-radius:12px;
    }

    .city-live-price-row span{
        font-size:11px;
    }

    .city-live-price-row strong{
        font-size:14px;
    }

    .city-live-time{
        margin-top:10px;
        font-size:11px;
    }

    .city-live-footer{
        margin-top:10px;
        gap:8px;
    }

    .city-live-actions{
        width:100%;
        flex-direction:column;
        gap:8px;
    }

    .city-live-link{
        width:100%;
        min-height:38px;
        font-size:13px;
    }

    .city-fuel-card-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .city-fuel-updated{
        white-space:normal;
    }

    .city-fuel-actions{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .city-live-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:520px){
    .city-fuel-prices{
        grid-template-columns:1fr;
    }
}



.city-live-footer{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.city-live-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.city-live-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border-radius:10px;
    text-decoration:none;
    background:rgba(255,193,7,.14);
    border:1px solid rgba(255,193,7,.20);
    color:#ffd76a;
    font-size:12px;
    font-weight:800;
    transition:.18s ease;
}

.city-live-link:hover{
    background:rgba(255,193,7,.20);
    color:#fff;
}

.city-live-link-ghost{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
    color:#dbe6f5;
}

.city-live-link-ghost:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,193,7,.20);
    color:#fff;
}

.city-live-footer{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.city-live-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.city-live-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border-radius:10px;
    text-decoration:none;
    background:rgba(255,193,7,.14);
    border:1px solid rgba(255,193,7,.20);
    color:#ffd76a;
    font-size:12px;
    font-weight:800;
    transition:.18s ease;
}

.city-live-link:hover{
    background:rgba(255,193,7,.20);
    color:#fff;
}

.city-live-link-ghost{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.08);
    color:#dbe6f5;
}

.city-live-link-ghost:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,193,7,.20);
    color:#fff;
}

.city-fuel-updated-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.city-fuel-badge{
    font-size:11px;
    font-weight:800;
    padding:4px 8px;
    border-radius:8px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.city-fuel-badge.fresh{
    background:rgba(0,200,120,.15);
    color:#3cffb3;
    border:1px solid rgba(0,200,120,.25);
}

.city-fuel-badge.ok{
    background:rgba(255,193,7,.15);
    color:#ffd76a;
    border:1px solid rgba(255,193,7,.25);
}

.city-fuel-badge.old{
    background:rgba(255,80,80,.12);
    color:#ff7b7b;
    border:1px solid rgba(255,80,80,.25);
}

.city-fuel-card.is-fresh{
    position:relative;
    animation:cityFreshPulse 2.4s ease-in-out infinite;
    box-shadow:
        0 12px 30px rgba(0,0,0,.16),
        0 0 0 1px rgba(0,200,120,.12),
        0 0 24px rgba(0,200,120,.10);
}

.city-fuel-card.is-fresh::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    pointer-events:none;
    box-shadow:0 0 0 1px rgba(0,255,170,.18) inset;
}

@keyframes cityFreshPulse{
    0%{
        transform:translateY(0);
        box-shadow:
            0 12px 30px rgba(0,0,0,.16),
            0 0 0 1px rgba(0,200,120,.10),
            0 0 14px rgba(0,200,120,.08);
    }
    50%{
        transform:translateY(-2px);
        box-shadow:
            0 16px 34px rgba(0,0,0,.18),
            0 0 0 1px rgba(0,200,120,.18),
            0 0 28px rgba(0,200,120,.14);
    }
    100%{
        transform:translateY(0);
        box-shadow:
            0 12px 30px rgba(0,0,0,.16),
            0 0 0 1px rgba(0,200,120,.10),
            0 0 14px rgba(0,200,120,.08);
    }
}
.city-fuel-badge.fresh{
    background:linear-gradient(135deg, rgba(0,200,120,.18), rgba(0,255,170,.12));
    color:#3cffb3;
    border:1px solid rgba(0,255,170,.25);
    box-shadow:0 0 12px rgba(0,255,170,.12);
}

/* =========================
EMPTY CITY / REGION STATE
========================= */

.empty-city-section{
    padding: 8px 0 28px;
}

.empty-city-box{
    margin: 0 auto 10px;
    max-width: 760px;
    padding: 34px 28px;
    background: linear-gradient(180deg, rgba(13,24,38,.96) 0%, rgba(9,18,30,.98) 100%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.empty-city-box::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,193,7,.15), transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(255,193,7,.10), transparent 45%);
    z-index:0;
}

.empty-city-box > *{
    position:relative;
    z-index:1;
}

.empty-icon{
    width:68px;
    height:68px;
    margin:0 auto 16px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    background:rgba(255,193,7,.10);
    border:1px solid rgba(255,193,7,.18);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
}

.empty-city-box h2{
    margin:0 0 12px;
    color:#fff;
    font-size:28px;
    line-height:1.2;
    font-weight:800;
}

.empty-city-box p{
    margin:0 auto 10px;
    max-width:620px;
    color:rgba(255,255,255,.72);
    font-size:15px;
    line-height:1.65;
}

.empty-city-box .highlight{
    margin-top:14px;
    color:#ffc107;
    font-weight:700;
}

.empty-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px;
}

.empty-actions .btn-main,
.empty-actions .btn-ghost{
    min-width:170px;
    padding:12px 18px;
    border-radius:14px;
    text-decoration:none;
    font-weight:700;
    transition:.2s ease;
}

.empty-actions .btn-main{
    background:#ffc107;
    color:#111;
    border:1px solid #ffc107;
    box-shadow:0 10px 24px rgba(255,193,7,.18);
}

.empty-actions .btn-main:hover{
    background:#ffb300;
    border-color:#ffb300;
    color:#111;
    transform:translateY(-1px);
}

.empty-actions .btn-ghost{
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.03);
}

.empty-actions .btn-ghost:hover{
    color:#ffc107;
    border-color:rgba(255,193,7,.45);
    background:rgba(255,193,7,.06);
    transform:translateY(-1px);
}

@media (max-width: 768px){
    .empty-city-section{
        padding: 0 0 22px;
    }

    .empty-city-box{
        padding:26px 18px;
        border-radius:20px;
    }

    .empty-city-box h2{
        font-size:22px;
    }

    .empty-city-box p{
        font-size:14px;
        line-height:1.55;
    }

    .empty-actions{
        flex-direction:column;
    }

    .empty-actions .btn-main,
    .empty-actions .btn-ghost{
        width:100%;
        min-width:0;
    }
}

/* =========================
SEO CONTENT / FAQ
========================= */

.city-seo-section,
.city-faq-section{
    padding: 18px 0 6px;
}

.city-seo-box,
.city-faq-box{
    padding: 24px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(255,193,7,.05), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.city-seo-box h2,
.city-faq-box h2{
    margin: 0 0 14px;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.02em;
}

.city-seo-box p,
.city-faq-item p{
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.8;
    color: #b8c7d9;
}

.city-seo-links{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.city-seo-links a{
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    text-decoration: none;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #dbe6f5;
    font-size: 13px;
    font-weight: 700;
    transition: .18s ease;
}

.city-seo-links a:hover{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,193,7,.22);
    color: #fff;
}

.city-faq-item{
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

.city-faq-item:first-of-type{
    border-top: 0;
    padding-top: 4px;
}

.city-faq-item h3{
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 800;
    color: #fff;
}

@media(max-width: 768px){
    .city-seo-box,
    .city-faq-box{
        padding: 18px;
        border-radius: 20px;
    }

    .city-seo-box h2,
    .city-faq-box h2{
        font-size: 23px;
    }

    .city-faq-item h3{
        font-size: 16px;
    }
}

.hero-city-highlight{
    color: #ffc107;
    text-shadow: 0 0 18px rgba(255,193,7,.16);
}

.city-hero-title-highlight{
    color: #ffc107;
    text-shadow: 0 0 18px rgba(255,193,7,.16);
}

/* search box w hero city */
.city-hero-search input,
.city-hero-search input[type="text"],
.city-hero-search input[type="search"],
.city-hero-search #searchInput{
    color: #f5f7fb !important;
    -webkit-text-fill-color: #f5f7fb !important;
}

.city-hero-search input::placeholder,
.city-hero-search input[type="text"]::placeholder,
.city-hero-search input[type="search"]::placeholder,
.city-hero-search #searchInput::placeholder{
    color: rgba(255,255,255,.58) !important;
}

.city-hero-search .search-box,
.city-hero-search .search-wrapper,
.city-hero-search .search-input-wrap,
.city-hero-search #searchInput{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.08) !important;
}

.city-cheap-card-empty{
    cursor: default;
    pointer-events: none;
    opacity: .92;
}

.city-cheap-badge-empty{
    background: rgba(255,255,255,.08);
    color: #c7d2df;
    border: 1px solid rgba(255,255,255,.08);
}

/* ===== BREADCRUMBS ===== */
.tn-breadcrumbs-wrap{
    margin: 16px 0 18px;
}

.tn-breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    font-size:14px;
    line-height:1.4;
    color:#9fb0c3;
    background:linear-gradient(180deg,#0f2236,#0c1a2b);
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    padding:10px 14px;
}

.tn-breadcrumbs a{
    color:#d9e7f5;
    text-decoration:none;
    transition:.2s ease;
}

.tn-breadcrumbs a:hover{
    color:#ffc107;
}

.tn-breadcrumbs-sep{
    opacity:.55;
}

.tn-breadcrumbs-current{
    color:#ffffff;
    font-weight:600;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){
    .tn-breadcrumbs{
        font-size:13px;
        gap:6px;
        padding:9px 12px;
        border-radius:12px;
    }

    .tn-breadcrumbs-wrap{
        margin: 12px 0 14px;
    }
}