/* ============================================================
   KennelSitter Button Family
   Import once globally, then use <x-kbtn> anywhere.

   Sizes:  xs  — table rows, micro-actions
           (default) — normal buttons everywhere
           lg  — page-header CTAs only
   ============================================================ */

.ks-btn {
  font-family: inherit;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease;
  transform: translateY(0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ks-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Collar tag (default = compact) ---------- */
.ks-btn--collar {
  background: var(--ks-bg, #185FA5);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 7px;
  padding: 5px 12px;
  gap: 4px;
  box-shadow:
    0 2px 0 var(--ks-shadow, #0C447C),
    inset 0 0 0 1px var(--ks-bg, #185FA5),
    inset 0 0 0 2px rgba(255, 255, 255, .4);
  background-image:
    radial-gradient(circle at 5px 5px,                       #fff 0 0.6px, transparent 0.6px),
    radial-gradient(circle at 5px calc(100% - 5px),          #fff 0 0.6px, transparent 0.6px),
    radial-gradient(circle at calc(100% - 5px) 5px,          #fff 0 0.6px, transparent 0.6px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #fff 0 0.6px, transparent 0.6px);
}

.ks-btn--collar:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 var(--ks-shadow, #0C447C),
    inset 0 0 0 1px var(--ks-bg, #185FA5),
    inset 0 0 0 2px rgba(255, 255, 255, .4);
}

.ks-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ks-btn__icon svg {
  width: 13px;
  height: 13px;
}

/* Large — page-header CTAs only */
.ks-btn--lg.ks-btn--collar {
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 9px;
  gap: 6px;
  box-shadow:
    0 3px 0 var(--ks-shadow, #0C447C),
    inset 0 0 0 1.5px var(--ks-bg, #185FA5),
    inset 0 0 0 2.5px rgba(255, 255, 255, .4);
  background-image:
    radial-gradient(circle at 6px 6px,                       #fff 0 0.7px, transparent 0.7px),
    radial-gradient(circle at 6px calc(100% - 6px),          #fff 0 0.7px, transparent 0.7px),
    radial-gradient(circle at calc(100% - 6px) 6px,          #fff 0 0.7px, transparent 0.7px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #fff 0 0.7px, transparent 0.7px);
}

.ks-btn--lg.ks-btn--collar:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 var(--ks-shadow, #0C447C),
    inset 0 0 0 1.5px var(--ks-bg, #185FA5),
    inset 0 0 0 2.5px rgba(255, 255, 255, .4);
}

.ks-btn--lg .ks-btn__icon svg {
  width: 15px;
  height: 15px;
}

/* Extra-small — table rows and tight inline contexts */
.ks-btn--xs.ks-btn--collar {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 5px;
  gap: 3px;
  box-shadow:
    0 1.5px 0 var(--ks-shadow, #0C447C),
    inset 0 0 0 1px var(--ks-bg, #185FA5),
    inset 0 0 0 1.5px rgba(255, 255, 255, .4);
  background-image:
    radial-gradient(circle at 4px 4px,                       #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at 4px calc(100% - 4px),          #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at calc(100% - 4px) 4px,          #fff 0 0.5px, transparent 0.5px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #fff 0 0.5px, transparent 0.5px);
}

.ks-btn--xs.ks-btn--collar:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 0.5px 0 var(--ks-shadow, #0C447C),
    inset 0 0 0 1px var(--ks-bg, #185FA5),
    inset 0 0 0 1.5px rgba(255, 255, 255, .4);
}

.ks-btn--xs .ks-btn__icon svg {
  width: 11px;
  height: 11px;
}

/* ---------- Outline variant — border only, dark text ---------- */
.ks-btn--outline.ks-btn--collar {
  background: transparent;
  background-image: none;
  color: #185FA5;
  border: 1.5px solid #185FA5;
  box-shadow: none;
}

.ks-btn--outline.ks-btn--collar:hover {
  background: rgba(24, 95, 165, 0.06);
}

.ks-btn--outline.ks-btn--collar:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
  background: rgba(24, 95, 165, 0.1);
}

.ks-btn--outline .ks-btn__icon svg {
  fill: #185FA5;
}

/* ---------- Link-styled kbtn — override parent link colors ---------- */
a.ks-btn,
a.ks-btn:visited,
a.ks-btn:hover,
a.ks-btn:active,
.table a.ks-btn,
.table a.ks-btn:hover { text-decoration: none; color: #fff; }

a.ks-btn.ks-btn--outline,
a.ks-btn.ks-btn--outline:hover,
.table a.ks-btn.ks-btn--outline,
.table a.ks-btn.ks-btn--outline:hover { color: #185FA5; }

/* ---------- Dog-tag with paw (icon only) ---------- */
.ks-btn--paw-tag {
  background: #185FA5;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 5px 0 #0C447C;
}

.ks-btn--paw-tag svg {
  width: 46px;
  height: 46px;
}

.ks-btn--paw-tag .ks-btn__loop {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #B4B2A9;
  box-shadow: 0 2px 0 #5F5E5A;
}

.ks-btn--paw-tag:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #0C447C;
}

/* ---------- Speckled bone (icon only) ---------- */
.ks-btn--bone {
  background: transparent;
  filter: drop-shadow(0 5px 0 #0C447C);
}

.ks-btn--bone svg {
  width: 140px;
  height: 80px;
  display: block;
}

.ks-btn--bone:active:not(:disabled) {
  transform: translateY(4px);
  filter: drop-shadow(0 1px 0 #0C447C);
}