:root{
--mxsb-q-navy: #0b1739;
--mxsb-q-primary: #0073e6;
--mxsb-q-border: #dce7f2;
--mxsb-q-soft: #f5f9ff;
--mxsb-q-muted: #667085;
--mxsb-q-white: #ffffff;
--mxsb-q-radius: 14px;
--mxsb-q-transition: 200ms ease;
}

.mxsb-quote-add{
display: inline-flex;
align-items: center;
gap: 8px;
margin: 10px 0 0;
padding: 12px 18px;
border: 1px solid var(--mxsb-q-primary);
border-radius: 999px;
background: var(--mxsb-q-white);
color: var(--mxsb-q-primary);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background var(--mxsb-q-transition), color var(--mxsb-q-transition);
}

.mxsb-quote-add:hover{
background: var(--mxsb-q-soft);
}

.mxsb-quote-add.is-added{
border-color: #1f9d55;
background: #eafaf0;
color: #1f7a44;
}

.mxsb-quote-add.is-error{
border-color: #d63638;
background: #fdf0f0;
color: #b32d2e;
}

.mxsb-quote-add__plus{
font-size: 17px;
line-height: 1;
}

.mxsb-quote__launcher{
position: fixed;
right: 0;
bottom: 96px;
z-index: 99990;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border: 0;
border-radius: var(--mxsb-q-radius) 0 0 var(--mxsb-q-radius);
background: var(--mxsb-q-navy);
color: var(--mxsb-q-white);
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: -6px 8px 24px rgba(11, 23, 57, .25);
}

.mxsb-quote__licznik{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: var(--mxsb-q-primary);
font-size: 12px;
}

.mxsb-quote__backdrop{
position: fixed;
inset: 0;
z-index: 99991;
background: rgba(8, 18, 42, .55);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
}

.mxsb-quote.is-open .mxsb-quote__backdrop{
opacity: 1;
visibility: visible;
}

.mxsb-quote__panel{
position: fixed;
top: 0;
right: 0;
z-index: 99992;
display: flex;
flex-direction: column;
width: min(620px, 100vw);
height: 100dvh;
background: var(--mxsb-q-white);
box-shadow: -18px 0 48px rgba(8, 18, 42, .28);
transform: translateX(100%);
visibility: hidden;
transition: transform .28s cubic-bezier(.22, .61, .36, 1), visibility .28s;
}

.mxsb-quote.is-open .mxsb-quote__panel{
transform: translateX(0);
visibility: visible;
}

.mxsb-quote--strona .mxsb-quote__panel{
position: static;
width: 100%;
height: auto;
transform: none;
visibility: visible;
border: 1px solid var(--mxsb-q-border);
border-radius: var(--mxsb-q-radius);
box-shadow: 0 14px 36px rgba(11, 23, 57, .10);
overflow: hidden;
}

.mxsb-quote__head{
display: flex;
flex: none;
align-items: flex-start;
gap: 14px;
padding: 20px 22px;
background: linear-gradient(135deg, var(--mxsb-q-navy), #104c91);
color: #dbeafe;
}

.mxsb-quote__head > div{
flex: 1 1 auto;
min-width: 0;
}

.mxsb-quote__head span{
display: block;
margin-bottom: 5px;
color: #69c8ff;
font-size: 11px;
font-weight: 850;
letter-spacing: .13em;
}

.mxsb-quote__head h2{
margin: 0 0 6px;
color: var(--mxsb-q-white);
font-size: clamp(18px, 2.2vw, 24px);
line-height: 1.25;
}

.mxsb-quote__head p{
margin: 0;
font-size: 13px;
}

.mxsb-quote__close{
flex: none;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
color: var(--mxsb-q-white);
font-size: 22px;
line-height: 1;
cursor: pointer;
}

.mxsb-quote__body{
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 18px;
min-height: 0;
padding: 20px 22px 26px;
overflow-y: auto;
}

.mxsb-quote__pozycje{
display: flex;
flex-direction: column;
gap: 10px;
}

.mxsb-quote__pusto{
margin: 0;
padding: 18px;
border: 1px dashed var(--mxsb-q-border);
border-radius: 12px;
color: var(--mxsb-q-muted);
font-size: 14px;
text-align: center;
}

.mxsb-quote__pozycja{
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
border: 1px solid var(--mxsb-q-border);
border-radius: 12px;
}

.mxsb-quote__obraz{
flex: none;
width: 56px;
height: 56px;
border-radius: 8px;
background: var(--mxsb-q-soft);
object-fit: contain;
}

.mxsb-quote__opis{
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 3px;
min-width: 0;
}

.mxsb-quote__nazwa{
color: var(--mxsb-q-navy);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
}

.mxsb-quote__wariant,
.mxsb-quote__cena{
color: var(--mxsb-q-muted);
font-size: 12px;
}

.mxsb-quote__akcje{
display: flex;
flex: none;
align-items: center;
gap: 8px;
}

.mxsb-quote__ilosc{
width: 68px;
padding: 8px;
border: 1px solid var(--mxsb-q-border);
border-radius: 8px;
font-size: 14px;
text-align: center;
}

.mxsb-quote__usun{
width: 32px;
height: 32px;
border: 1px solid var(--mxsb-q-border);
border-radius: 8px;
background: var(--mxsb-q-white);
color: var(--mxsb-q-muted);
font-size: 18px;
line-height: 1;
cursor: pointer;
}

.mxsb-quote__usun:hover{
border-color: #d63638;
color: #d63638;
}

.mxsb-quote__form{
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 4px;
border-top: 1px solid var(--mxsb-q-border);
}

.mxsb-quote__pola{
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.mxsb-quote__pole{
display: flex;
flex: 1 1 220px;
flex-direction: column;
gap: 5px;
min-width: 0;
}

.mxsb-quote__pole--szeroki{
flex-basis: 100%;
}

.mxsb-quote__pole span{
color: var(--mxsb-q-navy);
font-size: 12px;
font-weight: 700;
}

.mxsb-quote__pole input,
.mxsb-quote__pole textarea{
width: 100%;
padding: 11px 12px;
border: 1px solid var(--mxsb-q-border);
border-radius: 10px;
background: var(--mxsb-q-white);
color: var(--mxsb-text, #333);
font-family: inherit;
font-size: 14px;
}

.mxsb-quote__pole input:focus,
.mxsb-quote__pole textarea:focus{
border-color: var(--mxsb-q-primary);
outline: none;
}

.mxsb-quote__zgoda{
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--mxsb-q-muted);
font-size: 12px;
line-height: 1.5;
}

.mxsb-quote__zgoda input[type="checkbox"]{
flex: none;
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
margin: 1px 0 0;
padding: 0;
accent-color: var(--mxsb-q-primary);
}

.mxsb-quote__submit{
padding: 14px 20px;
border: 0;
border-radius: 999px;
background: var(--mxsb-q-primary);
color: var(--mxsb-q-white);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background var(--mxsb-q-transition);
}

.mxsb-quote__submit:hover{
background: #005bb8;
}

.mxsb-quote__submit[disabled]{
opacity: .5;
cursor: progress;
}

.mxsb-quote__komunikat{
margin: 0;
color: #1f7a44;
font-size: 13px;
}

.mxsb-quote__komunikat.is-error{
color: #b32d2e;
}

.mxsb-quote__komunikat:empty{
display: none;
}

.mxsb-quote__nota{
margin: 0;
color: var(--mxsb-q-muted);
font-size: 12px;
}

body.mxsb-quote-open{
overflow: hidden;
}

@media (max-width: 700px){
.mxsb-quote__launcher{
bottom: 78px;
padding: 10px 12px;
font-size: 12px;
}

.mxsb-quote__body{
padding: 16px;
}

.mxsb-quote__pole{
flex-basis: 100%;
}
}

@media (prefers-reduced-motion: reduce){
.mxsb-quote__panel,
.mxsb-quote__backdrop{
transition: none;
}
}