/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 24 2026 | 17:36:42 */
/* ============================================
   03. КОМПОНЕНТЫ
   ============================================ */

/* ССЫЛКИ */


.tk-link-accent {
	color: var(--color-accent-1);
}
.tk-link-accent:hover {
	color: var(--color-accent-1-hover);
}
/*  */






/* --------------------------------------------
   КНОПКИ
   -------------------------------------------- *

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-6);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  gap: var(--spacing-2);
}

.btn--primary {
  background-color: var(--color-accent-1);
  color: #ffffff;
}

.btn--primary:hover {
  background-color: var(--color-accent-1-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background-color: var(--color-accent-2);
  color: #ffffff;
}

.btn--secondary:hover {
  background-color: var(--color-accent-2-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-accent-1);
  border: 2px solid var(--color-accent-1);
}

.btn--outline:hover {
  background-color: var(--color-accent-1);
  color: #ffffff;
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-contrast);
}

.btn--ghost:hover {
  background-color: var(--color-surface-2);
}

.btn--success {
  background-color: var(--color-success);
  color: #ffffff;
}

.btn--success:hover {
  background-color: var(--color-success-hover);
}

.btn--warning {
  background-color: var(--color-warning);
  color: #ffffff;
}

.btn--warning:hover {
  background-color: var(--color-warning-hover);
}

.btn--error {
  background-color: var(--color-error);
  color: #ffffff;
}

.btn--error:hover {
  background-color: var(--color-error-hover);
}

.btn--sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: var(--font-size-lg);
}

/* --------------------------------------------
   КАРТОЧКИ
   -------------------------------------------- *

.card {
  background-color: var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card--elevated {
  background-color: var(--color-base);
  box-shadow: var(--shadow-md);
}

.card--highlight {
  background-color: var(--color-surface-3);
  border-left: 4px solid var(--color-accent-1);
}

.card--accent {
  background-color: var(--color-accent-1-light);
}

.card--neutral {
  background-color: var(--color-neutral-1);
}

/* --------------------------------------------
   СЕКЦИИ
   -------------------------------------------- *

.section {
  padding: var(--spacing-8) 0;
}

.section--base {
  background-color: var(--color-base);
}

.section--surface-1 {
  background-color: var(--color-surface-1);
}

.section--surface-2 {
  background-color: var(--color-surface-2);
}

.section--surface-3 {
  background-color: var(--color-surface-3);
}

.section--accent-light {
  background-color: var(--color-accent-1-light);
}

/* --------------------------------------------
   СООБЩЕНИЯ
   -------------------------------------------- *

.message {
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

.message--success {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border-left: 4px solid var(--color-success);
}

.message--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border-left: 4px solid var(--color-warning);
}

.message--error {
  background-color: var(--color-error-light);
  color: var(--color-error);
  border-left: 4px solid var(--color-error);
}

.message--info {
  background-color: var(--color-accent-2-light);
  color: var(--color-accent-2);
  border-left: 4px solid var(--color-accent-2);
}

/* --------------------------------------------
   НАВИГАЦИЯ
   -------------------------------------------- *

.nav {
  display: flex;
  gap: var(--spacing-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav--horizontal {
  flex-direction: row;
}

.nav--vertical {
  flex-direction: column;
}

.nav__link {
  color: var(--color-link-regular);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--spacing-2) 0;
}

.nav__link:hover {
  color: var(--color-link-hover);
}

.nav__link--active {
  color: var(--color-accent-1);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------
   ХЛЕБНЫЕ КРОШКИ
   -------------------------------------------- *

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-neutral-3);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.breadcrumb__item::after {
  content: "/";
  color: var(--color-neutral-2);
}

.breadcrumb__item:last-child::after {
  content: "";
}

.breadcrumb__link {
  color: var(--color-link-regular);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-link-hover);
}

.breadcrumb__current {
  color: var(--color-contrast);
  font-weight: var(--font-weight-medium);
}

/* --- */