/* ===== Segment ===== */
.auth-segment{
  position: relative;
  height: calc(100vh - var(--navbar-height, 125px));
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 32px);
  background: var(--color-bg, #0c0a22);
  border-radius: 24px;
  overflow: hidden;
  margin: auto 40px;

  /* local tokens */
  --g1: #00FFD1;
  --g2: #19C3B1;
  --field: #0D0A23;
}

.auth-segment a:not(.expert-btn,.order-btn){
    color: white;
}
.auth-segment .step-terms.is-active a:not(.expert-btn,.order-btn){
    color: black;
}
.auth-segment a:not(.expert-btn,.order-btn).otp-edit{
    color: white;
    font-weight: 600;
    font-size: 16px;
}
.auth-segment__bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.auth-segment__center{
  position: relative; z-index: 2;
  width: 100%;
  display: grid; place-items: center;
}

/* ===== Card ===== */
.auth-card{
  width: min(92vw, 520px);
  max-width: 421px;
  color: var(--color-white, #fff);
  text-align: center;
  background: linear-gradient(0deg, #1C1930, rgb(53 50 73 / 80%));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  box-shadow: 0 51px 87px #000000b3;
  padding: clamp(20px, 4vw, 28px);
}
.auth-card__icon{ width:84px; height:84px; margin:0 auto 12px; display:grid; place-items:center; border-radius:16px; }
.auth-card__title{ margin:4px 0 8px; font-size:clamp(18px, 2.4vw, 20px); font-weight:600; text-align: center; }
.rates-header .auth-card__title{
    text-align: right;
}
.auth-card__text{ margin:0 0 18px; font-size:16px; color:#737A88; opacity:.95; font-weight: 600 }

/* ===== Steps ===== */
.step{ display:none; }
.step.is-active{ display:block; }

/* ===== Step 1: phone ===== */
.auth-input{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.12);
  background: var(--field);
  border-radius:999px;
  padding:6px 8px 6px 12px;
}
.auth-input__field{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:var(--color-white, #fff); font-size:14px; font-weight: 600; padding:10px 12px; text-align:right;
}
.auth-input__field::placeholder{ color:#737A88; font-size: 14px; font-weight: 600; }
.auth-input__back{
  width:45px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:9999px; border:1px solid #39384B; background:#D4D4D4; color:#111; cursor:pointer;
  transition:border-color .2s ease, transform .12s ease;
}
.auth-input__back:hover{ border-color:var(--g1); }
.auth-input__back:active{ transform:scale(.98); }

.auth-submit{
  width:100%; margin-top:12px;
  border:0; cursor:pointer;
  padding:12px 16px;
  border-radius: 60px;
  font-weight:700;
  font-size:15px;
  background: white;
  color:#0E1230;
}

.auth-card__terms{ margin:10px 8px 0; font-size:12px; text-align:right; color:#737A88; }
.auth-card__terms a{ text-decoration:none; color:var(--color-blue-mid, #00FFD1); }

/* ===== Step 2: OTP ===== */
.otp-head{ display:grid; justify-items:center; gap:8px; margin-bottom:12px; }
.otp-head__stars{ letter-spacing:10px; font-size:28px; font-weight:900; color:var(--g2); }
.otp-head__line{ width:64px; height:4px; border-radius:4px; background: linear-gradient(90deg,var(--g1),var(--g2)); }

.otp-hint{ margin:0 0 16px; font-size:16px; color:#737A88;font-weight: 600; }

.otp{
  display:flex; gap:14px; flex-direction:row-reverse; justify-content:center;
}
.otp__input{
  width:56px; height:56px; border-radius:50%;
  text-align:center; font-size:28px; font-weight:800; color:#fff;
  background: var(--field);
  border:1px solid rgba(255,255,255,.28);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .05s ease;
}
.otp__input:focus{
  border-color: rgba(255,255,255,.6);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10),
    0 0 18px rgba(255,255,255,.35),
    0 0 1px 1px rgba(0,0,0,.35) inset;
}
.otp__input::-webkit-outer-spin-button,
.otp__input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.otp__input[type=number]{ -moz-appearance: textfield; }

.otp-actions{ margin-top:16px; display:flex; gap:10px; justify-content:space-between; align-items:center; }
.otp-actions button{
    outline: none;
    border: none;
    color: #2d7fda;
    text-decoration: underline;
    background: none;
}

.otp-actions button:disabled{
    color: #737A88;
    text-decoration: unset;
    background: unset;
}
.otp-submit{
  border:0; border-radius:14px; padding:10px 16px; cursor:pointer;
  background: linear-gradient(90deg,var(--g1),var(--g2));
  color:#0E1230; font-weight:800;
}
.otp-back{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:12px; padding:10px 14px; cursor:pointer;
}

/* Shake on error */
@keyframes shake-x {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake { animation: shake-x .4s linear both; }

/* =========================
   Mobile look & feel (<=768)
   ========================= */
@media (max-width: 768px){
  .auth-segment__bg{ display:none; }

  .auth-segment{
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    height: calc(100vh - var(--navbar-height, 84px));
    background: linear-gradient(0deg, #13254C, transparent);
  }

  .auth-card{
    background: none;
    border: none;
    box-shadow: none;
    padding: 22px;
  }
  .auth-card__title{ font-size:20px; }
  .auth-card__icon{ width:72px; height:72px; }

  .auth-input{ padding: 8px 8px 8px 12px; }
  .auth-input__field{ font-size:14px; font-weight: 600; }
  .auth-input__back{
    width:44px; height:44px;
    background:#D4D4D4; color:#111;
    border:1px solid #39384B;
  }

  .auth-card__terms{ font-size:12px; opacity:.9; }

  .otp-head{
    position: relative;
    display: grid; justify-items: center;
    gap: 8px; margin-bottom: 12px;
  }

  .otp{ gap:12px; }
  .otp__input{
    width:56px; height:56px;
    font-size:24px;
  }
}


/* ===== OTP New Layout ===== */
.otp-center{
    margin-top: 14px;
    display: grid;
    justify-content: center;
}

/* دکمه/متن ارسال مجدد */
.otp-resend{
    border: 0;
    outline: none;
    background: transparent;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: default;
    padding: 0;
    color: #737A88; /* حالت شمارش‌گر (disabled) مثل تصویر 2 */
}

/* وقتی قابل‌ارسال شد → تبدیل به قرصی آبی مطابق تصویر 3 */
.otp-resend:not(:disabled){
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 12px;
    background: #2D84DA33;
    color: #2D84DA;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(45, 127, 218, .12);
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.otp-resend:not(:disabled):hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(45, 127, 218, .18);
}
.otp-resend:not(:disabled):active{
    transform: translateY(0);
}

/* پانوشت پایین کارت: ویرایش/شماره */
.otp-footer{
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #9aa3b2;
    flex-direction: row-reverse;
}
.otp-edit{
    color: #ffffff;
    text-decoration: none;
    padding-bottom: 1px;
}
.otp-edit:hover{
    color: #e7f0ff;
    border-bottom-color: rgba(255,255,255,.6);
}
.otp-phone{
    color: #737A88;
    font-weight: 600;
    font-size: 16px;
}

/* موبایل */
@media (max-width: 768px){
    .otp-center{ margin-top: 16px; }
    .otp-footer{ font-size: 12px; }
    .otp-resend:not(:disabled){ padding: 10px 12px; border-radius: 10px; }
}

.form-field { text-align: right; margin-bottom: 12px; }
.form-field__label {
    display: block;
    margin: 0 6px 6px;
    font-size: 13px;
    color: #9aa3b2;
}


/* === Complete Profile gradient inside the card === */
.auth-card{
    position: relative;
    overflow: hidden; /* تا گرادیان داخل گردی کارت بماند */
}

/* محتوای کارت بالاتر از گرادیان باشد */
.auth-card > * { position: relative; z-index: 1; }

/* لایه‌ی گرادیانی؛ پیش‌فرض مخفی */
.auth-card::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    opacity: 0;
    transition: opacity .25s ease;

    /* گرادیان ترکیبی (مشابه تصویر): تاریک در بالا، درخشش آبی/فیروزه‌ای پایین مرکز */
    background:
        radial-gradient(120% 70% at 50% 110%,
        rgba(0, 255, 209, .85) 0%,
        rgba(0, 154, 255, .70) 35%,
        rgba(12, 67, 160, .30) 60%,
        rgba(0, 0, 0, 0) 72%
        ),
        linear-gradient(180deg,
        rgba(30, 27, 54, .95) 0%,
        rgba(24, 26, 58, .92) 36%,
        rgba(22, 57, 121, .65) 72%,
        rgba(12, 179, 145, .30) 100%
        );
}

/* وقتی استپ complete فعال است، گرادیان را روی کارت نمایش بده */
.auth-card:has(#step-complete.is-active)::before{
    opacity: 1;
}

/* کمی جمع‌وجورتر در موبایل */
@media (max-width: 768px){
    .auth-card::before{
        background:
            radial-gradient(130% 80% at 50% 115%,
            rgba(0, 255, 209, .85) 0%,
            rgba(0, 154, 255, .70) 38%,
            rgba(12, 67, 160, .28) 62%,
            rgba(0, 0, 0, 0) 74%
            ),
            linear-gradient(180deg,
            rgba(30, 27, 54, .95) 0%,
            rgba(24, 26, 58, .92) 36%,
            rgba(22, 57, 121, .62) 72%,
            rgba(12, 179, 145, .28) 100%
            );
    }
}

/* شبکه‌ی چینش گام سوم */
.complete-form{ margin-top: 6px; }
.complete-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.span-2{ grid-column: 1 / -1; }

/* قرص‌های بزرگ‌تر مطابق طرح */
.auth-input--lg{
    padding: 10px 12px 10px 14px; /* کمی قد بلندتر از حالت عادی */
    border-radius: 9999px;
}
.auth-input--lg .auth-input__field{
    font-size: 15px;
    padding: 12px 14px;
}
#phoneInput{
    border-radius: 5px 40px 40px 5px;
    padding-left: 25px;
    padding-right: 25px!important;
    margin-left: 110px;
}

/* دکمه‌ی ادامه: قرصی، سفید مایل به آبی، وسط کارت */
.complete-actions{
    display: grid;
    justify-content: end;
    margin-top: 18px;
}

#businessForm .complete-actions{
    justify-content: center;
}

.complete-submit{
    display: inline-flex;
    align-items: center;
    gap: 5px;            /* در RTL آیکن سمت راست می‌افتد (ظاهر مطابق اسکرین‌شات) */
    padding: 10px 20px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    color: #0E1230;
    background: linear-gradient(180deg, #FFFFFF 0%, #EAF3FF 100%);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .15),
        0 6px 18px rgba(45, 127, 218, .15);
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.complete-submit:hover{
    transform: translateY(-1px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .18),
        0 8px 22px rgba(45, 127, 218, .20);
}
.complete-submit:active{ transform: translateY(0); }
.complete-submit__icon{ width: 18px; height: 18px; }

/* لیبل‌های بصری‌-مخفی برای دسترس‌پذیری */
.sr-only{
    position:absolute !important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ریسپانسیو: در موبایل همه‌ی فیلدها ستاک شوند */
@media (max-width: 768px){
    .complete-grid{ grid-template-columns: 1fr; }
    .span-2{ grid-column: auto; }
    .complete-submit{ padding: 10px 16px; }
}


/* پایه رو کمی بازتر می‌کنیم (برای همه‌ی گام‌ها) */
.auth-card{
    max-width: 520px; /* override بر مقدار 421px قبلی */
}

/* فقط وقتی گام complete-profile فعاله، کارت پهن‌تر باشه */
.auth-card:has(#step-complete.is-active){
    width: min(94vw, 740px);
    max-width: 740px;
    padding: clamp(24px, 4vw, 32px); /* کمی فضای داخلی بیشتر مثل طرح */
    overflow: unset;
}

/* موبایل همون رفتار قبلی را حفظ کن */
@media (max-width: 768px){
    .auth-card{ max-width: none; width: 100%; }
}

.step-complete .auth-card__icon img{
    width: 100%;
}

/* ===== Mobile refined look for COMPLETE step ===== */
@media (max-width: 768px){

    /* کارت: فضای داخلی بیشتر وقتی گام complete فعاله */
    .auth-card:has(#step-complete.is-active){
        padding: 28px 18px 26px;
        width: 100%;
        max-width: unset;
        height: 100%;
        border-radius: 0;
    }

    .auth-segment__center:has(#step-complete.is-active){
        margin-bottom: 100px;
        overflow: auto;
        scroll-behavior: auto;
    }

    /* آیکن بزرگ‌تر مثل طرح */
    .step-complete .auth-card__icon{
        width: 126px;
        height: 126px;
        margin-bottom: 10px;
    }
    .step-complete .auth-card__icon img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* تیتر و توضیح درشت‌تر */
    .step-complete .auth-card__title{
        font-size: 22px;
        line-height: 1.4;
        margin-top: 4px;
        margin-bottom: 6px;
    }
    .step-complete .auth-card__text{
        font-size: 14px;
        opacity: .95;
        margin-bottom: 18px;
    }

    /* شبکه‌ی فیلدها در موبایل ستونی می‌شود (قبلاً هم ستونی بود) + فاصله‌ها کمی بیشتر */
    .complete-grid{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* فیلدها کمی قدبلندتر و فونت بزرگ‌تر */
    .auth-input--lg{
        padding: 2px 6px;
        border-radius: 999px;
    }
    .auth-input--lg .auth-input__field{
        font-size: 12px;
        font-weight: 500;
        padding: 14px 14px;
    }
    .auth-input__field::placeholder{
        font-size: 15px;
    }

    .step-complete .form-field{
        margin-bottom: 0;
    }

    /* دکمه‌ی ادامه: پهن، وسط، با شعاع زیاد (مطابق طرح) */
    .complete-actions{
        margin-top: 20px;
        display: block;
        justify-content: center;   /* از راست‌چین به وسط */
        position: fixed;
        bottom: 30px;
        width: 100%;
        left: 0;
    }
    .complete-actions .complete-submit{
        width: 100%;
        max-width: 340px;          /* مثل تصویر، یک قرص پهن */
        justify-content: center;   /* متن و آیکن وسط */
        padding: 12px 20px;
        border-radius: 999px;
        font-size: 15px;
        box-shadow:
            0 10px 28px rgba(0, 0, 0, .12),
            0 10px 30px rgba(45, 127, 218, .18);
    }

    /* گرادیان کارت در موبایل کمی قوی‌تر برای حس عمق */
    .auth-card::before{
        background:
            radial-gradient(140% 90% at 50% 115%,
            rgba(0, 255, 209, .90) 0%,
            rgba(0, 154, 255, .72) 38%,
            rgba(12, 67, 160, .30) 62%,
            rgba(0, 0, 0, 0) 75%
            ),
            linear-gradient(180deg,
            rgba(30, 27, 54, .96) 0%,
            rgba(24, 26, 58, .93) 36%,
            rgba(22, 57, 121, .62) 72%,
            rgba(12, 179, 145, .30) 100%
            );
    }
}

/* گرادیان کارت برای pick هم فعال شود */
.auth-card:has(#step-complete.is-active)::before,
.auth-card:has(#step-pick.is-active)::before{ opacity:1; }

.step.is-active#step-tags{
    padding: 47px;
}

/* کارت عریض در گام pick */
.auth-card:has(#step-pick.is-active){
    width: min(94vw, 740px);
    max-width: 740px;
    padding: clamp(24px, 4vw, 32px);
}
@media (max-width:768px){
    .auth-card:has(#step-pick.is-active){
        padding: 28px 18px 26px;
        width:100%; max-width:none; border-radius:0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth-segment__center:has(#step-pick.is-active){
        height: 100%;
    }
}

.role-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 12px 0 10px;
}
.role-card{
    position:relative;
    display:block;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    isolation:isolate;
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.role-card::before{
    content:"";
    position:absolute; inset:auto 0 0 0; height:58%;
    background: radial-gradient(120% 90% at 50% 110%, rgba(0,154,255,.35), rgba(0,0,0,0) 60%);
    z-index:0; pointer-events:none;
}
.role-card:hover{
    transform: translateY(-2px);
    border-color: rgba(45,127,218,.35);
    box-shadow: 0 18px 46px rgba(0,0,0,.22);
    background: rgba(255,255,255,.05);
}
.role-card__inner{
    position:relative; z-index:1;
    display:grid; place-items:center;
    padding: 22px 12px 24px;
    min-height: 190px;
}
.role-card__emoji{
    width: 120px; height: 120px; object-fit: contain; margin-bottom: 8px;
}
.role-card__label{
    font-size: 18px; font-weight: 800; letter-spacing:.2px;
    color: white;
}


/* زیرنویس */
.role-note{
    margin-top:8px; font-size:12px; color:wite; opacity:.95;
}

/* موبایل: یک‌ستونه */
@media (max-width:768px){
    .role-grid{ gap:12px; }
    .role-card__inner{ min-height: 160px; padding:18px 10px 20px; }
    .role-card__emoji{ width:112px; height:112px; }
}


/* ====== TAGS STEP: card width + custom gradient ====== */

/* گرادیان مخصوص استپ تگ‌ها (desktop) */
.auth-card:has(#step-tags.is-active)::before{
    opacity: 1; /* نمایش لایه گرادیان */
    /* گرادیان مورّب: بالای تیره، پایین سبز روشن (مطابق رفرنس) */
    background: linear-gradient(352deg, rgba(255, 255, 255, 1) 14%, rgba(36, 211, 167, 1) 35%, rgba(36, 211, 167, 0) 100%);
    height: 150%;
    top: -20%;
}

/* کارت عریض‌تر و بلندتر برای استیج تگ‌ها */
.auth-card:has(#step-tags.is-active){
    width: min(96vw, 880px);
    max-width: calc(100vw - 124px);
    padding: 0;            /* محتوا padding خودش را می‌گیرد */
    overflow: hidden;
}

/* بوم داخلی برای محتوا؛ ارتفاع معقول دسکتاپ */
.step-tags .tags-stage{
    padding: 28px;         /* فضای داخلی */
    display: block;
}

#step-tags.is-active .auth-card__icon{
    width: 104px;
    height: 104px;
}

#step-tags.is-active .auth-card__icon img{
    width: 100%;
}

/* ========== موبایل: کارت تمام‌قد با گرادیان مورّب ========== */
@media (max-width: 768px){


    .auth-card:has(#step-tags.is-active){
        width: 100%;
        max-width: none;
        height: 100%;
        border-radius: 0;     /* مثل تصویر دوم، تمام‌قد */
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .auth-segment__center:has(#step-tags.is-active){
        height: 100%;
    }
    .step-tags .tags-stage{
        min-height: calc(100vh - var(--navbar-height, 84px));
        padding: 16px;
    }
}

/* (اختیاری) در صورتی که همزمان استایل‌های step-complete/pick هم گرادیانِ ::before می‌سازند،
   این خط‌ها را کنار هم نگه دار تا همه‌شان کار کنند: */
.auth-card:has(#step-complete.is-active)::before,
.auth-card:has(#step-pick.is-active)::before,
.auth-card:has(#step-tags.is-active)::before{
    opacity: 1;
}


/* ===== Tags UI (chips) ===== */
.tags-form{ display:grid; justify-items:center; gap:14px; }
.chips{
    display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center;
    max-width: 640px;
}
.chip{
    display: inline-flex;
    gap: 4px;
    padding: 8px 8px 8px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .20);
    color: #e9edf7;
    font-weight: 700;
    font-size: 14px;
    backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
}
.chip--tag{ cursor: default; }
.chip__text{ pointer-events:none; }
.chip__remove{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #cfd7e6;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chip__remove img{
    width: 12px;
}

.chip--add{
    width:42px; height:42px; padding:0; cursor:pointer;
    background:#fff; color:#0E1230; border-color:transparent;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.chip-add__plus{ font-size:22px; font-weight:900; line-height:1; }

.chip-input{
    width: min(320px, 86vw);
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.06);
    color: #fff; outline: none;
    text-align: right; font-size: 14px; font-weight:700;
}
.chip-input::placeholder{  color: rgb(255 255 255 / 60%); }

.tags-hint{
    margin-top: 0;
    font-size:10px;
    color:white;
    opacity:.95;
    font-weight: 600;
}

.tags-actions{ margin-top: 4px; display:grid; justify-content:center; }

/* موبایل: اندازه‌ها کمی درشت‌تر و وسط‌چین مطابق طرح */
@media (max-width:768px){
    .chips{ gap:10px; max-width: 100%; padding: 0 6px; }
    .chip{ font-size:15px; padding: 12px 16px; }
    .chip--add{ width:48px; height:48px; }
    .chip-input{ font-size:16px; padding: 14px 16px; }
    .auth-card:has(#step-tags.is-active)::before{
        height: 100%;
        top: 0;
    }
}




/* ====== BUSINESS STEP (desktop) ====== */
.auth-card:has(#step-business.is-active)::before{
    opacity: 1;
    /* گرادیان عمودی: بالای سرمه‌ای → میانه آبی → پایین آبی روشن */
    background: linear-gradient(
        180deg,
        #0A0D22 0%,
        #0F2550 35%,
        #1F66C9 72%,
        #A8C6EE 100%
    );
}

.auth-card:has(#step-business.is-active){
    width: min(94vw, 800px);
    max-width: calc(100vw - 124px);
    padding: 0;              /* بوم داخلی خودش padding دارد */
    overflow: unset;
}

.step-business .biz-stage{
    min-height: 420px;
    padding: 28px;
    display: block;
}

/* آیکن بزرگ‌تر هماهنگ با طرح */
#step-business.is-active .auth-card__icon{
    width: 104px; height: 104px; margin-bottom: 10px;
}
#step-business.is-active .auth-card__icon img{ width: 100%; height: 100%; object-fit: contain; }

/* ====== BUSINESS STEP (mobile) ====== */
@media (max-width:768px){
    .auth-card:has(#step-business.is-active){
        width: 100%;
        max-width: none;
        height: 100%;
        border-radius: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .auth-segment__center:has(#step-business.is-active){ height: 100%; }

    .step-business .biz-stage{
        min-height: calc(100vh - var(--navbar-height, 84px));
        padding: 16px;
    }

    /* گرادیان تمام‌قد موبایل */
    .auth-card:has(#step-business.is-active)::before{
        height: 100%;
        top: 0;
        background: linear-gradient(
            180deg,
            #0A0D22 0%,
            #0F2550 38%,
            #1F66C9 78%,
            #A8C6EE 100%
        );
    }
}

/* اطمینان از فعال بودن لایه گرادیان در استپ‌های خاص */
.auth-card:has(#step-complete.is-active)::before,
.auth-card:has(#step-pick.is-active)::before,
.auth-card:has(#step-tags.is-active)::before,
.auth-card:has(#step-business.is-active)::before{
    opacity: 1;
}


/* ===== Business step (blue gradient) ===== */
.auth-card:has(#step-business.is-active)::before{
    opacity: 1;
    /* گرادیان شبیه رفرنس: بالای تیره، پایین آبی روشن */
    background: linear-gradient(180deg,
    #0E1029 0%,
    #122247 28%,
    #1E4E98 70%,
    #A7C4EC 100%);
}

/* عرض/پدینگ کارت برای دسکتاپ */
.auth-card:has(#step-business.is-active){
    width: min(94vw, 740px);
    max-width: 740px;
    padding: clamp(24px, 4vw, 32px);
}

/* آیکن و تیتر کمی درشت‌تر */
#step-business.is-active .auth-card__icon{
    width: 96px; height: 96px; margin-bottom: 6px;
}
#step-business.is-active .auth-card__icon img{ width: 100%; height: 100%; object-fit: contain; }
#step-business.is-active .auth-card__title{ font-size: 20px; }

/* فرم ستونِی (مانند complete) */
.biz-form{ display: grid; gap: 12px; }
.biz-form .form-field{ margin-bottom: 0; }

/* استایل Select با همان کپسول */
.auth-input--select{ position: relative; }
.auth-input--select select.auth-input__field{
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer;
    padding-left: 34px;   /* جا برای caret سمت چپ در RTL */
}
.auth-input--select .select-caret{
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    pointer-events: none; font-weight: 900; opacity: .85;
}

/* موبایل: تمام‌قد مثل رفرنس */
@media (max-width: 768px){
    .auth-card:has(#step-business.is-active){
        width: 100%; max-width: none; height: 100%;
        border-radius: 0; background: none; border: none; box-shadow: none;
        padding: 19px;
        display: grid;
        align-items: center;
    }
    .auth-segment__center:has(#step-business.is-active){ height: 100%; }
    #step-business.is-active .auth-card__icon{ width: 126px; height: 126px; }
    #step-business.is-active .auth-card__title{ font-size: 22px; margin-bottom: 4px; }
    .auth-card:has(#step-business.is-active)::before{
        background: linear-gradient(180deg,
        #0E1029 0%,
        #132a51 30%,
        #1F66D1 76%,
        #A9C7EF 100%);
    }
}


/* گرید مخصوص استپ بیزنس: دو ستون در دسکتاپ، یک ستون در موبایل */
.biz-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 768px){
    .biz-grid{ grid-template-columns: 1fr; }
}

/* وقتی داخل گریدیم margin پایین فیلدها نمی‌خوایم دوتا بشه */
.biz-form .form-field{ margin-bottom: 0; }

/* (از قبل) span-2 تمام عرض می‌کند */
.span-2{ grid-column: 1 / -1; }



/* === Desktop custom dropdown for "industry" === */
@media (min-width: 769px){
    .auth-input--select{ position: relative; }

    /* خود select مخفی می‌شود، ولی مقدارش را با JS به‌روز می‌کنیم */
    .auth-input--select select.auth-input__field{
        position:absolute; inset:0;
        opacity:0; pointer-events:none;
    }

    /* متنِ انتخاب‌شده/placeholder که به‌جای select دیده می‌شود */
    .auth-input--select .select-value{
        position:absolute; inset:0;
        padding: 12px 16px;
        display:flex; align-items:center; justify-content:flex-start;
        font-size:14px; font-weight:700; text-align:right;
        color:#9aa3b2;   /* شِبه-placeholder */
        pointer-events:none;
    }
    .auth-input--select.has-value .select-value{ color:#ffffff; }

    /* پنل گزینه‌ها */
    .auth-input--select .select-panel{
        position:absolute; right:0; left:0; top:calc(100% + 8px);
        display:none;
        background: rgba(255,255,255,.83);
        border-radius: 20px;
        box-shadow: 0 18px 46px rgba(0,0,0,.22);
        backdrop-filter: blur(6px);
        padding: 8px 0;
        z-index: 50;
        overflow-y: auto;        /* فقط محور عمودی اسکرول شود */
        overflow-x: hidden;
        -ms-overflow-style: none;    /* IE/Edge legacy */
        scrollbar-width: none;       /* Firefox */
        overscroll-behavior: contain;/* از بابل به صفحه جلوگیری کن */
        max-height: 22vh;
    }
    .auth-input--select .select-panel::-webkit-scrollbar{
        width: 0; height: 0;         /* Chrome/Safari */
    }
    .auth-input--select .select-panel{ padding-right: 8px; }
    .auth-input--select.is-open .select-panel{ display:block; }

    .auth-input--select .select-option{
        padding: 10px 14px;
        font-size: 12px;
        font-weight: 500;
        color: #000;
        cursor: pointer;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .auth-input--select .select-option:hover,
    .auth-input--select .select-option[aria-selected="true"]{
        background: rgba(0,0,0,.06);
    }

    /* فلش باز/بسته (همون span موجود) */
    .auth-input--select .select-caret{
        position:absolute; left:14px; top:50%; transform:translateY(-50%);
        pointer-events:none; transition: transform .15s ease;
    }
    .auth-input--select.is-open .select-caret{ transform:translateY(-50%) rotate(180deg); }
}

.auth-input:has(select){
    background: transparent;
    height: 50px;
}

/* ===== Mobile Business Drawer (industry) ===== */
@media (max-width: 768px){
    /* قفل اسکرول صفحه پشت دراور */
    .body--lock { overflow: hidden; }

    .biz-drawer{
        position: fixed; inset: 0; z-index: 60;
        display: none;               /* با کلاس is-open نمایش می‌دیم */
        pointer-events: none;        /* فقط پنل کلیک‌پذیر باشد */
    }
    .biz-drawer.is-open{ display:block; }

    .biz-drawer__panel{
        position: absolute; left: 0; right: 0; bottom: 0;
        border-radius: 24px 24px 0 0;
        border: 1px solid rgba(255,255,255,.16);     /* 1px سفید با 16% */
        background: rgba(24, 27, 56, .92);           /* پشت‌زمینه تیره شفاف */
        box-shadow: 0 -8px 30px rgba(0,0,0,.25);
        transform: translateY(100%);
        transition: transform .22s ease;
        pointer-events: auto;        /* کلیک داخل پنل فعال باشد */
        max-height: calc(100vh - var(--navbar-height, 84px));
        display: flex; flex-direction: column;
    }
    .biz-drawer.is-open .biz-drawer__panel{ transform: translateY(0); }

    .biz-drawer__header{
        position: sticky; top: 0;
        display: flex; align-items: center; gap: 10px;
        justify-content: space-between;
        padding: 14px 16px;
        background: transparent;
    }
    .biz-drawer__title{
        font-size: 18px; font-weight: 500; color: #fff;
    }
    .biz-drawer__close{
        width: 12.69px; height: 12.69px;
        display: grid; place-items: center;
        border: 0; background: transparent; color: #fff;
        opacity: .9; cursor: pointer;
    }
    .biz-drawer__divider{
        height: 1px; width: 100%;
        background: rgba(255,255,255,.10);  /* 1px سفید با 10% */
    }
    .biz-drawer__list{
        padding: 4px 8px 16px;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .biz-drawer__item{
        padding: 14px 18px;
        font-size: 18px; font-weight: 500; line-height: 1.4;
        color: rgba(255,255,255,.92);
        border-radius: 12px;
    }
    .biz-drawer__item:active,
    .biz-drawer__item:hover{ background: rgba(255,255,255,.06); }
}

/* ظاهر خودِ فیلد انتخاب حوزه (طبق مشخصات قبلی) */
.auth-input--select{
    background: transparent;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 48px;
    padding: 8px 18px 8px 10px;    /* top,right,bottom,left */
    height: 50px;
}
.auth-input--select select.auth-input__field{
    color: #fff; font-weight: 700; font-size: 14px;
}
.auth-input--select select.auth-input__field:invalid,
.auth-input--select select.auth-input__field option[disabled]{
    color: rgba(255,255,255,.8);   /* placeholder سفید با 80% */
}

/* ----- MOBILE: industry field uses drawer only ----- */
@media (max-width:768px){
    /* خود فیلد انتخاب */
    .auth-input--select{ position: relative; }
    /* select واقعی مخفی/غیرفعال شود تا منوی native باز نشود */
    .auth-input--select select.auth-input__field{
        position:absolute; inset:0; width:100%; height:100%;
        opacity:0; pointer-events:none; /* مهم */
    }
    /* متن نمایشی روی فیلد (placeholder/selected) */
    .auth-input--select .select-value{
        position:absolute; inset:0; padding:12px 16px;
        display:flex; align-items:center; justify-content:flex-start;
        font-size:14px; font-weight:700; text-align:right;
        color: rgba(255,255,255,.8);           /* placeholder: سفید 80% */
        pointer-events:none;
    }
    .auth-input--select.has-value .select-value{ color:#fff; }
}

/* ===== Mobile drawer: make inner list scrollable ===== */
@media (max-width:768px){
    /* خود دراور و پنل */
    .biz-drawer{ position: fixed; inset: 0; z-index: 1000; }
    .biz-drawer.is-open{ pointer-events: auto; }
    .biz-drawer__panel{
        position: absolute;
        left: 0;
        right: 0;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, .16);
        background: rgba(19, 24, 46, .93);
        backdrop-filter: blur(8px);
        max-height: calc(96vh - 56px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* تیتر و دیوایدر مثل قبل… */

    /* ظرف لیست: اسکرول مستقل + روانِ iOS */
    .biz-drawer__list{
        flex: 1 1 auto;         /* کل فضای باقیمانده را بگیر */
        overflow-y: auto;       /* فقط عمودی اسکرول شود */
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;  /* حتما برای iOS */
        overscroll-behavior: contain;       /* جلوگیری از اسکرول صفحه‌ی پشت */
    }
}


@media (max-width:768px){
    .biz-drawer__list{
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y; /* کمک به درگ عمودی */
    }
    body.body--lock{ overflow:hidden; } /* فقط overflow را قفل کنید؛ touch-action:none نگذارید */
}

/* =========================
   TERMS STEP (Desktop only)
   ========================= */
@media (min-width: 769px){
    /* کارتِ عریض */
    .auth-card:has(#step-terms.is-active){
        width: min(96vw, 960px);
        max-width: 960px;
        padding: 0;
        overflow: hidden;
        max-width: calc(100vw - 160px);
    }
    .auth-card:has(#step-terms.is-active)::before{
        opacity: 1;
        background: none;
    }

    /* شِلف کلی */
    .terms-shell{
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 520px;
    }

    /* Header (blur) */
    .terms-header{
        position: sticky;
        top: 0;
        padding: 16px 20px;
        backdrop-filter: blur(10px);
        z-index: 2;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    .terms-title{
        margin: 0;
        color: #fff;
        font-weight: 800;
        font-size: 18px;
        text-align: right;
    }

    /* بدنه: دو ستون */
    .terms-body{
        display: grid;
        grid-template-columns: 246px 1fr;
        gap: 16px;
        padding: 18px;
        align-items: start;
    }

    /* TOC (فهرست) */
    .terms-toc{
        border-radius: 16px;
        padding: 10px 8px;
        max-height: 520px;
        overflow-y: auto;
        overflow-x: hidden;
        -ms-overflow-style: none;   /* IE/Edge */
        scrollbar-width: none;      /* Firefox */
    }
    .terms-toc::-webkit-scrollbar{ width: 0; height: 0; }
    .terms-toc ul{ list-style: none; margin: 0; padding: 0; }

    .terms-toc__item{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        cursor: pointer;
        border-radius: 10px;
        flex-direction: row-reverse;
        direction: rtl;
        justify-content: flex-end;

        /* حالت پیش‌فرض: خاکستری و بدون نقطه */
        color: #737A88;
    }
    .terms-toc__item:hover{ background: rgba(255,255,255,.05); }
    .terms-toc__item .dot{
        display: none;
        font-size: 16px;
        line-height: 1;
        opacity: .9;
        order: 2;
        margin-inline-start: 8px;
    }
    .terms-toc__item .txt{ order: 1; text-align: right; }

    /* انتخاب‌شده: سفید + نقطه */
    .terms-toc__item.is-active{ color: #fff; }
    .terms-toc__item.is-active .dot{ display: inline; }

    /* ظرف محتوا: بدون اسکرول/ماسک */
    .terms-content{
        position: relative;
        height: 520px;   /* همون ارتفاعی که قبلاً داشتی */
        padding: 0;      /* پدینگ میره روی اینر */
        border-radius: 16px;
    }

    /* اسکرولر داخلی تا ماسک نشه */
    .terms-content__scroll{
        max-height: 53vh;
        padding: 16px 18px;
        overflow-y: auto;
        overflow-x: hidden;

        -ms-overflow-style: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .terms-content__scroll::-webkit-scrollbar{ width: 0; height: 0; }

    .terms-section + .terms-section{ margin-top: 16px; }
    .terms-section__title{
        margin: 0 0 8px;
        color: #fff; font-weight: 800; font-size: 14px; text-align: right;
    }
    .terms-section__text{
        font-size: 13px; line-height: 1.9;
        color: #cbd3e3; text-align: right;
    }

    /* Footer (blur) + دکمه */
    .terms-footer{
        position: sticky;
        bottom: 0;
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        padding: 14px 18px;
        backdrop-filter: blur(10px);
        background: transparent;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    /* دکمه پذیرش – نسخه نئومرفیک روشن */
    .terms-accept{
        display: inline-flex; align-items: center; gap: 10px;
        padding: 10px 20px;
        min-height: 56px;
        border-radius: 9999px;

        background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F7 55%, #E8ECF4 100%);
        border: 1px solid rgba(255,255,255,.65);
        box-shadow:
            0 22px 46px rgba(0,0,0,.16),
            0 8px 22px rgba(45,127,218,.15),
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -3px 6px rgba(0,0,0,.10);

        color: #0E1230;
        font-weight: 500;
        font-size: 18px;
        letter-spacing: -0.2px;
        text-decoration: none;
        transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }
    .terms-accept:hover{
        transform: translateY(-2px);
        box-shadow:
            0 26px 56px rgba(0,0,0,.18),
            0 12px 30px rgba(45,127,218,.18),
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -3px 6px rgba(0,0,0,.10);
    }
    .terms-accept:active{
        transform: translateY(0);
        box-shadow:
            0 18px 40px rgba(0,0,0,.16),
            0 8px 22px rgba(45,127,218,.15),
            inset 0 1px 0 rgba(255,255,255,.9),
            inset 0 -2px 5px rgba(0,0,0,.12);
    }
    .terms-accept:focus-visible{
        outline: none;
        box-shadow:
            0 0 0 3px rgba(255,255,255,.45),
            0 18px 40px rgba(0,0,0,.16),
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -3px 6px rgba(0,0,0,.10);
    }
    .terms-accept .check{
        font-size: 22px; line-height: 1; font-weight: 900; transform: translateY(-1px);
    }
}

/* فعال‌بودن لایه‌ی گرادیان کارت در این استپ (اگر لازم) */
.auth-card:has(#step-terms.is-active)::before{ opacity: 1; }

@media (min-width: 769px){
    /* چینش هدر: عنوان سمت راست، اکشن‌ها روبه‌رو */
    .terms-header{
        display: grid;
        grid-template-columns: 1fr auto; /* عنوان ← پر می‌کند | دکمه‌ها ← جمع */
        align-items: center;
        direction: rtl; /* شروع ستون از راست */
    }

    /* ظرف دکمه‌ها */
    .terms-actions{
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* دکمه‌ی دایره‌ای پایه */
    .terms-btn{
        width: 56px; height: 56px;
        display: grid; place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.28);
        background: rgba(255,255,255,.03);
        color: #cfd7e6;
        box-shadow:
            0 1px 0 rgba(255,255,255,.12) inset,
            0 8px 22px rgba(0,0,0,.18);
        transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
        cursor: pointer;
    }
    .terms-btn:hover{
        transform: translateY(-1px);
        box-shadow:
            0 2px 0 rgba(255,255,255,.14) inset,
            0 12px 28px rgba(0,0,0,.22);
        border-color: rgba(255,255,255,.38);
        background: rgba(255,255,255,.05);
    }
    .terms-btn:active{ transform: translateY(0); }

    /* آیکن‌ها از رنگ دکمه تبعیت می‌کنند */
    .terms-btn svg{ width: 24px; height: 24px; display:block; }

    /* واریانت توخالی (فلشِ برگشت) */
    .terms-btn--ghost{
        background: transparent;
        border-color: rgba(255,255,255,.25);
        color: #c7c9d6;
    }

    .terms-btn--ghost img{
        filter: invert(0.6);
    }

    /* واریانت پُر (ذره‌بین) */
    .terms-btn--solid{
        background: radial-gradient(120% 120% at 50% 30%, #1b1c36 0%, #12132a 100%);
        border-color: rgba(255,255,255,.18);
        color: #fff;
    }
}



/* =========================
   TERMS STEP – Mobile (<=768)
   ========================= */
@media (max-width: 768px){
    .auth-card::before{
        background: none;
    }

    .terms-accept{
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* کارت تمام قدِ موبایل */
    .auth-card:has(#step-terms.is-active){
        width: 100%;
        max-width: none;
        height: 100%;
        border-radius: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    /* شِلف */
    .terms-shell{
        min-height: calc(100vh - var(--navbar-height, 84px));
        display: grid;
        grid-template-rows: auto 1fr; /* footer ثابت جدا تعریف می‌شود */
    }

    /* هدر: عنوان وسط + خط زیر */
    .terms-header{
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 14px 16px 10px;
        backdrop-filter: blur(8px);
    }
    .terms-header::after{
        content:"";
        display:block;
        height:1px;
        margin-top:10px;
        background: rgba(255,255,255,.12);
    }
    .terms-title{
        margin: 0;
        text-align: center;
        color: #fff;
        font-weight: 800;
        font-size: 20px;
        text-align: right;
    }

    /* بدنه: تک‌ستونه */
    .terms-body{
        display: block;
        padding: 12px 16px 0;
        overflow: scroll;
        max-height: calc(100vh - 151px);
    }
    .terms-toc{ display: none; } /* فهرست در موبایل مخفی است */

    /* محتوا: اسکرول با اسکرول صفحه؛ فقط فضای پایین برای دکمه‌ها */
    .terms-content{
        padding: 0!important; /* تیتر/متن خودشون پدینگ می‌گیرند */
    }
    .terms-section + .terms-section{ margin-top: 16px; }
    .terms-section__title{
        margin: 0 0 8px;
        color: #fff;
        font-weight: 800;
        font-size: 16px;
        text-align: right;
    }
    .terms-section__text{
        font-size: 14px;
        line-height: 2;
        color: #cfd6e6;
        text-align: right;
    }

    /* فاصله‌ی انتهای محتوا تا روی دکمه‌ها نیفتد */
    .terms-body,
    .terms-content{
        padding-bottom: 140px; /* برای جا دادن FAB و دکمهٔ پذیرش */
    }

    /* دکمه‌های گرد (FAB) پایینِ چپ */
    .terms-header .terms-actions{
        position: fixed;
        left: 14px;
        bottom: calc(92px + env(safe-area-inset-bottom));
        z-index: 30;
        display: flex;
        gap: 12px;
    }
    .terms-btn{
        width: 52px; height: 52px;
        display: grid; place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.28);
        background: rgba(255,255,255,.03);
        color: #e7ebf6;
        box-shadow:
            0 1px 0 rgba(255,255,255,.12) inset,
            0 10px 24px rgba(0,0,0,.22);
        backdrop-filter: blur(4px);
    }
    .terms-btn--ghost{ background: transparent; color:#cfd3de; }
    .terms-btn--solid{
        background: radial-gradient(120% 120% at 50% 30%, #1b1c36 0%, #12132a 100%);
        color:#fff;
    }
    .terms-btn svg{ width: 24px; height: 24px; display:block; }

    /* Footer ثابت با بلور + دکمه‌ی پذیرش وسط */
    .terms-footer{
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 25;
        display: grid;
        place-items: center;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
        backdrop-filter: blur(10px);
        background: linear-gradient(180deg, rgba(13,16,40,0) 0%, rgba(13,16,40,.32) 100%);
        border-radius: 0;
    }

    /* دکمهٔ پذیرش – نئومرفیک */
    .terms-accept{
        width: min(92vw, 360px);
        justify-content: center;
        padding: 12px 22px;
        min-height: 56px;
        border-radius: 9999px;
        background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F7 55%, #E8ECF4 100%);
        border: 1px solid rgba(255, 255, 255, .65);
        box-shadow: 0 22px 46px rgba(0, 0, 0, .18), 0 12px 30px rgba(45, 127, 218, .18), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -3px 6px rgba(0, 0, 0, .10);
        color: #0E1230;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: -.2px;
        text-decoration: none;
        z-index: 1;
    }
    .terms-accept:active{
        box-shadow:
            0 18px 40px rgba(0,0,0,.16),
            0 8px 22px rgba(45,127,218,.15),
            inset 0 1px 0 rgba(255,255,255,.9),
            inset 0 -2px 5px rgba(0,0,0,.12);
    }
}

@media (max-width: 768px){
    /* فیدرِ انتهای صفحه: زیر دکمه، روی متن */
    .terms-footer{
        z-index: 25; /* دکمه بالاتر از فیدر بماند */
        backdrop-filter: none;
    }
    .terms-footer::before{
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(149px + env(safe-area-inset-bottom));
        pointer-events: none;
        background: linear-gradient(180deg, rgba(13, 16, 40, 0) 0%, rgba(13, 16, 40, 1) 50%);
        z-index: 0;
    }
}

/* ---- Mobile quickbar above the accept button ---- */
/* ---- Quickbar buttons look like .menu-btn (mobile) ---- */
@media (max-width: 768px){
    .terms-quickbar{
        position: fixed;
        left: 0; right: 0;
        bottom: calc(var(--terms-footer-height, 88px) + env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        z-index: 26;
        pointer-events: none;
    }
    .terms-quickbar__group{
        display: flex;
        gap: 8px;                /* معادل margin-left: 8px هر دکمه */
        pointer-events: auto;
    }

    /* ——— دکمه‌های گرد: همون ظاهر .menu-btn ——— */
    .qb-btn{
        width: 48px;
        height: 48px;
        border-radius: 999999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        /* از snippet شما: */
        border: 1px solid rgba(255,255,255,.16);
        background: #383551;
        color: var(--color-white, #fff);
        font-size: 22px;
        box-shadow: inset 0 -4px 9.6px #ffffff8c;
        transition: border-color .2s ease, transform .06s ease;
    }
    .qb-btn:hover{ border-color: rgba(255,255,255,.26); }
    .qb-btn:active{ transform: translateY(1px); }

    /* آیکن‌های داخل دکمه */
    .qb-btn svg{
        width: 22px; height: 22px;
        stroke: currentColor; fill: none; stroke-width: 2;
    }

    .qb-back img{
        filter: invert( 1);
    }

    /* نمایش/مخفی‌سازی: فقط موبایل */
    #step-terms .terms-quickbar{ display: flex; }
}
@media (min-width: 769px){
    #step-terms .terms-quickbar{ display: none; }

    #termsSearchBar{
        display: none!important;
    }
}

/* ===== Drawer: فهرست عناوین (Mobile) ===== */
@media (max-width: 768px){
    .terms-menu-drawer{
        position: fixed; inset: 0; z-index: 1011;
        display: none; pointer-events: none;
    }
    .terms-menu-drawer.is-open{ display: block; pointer-events: auto; }

    .terms-menu-drawer__scrim{
        position: absolute; inset: 0;
        background: rgba(0,0,0,.35);
        backdrop-filter: blur(2px);
    }

    .terms-menu-drawer__panel{
        position: absolute;
        left: 0px; right: 0px;
        bottom: 0;
        border-radius: 22px 22px 0 0;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(42, 44, 70, .93);
        box-shadow: 0 -8px 32px rgba(0,0,0,.35);
        transform: translateY(110%);
        transition: transform .22s ease;
        display: grid;
        grid-template-rows: auto 1fr;
        overflow: hidden;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .terms-menu-drawer.is-open .terms-menu-drawer__panel{ transform: translateY(0); }

    .terms-menu-drawer__header{
        position: sticky; top: 0;
        background: transparent;
        padding: 12px 14px 10px;
        text-align: center;
        z-index: 2;
    }
    .terms-menu-drawer__handle{
        width: 44px; height: 4px; border-radius: 999px; margin: 0 auto 8px;
        background: rgba(255,255,255,.22);
    }
    .terms-menu-drawer__title{
        font-size: 12px; color: #E9ECF8; opacity: .9;
    }

    .terms-menu-drawer__list{
        padding: 8px 8px 72px; /* فضای پایین برای دکمه بستن */
        overflow-y: auto; overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none; scrollbar-width: none;
    }
    .terms-menu-drawer__list::-webkit-scrollbar{ width:0; height:0; }

    /* آیتم‌ها: مشابه TOC دسکتاپ، RTL و نقطه بعد از متن وقتی فعال است */
    .terms-menu__item{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        padding: 14px 16px;
        direction: rtl;
        border-radius: 12px;
        color: #AEB4C6;
        font-weight: 700;
        font-size: 15px;
        flex-direction: row-reverse;
    }
    .terms-menu__item:hover{ background: rgba(255,255,255,.06); }
    .terms-menu__item .dot{
        display:none; order:2; margin-inline-start:8px; line-height:1;
    }
    .terms-menu__item .txt{ order:1; }
    .terms-menu__item.is-active{ color:#fff; }
    .terms-menu__item.is-active .dot{ display:inline; }

    /* دکمه بستن: همان استایل qb-btn (از قبل تعریف کردی) + جایگیری گوشه راست پایین پنل */
    .terms-menu-drawer__close{
        position: absolute;
        right: 14px;
        bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
    }
}

/* قفل اسکرول پشت دراور */
body.terms-drawer-lock{ overflow: hidden; }

.auth-segment:has(.terms-menu-drawer.is-open) {
    z-index: 20000000;
}


/* Bottom Search Bar (mobile) */
@media (max-width: 768px){
    .terms-searchbar{
        position: fixed;
        left: 0; right: 0;
        bottom: calc(var(--terms-footer-height, 96px) + env(safe-area-inset-bottom) + 8px);
        padding: 0 12px;
        display: none;                  /* با کلاس is-open نمایش می‌دهیم */
        align-items: center;
        justify-content: space-between;
        z-index: 1010;                  /* بالاتر از quickbar و footer */
        pointer-events: none;           /* فقط خودِ دکمه‌ها/فرم کلیک‌پذیرند */
    }
    .terms-searchbar.is-open{
        display:flex;
        pointer-events:auto;
        flex-direction: row-reverse;
    }

    /* دکمه‌های کناری: همان استایل menu-btn خواسته‌شده */
    .terms-searchbar .sb-btn{
        width: 48px; height: 48px;
        border-radius: 9999px;
        display: inline-flex; align-items:center; justify-content:center;
        cursor: pointer;
        border: 1px solid rgba(255,255,255,.16);
        background: #383551;
        color: #fff;
        font-size: 22px;
        box-shadow: inset 0 -4px 9.6px #ffffff8c;
        transition: border-color .2s ease, transform .06s ease;
    }
    .terms-searchbar .sb-btn:hover{ border-color: rgba(255,255,255,.26); }
    .terms-searchbar .sb-btn:active{ transform: translateY(1px); }
    .terms-searchbar .sb-btn img{ width: 22px; height: 22px; filter: invert(1); }

    /* قرص جستجو */
    .terms-searchbar .sb-form{
        position: relative;
        flex: 1 1 auto;
        margin: 0 8px;
        border-radius: 9999px;
        border: 1px solid rgba(255,255,255,.16);
        background: #383551;
        box-shadow: inset 0 -4px 9.6px #ffffff8c;
    }
    .terms-searchbar .sb-input{
        width: 100%;
        height: 48px;
        border: 0; outline: 0; background: transparent;
        color: #fff; font-weight: 700; font-size: 14px;
        text-align: right;
        padding: 0 44px 0 16px; /* جای آیکن سمت راست در RTL */
    }
    .terms-searchbar .sb-input::placeholder{ color: rgba(255,255,255,.85); font-weight: 600; }
    .terms-searchbar .sb-icon{
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        color: #fff; opacity: .9; pointer-events: none;
    }

    #termsSearchMenu img{
        filter: none;
    }
}

@media (max-width: 768px){
    #step-terms.is-searching .terms-quickbar{
        display: none !important;
    }
}

@media (min-width: 769px){
    #termsMenuDrawer{
        display: none!important;
    }
}

/* ===== PHONE (intl-tel-input) ===== */
.auth-input--phone {
    background: #0D0A2399;
    height: 3.7rem;
    display: flex;
    align-items: center;
    border: 1px solid #FFFFFF1A;
    padding: 5px 5px 5px 0;
}
.auth-input--phone .iti {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.auth-input--phone .iti .iti__flag-container { left: 8px; right: auto; height: 2.9rem; } /* در RTL، فلگ سمت چپ */
.auth-input--phone .iti--separate-dial-code .iti__selected-flag{
    height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: #2c2a43;
    display: inline-flex; align-items: center; gap: 6px;
}
.auth-input--phone .iti--separate-dial-code .iti__selected-dial-code{
    color: #e5e9f5; font-weight: 700; font-size: 14px;
}
.iti__selected-dial-code{
    direction: ltr!important;
}
.iti__dial-code{
    direction: ltr!important;
}
.auth-input--phone .iti__arrow{
    border-top: 5px solid #cfd3de;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    margin-inline-start: 6px;
    opacity: .9;
}
.auth-input--phone .iti__country-list{
    background: rgba(34, 36, 62, .97);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 46px rgba(0,0,0,.22);
    border-radius: 12px;
    color: #fff;
    left: 0;
}
.auth-input--phone .iti__country{
    direction: rtl; text-align: right; padding: 8px 10px;
}
.auth-input--phone .iti__country:hover{ background: rgba(255,255,255,.06); }

/* خود input (پلت تیره و قرصی مطابق بقیه) */
.auth-input--phone .iti input.iti__tel-input{
    width: 100%;
    height: 50px;
    background: var(--field, #0D0A23);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #fff;
    font-size: 14px; font-weight: 600;
    padding: 10px 16px 10px 90px; /* جا برای selected-flag سمت چپ */
    text-align: right;
}
.auth-input--phone .iti input.iti__tel-input::placeholder{
    color: #737A88; font-size: 14px; font-weight: 600;
}

/* ===== Continue button ===== */
.continue-btn{
    margin-top: 12px;
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.68) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    border: 1px solid rgba(255,255,255,1);
    box-shadow:
        inset 0 -4px 9.6px rgba(255, 255, 255, 0.71),
        inset 0 -4px 9.6px rgba(255, 255, 255, 0.71);

}
.continue-btn .continue-text{ font-weight: 800; }
.continue-btn .continue-icon{ transform: translateY(1px); }

.continue-btn::before{

}

/* ===== Divider with "یا" ===== */
.auth-divider{
    display: grid; place-items: center;
    margin: 12px 0; position: relative; height: 20px;
}
.auth-divider::before, .auth-divider::after{
    content: ""; position: absolute; top: 50%; width: 40%;
    border-top: 1px solid rgba(255,255,255,.18);
}
.auth-divider::before{ right: 0; }
.auth-divider::after{ left: 0; }
.auth-divider > span{
    background: transparent;
    color: #9aa3b2; font-size: 12px; font-weight: 700; z-index: 1;
}

/* ===== Google button ===== */
.google-btn{
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.16);
    background: #383551;
    color: #fff;
    box-shadow: inset 0 -4px 9.6px #ffffff8c, 0 8px 24px rgba(0,0,0,.16);
    transition: border-color .2s ease, transform .06s ease;
}
.google-btn:hover{ border-color: rgba(255,255,255,.26); transform: translateY(-1px); }
.google-btn:active{ transform: translateY(0); }
.google-btn .google-icon{ width: 20px; height: 20px; }
.google-btn .google-label{ font-size: 16px; font-weight: 600; } /* طبق خواسته */









/* =========================
   METHODS (choose channel)
   ========================= */
.step-methods .methods-head{
    display:grid; justify-items:center; gap:10px; margin-bottom: 10px;
}
.methods-back{
    position: absolute;
    right: auto;
    left: 16px;
    top: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.methods-back img{ width: 18px; height: 18px; filter: invert(.7); }

.methods-icon{
    width: 72px; height:72px; display:grid; place-items:center; border-radius:16px;
}
.methods-icon img{ width:100%; height:100%; object-fit:contain; }

.methods-title{
    margin: 6px 0 0; font-size: 20px; font-weight: 800; color: #fff;
}

.methods-list{
    display: grid; gap: 12px; margin-top: 14px;
}

.method-item{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    border-radius: 14px;
    padding: 12px 14px;
    text-decoration: none;
    background: linear-gradient(0deg, rgb(31 28 51 / 98%), rgb(44 41 64 / 87%));
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    transition: transform .08s
    ease, box-shadow .2s
    ease, background .2s
    ease, border-color .2s
    ease;
    flex-direction: row-reverse;
}
.method-item:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.method-item__icon{
    width: 36px; height: 36px; border-radius: 10px;
    display:grid; place-items:center;
    flex: 0 0 auto;
}
.method-item__icon img{ width:26px; height:26px; object-fit:contain; }
.method-item__label{ font-weight: 700; font-size: 15px; }
.method-item__chev{
    margin-inline-start:auto; opacity:.8; font-size: 20px; line-height: 1;
    transform: scaleX(-1); /* جهت فلش در RTL */
}

/* Footer زیر لیست (ویرایش شماره + نمایش شماره) */
.methods-footer{
    display:flex; align-items:center; justify-content: space-between;
    gap: 12px; margin-top: 14px; color:#9aa3b2; flex-direction: row-reverse;
}
.methods-edit{
    color:#fff; text-decoration:none; font-weight:700; font-size:14px;
}
.methods-edit:hover{ color:#e7f0ff; }
.methods-phone{ color:#737A88; font-weight: 600; font-size: 16px; }

/* کارتِ عریض‌تر مثل ماکت دسکتاپ */
.auth-card:has(#step-methods.is-active){
    width: min(88vw, 560px);
    max-width: 560px;
}

/* موبایل: تمام‌قد و مینیمال */
@media (max-width:768px){
    .auth-card:has(#step-methods.is-active){
        width:100%; max-width:none; height:100%;
        border-radius:0; background:none; border:none; box-shadow:none;
        padding: 22px 16px 26px;
    }
    .methods-back{ left: 12px; top: 12px; }
    .methods-icon{ width: 92px; height: 92px; }
    .methods-title{ font-size: 22px; margin-top: 6px; }
    .method-item{ min-height:60px; padding: 14px 16px; }
    .method-item__label{ font-size: 16px; }
    .methods-footer{ margin-top: 18px; }
}

/* ===== SKILLS BRIEF STEP ===== */

#step-skills.is-active{
    padding: 30px;
}

#step-skills.is-active .auth-card__icon{
    width: 104px;
    height: 104px;
}

#step-skills.is-active .auth-card__icon img{
    width: 100%;
}

/* کارت عریض و همان گرادیان/حس بصری استپ Tags */
.auth-card:has(#step-skills.is-active){
    width: min(96vw, 880px);
    max-width: calc(100vw - 124px);
    padding: 0; /* داخلش خودش پدینگ دارد */
    overflow: hidden;
}
.auth-card:has(#step-skills.is-active)::before{
    opacity: 1;
    background: linear-gradient(352deg, rgba(255,255,255,1) 14%, rgba(36,211,167,1) 35%, rgba(36,211,167,0) 100%);
    height: 150%;
    top: -20%;
}

/* بوم داخلی */
.step-skills .skills-stage{
    display: block;
}

/* جعبه‌ی متن + کنترل صدا */
.skills-box{
    position: relative;
    margin: 0 auto;
    max-width: 720px;
    background: rgb(13 10 35 / 60%);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.skills-textarea{
    width: 100%;
    min-height: 190px;
    resize: vertical;
    border: none;
    background: transparent;
    color: #fff;
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    outline: none;
    resize: none; /* غیرفعال‌کردن دکمۀ تغییر اندازه */
}
.skills-textarea::placeholder{
    color: #FFFFFFCC;
    font-weight: 500;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
}

/* دکمه میکروفون */
.skills-voice-btn{
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    padding: 10px 10px 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: border-color .2s
    ease, transform .06s
    ease, background .2s
    ease;
    flex-direction: row-reverse;
    gap: 5px;
}

.skills-voice-btn:hover{ border-color: rgba(255,255,255,.26); transform: translateY(-1px); }
.skills-voice-btn:active{ transform: translateY(0); }
.skills-voice-btn.is-recording{
    border-color: #36847c!important;
    background: radial-gradient(115px 115px at 88.35% 48.65%, #FFFFFF 6.88%, #24D3A7 17.37%, rgba(36, 211, 167, 0) 100%);
    box-shadow: 0px 1.34px 1.34px 0px #00000040;
}
.skills-voice-btn.is-recording img{
    filter: invert(1);
}
.skills-voice__icon{ display:block; }

/* دکمه ادامه */
.skills-actions{
    margin-top: 18px;
    display: grid;
    justify-content: center;
}
.skills-submit{
    justify-content: center;
}

#step-skills.is-active .complete-submit{
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}

#step-skills.is-active .complete-submit__icon{
    width: 26.5px;
    height: 26.5px;
}

/* موبایل: تمام‌قد + دکمه ثابت پایین */
@media (max-width: 768px){
    .auth-card:has(#step-skills.is-active){
        width: 100%;
        max-width: none;
        height: 100%;
        border-radius: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .auth-segment__center:has(#step-skills.is-active){ height: 100%; }
    .step-skills .skills-stage{ min-height: calc(100vh - var(--navbar-height, 84px)); padding: 16px; }
    .skills-box{ max-width: none; padding: 12px; }
    .skills-textarea{ min-height: 200px; font-size: 15px; }
    .skills-actions{
        position: fixed;
        bottom: 30px;
        left: 0; right: 0;
        display: grid;
        place-items: center;
        padding: 0 16px;
    }
    .skills-actions .complete-submit{
        width: min(92vw, 360px);
        border-radius: 999px;
        padding: 12px 20px;
        font-size: 15px;
        box-shadow:
            0 10px 28px rgba(0,0,0,.12),
            0 10px 30px rgba(45,127,218,.18);
    }

    .auth-card:has(#step-skills.is-active)::before{
        background: linear-gradient(352deg, rgba(255,255,255,1) 14%, rgba(36,211,167,1) 35%, rgba(36,211,167,0) 84%);
    }
}

/* به جمع استایل‌های گرادیان فعال اضافه شود تا با بقیه سازگار بماند */
.auth-card:has(#step-complete.is-active)::before,
.auth-card:has(#step-pick.is-active)::before,
.auth-card:has(#step-tags.is-active)::before,
.auth-card:has(#step-business.is-active)::before,
.auth-card:has(#step-skills.is-active)::before{
    opacity: 1;
}



/* ===== RATES STEP (pricing per skill) ===== */
.auth-card:has(#step-rates.is-active){
    width: min(96vw, 880px);
    max-width: calc(100vw - 124px);
    padding: 0;              /* بوم داخلی خودش پدینگ دارد */
    overflow: hidden;
}
.auth-card:has(#step-rates.is-active)::before{
    opacity: 1;
    /* گرادیان مطابق رفرنس: سبز رو به سفید */
    background: linear-gradient(352deg, rgba(255,255,255,1) 14%, rgba(36,211,167,1) 35%, rgba(36,211,167,0) 100%);
    top: -20%;
    height: 150%;
}

#step-rates.is-active{
    padding: 28px;
}

#step-rates.is-active .auth-card__icon{
    width: 104px; height: 104px; margin-bottom: 6px;
}
#step-rates.is-active .auth-card__icon img{ width: 100%; }

/* لیست و ردیف‌ها */
.rates-form{ display: grid; gap: 12px; height: 84.1%;}
.rates-list{ display: grid; margin-top: 8px; margin-bottom: 29rem;}

.rate-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    padding: 28px 14px;
    margin: 0 28px;
}

/* موبایل: یک‌ستونه */
@media (max-width:768px){
    .rate-row{ grid-template-columns: 1fr; border-bottom: none;}
}

.rate-row__title{
    font-weight: 800; font-size: 14px; color: #fff; text-align: right;
}
.rate-row__slider{
    position: relative;
}
.rate-row__values{
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

/* قرص‌های مقدار */
.rate-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 12px;
    color: #e9edf7;
    font-weight: 700;
    font-size: 13px;
}
.rate-pill__label{ opacity: .9; font-weight: 600; }

/* دکمه تایید پایین */
.rates-actions{ display: grid; justify-content: center; margin-top: 6px; }
.rates-submit{ justify-content: center; }

/* موبایل: تمام‌قد + دکمه ثابت پایین */
@media (max-width: 768px){
    .auth-card:has(#step-rates.is-active){
        width: 100%; max-width: none; height: 100%;
        border-radius: 0; background: none; border: none; box-shadow: none;
        padding: 0;
    }
    .auth-segment__center:has(#step-rates.is-active){ height: 100%; }
    #step-rates.is-active{ padding: 16px; }
    .rates-actions{
        position: fixed; bottom: 30px; left: 0; right: 0;
        display: grid; place-items: center; padding: 0 16px;
    }
    .rates-actions .complete-submit{
        width: min(92vw, 360px);
        border-radius: 999px;
        padding: 12px 20px;
        font-size: 15px;
        box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 10px 30px rgba(45,127,218,.18);
    }
}

/* ===== noUiSlider (RTL, dark glass) ===== */

:root{
    --rate-dash-color: rgba(255,255,255,.35);
    --rate-dash-size: 6px;
    --rate-dash-gap: 6px;
}

.noUi-target{
    border-radius: 999px;
    border: none;
    box-shadow: none;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--rate-dash-color) 0 var(--rate-dash-size),
        transparent calc(var(--rate-dash-size)) calc(var(--rate-dash-size) + var(--rate-dash-gap))
    );
}
.noUi-connect{
    background: white;
    border-radius: 999px;
}
.noUi-horizontal .noUi-handle{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    top: -7px;
    border: 2px solid #fff;
    background: transparent;
    box-shadow: none;
    cursor: grab;
}
.noUi-handle:active{ cursor: grabbing; }
[dir="rtl"] .noUi-horizontal .noUi-handle.noUi-handle-lower{
    left: -2px;
}

/* نقاط حداقل/حداکثر (اختیاری) */
.noUi-tooltip{
    border: 0; background: transparent;
    color: #fff; font-weight: 500; font-size: 10px;
    border-radius: 8px; padding: 6px 8px;
    bottom: unset!important;
    text-shadow: 0 4px 4px #0000000F;
}

#step-rates.is-active{
    max-height: calc(100dvh - 360px);
    overflow: auto;
    overflow-x: hidden;
}

.noUi-horizontal .noUi-handle::before,.noUi-horizontal .noUi-handle::after{
    content: none;
}

/* ===== RATES: layout with sticky header/footer ===== */
#step-rates.is-active{
    /* از اسکرول خود استپ صرف‌نظر می‌کنیم؛ وسط اسکرول می‌شود */
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    padding: 0px;
    max-height: calc(100dvh - 217px); /* ارتفاع منطقی داخل کارت */
    overflow: hidden;                  /* اسکرول فقط وسط */
}

/* هدر چسبان */
#step-rates .rates-header{
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 28px 28px 8px;
    backdrop-filter: blur(4px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}

/* ظرف اسکرولیِ لیست */
#step-rates .rates-scroll{
    min-height: 0;     /* حیاتی برای اسکرول داخل grid */
    overflow: auto;
    overflow-x: hidden;
    padding-top: 4px;
    scrollbar-width: none; /* برای فایرفاکس */
    -ms-overflow-style: none; /* برای IE و Edge قدیمی */
}
#step-rates .rates-scroll::-webkit-scrollbar {
    display: none; /* برای کروم، سافاری و اپرا */
}

/* فوتر چسبان */
#step-rates .rates-footer{
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 8px 28px 28px;
    backdrop-filter: blur(4px);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* دکمه داخل فوتر */
#step-rates .rates-actions{
    display: grid;
    justify-content: left;
    margin: 6px 0 0;
}

/* —— نسخه‌ی موبایل —————————————————————————— */
@media (max-width: 768px){
    #step-rates.is-active{
        padding: 0px;
        grid-template-rows: auto 1fr auto;
        max-height: calc(100dvh - 84px); /* با نوار بالای سایت هماهنگ */
        display: block;
    }
    /* اوورراید رفتار قدیمیِ fixed */
    #step-rates .rates-actions{ position: static; }
    #step-rates .rates-footer .complete-submit{
        width: min(92vw, 360px);
        border-radius: 999px;
        padding: 12px 20px;
        font-size: 15px;
        box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 10px 30px rgba(45,127,218,.18);
        justify-self: center;
    }
    #step-rates .rates-footer{
        padding: 8px 0 28px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #step-rates .rates-scroll{
        overflow: auto;
        overflow-x: hidden;
    }
}

/* اگر قبلاً روی خود #step-rates اسکرول داده بودی، این را خنثی کن */
#step-rates.is-active{
    overflow: hidden !important;
}

/* هدر: تیتر راست، دکمه چپ (در RTL) */
#step-rates .rates-header__bar{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    direction: rtl; /* ستون اول در راست قرار بگیرد */
}

/* دکمه Back (پس‌زمینه شفاف) */
#step-rates .rates-back{
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;           /* شفاف طبق خواسته */
    display: grid;
    place-items: center;
    color: #cfd7e6;
    cursor: pointer;
    transition: transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    /* کمک به خوانایی روی گرادیان */
    backdrop-filter: blur(2px);
}
#step-rates .rates-back:hover{
    border-color: rgba(255,255,255,.4);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
#step-rates .rates-back:active{ transform: translateY(0); }

#step-rates .rates-back img{
    inline-size: 20px;
    block-size: 20px;
    filter: invert(.85); /* آیکن روشن روی زمینه تیره/گرادیان */
}

/* اندازه‌های موبایل کمی کوچکتر */
@media (max-width: 768px){
    #step-rates .rates-back{
        inline-size: 44px;
        block-size: 44px;
    }
    #step-rates .rates-back img{
        inline-size: 18px;
        block-size: 18px;
    }
}


/* Highlight for terms search */
.terms-hit{
    background: #F7AC0B;
    color: black;
    font-weight: 800;
    padding: 0 .08em;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(255, 153, 0, .25) inset;
}
/* mic-permission-modal.css */
:root{
    --kw-bg: #0c0a22;
    --kw-surface-1: #121034;
    --kw-surface-2: #0f0e2a;
    --kw-text: #e7e7f2;
    --kw-muted: #b7b7c9;
    --kw-outline: rgba(255,255,255,.12);
    --kw-ring: rgba(255,255,255,.08);
    --kw-radius-2xl: 28px;
}

/* اختیاری: اگر این مودال را داخل یک سکشنِ سِگمنت می‌گذارید */
.mic-permission-segment{
    z-index: 9999;

    position: relative;
    isolation: isolate;
}

/* Overlay */
.kw-modal-wrap{
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(900px 600px at 15% 0%, rgba(114,92,255,.30), transparent 55%),
        radial-gradient(900px 600px at 85% 100%, rgba(0,255,209,.18), transparent 55%),
        rgba(6,5,18,.55);
    backdrop-filter: blur(6px);
    z-index: 1000;
}
.kw-modal-wrap.is-open{ display: grid; }

/* Panel */
.kw-modal{
    width: min(92vw, 420px);
    background: linear-gradient(180deg, var(--kw-surface-1), var(--kw-surface-2));
    border-radius: var(--kw-radius-2xl);
    border: 1px solid var(--kw-ring);
    box-shadow:
        0 24px 64px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.06);
    padding: 28px 24px 24px;
    position: relative;
    color: var(--kw-text);
}
.kw-modal::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    padding:1px; pointer-events:none;
    background: radial-gradient(120% 160% at 50% -20%, rgba(0,255,209,.18), transparent 50%),
    radial-gradient(150% 120% at 20% 120%, rgba(140,92,255,.18), transparent 60%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Close */
.kw-modal__close{
    position: absolute;
    inset-inline-end: 16px;
    top: 14px;
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--kw-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* Icon + text */
.kw-modal__icon{ display:grid; place-items:center; margin-block:8px 10px; }
.kw-modal__icon img{
    width: 35.81412887573242px;
}
.kw-modal__icon svg{ width:44px; height:44px; stroke:#fff; stroke-width:1.6; fill:none; opacity:.95; }

.kw-modal__title{ margin:6px 0 8px; font-size:22px; font-weight:700; letter-spacing:-.2px; }
.kw-modal__desc{ margin:0 0 18px; color:var(--kw-muted); line-height:1.8; font-size:14.5px; }

/* Actions */
.kw-actions{ display:grid; gap:12px; margin-top:8px; }

.kw-btn{
    height:56px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    gap:10px; padding-inline:18px;
    font-size:15.5px; font-weight:600;
    cursor:pointer; border:0;
}
.kw-btn svg{ width:20px; height:20px; stroke-width:1.8; }

.kw-btn--primary{
    color:#0f1021;
    background: linear-gradient(180deg, #ffffff, #eaeaea);
    box-shadow: 0 8px 18px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.8);
    border:1px solid rgba(0,0,0,.12);
}
.kw-btn--ghost{
    color: var(--kw-text);
    background: rgba(255,255,255,.02);
    border:1px solid var(--kw-outline);
}



/* وقتی مشغول تبدیل صدا به متن هستیم */
.skills-voice-btn.is-transcribing{
    position: relative;
    pointer-events: none;              /* تا کاربر دوباره کلیک نکند */
    opacity: 1;
}


/* متن داخل دکمه در حالت transcribe اندکی کمرنگ‌تر نشون داده بشه */
.skills-voice-btn.is-transcribing .skills-voice__label{
    opacity: .95;
}
.skills-voice-btn.is-recording .skills-voice__label {
    margin-right: 10px;
    padding-inline-end: 1.5em;
    position: relative;
}

.skills-voice-btn.is-recording .skills-voice__label::after {
    content: "×";
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;       /* بزرگ‌تر */
    font-weight: 200;      /* نازک‌تر */
    line-height: 1;
    color: currentColor;   /* هم‌رنگ متن */
    cursor: pointer;
    opacity: 0.8;
    transition: opacity .2s, transform .2s;
}

.skills-voice-btn.is-recording .skills-voice__label::after:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.15); /* افکت کوچک بزرگ شدن هنگام هاور */
}

/* دور آیکن هم هاله‌ی کوچک داشته باشه */
.skills-voice-btn.is-transcribing img{
    filter: drop-shadow(0 0 16px rgba(255,255,255,.45));
}

@keyframes kw-spin{
    to { transform: translateY(-50%) rotate(360deg); }
}

/* نوار باریک بالای textarea وقتی در حال تبدیل‌ایم (اختیاری) */
.skills-transcribing-bar{
    height: 3px;
    background: linear-gradient(90deg, #00ffd1, #199cdf, #00ffd1);
    background-size: 200% 100%;
    border-radius: 999px;
    animation: kw-bar 1.2s linear infinite;
}
@keyframes kw-bar{
    0%{ background-position: 0% 0; }
    100%{ background-position: 200% 0; }
}

/* وقتی مشغول تبدیل نیستیم پنهانش کن */
.skills-transcribing-bar[hidden]{ display: none; }


/* حالت لودینگ دکمه (در حال تبدیل) */
.skills-voice-btn.is-transcribing{
    position: relative;
    cursor: progress;
    pointer-events: none;   /* جلوگیری از کلیک اضافه */
    opacity: .95;
}
.skills-voice-btn.is-transcribing .skills-voice__label{ opacity: .95; }
.skills-voice-btn.is-transcribing img{
    filter: drop-shadow(0 0 16px rgba(255,255,255,.45));
}

/* فقط وقتی واقعاً اسپینر فعال است بچرخان (JS کلاس is-spinning می‌گذارد) */
#skillsMicBtn img.is-spinning{
    animation: kw-rot .9s linear infinite;
}
@keyframes kw-rot { to { transform: rotate(360deg); } }

/* اگر لودینگ است اما img اسپینر نیست، هر انیمیشن قدیمی را خاموش کن */
#skillsMicBtn.is-transcribing img:not(.is-spinning){
    animation: none !important;
    transform: none !important;
}

/* نوار وضعیت بالای textarea – یک نسخه کافی است */
.skills-transcribing-bar{
    margin-bottom: 8px;
    height: 6px;                     /* اگر نازک‌تر می‌خواهی 3px بگذار */
    border-radius: 999px;
    background: linear-gradient(90deg,
    rgba(45,127,218,.25) 0%,
    rgba(0,255,209,.35) 50%,
    rgba(45,127,218,.25) 100%);
    position: relative;
    overflow: hidden;
}
.skills-transcribing-bar::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(90deg, transparent 0%,
    rgba(255,255,255,.7) 50%,
    transparent 100%);
    transform: translateX(-100%);
    animation: kw-bar-sheen 1.6s ease-in-out infinite;
}
@keyframes kw-bar-sheen { to { transform: translateX(100%); } }

.skills-transcribing-bar[hidden]{ display: none; }
/* فقط برای این فیلد تلفن */
.auth-input--phone .iti { width: 100%; }

/* دراپ‌داون: اسم کشور حذف */
.iti.iti--no-names .iti__country-name { display: none; }

/* کمی به استایل دیال‌کد رسیدگی کنیم که خواناتر شود */
.iti.iti--no-names .iti__dial-code {
    font-weight: 600;
    opacity: .95;
}

/* ردیف‌ها کمی جمع‌وجورتر */
.iti.iti--no-names .iti__country { padding: 6px 10px; }

/* (اختیاری) جداکننده‌ها و گروه‌ها اگر شلوغ‌اند مخفی شوند */
.iti.iti--no-names .iti__divider,
.iti.iti--no-names .iti__country.iti__preferred + .iti__divider { display: none; }

/* چون صفحه RTL است، ولی لیست کشورها LTR بهتر خوانده می‌شود */
.iti.iti--no-names .iti__country-list { direction: ltr; text-align: left; }

/* ارتفاع هدر موبایل + 8px فضای تنفس */
#step-terms [id] { scroll-margin-top: calc(var(--terms-header-h, 56px) + 8px); }


/* ---- iOS/mobile fix for COMPLETE step ---- */

/* 1) vh مشکل‌دار را با dvh جایگزین کنیم وقتی پشتیبانی هست */
@supports (height: 100dvh) {
    @media (max-width: 768px){
        .auth-segment{
            height: calc(100dvh - var(--navbar-height, 84px));
        }
    }
}

/* 2) جلوگیری از بُریدن fixed داخل step-complete روی iOS */
@media (max-width: 768px){
    /* به‌صورت عمومی در موبایل overflow را از ریشه‌ی segment بردار */
    .auth-segment{
        overflow: visible; /* override مقدار اولیه‌ی overflow:hidden */
    }
    /* حتماً در حالت complete هم visible بماند */
    .auth-segment:has(#step-complete.is-active){
        overflow: visible !important;
    }

    /* ظرف میانی اسکرول داشته باشد ولی پایینش جا برای دکمه بماند */
    .auth-segment__center:has(#step-complete.is-active){
        overflow: auto;
        /* کمی فاصله برای اینکه محتوا زیر دکمه نرود */
        padding-bottom: 140px;
    }

    /* 3) خود دکمه: fixed واقعی به ویوپورت + safe area + z-index بالا */
    .complete-actions{
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: unset;
        display: grid;
        place-items: center;
        z-index: 9999; /* بالاتر از لایه‌های گرادیان/کارت */
        pointer-events: auto;
    }
    .complete-actions .complete-submit{
        width: min(92vw, 360px);
        border-radius: 999px;
        padding: 12px 20px;
        font-size: 15px;
        justify-content: center;
    }

    /* اگر جایی لایه‌ی گرادیان قبل از کارت فعال می‌شود، پشت دکمه بماند */
    .auth-card::before{
        z-index: 0; /* دکمه z-index بزرگ‌تری دارد */
    }
}

/* 4) محض اطمینان: fixed روی برخی دستگاه‌های iOS با این هک پایدارتر می‌شود */
@media (max-width: 768px){
    .complete-actions{
        transform: translateZ(0); /* ایجاد لایه‌ی مستقل برای compositing */
        will-change: transform;
    }
}

/* ===== STEP 3: Neutralize Autofill look (iOS/Chrome WebKit) ===== */
/* هدف: حفظ پس‌زمینه‌ی طراحی (var(--field)) و رنگ متن #fff */

#step-complete .auth-input__field:-webkit-autofill,
#step-complete .auth-input__field:-webkit-autofill:hover,
#step-complete .auth-input__field:-webkit-autofill:focus,
#step-complete textarea.auth-input__field:-webkit-autofill,
#step-complete select.auth-input__field:-webkit-autofill {
    /* متن و کرسر مثل قبل سفید بماند */
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;

    /* پس‌زمینه‌ی زرد/آبی WebKit را با رنگ فیلد خودمان می‌پوشانیم */
    background-color: var(--field, #0D0A23) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--field, #0D0A23) inset !important;
    box-shadow: 0 0 0 1000px var(--field, #0D0A23) inset !important;

    /* از ترفند transition طولانی هم استفاده می‌کنیم تا سافاری دوباره رنگ نریزد */
    transition: background-color 99999s ease, color 99999s ease !important;
}

/* Safari جدید از :autofill هم پشتیبانی می‌کند—برای پوشش کامل: */
#step-complete .auth-input__field:autofill,
#step-complete textarea.auth-input__field:autofill,
#step-complete select.auth-input__field:autofill {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    background-color: var(--field, #0D0A23) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--field, #0D0A23) inset !important;
    box-shadow: 0 0 0 1000px var(--field, #0D0A23) inset !important;
    transition: background-color 99999s ease, color 99999s ease !important;
}

/* فقط خیالت راحت‌تر: placeholder هم دست‌نخورده بمونه */
#step-complete .auth-input__field:-webkit-autofill::first-line {
    color: #fff !important;
    font-weight: 600;
}


/* ========= iOS WebKit Autofill – keep dark bg + white text ========= */
/* دامنه‌ی دقیق: فقط Step 3 */
.auth-card #step-complete .auth-input__field {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;                 /* به WebKit بگو حالت تیره‌ست */
    background-clip: padding-box;       /* جلوی نشت رنگ داخلی */
}

/* متن سفید و کرسر سفید بماند */
.auth-card #step-complete .auth-input__field:-webkit-autofill,
.auth-card #step-complete .auth-input__field:-webkit-autofill:hover,
.auth-card #step-complete .auth-input__field:-webkit-autofill:focus,
.auth-card #step-complete textarea.auth-input__field:-webkit-autofill,
.auth-card #step-complete select.auth-input__field:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;

    /* پس‌زمینه‌ی زرد/سفید WebKit را با زمینه‌ی خودت می‌پوشانیم */
    background-color: var(--field, #0D0A23) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--field, #0D0A23) inset !important;
    box-shadow:        0 0 0 1000px var(--field, #0D0A23) inset !important;

    /* جلوگیری از تغییر رنگ در طول عمر سشن */
    transition: background-color 99999s ease, color 99999s ease !important;
}

/* Safari جدید: :autofill را هم پوشش بده */
.auth-card #step-complete .auth-input__field:autofill,
.auth-card #step-complete textarea.auth-input__field:autofill,
.auth-card #step-complete select.auth-input__field:autofill {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    background-color: var(--field, #0D0A23) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--field, #0D0A23) inset !important;
    box-shadow:        0 0 0 1000px var(--field, #0D0A23) inset !important;
    transition: background-color 99999s ease, color 99999s ease !important;
}

/* Placeholder اولین خط که WebKit گاهی عوض می‌کند */
.auth-card #step-complete .auth-input__field:-webkit-autofill::first-line {
    color: #fff !important;
    font-weight: 600;
}

.auth-card #step-complete .auth-input__field{
    border-radius: 999999px;
    overflow: hidden !important;
}


/* لیست: ارتفاع و اسکرول نرم موبایل */
.terms-menu-drawer__list{
    max-height: min(70vh, 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* آیتم‌ها رنگ را از پنل بگیرند */
.terms-menu__item{ color: inherit; }

/* Back button in OTP step */
#step-2 .otp-back-btn{
    position:absolute;
    top:12px;
    left:12px;           /* صراحتاً بالا-چپ */
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:12px;
    color:#fff;
    text-decoration:none;
    z-index:10;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#step-2 .otp-back-btn:hover{ background:rgba(255,255,255,.12); }
#step-2 .otp-back-btn .txt{ font-weight:600; font-size:14px; }


/* Back button for TAGS step */
#step-tags .tags-back{
    position: absolute;
    top: 16px;
    left: 16px;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;
    display: grid;
    place-items: center;
    color: #cfd7e6;
    cursor: pointer;
    z-index: 10;                 /* بالاتر از گرادیان کارت */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#step-tags .tags-back:hover{
    border-color: rgba(255,255,255,.4);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
#step-tags .tags-back:active{ transform: translateY(0); }
#step-tags .tags-back img{
    inline-size: 20px;
    block-size: 20px;
    filter: invert(.85);
}

/* موبایل کمی کوچک‌تر */
@media (max-width: 768px){
    #step-tags .tags-back{
        inline-size: 44px;
        block-size: 44px;
        top: 12px;
        left: 12px;
    }
    #step-tags .tags-back img{
        inline-size: 18px;
        block-size: 18px;
    }
}

/* Back button for SKILLS step */
#step-skills .skills-back{
    position: absolute;
    top: 16px;
    left: 16px;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;
    display: grid;
    place-items: center;
    color: #cfd7e6;
    cursor: pointer;
    z-index: 10; /* بالاتر از گرادیان کارت */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#step-skills .skills-back:hover{
    border-color: rgba(255,255,255,.4);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
#step-skills .skills-back:active{ transform: translateY(0); }
#step-skills .skills-back img{
    inline-size: 20px;
    block-size: 20px;
    filter: invert(.85); /* آیکن روشن روی زمینه تیره */
}

/* موبایل کمی کوچک‌تر */
@media (max-width: 768px){
    #step-skills .skills-back{
        inline-size: 44px;
        block-size: 44px;
        top: 12px;
        left: 12px;
    }
    #step-skills .skills-back img{
        inline-size: 18px;
        block-size: 18px;
    }
}

/* Back button for PICK step */
#step-pick .pick-back{
    position: absolute;
    top: 16px;
    left: 16px;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;
    display: grid;
    place-items: center;
    color: #cfd7e6;
    cursor: pointer;
    z-index: 10;                  /* بالاتر از گرادیان کارت */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#step-pick .pick-back:hover{
    border-color: rgba(255,255,255,.4);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
#step-pick .pick-back:active{ transform: translateY(0); }
#step-pick .pick-back img{
    inline-size: 20px;
    block-size: 20px;
    filter: invert(.85);
}

/* موبایل کمی کوچک‌تر */
@media (max-width: 768px){
    #step-pick .pick-back{
        inline-size: 44px;
        block-size: 44px;
        top: 12px;
        left: 12px;
    }
    #step-pick .pick-back img{
        inline-size: 18px;
        block-size: 18px;
    }
}

/* ===== RATES: جلوگیری از هم‌پوشانی tooltip ===== */
.rate-row .noUi-target { overflow: visible; }

.rate-row .noUi-horizontal .noUi-tooltip{
    position: absolute;
    left: 50%;
    /* پیش‌فرض: بالا و مرکز هندل */
    --tooltip-x: -50%;
    --tooltip-y: 0%;
    --tooltip-nudge: 30px; /* نوج افقی قابل‌تنظیم */
    transform: translate(var(--tooltip-x), var(--tooltip-y));
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* حالت پایین (برای یکی یا هر دو) */
.rate-row .noUi-horizontal .noUi-tooltip.is-bottom{
    /*--tooltip-y: calc(100% + 8px);*/
}

/* وقتی خیلی نزدیک: نوج افقیِ پایین */
.rate-row .noUi-horizontal .noUi-tooltip.is-nudge-right{
    --tooltip-x: calc(-50% + var(--tooltip-nudge));
}
.rate-row .noUi-horizontal .noUi-tooltip.is-nudge-left{
    --tooltip-x: calc(-50% - var(--tooltip-nudge));
}