@font-face {
  font-family: 'myfont';
  src: url('../../fonts/Sahel-Black-FD.eot');
  src: url('../../fonts/Sahel-Black-FD.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Sahel-Black-FD.woff') format('woff'),
       url('../../fonts/Sahel-Black-FD.ttf')  format('truetype'),
}

@font-face {
  font-family: 'myfont2';
  src: url('../../fonts/Sahel-Bold-FD.eot');
  src: url('../../fonts/Sahel-Bold-FD.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Sahel-Bold-FD.woff') format('woff'),
       url('../../fonts/Sahel-Bold-FD.ttf')  format('truetype'),
}

@font-face {
  font-family: 'myfont3';
  src: url('../../fonts/Sahel-FD.eot');
  src: url('../../fonts/Sahel-FD.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Sahel-FD.woff') format('woff'),
       url('../../fonts/Sahel-FD.ttf')  format('truetype'),
}

* {
  font-family: 'myfont3' , sans-serif;
  font-feature-settings: 'lnum' 1;
  font-weight: 400;
  direction: rtl;
  margin: 0;
  padding: 0;
  font-style: normal;
  font-size: 15px;
  scrollbar-width: none !important; 
}

/* Chrome, Safari, Edge */
@media (max-width: 700px) {
  * {
    scrollbar-width: none;
  }

  *::-webkit-scrollbar {
    display: none;
  }
}

.main {
  overflow-y: scroll;
  scrollbar-width: 0 !important;
}

.main::-webkit-scrollbar { display: none !important; }

.no-scroll-main{
  overflow: hidden !important;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  color: #202020;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

.form-container h2 {
  color: #89817d;
}

.form-container input {
  width: 80%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  color: #202020;
  outline: none;
  transition: background 0.3s ease;
}

#formFields{
  width: 100%;
}

button {
  height: 56px;
  background: #ad9a5a;
  color: #1a2430;
  padding: 15px 0px !important;
  border: none;
  border-radius: 8px;
  padding: 10px 25px;
  cursor: pointer;
  font-size: 15px;
  width: 80%;
  transition: 0.3s;
  display: flex;
  justify-content: center !important;
}

button:hover {
  transform: scale(1.05);
}

.remember {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-right: 10px;
  gap: 8px;
  font-size: 14px;
  color: #89817d;
  margin-top: 15px !important;
  margin-bottom: 20px !important;
}

.link {
  font-size: 13px;
  margin-top: 20px !important;
  color: #b2a065;
}

.link a {
  color: #b2a065;
  text-decoration: none;
}

.link a:hover {
  color: #cfb355;
}

.hidden {
  display: none !important;
}

/* ===== فرم داینامیک ===== */
.form-container input {
  width: 100%;
  padding: 12px !important;
  margin: 5px 0 !important;
  border-radius: 10px;
  border: 1px solid #b2a065;
  background-color: #ffffff00;
  color: #202020;
  font-size: 15px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.form-container input:focus {
  outline: none;
  border-color: #b2a065;
  box-shadow: 0 0 20px #b2a065;
  background-color: rgb(255, 255, 255)
}

.form-container button {
  width: 100%;
  padding: 12px 15px;
  margin-top: 10px !important;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
}

.form-container .link {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
}
.form-container .link a {
  text-decoration: none;
  transition: 0.3s;
}

/* ===== سوئیچ کشویی مرا به خاطر بسپار ===== */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #dddddd;
  transition: 0.4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.switch input:checked + .slider {
  background-color: #b2a065;
}
.switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* ===== OTP ۵ رقمی ===== */
.otp-container {
  text-align: center;
  margin-top: 15px;
}
.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}
.otp-input {
  width: 45px;
  height: 50px;
  text-align: center;
  font-size: 24px;
  border: 2px solid #555;
  border-radius: 10px;
  background-color: #ffffff;
  color: #ccc;
  transition: all 0.3s ease;
}
.otp-input:focus {
  outline: none;
  border-color: #b2a065;
  box-shadow: 0 0 6px #b2a065;
}

/* ===== فرم تغییر رمز ===== */
#newPassword, #confirmPassword {
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid #b2a065;
  background-color: #fff;
  color: #ffffff;
  font-size: 15px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
#newPassword:focus, #confirmPassword:focus {
  outline: none;
  border-color: #b2a065;
  box-shadow: 0 0 6px #b2a065;
  background-color: #0000;
}

#sendRegisterCode:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loader {
  width: 20px;
  height: 20px;
  border: 3px solid #000000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none;
  margin: auto;
}

.loading .btn-text {
  display: none !important;
  cursor: not-allowed !important;
}

.loading .loader {
  display: block !important;
  cursor: not-allowed !important;
}

.loading{
  cursor: not-allowed !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-text{
  color: #1a2430;
  margin-top: 1px !important;
}

.otp-inputs input{
  padding: 0px !important;
  height: 70px !important;
  font-size: 30px !important;
  font-weight: 700 !important;
}

.otp-inputs{
  direction: ltr !important;
}

.off{
  color: rgb(151, 151, 151) !important;
}

.splash {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 1s ease;
}

.logo {
    width: 200px;
    height: 200px;
    z-index: 10000;
    background-color: #ffffff;
    border-radius: 30%;
    box-shadow: 0 0 100px #2b2103;
    animation: pulseLoop 1s ease-in-out infinite;
    padding: 30px !important;
}

.splash.explode {
    animation: splashFade 1s 0.8s forwards;
}

@keyframes pulseLoop {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(0.97);
    }
    75% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes splashFade {
    to {
    opacity: 0;
    visibility: hidden;
    }
}


.main-content {
    opacity: 0;
    transition: opacity 1.5s ease;
    text-align: center;
    padding: 40px;
}

.main-content.show {
    opacity: 1;
}

.logo-img {
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.2s ease;
}

.div-load-login {
  position: relative;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.div-back-form {
    background-color: #ffffff;
    border-radius: 17px;
    max-width: 400px;
    width: 80%;
    z-index: 9900;
    position: relative;
    padding: 15px;
    box-shadow: 0 12px 40px rgba(42, 36, 20, 0.06);
    animation: fadeIn 1s ease;
    display: none;
    padding-top: 45px;
    padding-bottom: 45px;
    border: 1px solid #e9e6de;

    /* انیمیشن نرم تغییر حالت */
    transition:
        width 0.35s ease,
        height 0.5s ease,
        border-radius 2s ease,
        background-color 2s ease,
        border-color 0.5s ease,
        box-shadow 2s ease,
        padding 0.5s ease;
}

.div-back-form.login {
    width: 250px !important;
    height: 250px !important;
    padding: 0px !important;
    border-radius: 10000px !important;
    border: 1px solid #3F8A61;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* محتوای فرم محو شود */

.div-back-form.login > * {
    opacity: 0;
    transform: scale(0.5);

    pointer-events: none;
}

.success-animation {
    position: relative;

    width: 200px;
    height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;

    animation: successAppear 0.6s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


/* =========================================
   TICK CIRCLE
========================================= */

.tick-circle {
    position: relative;

    width: 100px;
    height: 100px;

    z-index: 10;
}

.tick-circle svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tick-circle-bg {
    fill: none;

    stroke: #3F8A61;
    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-dasharray: 151;
    stroke-dashoffset: 151;

    animation:
        circleDraw 0.6s
        cubic-bezier(0.65, 0, 0.35, 1)
        0.15s forwards;
}

.tick-path {
    fill: none;

    stroke: #3F8A61;
    stroke-width: 3.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 40;
    stroke-dashoffset: 40;

    animation:
        tickDraw 0.45s
        cubic-bezier(0.65, 0, 0.35, 1)
        0.65s forwards;
}


/* =========================================
   ORBITS
========================================= */

.orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 2px solid rgba(63, 138, 97, 0.35);

    border-radius: 50%;

    transform-origin: center;

    pointer-events: none;
}


/* =========================================
   ORBIT 1
========================================= */

.orbit-1 {
    width: 178px;
    height: 178px;

    margin-left: -89px;
    margin-top: -89px;

    border-top-color: transparent;
    border-right-color: transparent;

    animation:
        orbitRotate 1.8s linear infinite;
}


/* =========================================
   ORBIT 2
========================================= */

.orbit-2 {
    width: 192px;
    height: 192px;

    margin-left: -96px;
    margin-top: -96px;

    border-bottom-color: transparent;
    border-left-color: transparent;

    animation:
        orbitRotateReverse 2.4s linear infinite;
}


/* =========================================
   ORBIT 3
========================================= */

.orbit-3 {
    width: 208px;
    height: 208px;

    margin-left: -104px;
    margin-top: -104px;

    border-top-color: transparent;
    border-left-color: transparent;

    opacity: 0.5;

    animation:
        orbitRotate 3s linear infinite;
}


/* =========================================
   KEYFRAMES
========================================= */

@keyframes successAppear {

    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    60% {
        opacity: 1;
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes circleDraw {

    to {
        stroke-dashoffset: 0;
    }
}


@keyframes tickDraw {

    to {
        stroke-dashoffset: 0;
    }
}


@keyframes orbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes orbitRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.logo-head-login{
    width: 100%;
    text-align: center;
}

.logo-head-login > img{
    width: 300px;
}

.div-baner-login{
    display: none;
    width: 350px;
    height: 550px;
    padding: 15px;
    background-color: #fff;
    border-radius: 20px;
    z-index: 9800;
    margin-right: -4em;
    box-shadow: 0px 0px 50px #00000040;
    overflow: hidden;
    animation: fadeIn 1s ease;
}

.img-baner{
  width: 100%;
  border-radius: 15px;
}

.btnsenddifulte2{
  background-color: #00000000;
}

.line {
  position: absolute;
  height: 1px;
  background-color: #b2a065;
  opacity: 0.7;
}

#timesend{
  color:rgb(151, 151, 151) !important;
}

/* ظاهر فیلدها در همه حالت‌ها */
input[type="password"],
input[type="text"],
input[type="tel"] {
    background-color: #ffffff !important;
    color: #202020 !important;
    border: 1px solid #b8a24d;
}

/* وقتی روی فیلد کلیک می‌شود */
input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus {
    background-color: #fff !important;
    color: #202020 !important;
    outline: none;
}

/* جلوگیری از سفید شدن توسط Chrome Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #202020 !important;
    -webkit-box-shadow: 0 0 0 1000px #ffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    background-color: #202020 !important;
    transition: background-color 9999s ease-in-out 0s;
}