/* Hover / focus / responsive behaviours that the React app implemented with
   inline JS handlers. Layered on top of the compiled Tailwind output. */

html, body {
  background-color: #fafbfd; /* Soft clinical blue-white */
  font-family: 'Outfit', 'system-ui', sans-serif;
}

.zv-nav-logo { width: 6rem; height: auto; }
@media (min-width: 640px) { .zv-nav-logo { width: 8rem; } }

/* Fluid Animations for Vials */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}
@keyframes float-slow {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-25px); }
  100% { transform: translateY(0px); }
}
@keyframes float-fast {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
@keyframes pulse-glow {
  0% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
  100% { opacity: 0.4; transform: scale(1); }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 4.5s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out infinite 2s; }
.animate-float-slow-delayed { animation: float-slow 8s ease-in-out infinite 3s; }
.animate-pulse-glow { animation: pulse-glow 8s ease-in-out infinite; }

.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ---- nav links ---- */
.zv-nav:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  color: #0f172a !important;
}

/* ---- nav dropdown mega-menus ---- */
.zv-panel { display: none; }
.zv-explore-panel {
  width: calc(100vw - 1.5rem);
  max-width: 42rem;
}
.zv-explore-panel > .glass-panel {
  max-height: calc(100dvh - 6.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 640px) {
  .zv-explore-panel { width: calc(100vw - 2rem); }
}
.zv-menu.open .zv-panel { display: block; }
.zv-menu.open .zv-trigger {
  background-color: #0f172a !important;
  color: #fff !important;
}
.zv-menu.open .zv-trigger svg {
  color: #fff !important;
}
.zv-menu.open .zv-chevron { transform: rotate(180deg); }
.zv-subpanel { display: none; }
.zv-subgroup.open .zv-subpanel { display: grid; }
.zv-subgroup.open .zv-subpanel.zv-subpanel-stack { display: flex; }
.zv-subgroup.open .zv-subtrigger {
  background-color: rgba(241, 245, 249, 0.5);
  color: #0f172a;
}
.zv-subgroup.open .zv-subchev { transform: rotate(180deg); }

/* ---- generic silver CTA buttons ---- */
.zv-cta:hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
}

/* ---- stack pills + related cards on the detail page ---- */
.zv-pill:hover {
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
.zv-rel:hover { border-color: #cbd5e1 !important; }

/* ---- back links (subtle colour shift) ---- */
.zv-back:hover { color: #0f172a !important; }

/* ---- calculator ---- */
.zv-input:focus { border-color: #94a3b8 !important; }
.zv-reset:hover {
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* ---- search ---- */
.zv-search:focus { border-color: #94a3b8 !important; }

/* FAQ accordion */
.zv-faq > summary { list-style: none; }
.zv-faq > summary::-webkit-details-marker { display: none; }
.zv-faq > summary:hover { background-color: #f8f9fb; }
.zv-faq[open] > summary { background-color: #f8f9fb; }
.zv-faq[open] .zv-faq-chevron { transform: rotate(180deg); }

/* Home card pack selector */
.zv-pack-opt {
  background-color: transparent;
  color: #64748b;
}
.zv-pack-opt.zv-selected {
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* New redesign styles */
.zv-card-item:hover .zv-card-overlay {
  background-color: rgba(239,246,255, 0.4);
}
.zv-card-item:hover .zv-card-title {
  color: #1d4ed8 !important;
}
.zv-add-card:hover {
  background-color: #2563eb !important;
  box-shadow: 0 4px 14px 0 rgba(59,130,246,0.2);
}
.zv-add-card.added {
  background-color: #10b981 !important;
  box-shadow: 0 4px 14px 0 rgba(16,185,129,0.2);
}
.zv-pop-card:hover .zv-pop-bubble {
  background-color: #0f172a !important;
  color: #fff !important;
}


/* ---- category buttons ---- */
.zv-catbtn { transition: all 0.3s ease; }
.zv-catbtn[style*="background-color:#fff"]:hover,
.zv-catbtn[style*="background-color: #fff"]:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
.zv-catbtn[style*="background-color:#0f172a"],
.zv-catbtn[style*="background-color: #0f172a"] {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  transform: scale(1.05);
}

/* Custom responsive typography & sizing to replace arbitrary Tailwind classes */
.zv-hero-title { font-size: 2.75rem; line-height: 1.05; }
@media (min-width: 640px) { .zv-hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .zv-hero-title { font-size: 72px; } }

.zv-hero-copy { order: 2; }
.zv-hero-vials { order: 1; height: 290px; max-width: 390px; margin-inline: auto; overflow: visible; }
.zv-vial-main { height: 200px; max-width: 100%; }
.zv-vial-pos-tl { top: 9%; left: 8%; }
.zv-vial-img-tl { height: 110px; }
.zv-vial-pos-tr { top: 5%; right: 8%; }
.zv-vial-img-tr { height: 110px; }
.zv-vial-pos-bl { bottom: 3%; left: 12%; }
.zv-vial-img-bl { height: 100px; }
.zv-vial-pos-br { bottom: 6%; right: 12%; }
.zv-vial-img-br { height: 105px; }
@media (min-width: 640px) {
  .zv-hero-vials { height: 400px; max-width: none; }
  .zv-vial-pos-tl { left: 4%; }
  .zv-vial-pos-tr { right: 4%; }
  .zv-vial-pos-bl { left: 8%; }
  .zv-vial-pos-br { right: 6%; }
  .zv-vial-main { height: 280px; }
  .zv-vial-img-tl, .zv-vial-img-tr { height: 150px; }
  .zv-vial-img-bl { height: 140px; }
  .zv-vial-img-br { height: 145px; }
}
@media (min-width: 1024px) {
  .zv-hero-copy { order: 1; }
  .zv-hero-vials { order: 2; height: 500px; }
  .zv-vial-main { height: 405px; }
  .zv-vial-pos-tl { left: 5%; }
  .zv-vial-img-tl { height: 215px; }
  .zv-vial-pos-tr { right: 5%; }
  .zv-vial-img-tr { height: 215px; }
  .zv-vial-pos-bl { left: 11%; }
  .zv-vial-img-bl { height: 190px; }
  .zv-vial-pos-br { right: 9%; }
  .zv-vial-img-br { height: 200px; }
}

.zv-pop-img-box { height: 140px; }
@media (min-width: 640px) { .zv-pop-img-box { height: 180px; } }
.zv-pop-img { height: 85%; }

.zv-grid-img-box { height: 260px; }

.zv-text-11 { font-size: 11px; line-height: 1.5; }
.zv-text-10 { font-size: 10px; line-height: 1.5; }
.zv-text-9 { font-size: 9px; line-height: 12px; }

.zv-mobile-overview {
  margin-top: 1.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 1rem;
  line-height: 1.625;
}

.zv-skip-link {
  position: fixed;
  z-index: 99999;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-180%);
  border-radius: 0.75rem;
  background: #0f172a;
  color: #fff;
  padding: 0.75rem 1rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

.zv-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-float-slow, .animate-float-fast, .animate-float-delayed, .animate-float-slow-delayed, .animate-pulse-glow {
    animation: none !important;
    transform: none !important;
  }
}