.s3-wpdiscuz #wpdcom {
    --wpd-primary: var(--e-global-color-primary, #0054CD);
    --wpd-secondary: var(--e-global-color-secondary, #01214E);
    --wpd-accent: var(--e-global-color-accent, #00E9A5);
    --wpd-light: var(--e-global-color-3b317d9, #F0F4F7);
    --wpd-soft: var(--e-global-color-8210c03, #E6EEFA);
    --wpd-border: var(--Blue_on_dark, #84B6FF);
    --wpd-text: #1C1C1C;
    --wpd-muted: #6D6C6C;

    color: var(--wpd-text);
    font-family: "Proxima Nova", sans-serif;
}

.s3-wpdiscuz #wpdcom *,
.s3-wpdiscuz #wpdcom *::before,
.s3-wpdiscuz #wpdcom *::after {
    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   2. Bazowa typografia komentarzy
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom,
.s3-wpdiscuz #wpdcom .wpd-comment-text,
.s3-wpdiscuz #wpdcom .wpd-comment-text p,
.s3-wpdiscuz #wpdcom .ql-editor {
    color: var(--wpd-text) !important;
    font-family: "Proxima Nova", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.625 !important;
}

.s3-wpdiscuz #wpdcom .wpd-comment-text p {
    margin: 0 0 1rem !important;
}

.s3-wpdiscuz #wpdcom .wpd-comment-text p:last-child {
    margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   3. Nagłówek formularza: „Subskrybuj” oraz status logowania
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom .wpd-sbs-toggle {
    color: var(--wpd-primary) !important;
    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 18px !important;
    text-transform: uppercase !important;
}

.s3-wpdiscuz #wpdcom .wpd-sbs-toggle:hover,
.s3-wpdiscuz #wpdcom .wpd-sbs-toggle:focus-visible {
    color: var(--wpd-accent) !important;
}

.s3-wpdiscuz #wpdcom .wpd-login,
.s3-wpdiscuz #wpdcom .wpd-login a {
    color: var(--wpd-muted) !important;
    font-family: "Proxima Nova", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
}

.s3-wpdiscuz #wpdcom .wpd-login a {
    color: var(--wpd-primary) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

.s3-wpdiscuz #wpdcom .wpd-login a:hover,
.s3-wpdiscuz #wpdcom .wpd-login a:focus-visible {
    color: var(--wpd-accent) !important;
}


/* --------------------------------------------------------------------------
   4. Edytor komentarza
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom .ql-container.ql-snow {
    border: 1px solid var(--wpd-border) !important;
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}

.s3-wpdiscuz #wpdcom .ql-editor {
    min-height: 150px !important;
    padding: 16px !important;
}

.s3-wpdiscuz #wpdcom .ql-editor.ql-blank::before {
    top: 16px !important;
    right: 16px !important;
    left: 16px !important;

    color: var(--wpd-muted) !important;
    font-family: "Proxima Nova", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    line-height: 1.625 !important;
}

.s3-wpdiscuz #wpdcom .ql-toolbar.ql-snow {
    border: 1px solid var(--wpd-border) !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background-color: var(--wpd-soft) !important;
}

.s3-wpdiscuz #wpdcom .ql-toolbar.ql-snow button {
    border-radius: 0 !important;
    color: var(--wpd-primary) !important;
}

.s3-wpdiscuz #wpdcom .ql-toolbar.ql-snow button:hover,
.s3-wpdiscuz #wpdcom .ql-toolbar.ql-snow button.ql-active,
.s3-wpdiscuz #wpdcom .ql-toolbar.ql-snow button:focus-visible {
    background-color: var(--wpd-accent) !important;
    color: var(--wpd-primary) !important;
    outline: none !important;
}

.s3-wpdiscuz #wpdcom .ql-toolbar .ql-stroke {
    stroke: currentColor !important;
}

.s3-wpdiscuz #wpdcom .ql-toolbar .ql-fill {
    fill: currentColor !important;
}


/* --------------------------------------------------------------------------
   5. Przycisk publikacji
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom input.wc_comm_submit.wpd-prim-button {
    min-width: 205px !important;
    height: 45px !important;
    padding: 0 16px !important;

    border: 1px solid var(--wpd-secondary) !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--wpd-primary) !important;

    color: var(--wpd-light) !important;
    font-family: "Proxima Nova", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    line-height: 43px !important;
    text-transform: none !important;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease !important;
}

.s3-wpdiscuz #wpdcom input.wc_comm_submit.wpd-prim-button:hover,
.s3-wpdiscuz #wpdcom input.wc_comm_submit.wpd-prim-button:focus-visible {
    border-color: var(--wpd-primary) !important;
    background-color: var(--wpd-accent) !important;
    color: var(--wpd-primary) !important;
}

.s3-wpdiscuz #wpdcom input.wc_comm_submit.wpd-prim-button:focus-visible {
    outline: 2px solid var(--wpd-accent) !important;
    outline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
   6. Nagłówek listy komentarzy
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom .wpd-thread-head {
    border-bottom-color: var(--wpd-border) !important;
}

.s3-wpdiscuz #wpdcom .wpd-thread-info {
    padding-left: 12px !important;

    border-left: 4px solid var(--wpd-primary) !important;
    color: var(--wpd-primary) !important;

    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

.s3-wpdiscuz #wpdcom .wpdiscuz-sort-button {
    border-bottom: 1px solid transparent !important;
    color: var(--wpd-primary) !important;

    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 18px !important;
    text-transform: uppercase !important;
}

.s3-wpdiscuz #wpdcom .wpdiscuz-sort-button:hover,
.s3-wpdiscuz #wpdcom .wpdiscuz-sort-button-active {
    border-bottom-color: var(--wpd-accent) !important;
    color: var(--wpd-accent) !important;
}


/* --------------------------------------------------------------------------
   7. Autor, data, odpowiedź
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom .wpd-comment-author,
.s3-wpdiscuz #wpdcom .wpd-comment-author a {
    color: var(--wpd-primary) !important;

    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.s3-wpdiscuz #wpdcom .wpd-comment-author a:hover,
.s3-wpdiscuz #wpdcom .wpd-comment-author a:focus-visible {
    color: var(--wpd-accent) !important;
}

.s3-wpdiscuz #wpdcom .wpd-comment-date,
.s3-wpdiscuz #wpdcom .wpd-reply-to {
    color: var(--wpd-muted) !important;
    font-family: "Proxima Nova", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
}

.s3-wpdiscuz #wpdcom .wpd-reply-to a {
    color: var(--wpd-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}


/* --------------------------------------------------------------------------
   8. Separator komentarza oraz odpowiedzi
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom .wpd-comment {
    border-bottom-color: var(--wpd-border) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.s3-wpdiscuz #wpdcom .wpd-comment.wpd-reply {
    border-left-color: var(--wpd-border) !important;
}

.s3-wpdiscuz #wpdcom .wpd-comment-label {
    border: 1px solid var(--wpd-primary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--wpd-primary) !important;

    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}


/* --------------------------------------------------------------------------
   9. Głosowanie i odpowiedź
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom .wpd-vote-up,
.s3-wpdiscuz #wpdcom .wpd-vote-down,
.s3-wpdiscuz #wpdcom .wpd-vote-result {
    color: var(--wpd-primary) !important;
}

.s3-wpdiscuz #wpdcom .wpd-vote-up:hover,
.s3-wpdiscuz #wpdcom .wpd-vote-down:hover {
    color: var(--wpd-accent) !important;
}

.s3-wpdiscuz #wpdcom .wpd-vote-up svg,
.s3-wpdiscuz #wpdcom .wpd-vote-down svg {
    fill: currentColor !important;
}

.s3-wpdiscuz #wpdcom .wpd-reply-button {
    border-bottom: 1px solid transparent !important;
    color: var(--wpd-primary) !important;

    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 18px !important;
    text-transform: uppercase !important;
}

.s3-wpdiscuz #wpdcom .wpd-reply-button:hover {
    border-bottom-color: var(--wpd-accent) !important;
    color: var(--wpd-accent) !important;
}

.s3-wpdiscuz #wpdcom .wpd-reply-button svg {
    fill: currentColor !important;
}


/* --------------------------------------------------------------------------
   10. Pole subskrypcji i komunikaty
   -------------------------------------------------------------------------- */

.s3-wpdiscuz #wpdcom .wpdiscuz-subscribe-bar {
    border: 1px solid var(--wpd-border) !important;
    border-radius: 0 !important;
    background-color: var(--wpd-soft) !important;
}

.s3-wpdiscuz #wpdcom .wpdiscuz-subscribe-form-intro {
    color: var(--wpd-primary) !important;

    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.s3-wpdiscuz #wpdcom .wpdiscuz_select {
    border: 1px solid var(--wpd-border) !important;
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
    color: var(--wpd-text) !important;

    font-family: "Proxima Nova", sans-serif !important;
    font-size: 14px !important;
}

.s3-wpdiscuz #wpdcom #wpdiscuz_subscription_button {
    border: 1px solid var(--wpd-secondary) !important;
    border-radius: 0 !important;
    background-color: var(--wpd-primary) !important;
    color: var(--wpd-light) !important;
}

.s3-wpdiscuz #wpdcom #wpdiscuz_subscription_button:hover {
    border-color: var(--wpd-primary) !important;
    background-color: var(--wpd-accent) !important;
    color: var(--wpd-primary) !important;
}


/* --------------------------------------------------------------------------
   11. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .s3-wpdiscuz #wpdcom input.wc_comm_submit.wpd-prim-button {
        width: 100% !important;
    }

    .s3-wpdiscuz #wpdcom .wpd-comment.wpd-reply {
        margin-left: 16px !important;
        padding-left: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .s3-wpdiscuz #wpdcom *,
    .s3-wpdiscuz #wpdcom *::before,
    .s3-wpdiscuz #wpdcom *::after {
        transition: none !important;
    }
}

.s3-wpdiscuz #wpdcom :focus-visible {
    outline: 2px solid var(--e-global-color-accent, #00E9A5) !important;
    outline-offset: 3px !important;
}

/* ==========================================================================
   Sektor 3.0 — wpDiscuz / Quill
   Naprawa: edytor komentarza nie może przykrywać toolbara.
   ========================================================================== */

/*
 * Wrapper edytora ma tworzyć zwykły pionowy przepływ:
 * [ pole wpisywania ]
 * [ toolbar ]
 */
.s3-wpdiscuz #wpdcom .wpdiscuz-textarea-wrap,
.s3-wpdiscuz #wpdcom [id^="wpd-editor-wraper-"] {
    position: relative !important;
    z-index: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

/*
 * Pole tekstowe pozostaje pierwsze w kolejności wizualnej,
 * ale nie może wyjść poza własne pudełko ani przykrywać sąsiada.
 */
.s3-wpdiscuz #wpdcom .ql-container.ql-snow {
    position: relative !important;
    z-index: 1 !important;
    order: 1 !important;

    width: 100% !important;
    min-height: 150px !important;
    overflow: hidden !important;

    border: 1px solid var(--wpd-border, #84B6FF) !important;
    border-radius: 0 !important;
}

/*
 * Toolbar jest bezpośrednio za kontenerem edytora w HTML,
 * więc dostaje drugi wiersz i wyższy stacking context.
 */
.s3-wpdiscuz #wpdcom .ql-toolbar.ql-snow {
    position: relative !important;
    z-index: 2 !important;
    order: 2 !important;

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    min-height: 45px !important;
    margin: 0 !important;
    overflow: visible !important;

    border: 1px solid var(--wpd-border, #84B6FF) !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background-color: var(--wpd-soft, #E6EEFA) !important;
}

/*
 * Edytor Quill powinien wypełnić wyłącznie wysokość kontenera,
 * a nie być pozycjonowany nad toolbarem.
 */
.s3-wpdiscuz #wpdcom .ql-editor {
    position: relative !important;
    z-index: 1 !important;

    min-height: 150px !important;
    max-height: none !important;
    overflow-y: auto !important;
}

/*
 * Ukryty textarea wpDiscuz nie może przyjąć kliknięć.
 * WpDiscuz synchronizuje jego wartość z Quill JS-em, więc
 * pointer-events nie zakłócają działania formularza.
 */
.s3-wpdiscuz #wpdcom textarea.wc_comment[style*="display: none"] {
    pointer-events: none !important;
}

/*
 * Tooltip/link/editor pomocniczy Quill ma być nad tekstem,
 * ale nie może blokować toolbara, kiedy jest ukryty.
 */
.s3-wpdiscuz #wpdcom .ql-tooltip.ql-hidden {
    display: none !important;
}

.s3-wpdiscuz #wpdcom .ql-tooltip:not(.ql-hidden) {
    z-index: 10 !important;
}

/* ==========================================================================
   Sektor 3.0 — wpDiscuz / Lity
   Panel „Aktywność / Subskrypcje / Obserwacje”
   Scope: tylko #wpdUserContentInfo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Overlay Lity
   -------------------------------------------------------------------------- */

.lity:has(#wpdUserContentInfo) {
    background-color: rgba(1, 33, 78, 0.90) !important;
}

.lity-container:has(#wpdUserContentInfo) {
    padding: 24px !important;
}

.lity-content:has(#wpdUserContentInfo) {
    position: relative !important;

    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: 0 18px 42px rgba(1, 33, 78, 0.20) !important;
}


/* --------------------------------------------------------------------------
   2. Główny panel
   Nadpisuje inline:
   background: rgb(253, 253, 246);
   padding: 20px;
   border-radius: 6px;
   -------------------------------------------------------------------------- */

#wpdUserContentInfo {
    width: 100% !important;
    max-width: none !important;
    max-height: min(760px, calc(100vh - 48px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    border: 1px solid var(--wpd-border, #84B6FF) !important;
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;

    color: var(--wpd-text, #1C1C1C) !important;
    font-family: "Proxima Nova", sans-serif !important;
}


/* --------------------------------------------------------------------------
   3. Zamknięcie modala
   Lity wstawia button poza #wpdUserContentInfo, więc celujemy przez
   bezpośredniego rodzica .lity-content.
   -------------------------------------------------------------------------- */

.lity-content:has(#wpdUserContentInfo) .lity-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;

    color: var(--wpd-primary, #0054CD) !important;
    font-family: Arial, sans-serif !important;
    font-size: 38px !important;
    font-weight: 200 !important;
    line-height: 1 !important;

    cursor: pointer !important;
    opacity: 1 !important;

    transition:
        color 180ms ease,
        transform 180ms ease !important;
}

.lity-content:has(#wpdUserContentInfo) .lity-close:hover,
.lity-content:has(#wpdUserContentInfo) .lity-close:focus-visible {
    color: var(--wpd-secondary, #01214E) !important;
    transform: rotate(90deg) !important;
}

.lity-content:has(#wpdUserContentInfo) .lity-close:focus-visible {
    outline: 2px solid var(--wpd-accent, #00E9A5) !important;
    outline-offset: 3px !important;
}


/* --------------------------------------------------------------------------
   4. Układ: menu po lewej, zawartość po prawej
   -------------------------------------------------------------------------- */

#wpdUserContentInfo .wpd-wrapper {
    display: grid !important;
    grid-template-columns: minmax(190px, 28%) minmax(0, 1fr) !important;
    min-height: 330px !important;
}


/* --------------------------------------------------------------------------
   5. Lewa nawigacja
   -------------------------------------------------------------------------- */

#wpdUserContentInfo .wpd-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;

    margin: 0 !important;
    padding: 24px 0 !important;
    list-style: none !important;

    border-right: 1px solid var(--wpd-border, #84B6FF) !important;
    background-color: var(--wpd-soft, #E6EEFA) !important;
}

#wpdUserContentInfo .wpd-list-item {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 24px !important;

    border: 0 !important;
    border-left: 4px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;

    color: var(--wpd-primary, #0054CD) !important;
    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 18px !important;
    text-transform: uppercase !important;

    cursor: pointer !important;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease !important;
}

/*
 * Font Awesome jest wyłączony: ikonki nie mogą pozostawiać pustego miejsca
 * ani wyświetlać niedziałających znaków.
 */
#wpdUserContentInfo .wpd-list-item > i {
    display: none !important;
}

#wpdUserContentInfo .wpd-list-item:hover,
#wpdUserContentInfo .wpd-list-item:focus-visible {
    border-left-color: var(--wpd-accent, #00E9A5) !important;
    background-color: rgba(255, 255, 255, 0.55) !important;
    color: var(--wpd-primary, #0054CD) !important;
    outline: none !important;
}

#wpdUserContentInfo .wpd-list-item.wpd-active {
    border-left-color: var(--wpd-primary, #0054CD) !important;
    background-color: #FFFFFF !important;
    color: var(--wpd-primary, #0054CD) !important;
}

#wpdUserContentInfo .wpd-list-item:focus-visible {
    outline: 2px solid var(--wpd-accent, #00E9A5) !important;
    outline-offset: -4px !important;
}


/* --------------------------------------------------------------------------
   6. Główna treść
   -------------------------------------------------------------------------- */

#wpdUserContentInfo .wpd-content {
    min-width: 0 !important;
    padding: 72px 40px 40px !important;
    background-color: #FFFFFF !important;
}

#wpdUserContentInfo .wpd-content-item {
    display: none !important;
}

#wpdUserContentInfo .wpd-content-item.wpd-active {
    display: block !important;
}

#wpdUserContentInfo .wpd-item {
    display: flex !important;
    align-items: center !important;
    min-height: 140px !important;

    margin: 0 !important;
    padding: 24px !important;

    border: 1px solid var(--wpd-border, #84B6FF) !important;
    border-left: 4px solid var(--wpd-primary, #0054CD) !important;
    border-radius: 0 !important;
    background-color: #FFFFFF !important;

    color: var(--wpd-muted, #6D6C6C) !important;
    font-family: "Proxima Nova", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}


/* --------------------------------------------------------------------------
   7. Link zarządzania subskrypcjami e-mail
   -------------------------------------------------------------------------- */

#wpdUserContentInfo .wpd-user-email-delete-links-wrap {
    grid-column: 2 !important;

    margin: 0 !important;
    padding: 0 40px 40px !important;

    background-color: #FFFFFF !important;
}

#wpdUserContentInfo .wpd-user-email-delete-links {
    display: inline-block !important;
    padding-bottom: 2px !important;

    border-bottom: 1px solid var(--wpd-primary, #0054CD) !important;
    color: var(--wpd-primary, #0054CD) !important;

    font-family: "Archivo Narrow", "Arial Narrow", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 18px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;

    transition:
        border-color 180ms ease,
        color 180ms ease !important;
}

#wpdUserContentInfo .wpd-user-email-delete-links:hover,
#wpdUserContentInfo .wpd-user-email-delete-links:focus-visible {
    border-bottom-color: var(--wpd-accent, #00E9A5) !important;
    color: var(--wpd-accent, #00E9A5) !important;
    outline: none !important;
}

#wpdUserContentInfo .wpd-bulk-desc {
    margin-top: 8px !important;

    color: var(--wpd-muted, #6D6C6C) !important;
    font-family: "Proxima Nova", sans-serif !important;
    font-size: 14px !important;
    line-height: 17px !important;
}


/* --------------------------------------------------------------------------
   8. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .lity-container:has(#wpdUserContentInfo) {
        padding: 16px !important;
    }

    #wpdUserContentInfo {
        max-height: calc(100vh - 32px) !important;
    }

    #wpdUserContentInfo .wpd-wrapper {
        display: block !important;
        min-height: 0 !important;
    }

    #wpdUserContentInfo .wpd-list {
        flex-direction: row !important;
        flex-wrap: wrap !important;

        padding: 12px !important;

        border-right: 0 !important;
        border-bottom: 1px solid var(--wpd-border, #84B6FF) !important;
    }

    #wpdUserContentInfo .wpd-list-item {
        flex: 1 1 auto !important;
        min-height: 42px !important;
        padding: 0 12px !important;

        border-left: 0 !important;
        border-bottom: 2px solid transparent !important;
        font-size: 12px !important;
    }

    #wpdUserContentInfo .wpd-list-item:hover,
    #wpdUserContentInfo .wpd-list-item.wpd-active {
        border-bottom-color: var(--wpd-primary, #0054CD) !important;
        background-color: transparent !important;
    }

    #wpdUserContentInfo .wpd-content {
        padding: 72px 20px 24px !important;
    }

    #wpdUserContentInfo .wpd-user-email-delete-links-wrap {
        padding: 0 20px 24px !important;
    }

    #wpdUserContentInfo .wpd-item {
        min-height: 110px !important;
        padding: 20px !important;
    }

    .lity-content:has(#wpdUserContentInfo) .lity-close {
        top: 10px !important;
        right: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lity-content:has(#wpdUserContentInfo) .lity-close,
    #wpdUserContentInfo .wpd-list-item,
    #wpdUserContentInfo .wpd-user-email-delete-links {
        transition: none !important;
    }

    .lity-content:has(#wpdUserContentInfo) .lity-close:hover {
        transform: none !important;
    }
}