body {
  font-family: "Manrope", sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.fill-1 {
  font-variation-settings: "FILL" 1;
}

.about-hero-bg {
  background-image:
    linear-gradient(to bottom, rgba(34, 16, 25, 0.4), rgba(34, 16, 25, 0.7)),
    url("../../images/about-hero-dog-owner.png");
}

.login-hero-bg {
  background-image: url("../../images/login-side-gradient.png");
}

.brand-signature {
  font-family: cursive;
}

/* Brand-safe utilities for Blazor pages.
   These avoid collisions with framework classes like text-primary/bg-primary. */
.virkl-bg-page {
  background-color: #f8f6f7 !important;
}

.virkl-bg-page-glass {
  background-color: rgba(248, 246, 247, 0.8) !important;
}

.virkl-bg-primary {
  background-color: #a5075e !important;
}

.virkl-bg-primary-soft {
  background-color: rgba(165, 7, 94, 0.1) !important;
}

.virkl-bg-primary-faint {
  background-color: rgba(165, 7, 94, 0.05) !important;
}

.virkl-bg-primary-strong-hover:hover {
  background-color: rgba(165, 7, 94, 0.9) !important;
}

.virkl-bg-primary-soft-hover:hover {
  background-color: rgba(165, 7, 94, 0.2) !important;
}

.virkl-bg-accent {
  background-color: #f3e7ed !important;
}

.virkl-bg-accent-soft {
  background-color: rgba(243, 231, 237, 0.3) !important;
}

.virkl-bg-secondary-soft {
  background-color: rgba(154, 76, 115, 0.1) !important;
}

.virkl-text-primary {
  color: #a5075e !important;
}

.virkl-text-primary-muted {
  color: rgba(165, 7, 94, 0.7) !important;
}

.virkl-border-primary-soft {
  border-color: rgba(165, 7, 94, 0.1) !important;
}

.virkl-border-primary-mid {
  border-color: rgba(165, 7, 94, 0.2) !important;
}

.virkl-border-primary-strong {
  border-color: rgba(165, 7, 94, 0.3) !important;
}

.virkl-border-accent {
  border-color: #f3e7ed !important;
}

.virkl-shadow-primary {
  box-shadow: 0 18px 40px -18px rgba(165, 7, 94, 0.3) !important;
}

.virkl-shadow-primary-soft {
  box-shadow: 0 18px 40px -18px rgba(165, 7, 94, 0.2) !important;
}

.virkl-hover-text-primary:hover {
  color: #a5075e !important;
}

.virkl-hover-border-primary-soft:hover {
  border-color: rgba(165, 7, 94, 0.3) !important;
}

.virkl-hover-border-primary:hover {
  border-color: #a5075e !important;
}

.virkl-hover-bg-primary-faint:hover {
  background-color: rgba(165, 7, 94, 0.05) !important;
}

.virkl-card-hover:hover {
  border-color: rgba(165, 7, 94, 0.3) !important;
  background-color: rgba(165, 7, 94, 0.05) !important;
}

/* Blazor does not reliably pick up custom Tailwind Play CDN theme utilities.
   Re-declare the VIRKL brand utility classes locally so the existing markup
   keeps working without changing every page. */
.bg-primary {
  background-color: #a5075e !important;
}

.bg-primary\/5 {
  background-color: rgba(165, 7, 94, 0.05) !important;
}

.bg-primary\/10 {
  background-color: rgba(165, 7, 94, 0.1) !important;
}

.bg-primary\/20 {
  background-color: rgba(165, 7, 94, 0.2) !important;
}

.bg-primary\/90 {
  background-color: rgba(165, 7, 94, 0.9) !important;
}

.bg-secondary\/10 {
  background-color: rgba(154, 76, 115, 0.1) !important;
}

.bg-accent-purple {
  background-color: #f3e7ed !important;
}

.bg-accent-purple\/30 {
  background-color: rgba(243, 231, 237, 0.3) !important;
}

.bg-background-light {
  background-color: #f8f6f7 !important;
}

.bg-background-light\/80 {
  background-color: rgba(248, 246, 247, 0.8) !important;
}

.bg-background-dark,
.dark .dark\:bg-background-dark {
  background-color: #221019 !important;
}

.dark .dark\:bg-background-dark\/80 {
  background-color: rgba(34, 16, 25, 0.8) !important;
}

.text-primary {
  color: #a5075e !important;
}

.text-primary\/5 {
  color: rgba(165, 7, 94, 0.05) !important;
}

.text-primary\/30 {
  color: rgba(165, 7, 94, 0.3) !important;
}

.text-primary\/40 {
  color: rgba(165, 7, 94, 0.4) !important;
}

.text-primary\/50 {
  color: rgba(165, 7, 94, 0.5) !important;
}

.text-primary\/60 {
  color: rgba(165, 7, 94, 0.6) !important;
}

.text-primary\/70 {
  color: rgba(165, 7, 94, 0.7) !important;
}

.border-primary {
  border-color: #a5075e !important;
}

.border-primary\/5 {
  border-color: rgba(165, 7, 94, 0.05) !important;
}

.border-primary\/10 {
  border-color: rgba(165, 7, 94, 0.1) !important;
}

.border-primary\/20 {
  border-color: rgba(165, 7, 94, 0.2) !important;
}

.border-primary\/30 {
  border-color: rgba(165, 7, 94, 0.3) !important;
}

.border-accent-purple {
  border-color: #f3e7ed !important;
}

.shadow-primary\/5 {
  box-shadow: 0 10px 30px -12px rgba(165, 7, 94, 0.05) !important;
}

.shadow-primary\/20 {
  box-shadow: 0 18px 40px -18px rgba(165, 7, 94, 0.2) !important;
}

.shadow-primary\/25 {
  box-shadow: 0 18px 40px -18px rgba(165, 7, 94, 0.25) !important;
}

.shadow-primary\/30 {
  box-shadow: 0 18px 40px -18px rgba(165, 7, 94, 0.3) !important;
}

.virkl-field-highlight {
  border-color: #a5075e !important;
  box-shadow: 0 0 0 4px rgba(165, 7, 94, 0.16) !important;
  animation: virklFieldPulse 700ms ease-out;
}

@keyframes virklFieldPulse {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.01);
  }

  100% {
    transform: scale(1);
  }
}

.hover\:bg-primary:hover,
.group:hover .group-hover\:bg-primary {
  background-color: #a5075e !important;
}

.hover\:bg-primary\/5:hover {
  background-color: rgba(165, 7, 94, 0.05) !important;
}

.hover\:bg-primary\/20:hover {
  background-color: rgba(165, 7, 94, 0.2) !important;
}

.hover\:bg-primary\/90:hover {
  background-color: rgba(165, 7, 94, 0.9) !important;
}

.hover\:bg-secondary\/10:hover {
  background-color: rgba(154, 76, 115, 0.1) !important;
}

@keyframes virklToastIn {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.hover\:border-primary:hover {
  border-color: #a5075e !important;
}

.hover\:border-primary\/5:hover {
  border-color: rgba(165, 7, 94, 0.05) !important;
}

.hover\:border-primary\/10:hover {
  border-color: rgba(165, 7, 94, 0.1) !important;
}

.hover\:border-primary\/20:hover {
  border-color: rgba(165, 7, 94, 0.2) !important;
}

.hover\:border-primary\/30:hover {
  border-color: rgba(165, 7, 94, 0.3) !important;
}

.hover\:border-primary\/50:hover {
  border-color: rgba(165, 7, 94, 0.5) !important;
}

.hover\:text-primary:hover,
.group:hover .group-hover\:text-primary,
.group:focus-within .group-focus-within\:text-primary {
  color: #a5075e !important;
}

.hover\:shadow-primary\/30:hover {
  box-shadow: 0 18px 40px -18px rgba(165, 7, 94, 0.3) !important;
}

.focus\:border-primary:focus {
  border-color: #a5075e !important;
}

.focus\:ring-primary:focus {
  box-shadow: 0 0 0 3px rgba(165, 7, 94, 0.2) !important;
}

.focus\:ring-primary\/5:focus {
  box-shadow: 0 0 0 3px rgba(165, 7, 94, 0.05) !important;
}

.focus\:ring-primary\/20:focus {
  box-shadow: 0 0 0 3px rgba(165, 7, 94, 0.2) !important;
}

.from-primary {
  --tw-gradient-from: #a5075e var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(165, 7, 94, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-background-dark\/60 {
  --tw-gradient-from: rgba(34, 16, 25, 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(34, 16, 25, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}