.wpmc-feedback {
    --wpmc-feedback-accent: #d72d81;
    --wpmc-feedback-ink: var(--drl-text, #15191a);
    --wpmc-feedback-surface: var(--drl-bg, #f4f3ee);
    --wpmc-feedback-line: var(--drl-line, #d1d2cc);
    --wpmc-feedback-dialogue-accent: var(--drl-workspace-nav, #522f64);
    --wpmc-feedback-dialogue-on-accent: var(--drl-workspace-on-action, #fff);
    --wpmc-feedback-on-category: #fff;
    color: var(--wpmc-feedback-ink);
    font-family: inherit;
}

.wpmc-feedback--celebration { --wpmc-feedback-accent: var(--drl-success, #247a5a); }
.wpmc-feedback--sent { --wpmc-feedback-accent: #1677c8; }
.wpmc-feedback--waiting { --wpmc-feedback-accent: #8c5bd4; }
.wpmc-feedback--conversation { --wpmc-feedback-accent: #087f8c; }
.wpmc-feedback--selection { --wpmc-feedback-accent: #16945d; }
.wpmc-feedback--progress { --wpmc-feedback-accent: #5168dd; }
.wpmc-feedback--completion { --wpmc-feedback-accent: #b57800; --wpmc-feedback-on-category: #15191a; }
.wpmc-feedback--neutral { --wpmc-feedback-accent: #667085; }
.wpmc-feedback--attention { --wpmc-feedback-accent: #d25b14; }
.wpmc-feedback--error { --wpmc-feedback-accent: #c62949; }

.wpmc-feedback--type-project-match { --wpmc-feedback-dialogue-accent: var(--drl-project-match-accent, #c92a83); }
.wpmc-feedback--type-long-run { --wpmc-feedback-dialogue-accent: var(--drl-long-run-accent, #6f7c3a); }
.wpmc-feedback--type-team-up { --wpmc-feedback-dialogue-accent: var(--drl-team-up-accent, #007b96); }
.wpmc-feedback--type-co-build { --wpmc-feedback-dialogue-accent: var(--drl-co-build-accent, #7046d1); }
.wpmc-feedback--type-project-relay { --wpmc-feedback-dialogue-accent: var(--drl-project-relay-accent, #007d74); }
.wpmc-feedback--type-warm-intro { --wpmc-feedback-dialogue-accent: var(--drl-warm-intro-accent, #b928c1); }
.wpmc-feedback--type-expert-check { --wpmc-feedback-dialogue-accent: var(--drl-expert-check-accent, #6559b8); }

.wpmc-feedback__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    grid-template-rows: minmax(220px, auto) 56px;
    min-height: 276px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--wpmc-feedback-accent) 42%, var(--wpmc-feedback-line));
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--wpmc-feedback-accent) 24%, transparent), transparent 34%),
        linear-gradient(
            135deg,
            var(--wpmc-feedback-surface) 0%,
            color-mix(in srgb, var(--wpmc-feedback-accent) 12%, var(--wpmc-feedback-surface)) 100%
        );
    box-shadow: var(--drl-shadow, 0 30px 90px rgb(18 24 40 / 28%));
}

.wpmc-feedback__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    grid-column: 1;
    grid-row: 1;
    padding: 36px 18px 32px 38px;
}

.wpmc-feedback__eyebrow {
    margin-bottom: 8px;
    color: var(--wpmc-feedback-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.wpmc-feedback__message {
    max-width: 40ch;
    margin: 0;
    color: var(--wpmc-feedback-ink);
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 680;
    line-height: 1.42;
}

.wpmc-feedback__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 132px;
    margin-top: 24px;
    border: 0;
    border-radius: 999px;
    background: var(--wpmc-feedback-accent);
    color: var(--wpmc-feedback-on-category);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
    padding: 14px 22px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.wpmc-feedback__button::before {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wpmc-feedback-on-category) 18%, transparent);
    content: "\2192";
    font-size: 17px;
    line-height: 1;
}

.wpmc-feedback__button:hover,
.wpmc-feedback__button:focus-visible {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--wpmc-feedback-accent) 32%, transparent);
    transform: translateY(-1px);
}

.wpmc-feedback__button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--wpmc-feedback-accent) 58%, var(--drl-text, #15191a));
    outline-offset: 3px;
}

html[data-theme="dark"] .wpmc-feedback--celebration {
    --wpmc-feedback-on-category: #07150f;
}

.wpmc-feedback__visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
}

.wpmc-feedback__halo {
    position: absolute;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wpmc-feedback-accent) 18%, var(--drl-surface-raised, var(--wpmc-feedback-surface)));
    filter: blur(1px);
}

.wpmc-feedback__visual img {
    position: relative;
    z-index: 2;
    width: 220px;
    max-width: none;
    height: 220px;
    margin: 0 -6px -5px 0;
    object-fit: contain;
}

.wpmc-feedback__brand {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 36px;
    color: var(--drl-text-muted, #5f6667);
    font-family: var(--drl-font-display, Georgia, serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}

.wpmc-feedback__brand-logo {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 50%;
    background: var(--wpmc-feedback-dialogue-accent);
    color: var(--wpmc-feedback-dialogue-on-accent);
}

.wpmc-feedback__brand-logo::before {
    width: 32px;
    height: 32px;
    background: currentColor;
    content: "";
    mask: url("../img/feedback/drl-expand-trace-logo.svg") center / contain no-repeat;
}

.wpmc-feedback--modal {
    width: min(820px, calc(100vw - 32px));
    max-width: none;
    max-height: min(90vh, 720px);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition: opacity 200ms ease, transform 200ms ease, overlay 200ms ease allow-discrete, display 200ms ease allow-discrete;
}

.wpmc-feedback--modal .wpmc-feedback__message {
    font-family: var(--drl-font-display, Georgia, serif);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.22;
}

.wpmc-feedback--modal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wpmc-feedback--modal::backdrop {
    background: rgb(8 12 20 / 68%);
    backdrop-filter: blur(7px);
}

.wpmc-feedback--toast {
    position: fixed;
    z-index: 100020;
    top: max(18px, env(safe-area-inset-top));
    left: 50%;
    width: min(680px, calc(100vw - 28px));
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -20px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.wpmc-feedback--toast.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.wpmc-feedback--toast .wpmc-feedback__card {
    grid-template-columns: minmax(0, 1fr) 104px;
    grid-template-rows: minmax(108px, auto) 34px;
    min-height: 142px;
    border-radius: 18px;
    box-shadow: 0 20px 56px rgb(18 24 40 / 24%);
}

.wpmc-feedback--toast .wpmc-feedback__copy {
    padding: 22px 16px 22px 28px;
}

.wpmc-feedback--toast .wpmc-feedback__message {
    font-size: 15px;
    font-weight: 650;
}

.wpmc-feedback--toast .wpmc-feedback__visual {
    transform: translateX(-18px);
}

.wpmc-feedback--toast .wpmc-feedback__visual img {
    width: 112px;
    height: 112px;
}

.wpmc-feedback--toast .wpmc-feedback__brand {
    gap: 8px;
    padding: 0 28px;
    font-size: 12px;
    transform: translateY(-7px);
}

.wpmc-feedback--toast .wpmc-feedback__brand-logo {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.wpmc-feedback--toast .wpmc-feedback__brand-logo::before {
    width: 21px;
    height: 21px;
}

.wpmc-feedback--toast .wpmc-feedback__halo {
    width: 84px;
    height: 84px;
}

.wpmc-feedback__close {
    position: absolute;
    z-index: 4;
    top: 10px;
    right: 10px;
    display: grid;
    box-sizing: border-box;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    place-items: center;
    border: 0;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--drl-surface-raised, var(--wpmc-feedback-surface)) 76%, transparent);
    padding: 0 !important;
    color: var(--drl-text-muted, #344054);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.wpmc-feedback-noscript {
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid var(--drl-line, #d1d2cc);
    border-left: 5px solid #1677c8;
    background: var(--drl-bg, #f4f3ee);
    color: var(--drl-text, #15191a);
}

.wpmc-feedback-noscript--error {
    border-left-color: #c62949;
}

.wpmc-feedback-noscript p {
    margin: 6px 0 0;
}

@media (max-width: 560px) {
    .wpmc-feedback__card {
        grid-template-columns: minmax(0, 1fr) 104px;
        grid-template-rows: minmax(180px, auto) 44px;
        min-height: 224px;
        border-radius: 20px;
    }

    .wpmc-feedback__copy {
        padding: 26px 4px 24px 24px;
    }

    .wpmc-feedback__message {
        font-size: 17px;
    }

    .wpmc-feedback__visual img {
        width: 132px;
        height: 132px;
        margin-right: -12px;
    }

    .wpmc-feedback__halo {
        width: 86px;
        height: 86px;
    }

    .wpmc-feedback__brand {
        gap: 8px;
        padding: 0 22px;
        font-size: 12px;
    }

    .wpmc-feedback__brand-logo {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .wpmc-feedback__brand-logo::before {
        width: 24px;
        height: 24px;
    }

    .wpmc-feedback--modal .wpmc-feedback__message {
        font-size: 22px;
    }

    .wpmc-feedback--toast .wpmc-feedback__card {
        grid-template-columns: minmax(0, 1fr) 72px;
        grid-template-rows: minmax(96px, auto) 32px;
    }

    .wpmc-feedback--toast .wpmc-feedback__visual img {
        width: 88px;
        height: 88px;
    }

    .wpmc-feedback--toast .wpmc-feedback__visual {
        transform: translateX(-8px);
    }

    .wpmc-feedback--toast .wpmc-feedback__brand {
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpmc-feedback,
    .wpmc-feedback__button {
        transition: none;
    }
}