/*
IMPORTANT: all css class names MUST start with a 'letter' not with a 'digit'

For length units (e.g., rem, em, vh, vw.), you can use .5rem instead of 0.5rem for brevity.
For pixel values (px), it's more conventional and clear to use 0.5px rather than .5px.
*/

/* w-100 is a bootstrap class means width: 100%!important; */

/* dont create a class called .hide-on-mobile, instead assign these bootstrap classes
to that element: d-none d-md-block or d-none d-lg-block
@media (max-width: 768px) { .hide-on-mobile { display:none; } } */

/* ********** codeigniter debug bar ********** */
#debug-bar { direction:ltr}

body, html { overflow-x: hidden; /* Hide horizontal scrollbar for the entire page */ }

/* surely write below web-safe fonts (Tahoma, Arial), otherwise if font cant be loaded
website load will take long time  */
body, h1, h2, h3, h4, h5, h6, a, li {
   font-family: vazir-regular, Tahoma, sans-serif !important;
    /* text-transform: capitalize; */
    color: #303030;  /* الزامی otherwise inherites the color from bootstrap, not from body  */
}

body {
  direction: rtl;
  background: #f5f5f5;
  font-size: 1rem;  /* 16px */
}

/* ********** font-size ********** */
h1 {font-size: 1.375rem} /* 22px */
h2 {font-size: 1.125rem} /* 20px */
h3 {font-size: 1.063rem} /* 18px */
h4 {font-size: 1rem}  /* 16px */
h5 {font-size: 1rem} /* 16px */
h6 {font-size: .875rem}  /* 14px */

p {line-height: 1.8}

/* ********** Links ( applies on all <a> </a> links) ********** */
a {
  border-radius: 3px;
  text-decoration: none !important;
  background-color: transparent;
}

.cursor-pointer { cursor: pointer; }

/* ********** for pulsating radiation effect  ********** */
.dot-red { display: inline-block; width: 10px; height: 10px; border:1px solid #ec406a; border-radius: 50%; background-color: #ec406a;}

.dot-blue { display: inline-block; width: 10px; height: 10px; border:1px solid #007bff; border-radius: 50%; background-color: #007bff;}

.dot-white { display: inline-block; width: 10px; height: 10px; border:1px solid #fff; border-radius: 50%; background-color: #fff; }

/* ********** preloader ********** */
.preloader {
  background-color: #fff;
  background-image: url("/img/loader/preloader.svg");
  /* background-image: url("../img/other/loader.svg"); حذف */
  background-position: center center;
  background-repeat: no-repeat;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99999;
}

/* ********** line height ********** */
.lh-1-2  {line-height: 1.2 !important}
.lh-1-3  {line-height: 1.3 !important}
.lh-1-4  {line-height: 1.4 !important}
.lh-1-5  {line-height: 1.5 !important}
.lh-1-6  {line-height: 1.6 !important}
.lh-1-7  {line-height: 1.7 !important}
.lh-1-8  {line-height: 1.8 !important}
.lh-1-9  {line-height: 1.9 !important}

.lh-2    {line-height: 2 !important}
.lh-2-2  {line-height: 2.2 !important}
.lh-2-3  {line-height: 2.3 !important}
.lh-2-4  {line-height: 2.4 !important}
.lh-2-5  {line-height: 2.5 !important}
.lh-2-6  {line-height: 2.6 !important}
.lh-2-7  {line-height: 2.7 !important}
.lh-2-8  {line-height: 2.8 !important}
.lh-2-9  {line-height: 2.9 !important}
.lh-3    {line-height: 3 !important}
.lh-3-2  {line-height: 3.2 !important}
.lh-3-5  {line-height: 3.5 !important}


.dotted-white-line {
  border-bottom: 2px dotted white; /* Adjust the color and thickness as needed */
  width: 100%; /* Ensure the line spans the full width */
  padding-bottom: 5px; /* Add some space between the text and the line */
}

/* ********** html ********** */
html {
  position: relative;
  background: #fff;

  /* to smooth in focus like payment gateway fields */
  scroll-behavior: smooth;

  /* to prevent auto font size changing by mobile browsers
  prevents mobile browser (except for from font boosting (text inflation) (auto increase (scale) font size of some html elements such as label element in input fields).
  (هشدار: chrome on android ignores these settings !
  for example chrome android shows placeholder in textarea field, bigger than placeholders
  inside other input fields,

  althoght i have assigned font-size: .875rem (14px) !important;
  to all label elements in this styles-base.css file, but chrome andriod doesnt follow (observe)
  )

  text-size-adjust: none --> Disables the browser's inflation algorithm.
  )
  */
  -moz-text-size-adjust: none !important;   /* Firefox 18- */
  -webkit-text-size-adjust: none !important;   /* Chrome/Opera/Safari */
  -ms-text-size-adjust: none !important;    /* IE 10+ */
  text-size-adjust: none !important;    /* Firefox 19- */
}
/*
@@@@@@@  هشدار مهم مهم مهم  @@@@@@@
i have assigned 'd-inline' class to <label> element & this caused in chrome and android browser, the text inside lable element become larger than other label elements in that same form
*/

/* ********** direction $ text-align ********** */
.dir-ltr { direction: ltr !important}
.dir-rtl { direction: rtl !important}

.text-align-justify {
  text-align: justify !important;
}

@media (max-width: 767px) {
 .mob-text-align-justify {
  text-align: justify !important;
 }
}

/* ********** tables ********** */
/* apply following codes to all cells of table in all pages & posts */

/* make all cells of table text-align center  */
table td, table thead  { text-align: center}

/* ********** Lists  ********** */
/*
padding:0 --->  by default 1 bad 40px padding-inline-start (padding-right)
is added to all ul lists by user agent stylesheet.
padding:0 overrites that
*/

/* list-style:none ---> here we assign list-style:none to all lists instead of
assigning bootstrap "list-unstyled" class to many ul lists */
ul {
  list-style:none;
  padding:0;
  flex-wrap: wrap
}
ul:last-child { margin: 0}

ol {line-height: 3}


/* ********** borders  ********** */
.border-none { border: none; }
.border-ccc    { border:1px solid #ccc; } /* gray */
.border-c6c6c6 { border: 1px solid #c6c6c6; } /* gray */
.border-808080 { border: 1px solid #808080; } /* gray */
.border-666    { border:1px solid #666; } /* gray */
.border-ed9e75 { border: 1px solid #ed9e75; } /* lite orange */
.border-ff824d { border: 1px solid #ff824d; } /* lite orange */
.border-ff9119 { border: 1px solid #ff9119; } /* orange */
.border-ff6633 { border: 1px solid #ff6633; } /* orange */
.border-ec406a { border: 1px solid #ec406a; } /* red */
.border-00c395 { border: 1px solid #00c395; } /* green */
.border-dashed-box { border:1px dashed #999; }
/* for accordion items */
.border-c6c6c6 { border-color: #c6c6c6 !important; }
.border-b3b3b3 { border-color: #b3b3b3 !important; }
.my-box-shadow { box-shadow: 0 0 10px #e0e0e0; }

/* رنگ حاشیه لبه کادر زرد سایت صدنما */
.border-ffeeba { border: 1px solid #ffeeba; }
.border-ffecb3 { border: 1px solid #ffecb3; }
.border-ffe699 { border: 1px solid #ffe699; }
.border-for-boxes-ad-cat-page { border: 1px solid #808080 !important; }

/* ********** z-index ********** */
/* The default value for `z-index` in HTML elements is **`auto`**. This means:
- Elements are stacked in the order they appear in the DOM (last in, topmost by default).
- Elements with `position` set to `relative`, `absolute`, `fixed`, or `sticky` can create a new stacking context, but their `z-index` remains `auto` unless explicitly set.

In short, `z-index: auto` does not assign a specific stacking level, and elements are layered based on their natural order in the document.
*/
.z-index-1 {z-index:1 !important;}
.z-index-2 {z-index:2 !important;}
.z-index-3 {z-index:3 !important;}
.z-index-4 {z-index:4 !important;}
.z-index-5 {z-index:5 !important;}
.z-index-6 {z-index:6 !important;}
.z-index-7 {z-index:7 !important;}
.z-index-8 {z-index:8 !important;}
.z-index-9 {z-index:9 !important;}
.z-index-10 { z-index: 10 !important; }
.z-index-11 { z-index: 11 !important; }
.z-index-12 { z-index: 12 !important; }
.z-index-13 { z-index: 13 !important; }
.z-index-14 { z-index: 14 !important; }
.z-index-15 { z-index: 15 !important; }

.z-index-20 { z-index: 20 !important; }
.z-index-30 { z-index: 30 !important; }
.z-index-40 { z-index: 40 !important; }
.z-index-50 { z-index: 50 !important; }
.z-index-60 { z-index: 60 !important; }
.z-index-70 { z-index: 70 !important; }
.z-index-80 { z-index: 80 !important; }
.z-index-90 { z-index: 90 !important; }
.z-index-100 { z-index: 100 !important; }

/* ********** opacity ********** */
/* via js, we define timeoutt so that after 3 seconds after was set to appear,
this "opacity0" class be assigned to that element which must be disappeared  */
.opacity0 {opacity:0 !important}
  /* display: initial or block or inline block */
/* this is instead of display:none */
  /* WARNING: don't put !important otherwise toast will not work & opacity cannot change from 0 to 1 */

/* via js we create event listener so that after click, we assign
  this "opacity1" class to element which must be appear  */
.opacity1 {opacity:1 !important}
/* WARNING: don't put !important otherwise toast will not work & opacity cannot change from 1 to 0 */

/* !!!! dont use, will cause significant (sever) performance impact */
/* .transition-all {transition: all} */

.transition-opacity-0-5 {transition: opacity 0.5s ease;}
.transition-opacity-0-6 {transition: opacity 0.6s ease;}
.transition-opacity-0-7 {transition: opacity 0.7s ease;}
.transition-opacity-0-8 {transition: opacity 0.8s ease;}
.transition-opacity-0-9 {transition: opacity 0.9s ease;}
.transition-opacity-0-1 {transition: opacity 0.1s ease;}

/* ********** others  ********** */
.clear { clear: both}

.hover-efefef:hover { background-color: #efefef !important; }

@media (max-width: 576px) {
  .break-text-at-max-576px {
   display:inline-block !important;
 }
}

/* ********** rotation styles ********** */
.icon-flipped {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}

.rotate-90 {
  /* doesnt work for bootstrap icons which are svg based */
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}

.rotate-270 {
    /* doesnt work for bootstrap icons which are svg based */
   transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -webkit-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
}

/* ****************************************** */

/* below are for background-image */
.bg-cover {background-size: cover;}
.bg-position-center {background-position: center;}
.bg-no-repeat {background-repeat: no-repeat;}

.bg-contain {background-size: contain;}
@media (min-width: 768px) { .bg-md-contain { background-size: contain; } }
@media (min-width: 768px) { .bg-md-cover { background-size: cover; } }


/* ********** accordion ********** */
/* بسیار مهم و کاربردی */
.accordion { --bs-accordion-btn-focus-box-shadow:none !important; }

.accordion button { color: #484c51 !important; background-color: #eee !important; }

/* add some space betwen each accordion title and nearby arrow */
.accordion-button::after { margin-right: 10px; }