/* ══════════════════════════════════════════════════════════════════════════
   MKPAYZ — Visual Enhancement Layer (v1)
   Loaded AFTER each page's base styles. Purely additive & fail-safe.
   Uses each page's own design tokens, so it adapts automatically:
   storefront = purple/cyan, admin = amber/blue.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Typography: crisper headings + aligned numerals ───────────────────────── */
h1, h2, h3 { letter-spacing: -0.02em; }

.card-price, .card-price strong, .hero-stat strong, .stat-value, .stat-card strong,
.info-val, .balance-amount, .od-amount, .num, .tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Accessible, on-brand focus ring (keyboard users only) ─────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 8px);
}
/* Don't show the ring for mouse clicks that leave :focus behind */
:focus:not(:focus-visible) { outline: none; }

/* ── Product cards: lift, depth, brand edge, soft top-light behind logos ───── */
/* Higher-specificity selector (.product-card.mk-reveal) guarantees this wins over
   the .mk-reveal transition, so hover shadow/border ease instead of snapping. */
.product-card,
.product-card.mk-reveal {
  transition: opacity .5s ease,
              transform .3s cubic-bezier(.2,.7,.3,1),
              box-shadow .25s ease,
              border-color .25s ease;
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px -14px rgba(0,0,0,.65);
  border-color: var(--primary);
}
/* Subtle highlight behind brand logos (adds depth on the flat image plate) */
.card-img {
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(255,255,255,.07), transparent 62%),
    #0c0e18;
}
[data-theme="light"] .card-img {
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(0,0,0,.04), transparent 62%),
    #eef2f8;
}

/* ── Gentle lift on dashboard / admin content cards ────────────────────────── */
.stat-card, .order-card, .user-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-card:hover, .order-card:hover, .user-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.55);
}

/* ── Button micro-interaction: tactile press ───────────────────────────────── */
.btn:active, .card-buy:active, .hero-search-btn:active { transform: translateY(0) scale(.985); }

/* ── Scroll-reveal (fail-safe) ─────────────────────────────────────────────────
   The hidden state is applied by JS (enhance.js) only. If JS never runs, or the
   browser prefers reduced motion, content stays fully visible.                    */
.mk-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.mk-reveal.mk-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mk-reveal, .mk-reveal.mk-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Reusable skeleton shimmer (for any future loading placeholders) ────────── */
.skeleton { position: relative; overflow: hidden; background: var(--card); border-radius: var(--radius-sm, 8px); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: mkShimmer 1.4s infinite;
}
@keyframes mkShimmer { 100% { transform: translateX(100%); } }

/* ── Trust badge row (homepage hero) ───────────────────────────────────────── */
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 50px; padding: 7px 14px;
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.trust-badge:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--text); }
.trust-badge svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }