.ew-quote-overlay {
position: fixed;
z-index: 999999;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(16, 20, 79, .58);
backdrop-filter: blur(3px);
}
.ew-quote-overlay[hidden] {
display: none;
}
.ew-quote-modal {
position: relative;
width: min(100%, 760px);
max-height: calc(100vh - 48px);
overflow-y: auto;
border-radius: 22px;
background: #fff;
box-shadow:
0 30px 80px
rgba(10, 12, 45, .25);
}
.ew-quote-modal__inner {
padding: 36px;
}
.ew-quote-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid #e2e3e9;
border-radius: 50%;
background: #fff;
color: #555866;
font-size: 22px;
cursor: pointer;
}
.ew-quote-modal__status {
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
color: #1b2176;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ew-quote-modal__check {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
background: #1b2176;
color: #fff;
}
.ew-quote-modal h2 {
margin: 0 45px 10px 0;
color: #171823;
font-size: 34px;
line-height: 1.08;
letter-spacing: -.035em;
}
.ew-quote-modal__lead {
margin: 0 0 24px;
color: #6b6d79;
font-size: 14px;
line-height: 1.6;
}
.ew-quote-product {
display: grid;
grid-template-columns:
72px minmax(0, 1fr) auto;
gap: 15px;
align-items: center;
margin-bottom: 26px;
padding: 12px;
border: 1px solid #e2e3e9;
border-radius: 14px;
background: #f6f6f8;
}
.ew-quote-product__image {
width: 72px;
height: 72px;
overflow: hidden;
border-radius: 9px;
background: #fff;
}
.ew-quote-product__image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.ew-quote-product__data span,
.ew-quote-product__amount span {
display: block;
margin-bottom: 3px;
color: #777986;
font-size: 10px;
}
.ew-quote-product__data strong,
.ew-quote-product__amount strong {
color: #171823;
font-size: 13px;
}
.ew-quote-product__color {
display: block;
margin-top: 6px;
color: #666975;
font-size: 11px;
line-height: 1.4;
}
.ew-quote-product__color[hidden] {
display: none;
}
.ew-quote-product__color b {
color: #171823;
font-weight: 800;
}
.ew-quote-product__amount {
text-align: right;
}
.ew-quote-form__grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ew-field {
display: grid;
gap: 7px;
}
.ew-field label {
color: #171823;
font-size: 11px;
font-weight: 700;
}
.ew-field input {
width: 100%;
height: 50px;
padding: 0 14px;
border: 1px solid #d8d9e1;
border-radius: 10px;
background: #fff;
outline: none;
}
.ew-field input:focus {
border-color: #1b2176;
box-shadow:
0 0 0 3px
rgba(27, 33, 118, .08);
}
.ew-quote-form__privacy {
margin: 14px 0 18px;
color: #7b7d89;
font-size: 10px;
line-height: 1.5;
}
.ew-quote-form__submit {
width: 100%;
min-height: 52px;
border: 0;
border-radius: 10px;
background: #1b2176;
color: #fff;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.ew-quote-form__submit:hover {
background: #10144f;
}
@media (max-width: 600px) {
.ew-quote-overlay {
align-items: flex-end;
padding: 0;
}
.ew-quote-modal {
max-height: 92vh;
border-radius:
20px 20px 0 0;
}
.ew-quote-modal__inner {
padding:
30px 18px 22px;
}
.ew-quote-modal h2 {
font-size: 29px;
}
.ew-quote-product {
grid-template-columns:
60px minmax(0, 1fr);
}
.ew-quote-product__image {
width: 60px;
height: 60px;
}
.ew-quote-product__amount {
grid-column: 2;
text-align: left;
}
.ew-quote-form__grid {
grid-template-columns: 1fr;
}
} .ew-quote-page {
--ew-brand: #1b2176;
--ew-brand-dark: #10144f;
--ew-dark: #171823;
--ew-text: #696b78;
--ew-border: #e2e3e9;
--ew-bg: #f5f5f7;
width: 100%;
padding: 70px 20px 90px;
background: var(--ew-bg);
}
.ew-quote-step {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
.ew-quote-step__header {
max-width: 760px;
margin-bottom: 34px;
}
.ew-quote-step__eyebrow {
display: block;
margin-bottom: 10px;
color: var(--ew-brand);
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ew-quote-step__header h1 {
margin: 0 0 14px;
color: var(--ew-dark);
font-size: clamp(36px, 5vw, 56px);
line-height: 1.03;
letter-spacing: -.04em;
}
.ew-quote-step__header p {
margin: 0;
color: var(--ew-text);
font-size: 15px;
line-height: 1.7;
} .ew-quote-step__layout {
display: grid;
grid-template-columns:
minmax(0, 1.65fr)
minmax(300px, .85fr);
gap: 24px;
align-items: start;
} .ew-quote-details {
display: grid;
gap: 18px;
}
.ew-quote-card {
padding: 28px;
border: 1px solid var(--ew-border);
border-radius: 18px;
background: #fff;
}
.ew-quote-card__header {
display: flex;
gap: 14px;
margin-bottom: 22px;
}
.ew-quote-card__header > span {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: grid;
place-items: center;
border-radius: 8px;
color: #fff;
background: var(--ew-brand);
font-size: 10px;
font-weight: 800;
}
.ew-quote-card__header h2 {
margin: 0 0 4px;
color: var(--ew-dark);
font-size: 20px;
}
.ew-quote-card__header p {
margin: 0;
color: var(--ew-text);
font-size: 12px;
line-height: 1.5;
} .ew-quote-methods {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
}
.ew-quote-method {
position: relative;
display: block;
cursor: pointer;
}
.ew-quote-method input {
position: absolute;
opacity: 0;
}
.ew-quote-method__content {
min-height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
border: 1px solid var(--ew-border);
border-radius: 11px;
background: #fff;
}
.ew-quote-method__content strong {
display: block;
margin-bottom: 5px;
color: var(--ew-dark);
font-size: 13px;
}
.ew-quote-method__content small {
color: var(--ew-text);
font-size: 10px;
line-height: 1.4;
}
.ew-quote-method input:checked +
.ew-quote-method__content {
border-color: var(--ew-brand);
background: #f3f3fa;
box-shadow:
inset 0 0 0 1px
var(--ew-brand);
} .ew-quote-card .ew-field {
display: grid;
gap: 7px;
}
.ew-quote-card .ew-field label {
font-size: 12px;
font-weight: 700;
}
.ew-quote-card textarea {
width: 100%;
min-height: 140px;
padding: 14px;
resize: vertical;
border: 1px solid #d8d9e1;
border-radius: 10px;
outline: 0;
}
.ew-quote-card textarea:focus {
border-color: var(--ew-brand);
box-shadow:
0 0 0 4px
rgba(27, 33, 118, .08);
} .ew-quote-summary {
position: sticky;
top: 20px;
overflow: hidden;
border: 1px solid var(--ew-border);
border-radius: 18px;
background: #fff;
box-shadow:
0 15px 40px
rgba(20, 22, 50, .05);
}
.ew-quote-summary__heading {
padding: 23px;
border-bottom: 1px solid var(--ew-border);
}
.ew-quote-summary__heading span {
display: block;
margin-bottom: 5px;
color: var(--ew-brand);
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ew-quote-summary__heading h2 {
margin: 0;
font-size: 20px;
}
.ew-quote-summary__products {
max-height: 310px;
margin: 8px 20px 0;
overflow-y: auto;
border-bottom:
1px solid var(--ew-border);
}
.ew-quote-summary__product {
display: grid;
grid-template-columns:
60px minmax(0, 1fr);
gap: 12px;
align-items: center;
margin: 0;
padding: 12px 0;
border-bottom: 0;
}
.ew-quote-summary__product +
.ew-quote-summary__product {
border-top:
1px solid var(--ew-border);
}
.ew-quote-summary__add-product {
display: inline-flex;
margin: 12px 20px 20px;
color: var(--ew-brand);
font-size: 11px;
font-weight: 800;
text-decoration: none;
}
.ew-quote-summary__add-product:hover {
color: var(--ew-brand-dark);
text-decoration: underline;
}
.ew-quote-summary__image {
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 9px;
background: #f4f4f6;
}
.ew-quote-summary__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ew-quote-summary__product span,
.ew-quote-summary__customer span {
display: block;
color: var(--ew-text);
font-size: 10px;
}
.ew-quote-summary__product strong,
.ew-quote-summary__customer strong {
display: block;
margin: 3px 0;
color: var(--ew-dark);
font-size: 12px;
}
.ew-quote-summary__product small,
.ew-quote-summary__customer small {
display: block;
color: var(--ew-text);
font-size: 10px;
}
.ew-quote-summary__color {
color: var(--ew-dark) !important;
font-weight: 700;
}
.ew-quote-summary__customer {
margin: 0 20px 20px;
padding-top: 18px;
border-top: 1px solid var(--ew-border);
}
.ew-quote-summary__info {
margin: 0 20px 18px;
padding: 14px;
border-radius: 10px;
background: var(--ew-bg);
}
.ew-quote-summary__info strong {
display: block;
margin-bottom: 7px;
font-size: 11px;
}
.ew-quote-summary__info ol {
margin: 0;
padding-left: 17px;
color: var(--ew-text);
font-size: 10px;
line-height: 1.6;
}
.ew-quote-submit {
width: calc(100% - 40px);
min-height: 52px;
margin: 0 20px;
border: 0;
border-radius: 10px;
color: #fff;
background: var(--ew-brand);
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.ew-quote-submit:hover {
background: var(--ew-brand-dark);
}
.ew-quote-submit__note {
margin: 8px 20px 20px;
color: var(--ew-text);
font-size: 9px;
line-height: 1.4;
text-align: center;
} .ew-quote-page__error {
max-width: 700px;
margin: 50px auto;
padding: 40px;
border-radius: 18px;
background: #fff;
text-align: center;
} @media (max-width: 900px) {
.ew-quote-step__layout {
grid-template-columns:
minmax(0, 1fr);
}
.ew-quote-summary {
position: static;
}
} @media (max-width: 600px) {
.ew-quote-page {
padding: 45px 14px 70px;
}
.ew-quote-step__header h1 {
font-size: 38px;
}
.ew-quote-card {
padding: 20px 17px;
}
.ew-quote-methods {
grid-template-columns:
minmax(0, 1fr);
}
} .ew-quote-upload {
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px;
border: 1.5px dashed #bfc1ce;
border-radius: 14px;
background: #fafafd;
text-align: center;
cursor: pointer;
transition:
border-color .2s ease,
background .2s ease;
}
.ew-quote-upload:hover {
border-color: #1b2176;
background: #f5f5fb;
}
.ew-quote-upload input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ew-quote-upload__icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
margin-bottom: 12px;
border-radius: 50%;
background: #e9eaf6;
color: #1b2176;
font-size: 20px;
font-weight: 800;
}
.ew-quote-upload strong {
display: block;
margin-bottom: 6px;
color: #171823;
font-size: 14px;
}
.ew-quote-upload > span:not(.ew-quote-upload__icon) {
color: #696b78;
font-size: 11px;
}
.ew-quote-upload small {
margin-top: 8px;
color: #9698a3;
font-size: 10px;
}
.ew-quote-files {
display: grid;
gap: 7px;
margin-top: 12px;
}
.ew-quote-files__item {
padding: 10px 12px;
border: 1px solid #e2e3e9;
border-radius: 9px;
background: #fff;
color: #4e505c;
font-size: 11px;
} .ew-thankyou {
--ew-brand: #1b2176;
--ew-brand-dark: #10144f;
--ew-dark: #171823;
--ew-text: #696b78;
--ew-border: #e2e3e9;
--ew-soft: #f5f5f8;
--ew-green: #287a55;
width: 100%;
padding: 80px 20px;
background:
radial-gradient(
circle at 50% 35%,
rgba(27, 33, 118, .07),
transparent 28%
),
var(--ew-soft);
}
.ew-thankyou *,
.ew-thankyou *::before,
.ew-thankyou *::after {
box-sizing: border-box;
}
.ew-thankyou__container {
width: 100%;
max-width: 760px;
margin: 0 auto;
}
.ew-thankyou__card {
width: 100%;
padding: 52px;
border: 1px solid var(--ew-border);
border-radius: 24px;
background: #fff;
box-shadow:
0 22px 60px
rgba(20, 22, 50, .08);
text-align: center;
} .ew-thankyou__icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
margin: 0 auto 24px;
border-radius: 50%;
background: var(--ew-green);
color: #fff;
box-shadow:
0 12px 28px
rgba(40, 122, 85, .2);
}
.ew-thankyou__icon svg {
width: 34px;
height: 34px;
} .ew-thankyou__eyebrow {
display: block;
margin-bottom: 10px;
color: var(--ew-brand);
font-size: 11px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ew-thankyou h1 {
max-width: 590px;
margin: 0 auto 16px;
color: var(--ew-dark);
font-size: clamp(36px, 6vw, 54px);
font-weight: 800;
line-height: 1.03;
letter-spacing: -.045em;
}
.ew-thankyou__lead {
max-width: 570px;
margin: 0 auto;
color: var(--ew-text);
font-size: 15px;
line-height: 1.7;
} .ew-thankyou__contact {
max-width: 570px;
display: grid;
grid-template-columns:
42px minmax(0, 1fr);
gap: 15px;
align-items: center;
margin: 30px auto;
padding: 21px 22px;
border-radius: 14px;
background: #f3f3fa;
text-align: left;
}
.ew-thankyou__clock {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 11px;
background: #fff;
color: var(--ew-brand);
}
.ew-thankyou__clock svg {
width: 21px;
height: 21px;
}
.ew-thankyou__contact strong {
display: block;
margin-bottom: 4px;
color: var(--ew-dark);
font-size: 14px;
}
.ew-thankyou__contact span {
display: block;
color: var(--ew-text);
font-size: 12px;
line-height: 1.5;
} .ew-thankyou__steps {
max-width: 570px;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
margin: 0 auto 32px;
padding: 22px 0;
border-top: 1px solid var(--ew-border);
border-bottom: 1px solid var(--ew-border);
}
.ew-thankyou__step {
padding: 0 13px;
}
.ew-thankyou__step +
.ew-thankyou__step {
border-left: 1px solid var(--ew-border);
}
.ew-thankyou__step b {
display: block;
margin-bottom: 6px;
color: var(--ew-brand);
font-size: 11px;
}
.ew-thankyou__step span {
color: var(--ew-text);
font-size: 10px;
line-height: 1.45;
} .ew-thankyou__actions {
display: flex;
justify-content: center;
gap: 10px;
}
.ew-thankyou__button {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 21px;
border: 1px solid var(--ew-brand);
border-radius: 10px;
background: #fff;
color: var(--ew-brand);
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition:
background .2s ease,
transform .2s ease;
}
.ew-thankyou__button:hover {
background: #f4f4fb;
transform: translateY(-1px);
}
.ew-thankyou__button--primary {
background: var(--ew-brand);
color: #fff;
}
.ew-thankyou__button--primary:hover {
background: var(--ew-brand-dark);
color: #fff;
} @media (max-width: 600px) {
.ew-thankyou {
padding: 35px 12px;
}
.ew-thankyou__card {
padding: 38px 20px 28px;
border-radius: 19px;
}
.ew-thankyou__icon {
width: 62px;
height: 62px;
}
.ew-thankyou h1 {
font-size: 38px;
}
.ew-thankyou__steps {
grid-template-columns:
minmax(0, 1fr);
gap: 15px;
text-align: left;
}
.ew-thankyou__step {
display: grid;
grid-template-columns:
28px minmax(0, 1fr);
align-items: center;
padding: 0;
}
.ew-thankyou__step +
.ew-thankyou__step {
padding-top: 15px;
border-top: 1px solid var(--ew-border);
border-left: 0;
}
.ew-thankyou__step b {
margin: 0;
}
.ew-thankyou__actions {
flex-direction: column;
}
.ew-thankyou__button {
width: 100%;
}
}
.ew-quote-form__actions {
display: grid;
gap: 10px;
}
.ew-quote-form__back {
width: 100%;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 18px;
border: 1px solid #d8d9e1;
border-radius: 10px;
background: #ffffff;
color: #2b2c34;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow: none;
transition:
border-color .2s ease,
background .2s ease,
color .2s ease;
}
.ew-quote-form__back:hover {
border-color: #1b2176;
background: #f7f7fb;
color: #1b2176;
transform: none;
}
.ew-quote-form__actions {
display: grid;
gap: 10px;
}