.compress-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.25s ease;
}

.compress-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.compress-modal__overlay {
    position: absolute;
    inset: 0;
    background: #5E81F41A;
    backdrop-filter: blur(4px);
}

.compress-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 1px 1px 8px 0 #6B708029;
    animation: compressModalUp 0.25s ease;
}

@keyframes compressModalUp {
    from {
        transform: translateY(16px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


.compress-modal__dialog--level {
    max-width: 1060px;
    width: 100%;
    padding: 32px 80px;
}

.compress-modal__dialog--processing-info {
    max-width: 620px;
    width: 100%;
    padding: 32px 28px 28px;
}

.compress-modal__dialog--format {
    max-width: 533px;
    width: 100%;
    padding: 32px 40px;
}

.compress-modal__dialog--processing-final {
    max-width: 620px;
    width: 100%;
    padding: 32px;
}

.compress-modal__dialog--email {
    max-width: 620px;
    width: 100%;
    padding: 32px 30px;
}

.compress-modal__close {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 14px;
    top: 20px;
}

.compress-modal__header {
}

.compress-modal__title {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 32px;
}

.compress-modal__file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid #DEE1EA;
    color: #8181A5;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 40px;
}

/* An uploaded file name is arbitrary user text with no guaranteed break opportunity in it —
   `IMG_20260916_a_very_long_export_name.jpeg` is one unbreakable word to the line breaker — so
   it wraps mid-word rather than running out of its row. `min-width: 0` is what lets it wrap at
   all inside the flex rows it sits in; a flex item's default `min-width: auto` refuses to
   shrink below its content. */
.compress-modal__file-name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.compress-modal__file-size {
    min-width: 0;
    overflow-wrap: anywhere;
}

.compress-modal__actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compress-modal__button {
    background-color: #264BFF;
    border-radius: 8px;
    max-width: 171px;
    width: 100%;
    padding: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in;
}

.compress-modal__button:hover {
    background-color: #1d3fcc;
}

.compress-modal__dialog--email .compress-modal__button {
    max-width: 100%;
    margin-bottom: 24px;
}

.compress-modal__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.imw-watermark-modal .compress-modal__field {
    margin-bottom: 20px;
}

/* KAN-337: the Picker/Editor/Loader Figma frames (3818:157599, 3818:158069, 3818:160903) all
   carry this backdrop tint behind the dialog, not the generic `#5E81F41A` blue every other
   doctool modal uses — scoped to this funnel so those other modals (compress, merge, …) are
   untouched. */
.imw-watermark-modal .compress-modal__overlay {
    background: rgba(129, 129, 165, 0.5);
}

.compress-modal__label {
    font-weight: 400;
    margin-bottom: 12px;
}

.compress-modal__input {
    border: 1px solid #DEE1EA;
    border-radius: 8px;
    padding: 14px 20px;
    color: #000;
}

.compress-modal__input::placeholder {
    color: #8C8CA1;
}

.compress-modal__input.is-invalid {
    border-color: #D92D20;
}

.compress-modal__error {
    margin: 8px 0 0;
    color: #D92D20;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.compress-modal__terms {
    color: #8181A5;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

.imw-watermark-modal .compress-modal__terms {
    max-width: 419px;
    text-align: center;
}

.compress-modal__terms a {
    text-decoration: underline;
}

.compress-levels {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 36px;
}

.compress-level {
    flex: 1;
    box-shadow: 1px 1px 8px 0 #6B708029;
    border-radius: 12px;
    padding: 20px 16px;
    border: 2px solid #DEE1EA;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
}

.compress-level.is-active {
    border: 2px solid #264BFF
}

.compress-level__top {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.compress-level__left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.compress-level__radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #DEE1EA;
}

.compress-level.is-active .compress-level__radio {
    background-color: #264BFF;
    position: relative;
}

.compress-level.is-active .compress-level__radio::before {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    display: block;
    z-index: 1;
}

.compress-level__title {
    color: #8181A5;
    font-weight: 600;
    font-size: 16px;
}

.compress-level__badge {
    position: absolute;
    right: 4px;
    top: 4px;
    padding: 4px 12px;
    border-radius: 8px;
    background-color: #DDE5FF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-size: 12px;
    font-weight: 600;
}

.compress-level__description {
    color: #8181A5;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    margin-bottom: 12px;
}

.compress-level__size {
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 400;
    background: #F5F5FA;
    border-radius: 6px;
    display: inline;
    text-align: left;
}

.compress-level__size strong {
    font-weight: 600;
}

.compress-progress {
    margin-bottom: 28px;
}

.compress-progress__bar {
    max-width: 480px;
    margin: 0 auto 12px;
    height: 14px;
    padding: 2px 4px;
    border-radius: 8px;
    border: 1px solid #DEE1EA;
    background-color: #F5F5FA;
    display: flex;
    align-items: center;
}

.compress-progress__line {
    border-radius: 8px;
    background-color: #264BFF;
    height: 10px;
    width: 0;
    transition: width 0.1s ease;
}

.compress-progress__value {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-align: center;
}

.compress-processing-card {
    padding: 20px;
    background-color: #DDE5FF;
    border-radius: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.compress-processing-card__image {
    width: 186px;
    height: 148px;
}

.compress-processing-card__image img {
    width: 100%;
    height: 100%;
}

.compress-processing-card__content {
    max-width: 194px;
}

.compress-processing-card__badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 6px;
    background-color: #fff;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    max-width: 160px;
}

.compress-processing-card__badge span {
    width: 24px;
    height: 24px;
}

.compress-processing-card__badge span svg {
    width: 100%;
    height: 100%;
}

.compress-processing-card__text {
    font-weight: 600;
}

.compress-formats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.compress-format {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 12px;
    border-radius: 8px;
    border: 1px solid #DEE1EA;
    position: relative;
    height: 72px;
}

.compress-format.is-active {
    border: 1px solid #264BFF;
}

.compress-format__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compress-format__radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #DEE1EA;
}


.compress-format.is-active .compress-format__radio {
    background-color: #264BFF;
    position: relative;
}

.compress-format.is-active .compress-format__radio::before {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    display: block;
    z-index: 1;
}

.compress-format__title {
    color: #8181A5;
    font-size: 18px;
    font-weight: 600;
}

.compress-format.is-active .compress-format__title {
    color: #000;
}

.compress-format__icon {
}

.compress-processing-final {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compress-processing-final img:first-child {
    width: 202px;
    height: 202px;
}

.compress-processing-final img:nth-child(2) {
    position: absolute;
    width: 77px;
    height: 77px;
    top: -32px;
    left: 95px;
    filter: blur(4px);
}


.compress-processing-final img:nth-child(3) {
    position: absolute;
    width: 43px;
    height: 43px;
    z-index: 2;
    top: 20px;
    left: 95px;
}


.compress-processing-final img:nth-child(4) {
    position: absolute;
    width: 73px;
    height: 73px;
    bottom: 11px;
    right: 105px;
}


.compress-processing-final img:nth-child(5) {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 84px;
    right: 98px;
    filter: blur(2px);
}

.compress-modal__format--content {
    padding: 20px;
    background-color: #DDE5FF;
    border-radius: 12px;
    width: 100%;
    min-height: 180px;
    position: relative;
    margin-bottom: 40px;
}

.compress-modal__format--content img:first-child {
    position: absolute;
    width: 120px;
    height: 120px;
    left: 38%;
    top: 55px;
    z-index: 2;
}

.compress-modal__format--content img:nth-child(2) {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 42%;
    top: 12px;
    z-index: 1;
}

.compress-modal__format--content img:nth-child(3) {
    position: absolute;
    width: 175px;
    height: 175px;
    left: 45%;
    top: 0;
}

/* The close button sits in the dialog's top-right corner on every step, so a centred title
   keeps clear of it rather than running underneath at narrow widths. Symmetric, so the title
   stays centred. */
.imw-watermark-modal .compress-modal__title {
    padding: 0 44px;
}

.imw-watermark-modal .compress-modal__intro {
    margin-bottom: 20px;
    text-align: center;
}

/* IMWATERMARK modal: processing info step (Figma: Remover - Loader) */

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-modal__close {
    right: 20px;
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-progress__line {
    background-color: #3689F5;
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-card {
    justify-content: flex-start;
    gap: 30px;
    padding: 20px 20px 0 12px;
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-card__image {
    position: relative;
    width: 240px;
    height: 168px;
    flex-shrink: 0;
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-card__content {
    max-width: 250px;
}

/* The shared `.compress-processing-final` composite (file icon + floating
   checkmarks) is sized/positioned for the large STEP4 canvas. Rescale and
   reposition it here to fit the much smaller 240x168 image block used by
   this step, matching the Figma composite layout exactly. */
.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img {
    position: absolute;
    right: auto;
    bottom: auto;
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:first-child {
    width: 144px;
    height: 144px;
    top: 15px;
    left: 46px;
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:nth-child(2) {
    width: 77px;
    height: 77px;
    top: 0;
    left: 0;
    opacity: 0.5;
    filter: blur(4px);
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:nth-child(3) {
    width: 43px;
    height: 43px;
    top: 52px;
    left: 0;
    opacity: 1;
    filter: none;
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:nth-child(4) {
    width: 30px;
    height: 30px;
    top: 80px;
    left: 210px;
    filter: blur(2px);
}

.imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:nth-child(5) {
    width: 43px;
    height: 43px;
    top: 106px;
    left: 190px;
    filter: none;
}

/* IMWATERMARK modal: name step (Figma: Remover - Name) */

.imw-watermark-modal .compress-modal__dialog--format {
    padding: 32px 28px;
}

/* Figma's Name step has no filename/size readout (it would leak the file
   extension) — hide it here without touching the JS hook classes that
   populate it (setSelectedFileData / resetFileInput in home-watermark-remove.js). */
.imw-watermark-modal .compress-modal__dialog--format .compress-modal__file {
    display: none;
}

.imw-watermark-modal .compress-modal__dialog--format .compress-modal__button {
    background-color: #3689F5;
    max-width: unset;
}

.imw-watermark-modal .compress-modal__dialog--format .compress-modal__button:hover {
    background-color: #2f78dc;
}

.imw-watermark-modal .compress-modal__dialog--format .compress-modal__input::placeholder {
    color: #8181A5;
}

/* Preview illustration centering. The shared `.compress-modal__format--content
   img:nth-child()` rules position each icon with a `left: %` that only lines
   up at one specific container width, so the composite drifts right at the
   533px width this step actually uses — flex-center a fixed-size wrapper
   instead so it stays centered regardless of the container's width. */
.imw-watermark-modal .compress-modal__dialog--format .compress-modal__format--content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.imw-watermark-modal .compress-modal__dialog--format .imw-format-preview {
    position: relative;
    width: 221px;
    height: 180px;
    flex-shrink: 0;
}

.imw-watermark-modal .compress-modal__dialog--format .imw-format-preview img:first-child {
    left: 0;
    top: 58px;
}

.imw-watermark-modal .compress-modal__dialog--format .imw-format-preview img:nth-child(2) {
    left: 16px;
    top: 15px;
}

.imw-watermark-modal .compress-modal__dialog--format .imw-format-preview img:nth-child(3) {
    left: 46px;
    top: 3px;
}

/* IMWATERMARK modal: email step (Figma: Remover - Email) */

.imw-watermark-modal .compress-modal__dialog--email {
    /* Figma centers a ~419px content column inside the shared 620px dialog. */
    padding: 20px 100px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.imw-watermark-modal .compress-modal__dialog--email .compress-modal__close {
    right: 20px;
}

/* File preview card. Reuses the shared `.compress-modal__file` JS hook
   (setSelectedFileData / resetFileInput in home-watermark-remove.js still
   populate .compress-modal__file-name / -file-size) but restyled here to
   match Figma's rounded gray card with a file icon instead of the shared
   flex-row-with-border look used elsewhere. */
.imw-watermark-modal .compress-modal__dialog--email .compress-modal__file {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 20px 12px 95px;
    background-color: #F5F5FA;
    border-radius: 12px;
    border-bottom: none;
    margin-bottom: 20px;
}

.imw-watermark-modal .compress-modal__dialog--email .imw-file-info__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.imw-watermark-modal .compress-modal__dialog--email .imw-file-info__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.imw-watermark-modal .compress-modal__dialog--email .compress-modal__file-name {
    font-size: 13px;
    font-weight: 700;
    color: #1C1D21;
}

.imw-watermark-modal .compress-modal__dialog--email .compress-modal__file-size {
    font-size: 13px;
    font-weight: 400;
    color: #8181A5;
}

.imw-watermark-modal .compress-modal__dialog--email .compress-modal__button {
    background-color: #3689F5;
}

.imw-watermark-modal .compress-modal__dialog--email .compress-modal__button:hover {
    background-color: #2f78dc;
}

/* Trust/legal bullet list shown between the email input and the Continue
   button — IMWATERMARK-only, no shared/compress-* equivalent exists. */
.imw-watermark-modal .imw-trust-list {
    list-style: none;
    margin: 0 0 20px;
    padding-left: 6px;
    display: flex;
    flex-direction: column;
}

.imw-watermark-modal .imw-trust-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 400;
    color: #8181A5;
}

.imw-trust-list__divider {
    background: #F5F5FA;
    height: 1px;
    max-width: 358px;
}

.imw-watermark-modal .imw-trust-list__item:first-child {
    border-top: none;
    padding-top: 0;
}

.imw-watermark-modal .imw-trust-list__item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.imw-watermark-modal .imw-trust-list__item--accent {
    color: #3689F5;
}

.compress-modal__label,
.compress-modal__input {
    font-size: 16px;
}


@media (max-width: 936px) {

    .compress-modal__dialog--level {
        padding: 32px 40px;
    }

    .compress-levels {
        display: grid;
        gap: 20px;
        justify-content: stretch;
        margin-bottom: 20px;
    }

    .compress-level {
        margin-bottom: 0;
        width: 100%;
    }

    .compress-modal__title {
        font-size: 22px;
    }

    .compress-modal__dialog--level .compress-modal__title {
        max-width: 260px;
        margin-left: auto;
        margin-right: auto;
    }

    .compress-modal__dialog--format .compress-modal__title {
        max-width: 285px;
        margin-left: auto;
        margin-right: auto;
    }

    .compress-modal__dialog--processing-info .compress-modal__title {
        max-width: 180px;
        margin-left: auto;
        margin-right: auto;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-modal__title {
        max-width: unset;
    }

    .compress-processing-card {
        padding: 8px;
        gap: 0;
    }

    .compress-processing-final img:nth-child(2) {
        left: 0;
    }


    .compress-processing-final img:nth-child(3) {
        left: 0;
    }


    .compress-processing-final img:nth-child(4) {
        right: 0;
    }


    .compress-processing-final img:nth-child(5) {
        right: 0;
    }

    /* IMWATERMARK modal: processing info step (Figma: Remover - Loader, mobile) */
    .imw-watermark-modal .compress-modal__dialog--processing-info {
        width: calc(100% - 32px);
        padding: 24px 16px 20px;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-progress__bar {
        max-width: 100%;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-card {
        padding: 14px;
        gap: 14px;
        justify-content: flex-start;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-card__content {
        max-width: none;
        flex: 1;
        min-width: 0;
    }

    /* IMWATERMARK modal: name step (Figma: Remover - Name, mobile) */
    .imw-watermark-modal .compress-modal__dialog--format {
        width: calc(100% - 32px);
        padding: 32px 12px 15px;
    }

    .imw-watermark-modal .compress-modal__dialog--email {
        width: calc(100% - 32px);
        padding-top: 32px;
    }

    .imw-watermark-modal .compress-modal__dialog--format .compress-modal__title {
        font-size: 20px;
        font-weight: 600;
    }

    .imw-watermark-modal .compress-modal__dialog--format .compress-modal__format--content {
        min-height: 164px;
        margin-bottom: 24px;
    }

    .imw-watermark-modal .compress-modal__dialog--format .imw-format-preview {
        width: 166px;
        height: 135px;
    }

    .imw-watermark-modal .compress-modal__dialog--format .imw-format-preview img:first-child {
        width: 90px;
        height: 90px;
        left: 0;
        top: 44px;
    }

    .imw-watermark-modal .compress-modal__dialog--format .imw-format-preview img:nth-child(2) {
        width: 45px;
        height: 45px;
        left: 12px;
        top: 11px;
    }

    .imw-watermark-modal .compress-modal__dialog--format .imw-format-preview img:nth-child(3) {
        width: 131px;
        height: 131px;
        left: 35px;
        top: 2px;
    }

    .imw-watermark-modal .compress-modal__dialog--format .compress-modal__label {
        font-size: 12px;
    }

    .imw-watermark-modal .compress-modal__dialog--format .compress-modal__input {
        padding: 12px 16px;
    }

    .imw-watermark-modal .compress-modal__dialog--format .compress-modal__input::placeholder {
        font-size: 12px;
    }

    /* IMWATERMARK modal: email step (Figma: Remover - Email, mobile) */
    .imw-watermark-modal .compress-modal__dialog--email .compress-modal__title {
        font-size: 20px;
    }

    .imw-watermark-modal .compress-modal__dialog--email .imw-file-info__icon {
        width: 32px;
        height: 32px;
    }

    .imw-watermark-modal .imw-trust-list__item {
        font-size: 12px;
    }

    .compress-modal__label, .compress-modal__input {
        font-size: 12px;
    }
}

@media (max-width: 620px) {
    .imw-watermark-modal .compress-modal__dialog--email {
        padding: 32px 12px 50px;
    }

    .imw-watermark-modal .compress-modal__dialog--email .compress-modal__title {
        margin-bottom: 20px;
    }

    .imw-watermark-modal .compress-modal__dialog--email .compress-modal__file {
        padding: 12px 20px 12px 46px;
    }

    .imw-trust-list__divider {
        max-width: 100%;
    }

    .imw-watermark-modal .compress-modal__terms {
        max-width: 345px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

}

@media (max-width: 587px) {

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-card__image {
        position: relative;
        width: 133px;
        height: 168px;
        flex-shrink: 0;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-card {
        padding-left: 0;
        padding-bottom: 0;
    }

    /* Composite graphic scaled down (~46%) to fit the smaller mobile image block */
    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:first-child {
        width: 109px;
        height: 108px;
        top: 41px;
        left: 22px;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:nth-child(2) {
        width: 42px;
        height: 42px;
        top: 0;
        left: 27px;
        filter: blur(2px);
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:nth-child(3) {
        width: 23px;
        height: 23px;
        top: 26px;
        left: 26px;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:nth-child(4) {
        width: 16px;
        height: 16px;
        top: unset;
        left: 117px;
        bottom: 22px;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final img:nth-child(5) {
        width: 23px;
        height: 23px;
        left: 101px;
        bottom: 0;
        top: unset;
    }

    .imw-watermark-modal .compress-processing-card__text {
        font-size: 12px;
    }

    .imw-watermark-modal .compress-modal__dialog--processing-info .compress-processing-final {
        transform: translateY(-10px);
    }
}

@media (max-width: 385px) {
    .imw-watermark-modal .imw-trust-list__item {
        font-size: 10px;
    }

}

@media (max-width: 375px) {
    .imw-watermark-modal .compress-processing-card__badge {
        font-size: 12px;
    }
}

/* ─── KAN-337: manual watermark-selection picker + editor + loader ─────────
   (Figma "Remover - Manual remove - Picker/Brush/Area", "Remover - Loader").
   `.compress-level` (cards) and `.compress-modal__button` (CTAs) are the
   existing shared classes reused here — see home-watermark-remove.js. */

.compress-modal__dialog--picker {
    max-width: 773px;
    width: 100%;
    padding: 32px 39px;
    border: 1px solid #E5E5E5;
}

.compress-modal__dialog--editor {
    max-width: 920px;
    width: 100%;
    padding: 24px 40px 32px;
    border: 1px solid #E5E5E5;
}

/* Picker */

.imw-picker__file {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #DEE1EA;
}

.imw-picker__thumb {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(20deg, rgba(104, 187, 255, 0.5) 0%, rgba(2, 102, 184, 0.5) 86%);
}

.imw-picker__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.imw-picker__file-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.imw-picker__file-meta .compress-modal__file-name {
    font-size: 18px;
    font-weight: 600;
    color: #11161E;
}

.imw-picker__file-meta .compress-modal__file-size {
    font-size: 14px;
    color: #8181A5;
}

.imw-picker__change {
    background: transparent;
    border: 0;
    padding: 0;
    color: #3689F5;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.imw-picker__title {
    font-size: 18px;
    font-weight: 600;
    color: #1C1D21;
    margin: 0 0 8px;
}

.imw-picker__subtitle {
    font-size: 14px;
    color: #8181A5;
    margin: 0 0 24px;
}

.imw-picker__options {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.imw-picker__option {
    flex: 1;
    margin-bottom: 0;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: none;
}

.imw-picker__option.is-active {
    border-color: #3689F5;
}

.imw-picker__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.imw-picker__icon svg {
    width: 20px;
    height: 20px;
}

.imw-picker__icon--blue {
    background: rgba(94, 129, 244, 0.1);
}

.imw-picker__icon--green {
    background: rgba(124, 231, 172, 0.2);
}

.imw-picker__icon--green svg {
    width: 24px;
    height: 24px;
}

.imw-picker__option-body {
    width: 100%;
}

.imw-picker__option-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.imw-picker__option-title {
    font-size: 12px;
    font-weight: 700;
    color: #1C1D21;
}

.imw-picker__badge {
    position: static;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px;
    background: rgba(94, 129, 244, 0.1);
}

.imw-picker__badge--blue {
    color: #3689F5;
    background: rgba(94, 129, 244, 0.1);
}

.imw-picker__badge--yellow {
    color: #F4BE5E;
    background: rgba(244, 190, 94, 0.2);
}

.imw-picker__radio {
    align-self: flex-end;
    margin-bottom: 14px;
    flex-shrink: 0;
}

/* .compress-modal__button's own background (#264BFF) is the generic funnel blue; every other
   primary CTA in this modal is repainted to imwatermark's own #3689F5 (see the --format /
   --email overrides above) — matched here for the three new steps. */
.imw-picker__cta {
    max-width: 100%;
    gap: 8px;
    background-color: #3689F5;
}

.imw-picker__cta:hover {
    background-color: #2f78dc;
}

.imw-picker__cta svg {
    width: 18px;
    height: 18px;
}

/* Editor */

/* A brush drag routinely leaves the photo, and the browser's default for a press-and-drag is
   to select whatever text it passes over — so this step's own copy is not selectable. The
   steps with inputs are untouched. */
.compress-modal__dialog--editor {
    user-select: none;
    -webkit-user-select: none;
}

/* The close button sits at the dialog's top-right corner, so the hint keeps clear of it
   instead of running underneath. */
.imw-editor__hint {
    text-align: center;
    color: #8181A5;
    font-size: 12px;
    max-width: 660px;
    margin: 0 auto 16px;
    padding: 0 44px;
}

.imw-editor__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #DEE1EA;
}

.imw-editor__tools {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #DDE5FF;
    border-radius: 8px;
    padding: 2px;
}

.imw-editor__tool {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.imw-editor__tool.is-active {
    background: #3689F5;
}

.imw-editor__tool-icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.imw-editor__tool-icon--brush {
    background-image: url('/icons/doctool/home/watermark-picker/editor-brush-grey.svg');
}

.imw-editor__tool.is-active .imw-editor__tool-icon--brush,
.imw-editor__tool-icon--white.imw-editor__tool-icon--brush {
    background-image: url('/icons/doctool/home/watermark-picker/editor-brush.svg');
}

.imw-editor__tool-icon--area {
    background-image: url('/icons/doctool/home/watermark-picker/editor-area.svg');
}

.imw-editor__tool.is-active .imw-editor__tool-icon--area,
.imw-editor__tool-icon--white.imw-editor__tool-icon--area {
    background-image: url('/icons/doctool/home/watermark-picker/editor-area-white.svg');
}

.imw-editor__tool-icon--hand {
    background-image: url('/icons/doctool/home/watermark-picker/editor-hand-grey.svg');
}

.imw-editor__tool.is-active .imw-editor__tool-icon--hand,
.imw-editor__tool-icon--white.imw-editor__tool-icon--hand {
    background-image: url('/icons/doctool/home/watermark-picker/editor-hand-white.svg');
}

.imw-editor__stage.is-hand-tool {
    cursor: grab;
}

.imw-editor__stage.is-hand-tool.is-dragging {
    cursor: grabbing;
}

.imw-editor__tool-icon--muted {
    width: 24px;
    height: 24px;
}

.imw-editor__size[hidden] {
    display: none;
}

.imw-editor__size {
    display: flex;
    align-items: center;
    gap: 19px;
    margin-left: 20px;
}

.imw-editor__size-label,
.imw-editor__size-value {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.imw-editor__size-label {
    color: #8181A5;
}

.imw-editor__size-value {
    color: #1C1D21;
}

/* Custom div-based slider (not native <input type="range">) — a native thumb's center can only
   travel between half-its-own-width and (track width minus half-its-width), so it visually
   never reaches the track's own edges. This maps 0%/100% to the actual edges, matching Figma,
   and is driven entirely from JS (setupEditor's updateSizeSliderUI in
   home-watermark-remove.js) rather than any pseudo-element track/thumb math. */
.imw-editor__size-slider {
    position: relative;
    width: 180px;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.imw-editor__size-slider__track {
    position: relative;
    width: 100%;
    height: 6px;
    background: #DEE1EA;
    border-radius: 3px;
}

.imw-editor__size-slider__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 25%;
    background: #3689F5;
    border-radius: 3px;
}

.imw-editor__size-slider__thumb {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #DEE1EA;
    box-shadow: 1px 1px 4px rgba(107, 112, 128, 0.25);
    pointer-events: none;
}

/* `[hidden]` must win over the class rule below — an author `display` declaration otherwise
   beats the UA stylesheet's `[hidden]{display:none}` regardless of specificity, which is what
   let this hint render on the Brush tool (it's toggled via the `hidden` attribute in JS, not a
   class). Same reasoning applies to any other `[hidden]` element this file sets `display` on. */
.imw-editor__area-hint[hidden] {
    display: none;
}

.imw-editor__area-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #8181A5;
    margin-left: 20px;
}

/* Zoom + undo/redo/Clear All. One row on desktop (pushed right, zoom itself hidden there in
   favour of the stage overlay), one row on mobile too — see the media query at the bottom. */
.imw-editor__controls {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.imw-editor__history {
    display: flex;
    align-items: center;
    gap: 12px;
}

.imw-editor__icon-btn {
    width: 16px;
    height: 16px;
    display: flex;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.imw-editor__icon-btn svg {
    width: 100%;
    height: 100%;
}

.imw-editor__icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.imw-editor__divider {
    width: 1px;
    height: 20px;
    background: #DEE1EA;
}

.imw-editor__clear {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #8181A5;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.imw-editor__clear svg {
    width: 20px;
    height: 20px;
}

/* Height budget for the stage. The JS reads this (see layoutStage) and sizes the stage to the
   photo's own shape within it, so the breakpoints live here rather than in the script. */
.imw-editor__canvas-wrap {
    --imw-stage-max-h: 460px;
    position: relative;
    margin-bottom: 20px;
}

/* Width/height are written by the JS from the photo's aspect ratio; the values below are only
   what a stage with no photo yet falls back to. Centred, since a portrait photo makes a stage
   narrower than the dialog. */
.imw-editor__stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 840 / 374;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #F5F5FA;
    touch-action: none;
    cursor: crosshair;
}

.imw-editor__stage.is-panning,
.imw-editor__stage.is-panning * {
    cursor: grab;
}

/* The zoom/pan layer. Its size is the photo at 100% (which is the cover size, so the default
   view is pixel-for-pixel what it was before zoom existed) and the JS writes the transform.
   `--imw-inv-zoom` is 1/zoom, used below so the area box's outline and handles keep a
   constant ON-SCREEN size instead of growing with the photo. */
.imw-editor__content {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    --imw-inv-zoom: 1;
}

.imw-editor__image {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.imw-editor__brush-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.imw-editor__area-box {
    position: absolute;
    border: calc(2px * var(--imw-inv-zoom)) dashed #F4BE5E;
    background: rgba(244, 190, 94, 0.25);
    pointer-events: none;
}

.imw-editor__area-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #F4BE5E;
    transform: translate(-50%, -50%) scale(var(--imw-inv-zoom));
}

.imw-editor__area-handle[data-handle="nw"] {
    left: 0;
    top: 0;
}

.imw-editor__area-handle[data-handle="ne"] {
    left: 100%;
    top: 0;
}

.imw-editor__area-handle[data-handle="sw"] {
    left: 0;
    top: 100%;
}

.imw-editor__area-handle[data-handle="se"] {
    left: 100%;
    top: 100%;
}

.imw-editor__badge[hidden] {
    display: none;
}

.imw-editor__badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 20px;
    background: #8181A5;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 1px 1px 4px rgba(107, 112, 128, 0.15);
}

/* Purely a label — it must never eat a brush stroke the customer aimed at the photo under
   it. (The zoom badge next to it IS interactive; the stage's pointerdown skips that one by
   target instead.) */
.imw-editor__badge--tool {
    top: 16px;
    left: 16px;
    pointer-events: none;
}

.imw-editor__badge--zoom {
    bottom: 16px;
    right: 16px;
    gap: 16px;
}

.imw-editor__zoom button {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.imw-editor__zoom button:disabled {
    opacity: 0.4;
    cursor: default;
}

.imw-editor__badge--zoom button {
    color: #fff;
}

/* The inline copy is the mobile one (Figma puts zoom at the left of the undo/Clear All row);
   the overlay badge above is the desktop one. Exactly one is visible at a time — see the
   Blade comment next to the two elements. */
.imw-editor__zoom--inline {
    display: none;
    align-items: center;
    gap: 16px;
    color: #8181A5;
    font-size: 12px;
    font-weight: 700;
}

.imw-editor__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.imw-editor__reset {
    flex: 1;
    background: #fff;
    border: 1px solid #DEE1EA;
    border-radius: 8px;
    padding: 14px 29px;
    color: #8181A5;
    font-size: 14px;
    font-weight: 700;
}

.imw-editor__submit {
    flex: 1;
    max-width: 100%;
    gap: 8px;
    background-color: #3689F5;
}

.imw-editor__submit:hover {
    background-color: #2f78dc;
}

.imw-editor__submit svg {
    width: 18px;
    height: 18px;
}

/* Figma "Remover - Manual remove - Picker/Brush/Area -- mob" (3818:159408, 3818:159857,
   3818:160309). The mobile frames show the flow as its own full page rather than a floating
   card: full-bleed, no overlay margin, the toolbar broken into three stacked rows (tools /
   size-or-hint / zoom + history) with a rule between the second and third, and the primary
   action above Reset. The existing steps in this same modal keep their card chrome at narrow
   widths, so only the picker and editor go full-bleed — they are the two frames the design
   actually covers. */
@media (max-width: 600px) {
    /* Full-bleed: these two steps read as a page on the phone, which is what both frames
       show. `height: 100%` + internal scroll keeps the stage and the actions reachable on a
       short viewport instead of pushing them under the fold of a centred card. */
    .imw-watermark-modal .compress-modal__dialog--picker,
    .imw-watermark-modal .compress-modal__dialog--editor {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
        border: 0;
        padding: 24px 20px 32px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* The frames have no close button (they are pages with a hamburger there), but this is a
       modal and keeps one — so the content starts below it instead of running underneath
       "Change file" / the hint. Same specificity as the full-bleed rule above, which sets the
       shorthand. */
    .imw-watermark-modal .compress-modal__dialog--picker,
    .imw-watermark-modal .compress-modal__dialog--editor {
        padding-top: 64px;
    }

    /* A phone is tall, so the stage gets MORE height here, not less — a portrait photo
       would otherwise shrink to a sliver of the screen's width. The JS additionally caps it
       at 60% of the viewport. */
    .imw-editor__canvas-wrap {
        --imw-stage-max-h: 520px;
    }

    .imw-picker__thumb {
        width: 40px;
        height: 40px;
        border-radius: 7px;
    }

    .imw-picker__options {
        flex-direction: column;
    }

    /* The close button has its own line here (padding-top above), so the hint no longer has
       to keep clear of it. */
    .imw-editor__hint {
        text-align: left;
        margin-bottom: 20px;
        padding: 0;
    }

    .imw-editor__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-bottom: 0;
        margin-bottom: 16px;
        border-bottom: 0;
    }

    /* The Brush/Area toggle grows from a compact icon pair into two wide pill buttons
       filling the row, and the size/history rows each take their own line below it. */
    .imw-editor__tools {
        justify-content: stretch;
    }

    .imw-editor__tool {
        flex: 1;
        height: 40px;
    }

    .imw-editor__size,
    .imw-editor__area-hint {
        width: 100%;
        margin-left: 0;
    }

    .imw-editor__size-slider {
        width: 100%;
        flex: 1;
    }

    /* The Area frame centres its "Drag corners to resize" hint on its own row. */
    .imw-editor__area-hint {
        justify-content: center;
    }

    /* Zoom left, undo/redo/Clear All right, with the rule Figma draws above the pair. The
       toolbar's own bottom border is dropped above so this one sits between the size/hint row
       and the controls, whichever tool panel is showing. */
    .imw-editor__controls {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        padding-top: 16px;
        border-top: 1px solid #DEE1EA;
    }

    .imw-editor__history {
        gap: 20px;
    }

    /* Zoom moves out of the stage overlay and into the controls row. */
    .imw-editor__zoom--inline {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 147px;
    }

    .imw-editor__badge--zoom,
    .imw-editor__badge--tool {
        display: none;
    }

    /* Primary action first, full width, Reset stacked below it — the mobile frame
       reverses the desktop's side-by-side reset-left/submit-right order. */
    .imw-editor__actions {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .imw-editor__reset,
    .imw-editor__submit {
        width: 100%;
        max-width: 100%;
    }
}