.tabs {
  gap: 14px;
  margin-bottom: 26px;
}

.tabs .tab {
  --mode-color: #2059bd;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 238px;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #d8e3f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 18px #173b6e0c;
  text-align: left;
  color: #153353;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tabs .tab:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: var(--mode-color);
  box-shadow: 0 14px 28px #173b6e1b;
}

.tabs .tab:focus-visible {
  outline: 3px solid var(--mode-color);
  outline-offset: 3px;
}

.tabs .tab.active {
  border: 2px solid var(--mode-color) !important;
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-color), transparent 84%), 0 12px 27px #173b6e1c;
}

.tabs #tab-route { --mode-color: #2059bd; background: #fff; }
.tabs #tab-destination { --mode-color: #087c70; background: #fff; }
.tabs #tab-origin { --mode-color: #b55228; background: #fff; }
.tabs #tab-airline { --mode-color: #6843b5; background: #fff; }
.tabs #tab-route.active,
.tabs #tab-destination.active,
.tabs #tab-origin.active {
  border-color: var(--mode-color) !important;
  background: #fff;
  color: var(--mode-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-color), transparent 84%), 0 12px 27px #173b6e1c;
}
.tabs #tab-airline.active { border-color: var(--mode-color) !important; color: var(--mode-color) !important; }

.tabs .tab-icon {
  display: block;
  flex: none;
  width: 100%;
  height: 132px;
  overflow: hidden;
  border-radius: 0;
  filter: none;
  transition: none;
}

.tabs #tab-route .tab-icon { background: linear-gradient(135deg, #dcecff, #edf5ff 65%, #c9dfff); }
.tabs #tab-destination .tab-icon { background: linear-gradient(135deg, #d4f5ef, #ecfbf6 65%, #bdebe1); }
.tabs #tab-origin .tab-icon { background: linear-gradient(135deg, #ffead7, #fff5e8 65%, #ffdbc0); }
.tabs #tab-airline .tab-icon { background: linear-gradient(135deg, #e9dcff, #f5efff 65%, #dbc8fa); }
.tabs .tab:hover .tab-icon { transform: none; }

.tabs .tab-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 15px 18px 18px;
}

.tabs .tab-label {
  display: block;
  color: var(--mode-color) !important;
  font-size: 18px;
  font-weight: 820;
  line-height: 1.2;
  letter-spacing: -.35px;
}

.tabs .tab-description {
  display: block;
  color: #425a77;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.35;
}

.tabs .tab.active .tab-description { color: #334a68; }
.tabs .tab::after {
  content: '✓';
  position: absolute;
  top: 11px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  color: var(--mode-color);
  box-shadow: 0 2px 8px #173b6e25;
  font-size: 16px;
  font-weight: 900;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .18s ease, transform .18s ease;
}
.tabs .tab.active::after { opacity: 1; transform: scale(1); }

.tabs .tab-icon .mode-trail {
  stroke-dasharray: 3 9;
  animation: mode-route-flow 3s linear infinite;
}
.tabs .tab-icon .mode-bopi { filter: drop-shadow(0 4px 5px #173b6e3b); }
.tabs .tab-icon .mode-bopi-static { display: none; }
@keyframes mode-route-flow { to { stroke-dashoffset: -36; } }

@media(max-width:680px) {
  .tabs { gap: 10px; margin-bottom: 22px; }
  .tabs .tab { min-height: 0; border-radius: 17px; }
  .tabs .tab-icon { width: 100%; height: 90px; }
  .tabs .tab-copy { gap: 3px; padding: 10px 15px 13px; }
  .tabs .tab-label { font-size: 16px; }
  .tabs .tab-description { font-size: 12px; }
  .tabs .tab::after { top: 9px; right: 10px; }
}

@media(prefers-reduced-motion:reduce) {
  .tabs .tab-icon .mode-trail,
  .tabs .tab-icon .mode-bopi { display: none; }
  .tabs .tab-icon .mode-bopi-static { display: block; }
  .tabs .tab { transition: none; }
}