/* ============================================================
   COUNTRIES ARCHIVE KT — Know.Travel v7 Redesign
   /all-countries/ → /countries/
   Theme-aware via general.css variables (dark/light/sunset)
   ============================================================ */

/* ══════════════════════════════════════════════
   BREADCRUMBS — standard pattern (same as airports)
   ══════════════════════════════════════════════ */
.rm-breadcrumb-bar { padding: 16px 24px 0; background: var(--bg-base); }
.ap-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-tertiary); flex-wrap: wrap; }
.ap-breadcrumb a { color: var(--accent-blue); text-decoration: none; transition: color 0.15s; }
.ap-breadcrumb a:hover { text-decoration: underline; }
.ap-breadcrumb .sep { opacity: 0.5; }

/* ══════════════════════════════════════════════
   HERO — same bg-base as breadcrumbs = no seam
   ══════════════════════════════════════════════ */
.ca-hero {
    padding: 16px 24px 28px;
    text-align: center;
}
.ca-hero-inner { position: relative; z-index: 1; }

.ca-hero h1 {
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ca-total-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 17px;
    font-weight: 700;
    background: var(--accent-blue-muted);
    color: var(--accent-blue);
    border: 1px solid var(--tint-blue-border);
    letter-spacing: 0;
}
.ca-hero-sub {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto 24px;
}

/* ── Hero search ── */
.ca-search-wrap { max-width: 480px; margin: 0 auto; }
.ca-search-field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ca-search-field:focus-within {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-blue-muted);
}
.ca-search-field svg {
    width: 18px; height: 18px;
    margin-left: 16px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    pointer-events: none;
}
.ca-search-field input {
    width: 100%;
    padding: 13px 12px;
    background: transparent;
    border: none; outline: none;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 15px;
    color: var(--text-primary);
}
.ca-search-field input::placeholder { color: var(--text-tertiary); }
.ca-search-clear {
    display: none;
    align-items: center; justify-content: center;
    width: 28px; height: 28px;
    margin-right: 10px; flex-shrink: 0;
    border-radius: 50%; border: none;
    background: var(--bg-elevated);
    color: var(--text-tertiary);
    font-size: 14px; cursor: pointer;
    transition: all 0.15s;
}
.ca-search-clear:hover { background: rgba(239,68,68,.12); color: #ef4444; }

/* ══════════════════════════════════════════════
   STICKY HEADER SEARCH (appears on scroll)
   Same pattern as /airports/
   ══════════════════════════════════════════════ */
.ca-header-search {
    display: none; /* Replaced by KT site header with $show_header_search */
}
.ca-header-search.visible { opacity: 1; }
.ca-header-search.visible .ca-hs-field { pointer-events: auto; }

.ca-hs-inner {
    max-width: 1200px; margin: 0 auto; height: 64px;
    display: flex; align-items: center;
    padding-left: 220px; padding-right: 320px;
}
.ca-hs-field {
    position: relative; width: 100%; max-width: 480px; margin: 0 auto;
    display: flex; align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: 8px; overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ca-hs-field:focus-within {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue-muted);
}
.ca-hs-field svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px;
    color: var(--text-tertiary); pointer-events: none;
}
.ca-hs-field input {
    flex: 1; padding: 7px 8px 7px 32px; min-width: 0;
    border: none; background: transparent;
    color: var(--text-primary);
    font-size: 13px; font-family: inherit; outline: none;
}
.ca-hs-field input::placeholder { color: var(--text-tertiary); }

/* ══════════════════════════════════════════════
   CONTINENT FILTER CARDS (airports style)
   ══════════════════════════════════════════════ */
.ca-continents {
    padding: 0 24px 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.ca-cont-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 16px;
    justify-content: center;
}
.ca-cont-inner::-webkit-scrollbar { display: none; }

/* Each continent card — mirrors .v7-stat from airports */
.ca-cstat {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-default);
    background: var(--bg-card);
    color: inherit;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 120px;
    font-family: inherit;
    text-align: left;
}
.ca-cstat:hover {
    border-color: var(--accent-blue);
    background: var(--accent-blue-muted);
    transform: translateY(-1px);
}
.ca-cstat.active {
    border-color: var(--accent-blue);
    background: var(--accent-blue-muted);
}
[data-theme="sunset"] .ca-cstat:hover,
[data-theme="sunset"] .ca-cstat.active {
    border-color: var(--accent-blue);
    background: var(--accent-blue-muted);
}

/* SVG icon — same as airports */
.ca-cstat-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ca-cont-icon {
    width: 32px; height: 26px;
    opacity: 0.35; transition: opacity 0.2s;
    color: var(--text-primary);
}
.ca-cstat:hover .ca-cont-icon,
.ca-cstat.active .ca-cont-icon { opacity: 0.85; }

/* Fill-based paths */
.ca-cstat:hover .ca-cont-icon path,
.ca-cstat.active .ca-cont-icon path { fill: var(--accent-blue); }
/* Stroke-based globe (All) */
.ca-cstat:hover .ca-cont-icon circle,
.ca-cstat:hover .ca-cont-icon ellipse,
.ca-cstat.active .ca-cont-icon circle,
.ca-cstat.active .ca-cont-icon ellipse { stroke: var(--accent-blue); }
.ca-cstat:hover .ca-cont-icon path[fill="none"],
.ca-cstat.active .ca-cont-icon path[fill="none"] { fill: none; stroke: var(--accent-blue); }

.ca-cstat-info { display: flex; flex-direction: column; gap: 1px; }
.ca-cstat-name { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.ca-cstat-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px; font-weight: 600;
    color: var(--accent-blue);
}

/* ══════════════════════════════════════════════
   RESULTS + SORT BAR
   ══════════════════════════════════════════════ */
.ca-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 8px;
}
.ca-results-text { font-size: 13px; color: var(--text-tertiary); }
.ca-results-text strong { color: var(--text-primary); font-weight: 600; }

.ca-sort-wrap { display: flex; gap: 4px; }
.ca-sort-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: all 0.2s; font-family: inherit;
}
.ca-sort-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-elevated);
}
.ca-sort-btn.active {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: var(--accent-blue-muted);
}

/* ══════════════════════════════════════════════
   COUNTRIES GRID
   ══════════════════════════════════════════════ */
.ca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    padding: 16px 24px 60px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Country card ── */
.ca-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.ca-card:hover {
    background: var(--accent-blue-muted);
    border-color: var(--accent-blue);
    box-shadow: 0 4px 16px rgba(79,195,247,0.10);
    transform: translateY(-1px);
}
[data-theme="light"] .ca-card:hover { box-shadow: 0 4px 16px rgba(2,132,199,0.10); }
[data-theme="sunset"] .ca-card:hover { box-shadow: 0 4px 16px rgba(232,106,16,0.10); }

/* Flag — Twemoji image */
.ca-card-flag {
    flex-shrink: 0;
    width: 30px;
    display: flex; align-items: center; justify-content: center;
}
.ca-card-flag-img {
    width: 28px; height: 21px;
    border-radius: 2px;
    display: block;
    object-fit: cover;
}
.ca-card-flag-emoji { font-size: 24px; line-height: 1; }

/* Info */
.ca-card-info { flex: 1; min-width: 0; }
.ca-card-name {
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
    transition: color 0.2s;
}
.ca-card:hover .ca-card-name { color: var(--accent-blue); }
.ca-card-alt {
    font-size: 11px; color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}
.ca-card-iso {
    display: inline-block;
    font-size: 10px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-elevated);
    padding: 1px 5px;
    border-radius: 4px;
    margin-top: 4px;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s;
}
.ca-card:hover .ca-card-iso {
    background: var(--tint-blue-bg);
    color: var(--accent-blue);
}

/* Arrow */
.ca-card-arrow {
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-size: 14px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
    margin-left: auto;
}
.ca-card:hover .ca-card-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--accent-blue);
}

/* No results */
.ca-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 24px;
    color: var(--text-tertiary);
}
.ca-nr-icon { font-size: 48px; margin-bottom: 12px; }
.ca-no-results p { font-size: 15px; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ca-hs-inner { padding-left: 180px; padding-right: 220px; }
}
@media (max-width: 768px) {
    .ca-header-search { display: none; }
    .ca-hero { padding: 12px 16px 20px; }
    .ca-continents { padding: 0 16px 4px; }
    /* Override desktop center alignment: with overflow it makes All/Europe unreachable on the left */
    .ca-cont-inner { justify-content: flex-start; }
    .ca-results-bar { padding: 10px 16px; }
    .ca-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; padding: 12px 16px 40px; }
    .ca-cstat { padding: 10px 12px; min-width: 105px; }
    .ca-cont-icon { width: 26px; height: 20px; }
    .ca-cstat-val { font-size: 14px; }
}
@media (max-width: 480px) {
    .ca-grid { grid-template-columns: repeat(2, 1fr); }
    .ca-hero h1 { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════
   COST OF LIVING — Full Page / Sidebar Layout (Variant C)
   page-cost-of-living-kt.php
   ════════════════════════════════════════════════════════════ */

.col-kt-main { min-height: 60vh; }

/* ── Twemoji fix — all emoji img inside CoL ── */
.col-kt-main img.emoji {
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.1em;
    display: inline;
}

/* ── Breadcrumb (shared .rm-breadcrumb-bar from countries) ── */

/* ── Body layout: sidebar + content ── */
.col-kt-body {
    display: grid;
    grid-template-columns: 196px 1fr;
    max-width: 1100px;
    margin: 0 auto;
    min-height: calc(100vh - 200px);
    border-top: 1px solid var(--border-subtle);
}

/* ══════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════ */
.col-kt-sidebar {
    position: sticky;
    top: 64px; /* header height */
    height: calc(100vh - 64px);
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border-default);
    padding: 20px 0 40px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
}
.col-kt-sidebar::-webkit-scrollbar { width: 4px; }
.col-kt-sidebar::-webkit-scrollbar-track { background: transparent; }
.col-kt-sidebar::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 2px; }

/* Country info block in sidebar */
.col-kt-sb-country {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 12px;
}
.col-kt-sb-flag {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.col-kt-sb-flag img.emoji {
    width: 28px !important;
    height: 28px !important;
    vertical-align: middle;
}
.col-kt-sb-info {
    min-width: 0;
    overflow: hidden;
}
.col-kt-sb-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col-kt-sb-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 1px;
    white-space: nowrap;
}

/* Nav items */
.col-kt-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all .15s;
    text-decoration: none;
    white-space: nowrap;
}
.col-kt-nav-item:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,.03);
}
.col-kt-nav-item.active {
    color: var(--accent-blue);
    border-left-color: var(--accent-blue);
    background: var(--accent-blue-muted);
    font-weight: 600;
}
.col-kt-nav-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.col-kt-nav-icon img.emoji {
    width: 14px !important;
    height: 14px !important;
    vertical-align: middle;
}

/* Separator in sidebar */
.col-kt-nav-sep {
    margin: 10px 16px 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-tertiary);
}

/* ══════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════ */
.col-kt-content {
    padding: 24px 32px 80px;
    min-width: 0;
}

/* ── Page header ── */
.col-kt-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.col-kt-title-wrap { flex: 1; min-width: 0; }
.col-kt-title-wrap h1 {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 3px;
    letter-spacing: -.3px;
}
.col-kt-subtitle {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0;
}
.col-kt-level-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}
.col-kt-level-very_cheap    { color: #22c55e; border-color: #22c55e; background: rgba(34,197,94,.08); }
.col-kt-level-cheap         { color: #4ade80; border-color: #4ade80; background: rgba(74,222,128,.08); }
.col-kt-level-moderate      { color: #facc15; border-color: #facc15; background: rgba(250,204,21,.08); }
.col-kt-level-expensive     { color: #fb923c; border-color: #fb923c; background: rgba(251,146,60,.08); }
.col-kt-level-very_expensive{ color: #f87171; border-color: #f87171; background: rgba(248,113,113,.08); }

/* ── Currency row ── */
.col-kt-currency-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(79,195,247,.07), rgba(79,195,247,.02));
    border: 1px solid rgba(79,195,247,.15);
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.col-kt-rate { display: flex; flex-direction: column; gap: 1px; }
.col-kt-rate-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-blue);
    font-family: 'JetBrains Mono', monospace;
}
.col-kt-rate-date { font-size: 11px; color: var(--text-tertiary); }
.col-kt-rate-updated-link {
    color: var(--text-tertiary);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    transition: color .15s;
}
.col-kt-rate-updated-link:hover { color: var(--accent-blue); }
.col-kt-converter-btn { margin-left: auto; }
.col-kt-converter-btn {
    padding: 6px 12px;
    border-radius: 7px;
    background: var(--accent-blue-muted);
    border: 1px solid var(--tint-blue-border);
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.col-kt-converter-btn:hover { opacity: .75; }

/* ── Quick stats ── */
.col-kt-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 28px;
}
.col-kt-quick-card {
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    align-items: center;
}
.col-kt-quick-icon {
    grid-row: 1 / 4;
    font-size: 26px;
    line-height: 1;
    align-self: center;
}
.col-kt-quick-icon img.emoji {
    width: 26px !important;
    height: 26px !important;
}
.col-kt-quick-usd {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.2;
}
.col-kt-quick-local {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
}
.col-kt-quick-label {
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.3;
    grid-column: 2;
}

/* ── Section scroll anchor ── */
.col-kt-section {
    margin-bottom: 28px;
    scroll-margin-top: 80px;
}

/* ── Section header ── */
.col-kt-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-default);
}
.col-kt-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.col-kt-section-icon {
    font-size: 16px;
    line-height: 1;
}
.col-kt-section-icon img.emoji {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
}
.col-kt-section-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
}

/* ── Price table ── */
.col-kt-table {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    overflow: hidden;
}
.col-kt-thead {
    display: grid;
    grid-template-columns: 36px 1fr 100px 100px;
    padding: 7px 14px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-default);
}
.col-kt-thead span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-tertiary);
}
.col-kt-th-usd, .col-kt-th-local { text-align: right; }

.col-kt-row {
    display: grid;
    grid-template-columns: 36px 1fr 100px 100px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background .1s;
}
.col-kt-row:last-child { border-bottom: none; }
.col-kt-row:hover { background: rgba(79,195,247,.04); }

.col-kt-row-icon {
    font-size: 15px;
    line-height: 1;
    text-align: center;
}
.col-kt-row-icon img.emoji {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
}
.col-kt-row-label {
    font-size: 13px;
    color: var(--text-secondary);
    padding-left: 4px;
}
.col-kt-row-usd {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}
.col-kt-row-local {
    text-align: right;
    font-size: 12px;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
}
.col-kt-row-empty {
    text-align: right;
    font-size: 13px;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
    opacity: .3;
}

/* ── Cities comparison table ── */
.col-kt-cities-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border-default);
}
.col-kt-cities-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.col-kt-cities-table thead tr {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-default);
}
.col-kt-cities-table th {
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}
.col-kt-cities-table th:first-child { text-align: left; }
.col-kt-cities-table th a { color: var(--accent-blue); text-decoration: none; }
.col-kt-cities-table th a:hover { text-decoration: underline; }
.col-kt-city-th-current { color: var(--text-primary); font-weight: 700; }
.col-kt-cities-table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: background .1s;
}
.col-kt-cities-table tbody tr:last-child { border-bottom: none; }
.col-kt-cities-table tbody tr:hover { background: rgba(79,195,247,.04); }
.col-kt-city-label {
    padding: 9px 12px;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}
.col-kt-city-val {
    padding: 9px 12px;
    text-align: center;
    vertical-align: middle;
}
.cct-usd {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.cct-local {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 1px;
}
.cct-na {
    color: var(--text-tertiary);
    opacity: .3;
}

/* ── Cities chips ── */
.col-kt-cities-list { display: flex; flex-wrap: wrap; gap: 7px; }
.col-kt-city-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all .15s;
}
a.col-kt-city-chip:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: var(--accent-blue-muted);
}
.col-kt-city-chip--current {
    border-color: var(--accent-blue);
    color: var(--text-primary);
    font-weight: 600;
    background: var(--accent-blue-muted);
    cursor: default;
}
.col-kt-city-chip--current small { color: var(--text-tertiary); font-weight: 400; }
.col-kt-chip-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--accent-blue);
    font-weight: 600;
}

/* ══════════════════════════════════════
   MOBILE — sidebar → horizontal tabs
   ══════════════════════════════════════ */
@media (max-width: 860px) {
    .col-kt-body {
        grid-template-columns: 1fr;
        border-top: none;
    }
    .col-kt-sidebar {
        position: static;
        height: auto;
        overflow: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border-default);
        padding: 0;
    }
    .col-kt-sb-country { display: none; }
    .col-kt-nav-sep { display: none; }

    /* Turn nav items into horizontal scroll tabs */
    .col-kt-nav-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding: 4px 8px;
    }
    .col-kt-nav-list::-webkit-scrollbar { display: none; }
    .col-kt-nav-item {
        padding: 8px 12px;
        border-left: none;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
        font-size: 12px;
        flex-shrink: 0;
    }
    .col-kt-nav-item.active {
        background: transparent;
        border-bottom-color: var(--accent-blue);
        border-left: none;
    }

    .col-kt-content { padding: 16px 16px 60px; }
    .col-kt-quick { grid-template-columns: repeat(2, 1fr); }
    .col-kt-thead, .col-kt-row { grid-template-columns: 36px 1fr 90px; }
    .col-kt-th-local, .col-kt-row-local { display: none; }
}

@media (max-width: 480px) {
    .col-kt-quick { grid-template-columns: repeat(2, 1fr); }
    .col-kt-title-wrap h1 { font-size: 18px; }
    .col-kt-currency-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Monthly budget intro block ── */
.col-kt-budget-intro {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 18px 20px;
    margin-bottom: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    border-left: 3px solid var(--accent-blue);
}
.col-kt-budget-total {
    font-family: 'JetBrains Mono', monospace;
    font-size: 26px;
    font-weight: 700;
    color: var(--accent-blue);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.3;
    padding-top: 2px;
}
.col-kt-budget-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}
.col-kt-budget-text strong {
    color: var(--text-primary);
    font-weight: 700;
}
@media (max-width: 600px) {
    .col-kt-budget-intro { flex-direction: column; gap: 10px; }
    .col-kt-budget-total { font-size: 22px; }
}
.col-kt-budget-eur {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 2px;
    letter-spacing: 0;
}

/* ── Budget scenarios: label + color variants ── */
.col-kt-budget-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.col-kt-budget-intro--couple {
    border-left-color: #7c3aed;
    margin-top: 10px;
}
.col-kt-budget-intro--couple .col-kt-budget-total { color: #7c3aed; }
.col-kt-budget-intro--family {
    border-left-color: #059669;
    margin-top: 10px;
}
.col-kt-budget-intro--family .col-kt-budget-total { color: #059669; }

[data-theme="light"] .col-kt-budget-intro--couple { background: #f5f3ff; }
[data-theme="light"] .col-kt-budget-intro--family { background: #ecfdf5; }
.col-kt-budget-text em {
    font-style: italic;
    color: var(--text-tertiary);
}

/* ── Budget question label ─────────────────────────────────────────── */
.col-kt-budget-question {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 0 0 8px;
    opacity: .75;
}

/* ── Section title wrap with FAQ subtitle ──────────────────────────── */
.col-kt-section-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.col-kt-section-question {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.4;
    font-weight: 400;
}

/* ── Author / Verified-by block ────────────────────────────────────── */
.col-kt-author-block {
    margin: 0;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}
.col-kt-author-inner {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.col-kt-author-photo-wrap {
    flex-shrink: 0;
    text-decoration: none;
}
.col-kt-author-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #e5e7eb;
}
.col-kt-author-info {
    flex: 1;
    min-width: 180px;
}
.col-kt-author-verified {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.col-kt-author-verified-icon {
    color: #16a34a;
    font-size: 14px;
}
.col-kt-author-name {
    color: #2563eb;
    text-decoration: none;
}
.col-kt-author-name:hover { text-decoration: underline; }
.col-kt-author-role {
    font-size: 12px;
    color: #6b7280;
    margin: 2px 0 6px;
}
.col-kt-author-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.col-kt-author-link {
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
    padding: 3px 10px;
    border: 1px solid #dbeafe;
    border-radius: 99px;
    background: #eff6ff;
}
.col-kt-author-link:hover { background: #dbeafe; }
.col-kt-author-link--gmaps::before {
    content: "📍 ";
    font-size: 11px;
}
.col-kt-author-summary {
    font-size: 13px;
    color: #4b5563;
    margin: 8px 0 0;
    line-height: 1.55;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}
@media (max-width: 640px) {
    .col-kt-author-block { padding: 16px; }
    .col-kt-author-inner { gap: 10px; }
    .col-kt-author-photo { width: 64px; height: 64px; }
}