.cs4u-wb {
    max-width: 860px;
    margin: 32px auto;
    padding: 28px;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    background: #fff;
}

.cs4u-wb__intro h2 {
    margin-top: 0;
}

.cs4u-wb__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cs4u-wb__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 22px 0;
    counter-reset: step;
}

.cs4u-wb__steps li {
    padding: 10px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #f8fafc;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
}

.cs4u-wb__steps li.is-active {
    border-color: #0b67c2;
    background: #eef6ff;
    color: #064887;
}

.cs4u-wb__steps li.is-complete {
    border-color: #98d4a9;
    background: #f0fbf3;
    color: #176b36;
}

.cs4u-wb__panel {
    display: none;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    background: #fff;
}

.cs4u-wb__panel.is-active {
    display: block;
}

.cs4u-wb__panel h3 {
    margin-top: 0;
}

.cs4u-wb__items {
    display: grid;
    gap: 12px;
}

.cs4u-wb__item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.cs4u-wb__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 220px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #fcfcfd;
    cursor: pointer;
}

.cs4u-wb__item-main {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    margin: 0 !important;
}

.cs4u-wb__item input,
.cs4u-wb__item select,
.cs4u-wb__item textarea,
.cs4u-wb__whole-order-wrap input,
.cs4u-wb__whole-order-wrap textarea {
    cursor: auto;
}

.cs4u-wb__item-note {
    grid-column: 1 / -1;
}

.cs4u-wb__sku,
.cs4u-wb__empty {
    display: block;
    color: #667085;
    font-size: 13px;
}

.cs4u-wb__whole-order-wrap {
    margin-top: 14px;
}

.cs4u-wb__whole-order {
    display: inline-flex !important;
    gap: 10px;
    align-items: center;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #0b67c2;
    border-radius: 6px;
    background: #eef6ff;
    color: #064887;
}

.cs4u-wb__whole-order-note {
    display: block !important;
    max-width: 520px;
}

.cs4u-wb__item-choice-status {
    display: block;
    margin-top: 10px;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
}

.cs4u-wb label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.cs4u-wb input[type="text"],
.cs4u-wb input[type="email"],
.cs4u-wb input[type="number"],
.cs4u-wb textarea {
    width: 100%;
    max-width: 100%;
}

.cs4u-wb__confirm {
    margin: 18px 0;
    background: #f6f8fa;
}

.cs4u-wb__confirm label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 500;
}

.cs4u-wb__nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 18px;
}

.cs4u-wb__submit,
.cs4u-wb__next,
.cs4u-wb__prev {
    min-width: 150px;
}

.cs4u-wb__hint {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 13px;
}

.cs4u-wb__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cs4u-wb__legal-note,
.cs4u-wb-policy {
    padding: 12px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    background: #f8fafc;
    color: #475467;
    font-size: 14px;
}

.cs4u-wb__whole-order-status {
    display: block;
    margin: 0 0 10px;
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
}

.cs4u-wb__lookup-wrap {
    align-self: end;
}

.cs4u-wb__lookup-wrap--hidden {
    display: none;
}

.cs4u-wb__lookup-status {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
}

.cs4u-wb__lookup-status.is-loading {
    color: #475467;
}

.cs4u-wb__lookup-status.is-success {
    color: #176b36;
}

.cs4u-wb__lookup-status.is-error {
    color: #b42318;
}

.cs4u-wb-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cs4u-wb-product-button,
.cs4u-wb-page-button,
.cs4u-wb-order-button {
    margin: 16px 0;
}

.cs4u-wb__notice {
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 6px;
    border: 1px solid #d0d7de;
}

.cs4u-wb__notice--success {
    border-color: #8fd19e;
    background: #eefbf2;
}

.cs4u-wb__notice--missing,
.cs4u-wb__notice--not_found,
.cs4u-wb__notice--error {
    border-color: #f0b8b8;
    background: #fff4f4;
}

.cs4u-wb-footer-link {
    text-align: center;
    padding: 12px;
    font-size: 14px;
}

@media (max-width: 700px) {
    .cs4u-wb {
        padding: 20px;
    }

    .cs4u-wb__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cs4u-wb__steps,
    .cs4u-wb__item {
        grid-template-columns: 1fr;
    }

    .cs4u-wb__nav {
        align-items: stretch;
        flex-direction: column;
    }
}