/* ============================================================
   BEASTLY — wspólny motyw dla podstron (koszyk, regulamin,
   śledzenie, panel, strony prawne). Landing (index.html) ma
   własne style inline.
   ============================================================ */
:root{
  --bg:#050608; --bg-2:#080b12; --panel:#0b0f18; --panel-2:#0f1420; --panel-3:#131a28;
  --line:rgba(120,170,255,.12); --line-strong:rgba(120,170,255,.24);
  --blue:#1e9bff; --blue-bright:#49b4ff; --blue-soft:#86c6ff; --cyan:#62e3ff;
  --white:#fff; --text:#e8eef8; --text-dim:#9fb1ca; --text-faint:#5d6c85;
  --stock:#3ee08b; --warn:#ffb155; --err:#ff6b78;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --maxw:1080px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Saira Condensed",system-ui,sans-serif;
  --body:"Saira",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(820px 620px at 82% -8%, rgba(30,155,255,.13), transparent 60%),radial-gradient(700px 700px at 0% 10%, rgba(30,120,255,.08), transparent 60%),linear-gradient(180deg,#04050a,#050608 45%,#04060b)}
.wrap{position:relative;z-index:1}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:780px}
a{color:var(--blue-soft);text-decoration:none}
a:hover{color:#fff}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:6px}
img{max-width:100%}
.mono{font-family:var(--mono)}

h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;margin:0;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(34px,5vw,54px)}
h2{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:.03em}
p{margin:0 0 14px}
.lead{color:var(--text-dim);font-size:18px}
.muted{color:var(--text-faint)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--blue-soft);display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}
.eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--blue),transparent)}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(5,7,12,.72);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.brand .mark{width:28px;height:28px;flex:none}
.brand b{color:#fff}
.nav-back{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--text-dim)}
.nav-back:hover{color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:16px;padding:15px 26px;border-radius:var(--r-sm);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.btn-primary{color:#02060d;background:linear-gradient(180deg,#7fc8ff,var(--blue) 60%,#1786ec);box-shadow:0 0 0 1px rgba(150,200,255,.5) inset,0 14px 36px -12px rgba(30,155,255,.8)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(180,220,255,.7) inset,0 22px 50px -14px rgba(30,155,255,.95)}
.btn-primary[disabled]{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.3)}
.btn-ghost{color:var(--text);background:rgba(255,255,255,.02);box-shadow:0 0 0 1px var(--line-strong) inset}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(120,170,255,.08);box-shadow:0 0 0 1px var(--blue) inset}
.btn-block{width:100%;padding:18px 26px;font-size:18px}
.btn-sm{padding:9px 15px;font-size:13px;border-radius:8px}

.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.02);box-shadow:0 0 0 1px var(--line) inset}
.dot{width:7px;height:7px;border-radius:50%;background:var(--stock);box-shadow:0 0 10px var(--stock)}
.dot-blue{background:var(--blue);box-shadow:0 0 10px var(--blue)}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.tag-new{color:var(--blue-soft);background:rgba(30,155,255,.1);box-shadow:0 0 0 1px var(--blue) inset}
.tag-paid{color:#04130b;background:var(--stock)}
.tag-sent{color:#02060d;background:var(--blue-bright)}
.tag-wait{color:#1c1303;background:var(--warn)}
.tag-cancel{color:#fff;background:rgba(255,107,120,.18);box-shadow:0 0 0 1px var(--err) inset}

/* cards / panels */
.card{border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:0 0 0 1px var(--line-strong) inset,0 40px 90px -45px rgba(0,0,0,.85);padding:30px}
.panel{border-radius:var(--r-md);background:var(--panel);box-shadow:0 0 0 1px var(--line) inset;padding:22px}

/* page header block */
.page-head{padding:56px 0 12px}
.page-foot{padding:60px 0 40px;border-top:1px solid var(--line);margin-top:60px;color:var(--text-faint);font-family:var(--mono);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.page-foot a{color:var(--text-faint)}
.page-foot a:hover{color:#fff}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:4px}
.field.col-2{grid-column:span 2}
label.lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--text);
  background:rgba(255,255,255,.02);border:none;border-radius:11px;padding:14px 15px;
  box-shadow:0 0 0 1px var(--line-strong) inset;transition:.2s}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 1px var(--blue) inset;background:rgba(30,155,255,.05)}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386c6ff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.field .err-msg{color:var(--err);font-size:12px;font-family:var(--mono);display:none}
.field.invalid input,.field.invalid select{box-shadow:0 0 0 1px var(--err) inset}
.field.invalid .err-msg{display:block}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14px;color:var(--text-dim)}
.check input{width:20px;height:20px;flex:none;accent-color:var(--blue);margin-top:1px}

/* delivery option rows */
.opt{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.015);box-shadow:0 0 0 1px var(--line) inset;transition:.2s;margin-bottom:9px}
.opt:hover{box-shadow:0 0 0 1px var(--line-strong) inset}
.opt.sel{box-shadow:0 0 0 1px var(--blue) inset;background:rgba(30,155,255,.07)}
.opt .radio{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--text-faint) inset;transition:.2s;position:relative}
.opt.sel .radio{box-shadow:0 0 0 2px var(--blue) inset}
.opt.sel .radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue)}
.opt .otext{flex:1}
.opt .oname{font-weight:600;font-size:15px}
.opt .odesc{font-size:12px;color:var(--text-faint);font-family:var(--mono)}
.opt .oprice{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.04em;color:var(--stock);text-transform:uppercase}

/* summary */
.sum-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;font-size:15px;color:var(--text-dim)}
.sum-row b{color:var(--text);font-weight:600}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.sum-total .tl{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase}
.sum-total .tv{font-family:var(--mono);font-weight:700;font-size:30px;color:#fff}
.qty{display:inline-flex;align-items:center;border-radius:10px;box-shadow:0 0 0 1px var(--line-strong) inset;overflow:hidden}
.qty button{width:40px;height:40px;font-size:20px;color:var(--text)}
.qty button:hover{background:rgba(120,170,255,.1);color:#fff}
.qty .qv{width:44px;text-align:center;font-family:var(--mono);font-weight:700}

/* tables (admin) */
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);text-align:left;padding:12px 12px;border-bottom:1px solid var(--line-strong)}
td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:rgba(120,170,255,.03)}

/* notices */
.notice{border-radius:var(--r-md);padding:16px 18px;font-size:14px;display:flex;gap:12px;align-items:flex-start}
.notice svg{width:20px;height:20px;flex:none;margin-top:2px}
.notice-blue{background:rgba(30,155,255,.07);box-shadow:0 0 0 1px var(--blue) inset;color:var(--text-dim)}
.notice-blue svg{color:var(--blue-bright)}
.notice-warn{background:rgba(255,177,85,.08);box-shadow:0 0 0 1px rgba(255,177,85,.5) inset;color:var(--text-dim)}
.notice-warn svg{color:var(--warn)}

/* legal pages */
.legal h2{margin-top:38px}
.legal h3{margin-top:26px;color:var(--blue-soft)}
.legal p,.legal li{color:var(--text-dim);font-size:16px}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin-bottom:8px}
.legal .ph{color:var(--warn);font-family:var(--mono);font-size:.92em}
.toc{margin:24px 0 8px;padding:18px 22px}
.toc a{display:block;padding:5px 0;color:var(--text-dim);font-size:15px}
.toc a:hover{color:#fff}

@media (max-width:760px){
  .form-grid{grid-template-columns:1fr}
  .field.col-2{grid-column:span 1}
  .container{padding:0 18px}
  .card{padding:22px}
  .hide-sm{display:none}
  table{font-size:13px}
  td,th{padding:10px 8px}
}