@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;
}

 /* --accent: light-dark(#059669, #34d399);
  --accent-hover: light-dark(#047857, #6ee7b7);
  --accent-tr: rgba(5,150,105,.12);
 */


   /* --accent: light-dark(#f4a261, #ffb68a);
  --accent-hover: light-dark(#e76f51, #ffc4a3);
  */

   

   :root {
  color-scheme: light dark;


  /* Semantic color tokens */

  --bg-primary: light-dark(#f8fafc, hsl(190, 23%, 4%));
  --bg-secondary: light-dark(#ffffff, hsl(190, 22%, 10%));
  --bg-card: light-dark(#ffffff, #111718);

  --border-color: light-dark(#e2e8f0, hsl(190, 16%, 20%));
  --border-color-tr: light-dark(#e2e8f070, #e2e8f01a);

  --text-primary: light-dark(#2c2c2c, hsl(190, 39%, 94%));
  --text-secondary: light-dark(#7b7b7b, hsl(190, 11%, 65%));

  --accent: light-dark(#f97316, #f97415);
  --accent-hover: light-dark(#ea580c, hsl(25, 98%, 61%));

  --accent-tr: hsla(24, 100%, 61%, 0.092);

  --hero-bg: light-dark(
    linear-gradient(135deg, #fef3c7, #fed7aa),
    linear-gradient(135deg, hsl(190, 17%, 14%), hsla(190, 17%, 10%, 0))
  );

  --input-bg: light-dark(#f1f5f9, hsl(190, 25%, 9%));


  /* Stable colors */

  --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);
  --green-tr-2: hsla(120, 57%, 41%, 0.196);

  --blue-primary: hsl(200, 100%, 39%);
  --blue-secondary: hsl(200, 100%, 29%);

  --dark-blue: light-dark(#00596c, hsl(191, 100%, 25%));


  /* Font sizes */

  --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;
}


/* Manual theme override */

:root[data-theme="light"] {

  color-scheme: light;

  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;

  --border-color: #e2e8f0;
  --border-color-tr: #e2e8f070;

  --text-primary: #2c2c2c;
  --text-secondary: #7b7b7b;

  --accent: #f97316;
  --accent-hover: #ea580c;

  --hero-bg: linear-gradient(135deg, #fef3c7, #fed7aa);
  --input-bg: #f1f5f9;

  --dark-blue: #00596c;
}



:root[data-theme="dark"] {

  color-scheme: dark;

  --bg-primary: hsl(190, 23%, 4%);
  --bg-secondary: hsl(190, 22%, 10%);
  --bg-card: #111718;

  --border-color: hsl(190, 16%, 20%);
  --border-color-tr: #e2e8f01a;

  --text-primary: hsl(190, 39%, 94%);
  --text-secondary: hsl(190, 11%, 65%);

  --accent: #f97415;
  --accent-hover: hsl(25, 98%, 61%);

  --hero-bg: linear-gradient(135deg, hsl(190, 17%, 14%), hsla(190, 17%, 10%, 0));

  --input-bg: hsl(190, 25%, 9%);

  --dark-blue: hsl(191, 100%, 25%);
}

/*? ===================================== */
/*? ============= 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; */
}