/*-----------------
    5. Buttons — shadcn skin
-----------------------*/
.btn-view {
  font-weight: 500;
  font-size: 15px;
  color: #ffffff;
  border: 1px solid var(--color-blue);
  background-color: var(--color-blue);
  border-radius: var(--radius-btn);
  padding: 10px 20px;
  box-shadow: var(--shadow-btn);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-view:hover {
  color: #ffffff;
  background-color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
}

@media (max-width: 991.98px) {
  .btn-view {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
  }
}

.btn-white {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-btn);
}

.btn-white:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-btn);
}

.btn-white-outline {
  background-color: #ffffff;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-white-outline:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-primary {
  font-weight: 500;
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  box-shadow: var(--shadow-btn);
  color: #fff;
  border-radius: var(--radius-btn);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
  background-color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
  color: #ffffff;
}

.action-subscribe {
  margin-top: 8px;
}

.btn-subscribe {
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  box-shadow: var(--shadow-btn);
  color: #fff;
  border-radius: var(--radius-btn);
  font-weight: 500;
}

.btn-subscribe:hover {
  background-color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
  color: #ffffff;
}

.btn-subscribe:hover i {
  color: #ffffff !important;
}

.submit-review {
  padding: 10px 20px;
}

.btn-size {
  font-weight: 500;
  font-size: 15px;
  padding: 10px 16px;
}

.btn-outline-light {
  color: #ffffff;
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
}

.btn-outline-light:hover {
  background-color: #ffffff;
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-gray {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-bg-light);
  color: var(--color-text);
}

.btn-gray:hover {
  background-color: var(--color-bg-muted);
  border-color: var(--color-bg-muted);
  color: var(--color-text);
}

.btn-gray-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-gray-outline:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-outline-primary {
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background-color: #ffffff;
}

.btn-outline-primary:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-check:focus+.btn-primary,
.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(9, 9, 11, 0.12) !important;
}

.btn:focus {
  box-shadow: 0 0 0 3px rgba(9, 9, 11, 0.12) !important;
}

.btn.btn-greys {
  background: var(--color-bg-light);
  color: var(--color-text);
  font-size: 12px;
  padding: 8px 16px;
  font-weight: 500;
  border-radius: var(--radius-btn);
}

.cancel {
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.cancel:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-border);
  color: var(--color-text);
}

.contact-btn {
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
  box-shadow: var(--shadow-btn);
  color: #ffffff;
  border-radius: var(--radius-btn);
  font-weight: 500;
  font-size: 15px;
  padding: 10px 16px;
  text-align: center;
}

.contact-btn:hover {
  background-color: var(--color-blue-hover);
  border: 1px solid var(--color-blue-hover);
  box-shadow: var(--shadow-btn);
  color: #ffffff;
}

.btn-secondary {
  background: var(--color-bg-light);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.fa-facebook,
.fa-twitter,
.fa-instagram,
.fa-telegram,
.fa-tiktok {
  background: var(--color-blue) !important;
  color: #ffffff;
  border-radius: 50%;
}