/* PetPRO Parañaque — custom styles
 * Tailwind utility classes handle most styling; this file holds custom
 * components (buttons, before/after slider, sticky CTA, decorative
 * backgrounds, reveal animations). */

/* PetPRO brand palette
 * --brand:  Leaf Green  #8BC53F  (primary — bone shape)
 * --accent: Yellow      #F2D054  (backdrop circle)
 * --earth:  Dark Olive  #555218  (borders, outlines)
 * --ink:    Near-black  #111111  (typography)
 * --paper:  White       #FFFFFF  (highlights) */
:root {
  --brand: #8BC53F;
  --brand-dark: #6fa029;
  --accent: #F2D054;
  --earth: #555218;
  --ink: #111111;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); }
h1, h2, h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -0.01em; color: #000; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.25rem;
  border-radius: 9999px;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* Conversion CTA — golden yellow to maximize "click me" pull
 * Used by all booking / messaging / quote buttons. */
.btn-primary {
  background: var(--accent);
  color: var(--earth);
  font-weight: 800;
  box-shadow: 0 10px 22px -8px rgba(242, 208, 84, .75), 0 2px 0 0 var(--earth);
  border: 2px solid var(--earth);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-primary:hover {
  background: #e8c33a;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -8px rgba(242, 208, 84, .85), 0 2px 0 0 var(--earth);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible {
  outline: 3px solid var(--earth);
  outline-offset: 3px;
}
.btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--earth);
}
.btn-secondary:hover { background: #fdf9e7; }
.btn-ghost {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .25); }

/* ---------- Before / After slider ---------- */
.ba {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  touch-action: none;
  user-select: none;
}
.ba img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #f8fafc; pointer-events: none; }
.ba .after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.ba .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  transform: translateX(-50%);
}
.ba .handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .35);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238BC53F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/><polyline points='9 18 15 12 9 6' transform='translate(6 0)'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.ba .label {
  position: absolute;
  top: .75rem;
  padding: .25rem .625rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 600;
  background: rgba(0, 0, 0, .6);
  color: #fff;
}
.ba .label.left  { left:  .75rem; }
.ba .label.right { right: .75rem; }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
  transition: transform .25s ease, opacity .25s ease;
  transform: translateY(120%);
  opacity: 0;
}
.mobile-cta.show { transform: translateY(0); opacity: 1; }

/* ---------- Decorative paw background ---------- */
.paw-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='%23000000'><path d='M12 13c-2.5 0-5 2.5-5 5 0 1.5 1 2 2 2s1.5-.5 3-.5 2 .5 3 .5 2-.5 2-2c0-2.5-2.5-5-5-5zM6 11.5C7.4 11.5 8 10.4 8 9s-.6-2.5-2-2.5S4 7.6 4 9s.6 2.5 2 2.5zm12 0c1.4 0 2-1.1 2-2.5s-.6-2.5-2-2.5-2 1.1-2 2.5.6 2.5 2 2.5zM9 8c1.1 0 1.7-1 1.7-2.2S10.1 3.5 9 3.5 7.3 4.6 7.3 5.8 7.9 8 9 8zm6 0c1.1 0 1.7-1 1.7-2.2S16.1 3.5 15 3.5s-1.7 1.1-1.7 2.3S13.9 8 15 8z'/></svg>");
  background-size: 80px 80px;
}

/* ---------- Review carousel ---------- */
.review-carousel {
  position: relative;
}
.review-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(18rem, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.25rem;
}
.review-track::-webkit-scrollbar {
  display: none;
}
.review-card {
  scroll-snap-align: start;
  min-width: 18rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 18px 50px -36px rgba(0, 0, 0, 0.35);
}
.review-card p {
  line-height: 1.8;
}
.carousel-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.carousel-nav button {
  pointer-events: auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.95);
  font-size: 1.5rem;
  color: #111111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.25);
}
.carousel-nav button:hover {
  transform: translateY(-1px);
}
.carousel-nav button:focus-visible {
  outline: 3px solid #8BC53F;
  outline-offset: 3px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Hard cap so the logo image can never render at natural size */
img[src$="logo.jpg"] {
  display: block;
  max-height: 44px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 480px) {
  img[src$="logo.jpg"] { max-height: 36px; }
}