/* =====================================================
GLOBAL
===================================================== */
.city-page .container,
.home-page .container{

max-width:1500px;
margin:auto;
padding-left:30px;
padding-right:30px;

}
body.city-page,
body.home-page{
background:
linear-gradient(180deg,#061a30 0%,#071f3a 35%,#061423 100%);
background-attachment:fixed;
color:#fff;
}

.home-title{
font-size:34px;
font-weight:800;
color:#ffffff;
}

.section-title{
font-size:24px;
font-weight:700;
margin-bottom:20px;
color:#ffffff;
}

.section-title span{
color:#2563eb;
}

.home-section{
padding:70px 0;
}

/* =====================================================
HERO
===================================================== */
.hero-ai-btn svg{
width:22px;
height:22px;
}
.hero-home{
position:relative;
background:transparent;
min-height:620px;
padding:120px 20px 140px;
color:white;
display:flex;
align-items:center;
justify-content:center;
overflow:visible;

}

.hero-home::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;
bottom:0;

background:url('/images/map-bg.webp') center/cover no-repeat;

opacity:0.25;

z-index:0;

}
.hero-home::after{

content:"";

position:absolute;

top:-200px;
left:0;
right:0;

height:600px;

background:

radial-gradient(circle at 50% 20%, rgba(255,180,0,0.35), transparent 60%);

z-index:1;

}

.hero-inner{

position:relative;
z-index:5;

max-width:900px;
margin:auto;
text-align:center;

}

.hero-title{
font-size:38px;
font-weight:800;
margin-bottom:12px;
line-height:1.2;
}

.hero-subtitle{
font-size:18px;
opacity:.9;
margin-bottom:25px;
}


/* =====================================================
SEARCH
===================================================== */



.hero-search-row{
max-width:720px;
margin:auto;
position:relative;
}

.hero-search-input{
border-radius:10px;
padding:10px 12px;
font-size:15px;
border:0;
width:100%;
height:46px;
}

.hero-search-input:focus{
outline:none;
box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.hero-search-btn{
border-radius:10px;
font-weight:600;
height:46px;
font-size:15px;
}

.hero-nearby-btn{
border-radius:10px;
font-weight:600;
padding:8px 14px;
font-size:14px;
margin-top:12px;
}


/* =====================================================
SEARCH DROPDOWN
===================================================== */

.search-dropdown{
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
border:1px solid #e5e7eb;
z-index:9999;
display:none;
max-height:340px;
overflow-y:auto;
box-shadow:0 15px 35px rgba(0,0,0,0.25);
border-radius:0 0 12px 12px;
}

.search-group{
font-size:12px;
font-weight:700;
padding:8px 15px;
background:#f9fafb;
border-bottom:1px solid #eee;
color:#6b7280;
text-transform:uppercase;
letter-spacing:.5px;
}

.search-item{
padding:13px 15px;
border-bottom:1px solid #f1f1f1;
cursor:pointer;
color:#111827;
transition:.15s;
}

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

.search-item:hover{
background:#f3f4f6;
padding-left:18px;
}

.search-active{
background:#eef2ff;
}



/* =====================================================
HERO CITIES
===================================================== */

.hero-cities{
margin-top:35px;
}

.hero-cities-title{
font-size:13px;
text-transform:uppercase;
letter-spacing:1px;
opacity:.7;
margin-bottom:12px;
}

.hero-cities-list{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
}

.hero-city{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
padding:8px 14px;
border-radius:20px;
font-size:14px;
text-decoration:none;
color:white;
transition:.2s;
}

.hero-city:hover{
background:#2563eb;
border-color:#2563eb;
}






/* =========================
NEARBY GRID
========================= */

.nearby-grid{

display:grid;

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

gap:20px;

margin-top:20px;

}






/* =====================================================
KARTY STACJI
===================================================== */

.station-card{

border-radius:16px;

border:1px solid rgba(255,255,255,0.08);

background:rgba(20,35,60,0.75);

backdrop-filter:blur(10px);

transition:.25s;

position:relative;

cursor:pointer;

box-shadow:0 10px 30px rgba(0,0,0,0.35);

padding:18px;

}

.station-card:hover{

transform:translateY(-6px);

border:1px solid rgba(255,180,0,0.35);

box-shadow:0 20px 45px rgba(0,0,0,0.45);

}

.station-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.station-logo{
width:36px;
height:36px;
object-fit:contain;
}

.station-brand{

font-weight:700;
font-size:16px;

color:#ffffff;

}

.station-address{

font-size:13px;

color:#9fb3c8;

margin-bottom:12px;

line-height:1.3;

}



/* =====================================================
CENY PALIW
===================================================== */

.fuel-row{

display:flex;

justify-content:space-between;

padding:6px 0;

border-bottom:1px solid rgba(255,255,255,0.06);

font-size:14px;

}

.fuel-row:last-child{
border-bottom:none;
}

.fuel-name{

font-weight:600;

color:#9fb3c8;

}

.fuel-price{

font-weight:700;

font-size:16px;

color:#ffb400;

}

.station-update{

font-size:12px;

color:#7c8da3;

margin-top:10px;

}









/* =====================================================
KARTY
===================================================== */

.card{

background:rgba(20,35,60,0.75);

border-radius:16px;

border:1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(8px);

transition:.25s;

box-shadow:0 10px 30px rgba(0,0,0,0.35);

color:#fff;

overflow:hidden;

}

.card:hover{

transform:translateY(-6px);

border:1px solid rgba(255,180,0,0.35);

box-shadow:0 20px 45px rgba(0,0,0,0.45);

}


/* header */

.card-header{

background:rgba(255,255,255,0.03);

border-bottom:1px solid rgba(255,255,255,0.06);

font-weight:600;

color:#ffffff;

padding:14px 18px;

}


/* body */

.card-body{

padding:18px;

}


/* footer */

.card-footer{

background:rgba(255,255,255,0.02);

border-top:1px solid rgba(255,255,255,0.05);

padding:14px 18px;

}

/* =====================================================
PRZYCISKI
===================================================== */

.btn-primary{
background:#ffc107;
border:none;
font-weight:600;
color:#111;
}

.btn-primary:hover{
background:#eab308;
}

.btn-outline-primary{
border-color:#ffc107;
color:#ffc107;
}

.btn-outline-primary:hover{
background:#ffc107;
color:#111;
}


/* =====================================================
HOW IT WORKS
===================================================== */

.features-section{

padding:90px 0;

}

.features-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;

margin-top:30px;

}

.feature-card{

background:rgba(20,35,60,0.75);

border-radius:18px;

border:1px solid rgba(255,255,255,0.08);

padding:30px;

color:#fff;

transition:.25s;

backdrop-filter:blur(8px);

box-shadow:0 10px 30px rgba(0,0,0,0.35);

position:relative;

}

.feature-card:hover{

transform:translateY(-6px);

border:1px solid rgba(255,180,0,0.35);

box-shadow:0 20px 45px rgba(0,0,0,0.45);

}

/* ikona */

.feature-icon{

width:58px;
height:58px;

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

border-radius:14px;

background:rgba(255,180,0,0.12);

margin-bottom:16px;

}

/* svg */

.feature-icon svg{

width:30px;
height:30px;

color:#ffb400;

stroke-width:2;

transition:.2s;

}

/* hover animacja */

.feature-card:hover .feature-icon svg{
transform:scale(1.1);
}

/* title */

.feature-card h3{

font-size:18px;

font-weight:700;

margin-bottom:10px;

}

/* text */

.feature-card p{

font-size:14px;

color:#9fb3c8;

line-height:1.4;

}

/* mobile */

@media(max-width:900px){

.features-grid{
grid-template-columns:1fr;
}

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

@media(max-width:768px){

.hero-home{
padding:50px 15px;
}

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

.hero-subtitle{
font-size:15px;
}

.section-title{
font-size:20px;
margin-bottom:10px;
}

.station-logo{
width:26px;
height:26px;
}

.station-brand{
font-size:14px;
}

.station-address{
font-size:11px;
}

.fuel-row{
font-size:13px;
}



.search-dropdown{
position:relative;
width:100%;
max-height:220px;
margin-top:6px;
border-radius:10px;
}

.hero-search-row{
flex-direction:column;
gap:8px;
}

}

/* =========================================
BRAKUJĄCE STYLE
========================================= */








.hero-city-page{
background:radial-gradient(circle at 30% 20%, #203a5c 0%, #142c4a 40%, #0c1e33 100%);
padding:45px 20px 35px;
color:white;
margin-bottom:40px;
}

/* =====================================================
HERO UPGRADE
===================================================== */

/* AI BUTTON */

.hero-ai{

display:flex;
justify-content:center;

margin-bottom:25px;

}

.hero-ai-btn{

display:flex;
align-items:center;
gap:12px;

padding:18px 28px;

font-size:18px;

border-radius:40px;

background:rgba(20,35,60,0.85);

border:1px solid rgba(255,255,255,0.2);

color:#fff;

text-decoration:none;

backdrop-filter:blur(10px);

box-shadow:0 10px 40px rgba(0,0,0,0.45);

transition:.25s;

}

.hero-ai-btn:hover{

transform:translateY(-2px);

border:1px solid rgba(255,180,0,0.6);

box-shadow:0 15px 45px rgba(0,0,0,0.6);

}

/* SEARCH */

.hero-search-wrapper{

max-width:720px;

margin:25px auto;

}

.hero-search-row{

max-width:720px;

margin:auto;

position:relative;

}

.hero-search-input{

border-radius:40px;

padding:16px 20px;

font-size:16px;

border:none;

width:100%;

height:56px;

box-shadow:0 20px 50px rgba(0,0,0,0.35);

}

.hero-search-input:focus{

outline:none;

box-shadow:0 0 0 3px rgba(255,180,0,0.3);

}

/* POPULARNE MIASTA */

.hero-cities{

margin-top:30px;

}

.hero-cities-title{

font-size:12px;

letter-spacing:1px;

opacity:.6;

margin-bottom:12px;

}

.hero-cities-list{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

}

.hero-city{

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

border:1px solid rgba(255,255,255,.15);

padding:8px 14px;

border-radius:20px;

font-size:14px;

text-decoration:none;

color:white;

transition:.2s;

}

.hero-city:hover{

background:#ffb400;

border-color:#ffb400;

color:#000;

}

.hero-search-input-wrap{

position:relative;

max-width:720px;
margin:auto;

}

.hero-search-input{

width:100%;

height:56px;

padding:0 60px 0 18px;

border-radius:40px;

border:none;

font-size:16px;

box-shadow:0 20px 50px rgba(0,0,0,0.35);

}

.hero-search-btn{

position:absolute;

right:6px;
top:6px;

width:44px;
height:44px;

border:none;

border-radius:50%;

background:#ffb400;

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

cursor:pointer;

}

.hero-search-btn svg{

width:20px;
height:20px;

}

/* =====================================================
NEARBY STATION CARDS
===================================================== */

.station-card-app{

border-radius:16px;

border:1px solid rgba(255,255,255,0.08);

background:rgba(20,35,60,0.75);

backdrop-filter:blur(8px);

transition:.25s;

color:white;

}

.station-card-app:hover{

transform:translateY(-6px);

border:1px solid rgba(255,180,0,0.35);

box-shadow:0 20px 45px rgba(0,0,0,0.45);

}


/* header */

.station-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:14px;

}

.station-brand{

display:flex;

gap:10px;

align-items:center;

}

.station-name a{

font-weight:700;

color:#fff;

text-decoration:none;

}

.station-address{

font-size:12px;

color:#9fb3c8;

}

/* distance */

.station-distance{

background:#22c55e;

color:white;

font-size:11px;

padding:4px 8px;

border-radius:8px;

}


/* prices */

.station-prices-app{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:6px;

margin-bottom:12px;

}

.station-prices-app .fuel{

background:#1f2f46;

border-radius:10px;

padding:8px;

text-align:center;

}

.station-prices-app .fuel span{

display:block;

font-size:11px;

opacity:.7;

}

.station-prices-app .fuel strong{

font-size:14px;

color:#ffb400;

}

.fuel-time{

font-size:10px;

opacity:.6;

margin-top:3px;

}


/* actions */

.station-actions{

display:flex;

gap:8px;

}

.station-actions .btn{

flex:1;

font-size:12px;

padding:6px 10px;

}

/* WHY */

.why-us{
padding:50px 0;
}

.why-title{
text-align:center;
margin-bottom:28px;
font-size:26px;
font-weight:700;
}

.why-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}

.why-box{
background:#0e223a;
border:1px solid rgba(255,255,255,.06);
border-radius:14px;
padding:18px;
text-align:center;
transition:.2s;
}

.why-box:hover{
transform:translateY(-3px);
border-color:#ffc107;
}

.why-box svg{
width:28px;
height:28px;
margin-bottom:8px;
color:#ffc107;
}

.why-box h3{
font-size:16px;
margin-bottom:6px;
}

.why-box p{
font-size:13px;
opacity:.8;
line-height:1.4;
}

@media (max-width:900px){

.why-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:500px){

.why-grid{
grid-template-columns:1fr;
}

}

.home-section{
padding:60px 0;
}

.home-section::before{
content:"";
display:block;
height:1px;
background:linear-gradient(
90deg,
transparent,
rgba(255,193,7,.2),
transparent
);
margin-bottom:40px;
}

/* CALCULATOR */

.fuel-calculator{
text-align:center;
}

.section-title{
font-size:28px;
margin-bottom:8px;
}

.section-lead{
opacity:.8;
margin-bottom:30px;
}

.fuel-calc-box{
max-width:600px;
margin:auto;
background:#0e223a;
border-radius:18px;
padding:28px;
border:1px solid rgba(255,255,255,.06);
}

.fuel-calc-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-bottom:20px;
}

.fuel-field label{
display:block;
font-size:13px;
margin-bottom:6px;
opacity:.7;
}

.fuel-field input{
width:100%;
padding:10px;
border-radius:8px;
border:none;
background:#081729;
color:white;
}

.fuel-calc-btn{
background:#ffc107;
border:none;
padding:12px 22px;
border-radius:10px;
font-weight:600;
cursor:pointer;
margin-bottom:18px;
}

.fuel-result{
font-size:20px;
font-weight:700;
}