/*
 * Deactivation feedback modal (Plugins screen only).
 * Every selector is prefixed with .wacdmg-df- to avoid conflicts.
 * Logical properties keep the layout correct in RTL.
 * Accent colours follow the admin colour scheme via --wp-admin-theme-color.
 */

.wacdmg-df-modal {
    --wacdmg-df-accent: var(--wp-admin-theme-color, #2271b1);
    --wacdmg-df-accent-soft: #f0f6fc; /* Fallback for browsers without color-mix(). */
    --wacdmg-df-accent-soft: color-mix(in srgb, var(--wacdmg-df-accent) 7%, #fff);
    --wacdmg-df-border: #dcdcde;
    --wacdmg-df-muted: #50575e;
    --wacdmg-df-text: #1d2327;

    position: fixed;
    inset: 0;
    z-index: 100100; /* Above the admin bar (99999) and core modals. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.wacdmg-df-modal[hidden],
.wacdmg-df-detail[hidden] {
    display: none !important;
}

body.wacdmg-df-open {
    overflow: hidden;
}

.wacdmg-df-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 32, 0.55);
    animation: wacdmg-df-fade 0.15s ease-out;
}

/* ------------------------------------------------------------------ */
/* Dialog: fixed header and footer, scrolling body.                   */
/* ------------------------------------------------------------------ */

.wacdmg-df-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    background: #fff;
    color: var(--wacdmg-df-text);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    animation: wacdmg-df-pop 0.18s ease-out;
}

.wacdmg-df-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px 16px;
    border-block-end: 1px solid var(--wacdmg-df-border);
}

.wacdmg-df-icon.dashicons {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wacdmg-df-accent-soft);
    color: var(--wacdmg-df-accent);
    font-size: 20px;
    line-height: 36px;
    text-align: center;
}

.wacdmg-df-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.wacdmg-df-title {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wacdmg-df-text);
}

.wacdmg-df-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--wacdmg-df-muted);
}

.wacdmg-df-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-block-start: -4px;
    margin-inline-end: -8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--wacdmg-df-muted);
    cursor: pointer;
}

.wacdmg-df-close:hover {
    background: #f0f0f1;
    color: var(--wacdmg-df-text);
}

.wacdmg-df-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.wacdmg-df-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 24px;
}

/* ------------------------------------------------------------------ */
/* Reasons as selectable cards.                                        */
/* ------------------------------------------------------------------ */

.wacdmg-df-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.wacdmg-df-reason {
    border: 1px solid var(--wacdmg-df-border);
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.wacdmg-df-reason:hover {
    border-color: #8c8f94;
}

.wacdmg-df-reason.is-selected {
    border-color: var(--wacdmg-df-accent);
    background: var(--wacdmg-df-accent-soft);
    box-shadow: 0 0 0 1px var(--wacdmg-df-accent);
}

.wacdmg-df-reason-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    line-height: 1.4;
}

.wacdmg-df-reason-label input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
}

.wacdmg-df-reason.is-selected .wacdmg-df-reason-label {
    font-weight: 600;
}

/* Detail field inside the selected card: visible label, roomy field, focus glow, counter. */
.wacdmg-df-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 12px 12px;
    padding-inline-start: 38px; /* Aligns with the label text, past the radio. */
}

.wacdmg-df-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--wacdmg-df-muted);
}

.wacdmg-df-modal .wacdmg-df-field {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 12px;
    min-height: 38px;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    background: #fff;
    color: var(--wacdmg-df-text);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.wacdmg-df-modal textarea.wacdmg-df-field {
    min-height: 76px;
    resize: vertical;
}

.wacdmg-df-modal .wacdmg-df-field::placeholder {
    color: #8c8f94;
    opacity: 1;
}

.wacdmg-df-modal .wacdmg-df-field:hover {
    border-color: #8c8f94;
}

.wacdmg-df-modal .wacdmg-df-field:focus {
    border-color: var(--wacdmg-df-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wacdmg-df-accent) 18%, transparent);
}

.wacdmg-df-count {
    align-self: flex-end;
    font-size: 11px;
    color: #8c8f94;
    font-variant-numeric: tabular-nums;
}

.wacdmg-df-count.is-near-limit {
    color: #b32d2e;
}

/* ------------------------------------------------------------------ */
/* Opt-in.                                                             */
/* ------------------------------------------------------------------ */

.wacdmg-df-consent {
    margin-block-start: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f6f7f7;
    color: var(--wacdmg-df-muted);
}

.wacdmg-df-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.5;
}

.wacdmg-df-consent input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 2px 0 0;
}

/* ------------------------------------------------------------------ */
/* Footer.                                                             */
/* ------------------------------------------------------------------ */

.wacdmg-df-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-block-start: 1px solid var(--wacdmg-df-border);
    background: #f6f7f7;
}

.wacdmg-df-footer .button {
    min-height: 36px;
    padding: 0 14px;
    line-height: 34px;
}

.wacdmg-df-status {
    display: inline-flex;
    align-items: center;
    margin-inline-start: auto;
    color: var(--wacdmg-df-muted);
}

.wacdmg-df-status .spinner {
    float: none;
    margin: 0;
    margin-inline-end: 6px;
}

.wacdmg-df-status .spinner:not(.is-active) {
    display: none;
}

/* Visible focus for keyboard users, matching the WordPress admin focus ring. */
.wacdmg-df-dialog :focus-visible {
    outline: 2px solid var(--wacdmg-df-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/*
 * Radios: no focus ring on the radio itself (WordPress adds a thick double ring).
 * Keyboard focus is shown on the whole card instead (.has-focus is set by the script).
 */
.wacdmg-df-reason input[type="radio"]:focus,
.wacdmg-df-reason input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: none;
}

.wacdmg-df-reason.has-focus {
    outline: 2px solid var(--wacdmg-df-accent);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Motion.                                                             */
/* ------------------------------------------------------------------ */

@keyframes wacdmg-df-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wacdmg-df-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wacdmg-df-backdrop,
    .wacdmg-df-dialog {
        animation: none;
    }

    .wacdmg-df-reason {
        transition: none;
    }
}

/* ------------------------------------------------------------------ */
/* Small screens: near full width with 16px side margins.             */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
    .wacdmg-df-header {
        padding: 16px;
    }

    .wacdmg-df-icon.dashicons {
        display: none;
    }

    .wacdmg-df-body {
        padding: 12px 16px;
    }

    .wacdmg-df-footer {
        padding: 12px 16px;
    }

    .wacdmg-df-footer .button {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }

    .wacdmg-df-footer .wacdmg-df-submit {
        order: -1; /* Primary action first on small screens. */
    }

    .wacdmg-df-status {
        flex: 1 1 100%;
        justify-content: center;
        margin-inline-start: 0;
    }

    .wacdmg-df-status:empty,
    .wacdmg-df-status:not(:has(.is-active)) {
        display: none;
    }
}