/* ═══════════════════════════════════════════════════════
   KUPOLLA — Configurator Page Styles
   kupolla-config.css
════════════════════════════════════════════════════════ */

/* 1. PAGE BASE */
.kp-cfg-page { padding-top: var(--hh); }

/* Dome wrapper */
.kp-cfg-preview__dome {
  overflow: hidden;
}
/* domeGroup has its own transform transition set inline */
@keyframes domeChange {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.2) drop-shadow(0 0 8px rgba(5,31,67,.4)); }
  100% { filter: brightness(1); }
}
.kp-cfg-dome-svg.changed { animation: domeChange .55s var(--ease); }

/* Price number flash */
.kp-cfg-price__num.updated {
  animation: priceFlash .6s var(--ease);
}
@keyframes priceFlash {
  0%   { color: var(--c-white); transform: scale(1); }
  30%  { color: var(--c-beige); transform: scale(1.06); }
  100% { color: var(--c-white); transform: scale(1); }
}

/* Breadcrumbs (reused from model) */
.kp-breadcrumbs-wrap { background: var(--c-stone-bg); border-bottom: 1px solid var(--c-border); padding: calc(var(--hh) + var(--safe-t) + .75rem) 0 .75rem; }
.kp-breadcrumbs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kp-bc__item { font-size: .8125rem; color: var(--c-muted); min-height: 36px; display: flex; align-items: center; transition: color var(--tr-f); }
.kp-bc__item:hover { color: var(--c-forest); }
.kp-bc__item--cur { color: var(--c-text); font-weight: 500; }
.kp-bc__sep { color: var(--c-stone); }

/* 2. CFG HERO / PAGE HEADER */
.kp-cfg-hero {
  background: linear-gradient(140deg, #000 0%, #00311e 60%, #0a3a30 100%);
  padding: 3rem 0 2.5rem;
  position: relative; overflow: hidden;
}
.kp-cfg-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}
.kp-cfg-hero > .kp-container {
  position: relative;
  z-index: 1;
}
.kp-cfg-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: nowrap;
}
.kp-cfg-hero__content {
  position: relative;
  z-index: 2;
  flex: 1 1 320px;
  min-width: 0;
}
.kp-cfg-hero__illustration {
  flex: 0 1 420px;
  width: min(42%, 420px);
  pointer-events: none;
  line-height: 0;
  z-index: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.kp-cfg-hero__illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
  -webkit-filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}
.kp-cfg-hero__title {
  font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300; line-height: 1.1;
  color: var(--c-white); margin: .5rem 0 .75rem;
}
.kp-cfg-hero__title em { font-style: normal; color: var(--c-white); }
.kp-cfg-hero__desc { font-size: .9375rem; color: rgba(255,255,255,.6); max-width: 420px; line-height: 1.65; }
.kp-cfg-hero__more { margin: .75rem 0 0; }
.kp-cfg-hero__more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #e8e4dc;
  text-decoration: underline;
  text-underline-offset: .2em;
  -webkit-tap-highlight-color: transparent;
}

/* Simplified hero (no step indicator) */
.kp-cfg-hero__inner--simple { justify-content: flex-start; }

@media (max-width: 1024px) {
  .kp-cfg-hero__inner {
    flex-wrap: wrap;
    min-height: clamp(280px, 62vw, 360px);
    align-items: flex-start;
    gap: 0;
  }
  .kp-cfg-hero__content {
    width: 100%;
  }
  .kp-cfg-hero__illustration {
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: min(96vw, 360px);
    max-width: none;
    flex: none;
    z-index: 1;
    -webkit-transform: translateX(-50%) translateZ(0);
    transform: translateX(-50%) translateZ(0);
    -webkit-mask-image: linear-gradient(to top, #000 26%, rgba(0, 0, 0, 0.4) 54%, transparent 80%);
    mask-image: linear-gradient(to top, #000 26%, rgba(0, 0, 0, 0.4) 54%, transparent 80%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .kp-cfg-hero__illustration img {
    opacity: 0.58;
    filter: brightness(1.15) contrast(1.05);
    -webkit-filter: brightness(1.15) contrast(1.05);
  }
}

@media (max-width: 768px) {
  .kp-cfg-hero__inner {
    min-height: clamp(280px, 78vw, 360px);
  }
  .kp-cfg-hero__illustration {
    width: min(98vw, 340px);
    bottom: -2%;
  }
  .kp-cfg-hero__illustration img {
    opacity: 0.52;
  }
}

@media (max-width: 480px) {
  .kp-cfg-hero__illustration {
    width: min(100vw, 300px);
    bottom: 0;
    -webkit-mask-image: linear-gradient(to top, #000 22%, rgba(0, 0, 0, 0.35) 50%, transparent 78%);
    mask-image: linear-gradient(to top, #000 22%, rgba(0, 0, 0, 0.35) 50%, transparent 78%);
  }
  .kp-cfg-hero__illustration img {
    opacity: 0.48;
  }
}

/* Step indicator in hero */
.kp-cfg-steps-indicator {
  display: flex; align-items: center; gap: 0;
  flex-shrink: 0;
}
.kp-csi__item {
  display: flex; flex-direction: column; align-items: center;
  gap: .35rem; cursor: pointer; transition: all var(--tr);
  padding: .25rem .5rem;
}
.kp-csi__num {
  width: 36px; height: 36px;
  border-radius: var(--r-circle);
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.5);
  transition: all var(--tr);
}
.kp-csi__lbl { font-size: .6875rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; }
.kp-csi__item.active .kp-csi__num { background: #fff; border-color: #fff; color: var(--c-forest); }
.kp-csi__item.active .kp-csi__lbl { color: #fff; }
.kp-csi__item.done .kp-csi__num { background: rgba(5,31,67,.2); border-color: rgba(5,31,67,.4); color: rgba(255,255,255,.6); }
.kp-csi__line { width: 2.5rem; height: 1px; background: rgba(255,255,255,.15); flex-shrink: 0; }

/* 3. CONFIGURATOR LAYOUT */
.kp-cfg-layout { padding: 3rem 0 5rem; background: var(--c-warm); }
.kp-cfg-inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}

/* 4. SECTION PANELS */
.kp-cfg-steps { display: flex; flex-direction: column; gap: 0; }
.kp-cfg-step {
  background: var(--c-white);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border);
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.kp-cfg-step__hd { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--c-border); }
.kp-cfg-step__num { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.25rem; color: var(--c-beige); font-weight: 400; flex-shrink: 0; }
.kp-cfg-step__title { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.375rem; font-weight: 400; color: var(--c-dark); }
.kp-cfg-step__hint { font-size: .875rem; color: var(--c-muted); padding: .5rem 1.75rem 0; line-height: 1.6; }
.kp-cfg-step__nav { display: flex; gap: .875rem; padding: 1.5rem 1.75rem; flex-wrap: wrap; }

/* 5. MODEL CARDS */
.kp-cfg-models { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem 1.75rem; }
.kp-cfg-model { cursor: pointer; }
.kp-cfg-model input { position: absolute; opacity: 0; pointer-events: none; }
.kp-cfg-model__card {
  display: grid; grid-template-columns: 100px 1fr auto;
  align-items: center; gap: 1.25rem;
  padding: 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: all var(--tr);
  position: relative; overflow: hidden;
}
.kp-cfg-model__card:hover { border-color: var(--c-forest); background: var(--c-warm); }
.kp-cfg-model__card--sel { border-color: var(--c-forest); background: rgba(14,35,25,.04); }
.kp-cfg-model__img { height: 72px; border-radius: var(--r-md); overflow: hidden; position: relative; }
.kp-cfg-model__img--s {
  background:
    linear-gradient(140deg, rgba(14,35,25,.25), rgba(42,80,64,.25)),
    url("../images/models/kupolla-s-exterior-forest.98f5b29a8ec8.webp") center / cover no-repeat;
}
.kp-cfg-model__img--m { background: linear-gradient(140deg, #00311e, #051f43); }
.kp-cfg-model__img--l { background: linear-gradient(140deg, #202020, #00311e); }
.kp-cfg-model__pop { position: absolute; bottom: .25rem; left: .5rem; font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.kp-cfg-model__info { display: flex; flex-direction: column; gap: .2rem; }
.kp-cfg-model__name { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.125rem; color: var(--c-dark); }
.kp-cfg-model__area { font-size: .8125rem; font-weight: 500; color: var(--c-forest); }
.kp-cfg-model__desc { font-size: .8125rem; color: var(--c-muted); }
.kp-cfg-model__price { font-size: .875rem; color: var(--c-text); font-weight: 500; }
.kp-cfg-model__check {
  width: 28px; height: 28px;
  border-radius: var(--r-circle); border: 1.5px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; color: var(--c-white);
  background: transparent; transition: all var(--tr); flex-shrink: 0;
}
.kp-cfg-model input:checked ~ .kp-cfg-model__card .kp-cfg-model__check,
.kp-cfg-model__card--sel .kp-cfg-model__check { background: var(--c-forest); border-color: var(--c-forest); }

/* 6. DIAMETER CARDS */
.kp-cfg-diams { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; padding: 1.25rem 1.75rem; }
.kp-cfg-diam { cursor: pointer; }
.kp-cfg-diam input { position: absolute; opacity: 0; pointer-events: none; }
.kp-cfg-diam__card {
  padding: 1.25rem .875rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  text-align: center; display: flex; flex-direction: column; gap: .375rem;
  transition: all var(--tr); background: var(--c-warm);
}
.kp-cfg-diam__card:hover { border-color: var(--c-forest); background: var(--c-white); }
.kp-cfg-diam__card--sel, .kp-cfg-diam input:checked ~ .kp-cfg-diam__card { border-color: var(--c-forest); background: var(--c-white); box-shadow: 0 0 0 3px rgba(14,35,25,.08); }
.kp-cfg-diam__val { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.5rem; font-weight: 400; color: var(--c-dark); }
.kp-cfg-diam__area { font-size: .75rem; color: var(--c-muted); }
.kp-cfg-diam__note { font-size: .75rem; color: var(--c-forest); font-weight: 500; }

/* 7. TIER CARDS */
.kp-cfg-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem; padding: 1.25rem 1.75rem; }
.kp-cfg-tier { cursor: pointer; }
.kp-cfg-tier input { position: absolute; opacity: 0; pointer-events: none; }
.kp-cfg-tier__card {
  padding: 1.5rem 1.25rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  display: flex; flex-direction: column; gap: .5rem;
  transition: all var(--tr); background: var(--c-warm); position: relative;
}
.kp-cfg-tier__card:hover { border-color: var(--c-forest); background: var(--c-white); }
.kp-cfg-tier__card--sel, .kp-cfg-tier input:checked ~ .kp-cfg-tier__card { border-color: var(--c-forest); background: var(--c-white); box-shadow: var(--sh-sm); }
.kp-cfg-tier__pop {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-hit);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: .22rem .7rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  border: 1px solid var(--c-hit);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
.kp-cfg-tier__name { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.125rem; color: var(--c-dark); margin-top: .75rem; }
.kp-cfg-tier__price { font-size: .875rem; font-weight: 500; color: var(--c-forest); }
.kp-cfg-tier__list { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin-top: .25rem; }
.kp-cfg-tier__list li { font-size: .8125rem; color: var(--c-muted); padding-left: 1rem; position: relative; }
.kp-cfg-tier__list li::before { content: '·'; position: absolute; left: 0; color: var(--c-beige); }
.kp-cfg-tier__check { width: 24px; height: 24px; border-radius: var(--r-circle); border: 1.5px solid var(--c-border); display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--c-white); align-self: flex-end; transition: all var(--tr); }
.kp-cfg-tier input:checked ~ .kp-cfg-tier__card .kp-cfg-tier__check, .kp-cfg-tier__card--sel .kp-cfg-tier__check { background: var(--c-forest); border-color: var(--c-forest); }

/* 8. OPTIONS GRID */
.kp-cfg-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: 1.25rem 1.75rem; }
.kp-cfg-opt { cursor: pointer; }
.kp-cfg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.kp-cfg-opt__card {
  padding: 1.25rem 1rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  transition: all var(--tr); background: var(--c-warm); position: relative;
}
.kp-cfg-opt__card:hover { border-color: var(--c-forest); background: var(--c-white); }
.kp-cfg-opt input:checked ~ .kp-cfg-opt__card { border-color: var(--c-forest); background: rgba(14,35,25,.04); box-shadow: 0 0 0 3px rgba(14,35,25,.07); }
.kp-cfg-opt__icon { width: 28px; height: 28px; color: var(--c-forest); }
.kp-cfg-opt__icon svg { width: 100%; height: 100%; }
.kp-cfg-opt__name { font-size: .8125rem; font-weight: 500; color: var(--c-text); }
.kp-cfg-opt__price { font-size: .75rem; color: var(--c-forest); font-weight: 500; }
.kp-cfg-opt__check { position: absolute; top: .625rem; right: .625rem; width: 20px; height: 20px; border-radius: var(--r-circle); border: 1.5px solid var(--c-border); background: var(--c-white); transition: all var(--tr); }
.kp-cfg-opt input:checked ~ .kp-cfg-opt__card .kp-cfg-opt__check { background: var(--c-forest); border-color: var(--c-forest); }
.kp-cfg-opt input:checked ~ .kp-cfg-opt__card .kp-cfg-opt__check::after { content: '✓'; display: flex; align-items: center; justify-content: center; font-size: .6875rem; color: var(--c-white); width: 100%; height: 100%; }

/* 9. STICKY PANEL */
.kp-cfg-panel {
  position: sticky;
  top: calc(var(--hh) + 1.5rem);
  display: flex; flex-direction: column; gap: 1rem;
  max-height: calc(100dvh - var(--hh) - 3rem);
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.kp-cfg-panel::-webkit-scrollbar { display: none; }
.kp-cfg-preview {
  background: linear-gradient(140deg, #000 0%, #00311e 100%);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  overflow: hidden;
  position: relative;
}
.kp-cfg-preview__title {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  margin-bottom: .875rem;
}

/* SVG dome strip (shows selected options) */
.kp-cfg-preview__dome-strip {
  background: rgba(14,35,25,.55);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 320 / 208;
  width: 100%;
}
.kp-cfg-preview__dome-strip--full {
  aspect-ratio: 320 / 208;
}
.kp-cfg-dome-svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #e8e4dc;
  transition: filter .35s var(--ease);
}
.kp-cfg-dome-svg * { transition: opacity .45s var(--ease); }

.kp-cfg-summary {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: .625rem;
}
.kp-cfg-sum__row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .375rem 0; border-bottom: 1px solid var(--c-border); }
.kp-cfg-sum__row:last-child { border-bottom: none; }
.kp-cfg-sum__k { font-size: .8125rem; color: var(--c-muted); }
.kp-cfg-sum__v { font-size: .875rem; font-weight: 500; color: var(--c-text); text-align: right; }

.kp-cfg-price {
  background: var(--c-forest);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.kp-cfg-price__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); }
.kp-cfg-price__num {
  font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em;
  font-size: 2.25rem; font-weight: 300; line-height: 1;
  color: var(--c-white);
  transition: all var(--tr);
}
.kp-cfg-price__num.updated { color: #fff; }
.kp-cfg-price__note { font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.55; }

/* Summary inline (in form) */
.kp-cfg-summary-inline {
  background: var(--c-stone-bg);
  border-radius: var(--r-lg);
  padding: 1rem 1.25rem;
  margin-bottom: .5rem;
  font-size: .875rem;
  color: var(--c-muted);
  line-height: 1.7;
  border: 1px solid var(--c-border);
}

/* Form step */
.kp-cfg-form-step { margin-top: 0; scroll-margin-top: calc(var(--hh) + 1rem); }
.kp-cfg-step__hint + .kp-cfg-summary-inline { margin: 1rem 1.75rem 0; }
.kp-cfg-form-step .kp-cfg-summary-inline { margin: .5rem 1.75rem 0; }

.kp-cfg-form-response {
  margin: .75rem 1.75rem 0;
  font-size: .875rem;
  line-height: 1.55;
}
.kp-cfg-form-response:empty { display: none; }

.kp-cfg-form-step .kp-form {
  padding: 1.25rem 1.75rem 1.75rem;
  gap: 1.125rem;
}
.kp-cfg-form-step .kp-form__fld { gap: .5rem; }
.kp-cfg-form-step .kp-form__lbl {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: .01em;
}
.kp-cfg-form-step .kp-form__inp {
  font-size: 1rem;
  padding: .8125rem 1rem;
  background: var(--c-warm);
  border-color: rgba(202, 201, 189, .55);
  border-radius: var(--r-md);
  min-height: 48px;
}
.kp-cfg-form-step .kp-form__inp::placeholder {
  color: var(--c-stone);
  opacity: 1;
}
.kp-cfg-form-step .kp-form__inp:focus {
  background: var(--c-white);
  border-color: var(--c-forest);
  box-shadow: 0 0 0 3px rgba(14, 35, 25, .1);
}
.kp-cfg-form-step .kp-checkbox {
  margin-top: .25rem;
  padding: .875rem 1rem;
  background: var(--c-stone-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.kp-cfg-form-step .kp-checkbox__txt {
  font-size: .8125rem;
  color: var(--c-text);
  line-height: 1.5;
}
.kp-cfg-form-step .kp-form [type="submit"] {
  margin-top: .5rem;
}

.kp-cfg-form-step .kp-form__success {
  padding: 1.25rem 1.75rem 1.75rem;
}