/**
 * Kreator Produktu - Designer Styles
 * 
 * @package KreatorProduktu
 * @version 1.0.0
 * 
 * Table of Contents:
 * 1. CSS Variables
 * 2. Reset & Base Styles
 * 3. Typography
 * 4. Layout - 3 Column Structure
 *    4.1 Toolbar Column (Left)
 *    4.2 Canvas Column (Center)
 *    4.3 Properties Column (Right)
 * 5. Components
 *    5.1 Layers Panel
 *    5.2 Form Elements
 *    5.3 Buttons
 *    5.4 Effects Grid
 * 6. Modals
 * 7. Responsive Design
 * 8. Animations
 */

/* Import Google Font - Inter z obsługą polskich znaków */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap&subset=latin,latin-ext');

/* ============================================
   1. CSS Variables
   ============================================ */
:root {
  /* Colors - Nowy design */
  --kp-primary: #8c52ff;
  --kp-primary-hover: #7a47e6;
  --kp-primary-light: #f3ebff;
  --kp-secondary: #636E72;
  --kp-success: #00a32a;
  --kp-danger: #D9534F;
  --kp-warning: #dba617;
  
  --kp-bg-primary: #FFFFFF;
  --kp-bg-secondary: #F7F8FA;
  --kp-bg-tertiary: #f0f0f1;
  --kp-border: #DFE4E8;
  --kp-text-primary: #2D3436;
  --kp-text-secondary: #636E72;
  
  /* Spacing - zgodne z nowym designem */
  --kp-spacing-xs: 4px;
  --kp-spacing-sm: 8px;
  --kp-spacing-md: 16px;
  --kp-spacing-lg: 24px;
  --kp-spacing-xl: 32px;
  
  /* Layout - Nowy design */
  --kp-sidebar-width: 112px;
  --kp-properties-width: 300px;
  --kp-topbar-height: 50px;
  --kp-header-height: 60px;
  
  /* Shadows */
  --kp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --kp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --kp-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
  
  /* Border Radius - Nowy design */
  --kp-radius-sm: 4px;
  --kp-radius-md: 8px;
  --kp-radius-lg: 8px;
  
  /* Transitions */
  --kp-transition: all 0.2s ease;
}

/* ============================================
   Reset & Base Styles
   ============================================ */
.kp-designer * {
  box-sizing: border-box;
}

.kp-designer *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.kp-designer *::-webkit-scrollbar-track {
  background: var(--kp-bg-secondary);
}

.kp-designer *::-webkit-scrollbar-thumb {
  background: var(--kp-border);
  border-radius: 4px;
}

.kp-designer *::-webkit-scrollbar-thumb:hover {
  background: var(--kp-text-secondary);
}

.kp-designer {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kp-text-primary);
  background: var(--kp-bg-secondary);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================
   Typography
   ============================================ */
.kp-designer h1,
.kp-designer h2,
.kp-designer h3,
.kp-designer h4,
.kp-designer h5,
.kp-designer h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--kp-text-primary);
  margin: 0;
}

.kp-designer h1 {
  font-size: 24px;
}

.kp-designer h2 {
  font-size: 20px;
}

.kp-designer h3 {
  font-size: 18px;
}

.kp-designer h4 {
  font-size: 16px;
}

.kp-designer h5 {
  font-size: 14px;
}

.kp-designer h6 {
  font-size: 12px;
}

.kp-designer p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 var(--kp-spacing-md) 0;
}

.kp-designer label {
  font-size: 12px;
  font-weight: 600;
  color: var(--kp-text-primary);
  line-height: 1.4;
}

.kp-designer small {
  font-size: 12px;
  line-height: 1.4;
  color: var(--kp-text-secondary);
}

/* ============================================
   Header
   ============================================ */
.kp-designer-header {
  height: var(--kp-header-height);
  background: var(--kp-bg-primary);
  border-bottom: 1px solid var(--kp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--kp-spacing-md);
  box-shadow: var(--kp-shadow-sm);
  z-index: 100;
}

.kp-designer-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: var(--kp-text-primary);
}

.kp-designer-actions {
  display: flex;
  gap: var(--kp-spacing-sm);
  align-items: center;
}

/* ============================================
   Main Layout - New 3 Column Design
   ============================================ */
.kp-designer-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ============================================
   Left Sidebar (Vertical Icon Menu)
   ============================================ */
.kp-sidebar-left {
  width: var(--kp-sidebar-width);
  background: var(--kp-bg-primary);
  border-right: 1px solid var(--kp-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: var(--kp-spacing-md) 0;
  overflow-y: auto;
}

.kp-sidebar-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0 8px;
}

.kp-sidebar-secondary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: var(--kp-spacing-lg);
  border-top: 1px solid var(--kp-border);
}

.kp-sidebar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--kp-bg-secondary);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--kp-text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  width: 100%;
  border-radius: var(--kp-radius-sm);
  margin: 3px 0;
}

.kp-sidebar-btn:hover {
  background: rgba(0, 0, 0, 0.15);
  color: var(--kp-text-primary);
}

.kp-sidebar-btn:active,
.kp-sidebar-btn.active {
  background: var(--kp-primary-light);
  color: var(--kp-primary);
}

.kp-sidebar-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.kp-sidebar-label {
  font-size: 12px;
  text-transform: capitalize;
  letter-spacing: 0;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

.kp-sidebar-btn-secondary {
  font-size: inherit;
}

.kp-sidebar-btn-secondary .kp-sidebar-label {
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
}

.kp-sidebar-btn-secondary .kp-sidebar-icon {
  width: 34px;
  height: 34px;
}

.kp-toolbar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.kp-toolbar-section {
  padding: var(--kp-spacing-lg);
  border-bottom: 1px solid var(--kp-border);
}

.kp-toolbar-section:last-child {
  border-bottom: none;
}

.kp-toolbar-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--kp-text-secondary);
  margin: 0 0 var(--kp-spacing-md) 0;
  letter-spacing: 0.5px;
}

.kp-toolbar-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--kp-spacing-sm);
}

/* Toolbar Actions Section - New Style */
.kp-toolbar-actions {
  padding: var(--kp-spacing-lg);
  border-bottom: 1px solid var(--kp-border);
  display: flex;
  flex-direction: column;
  gap: var(--kp-spacing-sm);
}

/* ============================================
   Canvas Column (Center)
   ============================================ */
.kp-canvas-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--kp-bg-secondary);
  overflow: hidden;
}

/* Canvas Topbar */
.kp-canvas-topbar {
  height: var(--kp-topbar-height);
  background: var(--kp-bg-primary);
  border-bottom: 1px solid var(--kp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--kp-spacing-md);
  gap: var(--kp-spacing-md);
  position: relative;
  z-index: 1; /* Keep below mobile color dropdown so its edges cover any border seams */
}

.kp-zoom {
  position: absolute;
  left: var(--kp-spacing-md);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 2001;
}
.kp-zoom-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--kp-text-secondary);
  font-weight: 500;
  background: var(--kp-bg-primary);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  height: 32px;
  padding: 0 10px;
  transition: var(--kp-transition);
}
.kp-zoom-toggle:hover { background: var(--kp-bg-secondary); border-color: var(--kp-text-secondary); color: var(--kp-text-primary); }
.kp-zoom-toggle:active { background: var(--kp-primary-light); border-color: var(--kp-primary); color: var(--kp-primary); }
.kp-zoom-toggle svg { color: currentColor; display: block; }

.kp-zoom-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 240px;
  background: var(--kp-bg-primary);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  box-shadow: var(--kp-shadow-md);
  padding: 36px 12px 12px 12px;
  display: none;
  z-index: 2000;
}
.kp-zoom.open .kp-zoom-popover { display: block; }

.kp-zoom-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--kp-radius-sm);
  color: var(--kp-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1;
}
.kp-zoom-close:hover {
  background: var(--kp-bg-hover);
  color: var(--kp-text-primary);
}
.kp-zoom-close:active {
  background: var(--kp-bg-active);
  transform: scale(0.95);
}
.kp-zoom-close svg {
  display: block;
}

/* Dopasuj suwak tylko w popover, aby nie kolidował z przyciskiem X */
.kp-zoom-popover .kp-slider {
  margin-top: 0;
}
.kp-zoom-popover .kp-zoom-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--kp-text-secondary);
}

.kp-zoom-pan {
  display: grid;
  grid-template-columns: 36px 36px 36px;
  grid-template-rows: 36px 36px 36px;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 8px;
  margin-top: 12px;
}
.kp-zoom-pan-spacer { display: none; }
.kp-zoom-pan-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
  color: var(--kp-text-secondary);
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  transition: var(--kp-transition);
}
.kp-zoom-pan #kp-pan-up { grid-area: up; }
.kp-zoom-pan #kp-pan-down { grid-area: down; }
.kp-zoom-pan #kp-pan-left { grid-area: left; }
.kp-zoom-pan #kp-pan-right { grid-area: right; }
.kp-zoom-pan-btn:hover {
  border-color: var(--kp-text-secondary);
  color: var(--kp-text-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.kp-zoom-pan-btn:active {
  background: var(--kp-primary-light);
  border-color: var(--kp-primary);
  color: var(--kp-primary);
}

.kp-zoom-reset-btn {
  width: 100%;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--kp-border);
  background: var(--kp-bg-secondary);
  color: var(--kp-text-primary);
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: var(--kp-transition);
}
.kp-zoom-reset-btn:hover {
  background: var(--kp-bg-tertiary);
  border-color: var(--kp-text-secondary);
}
.kp-zoom-reset-btn:active {
  background: var(--kp-primary-light);
  border-color: var(--kp-primary);
  color: var(--kp-primary);
}

/* Hide mobile action buttons on desktop */
.kp-mobile-actions {
  display: none;
}

/* Hide mobile color selector on desktop */
.kp-mobile-color-selector {
  display: none !important;
}

.kp-zoom-info {
  position: absolute;
  left: var(--kp-spacing-md);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--kp-text-secondary);
  font-weight: 500;
}

.kp-zoom-info svg {
  color: var(--kp-text-secondary);
}

.kp-view-switcher {
  display: flex;
  gap: 6px;
  align-items: center;
}
.kp-canvas-bottombar {
  min-height: var(--kp-topbar-height);
  background: var(--kp-bg-primary);
  border-top: 1px solid var(--kp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px var(--kp-spacing-md);
}

/* Label obok przełącznika widoków */
.kp-view-label {
  margin-right: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--kp-text-secondary);
}

.kp-view-switcher button {
  padding: 8px 16px;
  background: var(--kp-bg-primary);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--kp-text-secondary);
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 60px;
}

.kp-view-switcher button:hover {
  background: var(--kp-bg-secondary);
  color: var(--kp-text-primary);
  border-color: var(--kp-border);
}

.kp-view-switcher button.active {
  background: var(--kp-primary);
  border-color: var(--kp-primary);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(74, 144, 226, 0.3);
}

.kp-canvas-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--kp-bg-secondary);
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.kp-canvas-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kp-spacing-xl);
  overflow: auto;
  position: relative;
}

.kp-canvas-inner {
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  background: var(--kp-bg-primary);
  border-radius: var(--kp-radius-sm);
}

#kp-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Always-visible order panel (button + price) */
.kp-order-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
}

.kp-order-sticky {
  background: var(--kp-bg-primary);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: var(--kp-spacing-md);
  min-width: 280px;
}

.kp-order-summary .kp-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.kp-order-summary .kp-price-total span:last-child {
  font-weight: 700;
  color: var(--kp-text-primary);
}

.kp-canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Canvas Loading State */
.kp-canvas-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.kp-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--kp-bg-tertiary);
  border-top-color: var(--kp-primary);
  border-radius: 50%;
  animation: kp-spin 0.8s linear infinite;
}

@keyframes kp-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   Layers Panel (Inside Properties Column)
   ============================================ */
.kp-layers-panel {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
  max-height: 300px;
  overflow: hidden;
}

.kp-layers-panel.visible {
  display: flex;
}

.kp-layers-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kp-section-header {
  padding: var(--kp-spacing-md) var(--kp-spacing-lg);
  border-bottom: 1px solid var(--kp-border);
  background: var(--kp-bg-secondary);
}

.kp-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--kp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kp-panel-header {
  padding: var(--kp-spacing-md) var(--kp-spacing-lg);
  border-bottom: 1px solid var(--kp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--kp-bg-secondary);
}

.kp-panel-title {
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  color: var(--kp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kp-layers-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--kp-spacing-sm);
}

.kp-layer {
  display: flex;
  align-items: center;
  gap: var(--kp-spacing-md);
  padding: var(--kp-spacing-md);
  border-radius: var(--kp-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--kp-spacing-xs);
  position: relative;
  border: 1px solid transparent;
}

.kp-layer:hover {
  background: var(--kp-bg-secondary);
  border-color: var(--kp-border);
}

.kp-layer.active {
  background: var(--kp-primary-light);
  color: var(--kp-primary);
  border-color: var(--kp-primary);
  box-shadow: 0 1px 3px rgba(74, 144, 226, 0.1);
}

.kp-layer.active:hover {
  background: var(--kp-primary-light);
  border-color: var(--kp-primary);
}

.kp-layer-selected {
  background: var(--kp-primary-light);
  color: var(--kp-primary);
  border-color: var(--kp-primary);
  box-shadow: 0 1px 3px rgba(74, 144, 226, 0.1);
}

.kp-layer-selected:hover {
  background: var(--kp-primary-light);
  border-color: var(--kp-primary);
}

.kp-layer:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--kp-primary-light);
}

.kp-layer:focus-visible {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
}

.kp-layer-thumbnail {
  width: 32px;
  height: 32px;
  background: var(--kp-bg-secondary);
  border-radius: var(--kp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  border: 1px solid var(--kp-border);
}

.kp-layer.active .kp-layer-thumbnail,
.kp-layer-selected .kp-layer-thumbnail {
  background: var(--kp-bg-primary);
  border-color: var(--kp-primary);
}

.kp-layer:hover .kp-layer-thumbnail {
  transform: scale(1.05);
}

.kp-layer-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-layer-actions {
  display: flex;
  gap: var(--kp-spacing-xs);
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Layer action buttons (icon-only) */
.kp-layer-actions button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  color: var(--kp-text-secondary);
  transition: var(--kp-transition);
}

.kp-layer-actions button:hover {
  background: var(--kp-bg-secondary);
  border-color: var(--kp-text-secondary);
  color: var(--kp-text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.kp-layer-actions button:active {
  transform: translateY(0);
  box-shadow: none;
}

.kp-layer-actions button img {
  width: 16px;
  height: 16px;
  display: block;
}

.kp-layer.active .kp-layer-actions,
.kp-layer-selected .kp-layer-actions {
  opacity: 1;
}

.kp-layer-drag-handle {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--kp-text-secondary);
  flex-shrink: 0;
}

.kp-layer-drag-handle:active {
  cursor: grabbing;
}

.kp-layer-dragging {
  opacity: 0.5;
  background: var(--kp-bg-tertiary);
}

.kp-layer-drag-over {
  border-top: 2px solid var(--kp-primary);
  margin-top: 2px;
}

.kp-layers-empty {
  padding: var(--kp-spacing-xl);
  text-align: center;
  color: var(--kp-text-secondary);
}

.kp-layers-empty p {
  margin: 0 0 var(--kp-spacing-xs) 0;
  font-size: 14px;
}

.kp-layers-empty-hint {
  font-size: 12px;
  color: var(--kp-text-secondary);
}

/* ============================================
   Middle Action Sidebar (Between Canvas and Properties)
   ============================================ */
.kp-sidebar-middle {
  width: var(--kp-sidebar-width);
  background: var(--kp-bg-primary);
  border-left: 1px solid var(--kp-border);
  border-right: 1px solid var(--kp-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: var(--kp-spacing-md) 0;
  overflow-y: auto;
}

.kp-action-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0 8px;
}

.kp-action-sidebar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--kp-text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  width: 100%;
  border-radius: var(--kp-radius-sm);
  margin: 3px 0;
}

.kp-action-sidebar-btn:hover {
  background: var(--kp-bg-secondary);
  color: var(--kp-text-primary);
}

.kp-action-sidebar-btn:active,
.kp-action-sidebar-btn.active {
  background: var(--kp-primary-light);
  color: var(--kp-primary);
}

.kp-action-sidebar-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.kp-action-sidebar-label {
  font-size: 12px;
  text-transform: capitalize;
  letter-spacing: 0;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

/* ============================================
   Properties Column (Right)
   ============================================ */
.kp-properties-column {
  width: var(--kp-properties-width);
  background: var(--kp-bg-primary);
  border-left: 1px solid var(--kp-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Cart section in properties panel */
.kp-cart-section {
  padding: var(--kp-spacing-md);
  border-bottom: 1px solid var(--kp-border);
}

.kp-cart-preview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: var(--kp-bg-secondary);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: var(--kp-text-primary);
}

.kp-cart-preview-btn:hover {
  background: var(--kp-bg-tertiary);
  border-color: var(--kp-text-secondary);
}

.kp-cart-preview-btn:active {
  background: var(--kp-primary-light);
  border-color: var(--kp-primary);
  color: var(--kp-primary);
}

.kp-cart-preview-btn svg {
  flex-shrink: 0;
  color: var(--kp-text-secondary);
}

.kp-cart-preview-btn:hover svg {
  color: var(--kp-text-primary);
}

.kp-cart-preview-btn:active svg {
  color: var(--kp-primary);
}

.kp-properties-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.kp-properties-header {
  padding: var(--kp-spacing-lg);
  border-bottom: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
}

.kp-properties-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--kp-text-primary);
}

.kp-properties-header p {
  font-size: 14px;
  margin: 0;
  color: var(--kp-text-secondary);
}

.kp-properties-body {
  flex: 1;
  padding: var(--kp-spacing-lg);
  overflow-y: auto;
}

.kp-properties-content {
  display: flex;
  flex-direction: column;
  gap: var(--kp-spacing-md);
}

.kp-properties-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--kp-text-secondary);
  padding: 40px 20px;
  text-align: center;
}

.kp-properties-empty i {
  font-size: 48px;
  margin-bottom: var(--kp-spacing-md);
  opacity: 0.5;
  color: var(--kp-text-secondary);
}

.kp-properties-empty p {
  font-size: 14px;
  margin: 0;
  color: var(--kp-text-secondary);
}

.kp-no-selection {
  text-align: center;
  color: var(--kp-text-secondary);
  padding: var(--kp-spacing-xl);
}

/* ============================================
   Form Elements
   ============================================ */
.kp-form-group {
  margin-bottom: var(--kp-spacing-md);
}

.kp-form-group:last-child {
  margin-bottom: 0;
}

.kp-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--kp-text-secondary);
  text-transform: uppercase;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.kp-label-value {
  font-weight: 400;
  color: var(--kp-text-secondary);
  opacity: 0.8;
}

.kp-form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--kp-text-secondary);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Input Fields */
.kp-input,
.kp-select,
.kp-form-group input[type="text"],
.kp-form-group input[type="number"],
.kp-form-group input[type="url"],
.kp-form-group input[type="email"],
.kp-form-group textarea,
.kp-form-group select {
  width: 100%;
  padding: 8px 12px;
  height: 36px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  font-size: 14px;
  font-family: 'Inter', inherit;
  line-height: 1.4;
  transition: all 0.2s ease;
  background: var(--kp-bg-primary);
  color: var(--kp-text-primary);
}

.kp-form-group textarea {
  height: auto;
  min-height: 80px;
  resize: vertical;
}

/* Hover States */
.kp-input:hover,
.kp-select:hover,
.kp-form-group input:hover,
.kp-form-group textarea:hover,
.kp-form-group select:hover {
  border-color: var(--kp-text-secondary);
  background: var(--kp-bg-primary);
}

/* Focus States */
.kp-input:focus,
.kp-select:focus,
.kp-form-group input:focus,
.kp-form-group textarea:focus,
.kp-form-group select:focus {
  outline: none;
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 3px var(--kp-primary-light);
  background: var(--kp-bg-primary);
}

/* Color Picker - Pickr Button */
.kp-color-picker-button {
  width: 100%;
  height: 36px;
  padding: 0;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  background: var(--pcr-color, #000000);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  /* Always provide a subtle inner edge so white color is visible */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.kp-color-picker-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
              linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  z-index: -1;
}

.kp-color-picker-button:hover {
  border-color: var(--kp-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.kp-color-picker-button:active {
  transform: translateY(0);
}

/* Pickr Customization */
.pickr {
  width: 100%;
}

.pickr .pcr-button {
  width: 100%;
  height: 40px;
  border-radius: var(--kp-radius-sm);
  /* Add a light border and inner outline so pure white remains visible */
  border: 1px solid var(--kp-border);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}

.pickr .pcr-button::before {
  background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
              linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

/* Pickr App Positioning */
.pcr-app {
  z-index: 999999 !important; /* Maximum z-index to be above everything */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: var(--kp-radius-md) !important;
  position: fixed !important; /* Ensure it's positioned correctly */
}

.pcr-app .pcr-interaction .pcr-save {
  background: var(--kp-primary) !important;
  color: white !important;
}

.pcr-app .pcr-interaction .pcr-save:hover {
  background: var(--kp-primary-hover) !important;
}

/* Range Slider */
.kp-form-group input[type="range"] {
  width: 100%;
  height: auto;
  padding: 0;
}

/* Form Row - Side by Side Fields */
.kp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kp-spacing-md);
  margin-bottom: var(--kp-spacing-md);
}

.kp-form-row .kp-form-group {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.kp-form-row .kp-form-group .kp-label {
  width: 100%;
  min-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kp-form-row .kp-form-group .kp-slider {
  width: 100%;
  margin-top: 4px;
}

.kp-text-alignment {
  display: flex;
  gap: var(--kp-spacing-xs);
  align-items: center;
}

.kp-align-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--kp-text-secondary);
}

.kp-align-btn:hover {
  background: var(--kp-bg-secondary);
  border-color: var(--kp-text-secondary);
}

.kp-align-btn.active {
  background: var(--kp-primary);
  border-color: var(--kp-primary);
  color: #ffffff;
}

.kp-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--kp-bg-tertiary);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s ease;
}

.kp-slider:hover {
  background: var(--kp-border);
}

.kp-slider:focus {
  background: var(--kp-border);
}

.kp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kp-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.kp-slider:hover::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(34, 113, 177, 0.4);
}

.kp-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--kp-primary-light), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.kp-slider:active::-webkit-slider-thumb {
  transform: scale(1.05);
}

.kp-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kp-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.kp-slider:hover::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(34, 113, 177, 0.4);
}

.kp-slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px var(--kp-primary-light), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.kp-slider:active::-moz-range-thumb {
  transform: scale(1.05);
}

/* Font preview box */
.kp-font-preview {
  width: 100%;
  border: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
  border-radius: var(--kp-radius-sm);
  padding: 10px 12px;
  color: var(--kp-text-primary);
  font-size: 18px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Custom font dropdown */
.kp-font-dropdown { position: relative; }
.kp-font-dd-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
  border-radius: var(--kp-radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--kp-text-primary);
}
.kp-font-dd-toggle:hover { border-color: var(--kp-text-secondary); }
.kp-font-dd-menu {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  background: var(--kp-bg-primary);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  box-shadow: var(--kp-shadow-md);
  max-height: 300px;
  overflow: auto;
  z-index: 2000;
  display: none;
}
.kp-font-dropdown.open .kp-font-dd-menu { display: block; }
.kp-font-dd-group { padding: 8px 0; }
.kp-font-dd-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--kp-text-secondary);
  padding: 6px 12px;
  text-transform: uppercase;
}
.kp-font-option {
  padding: 10px 12px;
  border-top: 1px solid var(--kp-bg-secondary);
  cursor: pointer;
}
.kp-font-option:hover { background: var(--kp-bg-secondary); }
.kp-font-option.active { background: var(--kp-primary-light); }
.kp-font-option-name { font-size: 12px; color: var(--kp-text-secondary); margin-bottom: 4px; }
.kp-font-option-sample { font-size: 16px; line-height: 1.2; color: var(--kp-text-primary); }

/* ============================================
   Buttons
   ============================================ */
.kp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kp-spacing-sm);
  padding: 10px 16px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-md);
  background: var(--kp-bg-primary);
  color: var(--kp-text-primary);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.kp-btn:hover {
  background: var(--kp-bg-secondary);
  border-color: var(--kp-text-secondary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.kp-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.kp-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--kp-primary-light);
}

.kp-btn:focus-visible {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
}

.kp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kp-btn:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--kp-bg-primary);
  border-color: var(--kp-border);
}

/* Button Variants */
.kp-btn-primary {
  background: var(--kp-primary);
  color: #ffffff;
  border-color: var(--kp-primary);
}

.kp-btn-primary:hover {
  background: var(--kp-primary-hover);
  border-color: var(--kp-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
}

.kp-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(74, 144, 226, 0.2);
}

.kp-btn-primary:focus {
  box-shadow: 0 0 0 3px var(--kp-primary-light);
}

.kp-btn-primary:focus-visible {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
}

.kp-btn-primary:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--kp-primary);
  border-color: var(--kp-primary);
}

.kp-btn-success {
  background: var(--kp-success);
  color: #ffffff;
  border-color: var(--kp-success);
}

.kp-btn-success:hover {
  background: #008a24;
  border-color: #008a24;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 163, 42, 0.3);
}

.kp-btn-success:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 163, 42, 0.2);
}

.kp-btn-success:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--kp-success);
  border-color: var(--kp-success);
}

/* Specjalne nadpisanie koloru dla przycisku „Dodaj do koszyka” */
#kp-add-to-cart.kp-btn-success {
  background: var(--kp-primary);
  border-color: var(--kp-primary);
}

#kp-add-to-cart.kp-btn-success:hover {
  background: var(--kp-primary-hover);
  border-color: var(--kp-primary-hover);
  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}

#kp-add-to-cart.kp-btn-success:disabled:hover {
  background: var(--kp-primary);
  border-color: var(--kp-primary);
  box-shadow: none;
}

.kp-btn-danger {
  background: var(--kp-danger);
  color: #ffffff;
  border-color: var(--kp-danger);
}

.kp-btn-danger:hover {
  background: #b32d2e;
  border-color: #b32d2e;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(214, 54, 56, 0.3);
}

.kp-btn-danger:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(214, 54, 56, 0.2);
}

.kp-btn-danger:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--kp-danger);
  border-color: var(--kp-danger);
}

/* Button Sizes */
.kp-btn-sm {
  padding: 6px 12px;
  font-size: 14px;
  height: 32px;
  min-width: auto;
}

.kp-btn-full {
  width: 100%;
  justify-content: flex-start;
  padding: 12px 16px;
  height: 44px;
  font-size: 14px;
  font-weight: 500;
  gap: var(--kp-spacing-md);
}

.kp-btn-full:hover {
  transform: translateX(2px);
}

.kp-btn-full:active {
  transform: translateX(0);
}

.kp-btn-full.kp-btn-primary:hover {
  transform: translateX(2px);
}

.kp-btn-full i {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.kp-btn-full:hover i {
  transform: scale(1.1);
}

/* SVG ikony w przyciskach */
.kp-btn .kp-icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Mini spinner na przycisku podczas przeliczania ceny */
.kp-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.6);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: kp-spin 0.8s linear infinite;
  margin-right: 8px;
}

@keyframes kp-spin {
  to { transform: rotate(360deg); }
}

.kp-btn-loading {
  cursor: wait;
  opacity: 0.9;
}

/* Icon Buttons */
.kp-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--kp-text-secondary);
}

.kp-btn-icon:hover {
  background: var(--kp-bg-secondary);
  border-color: var(--kp-text-secondary);
  color: var(--kp-text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.kp-btn-icon:active {
  transform: translateY(0);
  box-shadow: none;
}

.kp-btn-icon:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--kp-primary-light);
}

.kp-btn-icon:focus-visible {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
}

.kp-btn-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.kp-btn-icon:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--kp-bg-primary);
  border-color: var(--kp-border);
}

.kp-btn-icon-sm {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--kp-radius-sm);
  transition: all 0.2s ease;
  color: inherit;
}

.kp-btn-icon-sm:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

.kp-btn-icon-sm:active {
  transform: scale(1);
}

.kp-btn-icon-sm:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--kp-primary-light);
}

.kp-btn-icon-sm:focus-visible {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
}

.kp-layer-selected .kp-btn-icon-sm:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.kp-layer-selected .kp-btn-icon-sm:active {
  transform: scale(1);
}

/* ============================================
   Effects Grid
   ============================================ */
.kp-effects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kp-spacing-sm);
}

.kp-effect-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  height: auto;
  min-height: 60px;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-md);
  background: var(--kp-bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 500;
  color: var(--kp-text-primary);
}

.kp-effect-btn:hover {
  border-color: var(--kp-primary);
  background: var(--kp-bg-secondary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.kp-effect-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kp-effect-btn.active {
  border-color: var(--kp-primary);
  background: var(--kp-primary-light);
  color: var(--kp-primary);
  box-shadow: 0 1px 3px rgba(74, 144, 226, 0.2);
}

.kp-effect-btn.active:hover {
  background: var(--kp-primary-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}

.kp-effect-btn i {
  font-size: 24px;
  transition: transform 0.2s ease;
  color: var(--kp-text-secondary);
}

.kp-effect-btn.active i {
  color: var(--kp-primary);
}

.kp-effect-btn:hover i {
  transform: scale(1.1);
}

.kp-effect-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kp-effect-btn:disabled:hover {
  border-color: var(--kp-border);
  background: var(--kp-bg-primary);
  transform: none;
  box-shadow: none;
}

.kp-effect-btn:disabled:hover i {
  transform: none;
}

.kp-effect-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--kp-primary-light);
}

.kp-effect-btn:focus-visible {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
}

.kp-effect-controls {
  margin-top: var(--kp-spacing-md);
}

.kp-effect-panel {
  padding: var(--kp-spacing-md);
  background: var(--kp-bg-secondary);
  border-radius: var(--kp-radius-md);
  border: 1px solid var(--kp-border);
}

.kp-effect-panel h4 {
  margin: 0 0 var(--kp-spacing-md) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--kp-text-primary);
}

/* ============================================
   Modals
   ============================================ */
.kp-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Default z-index, will be overridden for specific modals */
  animation: kp-fade-in 0.2s ease;
}

@keyframes kp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kp-modal {
  background: var(--kp-bg-primary);
  border-radius: var(--kp-radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: column;
  animation: kp-slide-up 0.3s ease;
  position: relative;
  z-index: 1001; /* Default z-index, will be overridden for specific modals */
  border: 1px solid var(--kp-border);
}

@keyframes kp-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kp-modal-header {
  padding: var(--kp-spacing-lg);
  border-bottom: 1px solid var(--kp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kp-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--kp-text-primary);
}

.kp-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  color: var(--kp-text-secondary);
  transition: all 0.2s ease;
  border-radius: var(--kp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp-modal-close:hover {
  color: var(--kp-text-primary);
  background: var(--kp-bg-secondary);
  transform: rotate(90deg);
}

.kp-modal-close:active {
  transform: rotate(90deg) scale(0.95);
}

.kp-modal-close:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--kp-primary-light);
}

.kp-modal-body {
  flex: 1;
  padding: var(--kp-spacing-lg);
  overflow-y: auto;
}

.kp-modal-footer {
  padding: var(--kp-spacing-lg);
  border-top: 1px solid var(--kp-border);
  display: flex;
  gap: var(--kp-spacing-sm);
  justify-content: flex-end;
}

/* ============================================
   Specific Modal Z-Index Overrides
   These modals are appended to body and need
   higher z-index to appear above admin modal
   ============================================ */
#kp-image-uploader-modal,
#kp-design-library-modal,
#kp-qr-generator-modal,
#kp-clipart-library-modal,
#kp-user-projects-modal,
#kp-user-projects-login {
  z-index: 1000010 !important; /* Increased to be above WordPress modals */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important; /* Dark overlay */
  opacity: 1 !important; /* Force visible */
  display: flex !important; /* Force display */
  align-items: center !important; /* Center vertically */
  justify-content: center !important; /* Center horizontally */
  visibility: visible !important;
  animation: none !important; /* Disable overlay fade to prevent flicker */
}

/* Product Selector overlay: do not force display to flex to prevent auto-open */
#kp-product-selector-modal {
  z-index: 1000010 !important; /* Keep above WordPress modals */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: transparent !important; /* Avoid double dark overlay */
  /* No display override here; JS toggles display between none/flex */
  align-items: center; /* Used when display:flex is set by JS */
  justify-content: center; /* Used when display:flex is set by JS */
  animation: none !important;
}

#kp-image-uploader-modal .kp-modal,
#kp-design-library-modal .kp-modal,
#kp-qr-generator-modal .kp-modal,
#kp-clipart-library-modal .kp-modal,
#kp-product-selector-modal .kp-modal,
#kp-user-projects-modal .kp-modal,
#kp-user-projects-login .kp-modal {
  z-index: 1000011 !important; /* Increased to be above WordPress modals */
  display: flex !important; /* Force display */
  opacity: 1 !important; /* Force visible */
  visibility: visible !important;
  animation: none !important; /* Disable slide-up to prevent flicker */
}

/* Ensure Product Selector modal can grow to bottom toolbar area on all viewports */
#kp-product-selector-modal .kp-modal {
  /* Prefer dynamic viewport for mobile Safari, fallback to classic */
  max-height: calc(100dvh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px);
  max-height: calc(100vh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px);
  min-height: calc(100dvh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px);
  min-height: calc(100vh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px);
  width: 95vw !important;
  max-width: 1200px !important;
}

#kp-product-selector-modal .kp-modal-body {
  /* Header ~72px incl. paddings; no footer by default */
  max-height: calc(100dvh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 112px);
  max-height: calc(100vh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 112px);
  overflow-y: scroll !important; /* Zawsze widoczny scrollbar */
  scrollbar-gutter: stable; /* Rezerwuje miejsce na scrollbar */
}

/* Stylizacja scrollbara dla product selector - zawsze widoczny */
#kp-product-selector-modal .kp-modal-body::-webkit-scrollbar {
  width: 12px;
}

#kp-product-selector-modal .kp-modal-body::-webkit-scrollbar-track {
  background: var(--kp-bg-secondary);
  border-radius: 6px;
}

#kp-product-selector-modal .kp-modal-body::-webkit-scrollbar-thumb {
  background: var(--kp-border);
  border-radius: 6px;
  border: 2px solid var(--kp-bg-primary);
}

#kp-product-selector-modal .kp-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--kp-text-secondary);
}

/* Firefox scrollbar styling */
#kp-product-selector-modal .kp-modal-body {
  scrollbar-width: auto;
  scrollbar-color: var(--kp-border) var(--kp-bg-secondary);
}

/* Increase size of Image Uploader modal to keep consent checkbox visible */
#kp-image-uploader-modal .kp-modal {
  max-height: 90vh !important;
  min-height: 620px !important;
  width: 760px !important;
  max-width: 94vw !important;
  overflow-y: auto !important;
}

/* Make body area use remaining space so footer stays visible */
#kp-image-uploader-modal .kp-modal-body {
  /* header ~72px + footer ~88px incl. paddings/borders */
  max-height: calc(90vh - 180px) !important;
}

/* Footer layout for image uploader: consent above actions */
#kp-image-uploader-modal .kp-modal-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}

#kp-image-uploader-modal .kp-upload-consent {
  margin-top: 0 !important;
}

#kp-image-uploader-modal .kp-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Upload Progress Bar */
.kp-upload-progress-container {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--kp-bg-secondary);
  border-radius: var(--kp-radius-sm);
  border: 1px solid var(--kp-border);
}

.kp-upload-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--kp-text-primary);
}

.kp-upload-progress-text {
  font-weight: 500;
}

.kp-upload-progress-percent {
  font-weight: 600;
  color: var(--kp-primary);
}

.kp-upload-progress-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.kp-upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--kp-primary) 0%, #764ba2 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.kp-upload-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-shimmer 1.5s infinite;
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ============================================
   Image Uploader Modal
   ============================================ */
.kp-upload-area {
  border: 2px dashed var(--kp-border);
  border-radius: var(--kp-radius-md);
  padding: var(--kp-spacing-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--kp-bg-secondary);
  margin: var(--kp-spacing-md) 0;
}

.kp-upload-area:hover {
  border-color: var(--kp-primary);
  background: var(--kp-primary-light);
  border-style: solid;
}

.kp-upload-area:active {
  transform: scale(0.99);
}

.kp-upload-area.kp-drag-over {
  border-color: var(--kp-primary);
  background: var(--kp-primary-light);
  border-style: solid;
  box-shadow: 0 0 0 4px var(--kp-primary-light);
}

.kp-upload-icon {
  font-size: 48px;
  margin-bottom: var(--kp-spacing-md);
}

.kp-upload-text {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 var(--kp-spacing-sm) 0;
  color: var(--kp-text-primary);
}

.kp-upload-hint {
  font-size: 13px;
  color: var(--kp-text-secondary);
  margin: 0;
}

.kp-upload-preview {
  text-align: center;
  padding: var(--kp-spacing-lg);
}

.kp-upload-preview img {
  max-width: 100%;
  max-height: 300px;
  border-radius: var(--kp-radius-sm);
  box-shadow: var(--kp-shadow-sm);
  margin-bottom: var(--kp-spacing-md);
}

.kp-upload-preview p {
  font-size: 14px;
  color: var(--kp-text-secondary);
  margin: 0;
}

.kp-upload-error {
  padding: var(--kp-spacing-md);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--kp-radius-sm);
  color: #991b1b;
  font-size: 14px;
  margin-top: var(--kp-spacing-md);
}

.kp-upload-consent {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid var(--kp-border);
}

.kp-upload-consent label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.kp-upload-consent input[type="checkbox"] {
  margin-right: 10px;
  margin-top: 3px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--kp-primary);
}

.kp-upload-consent input[type="checkbox"]:focus {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
}

.kp-upload-consent span {
  color: var(--kp-text-primary);
}

.kp-upload-consent a {
  color: var(--kp-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.kp-upload-consent a:hover {
  color: var(--kp-primary-dark);
  text-decoration: underline;
}

.kp-upload-consent a:focus {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================
   Design Library Modal
   ============================================ */
.kp-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--kp-spacing-md);
}

.kp-design-card {
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-md);
  overflow: hidden;
  transition: all 0.2s ease;
  background: var(--kp-bg-primary);
  cursor: pointer;
}

.kp-design-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--kp-primary);
}

.kp-design-card:active {
  transform: translateY(-2px);
  box-shadow: var(--kp-shadow-sm);
}

.kp-design-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--kp-primary-light);
}

.kp-design-card:focus-visible {
  outline: 2px solid var(--kp-primary);
  outline-offset: 2px;
}

.kp-design-thumbnail {
  width: 100%;
  height: 200px;
  background: var(--kp-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kp-design-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kp-design-placeholder {
  font-size: 48px;
  color: var(--kp-text-secondary);
}

.kp-design-info {
  padding: var(--kp-spacing-md);
}

.kp-design-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 var(--kp-spacing-sm) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-btn-sm {
  padding: var(--kp-spacing-xs) var(--kp-spacing-sm);
  font-size: 13px;
}

.kp-empty-state {
  text-align: center;
  padding: var(--kp-spacing-xl);
}

.kp-empty-state p {
  margin: var(--kp-spacing-sm) 0;
}

/* ============================================
   Clipart Library Modal
   ============================================ */
.kp-clipart-modal .kp-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--kp-spacing-md);
  min-height: 400px;
}

#kp-clipart-content {
  flex: 1;
  overflow-y: auto;
  min-height: 300px;
}

.kp-clipart-categories {
  margin-bottom: var(--kp-spacing-md);
}

.kp-category-filters {
  display: flex;
  gap: var(--kp-spacing-sm);
  flex-wrap: wrap;
}

.kp-category-btn {
  padding: var(--kp-spacing-sm) var(--kp-spacing-md);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  background: var(--kp-bg-primary);
  color: var(--kp-text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.kp-category-btn:hover {
  background: var(--kp-bg-secondary);
  border-color: var(--kp-primary);
}

.kp-category-btn.active {
  background: var(--kp-primary);
  color: white;
  border-color: var(--kp-primary);
}

.kp-clipart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--kp-spacing-md);
}

.kp-clipart-card {
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-md);
  overflow: hidden;
  transition: all 0.2s ease;
  background: var(--kp-bg-primary);
  cursor: pointer;
}

.kp-clipart-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--kp-primary);
}

.kp-clipart-thumbnail {
  width: 100%;
  height: 150px;
  background: var(--kp-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--kp-spacing-sm);
}

.kp-clipart-thumbnail img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kp-clipart-info {
  padding: var(--kp-spacing-md);
}

.kp-clipart-name {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 var(--kp-spacing-sm) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Source Selection */
.kp-source-btn:hover {
  border-color: var(--kp-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
}

/* Pagination */
.kp-pagination-btn {
  transition: all 0.2s ease;
}

.kp-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.kp-pagination-btn:not(:disabled):hover {
  background: var(--kp-bg-secondary) !important;
  border-color: var(--kp-primary) !important;
}

.kp-pagination-page.active {
  background: var(--kp-primary) !important;
  color: white !important;
  border-color: var(--kp-primary) !important;
}

.kp-pagination-page:not(.active):hover {
  background: var(--kp-primary-light) !important;
  border-color: var(--kp-primary) !important;
  color: var(--kp-primary) !important;
}

/* ============================================
   QR Generator Modal
   ============================================ */
.kp-form-control {
  width: 100%;
  padding: var(--kp-spacing-sm);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  font-size: 14px;
  transition: all 0.2s ease;
  font-family: inherit;
  background: var(--kp-bg-primary);
  color: var(--kp-text-primary);
}

.kp-form-control:hover {
  border-color: var(--kp-text-secondary);
}

.kp-form-control:focus {
  outline: none;
  border-color: var(--kp-primary);
  box-shadow: 0 0 0 3px var(--kp-primary-light);
  background: var(--kp-bg-primary);
}

.kp-form-hint {
  display: block;
  font-size: 12px;
  color: var(--kp-text-secondary);
  margin-top: var(--kp-spacing-xs);
}

.kp-qr-preview-container {
  margin-top: var(--kp-spacing-lg);
}

.kp-qr-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kp-spacing-lg);
  background: var(--kp-bg-secondary);
  border-radius: var(--kp-radius-md);
  min-height: 200px;
}

.kp-qr-preview canvas {
  max-width: 100%;
  height: auto;
}

/* ============================================
   Loading Overlay
   ============================================ */
.kp-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
}

.kp-loading-spinner {
  text-align: center;
}

.kp-loading-spinner .kp-spinner {
  margin: 0 auto var(--kp-spacing-md);
}

.kp-loading-spinner p {
  color: var(--kp-text-secondary);
  font-size: 14px;
  margin: 0;
}

/* ============================================
   Notifications - style przeniesione do sekcji "Notifications System" poniżej
   ============================================ */

/* ============================================
   Icons
   ============================================ */
.kp-icon-text::before,
.kp-icon-image::before,
.kp-icon-designs::before,
.kp-icon-qr::before,
.kp-icon-undo::before,
.kp-icon-redo::before,
.kp-icon-save::before,
.kp-icon-cart::before,
.kp-icon-eye::before,
.kp-icon-eye-off::before,
.kp-icon-lock::before,
.kp-icon-unlock::before,
.kp-icon-outline::before,
.kp-icon-shadow::before,
.kp-icon-curve::before,
.kp-icon-distort::before,
.kp-icon-drag::before,
.kp-icon-trash::before {
  font-family: dashicons;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* Icon mappings using WordPress Dashicons */
.kp-icon-text::before { content: "\f123"; } /* editor-textcolor */
.kp-icon-image::before { content: "\f128"; } /* format-image */
.kp-icon-designs::before { content: "\f116"; } /* admin-appearance */
.kp-icon-qr::before { content: "\f179"; } /* grid-view */
.kp-icon-undo::before { content: "\f171"; } /* undo */
.kp-icon-redo::before { content: "\f172"; } /* redo */
.kp-icon-save::before { content: "\f147"; } /* yes */
.kp-icon-cart::before { content: "\f174"; } /* cart */
.kp-icon-eye::before { content: "\f177"; } /* visibility */
.kp-icon-eye-off::before { content: "\f530"; } /* hidden */
.kp-icon-lock::before { content: "\f160"; } /* lock */
.kp-icon-unlock::before { content: "\f528"; } /* unlock */
.kp-icon-outline::before { content: "\f487"; } /* format-aside */
.kp-icon-shadow::before { content: "\f486"; } /* format-status */
.kp-icon-curve::before { content: "\f324"; } /* editor-expand */
.kp-icon-distort::before { content: "\f163"; } /* image-rotate */
.kp-icon-drag::before { content: "\f333"; } /* menu */
.kp-icon-trash::before { content: "\f182"; } /* trash */

/* Smaller icons for buttons */
.kp-btn-icon .kp-icon-text::before,
.kp-btn-icon .kp-icon-image::before,
.kp-btn-icon .kp-icon-designs::before,
.kp-btn-icon .kp-icon-qr::before,
.kp-btn-icon .kp-icon-undo::before,
.kp-btn-icon .kp-icon-redo::before {
  font-size: 18px;
}

/* ============================================
   Toolbar Actions - Moved to inline definition above
   ============================================ */

.kp-toolbar-footer {
  margin-top: auto;
  padding: var(--kp-spacing-lg);
  border-top: 1px solid var(--kp-border);
  position: sticky;
  bottom: 0;
  background: #f8f8f8;
}

.kp-toolbar-footer .kp-btn {
  width: 100%;
  justify-content: center;
}

/* ============================================
   Utilities
   ============================================ */
.kp-hidden {
  display: none !important;
}

.kp-text-center {
  text-align: center;
}

.kp-text-muted {
  color: var(--kp-text-secondary);
}

.kp-mt-0 { margin-top: 0; }
.kp-mt-1 { margin-top: var(--kp-spacing-xs); }
.kp-mt-2 { margin-top: var(--kp-spacing-sm); }
.kp-mt-3 { margin-top: var(--kp-spacing-md); }
.kp-mt-4 { margin-top: var(--kp-spacing-lg); }

.kp-mb-0 { margin-bottom: 0; }
.kp-mb-1 { margin-bottom: var(--kp-spacing-xs); }
.kp-mb-2 { margin-bottom: var(--kp-spacing-sm); }
.kp-mb-3 { margin-bottom: var(--kp-spacing-md); }
.kp-mb-4 { margin-bottom: var(--kp-spacing-lg); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Desktop (> 1024px) - Ensure 3-column layout works properly */
@media (min-width: 1025px) {
  /* Ensure main layout uses flexbox properly */
  .kp-designer-main {
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }
  
  /* Toolbar column - fixed width */
  .kp-toolbar-column {
    width: var(--kp-toolbar-width);
    flex-shrink: 0;
    display: flex;
  }
  
  /* Canvas column - flexible, takes remaining space */
  .kp-canvas-column {
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
    display: flex;
  }
  
  /* Properties column - fixed width */
  .kp-properties-column {
    width: var(--kp-properties-width);
    flex-shrink: 0;
    display: flex;
  }
  
  /* Ensure mobile toolbar is hidden on desktop */
  .kp-mobile-toolbar {
    display: none;
  }
  
  /* Ensure mobile overlay is hidden on desktop */
  .kp-mobile-overlay {
    display: none;
  }
  
  /* Canvas should use available space efficiently */
  .kp-canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kp-spacing-xl);
  }
  
  /* Ensure proper scrolling in columns */
  .kp-toolbar-column,
  .kp-properties-column {
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  /* Canvas header should not overflow */
  .kp-canvas-header {
    flex-shrink: 0;
  }
  
  /* Ensure layers section can scroll */
  .kp-layers-section {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  /* Ensure properties content can scroll */
  .kp-properties-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Tablet (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Adjust column widths for tablet */
  :root {
    --kp-toolbar-width: 200px;
    --kp-properties-width: 280px;
  }
  
  /* Maintain 3-column layout on tablet */
  .kp-designer-main {
    display: flex;
    flex-direction: row;
  }
  
  /* Ensure columns are visible */
  .kp-toolbar-column,
  .kp-properties-column {
    display: flex;
    position: relative;
  }
  
  /* Reduce padding for tighter layout */
  .kp-toolbar-section,
  .kp-toolbar-actions {
    padding: var(--kp-spacing-md);
  }
  
  .kp-properties-content,
  .kp-properties-header {
    padding: var(--kp-spacing-md) var(--kp-spacing-lg);
  }
  
  /* Adjust canvas header for tablet */
  .kp-canvas-header {
    padding: var(--kp-spacing-md) var(--kp-spacing-lg);
    flex-wrap: wrap;
  }
  
  .kp-canvas-title {
    font-size: 20px;
  }
  
  .kp-canvas-subtitle {
    font-size: 13px;
  }
  
  /* Adjust canvas wrapper padding */
  .kp-canvas-wrapper {
    padding: var(--kp-spacing-lg);
  }
  
  /* Ensure buttons are readable */
  .kp-btn-full {
    font-size: 13px;
    padding: 10px 12px;
    height: 40px;
  }
  
  /* Adjust layer items */
  .kp-layer {
    padding: var(--kp-spacing-xs) var(--kp-spacing-sm);
  }
  
  .kp-layer-thumbnail {
    width: 28px;
    height: 28px;
  }
  
  .kp-layer-name {
    font-size: 12px;
  }
  
  /* Adjust form elements */
  .kp-input,
  .kp-select {
    font-size: 13px;
    padding: 8px 10px;
    height: 36px;
  }
  
  /* Adjust effects grid */
  .kp-effects-grid {
    gap: var(--kp-spacing-xs);
  }
  
  .kp-effect-btn {
    height: 70px;
    font-size: 11px;
    padding: var(--kp-spacing-sm);
  }
  
  .kp-effect-btn i {
    font-size: 20px;
  }
  
  /* Hide mobile toolbar on tablet */
  .kp-mobile-toolbar {
    display: none;
  }
  
  /* Ensure proper scrolling */
  .kp-toolbar-column,
  .kp-properties-column {
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  /* Adjust section headers */
  .kp-section-header,
  .kp-panel-header {
    padding: var(--kp-spacing-sm) var(--kp-spacing-md);
  }
  
  .kp-section-title,
  .kp-panel-title {
    font-size: 13px;
  }
  
  /* Adjust properties title */
  .kp-properties-title {
    font-size: 16px;
  }
}

/* Mobile Landscape (< 768px) */
@media (max-width: 768px) {
  .kp-designer {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }

  /* Dopasuj element canvas do szerokości kolumny na mobile */
  #kp-canvas {
    width: 100%;
    height: auto;
    display: block;
  }

  .kp-designer-header {
    height: 50px;
    padding: 0 var(--kp-spacing-md);
  }
  
  .kp-designer-title {
    font-size: 16px;
  }
  
  /* Stack layout vertically */
  .kp-designer-main {
    flex-direction: column;
  }
  
  /* Hide side columns by default on mobile */
  .kp-sidebar-left,
  .kp-sidebar-middle {
    display: none !important; /* Full hide on mobile, no sliding */
  }
  
  /* Properties column slides in from right */
  .kp-properties-column {
    display: none;
    position: fixed;
    top: 50px;
    bottom: 60px; /* Account for mobile toolbar */
    width: 100%;
    max-width: 320px;
    z-index: 500;
    box-shadow: var(--kp-shadow-lg);
    transition: transform 0.3s ease;
    right: 0;
    transform: translateX(100%);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  .kp-properties-column.mobile-open {
    display: flex;
    transform: translateX(0);
  }
  
  
  /* Ensure price panel and content are scrollable */
  .kp-properties-column .kp-properties-content {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }
  
  .kp-properties-column .kp-price-panel {
    position: relative !important;
    bottom: auto !important;
    margin-top: 12px;
  }
  
  /* Mobile overlay for closing panels */
  .kp-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 499;
    animation: kp-fade-in 0.3s ease;
  }
  
  .kp-mobile-overlay.active {
    display: block;
  }
  
  /* Canvas column takes full width */
  .kp-canvas-column {
    width: 100%;
    flex: 1;
    min-height: 0;
  }
  
  .kp-canvas-container {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  /* Ensure content can scroll above fixed mobile toolbar */
  .kp-canvas-column {
    padding-bottom: 60px; /* height of .kp-mobile-toolbar */
  }
  
  /* Adjust canvas topbar for mobile */
  .kp-canvas-topbar {
    height: auto;
    min-height: 48px;
    padding: 8px;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    border-bottom: none; /* remove default bottom border on mobile */
    --kp-color-dd-gap: 41px; /* gap equal to color dropdown width (JS updates this) */
    --kp-color-dd-overlap: 3px; /* extend lines slightly under dropdown to avoid visible seam */
  }
  /* Recreate side segments of the bottom border, leaving a gap under the dropdown */
  .kp-canvas-topbar::before,
  .kp-canvas-topbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 1px;
    background: var(--kp-border);
    pointer-events: none;
  }
  .kp-canvas-topbar::before {
    left: 0;
    width: calc(50% - (var(--kp-color-dd-gap) / 2) + var(--kp-color-dd-overlap));
  }
  .kp-canvas-topbar::after {
    right: 0;
    width: calc(50% - (var(--kp-color-dd-gap) / 2) + var(--kp-color-dd-overlap));
  }
  
  /* Zoom control na mobile - z lewej strony */
  .kp-zoom {
    position: relative;
    left: 0;
    flex-shrink: 0;
    order: -1;
  }
  
  .kp-zoom-toggle {
    height: 36px;
    padding: 0 8px;
    font-size: 11px;
    gap: 4px;
  }
  
  .kp-zoom-info {
    font-size: 11px;
    position: relative;
    left: 0;
    order: -1;
  }
  
  /* Mobile action buttons in topbar */
  .kp-mobile-actions {
    display: flex !important;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
  }
  
  .kp-mobile-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--kp-bg-primary);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 500;
    color: var(--kp-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .kp-mobile-action-btn:active {
    background: var(--kp-primary-light);
    border-color: var(--kp-primary);
    color: var(--kp-primary);
  }
  
  .kp-mobile-action-btn svg {
    flex-shrink: 0;
  }
  
  /* Wide finalize button */
  .kp-mobile-finalize-btn {
    background: #8c52ff;
    border-color: #8c52ff;
    color: #ffffff;
    min-width: 220px;
    padding: 8px 16px;
    white-space: normal;
  }
  .kp-mobile-finalize-btn:hover,
  .kp-mobile-finalize-btn:active {
    background: var(--kp-primary-hover);
    border-color: var(--kp-primary-hover);
    color: #ffffff;
  }
  .kp-mobile-finalize-btn svg {
    color: #ffffff;
  }
  .kp-mobile-finalize-btn span {
    white-space: normal;
    line-height: 1.2;
    text-align: center;
  }
  
  /* Mobile color selector */
  .kp-canvas-container .kp-mobile-color-selector {
    display: none; /* Hidden by default, shown via JS on mobile when colors available */
    position: absolute;
    top: -8px; /* Slightly tuck under the top bar for a connected look */
    left: 0;
    right: 0;
    z-index: 200; /* Above topbar to fully cover border endpoints */
    padding: 0;
    justify-content: center;
    pointer-events: none; /* Allow clicks to pass through to canvas */
  }
  
  .kp-canvas-container .kp-mobile-color-selector.visible {
    display: flex !important;
  }
  
  .kp-canvas-container .kp-mobile-color-selector * {
    pointer-events: auto; /* Re-enable clicks on dropdown and its children */
  }
  
  .kp-mobile-color-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid var(--kp-border);
    border-radius: 0 0 20px 20px; /* Flat top edge to appear as extending from top bar */
    border-top: none; /* Remove top border to visually connect with the top bar */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); /* Bias shadow downward */
    position: relative;
  }
  
  .kp-mobile-color-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--kp-text-primary);
    white-space: nowrap;
  }
  
  .kp-mobile-color-current {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--kp-border);
    flex-shrink: 0;
  }
  
  .kp-mobile-color-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--kp-text-secondary);
    flex-shrink: 0;
  }
  
  .kp-mobile-color-dropdown.open .kp-mobile-color-arrow {
    transform: rotate(180deg);
  }
  
  .kp-mobile-color-swatches {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid var(--kp-border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 100;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 280px;
    justify-content: center;
  }
  
  .kp-mobile-color-dropdown.open .kp-mobile-color-swatches {
    display: flex;
  }
  
  .kp-mobile-color-swatch {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--kp-border);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: transparent;
    padding: 0;
  }
  
  .kp-mobile-color-swatch:active {
    transform: scale(0.95);
  }
  
  .kp-mobile-color-swatch.active {
    border-color: var(--kp-primary);
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(140, 82, 255, 0.2);
  }
  
  .kp-mobile-color-swatch-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
  }
  
  .kp-view-label {
    display: none; /* Ukryj etykietę na mobile aby zaoszczędzić miejsce */
  }
  
  /* Adjust canvas header for mobile */
  .kp-canvas-header {
    padding: var(--kp-spacing-md);
    flex-direction: column;
    align-items: stretch;
    gap: var(--kp-spacing-sm);
  }
  
  .kp-canvas-title {
    font-size: 18px;
  }
  
  .kp-canvas-subtitle {
    font-size: 12px;
  }
  
  .kp-canvas-controls {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  .kp-canvas-wrapper {
    padding: 8px;
    flex: 1;
    min-height: 0;
    /* Wyłącz zaznaczanie tekstu na urządzeniach dotykowych */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Wyłącz domyślne gesty przeglądarki */
    -webkit-touch-callout: none;
    touch-action: pan-x pan-y;
    /* Wyrównaj canvas do środka */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .kp-canvas-inner {
    /* Na mobile canvas inner powinien być wycentrowany */
    display: block;
    max-width: 100%;
  }
  
  /* Bottom bar behavior on mobile */
  .kp-canvas-bottombar {
    min-height: 44px;
    padding: 6px var(--kp-spacing-sm);
    position: relative; /* keep in flow */
    z-index: 300;
  }
  .kp-canvas-bottombar .kp-view-switcher {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .kp-canvas-bottombar .kp-view-switcher .kp-btn {
    flex: 0 0 auto;
    padding: 8px 12px;
  }
  
  /* Adjust canvas size for mobile */
  #kp-canvas {
    /* Canvas skaluje się zachowując proporcje, bez wymuszania 100% wysokości */
    max-width: 100%;
    width: auto;
    height: auto;
  }
  
  /* Mobile toolbar at bottom */
  .kp-mobile-toolbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--kp-bg-primary);
    border-top: 1px solid var(--kp-border);
    padding: var(--kp-spacing-sm);
    gap: var(--kp-spacing-xs);
    align-items: center;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }
  
  /* Hide scrollbar for Chrome, Safari and Opera */
  .kp-mobile-toolbar::-webkit-scrollbar {
    display: none;
  }
  
  .kp-mobile-toolbar .kp-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    padding: 6px 10px;
    min-width: 65px;
    height: auto;
    border: none;
    background: transparent;
    white-space: nowrap;
  }
  
  .kp-mobile-toolbar .kp-btn:hover,
  .kp-mobile-toolbar .kp-btn:active {
    background: var(--kp-bg-tertiary);
    border-radius: var(--kp-radius-sm);
  }
  
  .kp-mobile-toolbar .kp-btn svg {
    flex-shrink: 0;
  }
  
  .kp-mobile-toolbar .kp-btn span {
    text-align: center;
  }

  /* Order panel on mobile - full width above mobile toolbar */
  .kp-order-panel {
    left: 12px;
    right: 12px;
    bottom: 72px; /* above mobile toolbar */
  }
  .kp-order-sticky {
    min-width: 0;
  }
  
  /* Adjust canvas for mobile toolbar */
  .kp-canvas-column {
    padding-bottom: 60px;
  }
  
  /* View switcher on mobile */
  .kp-view-switcher {
    flex-wrap: nowrap;
    width: auto;
  }
  
  .kp-view-switcher .kp-btn-sm {
    font-size: 11px;
    padding: 4px 12px;
    min-width: 60px;
  }
  
  /* History controls on mobile */
  .kp-history-controls {
    gap: 4px;
  }
  
  .kp-history-controls .kp-btn-icon {
    width: 28px;
    height: 28px;
  }
  
  /* Modal adjustments */
  .kp-modal {
    max-width: 95%;
    max-height: 85%;
    margin: var(--kp-spacing-md);
  }
  
  .kp-modal-header,
  .kp-modal-body,
  .kp-modal-footer {
    padding: var(--kp-spacing-md);
  }
  
  .kp-modal-title {
    font-size: 16px;
  }
  
  /* User projects modal - grid layout for mobile */
  #kp-user-projects-content > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: var(--kp-spacing-md) !important;
  }
  
  /* Design grid on mobile */
  .kp-design-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--kp-spacing-sm);
  }
  
  /* Layer items on mobile */
  .kp-layer {
    padding: var(--kp-spacing-sm);
  }
  
  .kp-layer-thumbnail {
    width: 28px;
    height: 28px;
  }
  
  .kp-layer-name {
    font-size: 12px;
  }
  
  /* Toolbar actions on mobile */
  .kp-toolbar-actions {
    padding: var(--kp-spacing-md);
  }
  
  .kp-btn-full {
    height: 40px;
    font-size: 13px;
  }
  
  /* Properties panel on mobile */
  .kp-properties-header {
    padding: var(--kp-spacing-md);
  }
  
  .kp-properties-title {
    font-size: 16px;
  }
  
  .kp-properties-content {
    padding: var(--kp-spacing-md);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Size chart button on mobile - ensure visibility */
  .kp-btn-size-chart {
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }
  
  .kp-sizes-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  /* Form elements on mobile */
  .kp-form-group {
    margin-bottom: var(--kp-spacing-md);
  }
  
  .kp-input,
  .kp-select {
    font-size: 14px;
  }
  
  /* Effects grid on mobile */
  .kp-effects-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--kp-spacing-sm);
  }
  
  .kp-effect-btn {
    height: 70px;
    font-size: 11px;
  }
  
  .kp-effect-btn i {
    font-size: 20px;
  }

  /* ============================================
     Mobile Object Properties Bar
     ============================================ */
  
  /* Panel z opcjami właściwości - pokazywany nad paskiem nawigacji */
  .kp-mobile-properties-panel {
    display: none;
    position: fixed;
    bottom: 120px; /* Above mobile toolbar (60px) and properties bar (60px) */
    left: 0;
    right: 0;
    max-height: 60vh;
    background: var(--kp-bg-primary);
    border-top: 1px solid var(--kp-border);
    z-index: 105;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  }

  .kp-mobile-properties-panel.visible {
    display: block;
    animation: kp-slide-up 0.3s ease;
  }

  @keyframes kp-slide-up {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Panel content - przesuwany poziomo */
  .kp-mobile-properties-content {
    padding: 16px;
    min-height: 200px;
  }

  /* Pasek kontrolek właściwości - nad mobile toolbar */
  .kp-mobile-properties-bar {
    display: none;
    position: fixed;
    bottom: 60px; /* Above mobile toolbar */
    left: 0;
    right: 0;
    height: 60px;
    background: var(--kp-bg-primary);
    border-top: 1px solid var(--kp-border);
    z-index: 101;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  }

  .kp-mobile-properties-bar.visible {
    display: flex;
  }

  /* Tabs dla różnych właściwości */
  .kp-mobile-properties-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .kp-mobile-properties-tabs::-webkit-scrollbar {
    display: none;
  }

  .kp-mobile-properties-tab {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 500;
    color: var(--kp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .kp-mobile-properties-tab:active {
    background: var(--kp-bg-secondary);
  }

  .kp-mobile-properties-tab.active {
    color: var(--kp-primary);
    border-bottom-color: var(--kp-primary);
    background: var(--kp-primary-light);
  }

  .kp-mobile-properties-tab svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
  }

  /* Specific property panels */
  .kp-mobile-property-panel {
    display: none;
  }

  .kp-mobile-property-panel.active {
    display: block;
  }

  /* Color picker panel */
  .kp-mobile-color-palette {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }

  .kp-mobile-color-swatch {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .kp-mobile-color-swatch:active {
    transform: scale(0.9);
  }

  .kp-mobile-color-swatch.active {
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 2px var(--kp-primary-light);
  }

  /* Font list panel */
  .kp-mobile-font-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .kp-mobile-font-item {
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--kp-border);
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
    font-size: 15px;
  }

  .kp-mobile-font-item:active {
    background: var(--kp-bg-secondary);
  }

  .kp-mobile-font-item.active {
    background: var(--kp-primary-light);
    color: var(--kp-primary);
    font-weight: 600;
  }

  .kp-mobile-font-item:last-child {
    border-bottom: none;
  }

  /* Alignment buttons panel */
  .kp-mobile-alignment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .kp-mobile-alignment-btn {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    background: var(--kp-bg-secondary);
    border: 2px solid var(--kp-border);
    border-radius: var(--kp-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 500;
    color: var(--kp-text-secondary);
  }

  .kp-mobile-alignment-btn:active {
    transform: scale(0.95);
  }

  .kp-mobile-alignment-btn.active {
    background: var(--kp-primary-light);
    border-color: var(--kp-primary);
    color: var(--kp-primary);
  }

  .kp-mobile-alignment-btn svg {
    width: 28px;
    height: 28px;
  }

  /* Edit text panel */
  .kp-mobile-edit-text-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .kp-mobile-text-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-sm);
    font-size: 15px;
    background: var(--kp-bg-primary);
    color: var(--kp-text-primary);
    resize: vertical;
    min-height: 100px;
  }

  .kp-mobile-text-input:focus {
    outline: none;
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 3px var(--kp-primary-light);
  }

  .kp-mobile-font-size-control {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .kp-mobile-font-size-control label {
    font-size: 12px;
    font-weight: 600;
    color: var(--kp-text-primary);
    min-width: 80px;
  }

  .kp-mobile-font-size-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--kp-border);
    border-radius: 3px;
    outline: none;
  }

  .kp-mobile-font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--kp-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .kp-mobile-font-size-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--kp-primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .kp-mobile-font-size-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--kp-text-primary);
    min-width: 45px;
    text-align: right;
  }

  /* Adjust canvas padding when properties bar is visible */
  .kp-canvas-column.has-properties-bar {
    padding-bottom: 120px; /* mobile toolbar (60px) + properties bar (60px) */
  }

  /* Close button for properties panel */
  .kp-mobile-properties-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kp-bg-secondary);
    border: 1px solid var(--kp-border);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
  }

  .kp-mobile-properties-close:active {
    background: var(--kp-bg-tertiary);
  }
}

/* Mobile Portrait (480px) */
@media (max-width: 480px) {
  .kp-designer-header {
    height: 48px;
  }
  
  .kp-designer-title {
    font-size: 14px;
  }
  
  .kp-designer-actions .kp-btn {
    padding: var(--kp-spacing-xs) var(--kp-spacing-sm);
    font-size: 12px;
  }
  
  .kp-canvas-wrapper {
    padding: 6px 2px;
  }
  
  .kp-canvas-topbar {
    padding: 6px;
    gap: 6px;
    min-height: 44px;
  }
  
  .kp-zoom-toggle {
    padding: 0 6px;
    height: 32px;
    font-size: 10px;
  }
  
  .kp-mobile-action-btn {
    padding: 6px 8px;
    font-size: 10px;
    min-width: 60px;
  }
  
  #kp-canvas {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  
  .kp-form-row {
    grid-template-columns: 1fr;
  }
  
  .kp-effects-grid {
    grid-template-columns: 1fr;
  }
  
  /* Product Selector na małych ekranach */
  .kp-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  
  .kp-category-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .kp-products-grid-wrapper {
    padding: 12px;
  }
  
  /* Stare style notyfikacji - usunięte, nowe style są w sekcji "Notifications System" */
}

/* Print styles */
@media print {
  .kp-toolbar,
  .kp-layers-panel,
  .kp-properties-panel,
  .kp-designer-header,
  .kp-mobile-toolbar {
    display: none !important;
  }
  
  .kp-canvas-container {
    width: 100%;
    height: auto;
  }
}

/* ============================================
   Cart & Order Thumbnails
   ============================================ */

.kp-cart-thumbnails {
  display: flex;
  gap: var(--kp-spacing-md);
  flex-wrap: wrap;
  margin-top: var(--kp-spacing-sm);
}

.kp-cart-thumbnail {
  text-align: center;
}

.kp-cart-thumbnail img {
  max-width: 100px;
  height: auto;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  box-shadow: var(--kp-shadow-sm);
  margin-bottom: var(--kp-spacing-xs);
}

.kp-cart-thumbnail small {
  display: block;
  color: var(--kp-text-secondary);
  font-size: 12px;
}

/* Order item design display (admin) */
.kp-order-item-design {
  margin-top: var(--kp-spacing-md);
  padding: var(--kp-spacing-md);
  background: var(--kp-bg-secondary);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-md);
}

.kp-order-item-design h4 {
  margin-top: 0;
  margin-bottom: var(--kp-spacing-md);
  color: var(--kp-text-primary);
}

.kp-order-thumbnails {
  display: flex;
  gap: var(--kp-spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--kp-spacing-md);
}

.kp-order-thumbnail {
  text-align: center;
}

.kp-order-thumbnail img {
  max-width: 150px;
  height: auto;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  box-shadow: var(--kp-shadow-sm);
  background: white;
}

.kp-order-thumbnail small {
  display: block;
  margin-top: var(--kp-spacing-xs);
  color: var(--kp-text-secondary);
}

.kp-order-actions {
  display: flex;
  gap: var(--kp-spacing-sm);
  margin-bottom: var(--kp-spacing-md);
}

.kp-design-details {
  margin-top: var(--kp-spacing-md);
}

.kp-design-details h5 {
  margin-top: 0;
  margin-bottom: var(--kp-spacing-sm);
}

.kp-design-details pre {
  background: white;
  padding: var(--kp-spacing-md);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-sm);
  overflow: auto;
  max-height: 300px;
  font-size: 12px;
  line-height: 1.5;
}

/* ===================================
   Notifications System
   =================================== */

.kp-notifications-container {
  position: fixed;
  top: var(--kp-spacing-lg);
  right: var(--kp-spacing-lg);
  z-index: 100020;
  display: flex;
  flex-direction: column;
  gap: var(--kp-spacing-md);
  max-width: 400px;
  pointer-events: none;
}

.kp-notification {
  display: flex;
  align-items: flex-start;
  gap: var(--kp-spacing-md);
  padding: var(--kp-spacing-md);
  background: var(--kp-bg-primary);
  border-radius: var(--kp-radius-lg);
  box-shadow: var(--kp-shadow-md);
  border-left: 4px solid var(--kp-border);
  opacity: 0;
  transform: translateX(400px);
  transition: all 0.3s ease;
  pointer-events: auto;
  min-width: 300px;
}

.kp-notification-show {
  opacity: 1;
  transform: translateX(0);
}

.kp-notification-hide {
  opacity: 0;
  transform: translateX(400px);
}

/* Notification Types */
.kp-notification-success {
  border-left-color: #10b981;
}

.kp-notification-success .kp-notification-icon {
  color: #10b981;
  background: #d1fae5;
}

.kp-notification-error {
  border-left-color: #ef4444;
}

.kp-notification-error .kp-notification-icon {
  color: #ef4444;
  background: #fee2e2;
}

.kp-notification-warning {
  border-left-color: #f59e0b;
}

.kp-notification-warning .kp-notification-icon {
  color: #f59e0b;
  background: #fef3c7;
}

.kp-notification-info {
  border-left-color: #3b82f6;
}

.kp-notification-info .kp-notification-icon {
  color: #3b82f6;
  background: #dbeafe;
}

/* Notification Icon */
.kp-notification-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.kp-notification-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Notification Content */
.kp-notification-content {
  flex: 1;
  min-width: 0;
}

.kp-notification-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #1f2937;
}

.kp-notification-message {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  word-wrap: break-word;
}

/* Close Button */
.kp-notification-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  padding: 0;
  line-height: 1;
}

.kp-notification-close:hover {
  background: #f3f4f6;
  color: #4b5563;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .kp-notifications-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .kp-notification {
    min-width: 0;
  }
}

/* Dark Mode Support (optional) */
@media (prefers-color-scheme: dark) {
  .kp-notification {
    background: #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  .kp-notification-title {
    color: #f9fafb;
  }
  
  .kp-notification-message {
    color: #d1d5db;
  }
  
  .kp-notification-close {
    color: #9ca3af;
  }
  
  .kp-notification-close:hover {
    background: #374151;
    color: #e5e7eb;
  }
}

/* ============================================
   9. Product Selector Modal
   ============================================ */

/* Base modal styles */
.kp-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}

.kp-modal.active {
  display: flex;
}

#kp-designer-modal .kp-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.kp-modal-content {
  position: relative;
  z-index: 2;
  background: var(--kp-bg-primary);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--kp-border);
}

.kp-modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--kp-text-primary);
}

.kp-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--kp-text-secondary);
  font-size: 24px;
  transition: all 0.2s;
}

.kp-modal-close:hover {
  background: var(--kp-bg-secondary);
  color: var(--kp-text-primary);
}

.kp-icon-close::before {
  content: '×';
}

/* Product Selector Modal - Nowy design */
.kp-product-selector-modal-content {
  background: var(--kp-bg-primary);
  border-radius: 12px;
  overflow: hidden;
}

.kp-modal-body.kp-product-selector-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Bar kategorii na górze */
.kp-category-tabs-wrapper {
  border-bottom: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
  padding: 16px 0 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 70px;
  width: 100%;
  min-width: 100%;        /* wymuś pełną szerokość od razu */
  box-sizing: border-box;
}

.kp-category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 20px 12px 20px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  width: 100%;            /* zawsze pełna szerokość */
  min-width: 100%;        /* zapobiega shrink-to-fit przy overflow */
  box-sizing: border-box;
  flex: 1 1 auto;         /* rozciągaj w osi głównej */
}

.kp-category-tabs::-webkit-scrollbar {
  height: 4px;
}

.kp-category-tabs::-webkit-scrollbar-track {
  background: var(--kp-bg-secondary);
  border-radius: 2px;
}

.kp-category-tabs::-webkit-scrollbar-thumb {
  background: var(--kp-border);
  border-radius: 2px;
}

.kp-category-tabs::-webkit-scrollbar-thumb:hover {
  background: var(--kp-text-secondary);
}

.kp-category-tab {
  padding: 10px 24px;
  border: 1px solid var(--kp-border);
  background: var(--kp-bg-secondary);
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--kp-text-primary);
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}

.kp-category-tab:hover {
  background: var(--kp-primary);
  border-color: var(--kp-primary);
  color: white;
}

.kp-category-tab.active {
  background: var(--kp-primary);
  color: white;
  border-color: var(--kp-primary);
}

.kp-category-tab.kp-back-btn {
  background: var(--kp-bg-primary);
  border-color: var(--kp-border);
  color: var(--kp-text-secondary);
  font-weight: 600;
}

.kp-category-tab.kp-back-btn:hover {
  background: var(--kp-bg-secondary);
  border-color: var(--kp-primary);
  color: var(--kp-primary);
}

/* Grid produktów */
.kp-products-grid-wrapper {
  flex: 1;
  overflow-y: scroll; /* Zawsze widoczny scrollbar */
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.kp-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Karta produktu */
.kp-product-card {
  border: 1px solid var(--kp-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--kp-bg-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.kp-product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--kp-primary);
}

.kp-product-card-image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--kp-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kp-product-card-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kp-product-card-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--kp-text-primary);
}

.kp-product-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--kp-text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2; /* standard property for compatibility */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.6em;
}

/* Kolory produktu */
.kp-product-colors {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.kp-color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.kp-color-dot:hover {
  transform: scale(1.15);
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.kp-color-more {
  font-size: 11px;
  color: var(--kp-text-secondary);
  font-weight: 500;
  padding-left: 2px;
}

/* Rozmiary produktu */
.kp-product-sizes {
  font-size: 11px;
  color: var(--kp-text-secondary);
  margin-top: 4px;
  line-height: 1.3;
}

.kp-no-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0f0f1 0%, #e0e0e1 100%);
}

.kp-no-categories,
.kp-no-selection,
.kp-no-products {
  text-align: center;
  color: var(--kp-text-secondary);
  padding: 60px 20px;
  font-size: 14px;
  grid-column: 1 / -1;
}

/* ============================================
   10. Price Calculator Panel
   ============================================ */
.kp-price-panel {
  background: var(--kp-bg-primary);
  border: 1px solid var(--kp-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  width: 100%;
}

/* Gdy panel ceny jest osadzony w prawym panelu właściwości */
.kp-properties-column .kp-price-panel {
  margin-top: 12px;
}

/* Utrzymaj panel ceny widoczny przy dolnej krawędzi prawego panelu */
.kp-properties-content .kp-price-panel {
  position: sticky;
  bottom: 12px;
}

/* Po usunięciu nagłówka usuń zbędną przerwę u góry panelu */
.kp-properties-content > .kp-price-panel:first-child {
  margin-top: 0;
}

/* Print Method Section */
.kp-print-method-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kp-border);
}

.kp-print-method-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--kp-text-primary);
}

.kp-print-method-selector {
  display: flex;
  gap: 10px;
}

.kp-print-method-btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: 2px solid var(--kp-border);
  background: var(--kp-bg-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-text-primary);
}

.kp-print-method-btn:hover {
  border-color: var(--kp-primary);
  background: var(--kp-primary-light);
}

.kp-print-method-btn.active {
  border-color: var(--kp-primary);
  background: var(--kp-primary);
  color: white;
}

.kp-print-method-btn svg {
  opacity: 0.7;
}

.kp-print-method-btn.active svg {
  opacity: 1;
}

/* Ikona informacyjna przy metodzie nadruku */
.kp-print-method-info-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  z-index: 10;
  pointer-events: auto;
}

.kp-print-method-info-icon:hover {
  background: white;
  border-color: var(--kp-primary);
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.kp-print-method-info-icon svg {
  color: #666;
  opacity: 1 !important;
  width: 13px;
  height: 13px;
}

.kp-print-method-info-icon:hover svg {
  color: var(--kp-primary);
}

.kp-print-method-btn.active .kp-print-method-info-icon {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(255, 255, 255, 0.3);
}

.kp-print-method-btn.active .kp-print-method-info-icon:hover {
  background: white;
  border-color: white;
}

.kp-print-method-btn.active .kp-print-method-info-icon svg {
  color: var(--kp-primary);
}

.kp-print-method-btn.active .kp-print-method-info-icon:hover svg {
  color: var(--kp-primary);
}

.kp-color-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kp-border);
}

.kp-color-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--kp-text-primary);
}

.kp-colors-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kp-color-swatch-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  padding: 2px;
}

.kp-color-swatch-btn:hover {
  border-color: var(--kp-primary);
}

.kp-color-swatch-btn.active {
  border-color: var(--kp-primary);
}

.kp-price-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--kp-text-primary);
}

/* Nagłówek sekcji rozmiarów z przyciskiem */
.kp-sizes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.kp-sizes-header h3 {
  margin: 0;
}

/* Przycisk tabeli rozmiarów */
.kp-btn-size-chart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--kp-bg-secondary);
  border: 1px solid var(--kp-border);
  color: var(--kp-text-primary);
  border-radius: var(--kp-radius-sm);
  cursor: pointer;
  transition: var(--kp-transition);
}

.kp-btn-size-chart:hover {
  background: var(--kp-primary-light);
  border-color: var(--kp-primary);
  color: var(--kp-primary);
}

.kp-btn-size-chart svg {
  width: 16px;
  height: 16px;
}

/* Akcje pod rozmiarami (np. dodaj do koszyka) */
.kp-price-actions {
  margin-top: 12px;
}

.kp-option-group {
  margin-bottom: 16px;
}

.kp-option-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-text-primary);
  margin-bottom: 8px;
}

/* Rozmiary z ilościami */
.kp-sizes-quantities {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kp-size-quantity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kp-size-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--kp-text-primary);
  min-width: 40px;
}

.kp-size-quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kp-size-qty-minus,
.kp-size-qty-plus {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  color: var(--kp-text-secondary);
  transition: all 0.2s;
}

.kp-size-qty-minus:hover,
.kp-size-qty-plus:hover {
  background: var(--kp-primary-light);
  border-color: var(--kp-primary);
  color: var(--kp-primary);
}

.kp-size-qty-input {
  width: 60px;
  height: 32px;
  text-align: center;
  border: 1px solid var(--kp-border);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kp-text-primary);
}

.kp-size-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Odstępy dla komunikatu w sekcji rozmiarów */
.kp-size-selector p {
  padding: 20px;
  margin: 0;
}

.kp-size-btn {
  padding: 8px 16px;
  border: 2px solid var(--kp-border);
  background: var(--kp-bg-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.kp-size-btn:hover {
  border-color: var(--kp-primary);
  background: var(--kp-primary-light);
}

.kp-size-btn.active {
  border-color: var(--kp-primary);
  background: var(--kp-primary);
  color: white;
}

.kp-size-extra {
  font-size: 11px;
  font-weight: normal;
  color: var(--kp-text-secondary);
}

.kp-size-btn.active .kp-size-extra {
  color: rgba(255,255,255,0.8);
}

.kp-quantity-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kp-quantity-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kp-border);
  background: var(--kp-bg-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.2s;
}

.kp-quantity-btn:hover {
  background: var(--kp-primary-light);
  border-color: var(--kp-primary);
}

.kp-quantity-input {
  width: 80px;
  height: 36px;
  text-align: center;
  border: 1px solid var(--kp-border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.kp-quantity-hint {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: var(--kp-text-secondary);
}

/* Tabela rabatów ilościowych */
.kp-quantity-discounts-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--kp-border);
}

.kp-quantity-discounts-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--kp-text-primary);
}

.kp-quantity-discounts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.kp-quantity-discounts-table thead {
  background: var(--kp-bg-secondary);
}

.kp-quantity-discounts-table th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--kp-text-primary);
  border-bottom: 2px solid var(--kp-border);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kp-quantity-discounts-table td {
  padding: 10px 12px;
  color: var(--kp-text-primary);
  border-bottom: 1px solid var(--kp-border);
}

.kp-quantity-discounts-table tbody tr:last-child td {
  border-bottom: none;
}

.kp-quantity-discounts-table tbody tr:hover {
  background: var(--kp-bg-secondary);
}

.kp-quantity-discounts-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--kp-success);
}

.kp-price-summary {
  border-top: 1px solid var(--kp-border);
  padding-top: 16px;
  margin-top: 16px;
}

.kp-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.kp-price-row span:first-child {
  color: var(--kp-text-secondary);
}

.kp-price-row span:last-child {
  font-weight: 600;
  color: var(--kp-text-primary);
}

.kp-price-discount {
  color: var(--kp-success);
}

.kp-price-discount span {
  color: var(--kp-success);
}

.kp-price-subtotal {
  border-top: 1px solid var(--kp-border);
  border-bottom: 1px solid var(--kp-border);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  font-weight: 600;
}

.kp-price-subtotal#kp-unit-price-discounted-row {
  border-top: none;
  margin-top: 0;
  padding-top: 8px;
}

.kp-price-subtotal span:first-child {
  color: var(--kp-text-primary);
  font-weight: 600;
}

.kp-price-subtotal span:last-child {
  font-size: 15px;
  color: var(--kp-primary);
}

.kp-price-total {
  border-top: 2px solid var(--kp-border);
  padding-top: 12px;
  margin-top: 8px;
  font-size: 16px;
}

.kp-price-total span:last-child {
  font-size: 18px;
  color: var(--kp-primary);
}

/* ============================================
   11. New Design - Text Alignment & Color Palette
   ============================================ */
.kp-text-alignment {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.kp-align-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kp-align-btn:hover {
  background: #efefef;
  border-color: #ccc;
}

.kp-align-btn.active {
  background: #e0e0e0;
  border-color: #999;
}

.kp-color-palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.kp-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.kp-color-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.kp-color-swatch.active {
  border-color: #333;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
}

/* Color swatches with specific colors */
.kp-color-swatch[data-color="#000000"] { background: #000000; }
.kp-color-swatch[data-color="#FFFFFF"] { background: #FFFFFF; border-color: #e0e0e0; }
.kp-color-swatch[data-color="#000080"] { background: #000080; }
.kp-color-swatch[data-color="#FF0000"] { background: #FF0000; }
.kp-color-swatch[data-color="#008000"] { background: #008000; }
.kp-color-swatch[data-color="#800080"] { background: #800080; }
.kp-color-swatch[data-color="#FFD700"] { background: #FFD700; }
.kp-color-swatch[data-color="#00008B"] { background: #00008B; }
.kp-color-swatch[data-color="#FF6347"] { background: #FF6347; }
.kp-color-swatch[data-color="#4169E1"] { background: #4169E1; }
.kp-color-swatch[data-color="#FFA500"] { background: #FFA500; }
.kp-color-swatch[data-color="#FF69B4"] { background: #FF69B4; }

/* Button for "CHOOSE THE QUANTITIES" */
.kp-choose-quantities-btn {
  width: 100%;
  padding: 12px 16px;
  background: #00C853;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  box-shadow: 0 2px 4px rgba(0,200,83,0.2);
}

.kp-choose-quantities-btn svg {
  width: 16px;
  height: 16px;
}

.kp-choose-quantities-btn:hover {
  background: #00B248;
  box-shadow: 0 3px 8px rgba(0,200,83,0.3);
}

.kp-choose-quantities-btn:active {
  transform: scale(0.98);
}

/* Responsive dla średnich ekranów (tablety, małe laptopy) */
@media (max-width: 1024px) {
  #kp-product-selector-modal .kp-modal {
    width: 90vw !important;
  }
  
  .kp-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* Responsive dla nowych komponentów */
@media (max-width: 768px) {
  .kp-product-selector-content .kp-modal-body {
    grid-template-columns: 1fr;
  }
  .kp-modal-body.kp-product-selector-content {
    grid-template-columns: 1fr;
  }
  
  /* Mobile: overlay paddings for safe areas and bottom toolbar */
  #kp-image-uploader-modal,
  #kp-product-selector-modal {
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             calc(var(--kp-topbar-height) + env(safe-area-inset-bottom))
             env(safe-area-inset-left);
  }

  /* Keep Image Uploader centered on mobile */
  #kp-image-uploader-modal {
    align-items: center !important;
    justify-content: center !important;
  }

  /* Top-align Product Selector so it can grow down to the bottom toolbar */
  #kp-product-selector-modal {
    align-items: flex-start !important; /* vertical: top */
    justify-content: center !important; /* horizontal: center */
  }

  /* Reset absolute centering injected inline and rely on flex */
  #kp-image-uploader-modal .kp-modal,
  #kp-product-selector-modal .kp-modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: auto !important;
    width: 94vw !important;
    max-width: 94vw !important;
    /* Height fits above bottom actions bar */
    max-height: calc(100vh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px) !important; /* fallback */
    max-height: calc(100dvh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px) !important; /* iOS dynamic viewport */
    overflow: hidden !important;
  }

  /* Small spacing from top for Product Selector */
  #kp-product-selector-modal .kp-modal { margin-top: 8px !important; }

  /* Ensure product selector specifically grows to near-full height */
  #kp-product-selector-modal .kp-modal {
    min-height: calc(100vh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px) !important; /* fallback */
    min-height: calc(100dvh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px) !important; /* iOS */
    height: calc(100dvh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px) !important; /* force fill to bottom bar */
    height: calc(100vh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 16px) !important; /* fallback */
  }

  /* Scroll only inside modal body on mobile to keep header/footer visible */
  #kp-image-uploader-modal .kp-modal-body,
  #kp-product-selector-modal .kp-modal-body {
    overflow-y: auto !important;
    max-height: calc(100vh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 160px) !important; /* header+footer ~160px */
    max-height: calc(100dvh - var(--kp-topbar-height) - env(safe-area-inset-bottom) - 160px) !important; /* iOS */
  }
  
  /* Product Selector Mobile Styles */
  .kp-category-tabs-wrapper {
    padding: 12px 0 0 0;
    min-height: 65px;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
  }
  
  .kp-category-tabs {
    padding: 0 16px 12px 16px;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
  }
  
  .kp-category-tab {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .kp-color-dot {
    width: 18px;
    height: 18px;
  }
  
  .kp-products-grid-wrapper {
    padding: 16px;
    box-sizing: border-box;
  }
  
  .kp-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .kp-product-card-info {
    padding: 10px;
  }
  
  .kp-product-card-price {
    font-size: 14px;
  }
  
  .kp-product-card-title {
    font-size: 12px;
  }
  
  .kp-sidebar-left,
  .kp-sidebar-middle {
    width: 80px;
  }
  
  .kp-sidebar-label,
  .kp-action-sidebar-label {
    font-size: 8px;
  }
  
  .kp-properties-column {
    width: 280px;
  }
  
  /* Further reduce size chart button on very small screens */
  .kp-btn-size-chart {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  
  .kp-btn-size-chart svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ============================================
   Floating Properties Card
   ============================================ */
.kp-floating-properties-card {
  position: absolute;
  width: 320px;
  max-width: 90vw;
  background: var(--kp-bg-primary);
  border: 1px solid var(--kp-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  /* Ustal maksymalną wysokość okienka, aby zawartość nie wychodziła poza ekran */
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kp-floating-properties-card.kp-floating-card-visible {
  opacity: 1;
  transform: translateY(0);
}

.kp-floating-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--kp-bg-secondary);
  border-bottom: 1px solid var(--kp-border);
  border-radius: 12px 12px 0 0;
  cursor: grab;
  user-select: none;
}

.kp-floating-card-header:active {
  cursor: grabbing;
}

.kp-floating-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--kp-text-primary);
  margin: 0;
}

.kp-floating-card-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kp-floating-card-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--kp-text-secondary);
  transition: all 0.2s ease;
}

.kp-floating-card-close:hover {
  background: var(--kp-bg-tertiary);
  color: var(--kp-text-primary);
}

.kp-floating-card-content {
  flex: 1;
  /* Zawsze pokazuj przewijanie pionowe, gdy treść jest dłuższa */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  /* Upewnij się, że obszar treści nie przekroczy maksymalnej wysokości karty */
  max-height: calc(80vh - 56px); /* ~wysokość nagłówka */
  /* Płynne przewijanie na iOS */
  -webkit-overflow-scrolling: touch;
  /* Pozwól na przewijanie w pionie */
  touch-action: pan-y;
}

.kp-floating-card-empty {
  text-align: center;
  color: var(--kp-text-secondary);
  padding: 40px 20px;
}

.kp-floating-card-empty p {
  margin: 0;
  font-size: 14px;
}

.kp-floating-properties-content {
  display: flex;
  flex-direction: column;
  gap: var(--kp-spacing-md);
}

/* Responsive adjustments for floating card */
@media (max-width: 768px) {
  .kp-floating-properties-card {
    width: 90vw;
    max-width: 340px;
    max-height: 70vh;
    /* Wyśrodkuj na ekranie przy pierwszym otwarciu */
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    right: auto !important;
  }
  
  .kp-floating-properties-card.kp-floating-card-visible {
    /* Zachowaj transformację wyśrodkowania przy animacji */
    transform: translate(-50%, -50%);
  }
  
  .kp-floating-card-header {
    padding: 12px 16px;
    /* Większy obszar do chwytania na mobile */
    min-height: 48px;
  }
  
  .kp-floating-card-content {
    padding: 16px;
    max-height: calc(70vh - 48px);
  }
  
  .kp-floating-card-title {
    font-size: 16px;
  }
}

/* Animation for card appearance */
@keyframes kp-float-in {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kp-floating-properties-card.kp-floating-card-visible {
  animation: kp-float-in 0.3s ease;
}

/* Przycisk "Edytuj właściwości" został usunięty - zastąpiony przez mobilny pasek właściwości */

/* ============================================
   Cart Success Modal & Cart Preview Styles
   ============================================ */

/* Modal dialog - używane dla dynamicznych modali (koszyk, sukces) */
.kp-modal-dialog {
  display: block !important;
  position: relative;
  background: var(--kp-bg-primary);
  border-radius: var(--kp-radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  max-height: 90vh;
  overflow: hidden;
}

/* Modal overlay dla sukcesu dodania do koszyka */
.kp-cart-success-modal .kp-modal-body {
  text-align: center;
  padding: 40px 30px;
}

.kp-success-icon {
  margin: 0 auto 24px;
  width: 80px;
  height: 80px;
  animation: kp-success-scale 0.5s ease-out;
}

@keyframes kp-success-scale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.kp-cart-success-modal h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--kp-text-primary);
}

.kp-cart-success-modal .kp-btn-large {
  font-size: 16px;
  padding: 14px 24px;
  margin-top: 8px;
  justify-content: center;
}

/* Cart Preview Modal */
.kp-cart-preview-modal .kp-cart-items {
  max-height: 400px;
  overflow-y: auto;
}

.kp-cart-preview-modal .kp-cart-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kp-border);
}

.kp-cart-preview-modal .kp-cart-item:last-child {
  border-bottom: none;
}

.kp-cart-preview-modal .kp-cart-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--kp-radius-sm);
  border: 1px solid var(--kp-border);
}

.kp-cart-preview-modal .kp-cart-summary {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--kp-border);
}

/* Dodatkowe style dla przycisków w modalu */
.kp-btn-secondary {
  background: var(--kp-bg-secondary);
  color: var(--kp-text-primary);
  border-color: var(--kp-border);
}

.kp-btn-secondary:hover {
  background: var(--kp-bg-tertiary);
  border-color: var(--kp-text-secondary);
}

/* Przycisk usuwania produktu z koszyka */
.kp-remove-cart-item {
  padding: 4px 8px;
  font-size: 12px;
  color: #dc3545;
  background: transparent;
  border: 1px solid #dc3545;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.kp-remove-cart-item:hover {
  background: #dc3545;
  color: white;
}

.kp-remove-cart-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   Dimensions Tooltip
   ============================================ */

/* Tooltip z wymiarami podczas skalowania obiektów */
.kp-dimensions-tooltip {
  position: fixed;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.3px;
}

.kp-dimensions-tooltip::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.85);
}

/* ============================================
   Popup wyboru metody nadruku
   ============================================ */

#kp-print-method-selection-modal .kp-print-method-selection-dialog {
  animation: kp-modal-slide-in 0.3s ease-out;
}

@keyframes kp-modal-slide-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsywność dla mobile */
@media (max-width: 768px) {
  #kp-print-method-selection-modal .kp-print-method-selection-dialog {
    width: 95vw !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
  }
  
  #kp-print-method-selection-modal .kp-modal-body {
    padding: 24px 20px !important;
    max-height: calc(90vh - 48px) !important;
  }
  
  #kp-print-method-selection-modal h2 {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  
  #kp-print-method-selection-modal .kp-print-method-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }
  
  #kp-print-method-selection-modal .kp-print-method-card {
    padding: 20px !important;
  }
  
  #kp-print-method-selection-modal .kp-print-method-card h3 {
    font-size: 18px !important;
  }
  
  #kp-print-method-selection-modal .kp-print-method-card p {
    font-size: 13px !important;
  }
  
  #kp-print-method-selection-modal .kp-print-method-card ul {
    font-size: 12px !important;
  }
  
  #kp-print-method-selection-modal .kp-print-method-card > div:first-child > div:first-child {
    width: 40px !important;
    height: 40px !important;
    margin-right: 12px !important;
  }
  
  #kp-print-method-selection-modal .kp-print-method-card > div:first-child > div:first-child svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ============================================
   Responsive - Hide external sticky button and custom menu on mobile/tablet
   ============================================ */
@media (max-width: 1024px) {
  body > div.ti-widget.ti-certificate.ti-widget-appeared > div.ti-sticky-button.ti-position-left.ti-type-01,
  #menuButtonCustom {
    display: none !important;
  }
}

/* ============================================
   Hide "Wzory" tab in designer
   ============================================ */
/* Desktop sidebar - left */
#kp-designs {
  display: none !important;
}

/* Mobile toolbar - bottom */
#kp-mobile-tools {
  display: none !important;
}