/* Shop CORE 1.0 - style uzupelniajace Tailwind (ciemny motyw gamingowy z wymiennym kolorem akcentu) */

/* ====== MOTYWY KOLORYSTYCZNE ======
   Kolor akcentu i odcien tla ustawia administrator (ACP -> Ustawienia -> Wyglad): atrybut data-theme na <html> (serwer) wybiera ponizsze palety.
   Kolory sa zapisane jako trojki RGB (--nazwa-rgb), zeby Tailwind mogl dodawac przezroczystosc (public/assets/tw-config.js: bg-accent/20).
   Palety generuje dev/theme-palettes.php - nie edytuj ich recznie. */

:root,
[data-theme="emerald"] {
  --accent-rgb: 34 197 94;   /* #22c55e */
  --accent-hi-rgb: 47 212 108;   /* #2fd46c */
  --accent-hi2-rgb: 74 222 128;   /* #4ade80 */
  --accent-light-rgb: 134 239 172;   /* #86efac */
  --accent-ink-rgb: 4 19 10;   /* #04130a */
  --accent-bg-rgb: 11 36 21;   /* #0b2415 */
  --accent-bg2-rgb: 11 51 24;   /* #0b3318 */
  --accent-bg3-rgb: 16 52 29;   /* #10341d */
  --accent-line-rgb: 20 83 45;   /* #14532d */
  --accent-deep-rgb: 22 101 52;   /* #166534 */
  --ink-rgb: 228 236 230;   /* #e4ece6 */
  --ink2-rgb: 195 209 199;   /* #c3d1c7 */
  --muted-rgb: 138 154 143;   /* #8a9a8f */
  --faint-rgb: 85 101 90;   /* #55655a */
  --line-rgb: 34 48 39;   /* #223027 */
  --line2-rgb: 28 42 33;   /* #1c2a21 */
  --line3-rgb: 43 61 49;   /* #2b3d31 */
  --line4-rgb: 58 85 67;   /* #3a5543 */
  --canvas-rgb: 10 13 11;   /* #0a0d0b */
  --panel-rgb: 17 21 18;   /* #111512 */
  --panel2-rgb: 22 28 24;   /* #161c18 */
  --panel3-rgb: 31 38 34;   /* #1f2622 */
  --inset-rgb: 12 16 13;   /* #0c100d */
  --inset2-rgb: 8 10 9;   /* #080a09 */
  --inset3-rgb: 15 20 17;   /* #0f1411 */
  --inset4-rgb: 19 25 22;   /* #131916 */
}

[data-theme="cyan"] {
  --accent-rgb: 6 182 212;   /* #06b6d4 */
  --accent-hi-rgb: 36 191 217;   /* #24bfd9 */
  --accent-hi2-rgb: 61 198 221;   /* #3dc6dd */
  --accent-light-rgb: 118 215 231;   /* #76d7e7 */
  --accent-ink-rgb: 4 17 19;   /* #041113 */
  --accent-bg-rgb: 11 32 36;   /* #0b2024 */
  --accent-bg2-rgb: 11 45 51;   /* #0b2d33 */
  --accent-bg3-rgb: 16 47 52;   /* #102f34 */
  --accent-line-rgb: 20 74 83;   /* #144a53 */
  --accent-deep-rgb: 22 89 101;   /* #165965 */
  --ink-rgb: 227 234 237;   /* #e3eaed */
  --ink2-rgb: 194 205 210;   /* #c2cdd2 */
  --muted-rgb: 137 149 155;   /* #89959b */
  --faint-rgb: 84 96 102;   /* #546066 */
  --line-rgb: 33 44 49;   /* #212c31 */
  --line2-rgb: 27 38 43;   /* #1b262b */
  --line3-rgb: 42 55 62;   /* #2a373e */
  --line4-rgb: 56 77 87;   /* #384d57 */
  --canvas-rgb: 10 12 13;   /* #0a0c0d */
  --panel-rgb: 17 20 21;   /* #111415 */
  --panel2-rgb: 22 26 28;   /* #161a1c */
  --panel3-rgb: 30 36 39;   /* #1e2427 */
  --inset-rgb: 12 15 16;   /* #0c0f10 */
  --inset2-rgb: 8 9 10;   /* #08090a */
  --inset3-rgb: 15 18 20;   /* #0f1214 */
  --inset4-rgb: 19 23 25;   /* #131719 */
}

[data-theme="amber"] {
  --accent-rgb: 245 158 11;   /* #f59e0b */
  --accent-hi-rgb: 246 170 40;   /* #f6aa28 */
  --accent-hi2-rgb: 247 179 65;   /* #f7b341 */
  --accent-light-rgb: 250 202 121;   /* #faca79 */
  --accent-ink-rgb: 19 13 4;   /* #130d04 */
  --accent-bg-rgb: 36 27 11;   /* #241b0b */
  --accent-bg2-rgb: 51 36 11;   /* #33240b */
  --accent-bg3-rgb: 52 39 16;   /* #342710 */
  --accent-line-rgb: 83 60 20;   /* #533c14 */
  --accent-deep-rgb: 101 72 22;   /* #654816 */
  --ink-rgb: 235 233 229;   /* #ebe9e5 */
  --ink2-rgb: 208 203 196;   /* #d0cbc4 */
  --muted-rgb: 153 147 139;   /* #99938b */
  --faint-rgb: 100 94 86;   /* #645e56 */
  --line-rgb: 47 42 35;   /* #2f2a23 */
  --line2-rgb: 41 36 29;   /* #29241d */
  --line3-rgb: 60 54 44;   /* #3c362c */
  --line4-rgb: 83 74 60;   /* #534a3c */
  --canvas-rgb: 13 12 10;   /* #0d0c0a */
  --panel-rgb: 21 19 17;   /* #151311 */
  --panel2-rgb: 28 26 22;   /* #1c1a16 */
  --panel3-rgb: 37 35 32;   /* #252320 */
  --inset-rgb: 16 14 12;   /* #100e0c */
  --inset2-rgb: 10 9 8;   /* #0a0908 */
  --inset3-rgb: 20 18 15;   /* #14120f */
  --inset4-rgb: 25 23 19;   /* #191713 */
}

[data-theme="violet"] {
  --accent-rgb: 167 139 250;   /* #a78bfa */
  --accent-hi-rgb: 178 153 251;   /* #b299fb */
  --accent-hi2-rgb: 186 165 251;   /* #baa5fb */
  --accent-light-rgb: 207 191 252;   /* #cfbffc */
  --accent-ink-rgb: 8 4 19;   /* #080413 */
  --accent-bg-rgb: 17 11 36;   /* #110b24 */
  --accent-bg2-rgb: 21 11 51;   /* #150b33 */
  --accent-bg3-rgb: 25 16 52;   /* #191034 */
  --accent-line-rgb: 36 20 83;   /* #241453 */
  --accent-deep-rgb: 42 22 101;   /* #2a1665 */
  --ink-rgb: 231 228 236;   /* #e7e4ec */
  --ink2-rgb: 200 195 209;   /* #c8c3d1 */
  --muted-rgb: 144 138 154;   /* #908a9a */
  --faint-rgb: 91 85 101;   /* #5b5565 */
  --line-rgb: 39 34 48;   /* #272230 */
  --line2-rgb: 33 28 42;   /* #211c2a */
  --line3-rgb: 50 43 61;   /* #322b3d */
  --line4-rgb: 68 58 85;   /* #443a55 */
  --canvas-rgb: 11 10 13;   /* #0b0a0d */
  --panel-rgb: 18 17 21;   /* #121115 */
  --panel2-rgb: 24 22 28;   /* #18161c */
  --panel3-rgb: 34 31 38;   /* #221f26 */
  --inset-rgb: 13 12 16;   /* #0d0c10 */
  --inset2-rgb: 9 8 10;   /* #09080a */
  --inset3-rgb: 17 15 20;   /* #110f14 */
  --inset4-rgb: 21 19 25;   /* #151319 */
}

/* Pochodne zmienne (kolory pelne) - w tym samym selektorze co palety, zeby podglad motywu na dowolnym elemencie z data-theme dzialal. */
:root,
[data-theme] {
  --bg: rgb(var(--canvas-rgb));
  --panel: rgb(var(--panel-rgb));
  --panel-2: rgb(var(--panel2-rgb));
  --line: rgb(var(--line-rgb));
  --text: rgb(var(--ink-rgb));
  --muted: rgb(var(--muted-rgb));
  --accent: rgb(var(--accent-rgb));
}

:root {
  --warn: #f97316;
  --gold: #facc15;
}

html { color-scheme: dark; }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 400px at 85% -10%, rgb(var(--accent-rgb) / 0.10), transparent 60%),
    radial-gradient(700px 360px at -10% 110%, rgba(249, 115, 22, 0.08), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  color: var(--text);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

.step-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.step-no {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.4rem;
  background: var(--accent);
  color: rgb(var(--accent-ink-rgb));
  font-size: 0.85rem;
  font-weight: 900;
}

.label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; font-weight: 600; }
.hint { margin-top: 0.35rem; font-size: 0.75rem; color: var(--muted); }

.input {
  width: 100%;
  background: rgb(var(--inset-rgb));
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.65rem 0.8rem;
  color: var(--text);
}
.input::placeholder { color: rgb(var(--faint-rgb)); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: #ef4444; outline-color: #ef4444; }

/* Kafelki wyboru (serwer, usluga, cena, platnosc) */
.opt {
  --c: var(--accent);
  width: 100%;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.opt:hover:not([disabled]) { border-color: rgb(var(--line4-rgb)); transform: translateY(-1px); }
.opt:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.opt[aria-pressed="true"] {
  border-color: var(--c);
  box-shadow: 0 0 0 1px var(--c), 0 0 26px -10px var(--c);
}
.opt[disabled] { opacity: 0.45; cursor: not-allowed; }
.opt-title { font-weight: 800; }
.opt-sub { margin-top: 0.15rem; font-size: 0.8rem; color: var(--muted); }
/* Odznaka promocji na kafelku serwera: cieply gradient, delikatna poswiata i powolny blysk (wylaczany przy prefers-reduced-motion) */
.promo-badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  margin-top: 0.6rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #1a0f00;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.45), 0 0 18px -2px rgba(249, 115, 22, 0.55);
}
.promo-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: promo-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promo-shine {
  0%, 55% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-badge::after { animation: none; display: none; }
}
.opt-price { margin-top: 0.4rem; font-size: 1.15rem; font-weight: 900; color: var(--gold); }

.feature-list { margin-top: 0.6rem; display: grid; gap: 0.25rem; font-size: 0.8rem; color: rgb(var(--ink2-rgb)); }
.feature-list li { display: flex; gap: 0.4rem; }
.feature-list li::before { content: "▸"; color: var(--c, var(--accent)); }

.tab {
  padding: 0.45rem 0.9rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--accent); color: rgb(var(--accent-ink-rgb)); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn {
  border-radius: 0.65rem;
  padding: 0.8rem 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: filter 0.15s, transform 0.15s;
}
.btn-primary { background: linear-gradient(180deg, rgb(var(--accent-hi-rgb)), var(--accent)); color: rgb(var(--accent-ink-rgb)); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Strony informacyjne (Uslugi / Polityka Prywatnosci / Regulamin): tresc HTML z ACP, bez wtyczki typography */
.info-content { font-size: 0.95rem; line-height: 1.7; color: rgb(var(--ink2-rgb)); }
.info-content > :first-child { margin-top: 0; }
.info-content h2 { margin: 1.8rem 0 0.6rem; font-size: 1.2rem; font-weight: 800; color: var(--text); }
.info-content h3 { margin: 1.4rem 0 0.5rem; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.info-content h4 { margin: 1.2rem 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--text); }
.info-content p { margin: 0.7rem 0; }
.info-content ul, .info-content ol { margin: 0.7rem 0; padding-left: 1.4rem; }
.info-content ul { list-style: disc; }
.info-content ol { list-style: decimal; }
.info-content li { margin: 0.3rem 0; }
.info-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.info-content a:hover { color: rgb(var(--accent-light-rgb)); }
.info-content strong, .info-content b { color: var(--text); }
.info-content blockquote { margin: 1rem 0; padding: 0.4rem 1rem; border-left: 3px solid var(--accent); background: var(--panel-2); color: var(--muted); }
.info-content hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--line); }
.info-content code { padding: 0.1rem 0.35rem; border-radius: 0.25rem; background: var(--panel-2); font-size: 0.85em; }
.info-content pre { margin: 1rem 0; padding: 0.8rem 1rem; overflow-x: auto; border-radius: 0.5rem; background: rgb(var(--inset2-rgb)); }
.info-content pre code { padding: 0; background: none; }
.info-content table { width: 100%; margin: 1rem 0; border-collapse: collapse; font-size: 0.9rem; }
.info-content th, .info-content td { padding: 0.5rem 0.7rem; border: 1px solid var(--line); text-align: left; }
.info-content th { background: var(--panel-2); color: var(--text); }