/**
 * Evropat shipment tracking — styles.
 * Tokens taken directly from the Evropat brand book (Онест type, brand blues,
 * red reserved for the action button, 8px UI / 16px card radii).
 * Everything is namespaced under .evropat-track to avoid theme clashes.
 */
.evropat-track {
    /* Brand colors */
    --ev-blue:       #103683;  /* primary */
    --ev-blue-dark:  #0B245C;
    --ev-red:        #A80504;  /* accent — action only */
    --ev-red-hover:  #8f0403;
    --ev-ink:        #14213D;  /* text */
    --ev-gray:       #5A667E;  /* muted */
    --ev-blue-50:    #EEF3FC;  /* light tint */
    --ev-success:    #16A46B;
    --ev-border:     #DDE3EE;

    /* Radii */
    --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);
}

/* UI label — SemiBold, uppercase, +6% tracking per the brand book */
.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; }

/* Action button — RED per the brand book ("Проследи пратка") */
.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);
}

/* Status line (loading / error) */
.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; }

/* Results */
.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;
}
/* vertical connector line */
.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);
}
/* latest event highlighted in brand blue (primary), not red */
.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;
}

/* Narrow screens: stack input and button */
@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; }
}

/* ===========================================================================
 * Variant: --on-dark  (added by [evropat_tracking variant="hero"])
 * Only lightens the "chrome" text that sits directly on the dark/photo hero
 * background. The input and the result timeline keep their own white surfaces,
 * so their dark text stays readable — we deliberately do NOT re-map the global
 * color tokens here (that would turn input text white-on-white).
 * ========================================================================= */
.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);
}
/* keep errors legible on dark instead of the deep brand red */
.evropat-track--on-dark .evropat-track__status.is-error {
    color: #ffb4b0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}