/* Brokie modern enhancements — complements premium-design-system.css */

:root {
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.14);
}

/* Subtle header polish — templates keep their own background colors */
.site-header {
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

/* Loading state */
.btn.is-loading {
  opacity: 0.75;
  pointer-events: none;
}

/* Nav active underline */
.nav a.active,
nav a.active {
  position: relative;
}

.nav a.active::after,
nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--secondary, var(--gold, var(--accent, var(--primary, #d4a843))));
}

/* Page enter animation — active pages only */
.page.active {
  animation: pageIn 0.35s ease both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.animate-in {
  animation: fadeUp 0.55s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Toast — site templates only */
body:not(.admin-app) .toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  padding: 14px 24px;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  z-index: 9999;
}

body:not(.admin-app) .toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Filter tabs */
.filter-tab,
.filter-tag,
.menu-tab,
.pet-tab,
.billing-btn,
.order-tab,
.t-tab {
  transition: var(--transition, all 0.3s ease);
}

.filter-tab.active,
.menu-tab.active,
.pet-tab.active,
.billing-btn.active,
.order-tab.active {
  box-shadow: var(--shadow-sm);
}

/* FAQ */
.faq-item {
  transition: box-shadow var(--transition, all 0.3s ease);
}

.faq-item[open] {
  box-shadow: var(--shadow-sm);
}

/* Feature panels */
.feature-panel:not(.active) {
  display: none;
}

/* Dark mode */
body.dark-mode .site-header {
  border-bottom-color: rgba(51, 65, 85, 0.5);
}

body.dark-mode:not(.admin-app) .toast {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid #334155;
}

/* Mobile nav */
@media (max-width: 640px) {
  .nav.open,
  nav.open {
    display: flex !important;
    animation: slideDown 0.25s ease;
  }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* CTA banners */
.cta-banner,
.newsletter-cta {
  border-radius: var(--radius-lg, var(--radius-2xl));
}

/* Focus states */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--secondary, var(--gold, var(--accent, var(--primary, #d4a843))));
  outline-offset: 2px;
}

/* Admin dashboard — disable site-template overrides */
body.admin-app .section {
  animation: none;
}

body.admin-app .stat-card,
body.admin-app .panel {
  transform: none;
}

body.admin-app .stat-card:hover,
body.admin-app .panel:hover {
  transform: none;
  box-shadow: none;
}