/* Fade-in animation for any element you want to animate */
.fade-in {
    opacity: 0;
    animation: fadeInAnimation 500ms ease-in-out forwards;
  }
  
  @keyframes fadeInAnimation {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes noticeScroll {
    0% {
        transform: translateX(-110%); /* Start from the left */
    }
    100% {
        transform: translateX(110%); /* Move to the left fully */
    }
}

/*body{
    direction: rtl;
  }
  
  .price-container *{
    font-family: "Yekan Bakh FaNum";
    font-size: 16px;
    font-weight: 600;
  }*/
  
  .price-container{
    /*width: 300px;
    height: 90px;*/
    display: flex;
    flex-direction: column;
  }
  
  .price-notice-title{
    height: auto;
    color: #d4af37;
  }
  
  .price-details{
    display: flex;
    flex-direction: row-reverse;
    align-items: end;
    flex: auto;
    border-bottom: 1px solid #111111;
    padding-bottom: 5px;
    white-space: nowrap; 
    overflow: hidden; 
    width: 100%; 
    box-sizing: border-box; 
  }

  .price-label{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  
  .price-notice{
    flex: auto;
    writing-mode: horizontal-tb;
    transform: rotate(0);
    animation: noticeScroll 10s linear infinite;
  }

  .price-amount-container{
    align-items: end;
    display: flex;
    flex-direction: column;
  }
  
  .old-price-amount{
    direction: ltr;
    position: relative;
    /*display: list-item;*/
    flex: none;
    width: fit-content;
    padding-left: 3px;
    padding-right: 3px;
    color: #D4AF37;
    font-family: "Yekan Bakh FaNum";
    text-decoration: none;
  }
  
/* Old price line animation: Initially hidden using a scaleX transform */
.old-price-amount::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 36%;
    border-bottom: 1px solid #D4AF37;
    border-radius: 10px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1000ms ease;
  }

  /* When .animate-line is added, the pseudo-element scales to full width */
.old-price-amount.animate-line::after {
    transform: scaleX(1);
  }
  
  .price-amount{
    font-size: 48px;
    line-height: 30px;
  }