/**
 * Shared storefront layer — colors/type/components aligned with the home (Hitm) page.
 * Loads after design-theme.css. Not used by the admin panel.
 */

:root{
  /* aliases for PHP templates + older SPA bundles */
  --bg:var(--bg-primary,#0a0a0b);
  --bg2:var(--bg-secondary,#121214);
  --card:var(--bg-card,#18181b);
  --text:var(--text-primary,#f4f4f5);
  --muted:var(--text-secondary,#a1a1aa);
  --dim:var(--text-muted,#71717a);
  --line:var(--border,rgba(255,255,255,.07));
  --line2:var(--border-strong,rgba(255,255,255,.12));
  --sans:var(--font-sans,"Outfit",system-ui,sans-serif);
  --mono:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  --r:var(--radius,14px);
  --glow-btn:0 10px 28px var(--accent-glow,rgba(225,29,55,.28));
  --shadow:0 24px 60px rgba(0,0,0,.45);
}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  font-family:var(--sans);
  background:
    radial-gradient(ellipse 55% 40% at 50% -5%,color-mix(in srgb,var(--accent,#e11d37) 14%,transparent),transparent 55%),
    radial-gradient(ellipse 40% 30% at 85% 100%,color-mix(in srgb,var(--accent-2,#9f1239) 10%,transparent),transparent 50%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent,#e11d37);text-decoration:none}
a:hover{color:var(--accent-hover,#e74e63)}
img{display:block;max-width:100%}
.container{width:min(1120px,calc(100% - 2.5rem));margin:0 auto}
@media(max-width:640px){.container{width:min(1120px,calc(100% - 1.5rem))}}

h1,h2,h3,.section-heading,.logo-text{
  font-family:var(--font-display,"Syne",var(--sans));
  font-weight:650;
  letter-spacing:-.03em;
}

/* Buttons — same language as home .btn-primary */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.65rem 1.35rem;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);
  font:600 .875rem/1.2 var(--sans);cursor:pointer;transition:.18s ease;
}
.btn:hover{background:rgba(255,255,255,.07);text-decoration:none}
.btn-primary,.btn.btn-primary{
  background:var(--accent,#e11d37);border-color:transparent;color:#fff;
  box-shadow:var(--glow-btn);
}
.btn-primary:hover,.btn.btn-primary:hover{
  background:var(--accent-hover,#e74e63);color:#fff;
  box-shadow:0 12px 32px var(--accent-glow,rgba(225,29,55,.4));
}
.btn-ghost{background:rgba(255,255,255,.03)}
.btn-lg{min-height:52px;padding:.9rem 1.35rem;font-size:.9rem}
.btn:disabled{opacity:.55;cursor:wait}

.glass{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(165deg,#18181b,#121214 55%,#0e0e10);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.22);
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;
  color:var(--dim);font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}
.eyebrow:before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
}

/* Checkout / auth / account (PHP fallbacks) */
.box{max-width:480px;margin:0 auto;padding:4.5rem 0 3rem}
.box h1{margin:0 0 1.2rem;font-size:clamp(1.7rem,3vw,2.2rem)}
.form{display:grid;gap:1rem;padding:1.2rem;border-radius:16px}
label.f{display:grid;gap:.35rem;font-size:.8rem;font-weight:500;color:var(--muted)}
input.f,textarea.f,select.f{
  min-height:44px;padding:.7rem .8rem;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);font:inherit;
}
input.f:focus,textarea.f:focus,select.f:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim,rgba(225,29,55,.12));
}
/* Checkout hint — Hitm muted, never green */
.box .note,.form .note,.checkout .note{
  padding:.75rem .9rem;border-radius:10px;
  border:1px solid var(--border,rgba(255,255,255,.1));
  background:rgba(255,255,255,.03);
  color:var(--muted,#a1a1aa);
  font-size:.85rem;
}
/* Pricing cards on Hitm — plain muted text, no badge/box */
.hitm-root .note,
.plan .note,
.plan-desc{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  color:var(--muted,#a1a1aa)!important;
}
.warn{
  padding:.7rem .9rem;border-radius:10px;
  border:1px solid rgba(225,29,55,.35);
  background:rgba(225,29,55,.1);
  color:#f4f4f5;font-size:.85rem;
}
.plan-sum{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:14px;margin-bottom:1rem}
.err{color:var(--danger,#f04355);font-size:.88rem}
.orders{display:grid;gap:1rem;margin-top:1rem}
.order{padding:1.15rem;border-radius:14px}
.order .meta{color:var(--dim);font-size:.78rem;margin-top:.25rem}
.creds{margin-top:.75rem;padding:.75rem;border-radius:8px;background:rgba(255,255,255,.04);font:400 .84rem/1.5 var(--mono)}
.legal{padding:3rem 0 4rem;min-height:65vh}
.legal h1{margin:0 0 1rem}
.legal .body{max-width:56ch;color:var(--muted);white-space:pre-wrap}

.legal-page{padding:clamp(2.5rem,6vw,4.5rem) 0 5rem;min-height:70vh}
.legal-wrap{max-width:720px}
.legal-title{margin:0 0 .55rem;font-family:var(--font-display,var(--sans));font-size:clamp(1.65rem,3.5vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.legal-updated{margin:0 0 1.75rem;font-size:.82rem;color:var(--dim)}
.legal-content{color:var(--muted);font-size:.95rem;line-height:1.65}
.legal-content h2{margin:1.75rem 0 .65rem;color:var(--text);font-size:1.05rem;font-weight:650;letter-spacing:-.01em}
.legal-content p{margin:0 0 .9rem}
.legal-content ul{margin:0 0 1rem;padding-left:1.2rem}
.legal-content li{margin:.35rem 0}
.legal-content strong{color:var(--text);font-weight:600}
.legal-empty{opacity:.7}
.legal-back{margin:2.25rem 0 0;font-size:.88rem}
.legal-back a{margin-right:.15rem}
.flash{padding:.8rem 1rem;text-align:center;font-size:.88rem}
.flash-success{background:rgba(225,29,55,.12);color:#f4f4f5;border:1px solid rgba(225,29,55,.25)}
.flash-error{background:color-mix(in srgb,var(--danger,#f04355) 14%,transparent);color:var(--danger,#f04355)}
.main{min-height:40vh}

/* SPA leftovers (Account / auth) — kill hard-coded ice-blue / purple */
.account-empty-state__icon{
  border-color:color-mix(in srgb,var(--accent) 25%,transparent)!important;
  background:var(--accent-dim)!important;
  color:var(--accent)!important;
}
.btn-pay{
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)!important;
  background:var(--accent-dim)!important;
  color:var(--accent)!important;
}
.btn-renew{
  border-color:color-mix(in srgb,var(--accent-2) 35%,transparent)!important;
  background:color-mix(in srgb,var(--accent-2) 12%,transparent)!important;
  color:var(--accent-2)!important;
}

/* Auth pages: ensure primary CTA matches home */
.auth-page .btn-primary,
.auth-form .btn-primary,
.vhod-page .btn-primary{
  background:var(--accent)!important;
  color:#fff!important;
  box-shadow:var(--glow-btn)!important;
  border:none!important;
}