/* Serbian Travel structured operational data components.
   Scoped so legacy prose tables and existing components remain untouched. */
.ts-structured-data {
  --sd-bg: var(--bg, var(--ts-white, #fff));
  --sd-ink: var(--ink, var(--ts-text, #171717));
  --sd-muted: var(--muted, rgba(23, 23, 23, .68));
  --sd-soft: var(--soft, rgba(23, 23, 23, .045));
  --sd-line: var(--line, var(--ts-border, rgba(23, 23, 23, .14)));
  --sd-radius: var(--radius, var(--ts-radius, 18px));
  min-width: 0;
  width: 100%;
  color: var(--sd-ink);
}

.ts-structured-data h2 {
  margin: 0 0 10px;
  color: var(--sd-ink);
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.15;
}

.ts-structured-data__intro {
  max-width: 68ch;
  margin: 0 0 18px;
  color: var(--sd-muted);
}

.ts-data-table__frame {
  min-width: 0;
  margin: 18px 0 0;
  overflow: hidden;
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
  background: var(--sd-bg);
  box-shadow: 0 12px 34px rgba(17, 17, 17, .055);
}

.ts-data-table__viewport {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.ts-data-table__viewport:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sd-ink) 32%, transparent);
  outline-offset: -3px;
}

.ts-data-table__table {
  width: 100%;
  min-width: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--sd-ink);
  font-size: .96rem;
  line-height: 1.45;
}

.ts-data-table__table caption {
  padding: 13px 16px;
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-bg);
  color: var(--sd-muted);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .015em;
  text-align: left;
}

.ts-data-table__table thead {
  background: var(--sd-soft);
}

.ts-data-table__table th,
.ts-data-table__table td {
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--sd-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ts-data-table__table thead th {
  color: var(--sd-ink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.ts-data-table__table tbody th[scope="row"] {
  color: var(--sd-ink);
  font-weight: 750;
}

.ts-data-table__table tbody tr:nth-child(even):not(.ts-data-table__group) {
  background: var(--sd-soft);
}

.ts-data-table__table tbody tr.is-highlighted {
  background: color-mix(in srgb, #d6a84a 14%, var(--sd-bg));
}

.ts-data-table__table tbody tr:last-child > * {
  border-bottom: 0;
}

.ts-data-table__group th {
  padding-block: 10px;
  background: color-mix(in srgb, var(--sd-ink) 8%, var(--sd-bg));
  color: var(--sd-ink);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .035em;
}

.ts-data-table__cell--center { text-align: center !important; }
.ts-data-table__cell--end { text-align: right !important; }
.ts-data-table__cell--nowrap {
  white-space: nowrap;
  overflow-wrap: normal !important;
  font-variant-numeric: tabular-nums;
}

.ts-data-table__row-title,
.ts-data-table__row-detail { display: block; }
.ts-data-table__row-detail {
  margin-top: 2px;
  color: var(--sd-muted);
  font-size: .88em;
  font-weight: 500;
}

.ts-structured-data__note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 4px solid #5c6674;
  border-radius: 0 10px 10px 0;
  background: var(--sd-soft);
  color: var(--sd-ink);
  font-size: .92rem;
}

.ts-structured-data__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 11px;
  color: var(--sd-muted);
  font-size: .8rem;
}

.ts-structured-data__meta a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ts-structured-data__meta-label { font-weight: 800; }
.ts-structured-data__checked { margin-left: auto; }

.ts-comparison-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.ts-comparison-card {
  --sd-card-accent: #667085;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sd-line);
  border-top: 4px solid var(--sd-card-accent);
  border-radius: var(--sd-radius);
  background: var(--sd-bg);
  box-shadow: 0 12px 34px rgba(17, 17, 17, .055);
}

.ts-comparison-card--green { --sd-card-accent: #2f7d4a; }
.ts-comparison-card--blue { --sd-card-accent: #365f9d; }
.ts-comparison-card--red { --sd-card-accent: #a64242; }
.ts-comparison-card--ink { --sd-card-accent: #303846; }
.ts-comparison-card--gold { --sd-card-accent: #93671d; }

.ts-comparison-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--sd-line);
  background: var(--sd-soft);
}

.ts-comparison-card__header h3 {
  margin: 0;
  color: var(--sd-ink);
  font-size: 1.12rem;
  line-height: 1.25;
}

.ts-comparison-card__badge {
  flex: 0 0 auto;
  max-width: 48%;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--sd-card-accent) 38%, var(--sd-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sd-card-accent) 10%, var(--sd-bg));
  color: var(--sd-ink);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.ts-comparison-card__summary {
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--sd-line);
  color: var(--sd-muted);
}

.ts-comparison-card__facts { margin: 0; }

.ts-comparison-card__fact {
  display: grid;
  grid-template-columns: minmax(105px, 35%) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--sd-line);
}

.ts-comparison-card__fact:last-child { border-bottom: 0; }
.ts-comparison-card__fact dt {
  color: var(--sd-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .025em;
}
.ts-comparison-card__fact dd {
  min-width: 0;
  margin: 0;
  color: var(--sd-ink);
  overflow-wrap: anywhere;
}

html[data-theme="dark"] .ts-structured-data,
html.dark .ts-structured-data,
[data-theme="dark"] .ts-structured-data {
  --sd-bg: var(--bg, #11191d);
  --sd-ink: var(--ink, #e6edef);
  --sd-muted: var(--muted, rgba(230, 237, 239, .72));
  --sd-soft: var(--soft, rgba(255, 255, 255, .055));
  --sd-line: var(--line, rgba(255, 255, 255, .14));
}

@media (max-width: 720px) {
  .ts-comparison-cards__grid { grid-template-columns: 1fr; }
  .ts-comparison-card__header { align-items: center; }
}

@media (max-width: 680px) {
  .ts-data-table__viewport {
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .ts-data-table__table,
  .ts-data-table__table tbody { display: block; }

  .ts-data-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ts-data-table__table tbody tr:not(.ts-data-table__group) {
    display: block;
    margin: 10px;
    overflow: hidden;
    border: 1px solid var(--sd-line);
    border-radius: 12px;
    background: var(--sd-bg);
  }

  .ts-data-table__table tbody tr:nth-child(even):not(.ts-data-table__group) {
    background: var(--sd-bg);
  }

  .ts-data-table__table tbody tr.is-highlighted {
    background: color-mix(in srgb, #d6a84a 12%, var(--sd-bg));
  }

  .ts-data-table__table tbody tr:not(.ts-data-table__group) > * {
    display: grid;
    grid-template-columns: minmax(98px, 34%) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sd-line);
    white-space: normal;
    text-align: left !important;
  }

  .ts-data-table__table tbody tr:not(.ts-data-table__group) > *::before {
    content: attr(data-label);
    color: var(--sd-muted);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  .ts-data-table__table tbody tr:not(.ts-data-table__group) > *:last-child {
    border-bottom: 0;
  }

  .ts-data-table__group { display: block; }
  .ts-data-table__group th {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--sd-line);
  }

  .ts-structured-data__checked { width: 100%; margin-left: 0; }
  .ts-comparison-card__fact { grid-template-columns: 1fr; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-structured-data * { scroll-behavior: auto !important; }
}