:root,
[data-bs-theme=light] {
  --bs-primary: #1F6FE5;
  --bs-primary-rgb: 31, 111, 229;
}
[v-cloak] {
  display: none
}
label, button, input[type="radio"], input[type="checkbox"] {
  transition: border-color 0.1s linear;
}

.modal.fade .modal-dialog {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease-out;
  transform: scale(0.95) translateY(-10px); /* Незначительное уменьшение и смещение */
  opacity: 0;
}

/* Состояние при открытии */
.modal.fade.show .modal-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.instagram-gradient {
  background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.vk-gradient {
  background: linear-gradient(45deg, #45668E, #4A76A8, #508BCB); /* Синий градиент */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}


/* Telegram */
.telegram-gradient {
  background: linear-gradient(45deg, #0088CC, #2AABEE, #00aced); /* Голубой градиент */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Telegram */
.telegram-gradient-background {
  background: linear-gradient(45deg, #0088CC, #2AABEE, #00aced); /* Голубой градиент */
  background-size: 400% 100%;
  animation: gradient 10s ease infinite;
}

/* TikTok */
.tiktok-gradient {
  background: linear-gradient(45deg, #000, #00f, #f00, #ff0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(94deg, #A0F0E6 0, #9BECE6 30.73%, #AE97CE 68.75%, #FFBCBD 100%);
  overflow: hidden;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

.purple-gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(135deg, #FFA6D6 0%, #B9A9FB 100%);
  overflow: hidden;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
}

.purple-gradient-background {
  background-image: linear-gradient(135deg, #FFA6D6 0%, #B9A9FB 100%);
  background-size: 400% 100%;
  animation: gradient 10s ease infinite;
}

.green-color {
  color: rgb(16 194 86);
}

.dotted {
  text-decoration-line: underline !important;
  text-decoration-style: dotted !important;
  text-underline-offset: 2px !important;
}

.centered-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.menu-button span {
  display: block;
  width: 21px;
  height: 3px;
  border-radius: 10px;
  background-color: #000;
  margin: 3px 0;
  transition: all 0.3s ease;
}

.bg-gray-100 {
  background-color: var(--bs-gray-100);
}

.bg-gray-200 {
  background-color: var(--bs-gray-200);
}

.bg-gray-300 {
  background-color: var(--bs-gray-300);
}

.text-gray-500 {
  color: var(--bs-gray-500);
}

.rounded-12px {
  border-radius: 12px;
}

.rounded-24px {
  border-radius: 24px;
}

.red-gradient {
  background-image: linear-gradient(to right, #FF2529, #FF5D2C);
}

.text-orange {
  color: rgb(246 110 67);
}

.text-orange-subtle {
  color: rgb(250 192 171);
}

.bg-orange {
  background-color: rgb(246 110 67);
}

.bg-orange-subtle {
  background-color: rgb(250 192 171);
}

.icon-circle {
  min-width: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #8BC6EC;
  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-circle-sm {
  min-width: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-circle i {
  margin-bottom: -5px;
}

.icon-rounded {
  width: 45px;
  min-width: 45px;
  height: 45px;
  border-radius: 12px;
  text-align: center;
  align-items: center;
  align-content: center;
  padding: .5rem;
}

.icon-rounded i {
  line-height: 1.25;
  font-size: 1.25rem
}

.clickable {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}
.clickable:active {
  transform: scale(0.97);
}
.btn:active {
  transform: scale(0.97);
}

.btn {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  border-radius: 12px;
}

.horizontal-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.styled-pills {
  padding: 4px;
}

.styled-pills .nav-link.active {
  color: var(--bs-black);
  background-color: #fff;
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.btn-check-tag:checked ~ label {
  background-color: var(--bs-primary) !important;
  color: white;
}

.discount-badge {
  position: absolute;
  top: -5px;
  transform: rotate(7deg);
  right: -8px;
}

.clear-input-number::-webkit-outer-spin-button,
.clear-input-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.clear-input-number[type=number] {
  -moz-appearance: textfield;
}

.notification-container {
  height: 80px;
  position: relative;
}
.notification {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.6);
    padding: 10px;
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
    max-width: 350px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.notification.active {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}