/* ════════════════════════════════════════════════════════
   PetCare — Reusable components: buttons, store buttons,
   theme toggle.
   ════════════════════════════════════════════════════════ */

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 28px;
  border-radius: 50px;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600; font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation; /* removes 300ms tap delay on iOS */
  will-change: transform;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--orange-d), var(--orange));
  color: #FFFFFF;
  box-shadow: 0 4px 18px rgba(255,140,66,.35);
}
.btn-primary:hover { box-shadow: 0 8px 28px rgba(255,140,66,.45); }

/* Ghost button — hero variant (always on dark sky) */
.btn-ghost {
  background: transparent;
  color: var(--hero-text);
  border: 2px solid rgba(255,255,255,.45);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Ghost button — adaptive variant for use outside the dark hero */
.btn-ghost-adaptive {
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost-adaptive:hover { border-color: var(--orange); background: var(--sand); }

.btn-outline {
  background: transparent;
  color: var(--orange);
  border: 2px solid var(--orange-l);
}
.btn-outline:hover { background: var(--sand); box-shadow: 0 4px 16px rgba(255,140,66,.2); }

.btn-lg { padding: 15px 38px; font-size: 1rem; }

/* Compact nav CTA (replaces former inline style) */
.btn-nav { padding: 10px 24px; font-size: .88rem; }

/* ── STORE DOWNLOAD BUTTONS ── */
.store-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero variant — always on a dark sky background */
.btn-store {
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  border: 1.5px solid rgba(255,255,255,.38);
  border-radius: 14px;
  line-height: 1.25;
  font-size: .88rem;
  background: rgba(255,255,255,.1);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-store:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}

/* Final-CTA variant — adapts to light / dark body background */
.btn-store-alt {
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  border: none;
  border-radius: 14px;
  line-height: 1.25;
  font-size: .88rem;
}
[data-theme="light"] .btn-store-alt { background: #2E1F14; color: #fff; }
[data-theme="dark"]  .btn-store-alt { background: #F5EDE4; color: #12100E; }
.btn-store-alt:hover { opacity: .88; box-shadow: var(--shadow); }

.store-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.store-sub  { display: block; font-size: .62rem; font-weight: 400; letter-spacing: .02em; opacity: .85; }
.store-name { display: block; font-weight: 700; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  position: relative;
  width: 44px; height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: 50px;
  background: var(--toggle-bg);
  cursor: pointer;
  transition: background .35s;
}
.theme-toggle::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] .theme-toggle::after { transform: translateX(18px); }

.toggle-icon {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  color: #FFF6E0;
  pointer-events: none;
  transition: opacity .3s;
}
.toggle-icon svg { display: block; width: 100%; height: 100%; }
.toggle-sun  { left: 5px; }
.toggle-moon { right: 5px; }
[data-theme="light"] .toggle-sun  { opacity: 0; }
[data-theme="light"] .toggle-moon { opacity: 1; }
[data-theme="dark"]  .toggle-sun  { opacity: 1; }
[data-theme="dark"]  .toggle-moon { opacity: 0; }

/* Mobile-only theme toggle (CSS-driven; no JS resize handler needed) */
.theme-toggle-mobile { display: none; }
@media (max-width: 640px) {
  .theme-toggle-mobile { display: block; }
}