/* Sinexit Offerte Formulier */
.sinexit-offerte-plugin,
.sinexit-offerte-plugin *{
box-sizing:border-box;
font-family:'Poppins',Arial,sans-serif;
}

.sinexit-offerte-plugin{
--sx-gold:#f6b24a;
--sx-red:#f24b36;
--sx-red-dark:#d93f2c;
--sx-bg:#f8f2e7;
--sx-black:#111;
background:var(--sx-bg);
padding:90px 0;
color:#000;
}

.sxof-wrap{
width:min(1220px,calc(100% - 32px));
margin:0 auto;
display:grid;
grid-template-columns:1.18fr .82fr;
gap:30px;
align-items:start;
}

.sxof-card{
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:34px;
padding:38px;
box-shadow:0 22px 70px rgba(0,0,0,.06);
min-width:0;
}

.sxof-intro{
position:sticky;
top:110px;
background:#111;
color:#fff;
border-radius:34px;
padding:42px;
overflow:hidden;
min-height:520px;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.sxof-intro:before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 0% 0%,rgba(246,178,74,.24),transparent 34%),
radial-gradient(circle at 100% 12%,rgba(242,75,54,.22),transparent 32%);
pointer-events:none;
}

.sxof-intro > *{
position:relative;
z-index:1;
}

.sxof-intro h2,
.sxof-form-head h2{
margin:0;
font-size:clamp(32px,4vw,58px);
line-height:1.04;
letter-spacing:-.045em;
font-weight:650;
}

.sxof-intro h2{
color:#fff;
}

.sxof-form-head h2{
color:#000;
}

.sxof-intro p,
.sxof-form-head p{
margin:16px 0 0;
font-size:16px;
line-height:1.8;
}

.sxof-intro p{
color:rgba(255,255,255,.78);
}

.sxof-form-head p{
color:#555;
max-width:740px;
}

.sxof-benefits{
display:grid;
gap:10px;
margin-top:34px;
}

.sxof-benefits span{
display:flex;
align-items:center;
gap:10px;
padding:13px 14px;
border-radius:16px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#fff;
font-size:14px;
font-weight:650;
}

.sxof-benefits span:before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:linear-gradient(135deg,var(--sx-gold),var(--sx-red));
flex:0 0 8px;
}

.sxof-notice{
border-radius:18px;
padding:16px 18px;
margin-bottom:22px;
display:grid;
gap:4px;
}

.sxof-notice strong{
font-size:16px;
line-height:1.3;
}

.sxof-notice span{
font-size:14px;
line-height:1.5;
}

.sxof-success{
background:rgba(47,145,88,.10);
border:1px solid rgba(47,145,88,.22);
color:#145c32;
}

.sxof-error{
background:rgba(242,75,54,.10);
border:1px solid rgba(242,75,54,.22);
color:#9b2318;
}

.sxof-progress{
position:relative;
margin:30px 0 26px;
}

.sxof-progress-line{
position:absolute;
left:70px;
right:70px;
top:21px;
height:4px;
border-radius:999px;
background:#f0e7da;
overflow:hidden;
}

.sxof-progress-line span{
display:block;
width:0%;
height:100%;
border-radius:999px;
background:linear-gradient(135deg,var(--sx-gold),var(--sx-red));
transition:.28s ease;
}

.sxof-steps{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.sxof-step-dot{
appearance:none;
border:0!important;
background:transparent!important;
display:grid;
justify-items:center;
gap:8px;
cursor:pointer;
padding:0;
color:#777;
text-align:center;
}

.sxof-step-dot span{
width:46px;
height:46px;
border-radius:16px;
display:grid;
place-items:center;
background:#f8f2e7;
border:1px solid rgba(0,0,0,.08);
color:#000;
font-weight:800;
transition:.22s ease;
}

.sxof-step-dot strong{
font-size:13px;
line-height:1.2;
font-weight:750;
}

.sxof-step-dot.is-active span,
.sxof-step-dot.is-done span{
background:linear-gradient(135deg,var(--sx-gold),var(--sx-red));
color:#fff;
border-color:transparent;
box-shadow:0 12px 26px rgba(242,75,54,.18);
}

.sxof-step-dot.is-active strong,
.sxof-step-dot.is-done strong{
color:#000;
}

.sxof-form{
display:grid;
gap:18px;
}

.sxof-hp{
position:absolute!important;
left:-9999px!important;
opacity:0!important;
height:0!important;
overflow:hidden!important;
}

.sxof-panel{
display:none;
animation:sxofFade .22s ease both;
}

.sxof-panel.is-active{
display:grid;
gap:18px;
}

@keyframes sxofFade{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}

.sxof-section-title{
margin-top:4px;
}

.sxof-section-title h3{
margin:0;
font-size:26px;
line-height:1.15;
letter-spacing:-.03em;
color:#000;
font-weight:700;
}

.sxof-section-title p{
margin:8px 0 0;
color:#555;
font-size:14px;
line-height:1.6;
}

.sxof-grid{
display:grid;
gap:14px;
}

.sxof-grid-2{
grid-template-columns:1fr 1fr;
}

.sxof-field{
display:grid;
gap:7px;
}

.sxof-field label{
color:#000;
font-size:13px;
font-weight:750;
}

.sxof-field label span{
color:var(--sx-red);
}

.sxof-field input,
.sxof-field select,
.sxof-field textarea{
width:100%;
border:1px solid rgba(0,0,0,.10);
background:#f8f8f8;
border-radius:16px;
padding:15px 16px;
color:#000;
font-size:15px;
line-height:1.35;
outline:none;
transition:.18s ease;
}

.sxof-field textarea{
resize:vertical;
min-height:140px;
}

.sxof-field input:focus,
.sxof-field select:focus,
.sxof-field textarea:focus{
background:#fff;
border-color:var(--sx-red);
box-shadow:0 0 0 4px rgba(242,75,54,.10);
}

.sxof-field small{
color:#666;
font-size:12px;
line-height:1.55;
}

.sxof-field input.sxof-invalid,
.sxof-field select.sxof-invalid,
.sxof-field textarea.sxof-invalid{
border-color:var(--sx-red);
box-shadow:0 0 0 4px rgba(242,75,54,.10);
background:#fff;
}

.sxof-summary{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.sxof-summary div{
padding:16px;
border-radius:18px;
background:#f8f2e7;
border:1px solid rgba(0,0,0,.08);
display:grid;
gap:5px;
}

.sxof-summary span{
font-size:12px;
font-weight:750;
color:#666;
text-transform:uppercase;
letter-spacing:.04em;
}

.sxof-summary strong{
font-size:15px;
line-height:1.4;
color:#000;
word-break:break-word;
}

.sxof-nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
padding-top:10px;
border-top:1px solid rgba(0,0,0,.08);
margin-top:4px;
align-items:stretch;
}

.sxof-prev,
.sxof-next{
width:100%;
min-height:54px;
border-radius:12px;
padding:0 18px;
border:1px solid rgba(0,0,0,.10)!important;
background:#fff!important;
color:#000!important;
font-size:14px;
font-weight:750;
cursor:pointer;
transition:.18s ease;
}

.sxof-prev:hover,
.sxof-next:hover{
border-color:rgba(242,75,54,.30)!important;
color:var(--sx-red)!important;
transform:translateY(-1px);
}

.sxof-prev[hidden],
.sxof-next[hidden],
.sxof-submit[hidden]{
display:none!important;
}

.sxof-submit{
width:100%;
min-height:54px;
}

.sinexit-offerte-plugin .sx-btn{
position:relative;
overflow:hidden;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
white-space:nowrap;
background:linear-gradient(135deg,var(--sx-gold) 0%,#f47d38 42%,var(--sx-red) 100%);
color:#fff!important;
border:0!important;
border-radius:10px;
padding:16px 30px;
font-size:15px;
line-height:1;
font-weight:700;
text-decoration:none!important;
box-shadow:0 14px 32px rgba(242,75,54,.22)!important;
transition:.22s ease;
cursor:pointer;
}

.sinexit-offerte-plugin .sx-btn:hover{
background:linear-gradient(135deg,#e7a13c,#ef6c35,var(--sx-red-dark));
color:#fff!important;
transform:translateY(-2px);
}

@media(max-width:980px){
.sinexit-offerte-plugin{
padding:64px 0;
}

.sxof-wrap{
grid-template-columns:1fr;
}

.sxof-card{
order:1;
}

.sxof-intro{
order:2;
position:relative;
top:auto;
min-height:auto;
}

.sxof-card{
padding:30px;
}
}

@media(max-width:640px){
.sinexit-offerte-plugin{
padding:52px 0;
}

.sxof-wrap{
width:calc(100% - 24px);
gap:18px;
}

.sxof-intro,
.sxof-card{
border-radius:24px;
padding:24px;
}

.sxof-form-head h2,
.sxof-intro h2{
font-size:30px;
}

.sxof-grid-2,
.sxof-summary{
grid-template-columns:1fr;
}

.sxof-section-title h3{
font-size:23px;
}

.sxof-progress-line{
left:44px;
right:44px;
top:18px;
}

.sxof-step-dot span{
width:38px;
height:38px;
border-radius:13px;
font-size:14px;
}

.sxof-step-dot strong{
font-size:11px;
}

.sxof-nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
padding-top:10px;
border-top:1px solid rgba(0,0,0,.08);
margin-top:4px;
align-items:stretch;
}

.sxof-prev,
.sxof-next{
width:100%;
}
}


.sxof-nav:has(.sxof-prev[hidden]) .sxof-next{
grid-column:1 / -1;
}

.sxof-nav:has(.sxof-next[hidden]) .sxof-prev,
.sxof-nav:has(.sxof-next[hidden]) .sxof-submit{
grid-column:auto;
}

@media(max-width:640px){
.sxof-nav{
grid-template-columns:1fr 1fr;
}
.sxof-nav .sxof-submit{
grid-column:auto;
}
.sxof-nav:has(.sxof-prev[hidden]) .sxof-next{
grid-column:1 / -1;
}
}