/* Shared additive styles for the account system (register/login/credits pages
   and the auth-status nav snippet on the existing pages). Loaded on top of
   each page's own inline <style> block — relies on the --orange/--ink/etc.
   custom properties every page already defines in its own :root. */

.age-strip .wrap{padding:5px}

.auth-status{display:flex;align-items:center;gap:12px;font-weight:800;font-size:14px}
.auth-login{background:var(--orange);color:#fff;padding:11px 15px;border-radius:999px}
.auth-credits{white-space:nowrap}
.auth-logout{background:var(--orange);color:#fff;padding:11px 15px;border-radius:999px}
.auth-logout:hover{background:var(--orange-dark)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:12px;font-weight:900}
.btn.primary{background:var(--orange);color:#fff;border:none;cursor:pointer}
.btn.secondary{border:1px solid var(--ink);background:#fff}

.auth-form{max-width:420px;margin:0 auto}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-weight:800;font-size:13px;margin-bottom:6px}
.form-field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;box-sizing:border-box}
.form-field input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.field-error{color:#c0392b;font-size:13px;margin:6px 0 0}
.form-error-banner{background:#fdecea;border:1px solid #f5c6cb;color:#c0392b;padding:12px 14px;border-radius:10px;margin-bottom:18px;font-weight:700}
.auth-form .btn{width:100%;margin-top:6px;font-size:15px}
.auth-switch{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}
.auth-switch a{color:var(--orange-dark);font-weight:800}

.credits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.credits-card{text-align:center}
.credits-card h2{margin:0 0 8px;font-size:28px}
.credits-price{font-size:22px;font-weight:900;color:var(--orange-dark);margin:0 0 18px}
.credits-card .btn{width:100%;font-size:15px}

.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-panel{position:relative;max-width:420px;margin:12vh auto;background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);text-align:center}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.modal-close:hover{color:var(--ink)}
.modal-panel h2{margin:0 0 10px}
.modal-panel p{margin:0;color:var(--muted)}

.legal-card h3{font-size:22px;margin:26px 0 8px}
.legal-table-wrap{overflow-x:auto;margin:20px 0}
.legal-table{width:100%;border-collapse:collapse}
.legal-table th,.legal-table td{border:1px solid #ddd;padding:12px 14px;text-align:left;vertical-align:top}
.legal-table th{background:#f7f7f7;font-weight:900}

/* Hamburger navigation. Desktop: .nav-panel is a plain inline row (Terms/
   Privacy/Home, then auth-status) — unchanged from the original layout.
   Mobile: only the hamburger button stays in the header row itself (so it
   sits top-right, next to the logo). .nav-panel wraps onto its own full-
   width line (real document flow, NOT position:absolute) so its height —
   dominated by the always-visible auth-status row, reordered to render
   first — actually pushes .header-row taller, which correctly pushes
   whatever comes after the header (e.g. the age verification strip) down
   instead of being covered by it. Only .primary-nav itself (the collapsible
   Terms/Privacy/Home links) is position:absolute, anchored to .nav-panel
   (not .site-header) — an overlay is fine there since it's a temporary,
   user-triggered state, not permanent header content. */
.nav-panel{display:flex;align-items:center;gap:22px}
.primary-nav{display:flex;align-items:center;gap:22px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;border:none;background:none;cursor:pointer;flex-shrink:0}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:870px){
    .credits-grid{grid-template-columns:1fr}
    .header-row{height:auto;min-height:70px;flex-wrap:wrap}
    .nav-toggle{display:flex}
    .nav-panel{
        flex-basis:100%;order:3;
        display:flex;flex-direction:column;align-items:stretch;gap:0;
    }
    .auth-status{order:-1;padding:14px 20px}
    .primary-nav{
        position:absolute;top:100%;left:0;right:0;z-index:15;
        background:#fff;border-bottom:1px solid var(--line);
        box-shadow:0 18px 40px rgba(0,0,0,.12);
        display:flex;flex-direction:column;align-items:stretch;gap:0;
        max-height:0;overflow:hidden;
        transition:max-height .25s ease;
    }
    .primary-nav a{padding:14px 20px;border-top:1px solid #f0f0f0;margin:0}
    .primary-nav.is-open{max-height:70vh;overflow-y:auto}
}