/* common/header/css/buttons.css */
.btn-base {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-button);
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: var(--line-height-normal);
  border: none;
  outline: none;
  cursor: pointer;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-left: auto;
}

.mobile-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-grey);
  width: 100%;
}

.action-button {
  composes: btn-base;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  height: var(--btn-height-md);
  font-weight: var(--font-weight-semibold);
}

.mobile-actions__button {
  composes: btn-base;
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  flex: 1;
  font-weight: var(--font-weight-semibold);
}

.action-button.phone,
.mobile-actions__button--outline {
  background: transparent;
  border-radius: var(--border-radius-button);
  color: var(--color-black);
  text-decoration: none;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  height: auto;
}

.action-button.phone:hover,
.mobile-actions__button--outline:hover {
  background: transparent;
  border-color: transparent;
  color: var(--color-black);
  transform: none;
  text-decoration: none;
}

.action-button.primary,
.mobile-actions__button--primary {
  background: var(--color-black);
  color: var(--color-white);
  border: 2px solid var(--color-black);
}

.action-button.primary:hover,
.mobile-actions__button--primary:hover {
  background: var(--color-black);
  border-color: var(--color-black);
  opacity: 0.9;
  transform: translateY(-2px);
}

.action-button.phone::before,
.mobile-actions__button--primary::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-xs);
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.action-button.phone::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>');
}

.mobile-actions__button--primary::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>');
}

.cart-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-button);
  transition: all var(--transition-base);
}

.cart-button:hover {
  background: var(--color-grey);
}

.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--border-radius-button);
  width: 18px;
  height: 18px;
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
}

/* Специальные стили для кнопки телефона */
.action-button.phone {
  font-size: var(--btn-font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  text-decoration: none;
  border: none;
  background: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-button.phone:hover {
  background: var(--color-yellow);
  color: var(--color-black);
  transform: none;
  text-decoration: none;
}

@media (max-width: 991px) {
  .header-actions {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-button);
    flex-direction: column;
    align-items: flex-start;
  }

  .mobile-actions {
    flex-direction: column;
  }

  .action-button {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    height: var(--btn-height-sm);
  }

  .mobile-actions__button {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }

  .action-button.phone {
    font-size: var(--font-size-h3-mobile);
    background-color: var(--color-grey);
    
  }
}