/* VetKita — Bootstrap 5 companion theme */

:root {
  --vk-teal: #0f766e;
  --vk-teal-dark: #115e59;
  --vk-teal-soft: #d9f3ef;
  --vk-ink: #1e2b26;
}

body {
  background: #f4f7f5;
  color: var(--vk-ink);
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- navbar ---------- */
.vk-navbar {
  background: linear-gradient(135deg, var(--vk-teal-dark), var(--vk-teal));
}
.vk-navbar .nav-link { color: rgba(255, 255, 255, .82); }
.vk-navbar .nav-link:hover { color: #fff; }
.vk-navbar .nav-link.active { color: #fff; font-weight: 600; }
.vk-brand-icon { font-size: 1.15rem; }

/* ---------- cards ---------- */
.card { border: 1px solid #e2e8e2; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 42, 33, .06); }
.card-header { background: #fff; border-bottom: 1px solid #e2e8e2; font-weight: 600; }

/* ---------- stat cards ---------- */
.vk-stat .vk-stat-num { font-size: 1.9rem; font-weight: 700; color: var(--vk-teal-dark); line-height: 1.1; }
.vk-stat .vk-stat-lbl { color: #66746e; font-size: .82rem; }

/* ---------- badges (used by badge() helper) ---------- */
.badge.green  { background: #e3f5e8; color: #15803d; }
.badge.red    { background: #fde3e3; color: #b91c1c; }
.badge.amber  { background: #fdf0d8; color: #8a5a08; }
.badge.yellow { background: #fdf0d8; color: #8a5a08; }
.badge.blue   { background: #e0effa; color: #0369a1; }
.badge.grey   { background: #eef1ee; color: #5b665f; }

/* ---------- tables ---------- */
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: #66746e; }
.table td { vertical-align: middle; }

/* ---------- pet chip ---------- */
.pet-chip { font-weight: 600; color: var(--vk-teal-dark); text-decoration: none; }
.pet-chip:hover { color: var(--vk-teal); }

/* ---------- appointments board ---------- */
.vk-appt { border-left: 4px solid #adb5bd; }
.vk-appt.scheduled { border-left-color: var(--vk-teal); }
.vk-appt.completed { border-left-color: #16a34a; }
.vk-appt.cancelled, .vk-appt.no_show { border-left-color: #dc2626; opacity: .7; }
.vk-appt-time { font-weight: 700; color: var(--vk-teal-dark); }

/* ---------- dl ---------- */
.vk-dl dt { color: #66746e; font-weight: 600; }
.vk-dl dd { margin-bottom: .35rem; }

/* ---------- login ---------- */
.vk-login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #134e4a, #0f766e, #0d9488);
  display: flex; align-items: center; justify-content: center;
}
.vk-login-card { max-width: 400px; width: 100%; border-radius: 16px; }

/* ---------- footer ---------- */
.vk-footer { background: #fff; }

/* ---------- details/summary as buttons ---------- */
summary.btn { list-style: none; cursor: pointer; }
summary.btn::-webkit-details-marker { display: none; }

/* ---------- misc ---------- */
.muted, .text-muted { color: #66746e !important; }
.sub { color: #66746e; font-size: .85em; }

/* =====================================================
   Landing page (home.php)
   Palette: deep teal #134e4a · teal #0f766e · amber #f59e0b
   ===================================================== */

html { scroll-behavior: smooth; }
section[id], header[id] { scroll-margin-top: 72px; }

.vk-landing body { background: #fff; }

/* ---------- CTA buttons ---------- */
.vk-btn-cta {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .35);
}
.vk-btn-cta:hover { filter: brightness(1.06); color: #fff; }

/* ---------- hero ---------- */
.vk-hero {
  background: linear-gradient(135deg, #134e4a 0%, #0f766e 55%, #0d9488 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.vk-hero::after {
  content: "🐾";
  position: absolute;
  font-size: 20rem;
  right: -4rem;
  bottom: -6rem;
  opacity: .08;
  transform: rotate(-15deg);
}
.vk-hero-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .85rem;
  letter-spacing: .5px;
  margin-bottom: 1.1rem;
}
.vk-hero-title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
}
.vk-hero-lead {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .86);
  max-width: 560px;
}
.vk-hero .btn-outline-light { border-color: rgba(255, 255, 255, .55); }
.vk-hero-trust { border-top: 1px solid rgba(255, 255, 255, .2); }
.vk-hero-trust strong { color: #fbbf24; }
.vk-hero-trust span { color: rgba(255, 255, 255, .78); }
.vk-hero-card { border-radius: 20px; background: #fff; }
.vk-hero-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .25) !important; }

.vk-badge-soft { background: var(--vk-teal-soft); color: var(--vk-teal-dark); font-weight: 600; }

/* ---------- shared sections ---------- */
.vk-section { background: #fff; }
.vk-eyebrow {
  display: inline-block;
  color: var(--vk-teal);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: .5rem;
}
.vk-section-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* ---------- feature cards ---------- */
.vk-feature {
  border-radius: 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vk-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 118, 110, .14) !important;
}
.vk-feature-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  border-radius: 14px;
  background: var(--vk-teal-soft);
}

/* ---------- about ---------- */
.vk-about { background: #f4f7f5; }
.vk-checks li {
  padding: .55rem 0;
  border-bottom: 1px dashed #d4ddd6;
  font-weight: 500;
}
.vk-checks li:last-child { border-bottom: none; }
.vk-checks span {
  display: inline-flex;
  width: 24px; height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vk-teal);
  color: #fff;
  font-size: .8rem;
  margin-right: .6rem;
}
.vk-about-card { border-radius: 20px; }

/* ---------- contact ---------- */
.vk-contact { border-radius: 16px; transition: transform .18s ease; }
.vk-contact:hover { transform: translateY(-4px); }

/* ---------- landing footer ---------- */
.vk-landing-footer {
  background: linear-gradient(135deg, #134e4a, #0f766e);
}
.vk-landing-footer hr { border-color: rgba(255, 255, 255, .25); }
.vk-social {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.vk-social:hover { background: #f59e0b; color: #fff; transform: translateY(-2px); }