/* Kalkulator wyceny wypalse.pl — style widgetu. Prefiks .wyp- by nie kolidować z motywem. */

.wyp-calc {
  --wyp-accent: #b8452a;
  --wyp-border: #dcdcdc;
  --wyp-bg: #ffffff;
  --wyp-muted: #6b7280;
  --wyp-ok: #15803d;
  --wyp-warn: #b45309;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 360px);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 720px) { .wyp-calc { grid-template-columns: 1fr; } }

.wyp-calc * { box-sizing: border-box; }

/* --- Lewa kolumna: upload + podgląd --- */
.wyp-drop {
  border: 2px dashed var(--wyp-border);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fafafa;
}
.wyp-drop:hover, .wyp-drop.is-drag { border-color: var(--wyp-accent); background: #fff5f2; }
.wyp-drop input[type=file] { display: none; }
.wyp-drop-hint { color: var(--wyp-muted); font-size: 13px; margin-top: .35rem; }

.wyp-preview {
  margin-top: 1rem;
  border: 1px solid var(--wyp-border);
  border-radius: 12px;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Tła materiałów */
.wyp-preview[data-material="sklejka"] {
  background-color: #d8b784;
  background-image:
    repeating-linear-gradient(90deg, rgba(150,110,60,.12) 0 2px, rgba(150,110,60,0) 2px 9px),
    linear-gradient(180deg, #e0c193, #cfa96f);
}
.wyp-preview[data-material="plexi"] {
  background-color: #e7f0f4;
  background-image: linear-gradient(135deg, rgba(255,255,255,.7), rgba(180,205,220,.55));
}
.wyp-preview-holder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wyp-preview svg { width: min(85%, 300px); max-height: 220px; height: auto; display: block; }
/* Kontury cięcia w podglądzie: cienka, nieskalowana kreska */
.wyp-preview .wyp-cut { fill: rgba(0,0,0,.06); stroke: #7a1f10; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wyp-preview-empty { color: var(--wyp-muted); padding: 2rem; text-align: center; }
.wyp-preview-dims {
  position: absolute; bottom: 8px; right: 10px;
  background: rgba(255,255,255,.85); border-radius: 6px; padding: 2px 8px;
  font-size: 12px; color: #374151;
}

/* --- Prawa kolumna: opcje + cena --- */
.wyp-fields { display: grid; gap: .85rem; }
.wyp-field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: .25rem; }
.wyp-field select, .wyp-field input[type=number] {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--wyp-border);
  border-radius: 8px; font: inherit; background: var(--wyp-bg);
}
.wyp-seg { display: flex; gap: .4rem; }
.wyp-seg button {
  flex: 1; padding: .5rem; border: 1px solid var(--wyp-border); background: #fff;
  border-radius: 8px; cursor: pointer; font: inherit;
}
.wyp-seg button.is-active { border-color: var(--wyp-accent); background: #fff5f2; color: var(--wyp-accent); font-weight: 700; }

.wyp-size-row { display: flex; align-items: center; gap: .5rem; }
.wyp-size-row input { flex: 0 1 110px; }
.wyp-size-info { color: var(--wyp-muted); font-size: 13px; white-space: nowrap; }
.wyp-size-reset { border: none; background: none; color: var(--wyp-accent); cursor: pointer; font: inherit; font-size: 13px; padding: 0; margin-left: auto; }

.wyp-price {
  margin-top: 1.1rem; padding: 1rem; border: 1px solid var(--wyp-border);
  border-radius: 12px; background: #fafafa;
}
.wyp-price-main { display: flex; align-items: baseline; justify-content: space-between; }
.wyp-price-main .amount { font-size: 2rem; font-weight: 800; color: var(--wyp-accent); }
.wyp-price-min { font-size: 12px; color: var(--wyp-muted); }
.wyp-breakdown { margin-top: .75rem; font-size: 13px; color: #374151; display: none; }
.wyp-breakdown.is-open { display: block; }
.wyp-breakdown table { width: 100%; border-collapse: collapse; }
.wyp-breakdown td { padding: 2px 0; }
.wyp-breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.wyp-toggle { background: none; border: none; color: var(--wyp-accent); cursor: pointer; padding: 0; font: inherit; font-size: 13px; margin-top: .5rem; }

.wyp-geom { margin-top: .75rem; font-size: 13px; color: var(--wyp-muted); }
.wyp-geom b { color: #1f2937; font-weight: 600; }

.wyp-warnings { margin-top: .75rem; display: grid; gap: .4rem; }
.wyp-warn-item {
  background: #fffbeb; border: 1px solid #fde68a; color: var(--wyp-warn);
  border-radius: 8px; padding: .5rem .65rem; font-size: 13px;
}
.wyp-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 8px; padding: .6rem .7rem; font-size: 13px; margin-top: .5rem;
}
.wyp-hidden { display: none !important; }