:root {
    --lp2-menu-height: 80px;
    --lp2-safe-x: 5%;
    --lp2-safe-y: 5%;
    --lp2-shell-max: 1140px;

    --lp2-pad-x: clamp(8px, 1.2vw, 16px);
    --lp2-pad-y: clamp(8px, 1vw, 14px);

    --lp2-gap-top: clamp(4px, 0.7vw, 8px);
    --lp2-gap-center: clamp(4px, 0.7vw, 8px);
    --lp2-gap-bottom: clamp(4px, 0.7vw, 8px);

    --lp2-card-radius: 22px;
    --lp2-card-min-h: clamp(118px, 16vh, 146px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.scene-inner {
    width: 100%;
    min-height: calc(100dvh - var(--lp2-menu-height)); /* اصلاح شد */
    /* overflow: hidden; حذف شد */
    display: flex;
    flex-direction: column;
    position: relative;
}

.lp2-shell {
    width: 100%;
    flex-grow: 1; /* اصلاح شد: جایگزین height: 100% برای پر کردن فضا */
    max-width: none;
    margin-inline: auto;
    padding: var(--lp2-safe-y) var(--lp2-safe-x);
    /* overflow: hidden; حذف شد */
}

.lp2-stage {
    width: 100%;
    /* height: 100%; حذف شد تا اسکرول و محتوا محدود نشود */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(15px, 3vw, 85px); /* جایگزین مقادیر ثابت پیکسل برای فاصله بین المان‌ها */
}


.top-zone {
    flex: 0 0 auto;
    margin: 0; /* مارجین‌های قبلی حذف شد */
}

.center-zone {
    /* min-height و margin حذف شد تا به اندازه طبیعی خود فضا بگیرد */
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-zone {
    flex: 0 0 auto;
    margin: 0; /* مارجین قبلی حذف شد */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 0;
}


/* ★ دایره شماره گام — هماهنگ با page_00 و page_01 (کلاس یکسان .page-number،
     رنگ و شکل قهوه‌ای یکدست) — وظیفه ششم. */
.page-number {
    width: clamp(40px, 4.5vw, 52px);
    height: clamp(40px, 4.5vw, 52px);
    margin: 0 auto 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    font-weight: 700;
    color: #8a6339;
    border: 2px solid rgba(215, 178, 117, 0.7);
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    line-height: 1;
}


.main-title {
    font-size: clamp(1.4rem, 3vw, 2.2rem); /* سایز اتوماتیک و بزرگتر */
    color: #5c3a21; /* رنگ قهوه‌ای بسیار تیره نزدیک به مشکی */
    font-weight: 800; /* ضخامت بیشتر متن */
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

.subtitle {
    max-width: min(92vw, 580px);
    margin: 5px auto 0;
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.42;
    font-weight: 600;
    color: #3d2b1f;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 248, 240, 0.42);
    text-align: center;
}


.lp2-form {
    width: 100%;
    height: 100%;
    display: flex; /* اضافه شد: برای مرکزیت عمودی کارت‌ها در فرم */
    flex-direction: column;
    justify-content: center;
}

.lp2-cards-row {
    width: 100%;
    max-width: var(--lp2-shell-max);
    margin-inline: auto;
    align-items: stretch;
}

.lp2-radio-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.selection-card {
    width: 100%;
    height: 100%;
    min-height: var(--lp2-card-min-h);
    position: relative;
    background: rgba(255, 255, 255, 0.54);
    border-radius: var(--lp2-card-radius);
    padding: clamp(10px, 0.95vw, 14px) clamp(10px, 0.9vw, 12px) clamp(8px, 0.75vw, 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    cursor: pointer;
}

.selection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

.lp2-radio-hidden:checked + .selection-card {
    border-color: rgba(223, 189, 131, 0.70);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25),
        0 10px 22px rgba(223, 189, 131, 0.16);
}

.lp2-radio-hidden:checked + .selection-card .radio-indicator {
    background: radial-gradient(
        circle,
        rgba(216, 182, 120, 1) 0%,
        rgba(216, 182, 120, 1) 45%,
        rgba(255, 255, 255, 0.95) 46%
    );
}

.card-header-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card-icon {
    width: clamp(46px, 3.5vw, 56px);
    height: clamp(46px, 3.5vw, 56px);
    margin: 0 auto 7px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 2vw, 30px);
    color: #8a6339;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.78),
        rgba(255, 244, 225, 0.58)
    );
    border: 2px solid rgba(223, 189, 131, 0.30);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
}

.selection-card h2 {
     font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    line-height: 1.32;
    font-weight: 700;
    color: #4f3b2c;
    margin-bottom: 3px;
}

.selection-card p {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.34;
    color: #5f5245;
    margin-bottom: 3px;
}

.card-spacer {
    height: 3px;
}

.radio-indicator {
    width: 18px;
    height: 18px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(216, 182, 120, 0.9);
    background: rgba(255, 255, 255, 0.55);
}

.continue-btn {
    border: 1.5px solid #8e6524;
    width: fit-content;
    min-width: clamp(190px, 20vw, 230px);
    max-width: calc(100% - 20px);
    margin: 0 auto;
    display: block;
    padding: 10px 24px;
    border-radius: 999px;
     font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 800;
    color: #1a1a1a;
    background: linear-gradient(
        180deg,
        #c48c31,
        #a67628
    );
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
    cursor: pointer;
}

.continue-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    background: linear-gradient(
        180deg,
        #b07d2a,
        #8e6524
    );
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.continue-btn:disabled {
    opacity: 0.65;
    background-color: #9e9e9e; /* رنگ خاکستری برای حالت غیرفعال */
    color: #e0e0e0; /* رنگ متن کم‌رنگ‌تر */
    border: 1.5px solid #858585;
    cursor: not-allowed;
}



@media (max-width: 1199.98px) {
    :root {
        --lp2-card-min-h: 136px;
    }

    .lp2-stage {
        gap: clamp(10px, 4vh, 25px); /* اصلاح شد: فاصله منعطف عمودی برای موبایل */
    }


    .selection-card {
        min-height: 136px;
    }
}

@media (max-width: 768.98px) {
    :root {
        --lp2-menu-height: 72px;
        --lp2-card-min-h: 128px;
        --lp2-card-radius: 20px;
    }

    .lp2-shell {
        padding: 7vh 5% 5%; /* اصلاح شد: فاصله از بالا برای شروع بعد از خط عکس پس‌زمینه */
    }

    .main-title {
        font-size: clamp(1.25rem, 5vw, 1.6rem);
        line-height: 1.2;
    }

    .subtitle {
        max-width: 94vw;
        font-size: clamp(0.95rem, 2.5vw, 1.1rem);
        line-height: 1.3;
    }

    .selection-card {
        padding: 10px 9px 9px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
        font-size: clamp(22px, 4vw, 26px);
        margin-bottom: 6px;
    }

    .selection-card h2 {
        font-size: clamp(1.05rem, 3.5vw, 1.2rem);
        margin-bottom: 2px;
    }

    .selection-card p {
        font-size: clamp(0.90rem, 3.2vw, 1.1rem);
        line-height: 1.28;
    }

    .continue-btn {
    width: calc(100% - 15px); /* با کسر فاصله جزئی، از لبه‌ها فاصله می‌گیرد و بریده نمی‌شود */
    margin: 0 auto;           /* دکمه را در وسط نگه می‌دارد */
    min-width: 0;
    display: flex;            /* برای اطمینان از مرکزیت متن داخل دکمه */
    justify-content: center;
    align-items: center;
    color: #1a1a1a !important;
    }
    .bottom-zone {
        margin-top: -10px; /* دکمه را به سمت بالا می‌کشد */
        padding-bottom: 20px; /* کمی فاصله از پایین صفحه برای زیبایی */
    }
}

@media (max-width: 576.98px) {
    .lp2-stage {
        gap: clamp(10px, 4vh, 25px); /* اصلاح شد: فاصله منعطف عمودی برای موبایل */
    }


    .selection-card {
        min-height: 122px;
    }
}

/* ★ فقط صفحه انتخاب مسیر ورود (page_01_login_path):
   کفِ سنگفرشِ پایینِ عکس را بیشتر در دید قرار می‌دهیم. object-position کانونِ
   تصویر را به سمتِ ۷۰٪ ارتفاع (بخشِ پایین) می‌برد تا سنگفرش بهتر دیده شود،
   بدون اینکه چیزی به CSS عمومی app.css اضافه کنیم. */
.scene-wrapper .scene-photo img.scene-photo-desktop,
.scene-wrapper .scene-photo img.scene-photo-mobile {
    object-position: center 70%;
}