.evropat-track { --ev-blue:       #103683; --ev-blue-dark:  #0B245C;
--ev-red:        #A80504; --ev-red-hover:  #8f0403;
--ev-ink:        #14213D; --ev-gray:       #5A667E; --ev-blue-50:    #EEF3FC; --ev-success:    #16A46B;
--ev-border:     #DDE3EE; --ev-radius-ui:   8px;
--ev-radius-card: 16px;
max-width: 560px;
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-track *,
.evropat-track *::before,
.evropat-track *::after { box-sizing: border-box; }
.evropat-track__title {
margin: 0 0 18px;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--ev-blue-dark);
} .evropat-track__label {
display: block;
margin-bottom: 8px;
font-size: .78rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ev-gray);
}
.evropat-track__row {
display: flex;
gap: 10px;
align-items: stretch;
}
.evropat-track__input {
flex: 1 1 auto;
min-width: 0;
padding: 13px 16px;
font-family: inherit;
font-size: 1rem;
color: var(--ev-ink);
background: #fff;
border: 1.5px solid var(--ev-border);
border-radius: var(--ev-radius-ui);
transition: border-color .15s ease, box-shadow .15s ease;
}
.evropat-track__input:focus {
outline: none;
border-color: var(--ev-blue);
box-shadow: 0 0 0 3px rgba(16, 54, 131, .16);
}
.evropat-track__input::placeholder { color: #9aa3b5; } .evropat-track__btn {
flex: 0 0 auto;
padding: 13px 24px;
font-family: inherit;
font-size: .95rem;
font-weight: 600;
letter-spacing: .02em;
color: #fff;
background: var(--ev-red);
border: none;
border-radius: var(--ev-radius-ui);
cursor: pointer;
transition: background-color .15s ease;
}
.evropat-track__btn:hover { background: var(--ev-red-hover); }
.evropat-track__btn:focus-visible {
outline: 3px solid rgba(16, 54, 131, .4);
outline-offset: 2px;
}
.evropat-track__btn:disabled { opacity: .6; cursor: default; }
.evropat-track__hint {
margin: 10px 2px 0;
font-size: .82rem;
color: var(--ev-gray);
} .evropat-track__status {
margin-top: 14px;
font-size: .9rem;
min-height: 1.2em;
}
.evropat-track__status.is-loading { color: var(--ev-gray); }
.evropat-track__status.is-error   { color: var(--ev-red); font-weight: 600; } .evropat-track__results { margin-top: 8px; }
.evropat-track__empty {
padding: 16px;
color: var(--ev-gray);
background: var(--ev-blue-50);
border-radius: var(--ev-radius-card);
}
.evropat-track__timeline {
list-style: none;
margin: 18px 0 0;
padding: 20px;
background: #fff;
border: 1px solid var(--ev-border);
border-radius: var(--ev-radius-card);
}
.evropat-track__event {
position: relative;
padding: 0 0 22px 26px;
} .evropat-track__event::before {
content: "";
position: absolute;
left: 5px;
top: 14px;
bottom: -4px;
width: 2px;
background: var(--ev-border);
}
.evropat-track__event:last-child { padding-bottom: 0; }
.evropat-track__event:last-child::before { display: none; }
.evropat-track__dot {
position: absolute;
left: 0;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--ev-border);
} .evropat-track__event.is-latest .evropat-track__dot {
background: var(--ev-blue);
border-color: var(--ev-blue);
box-shadow: 0 0 0 4px rgba(16, 54, 131, .15);
}
.evropat-track__event-state {
font-weight: 600;
color: var(--ev-ink);
}
.evropat-track__event.is-latest .evropat-track__event-state { color: var(--ev-blue); }
.evropat-track__event-info {
margin-top: 2px;
font-size: .9rem;
color: var(--ev-gray);
}
.evropat-track__event-time {
margin-top: 4px;
font-size: .8rem;
color: #97a0b2;
} @media (max-width: 420px) {
.evropat-track__row { flex-direction: column; }
.evropat-track__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.evropat-track__input,
.evropat-track__btn { transition: none; }
} .evropat-track--on-dark .evropat-track__title {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.evropat-track--on-dark .evropat-track__label {
color: rgba(255, 255, 255, .9);
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.evropat-track--on-dark .evropat-track__hint {
color: rgba(255, 255, 255, .85);
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.evropat-track--on-dark .evropat-track__status.is-loading {
color: rgba(255, 255, 255, .9);
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
} .evropat-track--on-dark .evropat-track__status.is-error {
color: #ffb4b0;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}