body.wizard-page .stage-form-card.wizard-text-editor {
    --text-picker-width: clamp(3.65rem, 16vw, 4.125rem);
    --text-size-width: 7rem;
    --text-position-width: 4.125rem;
    padding: 1rem !important;
    border-radius: 18px;
    background: #fff;
}

.wizard-text-editor .wizard-stage-heading-line { margin-bottom: .65rem !important; }
.wizard-text-editor .wizard-stage-title { color: #29343d; }
.wizard-text-editor .wizard-intro-copy { margin-bottom: .65rem; color: #647589; }

.wizard-text-editor .wizard-text-section {
    container-type: inline-size;
    margin: 0 0 .4rem;
    padding-inline: .65rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fafcfd;
}

.wizard-text-editor .wizard-text-section:has(> .stage3-text-switch .form-check-input:checked) {
    padding-bottom: .6rem;
}

.wizard-text-editor .wizard-text-section > .stage3-text-switch {
    min-height: 44px;
    gap: .55rem;
    padding: 0;
}

.wizard-text-editor .stage3-text-switch > .form-check-input {
    float: none;
    width: 2.25rem;
    height: 1.375rem;
    margin: 0;
}

.wizard-text-editor .stage3-text-switch > .form-check-input:not(:checked) {
    border-color: #c9d5dc;
    background-color: #e9eef1;
}

.wizard-text-editor .stage3-text-switch > .form-check-input:focus-visible {
    outline: 2px solid #a5224a;
    outline-offset: 2px;
}

.wizard-text-editor .stage3-text-switch > .form-check-input:checked {
    border-color: #d9447d;
    background-color: #d9447d;
}

.wizard-text-editor .stage3-text-switch > .form-check-label {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    min-height: 44px;
    color: #193b50;
    font-weight: 600;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.wizard-text-editor .stage3-text-switch > .form-check-label::after {
    content: "";
    flex: 0 0 .45rem;
    height: .45rem;
    margin-inline: .5rem .2rem;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-.1rem) rotate(45deg);
}

.wizard-text-editor .stage3-text-switch > .form-check-input:checked + .form-check-label::after {
    transform: translateY(.1rem) rotate(225deg);
}

.wizard-text-editor .wizard-text-section:has(> .wizard-text-appearance .wizard-text-color:not([hidden])) > .stage3-text-switch {
    padding-inline-end: calc(2 * var(--text-picker-width) + var(--text-size-width) + var(--text-position-width) + 1rem);
}

.wizard-text-editor .wizard-text-section:has(> .wizard-text-appearance .wizard-text-color:not([hidden])) .form-check-label::after {
    display: none;
}

.wizard-text-editor .wizard-text-appearance > details > summary {
    inline-size: var(--text-picker-width);
    inset-inline-end: .65rem;
    min-height: 38px;
    inset-block-start: 3px;
}

.wizard-text-editor .wizard-text-appearance > .wizard-text-color > summary {
    gap: .18rem;
    padding-inline: .2rem;
}

.wizard-text-editor .wizard-text-appearance .wizard-text-color__dot {
    flex: 0 0 10px;
}

.wizard-text-editor .wizard-text-appearance > .wizard-text-font > summary {
    inset-inline-end: calc(.9rem + var(--text-picker-width));
}

.wizard-text-size,
.wizard-text-position {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: calc(1.4rem + 2 * var(--text-picker-width) + var(--text-position-width, 0px));
    display: flex;
    align-items: center;
    inline-size: var(--text-size-width);
    min-height: 38px;
    border: 1px solid #d5e0e8;
    border-radius: 8px;
    background: #fff;
    color: #314a5e;
    font-size: .75rem;
    white-space: nowrap;
}

.wizard-text-position {
    inset-inline-end: calc(1.15rem + 2 * var(--text-picker-width));
    inline-size: var(--text-position-width);
}

.wizard-text-size:not(.wizard-text-appearance > *) {
    inset-inline-end: calc(1.15rem + 2 * var(--text-picker-width));
}

.wizard-text-size__icon { padding-inline-start: .35rem; font-weight: 700; }
.wizard-text-size output { min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; }
:is(.wizard-text-size, .wizard-text-position) button {
    flex: 1;
    align-self: stretch;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
}

:is(.wizard-text-size, .wizard-text-position) button:not([aria-disabled="true"]):hover { background: #edf2f8; }
:is(.wizard-text-size, .wizard-text-position) button[aria-disabled="true"] { opacity: .45; cursor: default; }
:is(.wizard-text-size, .wizard-text-position) button:focus-visible { outline: 2px solid #495768; outline-offset: -2px; }

@container (max-width: 27rem) {
    .wizard-text-editor .wizard-text-section:has(> .wizard-text-appearance .wizard-text-color:not([hidden])) > .stage3-text-switch {
        padding-inline-end: 0;
        padding-block-end: 3rem;
    }

    .wizard-text-editor .wizard-text-appearance {
        --text-size-width: clamp(4rem, 28cqi, 7rem);
        --text-picker-width: min(3.65rem, calc((100cqi - var(--text-position-width) - var(--text-size-width) - 1rem) / 2));
    }

    .wizard-text-editor .wizard-text-appearance > details > summary,
    .wizard-text-size,
    .wizard-text-position {
        inset-block-start: 44px;
        min-height: 44px;
    }

    .wizard-text-size {
        inset-inline-end: auto;
        inset-inline-start: .65rem;
        inline-size: var(--text-size-width);
    }

    .wizard-text-appearance .wizard-text-size__icon { display: none; }
}

body.wizard-project-oto-on.page-stage1 .wizard-text-editor .wizard-text-appearance > details > summary {
    color: #263447;
    font-weight: 650;
}

body.wizard-page .stage-form-card.wizard-text-editor .wizard-text-section .form-control:not(.group-name-input) {
    min-width: 0;
    min-height: 38px;
    border: 1px solid #d5e0e8;
    border-radius: .7rem !important;
    background-color: #fff;
}

body.wizard-page .stage-form-card.wizard-text-editor .wizard-text-section .form-control:focus:not(.is-invalid, .input-validation-error, [aria-invalid="true"], :is(:user-invalid)) {
    border-color: #238f8b !important;
    box-shadow: 0 0 0 .15rem rgb(42 174 170 / .22) !important;
}

.wizard-text-editor .slogan-style-picker .stage1-section-icon { width: 26px; height: 26px; min-width: 26px; }
.wizard-text-editor .slogan-style-picker legend { font-size: .72rem; }
.wizard-text-editor .slogan-style-picker__tile { height: clamp(54px, 15vw, 66px); }
.wizard-text-editor .slogan-style-picker__tile img { height: 2.8rem; }

@media (min-width: 992px) {
    .wizard-text-editor .slogan-style-picker legend {
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .wizard-text-editor--compact .wizard-intro-copy { margin-bottom: .5rem; }
    .wizard-text-editor--compact .wizard-text-section { margin-bottom: .3rem; }
    .wizard-text-editor--compact .wizard-text-section:has(> .stage3-text-switch .form-check-input:checked) {
        padding-bottom: .35rem;
    }
    .wizard-text-editor--compact .wizard-text-section > .stage3-text-switch { min-height: 40px; }
    .wizard-text-editor--compact .wizard-text-appearance > details > summary,
    .wizard-text-editor--compact .wizard-text-size,
    .wizard-text-editor--compact .wizard-text-position {
        min-height: 34px;
    }
    .wizard-text-editor--compact :is(.wizard-text-size, .wizard-text-position) button { min-height: 32px; }
    body.wizard-page .stage-form-card.wizard-text-editor--compact .wizard-text-section .form-control:not(.group-name-input) {
        min-height: 34px;
        padding-block: .25rem;
    }
    .wizard-text-editor--compact .slogan-style-picker__tile { height: 56px; }
}

@media (max-width: 991.98px) {
    body.wizard-page .stage-form-card.wizard-text-editor .wizard-text-section .form-control {
        min-height: 44px;
        font-size: 16px;
    }
}

@media (max-width: 767.98px), (pointer: coarse) {
    .wizard-text-editor .wizard-text-section:has(> .wizard-text-appearance .wizard-text-color:not([hidden])) > .stage3-text-switch {
        padding-inline-end: 0;
        padding-block-end: 3.15rem;
    }
    .wizard-text-editor .wizard-text-appearance {
        --text-size-width: clamp(4rem, 28cqi, 7rem);
        --text-picker-width: min(3.65rem, calc((100cqi - var(--text-position-width) - var(--text-size-width) - 1rem) / 2));
    }
    .wizard-text-editor .wizard-text-appearance > details > summary,
    .wizard-text-editor .wizard-text-size,
    .wizard-text-editor .wizard-text-position {
        inset-block-start: 44px;
        min-height: 46px;
    }
    .wizard-text-editor .wizard-text-size {
        inset-inline-end: auto;
        inset-inline-start: .65rem;
        inline-size: var(--text-size-width);
    }
    .wizard-text-size__icon { display: none; }
    .wizard-text-size output { flex: 1; min-width: 0; }
    .wizard-text-editor .wizard-text-size button {
        flex: 0 0 44px;
        min-height: 44px;
        font-size: 1.15rem;
        touch-action: manipulation;
    }
    .wizard-text-editor .wizard-text-size button:not([aria-disabled="true"]):active {
        background: #e1eef3;
        font-size: 1.3rem;
    }
}
