@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@theme {
  --color-primary: #e68672;
  --color-primary-dark: #d4705e;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 70px;
}

html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* Slideshow fade */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; }
.slide.active { opacity: 1; z-index: 2; }

/* Logo hover */
#logo { border-radius: 50%; transition: transform 0.5s ease; }
#logo:hover { transform: scale(1.1); }

/* Hamburger open animation (nth-child cannot be expressed inline) */
.nav-hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger--open span:nth-child(2) { opacity: 0; }
.nav-hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Floating chat dot */
@keyframes bounce-dot { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
.fc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #aaa; animation: bounce-dot 1s infinite; }

/* Custom select dropdown arrow */
.custom-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* Pet status badges — class computed at runtime by getStatusClass() */
.status-available { background: #e6f9ee; color: #1a7a3c; }
.status-adopted   { background: #ffe8e8; color: #c0392b; }
.status-pending   { background: #fff4e0; color: #b36b00; }
.status-other     { background: #f0f0f0; color: #555; }

/* Appointment card status badges — class computed by JS template literal */
.appt-card-status--booked    { background: #e3f2fd; color: #1565c0; }
.appt-card-status--completed { background: #e8f5e9; color: #2e7d32; }
.appt-card-status--cancelled { background: #fce4ec; color: #c62828; }
.appt-card-status--pending   { background: #fff8e1; color: #f57f17; }