/* ==========================================================================
   Snikus Store (store.snikus.com) — standalone checkout/storefront stylesheet

   Deliberately NOT the main app's neumorphism — this is a clean, modern,
   conversion-focused checkout look (closer to Stripe/Gumroad/Paddle's own
   checkout pages): white surfaces, one bold product card, clear pricing,
   a strong single CTA. Mobile-first: every rule below is written for a
   narrow viewport first, with a max-width wrapper doing the "desktop
   centering" rather than a breakpoint rewrite.

   Self-contained — does not import assets/css/style.css or assets/css/
   admin.css, and nothing here uses their class names, so there's no
   collision risk with either.
   ========================================================================== */

* { box-sizing: border-box; }

:root {
  --store-bg: #f7f8fc;
  --store-surface: #ffffff;
  --store-surface-alt: #f2f4fa;
  --store-border: #e6e9f2;
  --store-text: #12172b;
  --store-text-soft: #5b6579;
  --store-text-faint: #8891a3;
  --store-accent: #2e7dff;
  --store-accent-dark: #1d5fd1;
  --store-accent-soft: #eaf1ff;
  --store-success: #16a34a;
  --store-success-soft: #eafaf1;
  --store-danger: #d9342b;
  --store-danger-soft: #fdecec;
  --store-radius: 16px;
  --store-radius-sm: 10px;
  --store-shadow: 0 10px 30px rgba(18, 23, 43, 0.08);
  --store-shadow-sm: 0 2px 8px rgba(18, 23, 43, 0.05);
}

body.store-shell {
  margin: 0;
  background: var(--store-bg);
  color: var(--store-text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- Topbar ---- */
.store-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  max-width: 640px;
  margin: 0 auto;
}
.store-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  color: var(--store-text);
  text-decoration: none;
}
.store-topbar-brand img { width: 30px; height: 30px; border-radius: 8px; }
.store-topbar-right { font-size: 13.5px; color: var(--store-text-faint); }
.store-topbar-right a { color: var(--store-text-soft); font-weight: 600; }

/* ---- Page shell ---- */
.store-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 20px 60px;
}
.store-page-narrow { max-width: 480px; }

/* ---- Cards ---- */
.store-card {
  background: var(--store-surface);
  border: 1px solid var(--store-border);
  border-radius: var(--store-radius);
  box-shadow: var(--store-shadow);
  padding: 28px 26px;
  margin-bottom: 18px;
}
.store-card-center { text-align: center; }
.store-card-flat {
  background: var(--store-surface-alt);
  border: 1px solid var(--store-border);
  border-radius: var(--store-radius-sm);
  box-shadow: none;
  padding: 18px 20px;
  margin-bottom: 16px;
}

/* ---- Product hero ---- */
.store-hero {
  text-align: center;
  padding: 32px 20px 28px;
  margin: -28px -26px 24px;
  border-radius: var(--store-radius) var(--store-radius) 0 0;
  background: radial-gradient(circle at 50% 0%, var(--store-accent-soft) 0%, transparent 65%), var(--store-surface);
}
.store-hero-mascot-wrap { position: relative; display: inline-flex; margin-bottom: 14px; }
.store-hero-mascot {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--store-surface);
  box-shadow: var(--store-shadow);
  padding: 10px;
  object-fit: contain;
}
.store-hero-tick-badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: flex;
  background: var(--store-surface);
  border-radius: 50%;
  padding: 4px;
  box-shadow: var(--store-shadow-sm);
}
.store-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--store-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.store-h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.01em; }
.store-h2 { font-size: 18px; font-weight: 800; margin: 0 0 10px; }
.store-tagline { color: var(--store-text-soft); font-size: 15px; margin: 0; max-width: 340px; margin-left: auto; margin-right: auto; }
.store-muted { color: var(--store-text-faint); font-size: 13.5px; }

/* ---- Benefits list ---- */
.store-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.store-benefits li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--store-text); font-weight: 600; text-align: left; }
.store-benefits li .store-benefit-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--store-success-soft);
  color: var(--store-success);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Trust strip (below CTA) ---- */
.store-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 12px;
  color: var(--store-text-faint);
  font-weight: 600;
}
.store-trust-strip span { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Interval toggle (Monthly / Yearly) ---- */
.store-interval-toggle {
  display: inline-flex;
  background: var(--store-surface-alt);
  border: 1px solid var(--store-border);
  border-radius: 999px;
  padding: 4px;
  margin: 4px 0 18px;
}
.store-interval-btn {
  border: none;
  background: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--store-text-soft);
  cursor: pointer;
}
.store-interval-btn.active { background: var(--store-accent); color: #fff; }

.store-price-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 4px; }
.store-price { font-size: 34px; font-weight: 800; color: var(--store-text); }
.store-price-period { font-size: 14px; color: var(--store-text-faint); font-weight: 600; }

/* ---- Buttons ---- */
.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--store-radius-sm);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.store-btn-primary { background: var(--store-accent); color: #fff; }
.store-btn-primary:hover { background: var(--store-accent-dark); }
.store-btn-ghost { background: var(--store-surface); color: var(--store-text-soft); border: 1px solid var(--store-border); }
.store-btn-ghost:hover { background: var(--store-surface-alt); }
.store-btn-danger { background: var(--store-danger-soft); color: var(--store-danger); border: 1px solid rgba(217, 52, 43, 0.25); }
.store-btn-sm { padding: 9px 16px; font-size: 13.5px; width: auto; }

/* ---- Alerts ---- */
.store-alert { border-radius: var(--store-radius-sm); padding: 12px 16px; font-size: 13.5px; margin-bottom: 16px; }
.store-alert-success { background: var(--store-success-soft); color: #0a7a4c; }
.store-alert-error { background: var(--store-danger-soft); color: #b3241b; }

/* ---- Forms ---- */
.store-field { margin-bottom: 16px; text-align: left; }
.store-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--store-text); }
.store-field textarea,
.store-field input[type="text"] {
  width: 100%;
  background: var(--store-surface);
  border: 1px solid var(--store-border);
  border-radius: var(--store-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--store-text);
}
.store-field textarea { min-height: 90px; resize: vertical; }
.store-field textarea:focus, .store-field input[type="text"]:focus {
  outline: none;
  border-color: var(--store-accent);
  box-shadow: 0 0 0 3px var(--store-accent-soft);
}

/* ---- History table ---- */
.store-table-wrap { overflow-x: auto; }
.store-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.store-table th { text-align: left; color: var(--store-text-faint); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--store-border); white-space: nowrap; }
.store-table td { padding: 8px 10px; border-bottom: 1px solid var(--store-border); color: var(--store-text); }

.store-status-pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize; }
.store-status-active { background: var(--store-success-soft); color: #0a7a4c; }
.store-status-past_due, .store-status-pending { background: #fef3c7; color: #92400e; }
.store-status-canceled, .store-status-paused { background: var(--store-danger-soft); color: #b3241b; }

/* ---- Footer trust strip ---- */
.store-footer {
  text-align: center;
  padding: 24px 20px 40px;
  color: var(--store-text-faint);
  font-size: 12.5px;
}
.store-footer a { color: var(--store-text-faint); }

@media (min-width: 640px) {
  .store-card { padding: 36px 40px; }
  .store-h1 { font-size: 28px; }
  .store-hero { margin: -36px -40px 24px; }
}