/* ==========================================================================
   Rovin App — additive styles.
   Loaded on top of ../css/style.css, which already provides the brand
   tokens, buttons, cards, tier badges, drop cards, tabs, accordion, forms,
   pricing cards, and the toast component. This file only adds what's
   specific to the app shell.
   ========================================================================== */

html, body { min-height: 100%; background: var(--cream-50); }

.app-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,248,243,0.85);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(18,20,28,0.06);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.app-nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--space-6); max-width: var(--container); margin: 0 auto;
  gap: var(--space-5); flex-wrap: wrap;
}
.app-nav-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.app-nav-links a {
  padding: 9px 16px; border-radius: var(--radius-full); font-weight: 700; font-size: 0.9rem;
  color: var(--muted-500); transition: color var(--dur-fast) var(--ease), background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
  position: relative;
}
.app-nav-links a:hover { color: var(--ink-900); background: var(--cream-100); }
.app-nav-links a.active { color: var(--ink-900); background: var(--cream-200); }
.app-nav-links a:active { transform: scale(0.96); }
.app-nav-right { display: flex; align-items: center; gap: 10px; }
.plan-pill {
  font-size: 0.78rem; font-weight: 800; padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--navy-900); color: var(--cream-50); white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.plan-pill:hover { transform: translateY(-1px); }
.plan-pill.plan-wander { background: linear-gradient(120deg, #384368, #1a2138); }
.plan-pill.plan-summit { background: var(--gradient-gold); color: var(--ink-900); box-shadow: var(--elevate-gold); }

.app-main { max-width: var(--container); margin: 0 auto; padding: var(--space-7) var(--space-6) var(--space-9); }

.back-to-site { font-size: 0.82rem; color: var(--muted-400); font-weight: 600; transition: color var(--dur-fast) var(--ease); }
.back-to-site:hover { color: var(--ink-900); }

/* Every top-level app view fades/settles in on route change — cheap, safe,
   and purely visual: applied via a plain CSS class already-present markup
   can opt into, no JS wiring required since it just animates once on
   insertion (same "grow" that Notion/Linear-style SPAs use between views). */
.app-main, #view { animation: eb-fade-up var(--dur-slow) var(--ease-out); }

/* ---------- Login ---------- */
.login-wrap { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: var(--space-7) var(--space-5); }
.login-card { max-width: 420px; width: 100%; animation: eb-fade-up var(--dur-slower) var(--ease-out); }
.demo-divider { display: flex; align-items: center; gap: 12px; margin: var(--space-5) 0; color: var(--muted-400); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.demo-divider::before, .demo-divider::after { content: ''; flex: 1; height: 1px; background: var(--line-200); }
.demo-buttons { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-7); }
.filter-bar input[type="text"], .filter-bar select {
  padding: 11px 16px; border-radius: 10px; border: 1px solid var(--line-200);
  background: #fff; font-family: inherit; font-size: 0.9rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.filter-bar input[type="text"]:focus, .filter-bar select:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--ring-gold); }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  padding: 9px 16px; border-radius: var(--radius-full); border: 1px solid var(--line-200);
  background: #fff; font-weight: 700; font-size: 0.85rem; color: var(--muted-500);
  transition: all var(--dur-base) var(--ease-out);
}
.filter-chip:hover:not(.active) { border-color: rgba(18,20,28,0.28); color: var(--ink-700); transform: translateY(-1px); }
.filter-chip.active { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-900); }
.results-count { color: var(--muted-500); font-size: 0.9rem; margin-bottom: var(--space-5); }

.drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.drop-card-link { display: block; position: relative; cursor: pointer; animation: eb-fade-up var(--dur-slow) var(--ease-out) backwards; }
.drop-card-link:hover .drop-card { transform: translateY(-6px); box-shadow: var(--elevate-3); }
/* Stagger the whole feed in, capped at a handful of items so a long list
   doesn't leave the last cards waiting a visibly long time to appear. */
.drop-grid .drop-card-link:nth-child(1) { animation-delay: 0.02s; }
.drop-grid .drop-card-link:nth-child(2) { animation-delay: 0.06s; }
.drop-grid .drop-card-link:nth-child(3) { animation-delay: 0.1s; }
.drop-grid .drop-card-link:nth-child(4) { animation-delay: 0.14s; }
.drop-grid .drop-card-link:nth-child(5) { animation-delay: 0.18s; }
.drop-grid .drop-card-link:nth-child(n+6) { animation-delay: 0.2s; }
.lock-overlay {
  position: absolute; inset: 0; border-radius: var(--radius-md);
  background: rgba(18,20,28,0.72); backdrop-filter: blur(2px); color: var(--cream-50);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: var(--space-5); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); gap: 8px;
}
.drop-card-link:hover .lock-overlay.show-on-hover { opacity: 1; }
.lock-overlay.always-on { opacity: 1; position: static; margin-top: var(--space-4); background: var(--cream-100); color: var(--ink-700); border-radius: 12px; backdrop-filter: none; }
.empty-state { text-align: center; padding: var(--space-9) var(--space-5); color: var(--muted-500); animation: eb-fade-up var(--dur-slow) var(--ease-out); }

/* ---------- Drop detail ---------- */
.detail-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; }
.detail-info h1 { margin-top: 10px; }
.detail-meta { display: flex; gap: 10px; align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; }
.reason-banner {
  background: var(--cream-100); border-radius: 12px; padding: 14px 18px; margin-top: var(--space-5);
  font-size: 0.9rem; color: var(--ink-700); border-left: 3px solid var(--gold-500);
  animation: eb-fade-up var(--dur-slow) var(--ease-out);
}

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-7); align-items: start; }
.order-summary { background: var(--cream-100); border-radius: var(--radius-md); padding: var(--space-6); position: sticky; top: 90px; transition: box-shadow var(--dur-base) var(--ease-out); }
.order-summary .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.92rem; color: var(--ink-700); }
.order-summary .row.total { border-top: 1px solid var(--line-200); margin-top: 8px; padding-top: 14px; font-weight: 800; font-size: 1.1rem; }

/* ---------- Wallet ---------- */
.pass-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
.pass-card {
  background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: var(--space-5);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  animation: eb-fade-up var(--dur-slow) var(--ease-out) backwards;
}
.pass-card:hover { transform: translateY(-4px); box-shadow: var(--elevate-2); }
.pass-card.is-used, .pass-card.is-expired { opacity: 0.6; }
.pass-card.is-used:hover, .pass-card.is-expired:hover { transform: none; box-shadow: none; }
.qr-box { display: flex; justify-content: center; padding: var(--space-4) 0; }
.qr-box img { border-radius: 12px; border: 1px solid var(--line-200); transition: transform var(--dur-base) var(--ease-out); }
.pass-card:hover .qr-box img { transform: scale(1.03); }
.pass-status-line { text-align: center; font-size: 0.85rem; color: var(--muted-500); margin-top: 6px; }

/* ---------- Account ---------- */
.account-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-7); align-items: start; }
.account-profile { background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: var(--space-6); text-align: center; }
.avatar-circle {
  width: 72px; height: 72px; border-radius: 50%; background: var(--gradient-gold);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head);
  font-weight: 800; font-size: 1.6rem; color: var(--ink-900); margin: 0 auto var(--space-4);
  box-shadow: var(--elevate-gold);
}
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line-200); }
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: var(--line-200); border-radius: var(--radius-full); cursor: pointer; transition: background var(--dur-base) var(--ease-out);
}
.switch-track::before {
  content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-spring); box-shadow: var(--shadow-sm);
}
.switch input:checked + .switch-track { background: var(--gold-500); }
.switch input:checked + .switch-track::before { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.mini-plan-card { border: 1px solid var(--line-200); border-radius: var(--radius-md); padding: var(--space-5); position: relative; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.mini-plan-card:hover { transform: translateY(-3px); box-shadow: var(--elevate-2); }
.mini-plan-card.current { border-color: var(--gold-500); box-shadow: var(--ring-gold); }
.mini-plan-card.current:hover { box-shadow: var(--ring-gold), var(--elevate-2); }
.mini-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

@media (max-width: 900px) {
  .detail-grid, .checkout-grid, .account-grid { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .mini-plan-grid { grid-template-columns: 1fr; }
}