/* Situation — glass card with map + legend */
  .situation { background: var(--paper-2); position: relative; overflow: hidden; }
  .situation .bg-fade { position: absolute; inset: 0; pointer-events: none; opacity: 0.18; }
  .situation .bg-fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .situation .bg-fade::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--paper-2) 0%, rgba(252,249,243,0.4) 50%, var(--paper-2) 100%);
  }
  .situation__inner {
    display: grid; grid-template-columns: 1.6fr 1fr;
    gap: clamp(28px, 4vw, 56px); align-items: stretch;
    margin-top: clamp(32px, 4vw, 64px);
  }
  @media (max-width: 980px) { .situation__inner { grid-template-columns: 1fr; } }
  .situation__map {
    position: relative; border-radius: var(--r-md);
    overflow: hidden;
    background:
      linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(252,249,243,0.28) 60%, rgba(232,201,163,0.22) 100%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: var(--sh-md);
    padding: clamp(20px, 2vw, 32px);
  }
  .situation__map img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
  .situation__legend {
    display: flex; flex-direction: column; gap: 14px;
    padding: clamp(24px, 3vw, 40px);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(252,249,243,0.32) 60%, rgba(232,201,163,0.22) 100%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
  }
  .situation__legend-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: var(--r-sm);
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
  }
  .situation__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }
  .situation__dot--free { background: #5fa472; }
  .situation__dot--reserved { background: var(--accent); }
  .situation__dot--sold { background: #b3a99c; }
  .situation__legend-row strong { font-size: 14px; color: var(--ink); font-weight: 700; flex: 1; }
  .situation__legend-row span {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--muted); letter-spacing: 0.06em;
  }
  .situation__note { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-top: 6px; }

  /* Filter — premium with glass surface */
  .filter-section { background: var(--paper); }
  .SlidableContent { display: grid; gap: 20px; margin-top: clamp(32px, 4vw, 56px); }
  .FilterSpace { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .Filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    padding: clamp(20px, 2vw, 28px) clamp(20px, 2.4vw, 32px);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(252,249,243,0.28) 60%, rgba(232,201,163,0.18) 100%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
  }
  .FilterItems { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; flex: 1; }
  .FilterItem { display: flex; align-items: center; gap: 10px; }
  .FilterItem > label.FlexRow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
  }
  .FilterItem > label.Criteria {
    font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: -0.01em;
    color: var(--ink); text-transform: none;
    border-right: 1px solid var(--line); padding-right: 18px; margin-right: 8px;
  }
  .Actions.FlexRow.Block { display: inline-flex; gap: 6px; }
  .Button.Ripple.Transition.FlexRow {
    cursor: pointer; user-select: none;
    min-width: 36px; height: 32px;
    padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    font-family: 'Manrope', sans-serif;
    font-size: 13px; font-weight: 600; color: var(--ink-2);
    transition: background var(--d-short) var(--e-out), border-color var(--d-short) var(--e-out), color var(--d-short) var(--e-out), transform var(--d-short) var(--e-out);
  }
  .Button.Ripple.Transition.FlexRow:hover { border-color: var(--accent); color: var(--accent); }
  .Button.Ripple.Transition.FlexRow.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .Button.Ripple.Transition.FlexRow:active { transform: scale(0.97); }
  /* "Виж всички свободни" — wide availability toggle with a green (free) dot */
  .Button.Ripple.Transition.FlexRow.BtnWide { white-space: nowrap; gap: 7px; }
  .Button.Ripple.Transition.FlexRow.BtnWide::before {
    content: ""; flex: 0 0 auto;
    width: 8px; height: 8px; border-radius: 50%; background: #5fa472;
  }

  .FilterItem.Checkbox {
    cursor: pointer; user-select: none;
    padding: 6px 14px; border-radius: var(--r-pill);
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    transition: border-color var(--d-short) var(--e-out), color var(--d-short) var(--e-out);
    font-size: 13px; color: var(--ink-2); font-weight: 500;
  }
  .FilterItem.Checkbox:hover { border-color: var(--accent); }
  .FilterItem.Checkbox .SVG.Size svg { width: 16px; height: 16px; fill: transparent; stroke: var(--line); stroke-width: 1.5; transition: all var(--d-short) var(--e-out); }
  .FilterItem.Checkbox.is-on { border-color: var(--accent); color: var(--ink); }
  .FilterItem.Checkbox.is-on .SVG.Size svg { fill: var(--accent); stroke: var(--accent); }

  .ActionsComponent.FilterItem.FindHome { margin-left: auto; }
  .ButtonComponent.RectButton.ColorSecondary {
    cursor: pointer;
    padding: 12px 20px; border-radius: var(--r-sm);
    background: var(--ink); color: var(--paper);
    font-family: 'Manrope', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
    border: none;
    transition: background var(--d-short) var(--e-out), transform var(--d-short) var(--e-out), box-shadow var(--d-short) var(--e-out);
  }
  .ButtonComponent.RectButton.ColorSecondary:hover { background: var(--accent-shade); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(111,77,44,.5); }

  /* House table — glass surface, design-system aligned */
  .FilteredPageContent {
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: var(--r-md);
    overflow: hidden;
    background:
      linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(252,249,243,0.28) 60%, rgba(232,201,163,0.18) 100%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: var(--sh-sm);
  }

  /* Column headings — JetBrains Mono uppercase, like .section-eyebrow .lab */
  .FilterRow.Legend {
    display: grid;
    grid-template-columns: 64px 64px 90px 1fr 1fr 1fr 1fr 24px;
    gap: 12px;
    padding: 14px 22px;
    background: rgba(252,249,243,0.5);
    border-bottom: 1px solid var(--line);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
  }
  .FilterRow.Legend .FilterCell.Number { color: var(--accent); }

  /* Data rows */
  .FilterRow {
    display: grid;
    grid-template-columns: 64px 64px 90px 1fr 1fr 1fr 1fr 24px;
    gap: 12px;
    padding: 18px 22px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: var(--ink-2);
    text-decoration: none;
    position: relative;
    transition: background var(--d-short) var(--e-out), border-left-color var(--d-short) var(--e-out), color var(--d-short) var(--e-out);
    border-left: 3px solid transparent;
  }
  .FilterRow:last-child { border-bottom: none; }
  .FilterRow:not(.Legend):hover {
    background: rgba(255,255,255,0.55);
    border-left-color: var(--accent);
    color: var(--ink);
  }
  .FilterRow:not(.Legend):hover .FilterCell.Number .num { background: var(--accent); color: #ffffff; }
  .FilterRow:not(.Legend):hover .FilterCell:last-child .icon { transform: translateX(4px); color: var(--accent); }
  .FilterCell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .FilterCell.Floor, .FilterCell.Rooms { color: var(--ink-2); font-weight: 500; }
  .FilterCell.Area {
    color: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px; letter-spacing: 0.02em;
  }
  .FilterCell.Features { color: var(--muted); font-size: 12px; font-weight: 500; }
  .FilterCell:last-child .icon {
    width: 14px; height: 14px;
    color: var(--muted);
    transition: transform var(--d-short) var(--e-out), color var(--d-short) var(--e-out);
  }

  /* Number badge — round, mono, color-coded by status (uses the same hues as .pill) */
  .FilterCell.Number .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    transition: background var(--d-short) var(--e-out), color var(--d-short) var(--e-out), border-color var(--d-short) var(--e-out);
  }
  .FilterCell.Number .num.is-free     { background: rgba(95,164,114,0.14); color: #2f6943; border-color: rgba(95,164,114,0.32); }
  .FilterCell.Number .num.is-reserved { background: rgba(192,139,88,0.16); color: var(--accent-shade); border-color: rgba(192,139,88,0.32); }
  .FilterCell.Number .num.is-sold     { background: transparent; color: var(--muted); border-color: var(--line-2); }

  /* Status — uses the design-system .pill style */
  .FilterCell.Status .pill {
    font-size: 10px; padding: 5px 10px;
  }
  .FilterCell.Status .pill--free {
    background: rgba(95,164,114,0.14); color: #2f6943;
    border: 1px solid rgba(95,164,114,0.32);
  }
  .FilterCell.Status .pill--reserved {
    background: rgba(192,139,88,0.16); color: var(--accent-shade);
    border: 1px solid rgba(192,139,88,0.32);
  }
  .FilterCell.Status .pill--sold {
    background: transparent; color: var(--muted);
    border: 1px solid var(--line-2);
  }

  /* Sold rows — slightly muted */
  .FilterRow[data-status="sold"]:not(.Legend) { opacity: 0.62; }
  .FilterRow[data-status="sold"]:not(.Legend):hover { opacity: 1; }

  .FilterRow.is-hidden { display: none; }

  .Mobile { display: none; }

  /* Tablet — drop legend cell padding */
  @media (max-width: 1200px) {
    .FilterRow, .FilterRow.Legend {
      grid-template-columns: 56px 56px 80px 1fr 1fr 1fr 1fr 20px;
      gap: 10px;
    }
  }
  @media (max-width: 980px) {
    .FilterRow, .FilterRow.Legend {
      grid-template-columns: 56px 64px 1fr 1fr 1fr 1fr 20px;
    }
    .FilterRow .Desktop, .FilterRow.Legend .Desktop { display: none; }
    .Mobile { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; font-family: 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; font-weight: 500; }
  }
  @media (max-width: 700px) {
    .FilterRow, .FilterRow.Legend {
      display: grid;
      grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 0; padding: 12px 14px;
      align-items: center;
    }
    /* Hide non-essential cells on mobile: Rooms.Desktop (3), e1 (5), e2 (6), arrow (8) */
    .FilterRow > .FilterCell:nth-child(3),
    .FilterRow > .FilterCell:nth-child(5),
    .FilterRow > .FilterCell:nth-child(6),
    .FilterRow > .FilterCell:nth-child(8) { display: none; }
    /* Show legend on mobile with simplified labels */
    .FilterRow.Legend { display: grid; padding: 10px 14px; font-size: 9px; letter-spacing: 0.12em; }
    /* Column dividers between cells */
    .FilterRow > .FilterCell + .FilterCell { border-left: 1px solid var(--line-2); padding-left: 10px; }
    .FilterRow.Legend > .FilterCell + .FilterCell { border-left: 1px solid var(--line); padding-left: 10px; }
    .FilterCell.Number .num { width: 30px; height: 30px; font-size: 11px; }
    .FilterCell.Area { font-size: 11.5px; }
    .Mobile { font-size: 10.5px; }
  }

  /* Dark theme */
  [data-theme="dark"] .situation__map,
  [data-theme="dark"] .situation__legend,
  [data-theme="dark"] .Filter,
  [data-theme="dark"] .FilteredPageContent {
    background: linear-gradient(160deg, rgba(34,29,24,0.72) 0%, rgba(34,29,24,0.42) 60%, rgba(120,80,40,0.18) 100%);
    border-color: rgba(255,255,255,0.08);
  }
  [data-theme="dark"] .situation__legend-row,
  [data-theme="dark"] .Button.Ripple.Transition.FlexRow,
  [data-theme="dark"] .FilterItem.Checkbox { background: rgba(34,29,24,0.6); border-color: rgba(255,255,255,0.08); color: var(--ink-2); }
  [data-theme="dark"] .Button.Ripple.Transition.FlexRow.is-active { background: var(--accent); color: #15120e; border-color: var(--accent); }
  [data-theme="dark"] .FilterRow:hover { background: rgba(34,29,24,0.6); }
  [data-theme="dark"] .FilterRow.Legend { background: rgba(34,29,24,0.6); }
  [data-theme="dark"] .FilterRow.Legend:hover { background: rgba(34,29,24,0.6); }

  /* 1/4 type grid — keeps design system (glass, accent, pill, type__specs) */
  .types-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.4vw, 20px);
    margin-top: clamp(28px, 4vw, 48px);
  }
  @media (max-width: 1100px) { .types-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .types-grid { grid-template-columns: 1fr; } }
  .type-card {
    position: relative; overflow: hidden;
    border-radius: var(--r-md);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.55) 0%, rgba(252,249,243,0.28) 60%, rgba(232,201,163,0.18) 100%);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: var(--sh-sm);
    display: flex; flex-direction: column;
    color: inherit; text-decoration: none;
    transition: transform var(--d-medium) var(--e-out), box-shadow var(--d-medium) var(--e-out), border-color var(--d-medium) var(--e-out);
  }
  .type-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--accent); }
  .type-card__media {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
  .type-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--e-out); }
  .type-card:hover .type-card__media img { transform: scale(1.05); }
  .type-card__media .pill { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 9px; padding: 5px 10px; }
  .type-card__body {
    padding: clamp(20px, 1.8vw, 28px);
    display: flex; flex-direction: column; gap: 12px; flex: 1;
  }
  .type-card__num { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 10px; letter-spacing: 0.2em; font-weight: 600; }
  .type-card__name {
    font-weight: 800; font-size: clamp(28px, 2.4vw, 36px);
    letter-spacing: -0.04em; line-height: 0.95; margin: 0;
  }
  .type-card__name .letter { color: var(--accent); }
  .type-card__name-spec {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 500; letter-spacing: 0.02em;
    color: var(--accent); white-space: nowrap;
  }
  .type-card__tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .type-card__specs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
  }
  .type-card__specs .cell {
    padding: 10px 12px;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color var(--d-short) var(--e-out);
  }
  .type-card__specs .cell:hover { border-color: var(--accent); }
  .type-card__specs .lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
    display: flex; align-items: center; gap: 4px;
  }
  .type-card__specs .lab .icon { color: var(--accent); width: 12px; height: 12px; }
  .type-card__specs .val { font-size: 14px; font-weight: 700; letter-spacing: -0.012em; color: var(--ink); }
  .type-card__specs .cell.price .val { color: var(--accent); }
  .type-card__cta {
    margin-top: auto; padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--ink);
  }
  .type-card__cta .arr { width: 14px; height: 14px; color: var(--accent); transition: transform var(--d-short) var(--e-out); }
  .type-card:hover .type-card__cta { color: var(--accent); }
  .type-card:hover .type-card__cta .arr { transform: translateX(4px); }

  [data-theme="dark"] .type-card { background: linear-gradient(160deg, rgba(34,29,24,0.7) 0%, rgba(34,29,24,0.42) 60%, rgba(120,80,40,0.18) 100%); border-color: rgba(255,255,255,0.08); }
  [data-theme="dark"] .type-card__specs .cell { background: rgba(34,29,24,0.5); border-color: rgba(255,255,255,0.08); }