/* ==========================================================================
   Citiwell · promotions page (promotions.html, promotions-ru.html, promotions-en.html)
   ========================================================================== */

/* ---------- hero ---------- */
.pa-hero__grid {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.pa-hero__copy { display: grid; gap: 22px; min-width: 0; }

@media (min-width: 1000px) {
    .pa-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.pa-board {
    border-radius: var(--tn-radius);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow: hidden;
}

.pa-board__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
}

.pa-board__top strong { color: #fff; font-size: 1.05rem; font-weight: 800; }

.pa-board__table { width: 100%; border-collapse: collapse; table-layout: fixed; }

.pa-board__table th, .pa-board__table td { padding: 14px 10px; text-align: left; vertical-align: middle; }
.pa-board__table th:nth-child(1) { width: 27%; }
.pa-board__table th:nth-child(2) { width: 31%; }
.pa-board__table th:first-child, .pa-board__table td:first-child { padding-left: 18px; }
.pa-board__table th:last-child, .pa-board__table td:last-child { padding-right: 18px; }

.pa-board__table thead th {
    padding-block: 8px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pa-board__table thead th:last-child { color: var(--tn-sun); }
.pa-board__table tbody tr + tr th, .pa-board__table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.1); }

.pa-board__table tbody th { color: #fff; font-size: 1.05rem; font-weight: 750; white-space: nowrap; }
.pa-board__table tbody td { color: rgba(255, 255, 255, 0.88); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; }

.pa-board__first { color: var(--tn-sun) !important; white-space: nowrap; }

.pa-board__first small {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--tn-coral);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    vertical-align: middle;
}

@media (max-width: 359px) {
    .pa-board__first small { display: block; width: max-content; margin: 4px 0 0; }
}

.pa-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 559px) {
    .pa-hero__actions .tn-btn { width: 100%; }
    .pa-board__top .tn-gender { width: 100%; }
}

.pa-hero__micro { max-width: 600px; color: rgba(255, 255, 255, 0.64); font-size: 0.9rem; line-height: 1.55; }

.pa-hero__media { position: relative; justify-self: center; width: min(100%, 520px); }

.pa-hero__media img {
    width: 100%;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
    object-position: 60% 22%;
    border-radius: clamp(24px, 3vw, 36px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38);
}

@media (max-width: 999px) {
    .pa-hero__media { width: 100%; max-width: 620px; }
    .pa-hero__media img { aspect-ratio: 4 / 3.2; object-position: 60% 18%; }
}

.pa-hero__sticker {
    position: absolute;
    top: -18px;
    right: -6px;
    display: grid;
    place-items: center;
    align-content: center;
    width: clamp(104px, 12vw, 132px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tn-coral), var(--tn-coral-dark));
    box-shadow: 0 14px 30px rgba(240, 79, 90, 0.45);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    transform: rotate(9deg);
}

.pa-hero__sticker strong { display: block; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }

.pa-hero__card {
    position: absolute;
    left: clamp(-28px, -2vw, -12px);
    bottom: 26px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    max-width: min(300px, 82%);
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
    color: var(--tn-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.pa-hero__card-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tn-blue); color: #fff; }
.pa-hero__card strong { color: var(--tn-ink); font-size: 1rem; font-weight: 800; }

@media (max-width: 999px) {
    .pa-hero__card { left: 12px; bottom: 12px; }
    .pa-hero__sticker { top: -14px; right: 8px; }
}

@media (max-width: 559px) {
    /* on phones the note sits under the photo so it never covers the face */
    .pa-hero__card { position: relative; left: auto; bottom: auto; max-width: none; margin: -30px 12px 0; }
}

/* ---------- rules as coupons ---------- */
.pa-coupons { display: grid; gap: 18px; }

@media (min-width: 1000px) {
    .pa-coupons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}

.pa-coupon {
    position: relative;
    display: grid;
    grid-template-columns: minmax(104px, 0.34fr) minmax(0, 1fr);
    border-radius: var(--tn-radius);
    background: #fff;
    box-shadow: var(--tn-shadow-soft);
}

@media (min-width: 1000px) {
    .pa-coupon { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
}

.pa-coupon__stub {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 22px 12px;
    border-radius: var(--tn-radius) 0 0 var(--tn-radius);
    background: linear-gradient(160deg, var(--tn-navy) 0%, var(--tn-navy-3) 100%);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.pa-coupon__stub strong { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.pa-coupon:nth-child(2) .pa-coupon__stub { background: linear-gradient(160deg, var(--tn-coral) 0%, var(--tn-coral-dark) 100%); color: rgba(255, 255, 255, 0.9); }
.pa-coupon:nth-child(3) .pa-coupon__stub { background: linear-gradient(160deg, var(--tn-blue) 0%, #1575a0 100%); color: rgba(255, 255, 255, 0.9); }

/* perforation between the stub and the body */
.pa-coupon__stub::before, .pa-coupon__stub::after {
    content: "";
    position: absolute;
    right: -11px;
    z-index: 1;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tn-bg);
}

.pa-coupon__stub::before { top: -11px; }
.pa-coupon__stub::after { bottom: -11px; }

.pa-coupon__body {
    position: relative;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 22px 20px 22px 26px;
    border-left: 2px dashed var(--tn-line);
}

@media (min-width: 1000px) {
    .pa-coupon__stub { min-height: 150px; border-radius: var(--tn-radius) var(--tn-radius) 0 0; }
    .pa-coupon__stub::before, .pa-coupon__stub::after { top: auto; right: auto; bottom: -11px; }
    .pa-coupon__stub::before { left: -11px; }
    .pa-coupon__stub::after { right: -11px; }
    .pa-coupon__body { padding: 28px 26px 28px; border-left: 0; border-top: 2px dashed var(--tn-line); }
}

.pa-coupon__no { color: var(--tn-blue); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; }
.pa-coupon__body h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.2; }

.pa-coupon__list { display: grid; gap: 10px; }
.pa-coupon__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--tn-text); font-size: 0.98rem; line-height: 1.4; }
.pa-coupon__list .tn-ico { margin-top: 1px; color: var(--tn-blue); }

.pa-coupon__referral { display: flex; align-items: center; gap: 10px; }
.pa-coupon__person { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tn-aqua-soft); color: var(--tn-blue); }
.pa-coupon__person--you { background: #ffe9e9; color: var(--tn-coral-dark); }
.pa-coupon__arrow { color: var(--tn-muted); }
.pa-coupon__text { color: var(--tn-text); font-size: 0.98rem; line-height: 1.5; }
.pa-coupon__text strong { display: block; color: var(--tn-ink); }

/* ---------- packages ---------- */
.pa-packs__grid { display: grid; gap: 20px; align-items: stretch; }

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

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

.pa-pack--popular {
    background: linear-gradient(165deg, var(--tn-navy) 0%, var(--tn-navy-2) 100%);
    box-shadow: 0 26px 60px rgba(11, 33, 53, 0.3);
    color: rgba(255, 255, 255, 0.84);
}

@media (min-width: 900px) {
    .pa-pack--popular { margin-block: -14px; padding-block: 40px 36px; }
}

.pa-pack__flag {
    position: absolute;
    top: -14px;
    left: 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;
}

.pa-pack__flag .tn-ico { width: 1em; height: 1em; }

.pa-pack__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pa-pack__head h3 { font-size: 1.5rem; font-weight: 800; }
.pa-pack__head h3 .tn-num { font-size: 2.6rem; letter-spacing: -0.05em; margin-right: 2px; }
.pa-pack--popular .pa-pack__head h3 { color: #fff; }

.pa-pack__fit { padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--tn-blue-dark); font-size: 0.82rem; font-weight: 750; box-shadow: inset 0 0 0 1px var(--tn-line); }
.pa-pack--popular .pa-pack__fit { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; }

.pa-stair { display: grid; gap: 12px; }

.pa-stair__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 6px;
}

.pa-stair__label { color: var(--tn-muted); font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.pa-stair__value { color: var(--tn-ink); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.pa-stair__bar { grid-column: 1 / -1; display: block; width: 100%; height: 8px; border-radius: 999px; background: #cfdbe4; }

.pa-stair__step--list .pa-stair__value { color: var(--tn-muted); font-weight: 700; }
.pa-stair__step--pack .pa-stair__bar { width: var(--w-f); background: var(--tn-blue); }
.pa-stair__step--first .pa-stair__bar { width: var(--w-f); background: linear-gradient(90deg, var(--tn-coral), var(--tn-coral-dark)); }
body[data-gender="m"] .pa-stair__step--pack .pa-stair__bar,
body[data-gender="m"] .pa-stair__step--first .pa-stair__bar { width: var(--w-m); }
.pa-stair__step--first .pa-stair__label { color: var(--tn-coral-dark); font-weight: 750; }
.pa-stair__step--first .pa-stair__value { color: var(--tn-coral-dark); font-size: 2.1rem; }

.pa-pack--popular .pa-stair__label { color: rgba(255, 255, 255, 0.66); }
.pa-pack--popular .pa-stair__value { color: #fff; }
.pa-pack--popular .pa-stair__step--list .pa-stair__value { color: rgba(255, 255, 255, 0.6); }
.pa-pack--popular .pa-stair__step--list .pa-stair__bar { background: rgba(255, 255, 255, 0.2); }
.pa-pack--popular .pa-stair__step--pack .pa-stair__bar { background: var(--tn-aqua); }
.pa-pack--popular .pa-stair__step--first .pa-stair__label,
.pa-pack--popular .pa-stair__step--first .pa-stair__value { color: var(--tn-sun); }
.pa-pack--popular .pa-stair__step--first .pa-stair__bar { background: var(--tn-sun); }

.pa-pack__saving {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--tn-radius-sm);
    background: #e3f6ef;
    color: #0b6b53;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.3;
}

.pa-pack__saving strong { font-weight: 800; }
.pa-pack--popular .pa-pack__saving { background: rgba(95, 208, 227, 0.16); color: #d9f6fb; }

.pa-pack__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-content: start; font-size: 0.93rem; line-height: 1.45; }
.pa-pack__facts div { display: contents; }
.pa-pack__facts dt { color: var(--tn-muted); }
.pa-pack__facts dd { color: var(--tn-ink); font-weight: 650; }
.pa-pack--popular .pa-pack__facts dt { color: rgba(255, 255, 255, 0.6); }
.pa-pack--popular .pa-pack__facts dd { color: #fff; }

.pa-packs__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px !important; color: var(--tn-muted); font-size: 0.95rem; text-align: center; }
.pa-packs__note .tn-ico { color: var(--tn-ok); }

/* ---------- friend ---------- */
.pa-friend {
    padding-block: clamp(56px, 7.5vw, 108px);
    background:
        radial-gradient(700px 420px at 100% 100%, rgba(95, 208, 227, 0.2), transparent 62%),
        linear-gradient(200deg, var(--tn-navy) 0%, var(--tn-navy-2) 100%);
    color: rgba(255, 255, 255, 0.8);
}

.pa-friend__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }

@media (min-width: 960px) {
    .pa-friend__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.pa-friend__copy { display: grid; gap: 18px; justify-items: start; }
.tn-main .pa-friend__copy h2 { color: #fff; font-size: clamp(1.8rem, 1.15rem + 2.6vw, 3rem); }
.pa-friend__copy p { font-size: 1.08rem; line-height: 1.6; }
.pa-friend__copy p strong { color: #fff; }

.pa-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    color: var(--tn-aqua);
    font-size: 0.88rem;
    font-weight: 750;
}

.pa-checks { display: grid; gap: 10px; }
.pa-checks li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255, 255, 255, 0.86); line-height: 1.45; }
.pa-checks .tn-ico { margin-top: 2px; color: var(--tn-aqua); }

.pa-friend__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.tn-main .pa-btn-wa { background: #25d366; color: #06381b; box-shadow: 0 12px 26px rgba(37, 211, 102, 0.28); }
.pa-btn-wa:hover { transform: translateY(-2px); }
.pa-btn-wa i { font-size: 1.3em; }

@media (max-width: 559px) {
    .pa-friend__actions .tn-btn { width: 100%; }
}

.pa-friend__visual { position: relative; }
.pa-friend__visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: clamp(24px, 3vw, 36px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }

.pa-friend__loop {
    position: absolute;
    left: 50%;
    bottom: clamp(-34px, -3vw, -22px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.4vw, 16px);
    transform: translateX(-50%);
}

.pa-friend__badge {
    display: grid;
    place-items: center;
    align-content: center;
    width: clamp(88px, 11vw, 124px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
    color: var(--tn-muted);
    font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.88rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.pa-friend__badge strong { display: block; color: var(--tn-blue-dark); font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.pa-friend__badge--you { background: linear-gradient(135deg, var(--tn-coral), var(--tn-coral-dark)); color: rgba(255, 255, 255, 0.92); }
.pa-friend__badge--you strong { color: #fff; }
.pa-friend__arrows { width: clamp(64px, 9vw, 110px); color: #fff; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }

/* ---------- full zones ---------- */
.pa-zones__grid { display: grid; gap: 12px; }

@media (min-width: 640px) { .pa-zones__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .pa-zones__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.pa-zone {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 12px 16px 12px 12px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--tn-shadow-soft);
}

.pa-zone img { width: 112px; aspect-ratio: 400 / 223; object-fit: contain; border-radius: 12px; background: #fff; }
.pa-zone h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.pa-zone p { margin-top: 4px; color: var(--tn-muted); font-size: 0.9rem; line-height: 1.35; }

@media (min-width: 1000px) {
    .pa-zone { grid-template-columns: 148px minmax(0, 1fr); padding: 16px 20px 16px 16px; }
    .pa-zone img { width: 148px; }
    .pa-zone h3 { font-size: 1.15rem; }
}

.pa-zones__more { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 559px) {
    .pa-zones__more .tn-btn { width: 100%; }
}

/* ==========================================================================
   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.
   ========================================================================== */

/* hero price board: the figures follow the width of the board */
.pa-board { container-type: inline-size; }
.pa-board__table th:nth-child(1) { width: 26%; }
.pa-board__table th:nth-child(2) { width: 34%; }
.pa-board__table tbody td { font-size: 1.15rem; white-space: nowrap; }

@supports (font-size: 1cqi) {
    .pa-board__table tbody td { font-size: clamp(0.95rem, 5.3cqi, 1.75rem); }
}

@container (max-width: 540px) {
    .pa-board__table th, .pa-board__table td { padding: 12px 8px; }
    .pa-board__table th:first-child, .pa-board__table td:first-child { padding-left: 14px; }
    .pa-board__table th:last-child, .pa-board__table td:last-child { padding-right: 14px; }
    .pa-board__table tbody th { font-size: 0.95rem; }
    .pa-board__first small { display: block; width: max-content; margin: 4px 0 0; }
}

/* coupons: "od 5 990 RSD" takes two lines on the narrow stub, one line on the wide one */
.pa-coupon { grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr); }

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

.pa-coupon__stub { container-type: inline-size; }
.pa-coupon__stub strong { font-size: 1.25rem; line-height: 1.08; white-space: normal; text-wrap: balance; }

@supports (font-size: 1cqi) {
    .pa-coupon__stub strong { font-size: clamp(1.05rem, calc(21cqi - 5px), 2.5rem); }
}

/* package cards: the price "staircase" */
.pa-stair__step--first .pa-stair__value { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }

/* smallest phones (320 px): nothing may push the page wider than the screen */
.pa-packs__grid, .pa-coupons { grid-template-columns: minmax(0, 1fr); }
.pa-pack { min-width: 0; }

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

@media (min-width: 1000px) {
    .pa-coupons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
    .pa-coupon { grid-template-columns: minmax(104px, 0.34fr) minmax(0, 1fr); }
    .pa-coupon__body { padding: 20px 14px 20px 18px; overflow-wrap: anywhere; }
    .pa-stair__value { font-size: 1.2rem; }
}