/* =========================================================
   Avia.Day.Az — v2 minimal stylesheet
   ========================================================= */

:root {
    --bg:        #f4f6f9;
    --surface:   #ffffff;
    --line:      #e6e9ef;
    --line-2:    #eef1f5;
    --text:      #1a202c;
    --text-mut:  #667085;
    --text-sub:  #98a2b3;
    --brand:     #1a73e8;
    --brand-d:   #1558b6;
    --radius:    10px;
    --radius-sm: 6px;
    --shadow:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);

    --st-cancel:   #d92d20;
    --st-cancel-b: #fee4e2;
    --st-delay:    #b54708;
    --st-delay-b:  #fef0c7;
    --st-expected: #475467;
    --st-expected-b:#eaecf0;
    --st-arrived:  #067647;
    --st-arrived-b:#d1fadf;
    --st-checkin:  #026aa2;
    --st-checkin-b:#e0f2fe;
    --st-board:    #3538cd;
    --st-board-b:  #e0eaff;
    --st-bag:      #0086c9;
    --st-bag-b:    #ecfdff;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-d); text-decoration: underline; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Visually hidden (a11y) ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Skip-to-content link — visible only when focused via keyboard. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--brand);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 6px 0;
    font-weight: 500;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    outline: 2px solid var(--brand-d);
    outline-offset: 2px;
}

/* Keyboard focus ring — applied only when navigating with keyboard, not mouse. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 3px;
}
/* Suppress default browser outline on mouse/touch focus. */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Header ---------- */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.site-header__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
}
.site-header__logo img { display: block; height: 28px; width: auto; }
@media (min-width: 768px) {
    .site-header__brand {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }
    .site-header__logo img { height: 32px; }
}
.site-header__banner {
    display: none;
    margin-left: auto;
}
.ad-728x90 {
    min-width: 728px;
    min-height: 90px;
    text-align: center;
}
@media (min-width: 992px) {
    .site-header__banner { display: block; }
}

/* ---------- Language switcher ---------- */
.site-header__lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 3px;
    background: #f3f4f6;
    border-radius: 999px;
    flex-shrink: 0;
}
.site-header__lang--mobile {
    margin-left: auto;
    padding: 3px;
}
.site-header__lang--desktop {
    display: none;
    margin-left: 16px;
}
@media (min-width: 992px) {
    .site-header__lang--mobile  { display: none; }
    .site-header__lang--desktop { display: inline-flex; }
}
.lang-switch__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-decoration: none;
    border-radius: 999px;
    letter-spacing: 0.04em;
    transition: background-color .15s, color .15s;
}
.lang-switch__item:hover {
    color: #111827;
    background: #e5e7eb;
}
.lang-switch__item.is-current {
    background: #111827;
    color: #fff;
    cursor: default;
}

/* ---------- Portal navigation ---------- */
.portal-nav {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.portal-nav__inner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.portal-nav ul {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0; padding: 0;
    white-space: nowrap;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.portal-nav ul::-webkit-scrollbar { display: none; }
.portal-nav li { display: block; }
.portal-nav a {
    display: inline-block;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-mut);
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.portal-nav a:hover {
    color: var(--text);
    text-decoration: none;
}
.portal-nav .is-current a {
    color: var(--brand);
    border-bottom-color: var(--brand);
    font-weight: 500;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { margin: 18px 0 10px; font-size: 13px; color: var(--text-sub); }
.breadcrumbs ol {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.breadcrumbs li + li::before {
    content: "/";
    margin-right: 6px;
    color: var(--text-sub);
}
.breadcrumbs a { color: var(--text-mut); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs [aria-current="page"] { color: var(--text); }

/* ---------- Main / Intro ---------- */
.main { padding: 28px 20px 40px; }

.intro { margin-bottom: 20px; }
.intro__title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.intro__text {
    color: var(--text-mut);
    margin: 0;
}
.about__lead {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
    margin: 0 0 12px;
}
.about__lead-text { margin: 0; line-height: 1.6; }
.about__airport {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
    max-width: 280px;
}
.about__airport:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
}
.about__airport img {
    flex-shrink: 0;
    width: 48px; height: 48px;
    object-fit: contain;
}
.about__airport-text { display: flex; flex-direction: column; line-height: 1.25; }
.about__airport-text strong {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.about__airport-link {
    font-size: 12px;
    color: var(--brand);
    margin-top: 2px;
}

/* ---------- Search ---------- */
.search {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    margin-bottom: 18px;
}
.search__form {
    display: grid;
    grid-template-columns: 2fr 1.4fr auto;
    gap: 12px;
    align-items: end;
}
.search__label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-mut);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.search__select,
.search__input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.search__select:focus,
.search__input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(26,115,232,.15);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: #f2f4f7;
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: #e4e7ec; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-d); color: #fff; }

/* ---------- Tabs ---------- */
.board {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 10px 0;
    border-bottom: 1px solid var(--line);
    background: #fafbfc;
}
.tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-mut);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.tabs__btn:hover { color: var(--text); }
.tabs__btn.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}
.tabs__icon { width: 20px; height: 20px; fill: currentColor; }
.tabs__updated {
    margin-left: auto;
    padding: 0 16px;
    font-size: 12px;
    color: var(--text-sub);
}

/* ---------- Panels ---------- */
.panel { display: none; }
.panel.is-active { display: block; }

/* ---------- Flights (desktop table grid) ---------- */
.flights { display: block; }
.flights__empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-sub);
}

.flight__label { display: none; }

.flights__head,
.flight {
    position: relative;
    display: grid;
    grid-template-columns:
        90px                    /* time */
        minmax(180px, 1.6fr)    /* city */
        minmax(120px, 1fr)      /* airline */
        90px                    /* num */
        120px                   /* aircraft */
        100px                   /* terminal */
        minmax(160px, 1.2fr);   /* status */
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
}
/* Whole row → flight detail. Overlay lives on the num link; nested
   links (city/weather) layer above with z-index:2. */
.flight__num a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.flight__city a,
.flight__weather {
    position: relative;
    z-index: 2;
}
.flights__head {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-sub);
    background: #fafbfc;
    position: sticky;
    top: 0;
    z-index: 2;
}
.flight:last-child { border-bottom: 0; }
.flight:hover { background: #fafbfc; }

.flight__time {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.flight__time-main {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}
.flight__time-fact {
    font-size: 12px;
    color: var(--text-sub);
    margin-top: 2px;
}

.flight__city { min-width: 0; }
.flight__city a {
    font-weight: 500;
    color: var(--text);
}
.flight__city a:hover { color: var(--brand); text-decoration: none; }
.flight__weather {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    font-size: 13px;
    color: var(--text-mut);
    vertical-align: middle;
}
.flight__weather img { vertical-align: middle; }

.flight__airline { min-width: 0; }
.flight__airline img {
    display: block;
    max-height: 26px;
    max-width: 100px;
    width: auto;
    height: auto;
}
.flight__airline-name {
    font-size: 13px;
    color: var(--text-mut);
}

.flight__num a {
    font-weight: 600;
    color: var(--text);
}
.flight__num a:hover { color: var(--brand); text-decoration: none; }

.flight__aircraft,
.flight__term {
    font-size: 13px;
    color: var(--text-mut);
    min-width: 0;
}

/* ---------- Status pills ---------- */
.status-pill {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--st-expected-b);
    color: var(--st-expected);
    white-space: nowrap;
}
.status-pill.status-cancel             { background: var(--st-cancel-b);   color: var(--st-cancel); }
.status-pill.status-delay              { background: var(--st-delay-b);    color: var(--st-delay); }
.status-pill.status-expected           { background: var(--st-expected-b); color: var(--st-expected); }
.status-pill.status-arrived,
.status-pill.status-departed           { background: var(--st-arrived-b);  color: var(--st-arrived); }
.status-pill.status-check-in,
.status-pill.status-check-in-completed { background: var(--st-checkin-b);  color: var(--st-checkin); }
.status-pill.status-boarding           { background: var(--st-board-b);    color: var(--st-board); }
.status-pill.status-stairs-off         { background: var(--st-expected-b); color: var(--st-expected); }
.status-pill.status-baggage-reclaim    { background: var(--st-bag-b);      color: var(--st-bag); }

.flight__badges {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 12px;
    background: #f2f4f7;
    color: var(--text-mut);
    border-radius: 4px;
}
.badge__label { color: var(--text-sub); }

/* ---------- About / footer ---------- */
.about {
    margin-top: 32px;
    color: var(--text-mut);
    font-size: 14px;
}
.about__title {
    color: var(--text);
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 12px;
}
.about__sub {
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    margin: 22px 0 10px;
}
.about p { margin: 0 0 12px; line-height: 1.6; }
.about__list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.about__list li {
    position: relative;
    padding: 4px 0 4px 20px;
    line-height: 1.5;
}
.about__list li::before {
    content: "·";
    position: absolute;
    left: 6px;
    top: 2px;
    color: var(--brand);
    font-size: 20px;
    font-weight: 700;
}
.about strong { color: var(--text); }

.site-footer {
    margin-top: 32px;
    background: #1f2430;
    color: #c9d1dc;
    padding: 32px 0 0;
}
.site-footer h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 12px;
}
.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.site-footer a { color: #c9d1dc; }
.site-footer a:hover { color: #fff; }
.site-footer ul {
    list-style: none;
    margin: 0; padding: 0;
}
.site-footer ul li { margin-bottom: 6px; }
.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.site-footer__social li { margin: 0; }
.site-footer__copy {
    margin-top: 24px;
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
    font-size: 13px;
    color: #8b94a3;
}

/* Rating logos (Mail.ru Top, LiveInternet) — required for counting. */
.counters {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 16px;
    opacity: .55;
}
.counters__item { display: inline-block; line-height: 0; }
.counters__item img { display: block; border: 0; }

/* ==========================================================
   Responsive: <= 900px → mobile card
   ========================================================== */
@media (max-width: 900px) {
    .intro__title { font-size: 22px; }
    .about__lead { grid-template-columns: 1fr; gap: 14px; }
    .about__airport { max-width: none; }
    .search__form {
        grid-template-columns: 1fr 1fr;
    }
    .search__submit { grid-column: 1 / -1; }
    .search__submit .btn { width: 100%; }

    .flights__head { display: none; }

    .flight {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        grid-template-areas:
            "time city     status"
            "time airline  num"
            "time aircraft term";
        gap: 6px 12px;
        padding: 14px 16px;
        align-items: center;
    }
    .flight__time     { grid-area: time; align-self: start; }
    .flight__city     { grid-area: city; }
    .flight__status   { grid-area: status; justify-self: end; text-align: right; }
    .flight__airline  { grid-area: airline; }
    .flight__num      { grid-area: num; justify-self: end; }
    .flight__aircraft { grid-area: aircraft; font-size: 12px; }
    .flight__term     { grid-area: term; justify-self: end; font-size: 12px; text-align: right; }

    .flight__time-main { font-size: 20px; }
    .flight__city a    { font-size: 16px; }
    .flight__airline img { max-height: 24px; max-width: 90px; }
    .flight__label { display: inline; color: var(--text-sub); margin-right: 2px; }
    .flight__badges { grid-column: 2 / -1; justify-content: flex-end; margin-top: 2px; }

    .site-footer__inner { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 520px) {
    .container { padding: 0 14px; }
    .main { padding: 18px 14px 28px; }
    .site-header__inner { gap: 10px; }
    .site-header__logo img { height: 24px; }
    .site-header__airport img { height: 28px; }

    .intro__title { font-size: 20px; }
    .intro__text { font-size: 14px; }

    .search { padding: 14px; }
    .search__form { grid-template-columns: 1fr; }

    .tabs { padding: 6px 6px 0; }
    .tabs__btn { padding: 10px 12px; font-size: 14px; }
    .tabs__updated { display: none; }

    .flight {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        padding: 12px 14px;
        gap: 4px 10px;
    }
    .flight__time-main { font-size: 18px; }
    .flight__city a    { font-size: 15px; }
    .flight__airline img { max-height: 20px; max-width: 72px; }
    .status-pill { font-size: 11px; padding: 3px 8px; letter-spacing: 0.02em; }
    .flight__weather { margin-left: 6px; font-size: 12px; }
    .flight__weather img { width: 16px; height: 16px; }
    .flight__time-fact { font-size: 11px; }
    .flight__aircraft, .flight__term { font-size: 11px; }
}

/* Loading state */
.board__body.is-loading { opacity: .6; transition: opacity .2s; }

/* Flight detail card */
.flight-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 16px 0;
}
.flight-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line, #eef1f4);
}
.flight-card__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.flight-card__code {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.flight-card__dir {
    font-size: 13px;
    color: var(--text-mut, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.flight-card__status { font-size: 14px; padding: 6px 14px; }
.flight-card__body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px 28px;
    align-items: start;
}
.flight-card__logo {
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid var(--line, #eef1f4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    min-height: 80px;
}
.flight-card__logo img { max-width: 140px; max-height: 60px; }
.flight-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 24px;
    margin: 0;
}
.flight-card__row { margin: 0; }
.flight-card__row dt {
    font-size: 12px;
    color: var(--text-mut, #6b7280);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.flight-card__row dd {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text, #111);
}
.flight-card__row dd a { color: var(--brand, #1d4ed8); }
.flight-card__row--hero dd {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.flight-card__row--actual dd   { color: var(--st-arrived, #067647); }
.flight-card__row--expected dd { color: var(--st-delay, #b54708); }

@media (max-width: 720px) {
    .flight-card { padding: 16px; }
    .flight-card__head {
        margin-bottom: 14px;
        padding-bottom: 10px;
    }
    .flight-card__code { font-size: 20px; }
    .flight-card__body {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .flight-card__logo {
        min-width: 0;
        min-height: 0;
        padding: 6px 10px;
        align-self: start;
    }
    .flight-card__logo img { max-width: 110px; max-height: 44px; }
    /* Two-column meta grid for visual rhythm on mobile. */
    .flight-card__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 14px;
    }
    /* Hero row (plan/fact/expected) spans both columns with a large time. */
    .flight-card__row--hero {
        grid-column: 1 / -1;
        padding: 10px 12px;
        background: #f8fafc;
        border-radius: 10px;
    }
    .flight-card__row--hero dt { font-size: 11px; }
    .flight-card__row--hero dd {
        font-size: 32px;
        line-height: 1.1;
    }
    .flight-card__row dd { font-size: 15px; }
}

@media (max-width: 380px) {
    .flight-card__grid { grid-template-columns: 1fr; }
    .flight-card__row--hero dd { font-size: 30px; }
}

.flight-card + .flight-card { margin-top: 12px; }

.flight-schedule-link {
    margin: 0;
    font-size: 14px;
}
.flight-schedule-link a {
    color: var(--accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
}
.flight-schedule-link a:hover { text-decoration: underline; }

.flight-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.flight-updated {
    margin: 0;
    font-size: 13px;
    color: var(--text-mut, #6b7280);
    font-variant-numeric: tabular-nums;
}
.flight-schedule__head-text .flight-updated { margin-top: 8px; }

/* Flight schedule (list of upcoming operations of one r_num) */
.flight-schedule {
    background: #fff;
    border: 1px solid var(--line, #eef1f4);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 16px 0;
}
.flight-schedule__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.flight-schedule__head-text { min-width: 0; flex: 1; }
.flight-schedule__brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.flight-schedule__brand img {
    height: 48px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.flight-schedule__airline {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #111827);
}
.flight-schedule__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}
.flight-schedule__dir {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-mut, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.flight-schedule__lead {
    margin: 6px 0 0;
    color: var(--text-mut, #6b7280);
    font-size: 14px;
}
.flight-schedule__list { display: flex; flex-direction: column; gap: 6px; }
.flight-schedule__today {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 6px;
    border-radius: 999px;
    background: #eef6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}
.flight-schedule__row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--line, #eef1f4);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.flight-schedule__row:hover { border-color: #cbd5e1; background: #fafbfc; }
.flight-schedule__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.flight-schedule__city { font-weight: 500; }
.flight-schedule__term { color: var(--text-mut, #6b7280); font-size: 13px; }
.flight-schedule__status { font-size: 12px; padding: 4px 10px; }

@media (max-width: 720px) {
    .flight-schedule { padding: 16px; }
    .flight-schedule__row {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "time city"
            "status status"
            "term  term";
        gap: 6px 12px;
    }
    .flight-schedule__time   { grid-area: time; }
    .flight-schedule__city   { grid-area: city; }
    .flight-schedule__term   { grid-area: term; }
    .flight-schedule__status { grid-area: status; justify-self: start; }
}

/* 404 not-found page */
.not-found {
    max-width: 560px;
    margin: 32px auto 48px;
    padding: 24px;
    text-align: center;
}
.not-found__icon {
    color: var(--text-sub, #98a2b3);
    margin-bottom: 8px;
}
.not-found__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    color: var(--text, #1a202c);
}
.not-found__body {
    margin: 0 0 20px;
    color: var(--text-mut, #667085);
    font-size: 15px;
    line-height: 1.5;
}
.not-found__actions {
    margin: 0 0 28px;
}
.not-found__btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--brand, #1a73e8);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s;
}
.not-found__btn:hover {
    background: var(--brand-d, #1558b6);
}
.not-found__popular {
    margin-top: 24px;
    text-align: left;
}
.not-found__popular-label {
    margin: 0 0 10px;
    color: var(--text-mut, #667085);
    font-size: 13px;
}

/* Direction listing (all cities) — compact chip cloud */
.dir-list {
    margin: 24px 0;
}
.dir-list__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}
.dir-list__intro {
    margin: 0 0 10px;
    color: #6b7280;
    font-size: 13px;
}
.dir-list__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dir-list__item {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: background .15s, border-color .15s, color .15s;
}
.dir-list__item:hover {
    background: #eef2ff;
    border-color: var(--brand, #1d4ed8);
    color: var(--brand, #1d4ed8);
}
.dir-list__empty {
    color: #6b7280;
}

/* Unified search */
.search {
    position: relative;
    margin: 16px 0;
}
.search__box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.search__box:focus-within {
    border-color: var(--brand, #1d4ed8);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.search__icon {
    width: 18px; height: 18px;
    margin-left: 12px;
    color: #9ca3af;
    flex-shrink: 0;
}
.search__input {
    flex: 1;
    min-width: 0;
    padding: 12px 8px 12px 10px;
    font-size: 15px;
    border: 0;
    background: transparent;
    outline: none;
}
.search__clear {
    width: 32px; height: 32px;
    margin-right: 4px;
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 50%;
}
.search__clear:hover { background: #f3f4f6; color: #111827; }
.search__suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    z-index: 20;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    max-height: 320px;
    overflow-y: auto;
}
.search__suggest-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}
.search__suggest-item:hover a,
.search__suggest-item.is-active a {
    background: #f9fafb;
}
.search__suggest-type {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}
.search__suggest-type--city   { background: #dbeafe; color: #1d4ed8; }
.search__suggest-type--flight { background: #dcfce7; color: #15803d; }
.search__suggest-empty {
    padding: 10px 14px;
    color: #9ca3af;
    font-size: 14px;
}
.search__suggest-section {
    padding: 8px 14px 6px;
    color: #6b7280;
    font-size: 12px;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: #fafbfc;
    border-bottom: 1px solid var(--line-2, #eef1f5);
}
.search__suggest-section-sep {
    color: #d1d5db;
}
.search__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
}
.search__chips-label {
    font-size: 12px;
    color: #6b7280;
    margin-right: 4px;
}
.search__chip {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    border-radius: 999px;
    font-size: 12px;
    color: #374151;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.search__chip:hover {
    background: var(--brand, #1d4ed8);
    color: #fff;
}