/* =====================
   Button Styles
===================== */
.buttons {
  width: 50%;
  max-width: 500px;
  display: flex;
  justify-content: space-between;
  gap: -4px;
  margin: 0 auto; /* برای وسط‌چین شدن */
  
}


.primary-button {
font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--Buttons-Gaps-Gap-Small, 4px);

  padding: var(--Buttons-Paddings-PD-Small, 8px) 
           var(--Buttons-Paddings-PD-Medium, 16px);

  flex: 1 0 0;

  border-radius: 8px;
  border: 1px solid transparent; /* placeholder, gradient below */

  background:  rgba(33, 116, 253, 1);

  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  /* Border gradient */
  /*border-image: linear-gradient(
    180deg, 
    rgba(25, 82, 230, 1), 
    rgba(27, 90, 194, 1)
  ) 1;

  /* Shadows */
  box-shadow: 
    0 2px 5px 0 rgba(20, 88, 201, 0.17), /* main shadow */
    0 -2px 0.3px 0 rgba(14, 56, 125, 0.18) inset, /* inner shadow top */
    0 2px 1px 0 rgba(255, 255, 255, 0.22) inset;  /* inner shadow bottom */

  color: #fff;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.primary-button:hover {
  font-weight: 400;
}