.f12-cf7-doubleoptin-optout-form,
.f12-cf7-doubleoptin-optout-list {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

/* Post-submit notice rendered ABOVE the form. Sits in the same
   max-width column as the form's inner panel so the page doesn't
   look misaligned after the redirect. */
.f12-doi-optout-notice {
    min-width: 350px;
    max-width: 600px;
    margin: 0 auto 20px;
    padding: 16px 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.08);
    border-left: 4px solid;
}

.f12-doi-optout-notice strong {
    display: block;
    font-size: 1.05em;
    margin-bottom: 4px;
}

.f12-doi-optout-notice p {
    margin: 0;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
}

.f12-doi-optout-notice--success {
    background-color: #ecfdf5;
    border-left-color: #10b981;
}

.f12-doi-optout-notice--error {
    background-color: #fef2f2;
    border-left-color: #ef4444;
}

/* "Feature paused" notice — neutral amber so it doesn't read as
   an error (the admin intentionally turned the feature off; visitors
   shouldn't see an angry-red box). */
.f12-doi-optout-notice--disabled {
    background-color: #fffbeb;
    border-left-color: #f59e0b;
}

/* Status badge — colored pill that replaces the dashicon yes/no
   from the legacy template. Far easier to scan than an icon column. */
.f12-doi-optout-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.f12-doi-optout-badge--active {
    background-color: #d1fae5;
    color: #065f46;
}

.f12-doi-optout-badge--cancelled {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Friendlier "no subscriptions" empty state — replaces the
   completely-blank previous behaviour where get_list_by_email()
   returning [] just rendered nothing. */
.f12-doi-optout-empty {
    padding: 24px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

/* Briefly highlight the row that the user just cancelled so the
   cause-and-effect is visually obvious — without it, the table
   silently re-renders with the status badge flipped and nothing
   else changed. */
.f12-doi-optout-row--justdone td {
    background-color: #fef9c3;
    transition: background-color 800ms ease;
}

/* Action button styling — matches the form's submit button so the
   two screens (form + list) feel consistent. */
.f12-doi-optout-cancel,
.f12-doi-optout-cancel:visited {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ef4444;
    background-color: #fff;
    color: #ef4444;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 150ms ease;
    white-space: nowrap;
}

.f12-doi-optout-cancel:hover,
.f12-doi-optout-cancel:focus {
    background-color: #ef4444;
    color: #fff;
}

/* Make the subscription-name column the dominant info — was a
   raw hash before, now a human-readable form title. */
.f12-doi-optout-name {
    font-weight: 600;
}

/* Bulk action bar — sits above the table, right-aligned so it
   doesn't pretend to be a primary action. Visually distinct from
   the per-row Cancel button so users don't accidentally bulk-cancel
   thinking they're acting on a single row. */
.f12-doi-optout-bulk-bar {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 0;
}

.f12-doi-optout-bulk,
.f12-doi-optout-bulk:visited {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background-color: #f3f4f6;
    color: #374151;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 150ms ease;
}

.f12-doi-optout-bulk:hover,
.f12-doi-optout-bulk:focus {
    border-color: #ef4444;
    background-color: #fff;
    color: #ef4444;
}

/* Reactivate button — visually opposite of Cancel: green outline,
   solid green on hover. Tells the user the action is constructive. */
.f12-doi-optout-reactivate,
.f12-doi-optout-reactivate:visited {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #10b981;
    background-color: #fff;
    color: #10b981;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 150ms ease;
    white-space: nowrap;
}

.f12-doi-optout-reactivate:hover,
.f12-doi-optout-reactivate:focus {
    background-color: #10b981;
    color: #fff;
}

/* Native <dialog> confirm modal. Uses the same card aesthetic as
   the form/list (white background, soft shadow, 5px radius). Hidden
   by default — the native `open` attribute drives visibility, so we
   don't need a JS-managed `.is-open` class. */
.f12-doi-optout-dialog {
    max-width: 420px;
    width: calc(100% - 32px);
    padding: 24px;
    border: none;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    color: #1f2937;
    font-family: inherit;
}

/* Native <dialog> default is white-on-white on Chrome — overriding
   with a soft dimmed backdrop that matches the brand-neutral tone
   of the form panel rather than the harsh 50%-black default. */
.f12-doi-optout-dialog::backdrop {
    background-color: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(2px);
}

.f12-doi-optout-dialog__prompt {
    margin: 0 0 20px 0;
    font-size: 1em;
    line-height: 1.5;
    color: #1f2937;
}

.f12-doi-optout-dialog__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.f12-doi-optout-dialog__cancel,
.f12-doi-optout-dialog__confirm {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    background-color: transparent;
}

/* "No / Cancel" — secondary, subdued. */
.f12-doi-optout-dialog__cancel {
    border-color: #d1d5db;
    color: #374151;
}

.f12-doi-optout-dialog__cancel:hover,
.f12-doi-optout-dialog__cancel:focus {
    background-color: #f3f4f6;
}

/* "Yes / Continue" — primary destructive: red because the
   dominant use is "cancel a subscription". Reactivate is a less
   common positive action; sharing the same red here is fine UX
   because the prompt text disambiguates anyway. */
.f12-doi-optout-dialog__confirm {
    border-color: #ef4444;
    background-color: #ef4444;
    color: #fff;
}

.f12-doi-optout-dialog__confirm:hover,
.f12-doi-optout-dialog__confirm:focus {
    background-color: #dc2626;
    border-color: #dc2626;
}

.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner,
.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner {
    min-width:350px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    display: inline-block;
    margin-bottom: 20px;
}

.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner table tr th {
    padding: 15px 10px;
    text-align: left;
    border-bottom: 1px solid #edeaea;
}

.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner table tr td {
    padding: 10px 10px;
    text-align: left;
}

.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner table tr th,
.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner table tr td {
    border-right: 1px solid #edeaea;
    color: #000;
}

.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner table tr th:last-child,
.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner table tr td:last-child {
    border-right: 0;
}

.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner table tr td:nth-child(3) {
    text-align: center;
}

.f12-cf7-doubleoptin-optout-list .f12-cf7-doubleoptin-optout-list--inner table tr td:nth-child(3) .dashicons {
    margin-top: 3px;
}

.f12-cf7-doubleoptin-optout-list > span.hint {
    margin: 0 auto;
    font-size: 12px;
    color: #999;
}

.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form h3 {
    font-size: 16px;
    margin:0;
    display: block;
    font-weight: bold;
    border-bottom: 1px solid #edeaea;
    padding: 15px 20px;
    line-height: 100%;
}

.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form label {
    display: block;
    font-weight: normal;
    padding: 20px 20px 0 20px;
    line-height: 100%;
}

.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form input[type="text"],
.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form input[type="email"] {
    max-width: 100%;
    width: calc(100% - 40px);
}

.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form input[type="text"]:focus,
.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form input[type="text"],
.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form input[type="email"],
.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form input[type="submit"] {
    margin-top: 25px;
    border: 1px solid #bbb;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 15px;
    margin-left: 20px;
    margin-right: 20px;
}

.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form input[type="submit"] {
    transition: all linear 200ms;
    cursor: pointer;
    color:#000;
    margin-bottom: 25px;
}

.f12-cf7-doubleoptin-optout-form .f12-cf7-doubleoptin-optout-form--inner form input[type="submit"]:hover {
    background-color: #000;
    color: #fff;
}