/* ===== Konfigurator "Sastavi svoj broj" — mobile-first =====
   Izdvojeno iz index.html. Namjerno NE definira boje, razmake ni tipografiju:
   koristi custom propertyje iz :root glavne stranice (--color-accent, --space-md,
   --font-primary …), pa konfigurator prati temu sajta. Zato se mora učitati NAKON
   glavnog <style> bloka. */

.kb-eyebrow {display: inline-block; font-family: var(--font-primary); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--color-accent-dark); border: 1px solid var(--color-accent); padding: 4px 14px; margin-bottom: var(--space-md);}
.kb-preview-stage {position: relative;}
.kb-model-nav {position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; font-weight: var(--fw-regular); background-color: rgba(255, 255, 255, 0.9); border: 1px solid var(--color-neutral-300); color: var(--color-text); box-shadow: var(--shadow-sm); z-index: 1;}
.kb-model-nav:hover {background-color: var(--color-accent); border-color: var(--color-accent); box-shadow: var(--shadow-md);}
.kb-model-prev {left: 10px;}
.kb-model-next {right: 10px;}
#section-konfigurator {background-color: var(--color-bg); position: relative;}
#section-konfigurator.kb-unavailable {display: none !important;}
#section-konfigurator .section-title, #section-konfigurator .section-description {text-align: left;}
.kb-config-row {margin-top: var(--space-lg);}
.kb-preview-container {background-color: var(--color-neutral-100); box-shadow: var(--shadow-md); padding: var(--space-sm); margin-bottom: var(--space-lg); position: relative;}
#kbPreviewSvg {display: block; width: 100%; height: auto; background-color: #edebe6;}
.kb-preview-meta {text-align: center; font-size: var(--fs-xs); color: var(--color-text-light); letter-spacing: var(--ls-wider); text-transform: uppercase; padding: var(--space-xs) 0 var(--space-3xs);}
.kb-controls {background-color: var(--color-bg); padding: var(--space-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-md);}
.kb-field label {display: block; font-family: var(--font-primary); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--color-text-light); margin-bottom: var(--space-2xs);}
.kb-field select {width: 100%; padding: var(--space-sm) var(--space-md); font-family: var(--font-secondary); font-size: var(--fs-base); border: 1px solid var(--color-neutral-200); background-color: rgba(255,255,255,0.8); cursor: pointer; transition: border-color var(--transition-default), box-shadow var(--transition-default);}
.kb-field select:focus {outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(212, 178, 111, 0.3);}
.kb-field input {padding: var(--space-sm) var(--space-md);}
.kb-field input:disabled {opacity: 0.45; cursor: not-allowed; background-color: var(--color-neutral-100); transform: none;}
.kb-field-hint {display: block; margin-top: var(--space-3xs); font-size: var(--fs-xs); color: var(--color-text-light); font-style: italic;}
.kb-swatches {display: flex; gap: var(--space-sm); flex-wrap: wrap;}
.kb-swatch {width: 44px; height: 44px; padding: 0; border: 2px solid var(--color-neutral-300); cursor: pointer; position: relative; transition: transform var(--transition-bounce), border-color var(--transition-default), box-shadow var(--transition-default); box-shadow: var(--shadow-sm); overflow: visible;}
.kb-swatch::before {display: none;}
.kb-swatch:hover {transform: scale(1.08); border-color: var(--color-accent); background-color: var(--kb-swatch-color);}
.kb-swatch.active {border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(212, 178, 111, 0.35);}
.kb-swatch .kb-swatch-name {position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 0.65rem; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-light); white-space: nowrap; pointer-events: none;}
.kb-swatches {padding-bottom: var(--space-md);}
.kb-order-btn {width: 100%; margin-top: var(--space-2xs); padding: var(--space-md) var(--space-lg); text-align: center; color: var(--color-text) !important;}
@media (min-width: 992px) {
  .kb-controls {padding: var(--space-lg); height: 100%;}
  .kb-preview-container {margin-bottom: 0; height: 100%; display: flex; flex-direction: column; justify-content: center;}
}