/* CSS Document */
#product_titles {
  grid-column: 1 / -1;
  margin-bottom: 30px;
}

h1#product_title {
  margin: 0;
  font-size: 2.5rem;
  border: none;
  color: black;
}

.mainSpecs {
  list-style: none;
  padding: 0;
  line-height: 2rem;
}

.mainSpecs li::before {
  content: '\f0c8';
  font-weight: normal;
  font-family: "Font Awesome 5 Free";
  font-size: 70%;
  color: var(--color1);
  margin-left: 10px
}

#productOtherSpecs table {
  width: 100%;
  border-collapse: collapse;
}

#productOtherSpecs td {
  border: 1px solid gray;
  padding: 5px;
}

#productOtherSpecs td:first-child {
  font-weight: bold;
  width: 100px;
  white-space: nowrap;
}

#productDescription {
  text-align: justify;
}

#productDescription h2 {
  color: black;
  margin: 30px 0 20px;
}

#addToCart {
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: bold;
  color: var(--color1);
  gap: 5px;
  align-items: center;
}

.notInStock #product_price_caption,
.notInStock #product_price_value {
  display: none;
}


.productCopyright {
  display: inline-block;
  direction: ltr;
  unicode-bidi: bidi-override;
  margin-right: 10px;
  font-size: 70%;
  border: 1px solid var(--color2);
  padding: 0 5px;
  color: white;
  background: var(--color2);
  line-height: 1.5rem;
}

.productCopyright::before {
  content: '\24B8';
  display: inline-block;
  font-weight: normal;
  font-size: 150%;
  transform: translateY(10%);
}

#product_price_value {
  font-weight: bold;
  color: var(--color1);
  font-size: 130%
}

#product_price_value:after {
  content: var(--currency);
}

.product_special_box {
  grid-column: 1 / -1;
  background-color: var(--color1);
  padding: 5px;
  color: white;
  font-weight: bold;
}

.exist {
  color: var(--color4);
  font-weight: bold;
}

.discountedPrice {
  text-decoration: line-through;
  text-decoration-color: red;
}

.discountedPrice .dPrice {
  display: inline-block;
  text-decoration: none;
  color: red;
  margin-right: 5px;
}

.informMe {
  display: inline-block;
  color: var(--color2);
  cursor: pointer;
  font-size: 80%;
  /* padding: 5px 0px; */
  height: 2rem;
  margin-top: 5px;
}

.informMe.active {
  border: 1px solid var(--color2);
}

.informMe.sent {
  display: none
}

.informMe.sent~#informResult::before {
  display: inline;
  content: '(به محض موجود شدن این کالا به شما پیامک ارسال خواهد شد.)';
}

._en .informMe.sent~#informResult::before {
  display: inline;
  content: 'We will inform you by Email when this product exists!';
}

.informMe.sending~#informResult::before {
  content: ' ';
  display: inline-block;
  background-image: url('/general/images/loader1.gif');

  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  width: 1.5rem;
  height: 1.5rem;
}

.informMe label {
  padding: 0 5px;
  cursor: pointer;
  height: 100%;
}

.informMe input,
.informMe button {
  border-radius: 0;
  border: none;
  height: 100%;
  transition: max-width 1.5s, padding .2s;
  transition-timing-function: ease-in-out;
  max-width: 0;
  padding: 0;
  background-color: var(--darkGray);
}

.informMe input::placeholder {
  color: white;
  text-align: center;
}

.informMe span {
  display: none;
}

.informMe button {
  background-color: var(--color4);
  color: white;
}

.informMe.shown,
.informMe.active:hover {
  background-color: var(--color2);
  color: white;
}

.informMe.shown input,
.informMe.shown button {
  max-width: 800px;
  padding: 0 5px
}

.informMe.sent input,
.informMe.sent button,
.informMe.sent label {
  display: none;
}

.informMe.sent #result {
  display: inline;
}

#informResult {
  color: var(--color4);
  margin-right: 10px;
}

#informResult img {
  width: 1.5em;
  vertical-align: middle;
}

#showMedia {
  background-color: var(--color2);
  font-size: 1em;
  text-align: center;
  color: white;
  cursor: pointer;
  margin-bottom: .5em;
  margin-top: 1vw;
  padding-bottom: .5em;
  position: relative;
  max-width: 300px;
  margin: auto;
}

#showMedia:before {
  content: url('/general/images/cd-icon.svg');

  display: inline-block;
  width: 2vw;
  margin: .2vw;
  vertical-align: baseline;
  transform: translateY(.6vw);
}

#showMedia:after {
  display: block;
  content: '';
  border-top: 1px solid var(--darkGray);
  width: 100%;
  position: absolute;
  top: -1vw;
}

.swiper-wrapper {
  transition: transform 1000ms cubic-bezier(1, 0.01, 0.61, 1.01) 0ms;
  will-change: transform;
}


.swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.sampleSlideImageWrapper {
  padding: 1vw;
  min-width: 100%;
}

#sampleThumbs {
  height: 9vh;
  background-color: white;
  padding: 1.5vh 0;
}

#sampleThumbs .swiper-slide {
  width: auto;
  height: auto;
}

#sampleThumbs img {
  border: 1px solid var(--darkGray);
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

#mediaWrapper {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(142, 142, 142, 0.5);
  z-index: 30;
}

#mediaWrapper .popup-close {
  z-index: 31;
}

#mediaWrapper:target {
  display: block;
}

#media-container {
  background-color: white;
  width: 80vw;
  height: 80vh;
  margin: 10vh 10vw;
  border-radius: .5vw;
  padding: 1.5vw;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  direction: ltr;
}

.mediaThumb {
  width: 17.5vw;
  text-align: center;
  margin: .5vw;
  border: .1vw solid #999;
  border-radius: .5vw;
  background-color: var(--color1);
  position: relative;
}

.mediaThumb img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.mediaThumb audio {
  width: 20vw;
  height: 20px;
}

.mediaThumb h4 {
  color: white;
  background-color: var(--color1);
  font-size: .8rem;
  font-weight: normal;
  margin-bottom: 5px;
}


.audioState:before {
  content: '';
  background-image: url('/general/images/play.png');

  background-size: 20px 20px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 1px solid var(--color1);
}

.audioState:hover:before {
  border: 1px solid white;
}

audio.waiting~.audioState:before {
  background-image: url('/general/images/audioloader.gif');

}

audio.loaded~.audioState {
  display: none;
}

.eproduct {
  grid-column: 1 / -1;
  padding: 8px;
  border-radius: 9px;
  display: block;
  margin: 10px 0;
  justify-self: start;
  font-weight: bold;
  background: var(--color1);
  color: white;
}

#sampleThumbs .swiper-slide-active {
  border: 1px solid red;
}

div#samplesContainer {
  height: 88vh;
}

#productDetail .shopCartIcon {
  width: 50px;
  height: 50px;
}