/* ==========================================================================
   Citiwell · price page with the visit calculator (prices.html, prices-ru.html, prices-en.html)
   ========================================================================== */

/* ---------- hero ---------- */
.ra-hero { padding-block: clamp(32px, 4.4vw, 64px) clamp(40px, 5vw, 72px); }
.ra-hero__grid { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }

@media (min-width: 1000px) {
    .ra-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.ra-hero__copy { display: grid; gap: 22px; min-width: 0; }
.tn-main .ra-hero h1 { font-size: clamp(2.1rem, 1.25rem + 3.6vw, 3.75rem); line-height: 1.04; }
.ra-hero__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

@media (max-width: 559px) {
    .ra-hero__controls .tn-gender, .ra-hero__controls .tn-btn { width: 100%; }
}

.ra-hero__controls .tn-btn:hover .tn-ico { transform: translateY(3px); }

.ra-hero__facts { display: grid; gap: 10px; }

@media (min-width: 640px) {
    .ra-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ra-hero__facts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--tn-radius-sm);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
    line-height: 1.35;
}

.ra-hero__facts .tn-ico { margin-top: 2px; color: var(--tn-aqua); }
.ra-hero__facts strong { display: block; color: #fff; font-size: 0.98rem; font-weight: 800; }
.ra-hero__facts li:first-child strong { color: var(--tn-sun); }

.ra-hero__media img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; object-position: 38% 50%; border-radius: clamp(24px, 3vw, 36px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38); }

@media (max-width: 999px) {
    /* phones: headline, slim photo, then the controls */
    .ra-hero__grid { gap: 20px; }
    .ra-hero__copy { display: contents; }
    .ra-hero h1 { order: 1; }
    .ra-hero .tn-hero__lead { order: 2; }
    .ra-hero__media { order: 3; }
    .ra-hero__controls { order: 4; }
    .ra-hero__facts { order: 5; }
    .ra-hero__media img { aspect-ratio: 16 / 8; object-position: 30% 40%; border-radius: 20px; }
}

/* ---------- sticky chips ---------- */
.ra-chipbar {
    position: sticky;
    top: var(--tn-header-h);
    z-index: 800;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--tn-line), 0 10px 24px rgba(11, 33, 53, 0.05);
}

.ra-chipbar__inner { display: flex; align-items: center; gap: 18px; }

.ra-chips {
    display: flex;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
    margin-inline: -20px;
    padding: 10px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ra-chips::-webkit-scrollbar { display: none; }

.ra-chip {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--tn-bg);
    color: var(--tn-text);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.ra-chip:hover { background: var(--tn-aqua-soft); color: var(--tn-blue-dark); }
.ra-chip.is-active { background: var(--tn-navy); color: #fff; }
.ra-chip--packs { box-shadow: inset 0 0 0 1.5px rgba(240, 79, 90, 0.5); background: #fff; color: var(--tn-coral-dark); }
.ra-chip--packs.is-active { background: var(--tn-coral-dark); color: #fff; box-shadow: none; }
.ra-chipbar__gender { display: none; flex: 0 0 auto; }

@media (min-width: 1000px) {
    .ra-chips { margin-inline: 0; padding-inline: 0; }
    .ra-chipbar__gender { display: inline-grid; }
    .ra-chipbar__gender .tn-gender__btn { min-height: 38px; padding: 0 16px; font-size: 0.88rem; }
}

/* ---------- list + cart layout ---------- */
.ra-list { padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7.5vw, 108px); scroll-margin-top: calc(var(--tn-header-h) + 40px); }
.ra-layout { display: grid; gap: 28px; align-items: start; }

@media (min-width: 1000px) {
    .ra-layout { grid-template-columns: minmax(0, 1fr) 372px; gap: 32px; }
}

.ra-layout__main { display: grid; gap: 22px; min-width: 0; }

.ra-intro { display: grid; gap: 12px; }
.ra-intro h2 { font-size: clamp(1.8rem, 1.15rem + 2.6vw, 2.75rem); }
.ra-intro p { max-width: 720px; color: var(--tn-muted); line-height: 1.6; }

.ra-intro__how {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: none !important;
    padding: 14px 16px;
    border-radius: var(--tn-radius-sm);
    background: var(--tn-aqua-soft);
    color: #0f5f80 !important;
    font-weight: 650;
}

.ra-intro__how .tn-ico { margin-top: 2px; padding: 3px; border-radius: 6px; background: var(--tn-blue); color: #fff; width: 22px; height: 22px; }
.ra-intro__how--map { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(29, 143, 189, 0.35); }
.ra-intro__how--map .tn-ico { background: var(--tn-navy); }
.ra-intro__how a { color: var(--tn-blue-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ra-intro__how a:hover { color: var(--tn-navy); }

/* ---------- category cards ---------- */
.ra-cat {
    scroll-margin-top: calc(var(--tn-header-h) + 78px);
    overflow: hidden;
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: var(--tn-shadow-soft);
}

.ra-cat__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 20px 18px 14px;
    border-bottom: 1px solid var(--tn-line);
}

.ra-cat__head h3 { font-size: 1.5rem; }
.ra-cat__count { color: var(--tn-muted); font-size: 0.92rem; }
.ra-cat__col { display: none; }

.ra-row {
    position: relative;
    display: grid;
    grid-template-columns: 30px 64px minmax(0, 1fr) auto;
    grid-template-areas:
        "box main main price"
        "box main main first"
        ". img scope scope";
    column-gap: 12px;
    align-items: center;
    padding: 16px 16px;
    border-bottom: 1px solid var(--tn-line);
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.ra-rows > li:last-child .ra-row { border-bottom: 0; }
.ra-row:hover { background: #f7fafc; }
.ra-row.is-checked { background: #eef9fc; }

.ra-row__check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

.ra-row__box {
    grid-area: box;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    box-shadow: inset 0 0 0 2px #b9c9d5;
    color: #8da2b2;
    transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.ra-row__box .tn-ico { width: 18px; height: 18px; }
.ra-row__tick { display: none; }
.ra-row:hover .ra-row__box { box-shadow: inset 0 0 0 2px var(--tn-blue); color: var(--tn-blue); }
.ra-row.is-checked .ra-row__box { background: var(--tn-blue); box-shadow: none; color: #fff; }
.ra-row.is-checked .ra-row__plus { display: none; }
.ra-row.is-checked .ra-row__tick { display: block; }
.ra-row__check:focus-visible ~ .ra-row__box { outline: 3px solid var(--tn-coral); outline-offset: 3px; }

.ra-row__img { grid-area: img; align-self: start; width: 64px; margin-top: 12px; aspect-ratio: 400 / 223; object-fit: contain; border-radius: 8px; background: #fff; }
.ra-row__main { grid-area: main; display: grid; gap: 3px; min-width: 0; }
.ra-row__main strong { color: var(--tn-ink); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.ra-row__time { display: inline-flex; align-items: center; gap: 6px; color: var(--tn-muted); font-size: 0.86rem; }
.ra-row__time .tn-ico { width: 1em; height: 1em; }

.ra-row__price { grid-area: price; align-self: end; text-align: right; }
.ra-row__price b { color: var(--tn-ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.ra-row__first { grid-area: first; align-self: start; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.ra-row__first small { color: var(--tn-coral-dark); font-size: 0.72rem; font-weight: 700; }
.ra-row__first b { color: var(--tn-coral-dark); font-size: 1rem; font-weight: 800; }
.ra-row__scope { grid-area: scope; margin-top: 10px; color: var(--tn-muted); font-size: 0.92rem; line-height: 1.5; }

/* what a larger zone already includes / which larger zone contains this one */
.ra-row__rel { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; color: var(--tn-text); font-size: 0.88rem; line-height: 1.4; }
.ra-row__rel .tn-ico { width: 15px; height: 15px; margin-top: 2px; color: var(--tn-blue); }
.ra-row__rel b { color: var(--tn-ink); font-weight: 750; }
.ra-row__rel--partof { color: var(--tn-muted); }

.ra-row__covered { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: var(--tn-navy); color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1.3; }
.ra-row__covered[hidden] { display: none; }

/* a smaller zone that is already inside a ticked larger zone: shown as included, never charged */
.ra-row.is-covered { background: #f4f8fb; cursor: default; }
.ra-row.is-covered:hover { background: #f4f8fb; }
.ra-row.is-covered .ra-row__box, .ra-row.is-covered:hover .ra-row__box { background: #d9e6ee; box-shadow: none; color: var(--tn-navy); }
.ra-row.is-covered .ra-row__plus { display: none; }
.ra-row.is-covered .ra-row__tick { display: block; }
.ra-row.is-covered .ra-row__price b, .ra-row.is-covered .ra-row__first b { color: #9aabb8; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ra-row.is-covered .ra-row__first small { color: #9aabb8; }
.ra-row.is-covered .ra-row__img { opacity: 0.6; }

@media (min-width: 720px) {
    .ra-cat__head { grid-template-columns: auto minmax(0, 1fr) 84px 128px; padding: 22px 24px 14px; }
    .ra-cat__col { display: block; color: var(--tn-muted); font-size: 0.8rem; font-weight: 700; text-align: right; }
    .ra-cat__col--first { color: var(--tn-coral-dark); }

    .ra-row {
        grid-template-columns: 30px 96px minmax(0, 1fr) 84px 128px;
        grid-template-areas:
            "box img main price first"
            "box img scope scope .";
        column-gap: 16px;
        row-gap: 4px;
        align-items: start;
        padding: 18px 24px;
    }

    .ra-row__box { margin-top: 10px; }
    .ra-row__img { width: 96px; margin-top: 0; }
    .ra-row__main { grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 14px; }
    .ra-row__main strong { font-size: 1.15rem; }
    .ra-row__price, .ra-row__first { align-self: start; }
    .ra-row__price b, .ra-row__first b { font-size: 1.4rem; }
    .ra-row__first small { display: none; }
    .ra-row__scope { margin-top: 0; max-width: 560px; }
}

/* ---------- cart ---------- */
.ra-cart {
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: var(--tn-radius);
    background: linear-gradient(170deg, var(--tn-navy) 0%, var(--tn-navy-2) 100%);
    box-shadow: 0 26px 60px rgba(11, 33, 53, 0.28);
    color: rgba(255, 255, 255, 0.8);
}

.ra-cart__bar { display: none; }
.ra-cart__bar-close { display: none; }
.ra-cart__panel { display: grid; gap: 16px; }

.ra-cart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tn-main .ra-cart__head h2 { color: #fff; font-size: 1.5rem; }
.ra-cart__head span { color: var(--tn-aqua); font-size: 0.92rem; font-weight: 700; }

.ra-cart__empty { display: grid; gap: 14px; }
.ra-cart__empty[hidden], .ra-cart__filled[hidden] { display: none; }
.ra-cart__empty p { line-height: 1.55; }
.ra-cart__packs { display: grid; gap: 0; border-radius: var(--tn-radius-sm); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ra-cart__packs li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; color: rgba(255, 255, 255, 0.84); font-size: 0.95rem; }
.ra-cart__packs li + li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ra-cart__packs b { color: #fff; font-size: 1.15rem; font-weight: 800; }

.ra-cart__filled { display: grid; gap: 14px; }
.ra-cart__items { display: grid; gap: 2px; max-height: 236px; overflow-y: auto; margin-right: -8px; padding-right: 8px; }
.ra-cart__items li { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; padding: 7px 0; color: #fff; font-size: 0.95rem; font-weight: 650; line-height: 1.3; }
.ra-cart__items b { color: rgba(255, 255, 255, 0.72); font-weight: 700; }
.tn-main .ra-cart__items button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 18px; line-height: 1; }
.tn-main .ra-cart__items button:hover { background: var(--tn-coral-dark); }

.ra-cart__sum { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ra-cart__sum div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ra-cart__sum div[hidden] { display: none; }
.ra-cart__sum dt { color: rgba(255, 255, 255, 0.74); font-size: 0.92rem; line-height: 1.35; }
.ra-cart__sum dd { color: #fff; font-size: 1.1rem; font-weight: 800; white-space: nowrap; }
.ra-cart__sum .is-struck dd { color: rgba(255, 255, 255, 0.55); font-weight: 700; text-decoration: line-through; }
.ra-cart__sum .is-best dt { color: #fff; font-weight: 750; }
.ra-cart__sum .is-best dd { font-size: 1.9rem; letter-spacing: -0.04em; }
.ra-cart__sum .is-saving dt, .ra-cart__sum .is-saving dd { color: #7be3c4; }
.ra-cart__sum .is-first { border-bottom: 0; }
.ra-cart__sum .is-first dt { color: var(--tn-sun); font-weight: 750; }
.ra-cart__sum .is-first dt small { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; font-weight: 500; }
.ra-cart__sum .is-first dd { color: var(--tn-sun); font-size: 1.5rem; letter-spacing: -0.03em; }

.ra-cart__items li.is-covered { grid-template-columns: minmax(0, 1fr) auto; padding: 0 0 7px 14px; color: rgba(255, 255, 255, 0.72); font-size: 0.86rem; font-weight: 600; border-left: 2px solid rgba(95, 208, 227, 0.45); margin-left: 2px; }
.ra-cart__items li.is-covered small { display: block; color: rgba(255, 255, 255, 0.5); font-size: 0.76rem; font-weight: 500; }
.ra-cart__items li.is-covered b { color: #7be3c4; font-size: 0.8rem; font-weight: 700; }

.ra-cart__hint { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--tn-radius-sm); background: rgba(95, 208, 227, 0.14); color: #d5f4fa; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.ra-cart__hint[hidden] { display: none; }
.tn-main .ra-cart__apply { justify-self: start; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--tn-navy); font-size: 0.88rem; font-weight: 800; line-height: 1.2; text-align: left; transition: background-color 0.16s ease; }
.tn-main .ra-cart__apply:hover { background: var(--tn-aqua); }
.ra-cart__apply[hidden] { display: none; }
.ra-cart__info { padding: 10px 12px; border-radius: var(--tn-radius-sm); box-shadow: inset 0 0 0 1px rgba(255, 211, 107, 0.45); color: #ffe7b0; font-size: 0.86rem; line-height: 1.45; }
.ra-cart__info[hidden] { display: none; }

.tn-main .ra-cart__clear { justify-self: start; padding: 4px 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tn-main .ra-cart__clear:hover { color: #fff; }

.ra-cart__actions { display: grid; gap: 12px; }
.ra-cart__note { color: rgba(255, 255, 255, 0.56); font-size: 0.8rem; line-height: 1.45; }

@media (min-width: 1000px) {
    .ra-cart { position: sticky; top: calc(var(--tn-header-h) + 84px); max-height: calc(100vh - var(--tn-header-h) - 108px); overflow-y: auto; }
}

/* phones and tablets: the cart is a bottom bar that opens into a sheet */
@media (max-width: 999px) {
    .ra-cart {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 34px rgba(11, 33, 53, 0.3);
        transition: transform 0.28s ease;
    }

    .ra-cart.is-parked { transform: translateY(110%); }

    .tn-main .ra-cart__bar {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        min-height: 48px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #fff;
        text-align: left;
    }

    .ra-cart__bar-text { display: grid; min-width: 0; line-height: 1.25; }
    .ra-cart__bar-text strong { overflow: hidden; color: #fff; font-size: 1rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
    .ra-cart__bar-text span { color: var(--tn-sun); font-size: 0.82rem; font-weight: 650; }
    .ra-cart:not(.has-items) .ra-cart__bar-text span { color: rgba(255, 255, 255, 0.66); }
    .ra-cart__chevron { flex: 0 0 auto; color: rgba(255, 255, 255, 0.7); transition: transform 0.2s ease; }
    .ra-cart.is-open .ra-cart__chevron { transform: rotate(180deg); }

    .ra-cart__panel { display: none; grid-column: 1 / -1; order: -1; max-height: min(62vh, 520px); overflow-y: auto; padding: 10px 0 14px; }
    .ra-cart.is-open .ra-cart__panel { display: grid; }
    .ra-cart__items { max-height: none; }

    .ra-cart__actions .tn-btn { min-height: 48px; padding: 0 22px; font-size: 0.95rem; }
    .ra-cart__actions .tn-btn .tn-ico { display: none; }
    .ra-cart__note { display: none; }
    .ra-cart.is-open .ra-cart__actions { grid-column: 1 / -1; }
    .ra-cart.is-open .ra-cart__note { display: block; }
    .ra-cart.is-open .ra-cart__bar { grid-column: 1 / -1; order: -2; justify-content: center; min-height: 40px; }
    .ra-cart.is-open .ra-cart__bar-text { display: none; }
    .ra-cart.is-open .ra-cart__bar-close { display: block; color: rgba(255, 255, 255, 0.72); font-size: 0.88rem; font-weight: 700; }
    .ra-cart.is-open .ra-cart__actions { padding-top: 10px; }

    .ra-final { padding-bottom: 96px !important; }
}

/* ---------- packages ---------- */
#packages { scroll-margin-top: calc(var(--tn-header-h) + 40px); }
.ra-packs__grid { display: grid; gap: 22px; align-items: stretch; }

@media (min-width: 960px) {
    .ra-packs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ra-pack {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto auto 1fr auto;
    gap: 16px;
    padding: 26px 22px 22px;
    border-radius: var(--tn-radius);
    background: var(--tn-bg);
    box-shadow: inset 0 0 0 1px var(--tn-line);
}

.ra-pack--hit { background: #fff; box-shadow: inset 0 0 0 2px var(--tn-blue), var(--tn-shadow); }

.ra-pack__badge { position: absolute; top: -14px; right: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--tn-sun); color: #3b2a00; font-size: 0.8rem; font-weight: 800; }
.ra-pack__badge .tn-ico { width: 1em; height: 1em; }

.ra-pack__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.ra-pack__count { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--tn-navy); color: #fff; font-size: 1.8rem; font-weight: 800; }
.ra-pack--hit .ra-pack__count { background: var(--tn-blue); }
.ra-pack--best .ra-pack__count { background: linear-gradient(135deg, var(--tn-coral), var(--tn-coral-dark)); }
.ra-pack__head h3 { font-size: 1.35rem; }
.ra-pack__head p { margin-top: 4px; color: var(--tn-muted); font-size: 0.9rem; line-height: 1.4; }

.ra-pack__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ra-pack__panel p { display: grid; gap: 2px; padding: 14px; border-radius: var(--tn-radius-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--tn-line); }
.ra-pack--hit .ra-pack__panel p { background: var(--tn-bg); }
.ra-pack__panel strong { color: var(--tn-ink); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.ra-pack__panel span { color: var(--tn-muted); font-size: 0.8rem; font-weight: 650; }
.ra-pack__first { background: #fff1f0 !important; box-shadow: inset 0 0 0 1px #ffd2cf !important; }
.ra-pack__first strong, .ra-pack__first span { color: var(--tn-coral-dark); }

.ra-pack__compare { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; color: var(--tn-muted); font-size: 0.95rem; }
.ra-pack__compare b { padding: 6px 12px; border-radius: 999px; background: #e3f6ef; color: #0b6b53; font-size: 0.9rem; font-weight: 800; white-space: nowrap; }

.ra-pack__unit { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--tn-radius-sm); background: var(--tn-aqua-soft); color: #0f5f80; font-size: 0.95rem; font-weight: 750; }
.ra-pack--best .ra-pack__unit { background: #fff1e0; color: #8a4b00; }

.ra-pack__example { display: grid; align-content: start; gap: 10px; }
.ra-pack__label { color: var(--tn-muted); font-size: 0.85rem; font-weight: 700; }
.ra-pack__list { display: grid; gap: 8px; }
.ra-pack__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px; color: var(--tn-ink); font-size: 0.95rem; font-weight: 650; line-height: 1.3; }
.ra-pack__list .tn-ico { align-self: center; width: 16px; height: 16px; color: var(--tn-ok); }
.ra-pack__list s { color: var(--tn-muted); }
.ra-pack__list .is-total { grid-template-columns: minmax(0, 1fr) auto; margin-top: 2px; padding-top: 10px; border-top: 1px dashed #c8d6e0; color: var(--tn-muted); }
.ra-pack__note { display: flex; align-items: flex-start; gap: 10px; color: var(--tn-muted); font-size: 0.86rem; line-height: 1.45; }
.ra-pack__note .tn-ico { margin-top: 1px; color: var(--tn-blue); }
.ra-pack__note strong { color: var(--tn-ink); }

.ra-pack__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ra-pack__both { color: var(--tn-muted); font-size: 0.92rem; font-weight: 700; }
.ra-pack__foot .tn-btn { min-height: 52px; padding: 0 24px; flex: 1 1 auto; }

/* ---------- reading rules ---------- */
.ra-conds__grid { display: grid; gap: 14px; }

@media (min-width: 760px) {
    .ra-conds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

.ra-cond { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: var(--tn-radius); background: #fff; box-shadow: var(--tn-shadow-soft); }
.ra-cond__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; background: var(--tn-aqua-soft); color: var(--tn-blue); }
.ra-cond h3 { font-size: 1.15rem; letter-spacing: -0.015em; }
.ra-cond p { margin-top: 6px; color: var(--tn-muted); line-height: 1.55; }

.ra-map { margin-top: clamp(22px, 3vw, 34px); padding: clamp(20px, 3vw, 32px); border-radius: var(--tn-radius); background: #fff; box-shadow: var(--tn-shadow-soft); scroll-margin-top: calc(var(--tn-header-h) + 84px); }
.ra-map h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); }
.ra-map > p { margin-top: 8px; max-width: 760px; color: var(--tn-muted); line-height: 1.55; }
.ra-map__table { width: 100%; margin-top: 18px; border-collapse: collapse; }
.ra-map__table th, .ra-map__table td { padding: 12px 0; border-top: 1px solid var(--tn-line); text-align: left; vertical-align: top; }
.ra-map__table thead th { padding-top: 0; border-top: 0; color: var(--tn-muted); font-size: 0.8rem; font-weight: 700; }
.ra-map__table tbody th { width: 38%; padding-right: 16px; color: var(--tn-ink); font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.ra-map__table td span { display: inline-block; margin: 0 6px 6px 0; padding: 5px 11px; border-radius: 999px; background: var(--tn-aqua-soft); color: #0f5f80; font-size: 0.88rem; font-weight: 650; line-height: 1.3; }
.ra-map__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px !important; padding: 12px 14px; border-radius: var(--tn-radius-sm); background: #fff8e6; color: #6b4e00 !important; font-size: 0.92rem; }
.ra-map__note .tn-ico { margin-top: 2px; color: #b98500; }

@media (max-width: 559px) {
    .ra-map__table tbody th { width: 42%; font-size: 0.95rem; }
}

.ra-final { background: var(--tn-bg); }

/* ==========================================================================
   Serbia: amounts are dinars ("11 990 RSD"), several characters longer than
   the euro amounts this layout was drawn for. Only widths and type sizes of
   the places that carry an amount are adjusted; the design stays the same.
   ========================================================================== */
@media (min-width: 720px) {
    .ra-cat__head { grid-template-columns: auto minmax(0, 1fr) 104px 128px; }
    .ra-row { grid-template-columns: 30px 96px minmax(0, 1fr) 104px 128px; }
    .ra-row__price b, .ra-row__first b { font-size: 1.25rem; }
}

.ra-row__price b, .ra-row__first b, .ra-pack__panel strong, .ra-cart__sum dd, .ra-cart__items b { white-space: nowrap; }

/* package cards: the two price tiles share the card width, the figure follows the tile */
.ra-pack__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); container-type: inline-size; }
.ra-pack__panel p { min-width: 0; padding: 14px 12px; }
.ra-pack__panel strong { font-size: 1.3rem; letter-spacing: -0.04em; }

@supports (font-size: 1cqi) {
    .ra-pack__panel strong { font-size: clamp(1.1rem, calc(9.4cqi - 6px), 1.9rem); }
}

/* long zone names ("Interglutealna zona", «Межъягодичная зона») next to the wider amount columns:
   the duration drops under the name instead of pushing the row out */
@media (min-width: 720px) {
    .ra-row__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
}

/* small phones: keep room for the zone name beside "1. poseta 3 990 RSD" */
@media (max-width: 379px) {
    .ra-row { column-gap: 10px; padding: 16px 14px; }
    .ra-row__main strong { font-size: 1rem; overflow-wrap: anywhere; }
    .ra-row__price b { font-size: 1.2rem; }
    .ra-row__first { gap: 4px; }
    .ra-row__first small { font-size: 0.68rem; }
    .ra-row__first b { font-size: 0.95rem; }
}

/* zone names never push a row wider: a long single word may break */
.ra-row__main strong { overflow-wrap: anywhere; }

/* the two-column range right above the breakpoint: the list column is narrow, give the name more room */
@media (min-width: 1000px) and (max-width: 1239px) {
    .ra-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
    .ra-cat__head { grid-template-columns: auto minmax(0, 1fr) 96px 118px; }
    .ra-row { grid-template-columns: 30px 72px minmax(0, 1fr) 96px 118px; column-gap: 12px; }
    .ra-row__img { width: 72px; }
    .ra-row__main strong { font-size: 1.05rem; }
    .ra-row__price b, .ra-row__first b { font-size: 1.15rem; }
    .ra-cat__col { font-size: 0.74rem; }
}

/* smallest phones: "1. poseta" goes above its amount, so the zone name keeps its room */
@media (max-width: 379px) {
    .ra-row__first { flex-direction: column; align-items: flex-end; gap: 0; }
}

/* the list column never grows past the screen because of one long line inside it */
.ra-layout, .ra-layout__main { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1000px) {
    .ra-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (min-width: 1240px) {
    .ra-layout { grid-template-columns: minmax(0, 1fr) 372px; }
}
.ra-intro { grid-template-columns: minmax(0, 1fr); }

/* the link to the zone map may wrap on phones (it is a full sentence in RU and EN) */
@media (max-width: 559px) {
    .ra-intro__how a { white-space: normal; }
}