/* ─────────────────────────────────────────
   ZabanBom Pre-Footer "Join" page
   Image-asset based · RTL · snap page
   Mobile: 375 canvas · 430×932 ref proportions · Desktop: 2-col
   v2
───────────────────────────────────────── */

.zb-join {
    --jn-primary: #cc3a21;
    --jn-primary-bright: #e0452a;
    --jn-ink: #2a1a12;
    --jn-muted: #9a8576;
    --jn-gold: #c2913a;
    --jn-gold-bright: #e7b24e;
    --jn-stat-w-scale: 1;
    --jn-stats-guarantee-gap: 12px;
    --jn-item-pad-x: 10px;
    --jn-guarantee-clip: inset(25.6% 2.3% 27.6% 2.2%);
    --jn-guarantee-fallback-scale: 2.137;
    --jn-magic-bg-clip: inset(20.1% 5.5% 24.5% 5.7%);
    --jn-magic-bg-fallback-scale: 1.805;

    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 50% 0%, #fdeede 0%, #fbf1e4 42%, #f6ead8 100%);
    color: var(--jn-ink);
    direction: rtl;
}

.fullpage-scroll #join.landing-section.zb-join {
    min-height: 0;
}

#join.landing-section > .zb-join__viewport {
    min-height: 0;
    max-height: 100%;
}

/* ── Scale viewport + canvas ── */
.zb-join__viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-top: var(--nav-h, 6.5rem);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767.98px) {
    .zb-join__viewport {
        /* fallback before JS measures bottom pill nav */
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 899.98px) {
    .zb-join__viewport {
        align-items: flex-start;
    }

    .zb-join__canvas {
        padding: 0 var(--jn-canvas-pad-x, 0);
    }

    .zb-join__stat-cell {
        height: var(--jn-stat-h, auto);
        overflow: visible;
        display: flex;
        align-items: stretch;
        justify-content: center;
        min-width: 0;
    }

    .zb-join__stat {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: unset;
        object-fit: fill;
        object-position: center;
        object-view-box: var(--row3-stat-view-box, none);
        flex-shrink: 0;
    }

    .zb-join__guarantee {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: var(--jn-guarantee-h, auto);
        aspect-ratio: 955 / 117;
        flex-shrink: 0;
        align-self: center;
        object-fit: contain;
        object-position: center;
        object-view-box: inset(64px 23px 69px 22px);
    }

    .zb-join__magic {
        width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
        min-width: 0;
        max-width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
        height: var(--jn-magic-h, auto);
        aspect-ratio: unset;
        align-self: center;
        flex-shrink: 0;
        margin-inline: auto;
    }

    .zb-join__counter {
        width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
        min-width: 0;
        max-width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
        align-self: center;
        flex-shrink: 0;
        margin-inline: auto;
    }
}

.zb-join__stage {
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
    direction: ltr;
}

.zb-join__canvas {
    width: 375px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 4px;
    transform-origin: top left;
    will-change: transform;
    direction: rtl;
}

/* ── Stack (mobile = single column) ── */
.zb-join__stack {
    display: flex;
    flex-direction: column;
    gap: var(--jn-stack-gap, 12px);
}

.zb-join__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.zb-join__col--a { gap: var(--jn-col-a-gap, 12px); }
.zb-join__col--b { gap: var(--jn-col-b-gap, 20px); }

/* ── Headline ── */
.zb-join__headline {
    margin: 2px 0 0;
    text-align: center;
    font-weight: 800;
    font-size: var(--jn-headline-fs, 27px);
    line-height: var(--jn-headline-lh, 1.5);
    color: var(--jn-ink);
    letter-spacing: -0.2px;
}

.zb-join__headline b {
    color: var(--jn-primary);
    font-weight: 800;
}

/* ── Divider image ── */
.zb-join__divider {
    display: block;
    width: var(--jn-divider-w, 180px);
    height: auto;
    aspect-ratio: 936 / 266;
    margin: -2px auto;
    pointer-events: none;
    user-select: none;
}

/* ── Stats + guarantee block ── */
.zb-join__stats-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--jn-stats-guarantee-gap, 12px);
    overflow: visible;
    padding-inline: var(--jn-item-pad-x, 10px);
    box-sizing: border-box;
}

/* ── Stat card images (row 3) ── */
.zb-join__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--jn-stats-gap, 28px);
    align-items: stretch;
    overflow: visible;
    direction: ltr;
}

.zb-join__stat-cell {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
    overflow: visible;
    height: var(--jn-stat-h, auto);
    aspect-ratio: 317 / 380;
}

.zb-join__stat {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: unset;
    object-fit: fill;
    object-position: center;
    object-view-box: var(--row3-stat-view-box, none);
    user-select: none;
    flex-shrink: 0;
}

/* Row 3 stat cards — crop PNG padding; scoped to .zb-join (why-zabanbom uses premium.css) */
.zb-join .zb-row3-stat--1 {
    --row3-stat-view-box: inset(66px 96px 67px 97px);
    --row3-stat-ar-w: 307;
    --row3-stat-ar-h: 367;
    --row3-stat-clip: inset(13.2% 19.2% 13.4% 19.4%);
    --row3-stat-fallback-scale: 1.362;
}

.zb-join .zb-row3-stat--2 {
    --row3-stat-view-box: inset(59px 92px 61px 91px);
    --row3-stat-ar-w: 317;
    --row3-stat-ar-h: 380;
    --row3-stat-clip: inset(11.8% 18.4% 12.2% 18.2%);
    --row3-stat-fallback-scale: 1.316;
}

.zb-join .zb-row3-stat--3 {
    --row3-stat-view-box: inset(59px 92px 62px 91px);
    --row3-stat-ar-w: 317;
    --row3-stat-ar-h: 379;
    --row3-stat-clip: inset(11.8% 18.4% 12.4% 18.2%);
    --row3-stat-fallback-scale: 1.319;
}

.zb-join .zb-row3-stat--4 {
    --row3-stat-view-box: inset(57px 92px 69px 91px);
    --row3-stat-ar-w: 317;
    --row3-stat-ar-h: 374;
    --row3-stat-clip: inset(11.4% 18.4% 13.8% 18.2%);
    --row3-stat-fallback-scale: 1.337;
}

/* Firefox / no-object-view-box: keep source aspect ratio, clip, then scale to fill slot */
@supports not (object-view-box: inset(0 0 0 0)) {
    .zb-join__stat-cell {
        overflow: hidden;
    }

    .zb-join__stat.zb-row3-stat {
        width: auto;
        height: 100%;
        max-width: none;
        aspect-ratio: 1 / 1;
        object-fit: fill;
        object-view-box: none;
        clip-path: var(--row3-stat-clip);
        transform: scale(var(--row3-stat-fallback-scale, 1.316));
        transform-origin: center center;
    }
}

.zb-join--no-ovb .zb-join__stat-cell {
    overflow: hidden;
}

.zb-join--no-ovb .zb-join__stat.zb-row3-stat {
    width: auto;
    height: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: fill;
    object-view-box: none;
    clip-path: var(--row3-stat-clip);
    transform: scale(var(--row3-stat-fallback-scale, 1.316));
    transform-origin: center center;
}

/* ── Guarantee bar image ── */
.zb-join__stats-block .zb-join__guarantee {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--jn-guarantee-h, auto);
    aspect-ratio: 955 / 117;
    flex-shrink: 0;
    align-self: center;
    object-fit: contain;
    object-position: center;
    object-view-box: inset(64px 23px 69px 22px);
    user-select: none;
}

@supports not (object-view-box: inset(0 0 0 0)) {
    .zb-join__stats-block {
        overflow: hidden;
    }

    .zb-join__stats-block .zb-join__guarantee {
        width: auto;
        height: var(--jn-guarantee-h, auto);
        max-width: none;
        margin-inline: auto;
        aspect-ratio: 1000 / 250;
        object-fit: fill;
        object-position: center;
        object-view-box: none;
        clip-path: var(--jn-guarantee-clip);
        transform: scale(var(--jn-guarantee-fallback-scale, 2.137));
        transform-origin: center center;
    }
}

.zb-join--no-ovb .zb-join__stats-block {
    overflow: hidden;
}

.zb-join--no-ovb .zb-join__stats-block .zb-join__guarantee {
    width: auto;
    height: var(--jn-guarantee-h, auto);
    max-width: none;
    margin-inline: auto;
    aspect-ratio: 1000 / 250;
    object-fit: fill;
    object-position: center;
    object-view-box: none;
    clip-path: var(--jn-guarantee-clip);
    transform: scale(var(--jn-guarantee-fallback-scale, 2.137));
    transform-origin: center center;
}

/* ── Magic number banner ── */
.zb-join__magic {
    position: relative;
    width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
    min-width: 0;
    max-width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
    height: var(--jn-magic-h, auto);
    aspect-ratio: 512 / 240;
    max-height: var(--jn-magic-max-h, none);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    align-self: center;
    flex-shrink: 0;
    margin-inline: auto;
    container-type: size;
    direction: rtl;
}

.zb-join__magic-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    object-view-box: inset(87px 32px 106px 33px);
    pointer-events: none;
    user-select: none;
}

@supports not (object-view-box: inset(0 0 0 0)) {
    .zb-join__magic-bg {
        inset: auto;
        left: 50%;
        top: 50%;
        width: auto;
        height: 100%;
        aspect-ratio: 577 / 433;
        object-fit: fill;
        object-position: center;
        object-view-box: none;
        clip-path: var(--jn-magic-bg-clip);
        transform: translate(-50%, -50%) scale(var(--jn-magic-bg-fallback-scale, 1.805));
        transform-origin: center center;
    }
}

.zb-join--no-ovb .zb-join__magic-bg {
    inset: auto;
    left: 50%;
    top: 50%;
    width: auto;
    height: 100%;
    aspect-ratio: 577 / 433;
    object-fit: fill;
    object-position: center;
    object-view-box: none;
    clip-path: var(--jn-magic-bg-clip);
    transform: translate(-50%, -50%) scale(var(--jn-magic-bg-fallback-scale, 1.805));
    transform-origin: center center;
}

/* right (cream panel): textual info — first child sits right in RTL */
.zb-join__magic-text {
    position: relative;
    z-index: 1;
    flex: 0 0 56.5%;
    min-width: 0;
    max-width: 56.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(4px, 4vw, 12px);
    gap: min(4cqw, 5.5cqh);
    padding: 0 8% 0 6%;
    box-sizing: border-box;
    direction: rtl;
    text-align: right;
    overflow: hidden;
}

.zb-join__magic-title {
    display: flex;
    align-items: center;
    gap: clamp(2px, 1.4vw, 6px);
    gap: min(1.4cqw, 2cqh);
    max-width: 100%;
    min-width: 0;
    color: #000;
    font-weight: 800;
    font-size: clamp(10px, 5.8vw, 22px);
    font-size: min(5.8cqw, 8.2cqh);
    line-height: 1.05;
    white-space: nowrap;
}

.zb-join__magic-title span:not(.zb-join__spark) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zb-join__spark {
    flex-shrink: 0;
    color: var(--jn-gold);
    font-size: clamp(9px, 4.2vw, 16px);
    font-size: min(4.2cqw, 6cqh);
}

.zb-join__prize {
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 1.8vw, 8px);
    gap: min(1.8cqw, 2.5cqh);
    align-self: flex-start;
    max-width: 100%;
    min-width: 0;
    padding: clamp(4px, 2.8vw, 12px) clamp(6px, 3.6vw, 16px);
    padding: min(2.8cqw, 3.6cqh) min(3.6cqw, 4.6cqh);
    border-radius: clamp(6px, 3vw, 12px);
    border-radius: min(3cqw, 3.8cqh);
    border: 1px solid rgba(194, 145, 58, 0.5);
    background: rgba(255, 255, 255, 0.68);
    color: #000;
    font-size: clamp(10px, 4.9vw, 18px);
    font-size: min(4.9cqw, 7cqh);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.zb-join__prize .bi {
    flex-shrink: 0;
    color: var(--jn-gold);
    font-size: clamp(11px, 5.4vw, 20px);
    font-size: min(5.4cqw, 7.5cqh);
}

.zb-join__sold {
    position: absolute;
    z-index: 1;
    right: 0;
    left: auto;
    width: 56.5%;
    bottom: 5%;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
    pointer-events: none;
}

.zb-join__sold-line {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: clamp(2px, 1.4vw, 6px);
    gap: min(1.4cqw, 2cqh);
    padding: 0 8% 0 6%;
    box-sizing: border-box;
    direction: rtl;
    white-space: nowrap;
    min-width: 0;
}

.zb-join__sold-label {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    box-sizing: border-box;
    color: #4a3527;
    font-size: clamp(9px, 3.8vw, 14px);
    font-size: min(3.8cqw, 5.5cqh);
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.zb-join__sold-num {
    margin: 0;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--jn-primary);
    font-weight: 800;
    font-size: clamp(11px, 5vw, 20px);
    font-size: min(5cqw, 7cqh);
    line-height: 1;
    direction: ltr;
    white-space: nowrap;
}

/* left (dark podium): the big golden number */
.zb-join__magic-podium {
    position: relative;
    z-index: 1;
    flex: 1 1 43.5%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2cqw;
    padding: 0 0 6% 8cqw;
    direction: ltr;
    pointer-events: none;
}

.zb-join__magic-cap {
    color: #f6dfac;
    font-size: clamp(8px, 2.5vw, 12px);
    font-size: 2.5cqw;
    font-weight: 600;
    white-space: nowrap;
    direction: rtl;
    padding-left: 3.5cqw;
    transform: translateX(-3.3cqw);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.zb-join__magic-num {
    font-size: clamp(22px, 10.2vw, 42px);
    font-size: 10.2cqw;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    transform: translateX(-6px);
    background: linear-gradient(180deg, #fff4cf 0%, #f3cf82 38%, #e0a23c 70%, #b1762a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 8px rgba(255, 184, 92, 0.5));
}

/* ── Online buyers counter ── */
.zb-join__counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(6px, 2vw, 12px);
    width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
    min-width: 0;
    max-width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
    align-self: center;
    flex-shrink: 0;
    margin-inline: auto;
    background: linear-gradient(150deg, #1a1a1a, #0a0a0a);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 10px 12px;
    box-sizing: border-box;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
    overflow: hidden;
}

.zb-join__counter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0%;
    min-width: 0;
    max-width: 100%;
    color: #f2ece4;
    font-size: clamp(10px, calc(var(--jn-cta-h, 56px) * 0.22), 13px);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zb-join__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
    animation: zb-join-pulse 1.8s ease-out infinite;
}

@keyframes zb-join-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.zb-join__odometer {
    display: flex;
    gap: clamp(2px, 0.8vw, 4px);
    direction: ltr;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-items: center;
}

.zb-join__digit {
    width: clamp(16px, calc(var(--jn-cta-h, 56px) * 0.42), 26px);
    height: clamp(22px, calc(var(--jn-cta-h, 56px) * 0.58), 36px);
    border-radius: clamp(4px, calc(var(--jn-cta-h, 56px) * 0.11), 7px);
    background: linear-gradient(180deg, #232323, #111);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f6e7c6;
    font-weight: 800;
    font-size: clamp(11px, calc(var(--jn-cta-h, 56px) * 0.34), 20px);
    line-height: 1;
    flex-shrink: 0;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08), inset 0 -3px 6px rgba(0, 0, 0, 0.5);
}

/* ── CTA ── */
.zb-join__cta {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: calc(var(--jn-cta-h, 56px) * 0.12);
    width: min(100%, 320px);
    max-width: 92%;
    min-width: 0;
    margin-inline: auto;
    align-self: center;
    margin-top: var(--jn-cta-offset, 10px);
    padding-inline: calc(var(--jn-cta-h, 56px) * 0.18);
    box-sizing: border-box;
    height: var(--jn-cta-h, 56px);
    border-radius: 999px;
    background: linear-gradient(135deg, #e0492c 0%, #cc3a21 55%, #b32f18 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: clamp(13px, calc(var(--jn-cta-h, 56px) * 0.304), 19px);
    line-height: 1.15;
    letter-spacing: -0.15px;
    box-shadow: 0 12px 28px rgba(201, 58, 33, 0.38);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.zb-join__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(201, 58, 33, 0.46);
}

.zb-join__cta-icon {
    position: static;
    flex-shrink: 0;
    width: calc(var(--jn-cta-h, 56px) * 0.714);
    height: calc(var(--jn-cta-h, 56px) * 0.714);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--jn-cta-h, 56px) * 0.321);
    line-height: 1;
}

.zb-join__cta-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

/* ── Mobile landscape (short): two-column to save vertical space ── */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) and (max-width: 767.98px) {
    .zb-join__stack {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--jn-stack-gap, 8px);
    }

    .zb-join__headline {
        font-size: var(--jn-headline-fs, 18px);
        line-height: var(--jn-headline-lh, 1.28);
    }

    .zb-join__divider {
        width: var(--jn-divider-w, 110px);
    }

    .zb-join__magic {
        width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
        min-width: 0;
        max-width: calc(100% - 2 * var(--jn-item-pad-x, 10px));
        height: var(--jn-magic-h, auto);
        aspect-ratio: unset;
        margin-inline: auto;
    }

    .zb-join__cta {
        width: min(100%, 320px);
        max-width: 92%;
        min-width: 0;
        align-self: center;
        padding-inline: calc(var(--jn-cta-h, 48px) * 0.12);
        gap: calc(var(--jn-cta-h, 48px) * 0.08);
    }

    .zb-join__cta-label {
        font-size: clamp(9px, calc(var(--jn-cta-h, 48px) * 0.28), 14px);
    }
}

/* ── Desktop / tablet: two-column (768+) ── */
@media (min-width: 768px) {
    .zb-join__canvas {
        width: min(960px, 97vw);
        padding: 0;
    }

    .zb-join__stack {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
        align-items: center;
        gap: 40px;
    }

    .zb-join__col {
        justify-content: center;
    }

    .zb-join__col--a { gap: 20px; }
    .zb-join__col--b { gap: 22px; }

    .zb-join__headline {
        font-size: 34px;
        line-height: 1.55;
    }

    .zb-join__divider {
        width: 240px;
    }

    .zb-join__stats {
        gap: 32px;
    }

    .zb-join__counter {
        padding: 13px 16px;
        border-radius: 16px;
        gap: 12px;
    }

    .zb-join__counter-label {
        flex: 1 1 0%;
        font-size: 15px;
    }

    .zb-join__digit {
        width: clamp(22px, calc(var(--jn-cta-h, 62px) * 0.45), 30px);
        height: clamp(30px, calc(var(--jn-cta-h, 62px) * 0.62), 42px);
        font-size: clamp(16px, calc(var(--jn-cta-h, 62px) * 0.36), 23px);
        border-radius: 8px;
    }

    .zb-join__cta {
        height: var(--jn-cta-h, 62px);
        width: min(100%, 360px);
        max-width: 92%;
        --jn-cta-h: 62px;
    }
}