/* Kreator bombki — paleta swiateczna (zielen + czerwien + zloto na ciepłym kremie). */

:root {
  --c-bg: #fbf7f0;
  --c-surface: #ffffff;
  --c-ink: #22303a;
  --c-muted: #64748b;
  --c-primary: #0f5132;
  --c-primary-soft: #e7f1ea;
  --c-accent: #b3232b;
  --c-accent-ink: #ffffff;
  --c-gold: #c9a96e;
  --c-border: #e7ddcd;
  --c-danger: #b3232b;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --shadow-card: 0 1px 2px rgb(34 48 58 / 6%), 0 8px 24px rgb(34 48 58 / 8%);
  --t: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  --font-ui: Rubik, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}

/* Wszystko w .bombka-app - w WordPressie kreator siedzi w tresci strony i nie moze ruszac motywu. */
#bombka-app, #bombka-app * { box-sizing: border-box; }

#bombka-app {
  background: var(--c-bg);
  color: var(--c-ink);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

#bombka-app :is(h1, h2, h3), #bombka-app .segment, #bombka-app .tab, #bombka-app .btn { font-family: var(--font-ui); }

/*
 * Odporność na motyw WordPressa: reguły z #id wygrywają ze stylami motywu, a ten reset gasi
 * właściwości przycisków/obrazków, których kreator sam nie ustawia (wysokość, wielkie litery,
 * cienie). Bez tego kafelki zwierzaków w galerii zgniatały się do pasków.
 */
#bombka-app button {
  height: auto; min-width: 0; margin: 0; line-height: 1.2; letter-spacing: normal;
  text-transform: none; text-decoration: none; box-shadow: none; white-space: normal;
  font-family: inherit; text-align: center;
}
/* motyw sklepu dokladal przyciskom gradient/nakladke (szare przebarwienie na dole kafelkow) */
#bombka-app button::before, #bombka-app button::after { content: none !important; display: none !important; }
#bombka-app :is(.tile, .card__summary, .iconbtn, .tab, .segment) { background-image: none !important; filter: none; }
#bombka-app .tile { background-color: #fff !important; }
#bombka-app img { max-width: 100%; height: auto; margin: 0; border: 0; box-shadow: none; }
/* miniatury: bez przeciagania i zaznaczania; klik trafia w przycisk kafelka, nie w obrazek */
#bombka-app :is(img, svg, image) { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }
#bombka-app :is(.bk-gallery, .card__summary, .preview) { user-select: none; -webkit-user-select: none; }
#bombka-app input { margin: 0; box-shadow: none; }
#bombka-app :is(h1, h2, h3, p) { text-transform: none; }

/* Na stronie WordPressa: pełna szerokość okna, niezależnie od wąskiej kolumny treści motywu. */
#bombka-app.bombka-app--wide {
  width: calc(100vw - var(--bk-scrollbar, 0px));
  max-width: none;
  margin-left: calc(50% - (100vw - var(--bk-scrollbar, 0px)) / 2);
}

#bombka-app .page { max-width: 1600px; margin: 0 auto; padding: var(--space-4) clamp(16px, 3vw, 48px) var(--space-5); }

#bombka-app .masthead { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-3); }
#bombka-app .masthead h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
#bombka-app .masthead p { margin: 4px 0 0; color: var(--c-muted); }

/* ukłąd: podglad + panel */
#bombka-app .layout { display: grid; grid-template-columns: minmax(320px, 560px) 1fr; gap: var(--space-4); align-items: start; }

#bombka-app .preview { position: sticky; top: var(--space-3); display: grid; gap: var(--space-2); }
#bombka-app .preview__stage {
  background: radial-gradient(circle at 50% 35%, #2f5a45 0%, #14281f 75%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
}
#bombka-app .preview__stage svg { display: block; width: 100%; height: auto; }

/* obracanie 3D: perspektywa na scenie, obrot na #bombka-preview (configurator.js enableTilt) */
#bombka-app .preview__stage {
  position: relative; overflow: hidden; perspective: 1100px; touch-action: pan-y; cursor: grab;
  background-size: cover; background-position: center;
}
#bombka-app .preview__stage.is-dragging { cursor: grabbing; }
#bombka-app #bombka-preview { transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
#bombka-app .is-dragging #bombka-preview { transition: none; }
#bombka-app #bombka-preview { position: relative; }
#bombka-app .bk-layer { display: block; width: 100%; height: auto; }
#bombka-app .bk-back { position: absolute; inset: 0; opacity: 0.45; }
#bombka-app .bk-front { position: relative; }
/* odblask swiatla: pas gradientu przesuwany przy obrocie (--gx), przyciety do ksztaltu plytki (--mask) */
#bombka-app .bk-glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 30%) 50%, rgb(255 255 255 / 10%) 56%, transparent 66%);
  background-size: 300% 100%; background-position: var(--gx, 50%) 0;
  -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat;
}
@keyframes bk-sway { 0%, 100% { transform: rotateY(-7deg) rotateX(1.5deg); } 50% { transform: rotateY(7deg) rotateX(-1.5deg); } }
#bombka-app .bk-idle #bombka-preview { animation: bk-sway 7s ease-in-out infinite; }
#bombka-app .bk-3d-reset[hidden] { display: none; }
#bombka-app .bk-3d-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: rgb(0 0 0 / 50%); color: #fff; font: 600 13px var(--font-ui); white-space: nowrap;
  transition: opacity 0.4s; /* lapka i pasek stoja - ruch byl irytujacy */
}
#bombka-app .bk-used .bk-3d-hint { opacity: 0; }
#bombka-app .bk-3d-reset {
  position: absolute; right: 10px; top: 10px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / 88%); color: var(--c-ink); font: 600 13px var(--font-ui); cursor: pointer;
  box-shadow: var(--shadow-card);
}
#bombka-app .bk-3d-reset:hover { background: #fff; }
#bombka-app .preview__stage:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

/* tla podgladu (tylko wyglad na ekranie, nie produkt) */
#bombka-app .bk-scenes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#bombka-app .bk-scenes__label { font-size: 13px; font-weight: 600; color: var(--c-muted); margin-right: 2px; }
#bombka-app .bk-scene {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid var(--c-border);
  background: var(--scene) center / cover; cursor: pointer; transition: transform var(--t), box-shadow var(--t);
}
#bombka-app .bk-scene:hover { transform: scale(1.08); }
#bombka-app .bk-scene[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--c-primary); border-color: #fff; }
/* bez zaznaczania i przeciagania grafik podgladu (prawy klik blokuje configurator.js) */
#bombka-app #bombka-preview { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#bombka-app #bombka-preview svg, #bombka-app #bombka-preview image { pointer-events: none; -webkit-user-drag: none; }
#bombka-app .bk-allegro { display: grid; gap: 10px; padding: var(--space-2); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
#bombka-app .bk-allegro__lead { margin: 0; font-size: 14px; color: var(--c-muted); }
#bombka-app .bk-allegro__field { display: grid; gap: 4px; }
#bombka-app .bk-allegro__field span { font-size: 13px; font-weight: 600; color: var(--c-muted); }
#bombka-app .bk-allegro--ok { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
#bombka-app .bk-allegro--ok p { margin: 0; color: var(--c-ink); }
#bombka-app .bk-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#bombka-app .bk-dims { margin: 0; text-align: center; font: 600 14px var(--font-ui); color: var(--c-primary); }
#bombka-app .preview__summary { color: var(--c-muted); font-size: 13px; line-height: 1.45; word-break: break-word; }

#bombka-app .segments { display: inline-flex; gap: 4px; padding: 4px; background: var(--c-primary-soft); border-radius: 999px; }
#bombka-app .segment {
  min-height: 44px; padding: 0 var(--space-2);
  border: 0; border-radius: 999px; background: transparent; color: var(--c-primary);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--t), color var(--t);
}
#bombka-app .segment:hover { background: rgb(15 81 50 / 10%); }
#bombka-app .segment[aria-pressed='true'] { background: var(--c-primary); color: #fff; }

#bombka-app .btn {
  min-height: 48px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--r-md); cursor: pointer;
  font-size: 16px; font-weight: 600; transition: transform var(--t), background var(--t), opacity var(--t);
}
#bombka-app .btn--primary { background: var(--c-accent); color: var(--c-accent-ink); width: 100%; }
#bombka-app .btn--primary:hover:not(:disabled) { background: #9a1d24; }
#bombka-app .btn--ghost { background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-ink); }
#bombka-app .btn--ghost:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
#bombka-app .btn:disabled, #bombka-app .iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }
#bombka-app .btn:active:not(:disabled) { transform: translateY(1px); }

#bombka-app .panel { display: grid; gap: var(--space-3); min-width: 0; }
#bombka-app .section { display: grid; gap: var(--space-2); }
#bombka-app .section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
#bombka-app .section h2 { margin: 0; font-size: 20px; font-weight: 700; }

#bombka-app #bombka-people, #bombka-app #bombka-pets { display: grid; gap: var(--space-2); }

#bombka-app .card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  display: grid; gap: var(--space-2);
}
#bombka-app .card__head { display: flex; gap: var(--space-1); align-items: center; }
#bombka-app .card__tools { display: flex; gap: 4px; margin-left: auto; }

#bombka-app .input {
  min-height: 44px; width: 100%; padding: 0 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: #fff; color: var(--c-ink); font: 600 16px var(--font-body);
}
#bombka-app .input::placeholder { color: #9aa5b1; font-weight: 400; }
#bombka-app .input--search { font-weight: 400; }

#bombka-app .iconbtn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: #fff; color: var(--c-ink); cursor: pointer; transition: border-color var(--t), color var(--t);
}
#bombka-app .iconbtn:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-primary); }
#bombka-app .iconbtn.danger:hover:not(:disabled) { border-color: var(--c-danger); color: var(--c-danger); }

#bombka-app .tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--c-border); }
#bombka-app .tab {
  min-height: 44px; padding: 0 12px; border: 0; background: transparent;
  color: var(--c-muted); font-size: 15px; font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent; transition: color var(--t), border-color var(--t);
}
#bombka-app .tab:hover { color: var(--c-ink); }
#bombka-app .tab[aria-selected='true'] { color: var(--c-primary); border-bottom-color: var(--c-primary); }

#bombka-app .bk-gallery {
  display: grid; gap: var(--space-1);
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  max-height: 340px; overflow-y: auto; padding: 2px;
}
#bombka-app .tile {
  display: grid; gap: 4px; justify-items: center; padding: 6px 4px 8px;
  border: 2px solid var(--c-border); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
#bombka-app .tile { min-height: 128px; align-content: start; }
#bombka-app .tile:hover { border-color: var(--c-gold); transform: translateY(-2px); }
#bombka-app .tile[aria-pressed='true'] { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
#bombka-app .tile img { width: 100%; height: 84px; object-fit: contain; }
#bombka-app .tile__empty { display: grid; place-items: center; width: 100%; height: 84px; color: var(--c-muted); font-size: 24px; }
#bombka-app .tile__label { font-size: 12px; line-height: 1.25; text-align: center; color: var(--c-muted); }
#bombka-app .tile[aria-pressed='true'] .tile__label { color: var(--c-primary); font-weight: 600; }

#bombka-app .swatches { display: flex; flex-wrap: wrap; gap: var(--space-1); }
#bombka-app .swatch {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--c-border); background: var(--swatch); cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
}
#bombka-app .swatch:hover { transform: scale(1.06); }
#bombka-app .swatch[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--c-primary); border-color: #fff; }

#bombka-app .field { display: grid; gap: 6px; }
#bombka-app .field__label, #bombka-app .section label > span { font-size: 13px; font-weight: 600; color: var(--c-muted); }
#bombka-app .fields { display: grid; grid-template-columns: 1fr 120px; gap: var(--space-2); }
#bombka-app .fields label { display: grid; gap: 6px; }

#bombka-app .note { margin: 0; padding: var(--space-2); background: var(--c-primary-soft); border-radius: var(--r-sm); color: var(--c-primary); font-size: 14px; }

#bombka-app .errors { margin: 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); list-style: disc; background: #fdeaea; border: 1px solid #f3c3c3; border-radius: var(--r-sm); color: #8a1b21; font-size: 14px; }

#bombka-app :focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* zwijane karty osob i zwierzakow: edytowana jedna, reszta jako pasek z miniatura */
#bombka-app .card--collapsed { padding: 8px var(--space-2) 8px 8px; gap: 0; box-shadow: none; }
#bombka-app .card__summary {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  padding: 0; border: 0; background: transparent; color: var(--c-ink); cursor: pointer; text-align: left;
}
#bombka-app .card__thumb { width: 52px; height: 52px; object-fit: contain; flex: none; border-radius: var(--r-sm); background: var(--c-bg); }
#bombka-app .card__title { display: grid; min-width: 0; }
#bombka-app .card__title strong { font: 700 16px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bombka-app .card__title span { font-size: 13px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bombka-app .card__edit { font-size: 14px; font-weight: 700; color: var(--c-primary); flex: none; }
#bombka-app .section__count { font-size: 14px; font-weight: 600; color: var(--c-muted); margin-left: 6px; }

@media (max-width: 900px) {
  #bombka-app .layout { grid-template-columns: 1fr; gap: var(--space-2); }
  /* telefon: maly podglad przyklejony u gory - widac efekt zmian podczas przewijania panelu */
  #bombka-app .preview {
    position: sticky; top: 0; z-index: 5; gap: 8px;
    margin-inline: calc(-1 * clamp(16px, 3vw, 48px)); padding: 8px clamp(16px, 3vw, 48px);
    background: var(--c-bg); box-shadow: 0 6px 12px -8px rgb(34 48 58 / 25%);
  }
  #bombka-app .preview__stage { width: min(100%, 27vh); margin-inline: auto; padding: 4px; }
  #bombka-app .card--collapsed .card__edit { display: none; }
  #bombka-app .card--collapsed .iconbtn { width: 38px; height: 38px; }
  #bombka-app .card--collapsed .card__thumb { width: 44px; height: 44px; }
  #bombka-app .bk-dims { margin: 0; text-align: center; font: 600 14px var(--font-ui); color: var(--c-primary); }
#bombka-app .preview__summary { display: none; }
  #bombka-app .btn--primary { min-height: 44px; }
  #bombka-app .bk-gallery { max-height: 55vh; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  #bombka-app .masthead { margin-bottom: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  #bombka-app * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  #bombka-app .bk-idle #bombka-preview { animation: none; }
  #bombka-app .tile:hover, #bombka-app .swatch:hover { transform: none; }
}