/*
 * CurisLink's own brand (shared/_brand_logo): the mark (images/brand), four
 * petals round an open centre, and the wordmark set in Poppins, "Curis" in
 * semibold and "Link" in regular. These colours are the product's, so they
 * stay the same whatever theme a clinic chooses for its pages.
 */

.cl-logo {
  --cl-ink: #063b38;
  --cl-link: #0d9488;

  display: inline-flex;
  align-items: center;
  gap: 0.16em;
  color: var(--cl-ink);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: var(--cl-logo-size, 1.6rem);
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
}

a.cl-logo:hover,
a.cl-logo:focus {
  color: var(--cl-ink);
}

a.cl-logo:focus-visible {
  border-radius: 10px;
  outline: 3px solid #5eead4;
  outline-offset: 4px;
}

/* As tall as the letters with a little to spare, as in the logo artwork. */
.cl-logo .cl-logo__mark {
  flex: none;
  width: 1em;
  height: 1em;
  margin: 0;
}

/* Pages reset span weights with !important (admin.css, auth.css); the wordmark keeps its own. */
.cl-logo .cl-logo__word {
  font-weight: 600 !important;
}

.cl-logo .cl-logo__link {
  font-weight: 400 !important;
}

.cl-logo__word {
  white-space: nowrap;
}

.cl-logo__link {
  color: var(--cl-link);
}

/* On dark backgrounds: the staff sidebar, the brand panel of the sign-in pages
   (with curislink-mark-on-dark.svg). */
.cl-logo--on-dark {
  --cl-ink: #ffffff;
  --cl-link: #6ee7b7;
}

/* Page loader (shared/_page_loader): the mark's four petals dip toward its
   centre one after another, clockwise from the top, over a frosted page. */

.cl-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(242, 247, 246, 0.72);
  backdrop-filter: blur(6px) saturate(140%);
  animation: cl-loader-in 0.25s ease-out both;
}

/* Bootstrap's .d-none hides it; this keeps the grid layout when shown. */
.cl-loader.d-none {
  display: none !important;
}

.cl-loader__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 28px 36px 24px;
  border: 1px solid #d9e8e5;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(11, 43, 42, 0.05), 0 28px 60px -30px rgba(15, 118, 110, 0.55);
  font-family: "Poppins", "Hind Vadodara", system-ui, sans-serif;
}

.cl-loader__mark {
  width: 64px;
  height: 64px;
  overflow: visible;
}

.cl-loader__petal {
  transform-box: view-box;
  transform-origin: center;
}

.cl-loader__petal--curis {
  fill: #063b38;
}

.cl-loader__petal--link {
  fill: #0d9488;
}

.cl-loader .cl-loader__word {
  margin-top: 0.4rem;
  color: #063b38;
  font-size: 1.35rem;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
}

.cl-loader .cl-loader__word span {
  color: #0d9488;
  font-weight: 400 !important;
}

.cl-loader .cl-loader__text {
  color: #5b7774;
  font-size: 0.85rem;
  font-weight: 500 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .cl-loader__petal {
    animation: cl-loader-petal 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .cl-loader__petal:nth-of-type(2) { animation-delay: 0.15s; }
  .cl-loader__petal:nth-of-type(3) { animation-delay: 0.3s; }
  .cl-loader__petal:nth-of-type(4) { animation-delay: 0.45s; }

  .cl-loader__mark {
    animation: cl-loader-float 2.4s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cl-loader__card {
    animation: cl-loader-fade 1.6s ease-in-out infinite;
  }
}

@keyframes cl-loader-in {
  from { opacity: 0; }
}

/* Each petal draws in toward the open centre and fades a little, then settles back. */
@keyframes cl-loader-petal {
  0%, 55%, 100% { opacity: 1; transform: scale(1); }
  25% { opacity: 0.35; transform: scale(0.8); }
}

@keyframes cl-loader-float {
  50% { transform: translateY(-4px); }
}

@keyframes cl-loader-fade {
  50% { opacity: 0.7; }
}