/* PNT Kalkulator Okapów — calculator.css v1.0.0 */

.pnt-okap-wrap *,
.pnt-okap-wrap *::before,
.pnt-okap-wrap *::after { box-sizing: border-box; }

.pnt-okap-wrap {
  --red:        #C1121F;
  --red-hover:  #9E0E19;
  --red-tint:   rgba(193,18,31,0.08);
  --red-border: rgba(193,18,31,0.22);
  --dark:       #1F2A38;
  --black:      #111827;
  --white:      #FFFFFF;
  --gray-bg:    #F9FAFB;
  --gray-mid:   #E5E7EB;
  --text:       #374151;
  --text-light: #6B7280;
  --border:     #E5E7EB;
  --radius:     8px;
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:  0 4px 8px rgba(0,0,0,.1), 0 16px 32px rgba(0,0,0,.08);
  --font:       'Poppins', sans-serif;
  font-family: var(--font);
  color: var(--black);
}

.pnt-okap-wrap .app { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 32px; }

.pnt-okap-wrap .page-header { padding: 4px 0 8px; }
.pnt-okap-wrap .page-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: .5rem; }
.pnt-okap-wrap .page-eyebrow::before { content: ''; width: 14px; height: 2px; background: var(--red); flex-shrink: 0; }
.pnt-okap-wrap .page-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; color: var(--black); line-height: 1.15; }
.pnt-okap-wrap .page-title span { color: var(--red); }
.pnt-okap-wrap .page-sub { font-size: .8rem; color: var(--text-light); margin-top: .3rem; }

.pnt-okap-wrap .main-area { display: flex; gap: 16px; align-items: flex-start; }
.pnt-okap-wrap .svg-wrapper { flex: 1; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: crosshair; position: relative; box-shadow: var(--shadow); }
.pnt-okap-wrap #canvas { display: block; width: 100%; height: auto; touch-action: none; }
.pnt-okap-wrap .side-panel { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.pnt-okap-wrap .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }

.pnt-okap-wrap .phase-steps { display: flex; gap: 4px; margin-bottom: 10px; }
.pnt-okap-wrap .phase-step { flex: 1; height: 3px; border-radius: 2px; background: var(--gray-mid); }
.pnt-okap-wrap .phase-step.active { background: var(--red); }
.pnt-okap-wrap .phase-step.done { background: #16a34a; }
.pnt-okap-wrap .label { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 5px; }
.pnt-okap-wrap .instruction { font-size: .8rem; color: var(--text); line-height: 1.5; }

.pnt-okap-wrap .btn { display: block; width: 100%; padding: 9px 14px; border: none; border-radius: var(--radius); font-family: var(--font); font-size: .8rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; text-align: center; }
.pnt-okap-wrap .btn-primary { background: var(--red); color: #fff; border: 2px solid var(--red); }
.pnt-okap-wrap .btn-primary:hover:not(:disabled) { background: var(--red-hover); border-color: var(--red-hover); transform: translateY(-1px); }
.pnt-okap-wrap .btn-primary:disabled { background: #e89ea3; border-color: #e89ea3; cursor: not-allowed; transform: none; }
.pnt-okap-wrap .btn-secondary { background: var(--white); color: var(--text); border: 1.5px solid var(--border); }
.pnt-okap-wrap .btn-secondary:hover { background: var(--gray-bg); border-color: #d1d5db; }
.pnt-okap-wrap .btn-ghost { background: transparent; color: var(--text-light); border: 1.5px solid var(--gray-mid); }
.pnt-okap-wrap .btn-ghost:hover { background: var(--gray-bg); color: var(--text); }

.pnt-okap-wrap .legend-item { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--text); margin-top: 6px; }
.pnt-okap-wrap .legend-swatch { width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0; }

.pnt-okap-wrap .summary-panel { display: none; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.pnt-okap-wrap .summary-panel.visible { display: block; }
.pnt-okap-wrap .summary-heading { font-size: .9rem; font-weight: 700; color: var(--black); letter-spacing: -.01em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; }
.pnt-okap-wrap .summary-heading::before { content: ''; width: 3px; height: 16px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.pnt-okap-wrap .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pnt-okap-wrap .stat { background: var(--gray-bg); border-radius: 6px; padding: 10px 12px; border: 1px solid var(--border); }
.pnt-okap-wrap .stat-label { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); margin-bottom: 3px; }
.pnt-okap-wrap .stat-value { font-size: 1.2rem; font-weight: 800; color: var(--black); letter-spacing: -.02em; }

.pnt-okap-wrap .popover-title { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); padding-bottom: 7px; border-bottom: 1px solid var(--border); }

.pnt-okap-wrap .edge-popover { position: fixed; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; display: none; z-index: 10000; flex-direction: column; gap: 6px; min-width: 190px; }
.pnt-okap-wrap .edge-popover.visible { display: flex; }
.pnt-okap-wrap .btn-external { background: var(--white); color: var(--red); border: 1.5px solid var(--red-border); }
.pnt-okap-wrap .btn-external:hover { background: var(--red-tint); border-color: var(--red); }
.pnt-okap-wrap .btn-wall { background: var(--white); color: var(--text); border: 1.5px solid var(--border); }
.pnt-okap-wrap .btn-wall:hover { background: var(--gray-bg); }

.pnt-okap-wrap .length-popup { position: fixed; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 12px; display: none; z-index: 10001; flex-direction: column; gap: 10px; min-width: 220px; }
.pnt-okap-wrap .length-popup.visible { display: flex; }
.pnt-okap-wrap .length-input-row { display: flex; gap: 8px; align-items: center; }
.pnt-okap-wrap .length-input-row input { width: 96px; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 6px; font-family: var(--font); font-size: .9rem; font-weight: 600; color: var(--black); outline: none; transition: border-color .15s; }
.pnt-okap-wrap .length-input-row input:focus { border-color: var(--red); }
.pnt-okap-wrap .length-input-row .unit { font-size: .8rem; font-weight: 600; color: var(--text-light); }
.pnt-okap-wrap .length-popup-btns { display: flex; gap: 6px; }

.pnt-okap-wrap .angle-warning { background: var(--white); border: 1px solid var(--red-border); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 10px; width: 100%; }
.pnt-okap-wrap .angle-warning.visible { display: flex; }
.pnt-okap-wrap .angle-warning-title { font-weight: 700; font-size: .825rem; color: var(--red); display: flex; align-items: center; gap: .4rem; }
.pnt-okap-wrap .angle-warning-body { font-size: .78rem; color: var(--text); line-height: 1.5; }
.pnt-okap-wrap .angle-warning-btns { display: flex; gap: 8px; }

.pnt-okap-wrap .color-section { margin-bottom: 16px; }
.pnt-okap-wrap .color-section-label { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 8px; }
.pnt-okap-wrap .color-options { display: flex; gap: 10px; align-items: center; }
.pnt-okap-wrap .color-btn { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--white); font-family: var(--font); font-size: .78rem; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.pnt-okap-wrap .color-btn:hover { border-color: var(--gray-mid); background: var(--gray-bg); }
.pnt-okap-wrap .color-btn.active { border-color: var(--red); color: var(--black); background: var(--white); }
.pnt-okap-wrap .color-swatch { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.15); }

.pnt-okap-wrap .product-table-section { margin-top: 16px; }
.pnt-okap-wrap .product-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pnt-okap-wrap .product-table th { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); padding: 0 8px 8px; border-bottom: 2px solid var(--border); text-align: left; }
.pnt-okap-wrap .product-table th:nth-child(2), .pnt-okap-wrap .product-table th:nth-child(4), .pnt-okap-wrap .product-table th:nth-child(5) { text-align: right; }
.pnt-okap-wrap .product-table td { padding: 10px 8px; border-bottom: 1px solid var(--gray-bg); vertical-align: middle; color: var(--text); }
.pnt-okap-wrap .product-table td:nth-child(2) { text-align: right; font-weight: 700; color: var(--black); white-space: nowrap; }
.pnt-okap-wrap .product-table td:nth-child(4), .pnt-okap-wrap .product-table td:nth-child(5) { text-align: right; white-space: nowrap; }
.pnt-okap-wrap .product-table tr:last-child td { border-bottom: none; }
.pnt-okap-wrap .product-thumb { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: var(--gray-bg); border: 1px solid var(--border); display: block; }
.pnt-okap-wrap .product-thumb-icon { width: 48px; height: 48px; border-radius: 6px; background: var(--red-tint); border: 1px solid var(--red-border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.pnt-okap-wrap .product-name-cell { line-height: 1.35; }
.pnt-okap-wrap .product-name-main { font-weight: 600; color: var(--black); }
.pnt-okap-wrap .product-sku { font-size: .65rem; color: var(--text-light); margin-top: 2px; }
.pnt-okap-wrap .total-row td { border-top: 2px solid var(--border) !important; border-bottom: none !important; font-weight: 700; color: var(--black); padding-top: 12px; }
.pnt-okap-wrap .total-label { font-size: .8rem; }
.pnt-okap-wrap .total-value { font-size: 1rem; color: var(--red); }
.pnt-okap-wrap .price-placeholder { color: var(--text-light); font-style: italic; }

.pnt-okap-wrap .cart-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
.pnt-okap-wrap .cart-section .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; }
.pnt-okap-wrap .btn-cart { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--red); color: #fff; border: 2px solid var(--red); border-radius: var(--radius); padding: 11px 20px; font-family: var(--font); font-size: .875rem; font-weight: 700; letter-spacing: .02em; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; }
.pnt-okap-wrap .btn-cart:hover:not(.disabled) { background: var(--red-hover); border-color: var(--red-hover); transform: translateY(-1px); }
.pnt-okap-wrap .btn-cart.disabled { background: #e89ea3; border-color: #e89ea3; cursor: not-allowed; transform: none; pointer-events: none; }
.pnt-okap-wrap .btn-cart-icon { font-size: 1rem; }
.pnt-okap-wrap .color-required-note { font-size: .7rem; color: var(--text-light); text-align: center; margin-top: 6px; }

@keyframes pnt-pulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
.pnt-okap-wrap .unclassified { animation: pnt-pulse 1.5s ease-in-out infinite; }

@media (max-width: 640px) {
  .pnt-okap-wrap .main-area { flex-direction: column; }
  .pnt-okap-wrap .side-panel { width: 100%; }
}