.costs-hero {
    background: linear-gradient(135deg,#2d0a2e 0%,#5a1a4a 60%,#3a0d3e 100%);
    padding: 36px 24px 28px;
    text-align: center;
    color: #fff;
}
.costs-hero h1 { font-size: 26px; font-weight: 700; margin-bottom: 6px; font-family:'Playfair Display',serif; }
.costs-hero p  { font-size: 14px; color: rgba(255,255,255,0.72); }

.costs-wrap { max-width: 980px; margin: 0 auto; padding: 28px 16px 60px; }

.filter-row {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px;
    justify-content: center;
}
.filter-btn {
    padding: 7px 16px; border-radius: 999px; border: 1.5px solid #e8d5f5;
    font-size: 13px; font-weight: 600; cursor: pointer;
    background: #fff; color: #7e22ce;
    transition: all 0.18s;
}
.filter-btn:hover, .filter-btn.active { background: #7e22ce; color: #fff; border-color: #7e22ce; }
[data-theme="dark"] .filter-btn { background:#1e0a2e; color:#c084fc; border-color:#3a1a50; }
[data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .filter-btn.active { background:#7e22ce; color:#fff; }

.stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px;
}
.stat-box {
    background: #fff; border-radius: 16px; padding: 16px;
    border: 1px solid #f0e6f6; text-align: center;
}
[data-theme="dark"] .stat-box { background:#1e0a2e; border-color:#3a1a50; }
.stat-num { font-size: 24px; font-weight: 800; color: #7e22ce; }
[data-theme="dark"] .stat-num { color:#c084fc; }
.stat-lbl { font-size: 12px; color: #a78cc0; margin-top: 3px; }

.country-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.country-card {
    background: #fff; border-radius: 18px; padding: 18px 20px;
    border: 1px solid #f0e6f6;
    transition: transform 0.2s, box-shadow 0.2s;
}
.country-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(100,20,120,0.10); }
[data-theme="dark"] .country-card { background:#1e0a2e; border-color:#3a1a50; }

.country-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.country-flag   { font-size: 28px; line-height: 1; }
.country-name   { font-size: 15px; font-weight: 700; color: #1e0a2e; }
[data-theme="dark"] .country-name { color: #f3e8ff; }
.country-region { font-size: 11px; color: #a78cc0; font-weight: 600; }

.cost-bar-wrap { margin-bottom: 10px; }
.cost-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.cost-bar-label .lbl { color: #7c4d99; font-weight: 600; }
[data-theme="dark"] .cost-bar-label .lbl { color:#c084fc; }
.cost-bar-label .val { color: #1e0a2e; font-weight: 700; }
[data-theme="dark"] .cost-bar-label .val { color:#f3e8ff; }
.cost-bar-track {
    height: 7px; background: #f0e6f6; border-radius: 999px; overflow: hidden;
}
[data-theme="dark"] .cost-bar-track { background:#3a1a50; }
.cost-bar-fill  {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #7e22ce, #c084fc);
    transition: width 0.6s cubic-bezier(.34,1.2,.64,1);
}

.country-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ctag {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    font-weight: 600; background: #f3e8ff; color: #7e22ce;
}
[data-theme="dark"] .ctag { background:#3a1a50; color:#c084fc; }
.ctag.free   { background: #dcfce7; color: #166534; }
.ctag.cheap  { background: #fef9c3; color: #854d0e; }
.ctag.mid    { background: #dbeafe; color: #1d4ed8; }
.ctag.costly { background: #fee2e2; color: #991b1b; }

.section-hdr {
    font-size: 16px; font-weight: 700; color: #4a0e6e;
    margin: 28px 0 14px; padding-bottom: 8px;
    border-bottom: 2px solid #f3e8ff;
}
[data-theme="dark"] .section-hdr { color:#c084fc; border-color:#3a1a50; }

.info-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.info-box {
    background: #faf5ff; border-radius: 16px; padding: 18px 20px;
    border-left: 4px solid #c084fc;
}
[data-theme="dark"] .info-box { background:#2d1045; }
.info-box h3 { font-size: 14px; font-weight: 700; color: #7e22ce; margin-bottom: 8px; }
[data-theme="dark"] .info-box h3 { color:#c084fc; }
.info-box p  { font-size: 13px; color: #4a2060; line-height: 1.6; }
[data-theme="dark"] .info-box p { color:#d8b4fe; }