@font-face{
font-family: nazanin;
src: url('Bnazanin/BNAZANB.ttf');
}
@font-face{
font-family: Vazirmatn-Bold;
src: url('ttf/Vazirmatn-Bold.ttf');
}
@font-face{
font-family: Vazirmatn-Medium;
src: url('ttf/Vazirmatn-Medium.ttf');
}
@font-face{
font-family: Vazirmatn-Regular;
src: url('ttf/Vazirmatn-Regular.ttf');
}
@font-face{
font-family: Vazirmatn-SemiBold;
src: url('ttf/Vazirmatn-SemiBold.ttf');
}

@font-face{
font-family: IRANSansBold-Edit;
src: url('fontiransans/IRANSans-Edit.ttf');
}

::selection {
  background-color: rgb(27, 161, 27); /* رنگ پس‌زمینه سبز */
  color: white; /* رنگ متن سفید (اختیاری، برای خوانایی بهتر) */
}

body::-webkit-scrollbar {

  width: 14px; /* عرض نوار اسکرول */

}

body::-webkit-scrollbar-track {
  background: rgba(0, 128, 0, 0); /* رنگ پس‌زمینه نوار اسکرول */
  top: 30px;
}

body::-webkit-scrollbar-thumb {
  background: green; /* رنگ خود نوار اسکرول */
  border-radius: 6px; /* گرد کردن گوشه‌های نوار اسکرول */

}

body::-webkit-scrollbar-thumb:hover {
  background: rgb(0, 94, 0);
  cursor: grab;
}

body::-webkit-scrollbar-thumb:active {
  background: rgb(0, 76, 0);
  cursor: grabbing;
}


/* ====== START loader */

/* استایل‌های خود لودینگ رو که بالا گذاشتم، اینجا کپی کن */

/* این استایل برای مخفی کردن محتوا در ابتدا */
#page-content {
  display: none; /* فعلا مخفی */
  /* بقیه استایل‌های صفحه رو اینجا بذار */
}

/* استایل اصلی لودینگ */
.loader-container {
  position: fixed; /* تا روی همه چیز بمونه */
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0f172a, #1e293b, #334155);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* بالاتر از همه چی */
  transition: opacity 0.4s ease, visibility 0.4s; /* افکت محو شدن */
}

.loader-container.hidden { /* وقتی این کلاس رو گرفت، مخفی میشه */
  opacity: 0;
  visibility: hidden;
}

.loader {
  position: relative;
  width: 90px;
  height: 90px;
}

.loader span {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top: 4px solid #38bdf8;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

.loader span:nth-child(2) {
  width: 65px;
  height: 65px;
  top: 12.5px;
  left: 12.5px;
  border-top-color: #818cf8;
  animation-duration: 0.9s;
  animation-direction: reverse;
}

.loader span:nth-child(3) {
  width: 40px;
  height: 40px;
  top: 25px;
  left: 25px;
  border-top-color: #f472b6;
  animation-duration: 0.7s;
}

.loading-text {
  color: white;
  font-size: 18px;
  font-family: IRANSansBold-Edit;
  letter-spacing: 2px;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}


/* ====== END loader */


.body_reg{
    background-image: url(bak.png);
    /* background-size: cover; */
}
.img{
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    height: 27%;
    margin-top: 37px;
    border-radius: 30px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}
.titr{
    margin: auto;
    text-align: center;
    color: green;
    font-family: Vazirmatn-Bold;
    font-size: 48px;
    text-shadow: 0 13px 20px rgba(0, 0, 0, 0.3);
}
.titr1{
    font-family: Vazirmatn-Bold;
    text-align: center;
    margin-top: 36px;
    font-size: 20px;
}
.col{
    border-radius: 8px;
    border: 2px solid white;
    width: 40%;
    margin: auto;
    background-color: rgb(127 127 127 / 12%);
}
.form1{
    text-align: center;
}
.labels{
    font-family: Vazirmatn-Medium;
}
.inputs{
    font-family: Vazirmatn-Regular;
    border-radius: 13px;
    border: none;
    height: 50px;
    padding: 14px;
    width: 224px;
    margin: auto;
}
.inputs:hover{
    border: 2px solid rgb(96, 255, 213);
}
.inputs:focus-visible{
    border: none;
    outline: none;
}



/* استایل آیکون چشم */
.password-container {
  position: relative;
}

.password-container .form-floating {
  position: relative;
}

.toggle-password {
  position: absolute;
  left: 15px !important;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  font-size: 18px;
  z-index: 100;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 400px) {
  .password-container {
    width: 85% !important;
  }
  
  .toggle-password {
    left: 12px !important;
  }
}



.back{
    background-color: #b1d7ec;
    border: none;
    color: #189a4f;
    border-radius: 6px;
    transition: 0.3s;
}
.back:hover{
    color: #b1d7ec;
    background-color: #37a565;
}
.btn2{
  width: 100%;
  font-family: Vazirmatn-SemiBold;
  background: linear-gradient(45deg, rgb(29 172 103), rgb(11, 107, 14));
  border: none;
  border-radius: 30px;
  padding: 12px !important;
  color: white;
  font-weight: bold;
  transition: 0.3s;
}

.btn2:hover{
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* login */
.img2{
    width: 21%;
    height: 38%;
    margin-top: 37px;
    border-radius: 40px;
    filter: drop-shadow(0  5px 10px rgba(0,0,0,0.3));
}
.titr2{
    font-family: Vazirmatn-Bold;
    text-align: center;
    margin-top: 36px;
    font-size: 28px;
}
.inputs1 {
width: 300px !important;
margin: 0 auto;
border-radius: 24px;
}
.form2{
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);

}

.labels1{
  width: 906px !important;
  margin:auto;
  font-size: 19px;
}
.body2{
font-family: Vazirmatn-Medium;

background: linear-gradient(135deg,#43cea2,#185a9d);
}
.btn1{
font-family: Vazirmatn-SemiBold;
  background: linear-gradient(45deg, rgb(255, 81, 47), rgb(221, 36, 118));
  border: none;
  border-radius: 30px;
  padding: 12px;
  color: white;
  font-weight: bold;
  transition: 0.3s;
}

.btn1:hover{
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.alerts{
    font-family: Vazirmatn-SemiBold;
}
.col_modal{
    margin: auto;
    background-color: rgb(243 243 243);
    width: 90%;
}
.span_1{
    margin-right: 20px;
    font-size: 18px;
    font-weight: bold;
}
.span_2{
    margin-top: 25px;
    margin-right: -63px;
    font-size: 15px;
}
.btn_close_devices{
    margin-top: -38px;
    border: 2px solid #e73737;
    background-color: #ffd7d7;
    color: #e73737;
    border-radius: 10px;
    width: 60px;
    transition: 0.2s;
}
.btn_close_devices:hover{
    color: #ffd7d7;
    border: 2px solid #ffd7d7;
    background-color: #e73737;
}

.img_end{
display: flex;
justify-content: center;
background-color: rgb(239, 239, 239);
width: 100%;
margin-left: 20px;
}

.copyright_main{
    width: 100%;
    float: left;
    background-color: #17ad74; 
	height: 7%;
    padding-bottom: 5px;
    padding-top: 5px; 
    align-items: center;
    display: flex;
}
.copyright_main_sargarmi{
    width: 100%;
    float: left;
    background-color: #17ad74; 
	height: 3%;
    padding-bottom: 5px;
    padding-top: 5px; 
    align-items: center;
    display: flex;
}
.copy_text{
    font-family: IRANSansBold-Edit;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%; 
    float: left;
    text-align: center; 
    color: #ffffff;   
    margin-left: 0px; 
    margin-right: 0px; 
}

@media (max-width: 400px) {

    .img2{
    width: 75%;
    height: 35%;
    margin-top: 22px;
    border-radius: 40px;
    filter: drop-shadow(0  5px 10px rgba(0,0,0,0.3));
    }

    .titr2{
    font-family: Vazirmatn-Bold;
    text-align: center;
    margin-top: 30px;
    font-size: 105%;
    }

  .form-floating label {
    width: 100% !important;
    text-align: right;
    padding-right: 65px;
    font-size: 15px;
    color: #666;
  }


    .titr{
    color: green;
    font-family: Vazirmatn-Bold;
    text-align: center;
    margin-top: 30px;
    font-size: 105%;
    text-shadow: 0 13px 20px rgba(0, 0, 0, 0.3);
    }

    .img{
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 25%;
    margin-top: 37px;
    border-radius: 30px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
    }

    .col{
    border-radius: 8px;
    width: 128% !important;
    margin:auto;
    background-color: rgb(127 127 127 / 12%);
    }

}

title{
  font-family: Vazirmatn-Bold;
}




/* =========================================
   Responsive Styles for Login Page (Mobile)
   Target: 375px x 667px
   ========================================= */

@media (max-width: 480px) {
    
    /* 1. تنظیمات بدنه و پس‌زمینه */
    .body2 {
        background: linear-gradient(135deg, #43cea2, #185a9d);
        background-attachment: fixed; /* جلوگیری از پرش پس‌زمینه هنگام اسکرول */
        min-height: 100vh;
        padding: 20px 15px; /* فاصله از لبه‌های صفحه */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* مرکزچین عمودی محتوا */
    }

    /* 2. لوگو */
    .img2 {
        width: 120px !important; /* اندازه مناسب لوگو در موبایل */
        height: auto !important;
        margin-top: 10px;
        border-radius: 20px;
    }

    /* 3. تیتر اصلی */
    .titr2 {
        font-size: 22px !important; /* کاهش سایز فونت */
        margin-top: 15px;
        padding: 0 10px;
        line-height: 1.4;
    }

    /* 4. کانتینر فرم‌ها */
    /* این div اصلی که همه چیز را در بر می‌گیرد */
    div[style="text-align: center;"] {
        width: 100%;
        max-width: 340px; /* جلوگیری از پهن شدن بیش از حد */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 5. فیلد ورودی نام کاربری */
    .form-floating.mb-3.text-center {
        width: 100%;
        margin-bottom: 20px;
    }

    .inputs1 {
        width: 100% !important; /* تمام عرض */
        height: 55px !important; /* ارتفاع بیشتر برای لمس راحت‌تر */
        font-size: 16px !important; /* فونت خوانا */
        border-radius: 15px !important;
        padding: 15px !important;
        box-sizing: border-box; /* محاسبه صحیح پدینگ و بوردر */
    }

    /* 6. لیبل‌های شناور (Floating Labels) */
    /* اصلاح لیبل‌ها که در کد اصلی عرض ثابت داشتند */
    .form-floating label,
    .labels1 {
        width: auto !important;
        margin: 0 !important;
        font-size: 15px !important;
        padding-right: 15px !important; /* فاصله از چپ */
        color: #666;
    }

    /* 7. بخش رمز عبور و آیکون چشم */
    .password-container {
        width: 100% !important; /* تمام عرض */
        margin-bottom: 25px;
    }

    .toggle-password {
        left: 10px !important; /* تنظیم موقعیت آیکون چشم */
        right: auto !important;
        top: 45% !important;
        transform: translateY(-50%);
        padding: 5px; /* فضای کلیک بیشتر */
    }

    /* 8. دکمه ورود و لینک ثبت نام */
    .d-grid.gap-2.col-6.mx-auto {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
    }

    .btn1 {
        width: 100% !important;
        height: 50px;
        font-size: 18px !important;
        border-radius: 15px !important;
    }

    /* استایل لینک ثبت نام */
    .icon-link {
        font-size: 16px;
        text-decoration: none;
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
        padding: 10px;
        border-radius: 10px;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .icon-link:hover {
        background: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    /* 9. پیام‌های خطا و موفقیت */
    .alert {
        font-size: 14px !important;
        padding: 10px;
        margin-top: 10px;
        width: 100%;
        border-radius: 10px;
    }

    /* 10. مودال هشدار دستگاه‌ها */
    /* اگر مودال باز شد، باید در موبایل خوب دیده شود */
    .modal-dialog {
        max-width: 90% !important;
        margin: 1.75rem auto !important;
    }
    
    .modal-content {
        border-radius: 15px;
        padding: 15px;
    }
    
    .modal-title {
        font-size: 18px;
        text-align: center;
    }
    
    .modal-body {
        font-size: 14px;
        text-align: center;
        line-height: 1.6;
    }
    
    .modal-footer {
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
}

/* تنظیمات خاص برای صفحه‌نمایش‌های بسیار کوچک (مثل آیفون SE نسل قدیم) */
@media (max-width: 320px) {
    .titr2 {
        font-size: 20px !important;
    }
    
    .img2 {
        width: 100px !important;
    }
}


/* =========================================
   اصلاح فرم‌های شناور (Floating Labels) برای RTL
   ========================================= */

/* 1. تنظیم جهت کلی فرم‌ها */
.form-floating {
    direction: rtl;
    text-align: right;
}

/* 2. تنظیم لیبل‌ها به سمت راست */
.form-floating > label {
    right: 0 !important; /* لیبل برود سمت راست */
    left: auto !important;
    padding-right: 15px !important; /* فاصله از لبه راست */
    padding-left: 0 !important;
    transform-origin: right center; /* نقطه شروع حرکت به راست باشد */
    color: #666;
}

/* 3. تنظیم اینپوت‌ها برای جلوگیری از روی هم افتادن متن با آیکون */
.form-floating > .form-control {
    padding-right: 15px !important; /* فاصله از لیبل در راست */
    padding-left: 45px !important; /* فضای خالی برای آیکون چشم در چپ */
    height: 55px !important; /* ارتفاع مناسب برای موبایل */
    border-radius: 25px !important;
}

/* 4. تنظیم آیکون چشم در سمت چپ */
.toggle-password {
    left: 10px !important; /* آیکون برود سمت چپ */
    right: auto !important;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0;
    border: none;
    background: transparent;
}

/* 5. اصلاح خاص برای موبایل */
@media (max-width: 480px) {
    .form-floating > label {
        font-size: 15px !important;
        right: 15px !important;
    }
    
    .form-floating > .form-control {
        padding-left: 45px !important; /* اطمینان از فضای آیکون */
        padding-right: 15px !important;
    }
}




/* =========================================
   اصلاح نهایی فرم‌های شناور (Floating Labels)
   ========================================= */

/* 1. تنظیم جهت کلی فرم‌ها */
.form-floating {
    direction: rtl;
    text-align: right;
}

/* 2. تنظیم حالت عادی لیبل (وسط و راست) */
.form-floating > label {
    right: 0 !important;
    left: auto !important;
    padding-right: 15px !important;
    padding-left: 0 !important;
    transform-origin: right center;
    color: #666;
    transition: all 0.2s ease; /* انیمیشن نرم */
}

/* 3. تنظیم حالت فعال (وقتی کاربر تایپ می‌کند یا کلیک می‌کند) */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    /* 
       translateY(-140%): حرکت به بالا
       scale(0.8): کوچک شدن فونت
       translateX(-10px): حرکت به سمت چپ (عدد منفی یعنی چپ در حالت RTL)
    */
    transform: translateY(-20%) scale(0.8) translateX(-10px) !important;
    color: #2e8a56; /* رنگ سبز برند شما */
    right: 10px !important; /* فاصله کم از راست */
}

/* 4. تنظیم اینپوت‌ها برای جلوگیری از روی هم افتادن متن با آیکون */
.form-floating > .form-control {
    padding-right: 15px !important; /* فاصله از لیبل در راست */
    padding-left: 45px !important; /* فضای خالی برای آیکون چشم در چپ */
    height: 55px !important;
    border-radius: 25px !important;
}

/* 5. تنظیم آیکون چشم در سمت چپ */
.toggle-password {
    left: 10px !important; /* آیکون برود سمت چپ */
    right: auto !important;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0;
    border: none;
    background: transparent;
}

/* 6. اصلاح خاص برای موبایل */
@media (max-width: 480px) {
    .form-floating > label {
        font-size: 15px !important;
    }
    
    .form-floating > .form-control {
        padding-left: 45px !important; /* اطمینان از فضای آیکون */
        padding-right: 15px !important;
    }
}