:root {
        --bg: #ffffff;
        --surface: #ffffff;
        --ink: #053227;
        --muted: #6b7280;
        --accent: #075e54;
        --accent-soft: #e3f3ee;
        --accent-soft-2: #fff7e3;
        --berry: #b1365b;
        --sun: #f6c453;
        --danger: #dc2626;
        --ok: #16a34a;
        --line: #e2e8f0;
        --shadow-soft: 0 18px 45px rgba(7, 94, 84, 0.1);
        --radius-lg: 18px;
        --radius-pill: 999px;
        --mint: #dff7f0;
        --mint-soft: #f3fcf8;
        --berry-soft: rgba(177, 54, 91, 0.08);
        --violet-link: #6f4ad8;
        --glass-border: rgba(255, 255, 255, 0.45);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font:
          15px/1.5 system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Inter,
          Arial,
          sans-serif;
        color: var(--ink);
        background: var(--bg);
      }

      .wrap {
        max-width: 1140px;
        margin: 0 auto;
        padding: 18px 16px 32px;
      }

      .screen-back {
        display: flex;
        align-items: center;
        margin: 8px 0 16px;
      }
      .suggest-wrapper {
        position: relative;
      }
      .suggest-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        z-index: 10;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: #ffffff;
        box-shadow: var(--shadow-soft);
        max-height: 240px;
        overflow-y: auto;
      }
      .suggest-panel.hidden {
        display: none;
      }
      .suggest-item {
        padding: 10px 14px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.6);
        cursor: pointer;
      }
      .suggest-item:last-child {
        border-bottom: none;
      }
      .suggest-item strong {
        font-size: 14px;
      }
      .suggest-item span {
        font-size: 12px;
        color: var(--muted);
      }
      .suggest-empty {
        padding: 10px 14px;
        font-size: 13px;
        color: var(--muted);
      }
      .card {
        background: var(--surface);
        border-radius: var(--radius-lg);
        border: 1px solid rgba(148, 163, 184, 0.28);
        box-shadow: var(--shadow-soft);
        padding: 14px 18px;
      }
      #searchForm {
        background: #f3faf8;
        border-color: rgba(7, 94, 84, 0.18);
      }
      .concierge-note {
        background: linear-gradient(145deg, var(--accent-soft-2), var(--accent-soft));
        border: 1px solid rgba(7, 94, 84, 0.16);
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(7, 94, 84, 0.12);
        padding: 14px 16px;
      }
      .concierge-note-inner {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }
      .concierge-note-icon {
        width: 36px;
        height: auto;
        flex-shrink: 0;
        margin-right: 2px;
      }
      .concierge-note p {
        margin: 0;
        font-size: 14.5px;
        font-style: italic;
        color: var(--ink);
      }
      .grid {
        display: grid;
        gap: 12px;
      }
      .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .row {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      input,
      select,
      button,
      .btn {
        font: inherit;
        border-radius: 12px;
        border: 1px solid var(--line);
        padding: 10px 12px;
        background: #ffffff;
      }
      input:focus,
select:focus,
button:focus,
.btn:focus {
  outline: none;
  border-color: rgba(7, 94, 84, 0.7);          /* темно-зелёный, без ядовитости */
  box-shadow: 0 0 0 1px rgba(7, 94, 84, 0.35); /* мягкая обводка */
}

      button,
      .btn {
        cursor: pointer;
        border-radius: var(--radius-pill);
        border: 1px solid transparent;
        padding: 10px 18px;
        color: #f9fafb;
        font-weight: 600;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, filter 0.18s ease;
      }
      .btn-primary-hero {
        padding: 13px 22px;
        font-size: 16px;
        box-shadow: 0 12px 30px rgba(7, 94, 84, 0.45);
        position: relative;
        overflow: hidden;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        animation: search-pulse 2.2s infinite ease-in-out;
        background: linear-gradient(135deg, #075e54, #0f766e);
        color: #f9fafb;
        border: 1px solid rgba(7, 94, 84, 0.2);
      }
      .btn-primary-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-120%);
        background: linear-gradient(
          120deg,
          transparent 0%,
          rgba(255, 255, 255, 0.65) 40%,
          transparent 80%
        );
        pointer-events: none;
        transition: transform 0.35s ease;
      }
      .btn-primary-hero:hover::after {
        transform: translateX(120%);
      }
      .btn-primary-hero:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 34px rgba(7, 94, 84, 0.48);
      }
      .btn-primary-hero:active {
        transform: translateY(0);
        box-shadow: 0 10px 26px rgba(7, 94, 84, 0.42);
      }
      @keyframes search-pulse {
        0%,
        100% {
          box-shadow: 0 10px 25px rgba(7, 94, 84, 0.35);
          transform: translateY(0);
        }
        50% {
          box-shadow: 0 14px 34px rgba(7, 94, 84, 0.45);
          transform: translateY(-1px);
        }
      }
      .btn-primary {
        background: linear-gradient(135deg, #075e54, #0f766e);
        color: #f9fafb;
        border: 1px solid rgba(7, 94, 84, 0.2);
        box-shadow: 0 12px 30px rgba(7, 94, 84, 0.4);
      }
      .btn-primary:hover {
        background: linear-gradient(135deg, #064e3b, #0d6b60);
        transform: translateY(-1px);
        box-shadow: 0 16px 36px rgba(7, 94, 84, 0.45);
      }
      .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 10px 24px rgba(7, 94, 84, 0.35);
      }
      .btn-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        box-shadow: none;
      }
      .btn-secondary {
        background: var(--accent-soft);
        color: var(--accent);
        border: 1px solid rgba(7, 94, 84, 0.35);
        box-shadow: 0 8px 18px rgba(7, 94, 84, 0.14);
      }
      .btn-secondary:hover {
        background: #d4f0e5;
        color: #064e3b;
        box-shadow: 0 10px 22px rgba(7, 94, 84, 0.18);
      }
      .btn-secondary:active {
        box-shadow: 0 6px 14px rgba(7, 94, 84, 0.16);
        transform: translateY(0);
      }
      .btn-secondary.is-active {
        background: #c8e8dc;
        color: #064e3b;
        border-color: rgba(7, 94, 84, 0.45);
        box-shadow: 0 10px 22px rgba(7, 94, 84, 0.2);
      }
      .btn-outline {
        background: #ffffff;
        color: #0b3d31;
        border: 1px solid rgba(7, 94, 84, 0.5);
        box-shadow: none;
      }
      .btn-outline:hover {
        background: #f3fbf8;
        box-shadow: 0 8px 18px rgba(7, 94, 84, 0.12);
      }
      .btn-utility {
        background: var(--mint-soft);
        color: #0f3f33;
        border: 1px solid rgba(7, 94, 84, 0.28);
        box-shadow: none;
      }

      .btn-sm {
        font-size: 10px;
        line-height: 1.25;
        border-radius: calc(var(--radius-pill) - 4px);
      }
      .btn-utility:hover {
        background: #e8f3ef;
        color: #053227;
        border-color: rgba(7, 94, 84, 0.36);
      }
      .btn-ghost {
        background: transparent;
        color: var(--accent);
        border-color: rgba(148, 163, 184, 0.6);
      }
      .aviasales-all-wrap {
        margin: 24px auto 0;
        text-align: center;
      }
      .aviasales-btn-ticket,
      .aviasales-btn-all {
        font-weight: 600;
        padding: 10px 18px;
        border-radius: var(--radius-pill);
        box-shadow: 0 12px 30px rgba(7, 94, 84, 0.4);
      }
      .aviasales-btn-all {
        min-width: 260px;
        max-width: 320px;
        font-size: 15px;
      }
      .aviasales-btn-ticket:hover,
      .aviasales-btn-all:hover {
        text-decoration: none;
      }
      .hint {
        font-size: 12px;
        color: var(--muted);
        margin-top: 3px;
      }
      .label {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 4px;
      }
      .section-title {
        margin: 18px 0 10px;
        font-weight: 600;
        font-size: 16px;
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .recent-scroll-wrap {
        position: relative;
        margin-top: 6px;
        padding: 6px 0;
      }
      .recent-scroll {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-right: 32px;
        position: relative;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .recent-scroll::-webkit-scrollbar {
        height: 6px;
      }
      .recent-scroll::-webkit-scrollbar-thumb {
        background: rgba(5, 50, 39, 0.18);
        border-radius: 999px;
      }
      .recent-fade {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 38px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--surface) 70%);
      }
      .chip {
        border-radius: var(--radius-pill);
        padding: 7px 11px;
        background: rgba(177, 54, 91, 0.08);
        color: #7a1238;
        border: 1px solid rgba(177, 54, 91, 0.35);
        font-size: 13px;
        cursor: pointer;
        scroll-snap-align: start;
        transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
          transform 0.12s ease;
      }
      .chip:hover,
      .pill:hover {
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
        transform: translateY(-1px);
      }
      .chip#summaryChip {
        background: var(--accent-soft);
        color: var(--accent);
        border-color: rgba(45, 212, 191, 0.45);
        cursor: default;
      }
      .divider {
        height: 1px;
        margin: 14px 0 10px;
        background: linear-gradient(
          90deg,
          rgba(148, 163, 184, 0.3),
          rgba(148, 163, 184, 0)
        );
      }
      .two-col {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 16px;
        margin-top: 12px;
      }
      .filters-block {
        position: sticky;
        top: 12px;
        align-self: start;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        padding: 14px 16px 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
      }
      .filters-block::-webkit-scrollbar {
        width: 3px;
      }
      .filters-block::-webkit-scrollbar-track {
        background: transparent;
      }
      .filters-block::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.35);
        border-radius: 999px;
      }
      .filters-block:hover::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.5);
      }
      .filters-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .filters-block .section-title {
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 700;
        color: #053227;
        letter-spacing: 0.01em;
      }
      .filters-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .filters-section + .filters-section {
        margin-top: 4px;
      }
      .filters-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .filters-close {
        display: none;
        background: none;
        border: none;
        font-size: 20px;
        line-height: 1;
        color: rgba(5, 50, 39, 0.6);
        cursor: pointer;
      }
      .filter-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .filters-block .label {
        font-size: 14px;
        font-weight: 500;
        color: #3c5f56eb; /* мягкий серый вместо почти чёрного */
        margin-bottom: 4px;
      }
      .filter-option {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 4px 2px;
        min-height: 30px;
        font-size: 14px;
        color: #0f3f33;
      }
      .filter-option input {
        width: 16px;
        height: 16px;
        accent-color: #0b3d31;
      }
      .filter-option span,
      .time-pill span {
        color: #0f3f33;
      }
      .time-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 2px;
      }
      .time-group-title {
        font-size: 13px;
        font-weight: 650;
        color: #0b3d31;
      }
      .time-pill-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .budget-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .budget-row input[type="number"] {
        flex: 1;
        min-width: 0;
        height: 38px;
      }
      .budget-row input[type="number"] {
        -moz-appearance: textfield;
      }
      .budget-row input[type="number"]::-webkit-outer-spin-button,
      .budget-row input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .budget-separator {
        color: var(--muted);
        font-weight: 500;
      }
      .duration-wrap {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
   
    /* Ползунок длительности рейса — светло-серый, без зелёной заливки и без обводки */

#durMax {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;      /* светло-серый трек */
  outline: none;
}

/* Chrome / Edge / Safari */
#durMax::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;      /* такой же светло-серый, без “прогресса” */
}

#durMax::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;      /* белый кружок */
  border: none;             /* без обводки */
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
  margin-top: -5px;         /* чтобы встал по центру трека */
}

/* Firefox */
#durMax::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;      /* трек */
}

#durMax::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;      /* прогресс такой же светло-серый, убираем зелёную заливку */
}

#durMax::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: none;             /* без обводки */
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12);
}

      .duration-scale {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #9ca3af; /* более светлый серый */
        padding: 0 2px;
        margin-top: 2px;
      }
      .duration-scale span {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
      }
      .duration-scale span:not(:last-child)::after {
        content: "·";
        color: #9ca3af;
        font-weight: 600;
        display: inline-block;
        margin-left: 6px;
      }
      .duration-current {
        font-size: 15px;
        font-weight: 400;
        color: #0b3d31;
        font-style: italic; /* курсив для строки “Сейчас: …” */
      }
      .duration-current strong {
        font-weight: 600;
      }
      .duration-note {
        font-size: 12.5px;
        color: #9ca3af;
      }
      .filters-sheet-footer {
        display: none;
        gap: 10px;
      }
      .filters-sheet-overlay {
        display: none;
      }
      .filters-mobile-toggle {
        display: none;
        justify-content: flex-end;
        margin-bottom: 6px;
      }
      .link-btn {
        background: none;
        border: none;
        color: var(--accent);
        cursor: pointer;
        padding: 4px 6px;
        font-size: 13px;
      }
      #matrixSection.hidden {
        display: none;
      }
      .no-results-card {
        border: 1px solid rgba(148, 163, 184, 0.6);
        border-radius: 16px;
        padding: 18px;
        box-shadow: 0 10px 26px rgba(5, 50, 39, 0.08);
        background: #ffffff;
        text-align: center;
        font-size: 15px;
      }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: var(--radius-pill);
        border: 1px solid var(--line);
        font-size: 13px;
        background: #f9fafb;
        cursor: pointer;
        transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease,
          transform 0.12s ease;
      }
      .pill input {
        width: auto;
        padding: 0;
        border: none;
        box-shadow: none;
      }
      #airlineFilter {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .toolbar {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface);
        border: 1px solid rgba(148, 163, 184, 0.25);
        border-radius: var(--radius-pill);
        padding: 8px 11px;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
      }
      .toolbar select {
        border-radius: 999px;
        padding: 10px 14px;
        background: #ffffff;
        border: 1px solid rgba(148, 163, 184, 0.7);
        box-shadow: 0 12px 22px rgba(7, 94, 84, 0.08);
      }
      .toolbar select option {
        background: #ffffff;
        color: var(--ink);
      }
      .toolbar select option:checked {
        background: #e8f3ef;
      }
      .toolbar select option:hover {
        background: #f4fbf8;
      }
.topblock {
  margin: 0 auto 16px;
  max-width: 960px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(252, 250, 246, 0.96), rgba(241, 249, 247, 0.94)), #ffffff;
  border: 1px solid rgba(213, 223, 219, 0.9);
  box-shadow: 0 14px 34px rgba(7, 94, 84, 0.13);
  backdrop-filter: blur(18px);
  position: relative;
  padding: 16px 18px 14px;
}

.topblock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 16%, rgba(250, 244, 232, 0.32), transparent 32%);
  pointer-events: none;
}

.topblock-header {
  position: relative;
}

.topblock-heading {
  text-align: left;
  max-width: 100%;
}

.topblock-title,
.topblock .section-title {
  font-size: 19px;
  font-weight: 760;
  letter-spacing: 0.01em;
  color: #0b3d31;
  margin: 0;
}

.topblock-subtitle {
  font-size: 13px;
  color: rgba(5, 50, 39, 0.78);
  margin-top: 8px;
  margin-bottom: 18px;
  max-width: 100%;
}

.topblock-seal-wrap {
  position: absolute;
  top: -42px;
  right: -42px;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  z-index: 6;
}

.topblock-seal {
  width: 80px;
  height: auto;
  display: block;
}

.topblock-seal-text {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(5, 50, 39, 0.75);
  white-space: nowrap;
  margin-left: 8px;
  margin-top: 30px;
}

.topblock-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}

.topblock-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-right: 4px;
}

.topblock .tooltip-trigger {
  color: var(--accent);
  text-decoration: none;
  position: relative;
  z-index: 1045;
}

.topblock .tooltip-trigger:hover {
  text-decoration: none;
}

@media (max-width: 1100px) {
  .topblock-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .topblock {
    padding: 18px 14px 14px;
  }

  .topblock-header {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .topblock-heading {
    max-width: 100%;
  }

  .topblock-seal-wrap {
    align-self: flex-end;
  }

  .topblock-seal-text {
    white-space: normal;
    margin-top: 12px;
  }

  .topblock-list {
    grid-template-columns: 1fr;
  }
}
/* === Yuvia: топ-рекомендации (билеты) — НОВЫЙ ШАБЛОН АВИАБИЛЕТА === */

#yuviaTopBlock {
  margin-bottom: 24px;
}

#yuviaTopList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
/* === Авиабилет в блоке "Комфортный старт" === */
.topcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  --transition: 0.25s;
  --spark: 1.8s;
  --speed: 1.2s;
}

.topcard::before {
  content: "";
  position: absolute;
  inset: -12px;
  background: radial-gradient(120% 120% at 50% 35%, rgba(222, 245, 235, 0.55), rgba(248, 241, 231, 0.12));
  filter: blur(18px);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.topcard .container {
  margin: 0 auto;
  width: 250px;
  background-color: #ffffffd4;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 10px 30px rgba(8, 52, 40, 0.08);
  border: none;
}
.topcard .first {
  min-height: 150px;  /* верхняя часть билета */
  height:190px;      /* фиксируем высоту, чтобы stub не "заезжал" */
  overflow: hidden;
}

.topcard .second {
  min-height: 60px;   /* «хвостик» / stub */
  height: 80px;
  border-top: 3px solid rgb(234 242 239);
}
/* Общие правила для всех кружочков-уголков билета */
.topcard .corner {
  position: absolute;   /* приклеиваем поверх контейнера */
  width: 17px;          /* ширина кружочка */
  height: 17px;         /* высота кружочка (равна ширине → круг) */
  border-radius: 50%;   /* из квадрата делаем круг */
}
.topcard .corner.top    { top: -8px; }
.topcard .corner.bottom { bottom: -8px; }
.topcard .corner.left   { left: -8px; }
.topcard .corner.right  { right: -8px; }
.topcard .corner { z-index: 2; }

/* 1) Шампань только для верхних двух кружочков верхнего блока */
.topcard .first .top.corner {
  background-color: rgb(244 246 242); /* шампань */
}

/* 2) Мята для всех остальных кружочков */
.topcard .first .bottom.corner,
.topcard .second .top.corner,
.topcard .second .bottom.corner {
  background-color: rgb(234 242 239); /* мятный */
}
/* 3) Отступы внутри контейнера */
.topcard .spacer {
  padding: 10px 10px 10px 10px;
}
.topcard .spacer2 {
  padding: 5px 10px 5px 5px;
}
/* Лейбл сверху билета (ЗОЛОТАЯ СЕРЕДИНА и т.п.) */
.topcard .ticket-label {
  font-size: 10px;           /* мелкий текст */
  letter-spacing: 0.06em;    /* буквы чуть "расползлись" — как печать */
  text-transform: uppercase; /* на всякий случай, если забудем .toUpperCase() */
  font-weight: 700;          /* пожирнее */
  color: #805e1a;         /* наш золотой цвет из палитры */
  margin-bottom: 12px;       /* отступ вниз, чтобы отделить от городов */
}

/* Строка с городами и самолётиком */
.topcard .ticket-route-row {
  display: grid;            /* ставим элементы в ряд: город – самолёт – город */
  align-items: center;     /* выравниваем по центру  */
  grid-template-columns: 1fr auto 1fr; 
  gap: 10px;                /* запас на случай, если билеты ужмём */
  margin-bottom: 8px;      /* отступ вниз, дальше пойдет текст про аэропорты и т.д. */
}

/* Общий стиль для блоков города */
.topcard .ticket-city {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  gap: 1px;

  justify-self: stretch;       /* NEW: равная ширина в grid */
  width: 100%;                 /* NEW: не сжиматься по контенту */
  justify-content: flex-start; /* NEW: код/город всегда “сверху”, а не плавают */
}

/* Крупные коды городов: BUD / LTN */
.topcard .ticket-city-code {
  font-size: 17px;
  font-weight: 800;
  align-items: center;
  letter-spacing: 0.06em;
  color: rgb(53 77 58);

  line-height: 1.1; /* NEW: фикс “полки” кода, чтобы SVO/LED были на одной высоте */
}


/* Подписи под кодами: Budapest / Luton Airport */
.topcard .ticket-city-name {
  font-size: 12px;
  align-items: center;
  font-weight: 500;
  color: rgba(5, 50, 39, 0.78);

  line-height: 1.2;
  min-height: 2.4em;

  display: -webkit-box;        /* NEW */
  -webkit-box-orient: vertical;/* NEW */
  -webkit-line-clamp: 2;       /* NEW: максимум 2 строки */
  overflow: hidden;            /* NEW */
}



/* Самолётик по центру */
.topcard .ticket-plane {
  font-size: 18px;
  line-height: 1;
  color: rgb(53 77 58);        /* тёмно-зелёный самолёт */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;           /* немного воздуха слева/справа */
}

.topcard .ticket-legs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.topcard .ticket-leg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.topcard .ticket-leg-label {
  color: rgb(53 77 58);
  font-weight: 650;
  font-size: 12px;
}

.topcard .ticket-leg-text {
  color: rgba(5, 50, 39, 0.78);
  font-weight: 400;
  font-size: 12px;
}

.topcard .ticket-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* всегда 2 колонки */
  column-gap: 10px;              /* меньше расстояние — больше места тексту */
  row-gap: 10px;
}
.topcard .ticket-info-col { 
  min-width: 0;                  /* критично для переноса текста внутри колонки */
}


.topcard .ticket-info-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #064e3b;
}

.topcard .ticket-info-row {
  display: flex;
  flex-direction: column;      /* ключ и значение — столбиком */
  align-items: flex-start;
  gap: 2px;                    /* маленький зазор между строками */
  font-size: 12px;
  line-height: 1.2;
}


.topcard .ticket-info-k {
  color: var(--muted);
  white-space: normal;         /* можно переносить */
  overflow-wrap: anywhere;     /* даже длинные слова/названия */
}

.topcard .ticket-info-v {
  color: #0f3f33;
  text-align: left;            /* теперь это строка под подписью */
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: 600;            /* чтобы визуально читалось как “значение” */
}


.topcard .ticket-stub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}

.topcard .ticket-price {
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  color: #354d3a;
}

.topcard .ticket-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.topcard .ticket-actions.action-bar {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.topcard .ticket-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  min-height: 38px;
  border-radius: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topcard .ticket-actions .btn.btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #0f3f33;
  border: 1px solid rgba(7, 94, 84, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 6px 14px rgba(7, 94, 84, 0.1);
}

.topcard .ticket-actions .btn.btn-secondary:hover {
  background: #f3fbf8;
  border-color: rgba(7, 94, 84, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 9px 18px rgba(7, 94, 84, 0.14);
}

.topcard .ticket-actions .btn.btn-primary {
  background: linear-gradient(135deg, #e5f7f1, #c6ebdd);
  color: #0f3f33;
  border: 1px solid rgba(7, 94, 84, 0.28);
  box-shadow: 0 10px 22px rgba(7, 94, 84, 0.16);
}

.topcard .ticket-actions .btn.btn-primary:hover {
  background: linear-gradient(135deg, #d7f3e9, #b8e4d4);
  border-color: rgba(7, 94, 84, 0.34);
  box-shadow: 0 12px 26px rgba(7, 94, 84, 0.2);
}

.topcard .ticket-actions .btn-spark{
  --cut: 0.12em;
  --active: 0;

  /* defaults (будут переопределены модификаторами) */
  --bg:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.55));
  --border: rgba(148,163,184,0.35);
  --shadow: 0 10px 22px rgba(7,94,84,0.10);

  --text1: rgba(11,61,49,0.92);
  --text2: rgba(11,61,49,0.72);
  --text1h: rgba(11,61,49,0.98);
  --text2h: rgba(11,61,49,0.78);

  --spark-color: rgba(11,61,49,0.50);

  background: transparent;
  border: 0;
  cursor: pointer;

  font-size: 11px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 12px;

  display: grid;
  place-items: center;
  white-space: nowrap;

  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}

.topcard .ticket-actions .btn-spark .backdrop{
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: filter 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.topcard .ticket-actions .btn-spark .text{
  position: relative;
  z-index: 2;
  color: var(--text1);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.06);
  transition: color 0.18s ease;
}

/* hover / focus */
.topcard .ticket-actions .btn-spark:hover,
.topcard .ticket-actions .btn-spark:focus-visible{
  transform: translateY(-1px);
}

.topcard .ticket-actions .btn-spark:hover .backdrop,
.topcard .ticket-actions .btn-spark:focus-visible .backdrop{
  filter: brightness(1.02);
  box-shadow: 0 12px 22px rgba(7,94,84,0.12);
}

.topcard .ticket-actions .btn-spark:hover .text,
.topcard .ticket-actions .btn-spark:focus-visible .text{
  color: var(--text1h);
}

.topcard .ticket-actions .btn-spark:active{
  transform: translateY(0);
  filter: brightness(0.99);
  box-shadow: 0 6px 14px rgba(7,94,84,0.12);
}

/* ===== spark effect ===== */
.topcard .ticket-actions .btn-spark .spark{
  position: absolute;
  inset: 0;
  border-radius: 14px;
  rotate: 0deg;
  overflow: hidden;
  mask: linear-gradient(white, transparent 65%);
  animation: topcard-spark-flip calc(var(--spark) * 2) infinite steps(2, end);
  pointer-events: none;
}

@keyframes topcard-spark-flip{ to{ rotate: 360deg; } }

.topcard .ticket-actions .btn-spark .spark:before{
  content: "";
  position: absolute;
  width: 220%;
  aspect-ratio: 1;
  inset: 0 auto auto 50%;
  translate: -50% -18%;
  transform: rotate(-90deg);
  opacity: 0.2; /* мягче, не кричит */
  background: conic-gradient(
    from 0deg,
    transparent 0 330deg,
    var(--spark-color) 360deg
  );
  animation: topcard-spark-rotate var(--spark) linear infinite both;
}

@keyframes topcard-spark-rotate{ to{ transform: rotate(90deg); } }

.topcard .ticket-actions .btn-spark .spark:after{
  content: "";
  position: absolute;
  inset: var(--cut);
  border-radius: 12px;
}

/* ===== variants ===== */

/* Champagne: “Открыть в выдаче” */
.topcard .ticket-actions .btn-spark--champagne {
    --bg: linear-gradient(180deg, rgb(248 240 226 / 12%), rgb(251 250 246 / 73%));
    --border: rgb(160 130 75 / 5%);
    --shadow: 0 10px 20px rgba(160, 130, 75, 0.12);
    --text1: rgb(79 57 14 / 79%);
    --text1h: rgb(79 57 14 / 90%);
    --spark-color: rgba(160, 130, 75, 0.22);
}

/* Mint: “Купить на Aviasales” */
.topcard .ticket-actions .btn-spark--mint {
    --bg: linear-gradient(170deg, rgb(254 255 254 / 84%), rgb(116 162 150 / 14%), rgb(124 180 166 / 34%));
    --border: rgb(37 110 94 / 0%);
    --shadow: 0 10px 22px rgba(21, 92, 76, 0.14);
    --text1: rgb(67 101 92);
    --text1h: rgba(22, 70, 58, 0.98);
    --spark-color: rgba(37, 110, 94, 0.25);
}

.matrix-calendar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 8px;
        margin-top: 4px;
      }
      .matrix-day {
        border-radius: 14px;
        padding: 8px 10px;
        background: rgba(15, 23, 42, 0.02);
        border: 1px solid rgba(148, 163, 184, 0.5);
        font-size: 12px;
        cursor: pointer;
        transition:
          transform 0.12s ease,
          box-shadow 0.12s ease,
          border-color 0.12s ease,
          background 0.12s ease;
      }
      .matrix-day:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
        border-color: rgba(7, 94, 84, 0.5);
      }
      .matrix-day__date {
        font-weight: 500;
        margin-bottom: 2px;
      }
      .matrix-day__price {
        font-size: 13px;
      }
      .matrix-day.cheapest {
        background: linear-gradient(135deg, rgba(7, 94, 84, 0.06), rgba(7, 94, 84, 0.18));
        border-color: rgba(7, 94, 84, 0.75);
      }
      .matrix-day.selected {
        outline: 2px solid rgba(56, 189, 248, 0.9);
      }
      .bad {
        color: var(--danger);
      }
      .ok {
        color: var(--ok);
      }
      .skeleton {
        height: 62px;
        border-radius: 12px;
        background: linear-gradient(
          90deg,
          #f4f7fb 25%,
          #edf2f7 37%,
          #f4f7fb 63%
        );
        background-size: 200% 100%;
        animation: sh 1.1s ease-in-out infinite;
      }
      @keyframes sh {
        0% {
          background-position: -200% 0;
        }
        100% {
          background-position: 200% 0;
        }
      } /* Бренд в шапке */
      .brand-shell {
        background: linear-gradient(120deg, rgba(7, 94, 84, 0.12), rgba(111, 74, 216, 0.08));
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 16px 48px rgba(7, 94, 84, 0.15);
        border-radius: 24px;
        padding: 16px 18px;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        backdrop-filter: blur(8px);
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        width: 100%;
      }
      .brand-compact {
        justify-content: flex-start;
      }
      .brand-logo {
        width: 64px;
        height: auto;
      }
      .brand-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
      }
      .brand-name {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: 0.02em;
      }
      .brand-tagline {
        font-size: 13px;
        color: rgba(5, 50, 39, 0.65);
      }
      .brand-subline {
        font-size: 13px;
        color: var(--accent);
        text-transform: none;
        letter-spacing: 0.01em;
        margin-top: 1px;
        font-weight: 700;
        text-decoration: none;
        cursor: default;
      }
.search-summary {
  margin: 0 0 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #0f4f43;
  font-size: 14px;
  box-shadow: none;
  border: none;
  position: relative;
}

.search-summary--clickable {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: none;
}

.search-summary--clickable:hover,
.search-summary--clickable:focus-visible {
  cursor: default;
  background: transparent;
  box-shadow: none;
  transform: none;
  outline: none;
}



/* маленький тонкий заголовок слева */
.search-summary--clickable::before {
  content: "Текущий поиск";
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(5, 50, 39, 0.55);
  margin-right: 8px;
  padding-right: 10px;
  border-right: 1px solid rgba(148, 163, 184, 0.45);
  flex-shrink: 0;
  white-space: nowrap;
}

.search-summary-divider {
  color: #cbd5e1;
  font-weight: 600;
}

      .search-inline-editor {
        margin-bottom: 0;
      }
      .inline-editor {
        display: grid;
        gap: 12px;
      }
      .inline-editor-heading {
        font-weight: 700;
        color: #0f4f43;
        font-size: 16px;
      }
      .search-inline-grid {
        display: grid;
        gap: 10px;
        align-items: end;
      }
      .inline-route-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .inline-dates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
      }
      .search-inline-grid .field {
        width: 100%;
      }
      .search-inline-grid input[type="date"],
      .search-inline-grid input[type="text"],
      .search-inline-grid input[type="search"],
      .search-inline-grid .pax-trigger {
        width: 100%;
      }
      .inline-swap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2px;
      }
      .inline-swap .pill {
        padding: 10px 12px;
        border-radius: 12px;
      }
      .inline-oneway-row {
        grid-column: 1 / span 2;
        margin-top: 2px;
      }
      .search-inline-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
        flex-wrap: wrap;
      }
      .search-inline-actions .actions-spacer {
        flex: 1;
      }
      .search-overlay {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 1200;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
      }
      .search-overlay-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.45);
        box-shadow: 0 18px 45px rgba(7, 94, 84, 0.18);
        padding: 14px 16px 16px;
        width: min(440px, 100%);
        position: absolute;
        overflow: visible;
      }
      .search-overlay-title {
        font-size: 17px;
        font-weight: 750;
        margin-bottom: 6px;
        color: #0b3d31;
        text-align: left;
      }
      .search-overlay-handle {
        display: none;
        width: 60px;
        height: 5px;
        border-radius: 999px;
        background: rgba(5, 50, 39, 0.18);
        margin: 0 auto 10px;
      }
      body.overlay-locked {
        overflow: hidden;
      }
      .search-inline-actions .btn-primary {
        padding-left: 18px;
        padding-right: 18px;
      }
      .pax-inline-actions {
        margin-top: 8px;
      }
      /* ------- Форма поиска ------- */
      .search-grid input,
      .pax-trigger {
        height: 48px;
        padding-top: 9px;
        padding-bottom: 9px;
      }
      .search-grid {
        display: grid;
        grid-template-columns: 1.25fr 52px 1.25fr 0.9fr 0.9fr 1.05fr;
        grid-auto-rows: auto;
        column-gap: 14px;
        row-gap: 6px;
        align-items: start;
      }
      .search-grid .label {
        margin: 0;
        align-self: end;
      }
      .search-grid .hint {
        margin: 0;
        align-self: start;
        font-size: 12px;
      }
      #originIataHint {
        grid-column: 1;
      }
      #destIataHint {
        grid-column: 3;
      }
      #departHint {
        grid-column: 4;
      }
      #retHint {
        grid-column: 5;
      }
      .oneway-row {
        grid-column: 4 / span 2;
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-start;
        margin-top: 6px;
      }
      .oneway-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        color: var(--ink);
        font-size: 14px;
      }
      .oneway-toggle input {
        appearance: none;
        width: 38px;
        height: 22px;
        border-radius: 999px;
        background: #e5e7eb;
        border: 1px solid #cbd5e1;
        position: relative;
        transition: all 0.18s ease;
      }
      .oneway-toggle input::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
        transition: transform 0.18s ease;
      }
      .oneway-toggle input:checked {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 8px 18px rgba(7, 94, 84, 0.25);
      }
      .oneway-toggle input:checked::after {
        transform: translateX(14px);
      }
      .pax-hint-placeholder {
        min-height: 16px;
        font-size: 12px;
        align-self: start;
        grid-column: 6;
      }
      .swap-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-10px);
      }
      .swap-cell--full {
      }
      .swap-btn {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(7, 94, 84, 0.18);
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
        color: #075e54;
        box-shadow: 0 6px 18px rgba(7, 94, 84, 0.2);
        cursor: pointer;
        padding: 0;
      }
      .swap-btn:hover {
        background: #ecfdf5;
      }
      .search-actions-row {
        margin-top: 14px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }
      .trip-preferences {
        margin-top: 16px;
        border: 1px solid rgba(7, 94, 84, 0.12);
        border-radius: 16px;
        padding: 16px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .trip-preferences .label {
        font-weight: 600;
        font-size: 14px;
        color: #064e3b;
        margin-bottom: 6px;
      }
      .trip-style,
      .trip-triggers {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .chips-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .chip-style {
        min-width: 0;
        white-space: normal;
        text-align: center;
      } /* Пассажиры */
      .pax-field {
        position: relative;
      }
      .pax-trigger {
        width: 100%;
        border-radius: 12px;
        border: 1px solid var(--line);
        padding: 6px 34px 6px 12px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        cursor: pointer;
        position: relative;
        color: var(--ink);
      }
      .pax-main {
        font-size: 13px;
        font-weight: 600;
      }
      .pax-sub {
        font-size: 10px;
        color: #9ca3af;
        margin-top: 1px;
      }
      .pax-chevron {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--muted);
      }
      .pax-panel {
        position: absolute;
        right: 0;
        margin-top: 6px;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
        padding: 14px 18px 12px;
        width: 280px;
        z-index: 50;
      }
      .pax-panel.hidden {
        display: none;
      }
      .pax-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .pax-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .pax-label-wrap {
        max-width: 60%;
      }
      .pax-title {
        font-size: 14px;
        font-weight: 500;
      }
      .pax-note {
        font-size: 12px;
        color: var(--muted);
        margin-top: 2px;
      }
      .pax-counter {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .pax-btn {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
        color: var(--accent);
        padding: 0;
      }
      .pax-summary-line {
        font-weight: 650;
        color: #0b3d31;
        font-size: 14px;
      }
      .pax-cabin-inline {
        display: inline-flex;
        gap: 8px;
        width: 100%;
        margin-top: 2px;
      }
      .pax-count {
        width: 18px;
        text-align: center;
        font-weight: 500;
      }
      .pax-cabin {
        margin-top: 8px;
        border-radius: 999px;
        border: 1px solid var(--line);
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: hidden;
      }
      .pax-cabin-btn {
        border: none;
        border-radius: 0;
        padding: 8px 4px;
        font-size: 13px;
        background: #f9fafb;
        color: var(--muted);
      }
      .pax-cabin-btn.active {
        background: var(--accent);
        color: #ffffff;
      } /* Избранные и сравнение */
      .favorites-block,
      .compare-block {
        margin-bottom: 10px;
        background: #ffffff;
        border-style: solid;
        border-color: rgba(148, 163, 184, 0.5);
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
        padding: 12px 14px 14px;
      }
      .compare-block {
        margin-top: 16px;
      }
      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
      }
      .section-header .section-title {
        margin: 0;
        font-size: 19px;
        font-weight: 700;
      }
      .section-close {
        border: 1px solid rgba(148, 163, 184, 0.8);
        background: #ffffff;
        color: #6b7280;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 18px;
        cursor: pointer;
        transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
      }
      .section-close:hover {
        background: #f3f4f6;
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.15);
        color: var(--ink);
      }
      .favorites-list,
      .compare-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 6px;
      }
      .compare-actions {
        display: flex;
        justify-content: flex-end;
        margin: 10px 0 8px;
      }
      .mini-flight {
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        padding: 8px 10px;
        font-size: 13px;
        min-width: 180px;
        cursor: pointer;
      }
      .mini-flight:hover {
        border-color: var(--accent);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
      }
      .mini-flight--highlight {
        border-color: rgba(7, 94, 84, 0.6);
        background: #f3fcf8;
        box-shadow: 0 10px 28px rgba(7, 94, 84, 0.18);
        position: relative;
      }
      .mini-flight-note {
        font-size: 12px;
        color: #4b5563;
        margin-top: 6px;
      }
      .mini-flight-title {
        font-weight: 600;
        margin-bottom: 2px;
      }
      .mini-flight-meta {
        font-size: 12px;
        color: var(--muted);
      }
      .hidden {
        display: none !important;
      } /* Модалка сравнения */
      .compare-modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 998;
      }
      .compare-modal {
        background: #ffffff;
        border-radius: 18px;
        padding: 18px 20px 20px;
        max-width: 760px;
        width: 100%;
        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.55);
        max-height: 80vh;
        overflow: auto;
      }
      .compare-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
      }
      .compare-modal h3 {
        margin: 0 0 10px;
        font-size: 18px;
      }
      .compare-yuvia-choice {
        background: #f7fbf9;
        border: 1px solid rgba(7, 94, 84, 0.16);
        padding: 10px 12px;
        border-radius: 12px;
        margin-bottom: 12px;
        font-size: 14px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
      }
      .compare-yuvia-choice strong {
        color: var(--accent);
      }
      .compare-tabs {
        display: inline-flex;
        gap: 8px;
        margin-bottom: 10px;
      }
      .compare-tab {
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.7);
        background: #f8fafc;
        padding: 8px 14px;
        font-size: 13px;
        cursor: pointer;
        color: var(--ink);
      }
      .compare-tab.active {
        background: #075e54;
        color: #ffffff;
        border-color: #075e54;
        box-shadow: 0 10px 22px rgba(7, 94, 84, 0.28);
      }
      .compare-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      .compare-table th,
      .compare-table td {
        padding: 6px 8px;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        white-space: nowrap;
        background: #ffffff;
      }
      .compare-table th {
        font-weight: 600;
        color: #4b5563;
        position: sticky;
        top: 0;
        background: #f9fafb;
        z-index: 1;
      }
      .compare-table tr:nth-child(even) td {
        background: #f8fafc;
      }
      .compare-close {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
      }
      @media (max-width: 960px) {
        .two-col {
          grid-template-columns: 1fr;
        }
        .search-grid {
          grid-template-columns: 1fr;
        }
        .swap-cell {
          justify-content: flex-start;
        }
        .oneway-row {
          grid-column: 1 / -1;
          justify-content: flex-start;
          margin-top: 0;
        }
        #originIataHint,
        #destIataHint,
        #departHint,
        #retHint,
        .pax-hint-placeholder {
          grid-column: 1 / -1;
        }
        .search-actions-row {
          justify-content: flex-start;
          flex-wrap: wrap;
        }
        .pax-panel {
          right: auto;
          left: 0;
        }
        .compare-modal {
          margin: 0 10px;
        }
        .compare-table {
          font-size: 12px;
        }
        #doSearch {
          width: 100%;
          justify-content: center;
        }
        .filters-block {
          position: fixed;
          left: 0;
          right: 0;
          bottom: 0;
          max-height: 80vh;
          border-radius: 18px 18px 0 0;
          padding: 16px 18px 18px;
          box-shadow: 0 -4px 28px rgba(5, 50, 39, 0.12), 0 18px 42px rgba(5, 50, 39, 0.18);
          display: none;
          z-index: 1200;
        }
        body.filters-open .filters-block {
          display: block;
        }
        .filters-sheet-footer {
          display: flex;
          position: sticky;
          bottom: -8px;
          background: var(--surface);
          padding-top: 10px;
          margin-top: 10px;
          border-top: 1px solid rgba(148, 163, 184, 0.35);
        }
        .filters-header {
          position: sticky;
          top: 0;
          background: var(--surface);
          padding-bottom: 8px;
          z-index: 2;
        }
        .filters-close {
          display: inline-flex;
        }
        .filters-mobile-toggle {
          display: flex;
        }
        .filters-sheet-overlay {
          display: block;
          position: fixed;
          inset: 0;
          background: rgba(5, 50, 39, 0.35);
          backdrop-filter: blur(2px);
          z-index: 1190;
        }
        .filters-sheet-overlay.hidden {
          display: none;
        }
        body.filters-open {
          overflow: hidden;
        }
        .toolbar {
          position: static;
        }
      } /* overlay загрузки */
      .loading-overlay {
        position: fixed;
        inset: 0;
        background: #ffffff;
        backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
      }
      .loading-overlay.hidden {
        display: none;
      }
      .loading-inner {
        text-align: center;
      }
      .loading-logo-wrap {
        position: relative;
        display: inline-block;
        max-width: 260px;
        width: 100%;
        margin: 0 auto;
        animation: logo-float 3s ease-in-out infinite;
      }
      .loading-logo-video {
        display: block;
        max-width: 260px;
        max-height: 40vh;
        width: 100%;
        height: auto;
        border-radius: 24px;
      }
      .loading-logo-wrap::before {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: -10px;
        height: 18px;
        border-radius: 999px;
        background: radial-gradient(
          ellipse at center,
          rgba(7, 94, 84, 0.45),
          transparent 60%
        );
        filter: blur(8px);
        opacity: 0.75;
        animation: glow-pulse 2.2s ease-in-out infinite;
      }
      @keyframes logo-float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8px);
        }
      }
      @keyframes glow-pulse {
        0%,
        100% {
          transform: scaleX(1);
          opacity: 0.6;
        }
        50% {
          transform: scaleX(1.12);
          opacity: 0.9;
        }
      }
      .loading-text {
        margin-top: 14px;
        font-size: 16px;
        color: var(--muted);
      }
      .version {
        position: fixed;
        bottom: 8px;
        right: 10px;
        font-size: 12px;
        color: #64748b;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 4px 7px;
        z-index: 990;
      }
      .yuvia-screen.hidden {
        display: none;
      }
      .yuvia-screen {
        position: relative;
      }
      .result {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 18px;
        margin-bottom: 12px;
        border-radius: 20px;
        border: 1px solid var(--line);
        background: #ffffff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          border-color 0.16s ease;
        opacity: 0;
        animation: result-fade-in 0.22s ease-out forwards;
        cursor: default;
      }
      .result:hover {
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
        transform: translateY(-1px);
        border-color: rgba(7, 94, 84, 0.22);
      }
      @keyframes result-fade-in {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .result.highlighted {
        box-shadow:
          0 0 0 2px rgba(56, 189, 248, 0.85),
          0 20px 45px rgba(15, 23, 42, 0.25);
        transform: translateY(-1px);
      }
      .result-header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
      }
      .result-header-left {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .result-route {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .result-route-cities {
        font-size: 19px;
        font-weight: 700;
      }
      .result-route-airports {
        font-size: 12px;
        color: var(--muted);
        letter-spacing: 0.02em;
      }
      .result-dates {
        margin-top: 2px;
        font-size: 13px;
        color: var(--muted);
      }
      .result-leg {
        margin-bottom: 2px;
      }
      .airline-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: 12px;
        color: var(--muted);
      }
      .result-flight-number {
        font-size: 12px;
        color: var(--muted);
      }
      .result-price-block {
        min-width: 160px;
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-end;
      }
      .result-price {
        font-size: 18px;
        font-weight: 750;
        color: #0b3d31;
      }
      .result-stress {
        margin-top: 2px;
      }
      .airline-logo-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--muted);
      }
      .airline-logo {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        color: var(--accent);
      }
      .airline-logo img {
        width: 70%;
        height: 70%;
        object-fit: contain;
        display: block;
      }
      .result-segments {
        border-radius: 14px;
        background: #f9fafb;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .segment-label {
        font-size: 12px;
        font-weight: 600;
        color: #4b5563;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
      }
      .segment-row {
        display: grid;
        grid-template-columns: 1.05fr minmax(0, 1.1fr) 1.05fr;
        column-gap: 10px;
        align-items: center;
      }
      .segment-time {
        font-size: 20px;
        font-weight: 600;
      }
      .segment-city {
        font-size: 13px;
        margin-top: 1px;
      }
      .segment-airport {
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
      }
      .segment-date {
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
      }
      .segment-col-middle {
        text-align: center;
        font-size: 12px;
        color: var(--muted);
      }
      .segment-middle-top {
        font-weight: 500;
      }
      .segment-line {
        height: 4px;
        border-radius: 999px;
        margin: 4px 0;
        background: linear-gradient(
          90deg,
          rgba(7, 94, 84, 0.25),
          rgba(7, 94, 84, 0.06)
        );
        position: relative;
        overflow: hidden;
      }
      .segment-line::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #0d9488, #16a34a);
        opacity: 0.25;
      }
      .segment-middle-bottom {
        font-size: 12px;
        color: var(--muted);
      }
      .segment-divider {
        height: 1px;
        margin: 6px 0 4px;
        background: linear-gradient(
          90deg,
          rgba(148, 163, 184, 0.6),
          rgba(148, 163, 184, 0)
        );
      }
      .result-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        margin-top: 2px;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 9px;
        border-radius: 999px;
        font-size: 12px;
        border: 1px solid rgba(148, 163, 184, 0.6);
        background: #f9fafb;
        color: #111827;
        cursor: default;
        transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
      }
      .badge-soft {
        background: var(--accent-soft);
        border-color: rgba(45, 212, 191, 0.6);
        color: var(--accent);
      }
      .badge-rating {
        background: #ecfdf3;
        border-color: rgba(16, 185, 129, 0.6);
        color: #047857;
        font-weight: 600;
      }
      .badge-stress-low {
        background: #ecfdf3;
        border-color: rgba(16, 185, 129, 0.6);
        color: #047857;
      }
      .badge-stress-medium {
        background: var(--accent-soft-2);
        border-color: rgba(250, 204, 21, 0.6);
        color: #92400e;
      }
      .badge-stress-high {
        background: #fef2f2;
        border-color: rgba(248, 113, 113, 0.7);
        color: #b91c1c;
      }
      .badge-chip {
        background: #f3f4f6;
        border-color: #e5e7eb;
        color: #4b5563;
      }
      .badge-with-tooltip {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        z-index: 1040;
      }
      .tooltip-trigger {
        appearance: none;
        border: 1px solid var(--line);
        background: #f3f4f6;
        color: var(--accent);
        border-radius: var(--radius-pill);
        padding: 4px 10px;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
      }
      .tooltip-trigger::after {
        content: "›";
        font-size: 11px;
        opacity: 0.7;
        transition: transform 0.15s ease, opacity 0.15s ease;
      }
      .tooltip-trigger:hover,
      .tooltip-trigger.active {
        background: #e5e7eb;
        color: #064e3b;
      }
      .tooltip-trigger:hover::after,
      .tooltip-trigger.active::after {
        transform: translateX(2px);
        opacity: 1;
      }
      .tooltip-popover {
        position: absolute;
        left: 0;
        top: calc(100% + 8px);
        min-width: 280px;
        max-width: 340px;
        padding: 12px 14px;
        background: #ffffff;
        border: 1px solid rgba(148, 163, 184, 0.6);
        border-radius: 12px;
        box-shadow: 0 12px 28px rgba(7, 94, 84, 0.16);
        font-size: 13px;
        line-height: 1.55;
        color: #1f2937;
        z-index: 2000;
        display: none;
      }
      .tooltip-popover.floating {
        position: fixed;
      }
      .tooltip-popover.visible {
        display: block;
      }
      @media (max-width: 600px) {
        .tooltip-popover {
          position: fixed;
          left: 12px;
          right: 12px;
          top: auto;
          bottom: 20px;
        }
      }
      @media (max-width: 720px) {
        .search-overlay {
          align-items: flex-end;
          padding: 10px;
          background: rgba(0, 0, 0, 0.25);
        }
        .search-overlay-card {
          width: 100%;
          max-height: 80vh;
          border-radius: 18px 18px 0 0;
          padding: 14px 16px 16px;
          position: relative;
          overflow: auto;
        }
        .search-overlay-handle {
          display: block;
        }
        .search-overlay-title {
          margin-top: 2px;
          text-align: center;
        }
      }
      .results-disclaimer {
        margin-top: 20px;
        padding: 16px 18px;
        background: linear-gradient(
          135deg,
          rgba(148, 163, 184, 0.08),
          rgba(226, 232, 240, 0.25)
        );
        border-radius: 16px;
        border: 1px dashed rgba(148, 163, 184, 0.8);
        font-size: 13px;
        line-height: 1.55;
        color: #4b5563;
      }
      .results-disclaimer p:last-child {
        margin-bottom: 0;
      }
      .badge-yuvia {
        background: linear-gradient(
          135deg,
          rgba(7, 94, 84, 0.08),
          rgba(13, 148, 136, 0.22)
        );
        border-color: rgba(13, 148, 136, 0.65);
        color: #064e3b;
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
      }
      .result-footer {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: center;
        border-top: 1px dashed #e5e7eb;
        padding-top: 8px;
        margin-top: 4px;
        font-size: 13px;
        color: var(--muted);
        flex-wrap: wrap;
      }
      .result-footer-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }
      .result-footer-actions .btn-primary,
      .result-footer-actions .btn-outline {
        flex: 1 1 0;
        max-width: none;
        justify-content: center;
      }
      .btn-fav:hover,
      .btn-compare:hover {
        background: rgba(7, 94, 84, 0.08);
        border-color: rgba(7, 94, 84, 0.35);
      }
      @media (max-width: 720px) {
        .inline-route-grid,
        .inline-dates-grid {
          grid-template-columns: 1fr;
        }
        .inline-swap {
          display: none;
        }
        .search-inline-actions {
          justify-content: flex-start;
        }
        .recommendations-overlay-title {
          left: 50%;
          transform: translateX(-50%);
        }
      }
      @media (max-width: 900px) {
        .result-header {
          flex-direction: column;
          align-items: flex-start;
        }
        .result-price-block {
          align-items: flex-start;
          text-align: left;
        }
      }

/* Единая система зелёных чипов: стиль, триггеры, фильтры, текущий поиск */
.chip-toggle,
.time-pill,
.search-summary-segment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(7, 94, 84, 0.25);
  background: #ffffff;
  color: #0f3f33;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(7, 94, 84, 0.06);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

/* Ховер — одинаковый для всех зелёных чипов */
.chip-toggle:hover,
.time-pill:hover,
.search-summary-segment:hover {
  background: #f3fbf8;
  border-color: rgba(7, 94, 84, 0.45);
  box-shadow: 0 8px 18px rgba(7, 94, 84, 0.12);
  transform: translateY(-1px);
}

/* Активные / выбранные чипы: стиль, триггеры, временные окна */
.chip-toggle.active,
.time-pill:has(input:checked) {
  background: var(--accent-soft);
  border-color: rgba(7, 94, 84, 0.7);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(7, 94, 84, 0.18);
}

/* Внутренний input у time-pill оставляем компактным */
.time-pill input {
  width: 14px;
  height: 14px;
  accent-color: #0b3d31;
}

/* Чипы «Текущий поиск» — всегда ощущаются активными и подчёркнутыми */
.search-summary-segment {
  font-weight: 600;
  font-style: italic;
}