.wbp-page-shell {
    --wbp-page: #ffffff;
    --wbp-surface: #ffffff;
    --wbp-soft: #f2f2f2;
    --wbp-border: #111111;
    --wbp-ink: #000000;
    --wbp-muted: #414141;
    --wbp-accent: #de3434;
    --wbp-cheap: #000000;
    --wbp-expensive: #de3434;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 40px 20px 64px;
    overflow-x: clip;
    color: var(--wbp-ink);
    font-family: Poppins, Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

.wbp-page-shell *,
.wbp-page-shell *::before,
.wbp-page-shell *::after { box-sizing: border-box; }

.wbp-page-shell button,
.wbp-page-shell select { font: inherit; }

.wbp-app {
    width: min(1180px, 100%);
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
}

.wbp-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 30px;
    padding: clamp(24px, 4vw, 42px);
    overflow: hidden;
    border-bottom: 5px solid #000;
    background: #000;
    color: #fff;
}

.wbp-hero__content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.wbp-eyebrow,
.wbp-kicker {
    margin: 0 0 8px;
    font-size: .76rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wbp-eyebrow { color: #fff; }

.wbp-eyebrow::before {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 9px;
    background: var(--wbp-accent);
    content: "";
}

.wbp-hero h1 {
    max-width: 720px;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4.4vw, 3.65rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.03;
    text-transform: uppercase;
}

.wbp-lead {
    max-width: 680px;
    margin: 16px 0 0;
    color: #fff;
    font-size: clamp(1rem, 1.8vw, 1.14rem);
    opacity: .78;
}

.wbp-status {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid #fff;
    background: #000;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.wbp-status span { width: 8px; height: 8px; background: var(--wbp-accent); }

.wbp-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .72fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.wbp-map-card,
.wbp-country-card,
.wbp-ranking {
    min-width: 0;
    border: 1px solid var(--wbp-border);
    border-top-width: 6px;
    background: var(--wbp-surface);
}

.wbp-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    padding: 23px 28px 19px;
}

.wbp-card-heading h2,
.wbp-country-card h2,
.wbp-ranking h2 {
    margin: 0;
    color: var(--wbp-ink);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.15;
    text-transform: uppercase;
}

.wbp-kicker { margin-bottom: 5px; color: var(--wbp-accent); }

.wbp-legend {
    display: flex;
    flex: 0 0 auto;
    gap: 13px;
    align-items: center;
    color: var(--wbp-muted);
    font-size: .68rem;
    font-weight: 650;
}

.wbp-legend span { display: flex; gap: 6px; align-items: center; }
.wbp-dot { width: 8px; height: 8px; }
.wbp-dot--cheap { background: var(--wbp-cheap); }
.wbp-dot--expensive { background: var(--wbp-expensive); }

.wbp-map-wrap {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #cfcfcf;
    background: #f1f1f1;
}

.wbp-map {
    display: block;
    width: 100%;
    height: auto;
    min-height: 420px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.wbp-map.is-dragging { cursor: grabbing; }

.wbp-map-loading {
    position: absolute;
    inset: 50% auto auto 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    color: var(--wbp-muted);
    font-size: .76rem;
}

.wbp-map-controls {
    position: absolute;
    z-index: 3;
    top: 13px;
    right: 13px;
    display: grid;
    gap: 5px;
}

.wbp-map-controls button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    color: #000;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 800;
}

.wbp-map-controls button:hover,
.wbp-map-controls button:focus-visible { background: #000; color: #fff; }

.wbp-country-shape {
    fill: #fff;
    stroke: #cfcfcf;
    stroke-width: .55;
    pointer-events: none;
}

.wbp-country-shape[data-tone="cheap"],
.wbp-country-shape[data-tone="expensive"] { fill: #fff; }
.wbp-country-shape[data-selected="true"] { fill: #fff; stroke: #cfcfcf; stroke-width: .55; }

.wbp-map-marker { cursor: pointer; outline: none; }
.wbp-map-marker__leader { stroke: #777; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wbp-map-marker__anchor { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wbp-map-marker__label { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wbp-map-marker--cheap .wbp-map-marker__anchor,
.wbp-map-marker--cheap .wbp-map-marker__label { fill: #000; }
.wbp-map-marker--expensive .wbp-map-marker__anchor,
.wbp-map-marker--expensive .wbp-map-marker__label { fill: var(--wbp-accent); }
.wbp-map-marker--germany .wbp-map-marker__anchor,
.wbp-map-marker--germany .wbp-map-marker__label { fill: #fff; stroke: #000; stroke-width: 2.25; }
.wbp-map-marker.wbp-map-marker--germany text { fill: #000; }
.wbp-map-marker[data-selected="true"] .wbp-map-marker__label { stroke: #000; stroke-width: 2.5; }
.wbp-map-marker text { fill: #fff; font-size: 8px; font-weight: 800; pointer-events: none; }

.wbp-map-country-control { padding: 19px 28px 23px; }

.wbp-country-control {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--wbp-ink);
    font-size: .86rem;
    font-weight: 680;
}

.wbp-country-control select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 36px 10px 12px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    color: var(--wbp-ink);
    font-size: 1rem;
}

.wbp-country-card { display: flex; flex-direction: column; padding: 28px; }
.wbp-country-title { display: flex; gap: 10px; align-items: center; }
.wbp-flag { font-size: 1.35rem; line-height: 1; }

.wbp-main-price {
    margin: 28px 0 24px;
    padding-bottom: 23px;
    border-bottom: 1px solid #cfcfcf;
}

.wbp-main-price strong {
    display: block;
    color: #000;
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
    line-height: 1;
}

.wbp-main-price span { display: block; margin-top: 5px; color: var(--wbp-muted); font-size: .76rem; font-weight: 650; }
.wbp-country-metrics { display: grid; gap: 15px; }
.wbp-country-metrics > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.wbp-country-metrics span { color: var(--wbp-muted); font-size: .72rem; }
.wbp-country-metrics strong { text-align: right; font-size: .8rem; font-weight: 800; }
.wbp-country-metrics [data-tone="high"] { color: var(--wbp-accent); }
.wbp-country-metrics [data-tone="low"] { color: #000; }

.wbp-result-switches {
    display: grid;
    grid-template-columns: minmax(145px, 1fr) minmax(105px, .68fr);
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

.wbp-toggle-group {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 3px;
    overflow: hidden;
    border: 2px solid #000;
    border-radius: 999px;
    background: #fff;
}

.wbp-toggle-group::before {
    position: absolute;
    z-index: -1;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: #000;
    content: "";
    transform: translateX(0);
    transition: transform 180ms ease, background-color 180ms ease;
}

.wbp-toggle-group[data-active-index="1"]::before {
    background: #000;
    transform: translateX(100%);
}

.wbp-toggle {
    min-width: 0;
    position: relative;
    z-index: 1;
    min-height: 38px;
    padding: 6px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
    font-size: .68rem;
    font-weight: 700;
    transition: color 180ms ease;
}

.wbp-toggle:hover,
.wbp-toggle:focus-visible { color: #000; }
.wbp-toggle.is-active,
.wbp-toggle.is-active:hover,
.wbp-toggle.is-active:focus-visible { color: #fff; }

.wbp-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.wbp-ranking__head {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #cfcfcf;
}

.wbp-ranking__head > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    flex: 0 0 36px;
    background: #000;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.wbp-ranking--expensive .wbp-ranking__head > span { background: var(--wbp-accent); }
.wbp-ranking ol { margin: 0; padding: 0; list-style: none; }
.wbp-ranking li + li { border-top: 1px solid #e6e6e6; }

.wbp-ranking li button {
    display: grid;
    width: 100%;
    min-height: 58px;
    grid-template-columns: 28px minmax(0, 1fr) max-content;
    gap: 10px;
    align-items: center;
    padding: 9px 17px;
    border: 0;
    background: #fff;
    color: #000;
    text-align: left;
    cursor: pointer;
}

.wbp-ranking li button:hover,
.wbp-ranking li button:focus-visible,
.wbp-ranking li button.is-selected { background: #f2f2f2; }
.wbp-ranking__number { color: var(--wbp-muted); font-size: .72rem; font-weight: 800; }
.wbp-ranking__country { min-width: 0; }
.wbp-ranking__country b { display: block; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.wbp-ranking li button > strong { font-size: .78rem; font-weight: 800; }

.wbp-method { margin-top: 26px; border: 1px solid #000; }
.wbp-method summary { padding: 15px 18px; cursor: pointer; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.wbp-method > div { max-width: 800px; padding: 0 18px 14px; color: var(--wbp-muted); font-size: .72rem; }
.wbp-method p { margin: 0 0 8px; }

.wbp-footer {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 24px;
    padding: 24px 4px 0;
    border-top: 2px solid #000;
    color: var(--wbp-muted);
    font-size: .68rem;
}

.wbp-footer a { color: #000; text-underline-offset: 2px; }

.wbp-ad-slot { position: relative; width: min(970px, 100%); margin: 20px auto; padding-top: 16px; text-align: center; }
.wbp-ad-slot > span { position: absolute; top: 0; left: 50%; color: #777; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); }
.wbp-ad-creative { min-height: 90px; overflow: hidden; border: 1px solid #000; background: #f7f7f7; }
.wbp-ad-creative--mobile { display: none; }
.wbp-mobile-sticky { display: none; }

.wbp-theme--professional {
    --wbp-border: #dbe2e8;
    --wbp-ink: #172a3a;
    --wbp-muted: #607180;
    --wbp-cheap: #087f7a;
    --wbp-expensive: #be4b4b;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wbp-theme--professional .wbp-hero { border: 0; border-radius: 18px; background: #173f5f; }
.wbp-theme--professional .wbp-hero h1 { text-transform: none; }
.wbp-theme--professional .wbp-map-card,
.wbp-theme--professional .wbp-country-card,
.wbp-theme--professional .wbp-ranking,
.wbp-theme--professional .wbp-method { overflow: hidden; border-radius: 14px; }

@media (max-width: 900px) {
    .wbp-overview { grid-template-columns: 1fr; }
    .wbp-country-card { min-height: 340px; }
}

@media (max-width: 680px) {
    .wbp-page-shell { padding: 24px 12px 40px; }

    .wbp-page-shell.wbp-page-shell--mobile-full-width {
        position: relative;
        left: 50%;
        width: 100vw;
        max-width: 100vw;
        margin-right: -50vw;
        margin-left: -50vw;
        padding: 0 0 40px;
        overflow: visible;
    }

    .wbp-page-shell--mobile-full-width .wbp-app.wbp-mobile-full-width { position: static; width: 100%; max-width: 100%; margin: 0; }
    .wbp-page-shell--mobile-full-width.wbp-page-shell--kezako .wbp-hero { position: relative; }

    .wbp-page-shell--mobile-full-width.wbp-page-shell--kezako .wbp-hero::before {
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 24px;
        background: #000;
        content: "";
        pointer-events: none;
    }

    .wbp-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 30px;
        padding: 24px 20px;
        overflow: visible;
    }

    .wbp-status { order: -1; }
    .wbp-hero h1 { font-size: clamp(2rem, 9.5vw, 2.8rem); }
    .wbp-lead { font-size: 1rem; }

    .wbp-app.wbp-mobile-full-width .wbp-map-card,
    .wbp-app.wbp-mobile-full-width .wbp-country-card,
    .wbp-app.wbp-mobile-full-width .wbp-ranking,
    .wbp-app.wbp-mobile-full-width .wbp-method { border-right-width: 0; border-left-width: 0; border-radius: 0; }

    .wbp-overview { gap: 16px; margin-bottom: 16px; }
    .wbp-card-heading { display: block; padding: 21px 20px 16px; }
    .wbp-legend { margin-top: 10px; }
    .wbp-map-wrap { min-height: 300px; }
    .wbp-map { min-height: 300px; }
    .wbp-map-country-control { padding: 18px 20px 21px; }
    .wbp-country-control select { min-height: 64px; font-size: 16px; }

    .wbp-country-card { min-height: 0; padding: 21px; }
    .wbp-main-price { margin: 22px 0 20px; }
    .wbp-main-price strong { font-size: 3rem; }
    .wbp-result-switches { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 8px; margin-top: 18px; padding-top: 12px; }
    .wbp-toggle { min-height: 32px; padding: 4px 6px; font-size: .64rem; }

    .wbp-rankings { grid-template-columns: 1fr; gap: 16px; }
    .wbp-ranking__head { padding: 18px 20px; }
    .wbp-ranking li button { min-height: 54px; padding-right: 20px; padding-left: 20px; }
    .wbp-method { margin-top: 16px; }
    .wbp-footer { align-items: flex-start; flex-direction: column; padding: 20px 20px 82px; }

    .wbp-ad-creative--desktop { display: none; }
    .wbp-ad-creative--mobile { display: block; }

    .wbp-mobile-sticky {
        position: fixed;
        z-index: 50;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: hidden;
        border-top: 1px solid #000;
        background: #fff;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    }

    .wbp-mobile-sticky > div { min-width: 0; padding: 11px 14px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
    .wbp-mobile-sticky > div + div { border-left: 1px solid #fff; background: #000; }
    .wbp-mobile-sticky span,
    .wbp-mobile-sticky strong { display: block; }

    .wbp-mobile-sticky span {
        overflow: hidden;
        color: var(--wbp-muted);
        font-size: .63rem;
        font-weight: 700;
        letter-spacing: .025em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .wbp-mobile-sticky strong {
        margin-top: 2px;
        overflow: hidden;
        color: #000;
        font-size: clamp(1rem, 5vw, 1.25rem);
        font-variant-numeric: tabular-nums;
        letter-spacing: -.02em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wbp-mobile-sticky > div + div span,
    .wbp-mobile-sticky > div + div strong { color: #fff; }
}

@media (max-width: 950px) {
    .wbp-app select { font-size: 16px; touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
    .wbp-page-shell *,
    .wbp-page-shell *::before,
    .wbp-page-shell *::after { transition-duration: .01ms !important; }
}

.esp-app .wbp-result-switches {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.esp-app .wbp-toggle {
    padding-right: 3px;
    padding-left: 3px;
    font-size: .62rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .esp-app .wbp-result-switches {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    }

    .esp-app .wbp-toggle {
        padding-right: 4px;
        padding-left: 4px;
        font-size: .58rem;
    }
}