/* NIBVOK Store — product & pricing storefront
   Companion to pages/pricing-dashboard.html.
   Uses the design tokens defined in landing.css (:root). */

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* ---------- Header ---------- */
.header { text-align: center; padding: 56px 0 36px; }
.header .logo {
  font-size: 34px; font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 18px; color: var(--dark);
}
.header .logo .ox { color: var(--primary); }
.header h1 {
  font-size: 40px; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 12px; color: var(--dark);
}
.header p { font-size: 17px; color: var(--gray); margin: 0 auto; max-width: 620px; }

/* ---------- Plan grid ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  align-items: start;
  margin-bottom: 56px;
}
.pricing-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 0;                 /* SamCart: square panels, no pills */
  padding: 34px 26px;              /* SamCart: generous panel padding */
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pricing-card.popular {
  border: 2px solid var(--primary);
  box-shadow: 0 12px 40px rgb(var(--nv-accent-rgb) / 0.18);
}
.pricing-card .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: var(--nv-on-dark);
  font-family: var(--nv-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 0; white-space: nowrap;
}

.plan-name {
  font-family: var(--nv-font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 10px;
}
.plan-price {
  font-size: 42px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--dark); line-height: 1.05;
}
.plan-price span { font-size: 15px; font-weight: 600; color: var(--gray); }
.plan-tokens {
  margin: 12px 0 10px; font-size: 14px; font-weight: 700; color: var(--warning);
  display: flex; align-items: center; gap: 7px;
}
.plan-description { font-size: 14px; color: var(--gray); margin-bottom: 18px; }

.features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.features li {
  font-size: 14px; color: var(--dark-secondary);
  padding: 7px 0; display: flex; align-items: flex-start; gap: 9px;
}
.features li i { color: var(--success); font-size: 13px; margin-top: 3px; }

.btn-plan {
  width: 100%; padding: 16px 22px; border: none; border-radius: 0;
  background: var(--primary); color: var(--nv-on-dark);
  font-family: var(--nv-font-mono); font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  cursor: pointer; transition: var(--transition);
}
.btn-plan:hover:not(:disabled) { background: var(--primary-dark); transform: none; }
.btn-plan:disabled { background: var(--gray-light); color: var(--gray); cursor: default; }
.btn-plan.free { background: var(--gray-bg); color: var(--gray); }

/* ---------- Section headings ---------- */
.token-section, .addons-section, .referral-section, .library-section { margin-bottom: 56px; }
.token-section h2, .addons-section h2, .referral-section h2, .library-section h2 {
  font-size: 25px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--dark); margin: 0 0 8px;
  display: flex; align-items: center; gap: 11px;
}
.token-section h2 i, .addons-section h2 i, .referral-section h2 i, .library-section h2 i {
  color: var(--primary); font-size: 21px;
}
.section-sub { font-size: 15px; color: var(--gray); margin: 0 0 24px; }

/* ---------- Token packs ---------- */
.token-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 16px; margin-top: 22px;
}
.token-card {
  background: var(--white); border: 1px solid var(--gray-light);
  border-radius: 0; padding: 26px 20px; text-align: center;
  box-shadow: var(--shadow); transition: var(--transition); position: relative;
}
.token-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgb(var(--nv-accent-rgb) / 45%); }
.token-card.best { border: 2px solid var(--primary); }
.token-card .tok-amount {
  font-size: 32px; font-weight: 800; color: var(--primary);
  letter-spacing: -0.02em; line-height: 1.1;
}
.token-card .tok-unit { font-family: var(--nv-font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; }
.token-card .tok-price { font-size: 22px; font-weight: 800; color: var(--dark); }
.token-card .tok-bonus {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700;
  color: var(--success); background: var(--nv-success-soft);
  padding: 3px 9px; border-radius: 0;
}
.token-card .tok-rate { font-size: 12px; color: var(--gray); margin-top: 8px; }
.token-card .btn-token {
  width: 100%; margin-top: 16px; padding: 13px; border: 1px solid var(--primary);
  background: transparent; color: var(--primary); font-weight: 700; font-size: 14px;
  font-family: var(--nv-font-mono); letter-spacing: 0.02em; text-transform: uppercase;
  border-radius: 0; cursor: pointer; transition: var(--transition);
}
.token-card .btn-token:hover { background: var(--primary); color: var(--nv-on-dark); }

/* ---------- Add-ons ---------- */
.addon-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 22px;
}
.addon-card {
  background: var(--white); border: 1px solid var(--gray-light);
  border-radius: 0; padding: 26px; box-shadow: var(--shadow);
  transition: var(--transition); display: flex; flex-direction: column;
}
.addon-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgb(var(--nv-accent-rgb) / 45%); }
.addon-card .addon-name { font-size: 16px; font-weight: 800; color: var(--dark); margin-bottom: 6px; }
.addon-card .addon-desc { font-size: 14px; color: var(--gray); flex: 1; margin-bottom: 14px; }
.addon-card .addon-price { font-size: 21px; font-weight: 800; color: var(--primary); }
.addon-card .addon-price span { font-size: 13px; font-weight: 600; color: var(--gray); }

/* ---------- Downloadable library ---------- */
.library-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px; margin-top: 22px;
}
/* Hover/focus "blow up": the card scales, and a detail panel unfolds BELOW it
   with the real numbers and a sample of the actual file.

   The panel is absolutely positioned on purpose. Revealing it in normal flow
   would grow the card's grid row and shove every card under it down the page,
   so moving the mouse across the grid would make the whole storefront jump.
   Out of flow, the card enlarges and the detail appears over the page instead. */
.library-card {
  position: relative; z-index: 1;
  background: var(--white); border: 1px solid var(--gray-light);
  border-radius: 0; padding: 26px; box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  display: flex; flex-direction: column;
}
.library-card:hover,
.library-card:focus,
.library-card:focus-within,
.library-card.is-expanded {
  transform: scale(1.07);
  z-index: 30;
  border-color: rgb(var(--nv-accent-rgb) / 55%);
  box-shadow: 0 22px 60px rgb(var(--nv-accent-rgb) / 0.22);
}
.library-card:focus-visible { outline: 2px solid var(--nv-accent); outline-offset: 2px; }

.library-card .lib-more {
  position: absolute; top: 100%; left: -1px; right: -1px; margin-top: 10px;
  background: var(--white);
  border: 1px solid rgb(var(--nv-accent-rgb) / 45%);
  box-shadow: 0 18px 44px rgba(15, 14, 23, 0.18);
  padding: 18px 20px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  /* Nothing interactive lives in the panel, so it never eats a click. */
  pointer-events: none;
}
.library-card:hover .lib-more,
.library-card:focus .lib-more,
.library-card:focus-within .lib-more,
.library-card.is-expanded .lib-more {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.library-card .lib-more-h {
  font-family: var(--nv-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 8px;
}
.library-card .lib-more-h ~ .lib-more-h { margin-top: 15px; }
.library-card .lib-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.library-card .lib-facts span {
  font-size: 12px; font-weight: 700; color: var(--dark-secondary);
  border: 1px solid var(--gray-light); padding: 4px 9px;
}
.library-card .lib-sample { display: grid; gap: 8px; }
.library-card .lib-sample-row {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  border-left: 2px solid rgb(var(--nv-accent-rgb) / 45%); padding-left: 10px;
}
.library-card .lib-sample-cell { font-size: 12px; color: var(--gray); }
.library-card .lib-sample-cell b {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--dark-secondary);
}

/* Reduced motion: drop the scale and the animation, but keep the detail
   reachable - the panel is the point of the interaction. */
@media (prefers-reduced-motion: reduce) {
  .library-card, .library-card .lib-more { transition: none; }
  .library-card:hover,
  .library-card:focus,
  .library-card:focus-within,
  .library-card.is-expanded { transform: none; }
  .library-card .lib-more { transform: none; }
}
.library-card .lib-cat {
  font-family: var(--nv-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 9px;
}
.library-card .lib-cat::before { content: "→ "; }
.library-card .lib-title { font-size: 17px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.library-card .lib-desc { font-size: 14px; color: var(--gray); flex: 1; margin-bottom: 14px; }
.library-card .lib-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--gray-light);
}
.library-card .lib-price { font-size: 20px; font-weight: 800; color: var(--dark); }
.library-card .btn-download {
  padding: 12px 20px; border-radius: 0; border: none;
  background: var(--primary); color: var(--nv-on-dark); font-weight: 700; font-size: 14px;
  font-family: var(--nv-font-mono); letter-spacing: 0.02em; text-transform: uppercase;
  cursor: pointer; transition: var(--transition);
}
.library-card .btn-download:hover { background: var(--primary-dark); }
.library-card .lib-owned {
  font-size: 13px; font-weight: 700; color: var(--success);
  display: flex; align-items: center; gap: 6px;
}

/* ---------- Referral ---------- */
.referral-section p { color: var(--gray); margin-bottom: 12px; }
.commission-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin: 20px 0 26px;
}
.commission-card {
  background: var(--white); border: 1px solid var(--gray-light);
  border-radius: 0; padding: 22px; text-align: center; box-shadow: var(--shadow);
}
.commission-card .amount { font-size: 25px; font-weight: 800; color: var(--primary); }
.commission-card .label { font-size: 12px; font-weight: 600; color: var(--gray); margin-top: 5px; }

.upgrade-path { display: grid; gap: 10px; }
.upgrade-path .step {
  display: flex; align-items: center; gap: 13px;
  background: var(--white); border: 1px solid var(--gray-light);
  border-radius: 0; padding: 16px 20px; font-size: 14px; color: var(--dark-secondary);
}
.upgrade-path .step .num {
  flex: none; width: 26px; height: 26px; border-radius: 0;
  background: var(--primary); color: var(--nv-on-dark); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.upgrade-path .highlight { color: var(--primary); font-weight: 800; }

/* ---------- Utility ---------- */
.loading-note { color: var(--gray); font-size: 14px; padding: 16px 0; }

@media (max-width: 640px) {
  .header h1 { font-size: 30px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .plan-price { font-size: 34px; }
}