/* Shared public-site header (app/views/home/_nav.php) — self-contained; used by landing, recharge, login and payment-result pages */
.sn-header { --sn-ink: #0b2540; --sn-primary: #0891b2; --sn-primary-dark: #0e7490; --sn-accent: #f97316; --sn-line: #e2e8f0;
  position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sn-line); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.4; }
.sn-header *, .sn-header *::before, .sn-header *::after { box-sizing: border-box; }
.sn-nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 68px; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.sn-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.2rem; color: var(--sn-ink) !important; text-decoration: none !important; min-width: 0; }
.sn-brand img { border-radius: 8px; flex: none; }
.sn-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; background: none; border: 1px solid var(--sn-line); border-radius: 10px; cursor: pointer; flex: none; }
.sn-toggle span { display: block; height: 2px; background: var(--sn-ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.sn-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sn-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sn-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sn-menu { position: absolute; inset: 68px 0 auto 0; display: none; flex-direction: column; gap: 2px; margin: 0; list-style: none; padding: 12px 20px 20px; background: #fff; border-bottom: 1px solid var(--sn-line); box-shadow: 0 16px 30px rgba(11, 37, 64, .12); max-height: calc(100vh - 68px); overflow-y: auto; }
.sn-menu.is-open { display: flex; }
.sn-menu a { display: block; padding: .8rem .4rem; color: var(--sn-ink); font-weight: 500; font-size: .95rem; border-radius: 8px; text-decoration: none; }
.sn-menu a:hover { color: var(--sn-primary-dark); text-decoration: none; }
.sn-menu a.is-active { color: var(--sn-primary-dark); font-weight: 700; }
.sn-cta { margin-top: 8px; }
.sn-menu .sn-btn { text-align: center; border: 1.5px solid var(--sn-primary); color: var(--sn-primary-dark); padding: .55rem 1.1rem; border-radius: 10px; font-weight: 600; transition: background .2s, color .2s; }
.sn-menu .sn-btn:hover, .sn-menu .sn-btn.is-active { background: var(--sn-primary); color: #fff; }
.sn-skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: #fff; color: #0b2540; padding: 8px 14px; border-radius: 8px; }
.sn-skip:focus { left: 8px; }
.sn-header a:focus-visible, .sn-header button:focus-visible { outline: 3px solid var(--sn-accent); outline-offset: 2px; }
@media (min-width: 992px) {
  .sn-toggle { display: none; }
  .sn-menu { position: static; display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; }
  .sn-menu a { padding: .5rem .75rem; }
  .sn-cta { margin: 0 0 0 10px; }
}
@media (max-width: 380px) { .sn-nav { padding: 0 16px; } .sn-brand span { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .sn-toggle span, .sn-menu .sn-btn { transition: none; } }
@media print { .sn-header { display: none !important; } }