@font-face {
  font-family: ibm;
  src: url('../fonts/IBMPlexSansArabic-Regular.ttf');
  font-display: swap;
}

@font-face {
  font-family: naskh;
  src: url('../fonts/Noto_Naskh_Arabic/NotoNaskhArabic-VariableFont_wght.ttf');
  font-display: swap;
}


@font-face {
  font-family: JannaFont;
  src: url("../fonts/janna/bahij-janna-regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: janna_Bold;
  src: url("../fonts/janna/bahij-janna-bold.ttf");
  font-display: swap;
}


@font-face {
  font-family: Noto_Sans_Arabic;
  src: url('../fonts/Noto_Sans_Arabic/static/NotoSansArabic-Regular.ttf');
  font-display: swap;
}

@font-face {
  font-family: helvetica-b;
  src: url('../fonts/Bahij\ Helvetica\ Neue-Bold.ttf');
  font-display: swap;
}

@font-face {
  font-family: helvetica-r;
  src: url('../fonts/Bahij\ Helvetica\ Neue-Roman.ttf');
  font-display: swap;
}

@font-face {
  font-family: helvetica;
  src: url('../fonts/Bahij\ Helvetica\ Neue-Roman.ttf');
  font-display: swap;
}

@font-face {
  font-family: bahnschrift-l ;
  src: url('../fonts/Bahnschrift/BAHNSCHRIFT\ 3.TTF');
  font-display: swap;
}




:root 
{
                
   /* --bg-primary: hsl(190, 23%, 5%);
   --bg-secondary: hsl(190, 22%, 7%);
   --bg-card: hsl(190, 17%, 8%);
   --border-color: hsl(190, 16%, 20%);
   --text-primary: hsl(190, 39%, 94%);    
   --text-secondary: hsl(190, 11%, 65%);
   --accent: hsl(25, 95%, 53%);
   --accent-hover: hsl(25, 98%, 61%);
   --hero-bg: linear-gradient(135deg, hsl(190, 17%, 14%), hsla(190, 17%, 10%, 0));
   --input-bg: hsl(190, 23%, 5%);
   --white : #fff; */

   /* #f97415 */
   /* #fff */
   /* #1c292c; */


   --bg-primary: hsl(190, 23%, 4%);
   --bg-secondary: hsl(190, 22%, 10%);
   --bg-card: #111718;
   --border-color: hsl(190, 16%, 20%);
   --text-primary: hsl(190, 39%, 94%);    
   --text-secondary: hsl(190, 11%, 65%);
   --accent: #f97415;
   --accent-hover: hsl(25, 98%, 61%);
   --accent-tr: hsla(24, 100%, 61%, 0.092);
   --hero-bg: linear-gradient(135deg, hsl(190, 17%, 14%), hsla(190, 17%, 10%, 0));
   --input-bg: hsl(190, 25%, 9%);
   
   --white : #fff;
   --gold: #ffbd17;
   --note-color: #b57030;
   --red-primary: hsl(0, 75%, 51%);
   --red-secondary: hsl(0, 75%, 61%);
   --red-tr: hsla(0, 99%, 51%, 0.095);
   --green: hsl(120, 57%, 55%);
   --green-hover: hsl(120, 57%, 41%);
   --green-tr: hsla(120, 57%, 41%, 0.098);
   --blue-primary: hsl(200, 100%, 39%);
   --blue-secondary: hsl(200, 100%, 29%);





    /* --fs-xxlarger: 10rem;
    --fs-xlarger: 7rem;
    --fs-larger: 5rem;
    --fs-larger-2: 4.8rem;
    --fs-larger-3: 4.6rem;
    --fs-larger-4: 4.4rem;
    --fs-larger-5: 4.2rem;
    --fs-large: 4rem;
    --fs-large-1: 3.8rem;
    --fs-large-2: 3.6rem;
    --fs-large-22: 3.5rem;
    --fs-large-3: 3.4rem;
    --fs-large-4: 3.2rem;
    --fs-medium: 3rem;
    --fs-medium-2: 2.8rem;
    --fs-medium-3: 2.6rem;
    --fs-medium-4: 2.4rem;
    --fs-medium-5: 2rem;
    --fs-medium-55: 1.9rem;
    --fs-common : 1.8rem;
    --fs-common-2: 1.7rem;
    --fs-common-3: 1.6rem;
    --fs-common-4: 1.5rem;
    --fs-small: 1.4rem;
    --fs-small-2: 1.3rem;
    --fs-small-3: 1.2rem;
    --fs-small-4: 1.2rem;
    --fs-small-5: 1.1rem;
    --fs-small-6: 1rem;
    --fs-small-7: .8rem;
    --fs-small-8: .5rem; */

    --fs-xxlarger: 13rem;
    --fs-xlarger: 10rem;
    --fs-larger: 7rem;
    --fs-larger-2: 5.5rem;
    --fs-larger-3: 5.2rem;
    --fs-larger-4: 4.8rem;
    --fs-larger-5: 4.6rem;
    --fs-large: 4.4rem;
    --fs-large-2: 4.2rem;
    --fs-large-22: 4rem;
    --fs-large-3: 3.8rem;
    --fs-large-4: 3.6rem;
    --fs-medium: 3.4rem;
    --fs-medium-2: 3rem;
    --fs-medium-3: 2.8rem;
    --fs-medium-4: 2.6rem;
    --fs-medium-5: 2.4rem;
    --fs-medium-55: 2.2rem;
    --fs-common : 2.1rem;
    --fs-common-2: 1.9rem;
    --fs-common-3: 1.8rem;
    --fs-common-4: 1.7rem;
    --fs-small: 1.6rem;
    --fs-small-2: 1.5rem;
    --fs-small-3: 1.4rem;
    --fs-small-4: 1.3rem;
    --fs-small-5: 1.2rem;
    --fs-small-6: 1rem;
    --fs-small-7: .8rem;
    --fs-small-8: .5rem;
}

body.light-mode {

   --bg-primary: #f8fafc;
   --bg-secondary: #ffffff;
   --bg-card: #ffffff;
   --border-color: #e2e8f0;
   --text-primary: #2c2c2c;
   --text-secondary: #7b7b7b;
   --accent: #f97316;
   --accent-hover: #ea580c;
   --hero-bg: linear-gradient(135deg, #fef3c7, #fed7aa);
   --input-bg: #f1f5f9;

}

   

   /* --accent: hsl(190, 32%, 26%); */
   

/*? ===================================== */
/*? ============= GENERAL STYLES ========= */
/*? ===================================== */

* 
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* line-height: 1.7; */
    /* font-family: inherit; */
}

html[lang="en"] {
  font-size: 58%;

  /* font-family: Bahnschrift, 'Trebuchet MS', Tahoma, Geneva, Verdana, sans-serif ; */
 }


/* html[lang="fa"] *,
html[lang="ps"] *{
    font-family: helvetica, Noto_Sans_Arabic ,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 } */


* a {
  text-decoration: none;
}


*::selection
 {
    background-color: var(--accent);
    color: var(--white);
}

  /* ::-webkit-scrollbar 
  {
      height: 1rem;
      width: 1rem;
  }

  ::-webkit-scrollbar-track 
  {
      background-color: var(--border-color);
  }

  ::-webkit-scrollbar-thumb 
  {
      background-color: var(--accent);
      border-radius: 2px;
  } */



html {
  font-size: 62.5%;
  /* background-color: transparent; */
    scroll-behavior: smooth;

}


html[lang="en"] *{
  direction: ltr;
 }

html[lang="ps"] *{
  direction: rtl;
}
html[lang="fa"] *{
  direction: rtl;
}



 body {
     background: linear-gradient(135deg, var(--bg-primary), var(--bg-primary));
     line-height: 1.5;
     overflow-x: hidden;
     overflow-y: auto;
     transition: background 0.3s ease, color 0.3s ease;
    color: var(--text-secondary);
    position: relative;
    font-family: bahnschrift-l, helvetica-r, Noto_Sans_Arabic ,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;


}



/* =========== FOR CLICK ANIMATION ========== */



        .particle {
            position: fixed;
            pointer-events: none;
            opacity: 0;
            background-color: #ffc107;
            border-radius: 50%;
            z-index: 1001

        }

        .particle.animate {
            animation: particle-animation 1s ease-out forwards;
        }
        
        @keyframes particle-animation {
            0% {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(var(--tx), var(--ty)) scale(0);
            }
        }

/* =============================== */

.chat-tooltip {
    position: fixed;
    bottom: 3rem;
    right: 10rem;
    /* width: 50px; */
    /* height: 50px; */
    background-color: var(--bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    z-index: 1000;
    border-radius: .5rem;
    padding: 1.2rem 1.5rem;
    border: 2px solid var(--border-color);
}

.chat-tooltip img {
   height: 5rem;
   border: 2px solid var(--border-color);
   border-radius: .5rem;
}

.chat-tooltip input {
    background-color: transparent;
    border: none;
    color: var(--white);
    font-size: var(--fs-small);
    width: 100%;
    /* padding: 0 .5rem; */
    text-align: center;
}

.chat-tooltip input:focus{
  border: none;
  outline: none;
}

.chat-tooltip i {
    color: var(--text-secondary);
    font-size: var(--fs-common);
}
.chat-tooltip i:first-child {
    color: var(--accent);
}







        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(3rem);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate {
            animation: fadeInUp 0.5s ease-out;
        }


           @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(3rem);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }










        
.toast-messages {
    position: fixed;
    top: 10rem;
    border-radius: .5rem;
    color: var(--white);
    z-index: 1100;
    /* box-shadow: 0 10px 25px rgba(0,0,0,.2); */
    font-size: var(--fs-common-3);
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

html[lang="ps"] .toast-messages {
    /* right: 50rem; */
    right: 0rem;
}
html[lang="fa"] .toast-messages {
    right:0;
}
html[lang="en"] .toast-messages {
    left: 0;
}
.toast {
    padding: 1.5rem  1rem;
    border-radius: .5rem;
    color: var(--text-primary);
    font-size: var(--fs-common-4);
    display: flex;
    width: fit-content;
    gap: 1.2rem;
    transition: .6s;
}

    html[lang="ps"] .toast,
    html[lang="fa"] .toast {
      transform: translateX(calc( 100% + 4rem));
      padding-left: 4rem;

     }  

    html[lang="en"] .toast {
      transform: translateX(calc( -100% - 4rem));
      padding-right: 4rem;

    }



    html[lang="ps"] .toast.show ,
    html[lang="fa"] .toast.show {
        transform: translateX(-2rem);
     }

    html[lang="en"] .toast.show {
     transform: translateX(2rem);
     }
 

  .toast.success, .toast.error {
    background: var(--bg-card);
    border: 1px solid var(--border-color);

   }

  html[lang="ps"] .toast.success,
  html[lang="fa"] .toast.success {
    border-right: 3px solid var(--green);
    
   }

  html[lang="en"] .toast.success {
    border-left: 3px solid var(--green);
   }



 html[lang="ps"] .toast.error,
 html[lang="fa"] .toast.error {
    border-right: 3px solid var(--red-primary);
    background: var(--bg-card);
}
 html[lang="en"] .toast.error {
    border-left: 3px solid var(--red-primary);
    background: var(--bg-card);
}



/* .toast.success {
    box-shadow: 0 10px 25px rgba(9, 129, 25, 0.443);
   background: var(--green);
   }
.toast.error   {
    box-shadow: 0 10px 25px rgba(129, 9, 9, 0.498);
   background: var(--red);
} */



.toast-icon{
  /* padding: .4rem 1rem; */
  /* padding: 0 .8rem; */
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: var(--white); */
  font-size: var(--fs-small-3);
  border-radius: 50%;
  color: var(--white);
}

.toast-closer{
  padding: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: var(--white); */
  font-size: var(--fs-common-4);
  border-radius: .5rem;
  color: var(--text-primary);
  cursor: pointer;
  position: absolute;
  top: .2rem;
}

html[lang="ps"] .toast-closer,
html[lang="fa"] .toast-closer {
  left: .2rem;
}

html[lang="en"] .toast-closer {
  right: .2rem;
}

.toast-closer:Hover {
  color: var(--red-primary);
}


.toast-icon.error {
  background-color: var(--red-primary);
}

.toast-icon.success {
  background-color: var(--green-hover);
}


.en-p
{
    direction: ltr !important;
}

.flex{
    display: flex;
    gap: .8rem;
    align-items: center;
    /* justify-content: center; */
}