:root {
    --wv-bg: #f7f8fa;
    --wv-card: #ffffff;
    --wv-text: #172033;
    --wv-muted: #667085;
    --wv-line: #e6e9ef;
    --wv-accent: #3468f5;
    --wv-accent-dark: #2854cc;
    --wv-radius: 18px;
}

.wv-price,
.wv-price * { box-sizing: border-box; }

.wv-price {
    width: 100%;
    max-width: 1240px;
    min-width: 0;
    container-type: inline-size;
    margin: 0 auto;
    padding: 12px 20px 60px;
    color: var(--wv-text);
    font-family: Arial, Helvetica, sans-serif;
}

.wv-price__intro {
    margin: 0 0 26px;
}

.wv-price__eyebrow {
    margin: 0 0 7px;
    color: var(--wv-accent);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 12px;
}

.wv-price__lead {
    max-width: 760px;
    margin: 0;
    color: var(--wv-muted);
    font-size: 17px;
    line-height: 1.55;
}

.wv-price__layout {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: 28px;
    align-items: start;
}

.wv-price__panel,
.wv-price__preview-wrap {
    min-width: 0;
    background: var(--wv-card);
    border: 1px solid var(--wv-line);
    border-radius: var(--wv-radius);
    box-shadow: 0 14px 40px rgba(23,32,51,.06);
}

.wv-price__panel { padding: 22px; }

.wv-price__preview-wrap {
    position: sticky;
    top: 22px;
    padding: 18px;
}

.wv-field { margin-bottom: 18px; }

.wv-field label,
.wv-choice legend {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #344054;
}

.wv-field input,
.wv-field textarea,
.wv-row input {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 1px solid #d9dee8;
    border-radius: 12px;
    background: #fff;
    color: var(--wv-text);
    padding: 12px 13px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wv-field input:focus,
.wv-field textarea:focus,
.wv-row input:focus {
    border-color: #8eabff;
    box-shadow: 0 0 0 3px rgba(52,104,245,.10);
}

.wv-field textarea {
    resize: vertical;
    min-height: 88px;
    overflow-wrap: break-word;
    word-break: normal;
}

.wv-price__two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.wv-price__section-head,
.wv-price__preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wv-price__section-head { margin: 8px 0 10px; }

.wv-price__section-head h2 {
    margin: 0;
    font-size: 18px;
}

.wv-price__section-head p {
    margin: 3px 0 0;
    color: var(--wv-muted);
    font-size: 12px;
}

.wv-rows {
    display: grid;
    gap: 9px;
    margin-bottom: 20px;
}

.wv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px 34px;
    gap: 8px;
    align-items: center;
}

.wv-row__remove {
    width: 34px;
    height: 42px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    color: #98a2b3;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.wv-row__remove:hover { color: #d92d20; border-color: #fecdca; }

.wv-choice {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.wv-choice__grid { display: grid; gap: 8px; }
.wv-choice__grid--4 { grid-template-columns: repeat(4, 1fr); }
.wv-choice__grid--2 { grid-template-columns: repeat(2, 1fr); }

.wv-choice label { margin: 0; cursor: pointer; }
.wv-choice input { position: absolute; opacity: 0; pointer-events: none; }

.wv-choice span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #d9dee8;
    border-radius: 11px;
    background: #fff;
    color: #475467;
    font-size: 13px;
    font-weight: 700;
    transition: all .15s ease;
}

.wv-choice input:checked + span {
    border-color: var(--wv-accent);
    background: #eef3ff;
    color: #2147b7;
    box-shadow: inset 0 0 0 1px var(--wv-accent);
}

.wv-btn {
    appearance: none;
    border: 0;
    border-radius: 11px;
    min-height: 42px;
    padding: 10px 15px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.wv-btn:hover { transform: translateY(-1px); }
.wv-btn--primary { background: var(--wv-accent); color: #fff; }
.wv-btn--primary:hover { background: var(--wv-accent-dark); }
.wv-btn--secondary { background: #172033; color: #fff; }
.wv-btn--soft { background: #eef3ff; color: #2147b7; }
.wv-btn--ghost { background: #fff; color: #475467; border: 1px solid #d9dee8; }

.wv-price__panel-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.wv-price__reset {
    border: 0;
    background: transparent;
    color: var(--wv-muted);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    padding: 5px 0;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px;
}

.wv-price__preview-head { margin: 0 0 12px; }
.wv-price__preview-head span { display: block; font-weight: 700; }
.wv-price__preview-head small { display: block; color: var(--wv-muted); margin-top: 2px; }

/* На широком экране кнопка возврата не нужна. */
.wv-price__preview-head .wv-btn { display: none; }

.wv-price__preview {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 470px;
    padding: 12px;
    overflow: hidden;
    border-radius: 14px;
    background:
        linear-gradient(45deg, #eef1f5 25%, transparent 25%),
        linear-gradient(-45deg, #eef1f5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eef1f5 75%),
        linear-gradient(-45deg, transparent 75%, #eef1f5 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

.wv-price__preview svg {
    display: block;
    max-width: 100%;
    max-height: 610px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 16px 25px rgba(23,32,51,.14));
}

.wv-price__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 12px;
}

.wv-price__actions .wv-btn--download-main {
    grid-column: 1 / -1;
}

.wv-price__privacy {
    margin: 11px 2px 0;
    color: var(--wv-muted);
    font-size: 12px;
    line-height: 1.45;
}

.wv-price__section-head > div,
.wv-price__preview-head > div,
.wv-price__layout > *,
.wv-price__two > *,
.wv-row > * { min-width: 0; }

/* Переключение по ширине самого конструктора, а не окна браузера. */
@container (max-width: 900px) {
    .wv-price__layout { grid-template-columns: minmax(0, 1fr); }
    .wv-price__preview-wrap { position: static; top: auto; }
    .wv-price__preview { min-height: 410px; }
    .wv-price__preview-head .wv-btn { display: inline-flex; }
}

@container (max-width: 560px) {
    .wv-price { padding: 10px 12px 40px; }
    .wv-price__lead { font-size: 15px; }
    .wv-price__panel,
    .wv-price__preview-wrap { padding: 14px; border-radius: 14px; }
    .wv-price__section-head { align-items: stretch; flex-direction: column; }
    .wv-price__section-head .wv-btn { width: 100%; }
    .wv-price__two { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .wv-row { grid-template-columns: minmax(0, 1fr) 96px 34px; }
    .wv-choice__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wv-price__preview { min-height: 330px; padding: 8px; }
}

@container (max-width: 390px) {
    .wv-row { grid-template-columns: minmax(0, 1fr) 34px; }
    .wv-row [data-wv-service] { grid-column: 1 / -1; }
    .wv-row [data-wv-price] { grid-column: 1; }
    .wv-row__remove { grid-column: 2; }
    .wv-choice__grid--2,
    .wv-choice__grid--4,
    .wv-price__actions { grid-template-columns: minmax(0, 1fr); }
    .wv-price__actions .wv-btn--download-main { grid-column: auto; }
}

/* Быстрые действия: пустая форма загружается по умолчанию. */
.wv-price__quick-actions {
    display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 18px;
}
.wv-price__example, .wv-price__reset-top {
    min-height: 40px; padding: 9px 16px; border-radius: 10px; font: 700 13px/1.2 Arial, Helvetica, sans-serif; cursor: pointer;
}
.wv-price__example { border: 1px solid #3468f5; background: #3468f5; color: #fff; }
.wv-price__reset-top { border: 1px solid #3468f5; background: #fff; color: #2147b7; }
.wv-price__example:hover { background: #2857d9; }
.wv-price__reset-top:hover { background: #eef3ff; }
.wv-price__reset { color: #2147b7; }
@media (max-width: 560px) { .wv-price__quick-actions > button { flex: 1 1 calc(50% - 5px); } }


.wv-field .wv-char-count{display:block;margin-top:6px;color:var(--wv-muted);font-size:12px;text-align:right;}

.wv-price__form-error{margin:0 0 16px;padding:10px 12px;border:1px solid #efc1bb;border-radius:10px;background:#fff7f5;color:#a23a31;font-size:13px;line-height:1.4;}
.wv-price__form-error[hidden]{display:none!important;}
.wv-price input.is-invalid,.wv-price textarea.is-invalid{border-color:#d94c40!important;box-shadow:0 0 0 3px rgba(217,76,64,.10)!important;}

/* Визуальный выбор дизайна и палитры — Webviro Price 0.2 */
.wv-design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.wv-design-card{display:block;min-width:0;cursor:pointer;}
.wv-design-card>input,.wv-palette-card>input{position:absolute;opacity:0;pointer-events:none;}
.wv-design-card__body{display:flex;min-height:148px;padding:10px;flex-direction:column;gap:7px;border:1px solid #d9dee8;border-radius:13px;background:#fff;transition:.15s ease;}
.wv-design-card__body strong{font-size:12px;line-height:1.2;color:#344054;}
.wv-design-card__body small{font-size:10px;line-height:1.25;color:#7a8495;}
.wv-design-card>input:checked+.wv-design-card__body{border-color:#3468f5;background:#f5f8ff;box-shadow:inset 0 0 0 1px #3468f5;}
.wv-design-thumb{position:relative;display:block;height:62px;overflow:hidden;border-radius:8px;background:#f6f7f9;border:1px solid #eceef2;}
.wv-design-thumb i{position:absolute;display:block;border-radius:99px;background:#9aa6ba;}
.wv-design-thumb i:nth-child(1){left:9px;top:10px;width:38%;height:5px;background:#344054;}
.wv-design-thumb i:nth-child(2){left:9px;top:22px;width:60%;height:3px;}
.wv-design-thumb i:nth-child(3){left:9px;right:9px;top:37px;height:7px;background:#dce3ef;}
.wv-design-thumb i:nth-child(4){left:9px;right:9px;top:49px;height:4px;background:#dce3ef;}
.wv-design-thumb--2 i:nth-child(1){width:44%;height:8px;}
.wv-design-thumb--2 i:nth-child(2){left:auto;right:9px;top:10px;width:18%;height:8px;background:#3468f5;}
.wv-design-thumb--2 i:nth-child(3){top:28px;height:11px;border-radius:4px;}
.wv-design-thumb--2 i:nth-child(4){top:43px;height:11px;border-radius:4px;}
.wv-design-thumb--3 i:nth-child(1){top:9px;width:68%;height:9px;}
.wv-design-thumb--3 i:nth-child(2){top:25px;width:25%;height:3px;background:#3468f5;}
.wv-design-thumb--3 i:nth-child(3){top:39px;width:48%;height:4px;}
.wv-design-thumb--3 i:nth-child(4){left:auto;right:9px;top:39px;width:22%;height:4px;background:#344054;}

.wv-palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
.wv-palette-card{display:block;min-width:0;cursor:pointer;}
.wv-palette-card__body{display:flex;min-height:70px;padding:10px;flex-direction:column;justify-content:center;gap:8px;border:1px solid #d9dee8;border-radius:13px;background:#fff;transition:.15s ease;}
.wv-palette-card__body strong{font-size:12px;color:#344054;}
.wv-palette-card>input:checked+.wv-palette-card__body{border-color:#3468f5;background:#f5f8ff;box-shadow:inset 0 0 0 1px #3468f5;}
.wv-palette-swatches{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;}
.wv-palette-swatches i{display:block;width:18px;height:18px;border-radius:0;background:var(--sw);border:1px solid rgba(23,32,51,.10);}

.wv-price[data-wv-design-style="strict"] .wv-design-thumb--1{box-shadow:none;position:relative;background:#f6f7f9;}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--1 i{display:none;}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--1::before{content:"";position:absolute;left:14px;top:10px;width:34px;height:34px;border:2px solid #667085;border-radius:0;background:transparent;}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--2 i:nth-child(1){left:8px;top:8px;width:26%;height:46px;border-radius:3px;background:#dce3ef;}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--2 i:nth-child(2){left:38%;right:8px;top:10px;width:auto;height:5px;background:#344054;}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--2 i:nth-child(3){left:38%;right:8px;top:27px;width:auto;height:4px;}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--2 i:nth-child(4){left:38%;right:8px;top:42px;width:auto;height:4px;}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--3{background:linear-gradient(#344054 0 24px,#f6f7f9 24px);}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--3 i:nth-child(1){background:#fff;}
.wv-price[data-wv-design-style="business"] .wv-design-thumb--1 i:nth-child(1){width:74%;height:14px;background:#dce3ef;}
.wv-price[data-wv-design-style="business"] .wv-design-thumb--2 i:nth-child(3),.wv-price[data-wv-design-style="business"] .wv-design-thumb--2 i:nth-child(4){left:9px;right:9px;height:8px;border-radius:2px;}
.wv-price[data-wv-design-style="business"] .wv-design-thumb--3{background:linear-gradient(90deg,#3468f5 0 34%,#f6f7f9 34%);}
.wv-price[data-wv-design-style="contrast"] .wv-design-thumb{background:#202736;}
.wv-price[data-wv-design-style="contrast"] .wv-design-thumb i:nth-child(1){background:#fff;}.wv-price[data-wv-design-style="contrast"] .wv-design-thumb i:nth-child(2){background:#80a2ff;}
.wv-price[data-wv-design-style="contrast"] .wv-design-thumb--2{background:linear-gradient(#80a2ff 0 42%,#fff 42%);}
.wv-price[data-wv-design-style="contrast"] .wv-design-thumb--3 i:nth-child(3),.wv-price[data-wv-design-style="contrast"] .wv-design-thumb--3 i:nth-child(4){background:#3a4355;}

@container (max-width:560px){.wv-design-grid,.wv-palette-grid{grid-template-columns:1fr;}.wv-design-card__body{min-height:105px;}.wv-design-thumb{height:48px;}}

/* Release 0.3.0: show only production-ready layouts. */
.wv-design-card[hidden]{display:none!important;}
.wv-design-grid[data-count="1"]{grid-template-columns:minmax(0,260px);}
.wv-design-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.wv-design-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}


/* 0.3.2 design thumbnails */
.wv-price .wv-design-thumb{display:flex;align-items:center;justify-content:center;}
.wv-price .wv-design-thumb i{display:none;}
/* strict: square */
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--1{background:#f6f7f9;box-shadow:none;}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--1::before{content:"";width:34px;height:34px;border:2px solid #667085;border-radius:0;background:transparent;display:block;}
/* minimal 1: line */
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--1{background:#f6f7f9;}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--1::before{content:"";width:2px;height:44px;background:#d7dce5;display:block;}
/* minimal 2: two rectangles */
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2{background:#f6f7f9;position:relative;}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2::before,.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:30px;height:10px;border:1.5px solid #667085;border-radius:2px;background:#eef2f8;}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2::before{top:18px;}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2::after{top:34px;}
/* minimal 3: letters */
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--3{background:#f6f7f9;}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--3::before{content:"АБВ";font-size:21px;line-height:1;font-weight:700;letter-spacing:.08em;color:#667085;display:block;}
/* contrast 1: black square */
.wv-price[data-wv-design-style="contrast"] .wv-design-thumb--1{background:#f6f7f9;}
.wv-price[data-wv-design-style="contrast"] .wv-design-thumb--1::before{content:"";width:34px;height:34px;background:#202736;border-radius:0;display:block;}
/* business 2: small table */
.wv-price[data-wv-design-style="business"] .wv-design-thumb--2{background:#f6f7f9;position:relative;}
.wv-price[data-wv-design-style="business"] .wv-design-thumb--2::before{content:"";width:42px;height:30px;border:1.5px solid #667085;background:
 linear-gradient(#667085,#667085) 0 10px/100% 1.5px no-repeat,
 linear-gradient(#667085,#667085) 0 19px/100% 1.5px no-repeat,
 linear-gradient(#667085,#667085) 16px 0/1.5px 100% no-repeat,
 linear-gradient(#667085,#667085) 29px 0/1.5px 100% no-repeat,
 #ffffff;display:block;}


/* 0.3.3 — clean design symbols, no thumbnail capsules */
.wv-price .wv-design-thumb{
    position:relative!important;
    display:flex!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.wv-price .wv-design-thumb i{display:none!important;}
.wv-price .wv-design-thumb::before,
.wv-price .wv-design-thumb::after{
    box-sizing:border-box;
}

/* Рамка — ровный квадрат */
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--1::before{
    content:""!important;
    position:static!important;
    display:block!important;
    width:36px!important;
    height:36px!important;
    border:2px solid #667085!important;
    border-radius:0!important;
    background:transparent!important;
    transform:none!important;
}
.wv-price[data-wv-design-style="strict"] .wv-design-thumb--1::after{content:none!important;}

/* Воздух — одна линия */
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--1::before{
    content:""!important;
    display:block!important;
    width:2px!important;
    height:42px!important;
    border:0!important;
    border-radius:0!important;
    background:#cfd6e2!important;
}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--1::after{content:none!important;}

/* Карточки — два небольших прямоугольника */
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2::before,
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    width:38px!important;
    height:12px!important;
    margin:0!important;
    border:1.5px solid #667085!important;
    border-radius:0!important;
    background:transparent!important;
    transform:translateX(-50%)!important;
}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2::before{top:13px!important;}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--2::after{top:32px!important;}

/* Типографика — только АБВ */
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--3::before{
    content:"АБВ"!important;
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#667085!important;
    font:700 23px/1 Arial,Helvetica,sans-serif!important;
    letter-spacing:.08em!important;
    transform:none!important;
}
.wv-price[data-wv-design-style="minimal"] .wv-design-thumb--3::after{content:none!important;}

/* Темный — черный квадрат */
.wv-price[data-wv-design-style="contrast"] .wv-design-thumb--1::before{
    content:""!important;
    position:static!important;
    display:block!important;
    width:36px!important;
    height:36px!important;
    border:0!important;
    border-radius:0!important;
    background:#202736!important;
    transform:none!important;
}
.wv-price[data-wv-design-style="contrast"] .wv-design-thumb--1::after{content:none!important;}

/* Таблица — ровная сетка без внешней капсулы */
.wv-price[data-wv-design-style="business"] .wv-design-thumb--2::before{
    content:""!important;
    position:static!important;
    display:block!important;
    width:44px!important;
    height:34px!important;
    border:1.5px solid #667085!important;
    border-radius:0!important;
    background:
      linear-gradient(#667085,#667085) 0 10px/100% 1px no-repeat,
      linear-gradient(#667085,#667085) 0 21px/100% 1px no-repeat,
      linear-gradient(#667085,#667085) 14px 0/1px 100% no-repeat,
      linear-gradient(#667085,#667085) 29px 0/1px 100% no-repeat,
      transparent!important;
    transform:none!important;
}
.wv-price[data-wv-design-style="business"] .wv-design-thumb--2::after{content:none!important;}

.wv-price__add-row { display: block; margin-left: auto; }