.order-info span{
  font-size: clamp(13px, 1.2vw, 1.6rem); /* 13px → 26px */
  font-weight: var(--fontWeight600);

}
.orderActionsMenu-btn{
  background-color: var(--colorShowAllLink);
  border-radius: 100px;
  color: var(--whiteColor);
}
.order-info .paid{
   width: fit-content;
   background-color: var(--colorBackgroundNewOrderPaid);
   color: var(--colorStatusPaid);
   padding: 4px 12px;
   border-radius: 100px;

}
.orderActionsMenu .orderinfo-btn,
.orderActionsMenu .serviceBillings-btn,
.orderActionsMenu .visitNotes-btn,
.orderActionsMenu .history-btn{
  width: calc((100% - 8px) / 2);
}
      
@media screen and (max-width:1290px) {
  .orderViewDetails-section.heading{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: start !important;
  }
}
@media screen and (max-width:990px){
    .orderViewDetails-section{
       width: 100%;
       inset-inline-start: 0;
       top: 180px;
    }
    .order-info .confirmOrder-btn{
       width: 50% !important; 
    }
}
@media screen and (min-width:770px){
   .orderViewDetails-section .orderActions-btn{
       display: block !important;
    }
}
@media screen and (max-width:770px){
   
    .orderViewDetails-section .heading{
      display: flex;
      flex-direction: column;
      align-items: start !important;
      gap: 16px !important;
    }
}

.order-info #orderInfoPrice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.order-info #orderInfoPrice .price-original {
  color: var(--colorHeaderOnOrder);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-size: clamp(12px, 1vw, 1.1rem);
  font-weight: var(--fontWeight500);
}

.order-info #orderInfoPrice .price-final {
  color: var(--colorHeadTableNewOrder);
  font-size: clamp(14px, 1.2vw, 1.4rem);
  font-weight: var(--fontWeight700);
}