.evropat-fuel {
--ev-blue:#103683; --ev-blue-dark:#0B245C; --ev-red:#A80504;
--ev-ink:#14213D; --ev-gray:#5A667E; --ev-blue-50:#EEF3FC; --ev-border:#DDE3EE;
--ev-radius-ui:8px; --ev-radius-card:16px;
max-width: 380px;
color: var(--ev-ink);
font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
font-size: 17px;
line-height: 1.6;
}
.evropat-fuel *,
.evropat-fuel *::before,
.evropat-fuel *::after { box-sizing: border-box; }
.evropat-fuel__title {
margin: 0 0 14px;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--ev-blue-dark);
}
.evropat-fuel__card {
position: relative;
overflow: hidden;
background: #fff;
border: 1px solid var(--ev-border);
border-radius: var(--ev-radius-card);
} .evropat-fuel__card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 4px;
background: var(--ev-red);
border-radius: 0 4px 4px 0;
} .evropat-fuel__head {
padding: 26px 24px 20px;
text-align: center;
background: var(--ev-blue-50);
border-bottom: 1px solid var(--ev-border);
}
.evropat-fuel__head-label {
font-size: .78rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ev-gray);
}
.evropat-fuel__value {
margin-top: 6px;
font-size: 2.6rem;
font-weight: 800; line-height: 1.1;
letter-spacing: -.02em;
color: var(--ev-blue);
font-variant-numeric: tabular-nums;
}
.evropat-fuel__head-sub {
margin-top: 2px;
font-size: .9rem;
font-weight: 500;
color: var(--ev-gray);
} .evropat-fuel__body {
padding: 18px 24px 20px;
text-align: center;
}
.evropat-fuel__body-label {
font-size: .88rem;
color: var(--ev-gray);
}
.evropat-fuel__prices {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.evropat-fuel__price {
font-size: 1.12rem;
font-weight: 700;
color: var(--ev-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.evropat-fuel__price--alt {
font-weight: 600;
color: var(--ev-gray);
}
.evropat-fuel__unit {
margin-left: 2px;
font-size: .82rem;
font-weight: 500;
color: var(--ev-gray);
}
.evropat-fuel__sep {
width: 1px;
height: 16px;
background: var(--ev-border);
}
.evropat-fuel__note {
margin-top: 6px;
font-size: .78rem;
color: #97a0b2;
} .evropat-fuel__more {
display: block;
padding: 13px 24px;
font-size: .9rem;
font-weight: 600;
text-align: center;
text-decoration: none;
color: var(--ev-blue);
border-top: 1px solid var(--ev-border);
transition: background-color .15s ease;
}
.evropat-fuel__more::after { content: " →"; }
.evropat-fuel__more:hover { background: var(--ev-blue-50); } .evropat-fuel--error p {
margin: 0;
padding: 16px;
font-size: .9rem;
color: var(--ev-gray);
background: var(--ev-blue-50);
border-radius: var(--ev-radius-card);
} .evropat-fuel--on-dark .evropat-fuel__title {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
} @media (max-width: 380px) {
.evropat-fuel__value { font-size: 2.2rem; }
.evropat-fuel__head,
.evropat-fuel__body { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.evropat-fuel__more { transition: none; }
}