.page-background, body{
    background:#f7f6f4
}
.main-container{
    width:100%;
    max-width:1920px;
    position:relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page-wrapper{
    width:100%;
    max-width:1920px;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:10px;
    display:flex;
    margin: 0 auto;

}
.header-space{
    align-self:stretch;
    height:40px;
    padding:10px 178px
}
.content-wrapper{
    width:100%;
    max-width:1920px;
    padding-bottom:80px;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:40px;
    display:flex
}

/* Zgrupowane style dla flex container */
.content-inner, .main-layout,#configurationsContainer .image-container, .form-container, .section-container, 
.sidebar-container, .sidebar-inner, .content-section, .summary-section, .summary-wrapper, 
.summary-inner, .summary-header, .summary-details, .section-group {
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:10px;
    display:flex
}

/* Modyfikacje dla konkretnych klas flex */
.content-inner{
    max-width:1566px;
    width:100%;
    gap:60px;
    padding:0 2rem 0 2rem;
}
#configurationsContainer {width:100%;}
.main-layout{
    display:flex;
    justify-content:space-between;
    flex-direction:row;

}
#configurationsContainer .image-container{
    width:35%;
    padding-top:37px;
    gap:10px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}
.form-container{
    width:60%;
    padding-top:35px;
    display:inline-flex;
    gap:20px;
}
.section-container{
    align-self:stretch;
    gap:20px;
}
.content-section{
    align-self:stretch;
    padding-top:14px;
    gap:20px;
}
.summary-section{
    align-self:stretch;
    gap:40px;
}
.summary-wrapper{
    border-radius:10px;
}
.summary-inner{
    padding:50px;
    background:#fff;
    border-radius:10px;
    gap:20px;
}
.summary-header{
    align-items:flex-end;
    gap:40px;
    align-self:stretch;
}
.summary-details{
    flex:1 1 0;
    gap:30px;
}
.summary-list{
    align-self:stretch;
    justify-content:center;
    gap:28px;
}
.section-group{
    gap:10px;
    align-self:stretch;
}

.main-image{
    width:100%;
    aspect-ratio: 1/1;
    min-height:500px;
    position:relative;
    background:#efeeea;
    overflow:hidden;
    border-radius:10px;
    background-image:url(https://placehold.co/620x620)
}

.image-overlay{
    width:100%;
    height:100% !important;
    left:0;
    top:0;
    position:absolute;
    background:linear-gradient(0deg,rgba(0,0,0,.2)0,rgba(0,0,0,.2) 100%)
}
.steps-container{
    right:5%;
    top:10%;
    position:absolute;
    flex-direction:column;
    gap:20px;
    display:inline-flex
}

/* Zgrupowane style dla kart i elementów border-radius */
.step-card, .step-card-inner, .option-card, .option-card-inner, .option-icon,
.main-image, .icon-container, .icon-wrapper, .section-content, .summary-textarea {
    border-radius:10px;
}
.step-card, .step-card-inner, .option-card, .option-card-inner, .option-icon {
    justify-content:flex-start;
    align-items:center;
    gap:10px;
}
.step-card{
    padding:30px 50px;
    background:#fff;
    display:inline-flex
}
.step-card-inner{
    display:flex
}
.icon-container{
    width:60px;
    height:60px;
    position:relative;
    overflow:hidden;
}
.option-card{
    width:282.32px;
    height:124px;
    padding:20px 50px;
    background:#fff;
    display:inline-flex
}
.option-card-inner{
    height:63.88px;
    display:flex
}
.option-icon{
    width:62px;
    height:65.82px;
    display:flex
}
.icon-wrapper{
    width:62px;
    height:56px;
    position:relative;
    overflow:hidden;
}
.section-content{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* Zgrupowane style dla outline i outline-offset */
.outline-thick, .outline-thick-alt, .outline-icon, .outline-icon-alt, .outline-icon-alt2, 
.outline-icon-alt3, .outline-icon-alt4 {
    outline:2.13px #333 solid;
    outline-offset:-1.07px;
}
.outline-medium, .outline-medium-alt, .outline-medium-alt2, .outline-medium-alt3,
.outline-medium-alt4, .outline-medium-alt5, .outline-medium-alt6 {
    outline:1.86px #333 solid;
    outline-offset:-.93px;
}
.outline-white, .outline-white-alt {
    outline:2px #fff solid;
    outline-offset:-1px;
}
.input-outline, .textarea-outline, .textarea-outline-alt {
    outline:1px #bababa solid;
    outline-offset:-1px;
}
.outline-gray, .outline-gray-alt {
    outline:1px #c7c7c7 solid;
    outline-offset:-1px;
}

.icon-line1, .icon-line2, .icon-main{
    width:.63px;
    height:6.63px;
    left:27.59px;
    top:25.6px;
    position:absolute
}
.icon-line2{
    left:28.52px
}
.icon-main{
    width:36.93px;
    height:42.64px;
    left:9.91px;
    top:7.59px
}
.indicator-dot{
    width:22px;
    height:22px;
    background:#AC8D52;
    border-radius:9999px
}
.indicator-mark{
    width:10.29px;
    height:3.94px;
    transform:rotate(-31deg);
    transform-origin:top left
}
.step-content{
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:1px;
    display:inline-flex
}

/* Zgrupowane style dla tekstów */
.text-title, .text-subtitle, .section-title, .text-paragraph, .text-label,
.input-text, .option-text, .summary-title, .field-label, .field-value,
.field-text, .side-text, .placeholder-text, .center-title, .center-subtitle,
.button-text {
    justify-content:center;
    display:flex;
    flex-direction:column;
    color:#333;
    font-family: "Poppins", sans-serif;
    word-wrap:break-word
}

/* Modyfikacje dla konkretnych typów tekstów */
.text-title, .text-subtitle{
    font-size:1rem;
    line-height:1.17;
}
.text-title{
    font-weight:700;
}
.text-subtitle{
    font-weight:400
}
.section-title{
    font-size:1.2rem;
    font-weight:600;
    line-height:1.68;
}
.text-paragraph{
    align-self:stretch;
    font-size:0.8rem;
    font-weight:400;
    line-height:1.43;
}
.text-label{
    text-align:center;
    font-size:0.7rem;;
    font-weight:400;
    line-height:1.33;
}
.input-text{
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
    border:none;
    font-size:0.9rem;
    font-weight:400;
    line-height:2.06;
    padding:8px 20px;
    width: 100%;
    outline: none; /* Wyłącza obramowanie podczas focusu */
}

/* Wyłączenie efektu focusu dla input-text */
.input-text:focus {
    outline: none;
    box-shadow: none;
}




.option-text{
    text-align:center;
    font-size:0.8rem;
    font-weight:500;
    line-height:1.14;
}
.summary-title{
    font-size:1.4rem;
    font-weight:600;
    line-height:1.32;
}
.field-label{
    width:230px;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
    font-size:1rem;
    font-weight:500;
    line-height:1.28;
}
.field-value, .field-text{
    font-size:1rem;
    font-weight:400;
    line-height:1.44;
}
.field-value{
    flex:1 1 0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
}
.side-text{
    align-self:stretch;
    font-size:0.95rem;
    font-weight:400;
    line-height:1.47;
}
.placeholder-text{
    flex:1 1 0;
    color:#78797b;
    font-size:1rem;
    font-weight:400;
    line-height:1.44;
}
.center-title{
    text-align:center;
    font-size:1rem;
    font-weight:500;
    line-height:1.22;
}
.center-subtitle{
    text-align:center;
    font-size:0.7rem;
    font-weight:400;
    line-height:1.43;
}
.button-text{
    color:#fff;
    font-size:1.1rem;
    font-weight:400;
    line-height:1.65;
    border-radius: 40px;
background:#AC8D52
}

.icon-medium{
    width:34.21px;
    height:43.97px;
    left:11.83px;
    top:9.12px;
    position:absolute;
    background:#333
}
.icon-large, .icon-small{
    width:44.34px;
    height:44.34px;
    left:7.92px;
    top:6.09px;
    position:absolute;
    background:#333
}
.icon-small{
    width:14.36px;
    height:11.11px;
    left:27.98px;
    top:19.29px
}

/* Zgrupowane style dla sekcji i containerów */
.section-header, .section-header-alt, .summary-section-header, .summary-field {
    align-self:stretch;
    padding-top:10px;
    padding-bottom:10px;
    border-bottom:1px #bababa solid;
}
.section-header{
    width: 100%;
    justify-content:space-between;
    align-items:center;
    display:inline-flex
}
.section-header-alt{
    justify-content:flex-start;
    align-items:center;
    gap:10px;
    display:inline-flex
}
.summary-section-header{
    align-items:flex-end;
    gap:10px;
    justify-content:flex-start;
    display:inline-flex
}
.summary-field{
    align-items:flex-start;
    padding-top:26px;
    padding-bottom:26px;
    justify-content:flex-start;
    gap:14px;
    display:inline-flex;
    width: 100%;
}

.header-icon{
    width:20px;
    height:20px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;
    display:inline-flex
}
.input-row, .input-column{
    justify-content:flex-start;
    display:inline-flex
}
.input-row{
    align-self:stretch;
    align-items:flex-end;
    gap:20px
}
.input-column{
    flex:1 1 0;
    flex-direction:column;
    align-items:flex-start;
    gap:5px
}
.input-wrapper, .input-field{
    justify-content:flex-start;
    align-items:center
}
.input-wrapper{
    align-self:stretch;
    gap:5px;
    display:inline-flex
}
.input-field{
    flex:1 1 0;
    overflow: hidden;
    background:#fff;
    border-radius:10px;
    gap:10px;
    display:flex;
   
}
.options-row{
    align-self:stretch;
    justify-content:flex-start;
    align-items:flex-start;
    gap:20px;
    display:inline-flex
}
.option-tile-wrapper, .option-icon-wrapper{
    flex-direction:column;
    align-items:center
}
.option-tile-wrapper{
    width:207.25px;
    padding:20px;
    position:relative;
    background:#fff;
    box-shadow:0 5px 20px transparent;
    border-radius:10px;
    justify-content:flex-start;
    gap:7.67px;
    display:inline-flex
}
.option-icon-wrapper{
    height:44.61px;
    justify-content:center;
    gap:10px;
    display:flex
}
.option-bar{
    width:59.08px;
    height:3.33px;
    background:rgba(51,51,51,.2)
}
.option-shape1{
    width:20.23px;
    height:16px;
    border:1px #333 solid
}
.option-shape2{
    width:2.5px;
    height:13.14px;
    outline:1px #333 solid;
    outline-offset:-.5px
}
.option-shape3{
    width:2.84px;
    height:3px;
    background:#333;
    border:1px #333 solid
}
.option-shape4{
    width:55.47px;
    height:26.71px;
    background:#333
}
.indicator-container{
    width:22px;
    height:22px;
    padding:9px 10px;
    left:10px;
    top:10px;
    position:absolute;
    opacity:0;
    justify-content:center;
    align-items:center;
    gap:10px;
    display:inline-flex
}
.shape-container{
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:10px;
    display:flex
}
.shape-bar1, .shape-bar2{
    width:57.9px;
    height:3.27px;
    background:rgba(51,51,51,.2)
}
.shape-bar2{
    width:54.36px;
    height:26.17px
}
.shape-frame{
    width:19.43px;
    height:16px;
    border:1px #333 solid
}
.shape-rect{
    width:54.61px;
    height:25.52px;
    background:#333
}
.shape-dot{
    width:5.07px;
    height:5.07px;
    background:#333
}
.shape-line{
    width:2.92px;
    height:28.6px;
    outline:1px #333 solid;
    outline-offset:-.5px
}
.shape-point1{
    width:2.79px;
    height:2.94px;
    background:#333
}
.shape-point2{
    width:2.76px;
    height:2.96px;
    background:#333
}
.shape-frame-large, .shape-frame-small{
    width:39.85px;
    height:16px;
    border:1px #333 solid
}
.shape-frame-small{
    width:19.11px
}
.shape-bar3{
    width:53.91px;
    height:3.33px;
    background:#333
}
.shape-point3{
    width:2.4px;
    height:2.78px;
    background:#333
}
.shape-bar4{
    width:51.47px;
    height:3.33px;
    background:#333
}
.options-group{
    justify-content:flex-start;
    align-items:flex-start;
    gap:20px;
    display:inline-flex
}
.shape-bar-inverse{
    width:59.08px;
    height:3.33px;
    background:rgba(51,51,51,.2)
}
.shape-bar-inverse, .shape-frame-inverse, .shape-line-inverse{
    transform:rotate(180deg);
    transform-origin:top left
}
.shape-frame-inverse{
    width:20.23px;
    height:16px;
    border:1px #333 solid
}
.shape-line-inverse{
    width:2.5px;
    height:13.14px;
    outline:1px #333 solid;
    outline-offset:-.5px
}
.shape-point-inverse, .shape-rect-inverse{
    transform:rotate(180deg);
    transform-origin:top left;
    background:#333
}
.shape-point-inverse{
    width:2.84px;
    height:3px;
    border:1px #333 solid
}
.shape-rect-inverse{
    width:55.47px;
    height:26.71px
}
.option-tile-alt{
    width:207.25px;
    padding:20px;
    position:relative;
    background:#fff;
    box-shadow:0 5px 20px transparent;
    border-radius:10px;
    border-bottom:2px transparent solid;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:14px;
    display:inline-flex
}
.icon-large-container{
    width:76.61px;
    height:88.45px;
    position:relative
}
.icon-frame, .icon-frame-inner, .icon-frame-line{
    width:76.61px;
    height:88.45px;
    left:0;
    top:0;
    position:absolute
}
.icon-frame-small, .icon-frame-large{
    width:33.17px;
    height:14.74px;
    left:22.11px;
    top:0;
    position:absolute;
}
.icon-frame-large{
    height:73.71px;
    top:14.74px
}
.icon-line-left, .icon-line-right{
    width:1.31px;
    height:13.76px;
    left:36.67px;
    top:37.37px;
    position:absolute;
}
.icon-line-right{
    left:38.6px
}
.flex-row, .flex-column{
    justify-content:flex-start;
    align-items:center;
    display:inline-flex
}
.flex-row{
    align-self:stretch;
    gap:20px
}
.flex-column{
    flex:1 1 0;
    padding:20px;
    position:relative;
    background:#fff;
    box-shadow:0 5px 20px transparent;
    border-radius:10px;
    border-bottom:2px transparent solid;
    flex-direction:column;
    gap:14px
}
.icon-small-container, .icon-small-frame{
    width:39.8px;
    height:88.45px;
    position:relative
}
.icon-small-frame{
    left:0;
    top:0;
    position:absolute;
}
.icon-small-line, .icon-small-line-alt{
    width:1.31px;
    height:13.75px;
    left:38.49px;
    top:37.35px;
    position:absolute;
}
.icon-small-line-alt{
    background:#333
}
.option-tile-narrow{
    width:161.8px;
    padding:20px;
    position:relative;
    background:#fff;
    box-shadow:0 5px 20px transparent;
    border-radius:10px;
    border-bottom:2px transparent solid;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:14px;
    display:inline-flex
}

.summary-row{
    align-self:stretch;
    align-items:flex-start;
    gap:60px;
    justify-content:flex-start;
    display:inline-flex
}
.sidebar-container{
    flex:1 1 0;
    padding:30px 40px;
    background:#efeeea;
    border-radius:10px;
    flex-direction:column;
    align-items:flex-end;
    gap:37px;
    display:inline-flex;
    align-self:stretch;
    justify-content:flex-start;
    height: fit-content;
    position: sticky;
    top: 100px;
}

[data-group-type="glazing"]{
    display: grid!important;
    grid-template-columns: repeat(4, 1fr)!important;
}

/* Klasa do ukrywania sekcji - nadpisuje !important */
.section-hidden {
    display: none !important;
}

/* Domyślne ukrywanie sekcji progresywnego formularza */
.section-container:not(.section-always-visible):not(.section-revealed) .section-content,
.section-container:not(.section-always-visible):not(.section-revealed) .options-container {
    display: none !important;
}

/* Klasa dla sekcji która powinna być zawsze widoczna (pierwsza sekcja) */
.section-always-visible .section-content,
.section-always-visible .options-container {
    display: flex !important;
}

/* Klasa dla sekcji która została automatycznie lub ręcznie odsłonięta */
.section-revealed .section-content,
.section-revealed .options-container {
    display: flex !important;
}
.options-container.rozkladSzczebli {flex-wrap:wrap;}


/* Nadpisanie dla sekcji szklenia z grid - dla odsłoniętych i zawsze widocznych */
.section-revealed [data-group-type="glazing"],
.section-always-visible [data-group-type="glazing"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Domyślnie obracaj ikony w ukrytych sekcjach */
.section-container:not(.section-always-visible):not(.section-revealed) .header-icon {
    transform: rotate(180deg);
}

/* Ikony w odsłoniętych sekcjach */
.section-revealed .header-icon,
.section-always-visible .header-icon {
    transform: rotate(0deg);
}

.sidebar-row{
    align-items:center;
    display:inline-flex;
    align-self:stretch;
    justify-content:flex-start
}
.textarea-container{
    align-self:stretch;
    height:193px;
    background:#fff;
    justify-content:flex-start;
    align-items:flex-start;
    display:inline-flex;
    border-radius:10px;
border: 1px solid #BABABA;
overflow: hidden;
}
#notesInput{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    resize: none;
    color: #78797B;
font-family: "Poppins";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 1.44; /* 144.444% */
padding: 20px;

}


.dropzone-container{
    align-self:stretch;
    height:195px;
    background:#fff;
    border-radius:10px;
    gap:10px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    display:flex;
    border-radius:10px;
    border: 1px solid #BABABA;
}
.dropzone-content{
    gap:5px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    display:flex;
    width: 100%;
    height: 100%;   
}
.icon-container-large{
    height:61px;
    gap:10px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    display:flex
}
.icon-upload{
    width:61px;
    height:47px;
}
.upload-text-container{
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:3px;
    
    display:flex
}
.button-primary{
    padding:10px 25px;
    border-radius:40px;
    justify-content:center;
    align-items:center;
    gap:10px;
    display:inline-flex;
    background:#AC8D52!important;
}
.button-icon,.button-icon svg{
    width:20px!important;
    height:20px!important;
    transform-origin:top left;
    align-items:center;
    gap:10px;
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
}
.icon-arrow{
    width:20px;
    height:18.68px;
    transform:rotate(90deg);
    transform-origin:top left;
    background:#fff
}

/* Style dla kafelków opcji */
.option-tile {
    width: 208px;
    max-width: 208px;
    padding: 15px;
    position: relative;
    background: #fff;
    box-shadow: 0 5px 20px transparent;
    border-radius: 10px;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
    display: inline-flex;
    cursor: pointer;
    transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out,background-color 0.2s ease-in-out;
    border-bottom: 2px solid transparent;
}

[data-option-type="handle"]{
    width: 161px;
}
/* Specjalne styles dla opcji bez tła */
.option-tile[data-option-type="surface"],
.option-tile[data-option-type="glazing"],
.option-tile[data-option-type="handleSet"],
.option-tile[data-option-type="handle"] {
    background: transparent;
    padding: 0;
    padding-bottom: 10px;
}
.option-tile[data-option-type="surface"] img,
.option-tile[data-option-type="glazing"] img,
.option-tile[data-option-type="handleSet"] img,
.option-tile[data-option-type="handle"] img {
    max-height: unset!important;
}
 
.option-tile img {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: 5px;
}

.option-tile-label {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333;
    font-size: 14px;
    font-family: "Poppins";
    font-weight: 500;
    line-height: 1.14;
    word-wrap: break-word;
    margin-top: 10px;
}

.option-group {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    display: inline-flex;
    flex-wrap: wrap;
}

/* Wskaźnik zaznaczenia */
.option-tile .indicator {
    width: 22px;
    height: 22px;
    left: 10px;
    top: 10px;
    position: absolute;
    opacity: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}

.option-tile.selected .indicator {
    opacity: 1;
    background: #AC8D52;
    border-radius: 50%;
}

/* Style dla strefy upuszczania plików */
#dropZone {
    text-align: center;
    cursor: pointer;
    transition: border 0.2s ease-in-out;
}

#dropZone:hover {
    border-color: #999;
}

/* Ujednolicony kontener dla grup opcji */
.options-container {
    align-self: stretch;
    justify-content: flex-start;
    align-items: normal;
    gap: 20px;
    display: inline-flex;
    flex-wrap: nowrap;
    width: 100%;
}

.validation-errors {
  font-family: 'Poppins', sans-serif;
  background-color: #FFF1F1;
  border-left: 3px solid #FF4C4C;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 4px;
  font-size: 14px;
  color: #FF4C4C;
}

.validation-errors div {
  margin-bottom: 5px;
}

.validation-errors div:last-child {
  margin-bottom: 0;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

.input-error {
  border: 1px solid #FF4C4C !important;
  background-color: #FFF1F1 !important;
}

.option-error {
  border: 1px solid #FF4C4C !important;
  position: relative;
}
[data-option-type="doorType"] img, [data-option-type="pageSide"] img{
    width: 100px;
}

[data-option-type="extras"] img{
    width: 75px;
}

[data-option-type="layout"] img{
    width: 47px;
}

[data-option-type="color"] img{
    width: 80px;
}

.option-error::after {
  content: "!";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  background-color: #FF4C4C;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}
.option-tile.selected{
    border-bottom: 2px solid rgba(186, 186, 186, 0.00);
    background: #FFF;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.10);
}

/* Style dla drugiego etapu formularza - przeniesione z inline */

/* Kontener główny formularza drugiego etapu */
.form-stage-two-container {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px;
    display: flex;
}

/* Główny wiersz formularza */
.form-stage-two-row {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px;
    display: inline-flex;
}

/* Kolumna lewa (50%) */
.form-stage-two-column-left {
    width: 50%;
    padding-top: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}

/* Kolumna prawa (50%) */
.form-stage-two-column-right {
    width: 50%;
    padding-top: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}

/* Tło z obrazkiem */
.form-stage-two-image-bg {
    align-self: stretch;
    height: 539px;
    padding-top: 60px;
    padding-bottom: 60px;
    background: linear-gradient(0deg, rgba(139, 129, 120, 0.40) 0%, rgba(139, 129, 120, 0.40) 100%);
    border-radius: 10px;
    background-image: url('../images/konfigurator-bg.jpg');
    justify-content: flex-end;
    align-items: center;
    display: inline-flex;
}

/* Kontenery kart w tle */
.form-stage-two-cards-container {
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: grid;
    z-index:2;
}

/* Karta informacyjna */
.form-stage-two-card {
    width: 294px;
    padding: 30px;
    background: white;
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}

/* Kontener ikony w karcie */
.form-stage-two-icon-container {
    height: 63.88px;
    border-radius: 10px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}

.form-stage-two-icon-wrapper {
    width: 60px;
    height: 60px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.form-stage-two-icon {
    width: 34.21px;
    height: 43.97px;
    left: 11.83px;
    top: 9.12px;
    position: absolute;
    background: #333333;
}

.form-stage-two-icon-secondary {
    width: 44.34px;
    height: 44.34px;
    left: 7.92px;
    top: 6.09px;
    position: absolute;
    background: #333333;
}

.form-stage-two-icon-tertiary {
    width: 14.36px;
    height: 11.11px;
    left: 27.98px;
    top: 19.29px;
    position: absolute;
    background: #333333;
}

/* Wskaźnik z kropką */
.form-stage-two-indicator-dot {
    width: 22px;
    height: 22px;
    background: #AC8D52;
    border-radius: 9999px;
}

/* Wskaźnik z kreską */
.form-stage-two-indicator-mark {
    width: 10.29px;
    height: 3.94px;
    transform: rotate(-31deg);
    transform-origin: top left;
    outline: 2px white solid;
    outline-offset: -1px;
}

/* Kontener tekstowy w karcie */
.form-stage-two-text-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    display: flex;
}

/* Nagłówek karty */
.form-stage-two-card-title {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 18px;
    font-family: "Poppins";
    font-weight: 700;
    line-height: 21px;
    word-wrap: break-word;
}

/* Podtytuł karty */
.form-stage-two-card-subtitle {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 18px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 21px;
    word-wrap: break-word;
}

/* Kontener formularza po prawej */
.form-stage-two-form-container {
    width: 100%;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 50px;
    padding-bottom: 50px;
    background: #EFEEEA;
    border-radius: 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 37px;
    display: flex;
}

/* Kontener elastyczny */
.form-stage-two-flex-container {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 107px;
    display: flex;
}

/* Kontener wewnętrzny */
.form-stage-two-inner-container {
    width: 100%;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    display: flex;
}

/* Kontener pola email */
.form-stage-two-email-container {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    display: flex;
}

/* Tekst nagłówkowy */
.form-stage-two-header-text {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    display: flex;
}

/* Nagłówek formularza */
.form-stage-two-form-heading {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 2rem;
    font-family: "Poppins";
    font-weight: 600;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Kontener pola wejściowego */
.form-stage-two-input-container {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    display: flex;
}

/* Etykieta pola */
.form-stage-two-input-label {
    text-align: center;
    justify-content: center;
    display: flex;
    /* flex-direction: column; */
}

/* Tekst etykiety */
.form-stage-two-label-text {
    color: #333333;
    font-size: 14px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 16px;
    word-wrap: break-word;
}

/* Wymagany znak */
.form-stage-two-required {
    color: #AC8D52;
    font-size: 14px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 16px;
    word-wrap: break-word;
}

/* Pole wejściowe */
.form-stage-two-input-field {
    align-self: stretch;
  
   
    border-radius: 10px;
    outline: none;
    outline-offset: -1px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}

/* Style dla samego inputa */
.form-stage-two-input {
    background: white;
    flex: 1 1 0;
    outline: none;
    color: #333333;
    font-size: 18px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 1;
    word-wrap: break-word;
    border: none;
    padding: 10px 20px!important;
    border: 1px solid #BABABA!important;
}

/* Sekcja montażu */
.form-stage-two-installation-section {
    align-self: stretch;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 10px;
    outline: 1px #AC8D52 solid;
    outline-offset: -1px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: flex;
}

/* Tytuł sekcji montażu */
.form-stage-two-installation-title {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 2rem;
    font-family: "Poppins";
    font-weight: 600;
    line-height: 37px;
    word-wrap: break-word;
}

/* Opis sekcji montażu */
.form-stage-two-installation-description {
    align-self: stretch;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 17px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 25px;
    word-wrap: break-word;
}

/* Kontener opcji checkboxa */
.form-stage-two-checkbox-container {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 5px;
    align-self: stretch;
    justify-content: flex-start;
    margin-top: 5px;
}

/* Opakowanie checkboxa */
.form-stage-two-checkbox-wrapper {
    display: flex;
    align-items: center;
    margin-right: 0;
    padding: 0;
    justify-content: flex-start;
}

/* Sam checkbox */
.form-stage-two-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid #AC8D52;
    background-color: white;
    cursor: pointer;
    margin-right: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    outline: none;
}

/* Styl dla zaznaczonego checkboxa */
.form-stage-two-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #AC8D52;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Etykieta checkboxa */
.form-stage-two-checkbox-label {
    display: flex;
    align-items: center;
    margin-top: 0;
    color: #333333;
    font-size: 17px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 25px;
    word-wrap: break-word;
}

/* Kontener dolny z przyciskiem */
.form-stage-two-bottom-container {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 37px;
    display: inline-flex;
}

/* Kontener polityki prywatności */
.form-stage-two-privacy-container {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

/* Link do polityki */
.form-stage-two-privacy-link {
    color: #AC8D52;
    font-size: 17px;
    font-family: "Poppins";
    font-weight: 400;
    text-decoration: underline;
    line-height: 25px;
    word-wrap: break-word;
    margin-left: 4px;
}


.form-stage-two-submit-button {
    height: 50px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 16px;
    padding-bottom: 16px;
    background: #AC8D52;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
}

/* Tekst przycisku */
.form-stage-two-button-text {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 20px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 33px;
    word-wrap: break-word;
}

/* Kontener ikony przycisku */
.form-stage-two-button-icon {
    width: 20px!important;
    height: 20px!important;
    transform-origin: top left;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}

/* Ikona strzałki w przycisku */
.form-stage-two-button-arrow {
    width: 20px;
    height: 18.68px;
    transform-origin: top left;
    background: white;
}

/* Podstawowe style dla form-stage-two */
.form-stage-two {
    margin-top: 40px;
    display: none !important;
    width: 100%;
    padding-bottom: 80px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
}

.form-stage-two input[type="email"] {
    width: 100%;
    font-family: "Poppins", sans-serif;
}

.form-stage-two input[type="checkbox"] {
    cursor: pointer;
}

.form-stage-two button {
    transition: all 0.3s ease;
}

.form-stage-two button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Dodatkowe style dla RWD */
@media (max-width: 1200px) {
    .form-stage-two-row {
        flex-direction: column !important;
    }

    .form-stage-two-column-left,
    .form-stage-two-column-right {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* Animacja pokazywania formularza */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-stage-two.show {
    display: inline-flex !important; /* Wymuszenie wyświetlenia po dodaniu klasy show */
    animation: fadeIn 0.5s ease forwards;
}

/* Ukrywanie konfiguratora po przejściu do drugiego etapu */
.main-layout.hide {
    display: none !important;
}

/* Ukrywanie sekcji podsumowania po przejściu do drugiego etapu */
.summary-section.hide {
    display: none !important;
}


#goToFormStageTwo,
#goToStep2Button {
    cursor: pointer;
}

/* Styles dla sekcji adresowej */
.form-stage-two-address-section {
    margin-top: 20px;
    padding: 20px;
    background-color: #f7f6f4;
    border-radius: 10px;
    animation: fadeIn 0.3s ease forwards;
    border: 1px solid #BABABA;
}

.form-stage-two-header-text .form-stage-two-installation-description {
    font-size: 17px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 25px;
    color: #333333;
    margin-bottom: 10px;
}

.address-fields-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.address-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.address-field {
    flex: 1;
    min-width: 150px;
}

.address-field.full-width {
    width: 100%;
}

/* Dopasowanie wyglądu pól adresowych do pola e-mail */
.address-field .form-stage-two-input-field {
    align-self: stretch;
    border-radius: 10px;
    overflow: hidden;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
    width: 100%;
}

.address-field .form-stage-two-input {
    background: white;
    flex: 1 1 0;
    outline: none;
    color: #333333;
    font-size: 18px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 1;
    word-wrap: break-word;
    border: none;
    padding: 10px 20px!important;
    border: 1px solid #BABABA!important;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}

.address-field .form-stage-two-input-label {
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.address-field .form-stage-two-label-text {
    color: #333333;
    font-size: 14px;
    font-family: "Poppins";
    font-weight: 400;
    line-height: 16px;
    word-wrap: break-word;
}
@media (max-width:1024px) {
    .main-layout {flex-wrap:wrap;}
    #configurationsContainer .image-container {	width: 100%;position:relative;}
    .form-container {width: 100%;}

}
/* Media queries dla responsywności */
@media (max-width: 768px) {
    .address-row {
        flex-direction: column;
    }
    
    .address-field {
        width: 100%;
    }
    .section-revealed .options-container {
        flex-wrap: wrap;gap:10px;justify-content: space-between;;
    }
    .option-tile {	width: calc(50% - 5px);}
    .summary-inner {	padding: 0px;	gap: 10px;}
    .field-label {	width: 50%;}
    .summary-row {
        display: flex;
        flex-wrap:wrap;
    }
    .summary-details,.sidebar-container {
        width: 100%;position:relative;top:0;
    }
    .summary-details {padding:20px;}
    .sidebar-container {	padding: 30px 20px;}
    .form-stage-two-row {	display: flex;    flex-wrap:wrap;}
    .form-stage-two-column-left,.form-stage-two-column-right {width:100%;position:relative;}
    .form-stage-two-column-left {display:none !important;}
    .form-stage-two-form-container {padding-left:20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;}
    .form-stage-two-bottom-container {flex-wrap:wrap;}
}