:root,
[data-bs-theme="light"] {
  --ar-primary: #21b66f;
  --ar-primary-rgb: 33, 182, 111;
  --ar-primary-text-emphasis: #17804e;
  --ar-primary-bg-subtle: #e7f7ef;
  --ar-primary-border-subtle: #b7e5ce;
  --ar-link-color: #21b66f;
  --ar-link-color-rgb: 33, 182, 111;
  --ar-link-hover-color: #1b985d;
  --ar-link-hover-color-rgb: 27, 152, 93;
  --ar-focus-ring-color: rgba(33, 182, 111, .25);
}

[data-bs-theme="dark"] {
  --ar-primary: #21b66f;
  --ar-primary-rgb: 33, 182, 111;
  --ar-primary-text-emphasis: #55d69a;
  --ar-primary-bg-subtle: #062719;
  --ar-primary-border-subtle: #0b5032;
  --ar-link-color: #21b66f;
  --ar-link-color-rgb: 33, 182, 111;
  --ar-link-hover-color: #1b985d;
  --ar-link-hover-color-rgb: 27, 152, 93;
}

html {
  scroll-padding-top: 5.5rem;
}

#news-section {
  scroll-margin-top: 5.5rem;
}

.blog-page-content {
  padding-top: 7rem !important;
}

.btn-primary {
  --ar-btn-bg: var(--ar-primary);
  --ar-btn-border-color: var(--ar-primary);
  --ar-btn-hover-bg: var(--ar-link-hover-color);
  --ar-btn-hover-border-color: var(--ar-link-hover-color);
  --ar-btn-focus-shadow-rgb: var(--ar-primary-rgb);
  --ar-btn-active-bg: var(--ar-primary-text-emphasis);
  --ar-btn-active-border-color: var(--ar-primary-text-emphasis);
  --ar-btn-disabled-bg: var(--ar-primary);
  --ar-btn-disabled-border-color: var(--ar-primary);
}

.btn-outline-primary {
  --ar-btn-color: var(--ar-primary);
  --ar-btn-border-color: var(--ar-primary);
  --ar-btn-hover-bg: var(--ar-primary);
  --ar-btn-hover-border-color: var(--ar-primary);
  --ar-btn-focus-shadow-rgb: var(--ar-primary-rgb);
  --ar-btn-active-bg: var(--ar-link-hover-color);
  --ar-btn-active-border-color: var(--ar-link-hover-color);
  --ar-btn-disabled-color: var(--ar-primary);
  --ar-btn-disabled-border-color: var(--ar-primary);
}

.badge-spskill { background-color: #3B82F6; }   /* blue */
.badge-splab { background-color: #EF4444; }     /* red */
.badge-spkit { background-color: #10B981; }     /* green */
.badge-spmem { background-color: #8B5CF6; }     /* purple */
.badge-sppath { background-color: #FACC15; color: #000; } /* yellow */
.badge-spflash { background-color: #F97316; }   /* orange */
.badge-spcase { background-color: #111827; }    /* black */
.badge-spmap { background-color: #3B82F6; }     /* blue */
.badge-sptag { background-color: #E5E7EB; color: #111; } /* white */
.badge-spset { background-color: #92400E; }     /* brown */
.badge-spalert { background-color: #DC2626; }   /* red */
.badge-spintel { background-color: #0EA5E9; }   /* sky */

.cookie-consent {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 1080;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cookie-consent[hidden] {
  display: none !important;
}

.cookie-consent__content {
  width: min(100%, 960px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--ar-border-color, rgba(0, 0, 0, .12));
  border-radius: .5rem;
  background: var(--ar-body-bg, #fff);
  box-shadow: 0 1rem 3rem rgba(18, 21, 25, .18);
  pointer-events: auto;
}

.cookie-consent__title {
  margin-bottom: .25rem;
  font-weight: 700;
  color: var(--ar-heading-color, var(--bs-heading-color));
}

.cookie-consent__text {
  min-width: 0;
  font-size: .875rem;
  color: var(--ar-secondary-color, var(--bs-secondary-color));
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  flex-shrink: 0;
}

.cookie-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 767.98px) {
  .cookie-consent {
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
  }

  .cookie-consent__content,
  .cookie-option {
    align-items: stretch;
    flex-direction: column;
  }

  .cookie-consent__actions {
    justify-content: stretch;
  }

  .cookie-consent__actions .btn {
    width: 100%;
  }
}

.needs-validation input[type="file"] {
  max-width: 100%;
}
.sp-telegram-link {
    --sp-telegram-color: #229ed9;
    color: #fff;
    background-color: var(--sp-telegram-color);
    border-color: var(--sp-telegram-color);
    box-shadow: 0 .25rem .75rem rgba(34, 158, 217, .25);
}

.sp-telegram-link:hover,
.sp-telegram-link:focus-visible {
    color: #fff;
    background-color: #1d8fc4;
    border-color: #1d8fc4;
}

.sp-telegram-link:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(34, 158, 217, .3);
}