/* ═══════════════════════════════════════════════════════════════
   Pet Stop Beauty — Shared Styles
   Included by index.html and profile.html
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root{--green-primary:#EE5A86;--green-dark:#872240;--green-light:#F29CB6;--green-pale:#FBDCE6;--cream:#FBF6EF;--cream-dark:#F4ECDF;--gold:#F2A83F;--gold-light:#F4B967;--text-dark:#4F1728;--text-mid:#B92753;--shadow-green:rgba(238,90,134,0.18);--shadow-dark:rgba(135,34,64,0.12);--color-page-bg:#FBDCE6;--color-accent-primary:#EE5A86;--color-accent-green:#2E9E72;--color-accent-pink:#C8407A;--color-accent-amber:#C87820;}

/* ── Base ── */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; overscroll-behavior-x:none; }
body { font-family:'Nunito',sans-serif; background:var(--cream); color:var(--text-dark); overflow-x:hidden; overscroll-behavior-x:none; }
body[data-fx-glass="true"] { background:var(--color-page-bg, var(--cream)); }

/* ── Noise texture overlay ── */
body::before {
  content:''; position:fixed; inset:0; z-index:1000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.042'/%3E%3C/svg%3E");
  opacity:.55;
}

h1,h2,h3 { font-family:'Playfair Display',serif; }

/* ── Shadow utilities ── */
.shadow-green-sm  { box-shadow:0 2px 8px var(--shadow-green),0 1px 3px var(--shadow-dark); }
.shadow-green-md  { box-shadow:0 4px 20px var(--shadow-green),0 2px 8px var(--shadow-dark),0 0 0 1px rgba(168,71,106,.06); }
.shadow-green-lg  { box-shadow:0 8px 40px var(--shadow-green),0 4px 16px var(--shadow-dark),0 0 0 1px rgba(168,71,106,.08); }
.shadow-float     { box-shadow:0 20px 70px rgba(92,30,53,.2),0 8px 24px var(--shadow-green),0 0 0 1px rgba(168,71,106,.1); }

/* ── Navbar ── */
#navbar { padding-top: max(16px, env(safe-area-inset-top, 0px)); transition:padding .4s var(--ease-smooth); }
#navbar.scrolled { padding-top:10px; }
.nav-pill {
  border-radius:9999px; border:1.5px solid transparent; padding:8px 8px 8px 24px;
  background:transparent;
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  box-shadow:none;
  transition:background .45s ease, border-color .45s ease, box-shadow .45s ease,
             backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease;
}
#navbar.scrolled .nav-pill {
  background:rgba(251,246,239,.06);
  border-color:rgba(168,71,106,.24);
  backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  box-shadow:0 4px 28px rgba(92,30,53,.1), inset 0 1px 0 rgba(255,255,255,.18);
}

/* ── Nav links ── */
.nav-link {
  position:relative; font-family:'Nunito',sans-serif; font-size:14px; font-weight:600;
  color:var(--green-primary); padding:6px 14px; border-radius:10px;
  border:1.5px solid transparent; cursor:pointer; background:transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .18s var(--ease-spring);
  text-decoration:none; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.nav-link:hover {
  border-color:rgba(168,71,106,.32); background:rgba(168,71,106,.07); color:var(--green-dark);
  transform:translateY(-1px);
}
.nav-link:active { transform:translateY(0); }
.nav-link.active {
  border-color:rgba(168,71,106,.4); background:rgba(168,71,106,.1);
  color:var(--green-dark); font-weight:700;
}
.nav-link.active::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--green-primary); display:inline-block; flex-shrink:0;
}

/* ── Buttons ── */
.btn-primary {
  background:var(--green-primary); color:white; padding:14px 28px; border-radius:14px;
  border:none; cursor:pointer; font-family:'Nunito',sans-serif; font-weight:700; font-size:16px;
  transition:transform .2s var(--ease-spring),box-shadow .25s ease,background .2s ease;
  display:inline-flex; align-items:center; gap:8px; position:relative; overflow:hidden;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 55%);
  opacity:0; transition:opacity .2s ease;
}
.btn-primary:hover { background:#DC3869; transform:translateY(-3px); box-shadow:0 12px 32px rgba(168,71,106,.42); }
.btn-primary:hover::after { opacity:1; }
.btn-primary:active { transform:translateY(0); box-shadow:none; }
.btn-primary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

.btn-outline {
  background:transparent; color:var(--green-primary); padding:12px 24px; border-radius:14px;
  border:2px solid var(--green-primary); cursor:pointer; font-family:'Nunito',sans-serif;
  font-weight:700; font-size:15px;
  transition:background .2s ease,color .2s ease,transform .2s var(--ease-spring),border-color .2s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.btn-outline:hover { background:var(--green-pale); transform:translateY(-2px); border-color:var(--green-dark); }
.btn-outline:active { transform:translateY(0); }
.btn-outline:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* ── Form inputs ── */
.form-input {
  width:100%; padding:12px 16px; border-radius:12px; border:1.5px solid #FBDCE6;
  background:white; font-family:'Nunito',sans-serif; font-size:16px; color:var(--text-dark);
  outline:none; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.form-input:hover { border-color:rgba(168,71,106,.4); }
.form-input:focus { border-color:var(--green-primary); box-shadow:0 0 0 3px rgba(168,71,106,.15); background:#fffbfc; }

/* ── Section eyebrow ── */
.section-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Nunito',sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--green-primary);
}
.section-eyebrow::before, .section-eyebrow::after {
  content:''; display:block; width:20px; height:1.5px; background:currentColor; flex-shrink:0;
}

/* ── Heading accent ── */
.heading-accent::after {
  content:''; display:block; width:48px; height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
  border-radius:2px; margin:14px auto 0;
}

/* ── Reveal animations ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s var(--ease-smooth); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1{transition-delay:.1s;} .reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;} .reveal-delay-4{transition-delay:.4s;}

/* ── Toast ── */
#toast {
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(22px);
  background:var(--green-dark); color:white; padding:14px 28px; border-radius:16px;
  font-family:'Nunito',sans-serif; font-weight:600; font-size:15px;
  box-shadow:0 10px 36px rgba(92,30,53,.38); z-index:9999; opacity:0;
  transition:opacity .3s ease,transform .3s var(--ease-spring); pointer-events:none;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Modal backdrop ── */
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.52); z-index:500; display:flex; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(6px); }
.modal-back.hidden { display:none; }
.modal-card { background:white; border-radius:28px; padding:36px; width:100%; max-width:440px; box-shadow:0 28px 80px rgba(92,30,53,.26); animation:fadeSlideIn .35s var(--ease-smooth); }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { background:var(--green-light); border-radius:3px; }
::-webkit-scrollbar-track { background:transparent; }

/* ── Scroll progress bar ── */
@keyframes barGlowPulse {
  0%,100% { box-shadow: 0 0 8px rgba(242,168,63,.9), 0 0 22px rgba(242,168,63,.5), 0 0 2px rgba(253,194,110,.8); }
  50%      { box-shadow: 0 0 18px rgba(244,185,103,1), 0 0 44px rgba(242,168,63,.8), 0 0 70px rgba(242,168,63,.35), 0 0 4px rgba(255,219,168,1); }
}
@keyframes barShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
#scroll-progress {
  animation: barGlowPulse 1.8s ease-in-out infinite, barShimmer 2.2s linear infinite;
}

/* ── Adaptive paw cursor (mix-blend-mode: difference) ── */
*, *::before, *::after { cursor: none !important; }

.paw-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 999999;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform, opacity;
}
.paw-cursor.visible { opacity: 1; }

.paw-cursor svg {
  width: 100%; height: 100%;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
              filter 0.2s ease;
  filter: drop-shadow(0 0 0px rgba(255,255,255,0));
}
.paw-cursor.pressing svg {
  transform: scale(0.72) rotate(12deg);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
}
.paw-cursor.interactive svg {
  transform: scale(1.3);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
}

/* ── Mobile paw tap ripple ── */
@keyframes paw-tap-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(1.15); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
.paw-tap-ripple {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  width: 48px; height: 48px;
  animation: paw-tap-ripple 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.paw-tap-ripple svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 2px 10px rgba(168,71,106,0.45));
}

/* ── CTA book button pulse ── */
@keyframes ctaBookPulse {
  0%   { box-shadow: 0 4px 16px rgba(168,71,106,.4), 0 0 0 0   rgba(168,71,106,.5); }
  65%  { box-shadow: 0 4px 24px rgba(168,71,106,.5), 0 0 0 12px rgba(168,71,106,.0); }
  100% { box-shadow: 0 4px 16px rgba(168,71,106,.4), 0 0 0 0   rgba(168,71,106,.5); }
}
#cta-nav-book { animation:ctaBookPulse 2.4s ease-out infinite; }

/* ── Pull-to-Refresh indicator ── */
.ptr-indicator {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 9998;
  pointer-events: none;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  transform: translateX(-50%) translateY(-90px);
  opacity: 0;
}
.ptr-indicator.ptr-snap {
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1), opacity 0.25s ease;
}
.ptr-paw {
  width: 40px; height: 40px;
  filter: drop-shadow(0 3px 10px rgba(168,71,106,0.45));
  transform-origin: center;
}
@keyframes pawSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ptr-indicator.ptr-spinning .ptr-paw {
  animation: pawSpin 0.7s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   Hybrid lavender/glass theme — gated behind data-fx-* body attrs
   so tenants without effect* keys in tenant.config.json render
   exactly as before (see _processTenantHtml in server.mjs).
   ═══════════════════════════════════════════════════════════════ */

/* ── Navbar: frosted glass pill + gradient active state ── */
body[data-fx-glass="true"] .nav-pill,
body[data-fx-glass="true"] #navbar.scrolled .nav-pill {
  background:rgba(255,255,255,0.68);
  backdrop-filter:blur(24px) saturate(1.8); -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.85);
  border-radius:50px;
  box-shadow:0 4px 24px rgba(100,60,200,0.10);
}
body[data-fx-glass="true"] .nav-link.active {
  background:linear-gradient(135deg, var(--color-accent-primary,#6B3FA8), #9B60D0);
  color:#ffffff; border-color:transparent;
  box-shadow:0 3px 14px rgba(107,63,168,0.40);
  border-radius:50px;
}
body[data-fx-glass="true"] .nav-link.active::before { background:#ffffff; }

/* ── Buttons: pill shape, gradient primary/outline ── */
body[data-fx-glass="true"] .btn-primary {
  background:linear-gradient(135deg, var(--color-accent-primary,#6B3FA8), #9B5CD8);
  border-radius:50px;
  box-shadow:0 4px 20px rgba(107,63,168,0.40);
  transition:transform 0.18s var(--ease-spring), box-shadow 0.18s ease, background .2s ease;
}
body[data-fx-glass="true"] .btn-primary:hover {
  background:linear-gradient(135deg, var(--color-accent-primary,#6B3FA8), #9B5CD8);
  transform:translateY(-1px);
  box-shadow:0 7px 28px rgba(107,63,168,0.55);
}
body[data-fx-glass="true"] .btn-outline {
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(130,80,220,0.25);
  color:#6030B0;
  border-radius:50px;
  box-shadow:0 2px 12px rgba(100,60,200,0.08);
  transition:transform 0.18s var(--ease-spring), box-shadow 0.18s ease, background .2s ease, color .2s ease;
}
body[data-fx-glass="true"] .btn-outline:hover {
  background:rgba(255,255,255,0.88);
  border-color:rgba(130,80,220,0.25);
  color:#6030B0;
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(100,60,200,0.13);
}