/* Základný layout */
#konfigurator .main { padding:0; font-weight:300; }
.kf { display:flex; gap:5%; }
.kf-sidebar{ 
    width:15%;min-width:150px; background:#e6e0d8; padding:0; position:sticky; top:0; height:100vh; overflow:auto;
    display:flex;flex-direction: column;justify-content: space-between;
}
.kf-logo {
  margin: 0 auto;
  overflow: hidden;
  padding: 2vh 0 4vh;
  position: relative;
  width: 100%;height:17vh;
  z-index: 9;
  background: url("../images/kf/sidehead.svg") bottom center no-repeat;background-size: cover;
}
.kf-logo img {width:90%;margin: 0 auto;min-height:60px;}
.kf-steps{ list-style:none; padding:0; margin:0; display:flex;flex-direction: column;justify-content: space-between; height: 83vh; }
.kf-steps li { padding:15px; cursor:pointer; font-weight:700; }
.kf-steps li.active{ background:#e9c996; }
.kf-steps li:first-child { margin:-5vh 0 0;padding:6vh 15px 15px; }
.kf-steps li img {display: block;margin: 0 auto; width:auto;transform: scale(0.7);}
.kf-steps li p {
    margin: 1px 0 0;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}
.kf-steps li:last-child { 
    background: url("../images/kf/sidefoot.svg") top center no-repeat;background-size: cover;
    color:#fff;
}

.kf-content{ flex:1; padding:0; width:85%; }
.kf-content strong { font-weight:bold; }
.kf-content>form { padding:0; width:100%;height:100%; display: flex; flex-direction: column; }
.kf-panel{ display:none;padding-top: 12vw;height: 92%;padding-right: 5%; }
.kf-panel.laststep { padding-top: 3vw;height: 92%; }
.kf-panel.laststep h1 { text-transform: uppercase; }
.kf-panel:nth-of-type(1) { background: url("../images/kf/banner1.jpg") top right no-repeat;background-size: contain; }
.kf-panel:nth-of-type(2) { background: url("../images/kf/banner2.jpg") top right no-repeat;background-size: contain; }
.kf-panel:nth-of-type(3) { background: url("../images/kf/banner3.jpg") top right no-repeat;background-size: contain; }
.kf-panel:nth-of-type(4) { background: url("../images/kf/banner4.jpg") top right no-repeat;background-size: contain; }
.kf-panel:nth-of-type(5) { background: url("../images/kf/banner5.jpg") top right no-repeat;background-size: contain; }
.kf-panel:nth-of-type(6) { background: url("../images/kf/banner6.jpg") top right no-repeat;background-size: contain; }
.kf-panel:nth-of-type(7) { background: url("../images/kf/banner7.jpg") top right no-repeat;background-size: contain; }
.kf-panel:nth-of-type(8) { background: url("../images/kf/banner8.jpg") top right no-repeat;background-size: contain; }
.kf-panel>div{ display: flex;align-items: center; width:100%;min-height:100%; }
.kf-panel.laststep>div {align-items: flex-start;padding-top: 3vw;}
.kf-panel h2{ font-size:36px; margin:8px 0 12px; }
.kf-panel h3{ margin:18px 0 8px; font-size:20px; }
.kf-note{ color:#666; margin-bottom:14px; }
.kf-tip{ font-style:italic; }

.infotext {text-align:left;line-height: 1.2;width:30%;padding-right:5%;}
.infotext > h1 {
  font-size: 3.452188rem;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase;
}
.infotext >.rectangle {
  height: 5px;
  margin: 19px 0 0;
  position: relative;
  width: 70%;
  background: #e9c996;
}
.infotext > p {
  margin: 30px 0 0;
}
.infotext > img {
  display: inline-block;
  margin: 19px 19px 0 0;
  position: relative;
}

/* Karty */
.kf-cards{ display:grid; gap:4%; width:70%; }
.kf-acc-body .kf-cards { width:100%;gap:2%; }
.kf-cards-3{ grid-template-columns:repeat(3, minmax(160px,1fr)); }
.kf-cards-3s{ grid-template-columns:repeat(3, minmax(100px,1fr)); }
.kf-cards-4{ grid-template-columns:repeat(4, minmax(160px,1fr)); }
.kf-cards-5{ grid-template-columns:repeat(5, minmax(140px,1fr)); }
.kf-cards-6{ grid-template-columns:repeat(6, minmax(120px,1fr)); }
.kf-cards-7{ grid-template-columns:repeat(7, minmax(110px,1fr)); }
.kf-cards-8{ grid-template-columns:repeat(8, minmax(100px,1fr)); }
.kf-cards-9{ grid-template-columns:repeat(9, minmax(90px,1fr)); }
.kf-cards-10{ grid-template-columns:repeat(10, minmax(80px,1fr)); }

.kf-card{ display:block; padding:10px; text-align:center; background:#fff; position:relative;cursor:pointer; }
.kf-card input{ position:absolute; opacity:0; pointer-events:none; }
.kf-card .kf-img{ width:100%; margin-bottom:12px; } .kf-card .kf-img img{ margin:0 auto; }
.kf-card .kf-img:after{ display:none;content: " "; }
.kf-card .kf-img.small{ height:120px; }
.kf-card .kf-sq{ width:100%; padding-top:100%; background:#ddd; border-radius:10px; margin-bottom:8px; }
.kf-cap{ display:block; font-weight:300; font-size:1.1rem; line-height:1.25; }
.kf-card.selected{ outline:3px solid #e9c996; }
.kf-card.selected .kf-img:after{ content: " ";display:block;background: url("../images/kf/check.svg") center center no-repeat; position:absolute; width:5vw;height:5vw; left:calc(50% - 2.5vw); top:calc(50% - 4vw) }

.kf-card.s13{ grid-column: 1 / 3; display:flex;align-items:center;text-align:left; } .kf-card.s13 .kf-img{ width:auto;margin-right: 20px; }
.kf-card.s35{ grid-column: 3 / 5; display:flex;align-items:center;text-align:left; } .kf-card.s35 .kf-img{ width:auto;margin-right: 20px; }

.kf-imgfull {width: 100%;grid-row: 2;grid-column: 1 / 8;}

.kf-substeps {width: 70%;display:flex;flex-direction: column;}

/* Accordion */
.kf-accordion{ 
    width:100%; text-align:left; padding:16px 30px; background:#fff; border:none; margin:18px 0 6px; font-weight:bold;text-transform:uppercase;font-size:1.6rem; box-shadow:0 2px 18px rgba(0,0,0,.2);
    display:flex; justify-content: space-between;align-items: center;
    -webkit-transition:all 200ms ease-out;-moz-transition:all 200ms ease-out;-ms-transition:all 200ms ease-out;-o-transition:all 200ms ease-out;transition:all 200ms ease-out;
}
.kf-accordion.open{ box-shadow:0 2px 1px rgba(0,0,0,0);padding:16px 0; }
.kf-accordion.open img{ display:none; }
.kf-acc-body{  }

/* Form rozloženie */
.kf-contact { width:30%; }
.kf-contact>div { display:flex;flex-direction: column; text-align:left;}
.kf-col { width:100%; }
.kf-col>label { width:100%; }
.kf-col input[type=text],
.kf-col input[type=email],
.kf-col select,
.kf-col textarea{ width:100%; padding:10px 12px; border:1px solid #ddd; }

/* Zhrnutie */
.kf-summary {text-align:left;padding-right:2vw;width:70%;}
.kf-summary h3 { margin:12px 0 4px; font-size:1.7rem; }
.kf-ul{ margin:6px 0 14px 18px; }

/* Navigácia */
.kf-nav{ position:fixed; right:0; bottom:0; display:flex; gap:4%; width: 80%;justify-content: space-between; }
.kf-prev, .kf-next, .kf-send{ appearance:none; border:0; padding:15px 35px; font-weight:800; cursor:pointer; text-transform:uppercase; font-size:1.5rem; display:flex; }
.kf-prev{ background:#fff; }
.kf-prev img{ padding-right:12px; } .kf-next img{ padding-left:12px; }
.kf-next{ background:#777777; color:#fff; }
.kf-send{ background:#1b6f2a; color:#fff; margin-top:12px; }

/* Tablet prelom – zachovaj pôvodné správanie, zjemni griddy */
@media (max-width:1100px){
  .kf{ flex-direction:column; }
  .kf-sidebar{ position:relative; height:auto; }
  .kf-cards-6{ grid-template-columns:repeat(3, minmax(120px,1fr)); }
  .kf-cards-7{ grid-template-columns:repeat(3, minmax(110px,1fr)); }
}

/* ========================= MOBIL (<= 768px) ========================= */
@media (max-width: 768px) {
  .kf {
    flex-direction: column;
    gap: 0;
  }

  .kf-sidebar{
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;      /* prebitie 100vh */
    overflow-x: auto;
    overflow-y: hidden;
    background: #e6e0d8;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .kf-logo { 
    display: none !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
  }

  .kf-steps{
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    height: auto !important;      /* prebitie 83vh */
    padding: 8px 10px !important;
    margin: 0 !important;

    /* scroll-snap pre horizontálne menu */
    scroll-snap-type: x mandatory;
  }
  .kf-steps li{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 6px 10px !important;
    margin: 0 !important;
    background: none !important;  /* zrušíme sidehead/sidefoot grafiku */
    font-weight: 700;
    white-space: nowrap;
    scroll-snap-align: center;
  }
  .kf-steps li.active{
    background: #e9c996 !important;
  }
  .kf-steps li:first-child{
    padding: 6px 10px !important;
    margin: 0 !important;
    background: none !important;
  }
  .kf-steps li:last-child{
    background: none !important;
    color: inherit !important;
  }
  .kf-steps li img{
    width: 26px;
    height: 26px;
    transform: none !important;
    margin: 0 0 2px 0;
  }
  .kf-steps li p{
    font-size: 12px !important;
    margin: 0 !important;
    text-transform: none;
  }

  .kf-content{
    width: 100% !important;
    padding: 14px 12px !important;
  }

  .kf-panel{
    padding-top: 16px !important;
    padding-right: 0 !important;
    min-height: auto !important;
    background:none !important;
    background-position: center top !important;
  }
  .kf-panel.laststep{ padding-top: 30px !important; }
  .kf-panel>div {flex-direction: column;}

  .infotext{
    width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 25px; margin-top: 25px;
    text-align: left;
  }
  .infotext > h1{ font-size: 10vw !important;text-align:left; }
  .infotext > img {width: auto !important;}
    
  .kf-card.selected .kf-img:after {
    width: 20vw;
    height: 20vw;
    background-size: cover;
    left: calc(50% - 10vw);
    top: calc(50% - 14vw);
}
.kf-substeps {width: 100%;}
.kf-accordion.open img {
    width: 7vw !important;
    margin: 0 !important; display:none !important;
}
.kf-accordion img {
    width: 7vw !important;
    margin: 0 !important;
}

  /* karty – 2 stĺpce (na veľmi úzkom 1) */
  .kf-cards,
  .kf-acc-body .kf-cards,
  .kf-cards-3,
  .kf-cards-4,
  .kf-cards-5,
  .kf-cards-6,
  .kf-cards-7{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  @media (max-width: 420px){
    .kf-cards,
    .kf-acc-body .kf-cards,
    .kf-cards-3,
    .kf-cards-4,
    .kf-cards-5,
    .kf-cards-6,
    .kf-cards-7{
      grid-template-columns: 1fr 1fr !important;
    }
  }

  .kf-card{ padding: 10px !important; }
  .kf-card.s13, .kf-card.s35{ grid-column: auto / auto !important; display: block !important; }
  .kf-imgfull{ grid-column: 1 / -1 !important; grid-row: auto !important; }

  .kf-accordion{
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
  .kf-acc-body{ padding: 10px 0; }

  .kf-summary{ width: 100% !important; padding-right: 0 !important; font-size: 14px; line-height: 1.4; }
  .kf-contact{ width: 100% !important; padding-top: 40px; }
  .kf-contact .kf-col{ width: 100% !important; margin-bottom: 10px; }
  .kf-contact input,
  .kf-contact textarea{ width: 100%; font-size: 15px; padding: 10px; }
  .kf-send{ width: 100%; padding: 14px; font-size: 16px; }

  .kf-nav{
    position: static !important;  /* zruší fixed */
    width: 100% !important;
    margin: 18px 0 8px !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }
  .kf-prev, .kf-next{
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
    font-size: 16px !important;
    padding: 14px !important;
  }
}