# subscription/2.0.0/assets/css/cancellation.css

Subscriptions for WooCommerce with Stripe Recurring Payments, version 2.0.0. 401 lines.

- Page: https://pluginprobe.com/plugins/subscription/2.0.0/code/assets/css/cancellation.css
- Raw: https://pluginprobe.com/plugins/subscription/2.0.0/raw/assets/css/cancellation.css
- Modified: 2026-09-14T12:17:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/subscription/2.0.0/code/assets/css/cancellation.css#L10-L20`.

```css
.subscrpt-pending-cancel-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px dashed #fca5a5;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffafa 0%, #fef2f2 100%);
  box-shadow: 0 1px 2px rgba(120, 0, 0, 0.06);
  color: #3f3f46;
  font-size: 0.95em;
  line-height: 1.5;
}

.subscrpt-pending-cancel-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
}

.subscrpt-pending-cancel-notice__body {
  flex: 1 1 auto;
  min-width: 0;
}

.subscrpt-pending-cancel-notice__text {
  margin: 0;
}

.subscrpt-pending-cancel-notice__text strong {
  color: #18181b;
}

/* ==========================================================================
   Cancellation feedback modal
   All rules are scoped under .subscrpt-feedback-modal and reset the properties
   themes commonly set (buttons, inputs, box-sizing), so the modal renders
   consistently across themes without leaking styles out.
   ========================================================================== */
.subscrpt-feedback-modal {
  /* Theming tokens — override any of these on `.subscrpt-feedback-modal` from a
     theme to recolor the modal. Brand tokens mirror admin-components (whose
     stylesheet is not loaded on the frontend). Structural overrides can also
     target the BEM classes directly (e.g. .subscrpt-feedback-modal__confirm). */
  --subscrpt-brand: #ff4d00;
  --subscrpt-brand-dark: #d93f00;
  --subscrpt-brand-light: #fff1eb;
  --subscrpt-brand-ring: rgba(255, 77, 0, 0.2);
  --subscrpt-cfm-on-brand: #ffffff;

  --subscrpt-cfm-surface: #ffffff;
  --subscrpt-cfm-overlay: rgba(17, 24, 39, 0.6);
  --subscrpt-cfm-title: #18181b;
  --subscrpt-cfm-text: #3f3f46;
  --subscrpt-cfm-muted: #52525b;
  --subscrpt-cfm-subtle: #a1a1aa;
  --subscrpt-cfm-border: #e4e4e7;
  --subscrpt-cfm-border-strong: #d4d4d8;
  --subscrpt-cfm-hover-bg: #fafafa;
  --subscrpt-cfm-hover-bg-strong: #f4f4f5;

  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.subscrpt-feedback-modal *,
.subscrpt-feedback-modal *::before,
.subscrpt-feedback-modal *::after {
  box-sizing: border-box;
}

.subscrpt-feedback-modal[hidden] {
  display: none !important;
}

.subscrpt-feedback-modal__overlay {
  position: absolute;
  inset: 0;
  background: var(--subscrpt-cfm-overlay);
  animation: subscrpt-feedback-fade 0.18s ease-out;
}

.subscrpt-feedback-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--subscrpt-cfm-surface);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.12);
  color: var(--subscrpt-cfm-text);
  animation: subscrpt-feedback-in 0.18s ease-out;
}

.subscrpt-feedback-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 0;
}

.subscrpt-feedback-modal__title {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--subscrpt-cfm-title);
}

.subscrpt-feedback-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: -4px -6px 0 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--subscrpt-cfm-subtle);
  cursor: pointer;
  line-height: 0;
  transition:
    color 0.12s,
    background 0.12s;
}

.subscrpt-feedback-modal__close:hover {
  color: var(--subscrpt-cfm-text);
  background: var(--subscrpt-cfm-hover-bg-strong);
}

.subscrpt-feedback-modal__body {
  padding: 12px 24px 4px;
  overflow-y: auto;
}

.subscrpt-feedback-modal__intro {
  margin: 0 0 16px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--subscrpt-cfm-muted);
}

.subscrpt-feedback-modal__reasons {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.subscrpt-feedback-modal__reason {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.subscrpt-feedback-modal__reason-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--subscrpt-cfm-border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--subscrpt-cfm-text);
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}

.subscrpt-feedback-modal__reason-label:hover {
  border-color: var(--subscrpt-cfm-border-strong);
  background: var(--subscrpt-cfm-hover-bg);
}

.subscrpt-feedback-modal__reason-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.subscrpt-feedback-modal__radio {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--subscrpt-brand);
  outline: none;
  box-shadow: none;
}

/* Suppress the native/theme focus box on the radio itself (shows as a square
   around the round control); the focus ring is moved to the row below. */
.subscrpt-feedback-modal__radio:focus,
.subscrpt-feedback-modal__radio:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.subscrpt-feedback-modal__reason:has(.subscrpt-feedback-modal__radio:focus-visible)
  .subscrpt-feedback-modal__reason-label {
  border-color: var(--subscrpt-brand);
  box-shadow: 0 0 0 3px var(--subscrpt-brand-ring);
}

/* Highlight the whole row when its radio is selected (progressive enhancement;
   falls back to the native radio dot where :has() is unsupported). */
.subscrpt-feedback-modal__reason:has(.subscrpt-feedback-modal__radio:checked) .subscrpt-feedback-modal__reason-label {
  border-color: var(--subscrpt-brand);
  background: var(--subscrpt-brand-light);
}

.subscrpt-feedback-modal__comment {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--subscrpt-cfm-border-strong);
  border-radius: 10px;
  background: var(--subscrpt-cfm-surface);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--subscrpt-cfm-text);
  resize: vertical;
  box-shadow: none;
}

.subscrpt-feedback-modal__comment:focus {
  outline: none;
  border-color: var(--subscrpt-brand);
  box-shadow: 0 0 0 3px var(--subscrpt-brand-ring);
}

.subscrpt-feedback-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 24px 20px;
}

.subscrpt-feedback-modal__btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s,
    box-shadow 0.12s;
}

/* Staying is the button, leaving is a link. The offer step means the opposite
   thing by "keep" and "confirm" - declining an offer is the leaving action
   there - so it carries its own pair rather than reusing these. */
.subscrpt-feedback-modal__keep,
.subscrpt-feedback-modal__offer-claim {
  background: var(--subscrpt-brand);
  color: var(--subscrpt-cfm-on-brand);
}

.subscrpt-feedback-modal__keep:hover,
.subscrpt-feedback-modal__offer-claim:hover {
  background: var(--subscrpt-brand-dark);
  color: var(--subscrpt-cfm-on-brand);
}

.subscrpt-feedback-modal__confirm,
.subscrpt-feedback-modal__offer-decline {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--subscrpt-cfm-subtle);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.subscrpt-feedback-modal__confirm:hover,
.subscrpt-feedback-modal__offer-decline:hover {
  background: none;
  color: var(--subscrpt-cfm-text);
}

.subscrpt-feedback-modal__confirm[disabled],
.subscrpt-feedback-modal__offer-claim[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

@keyframes subscrpt-feedback-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes subscrpt-feedback-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscrpt-feedback-modal__overlay,
  .subscrpt-feedback-modal__dialog {
    animation: none;
  }
}

@media (max-width: 480px) {
  .subscrpt-feedback-modal__footer {
    flex-direction: column-reverse;
  }

  .subscrpt-feedback-modal__btn {
    width: 100%;
  }

  /* The link keeps its size when the row stacks - a full-width underline reads
     as a second button, which is what this change exists to avoid. */
  .subscrpt-feedback-modal__confirm,
  .subscrpt-feedback-modal__offer-decline {
    width: auto;
    align-self: center;
  }
}

/* The issued discount code, shown in place of the offer copy once claimed. */
.subscrpt-feedback-modal__offer-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px dashed #d0d3d7;
  border-radius: 6px;
  background: #f6f7f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  color: #1d2327;
}

/* The `hidden` attribute is only a user-agent `display: none`, so any class
   that sets `display` beats it - and both of these do. Say it again with the
   weight the attribute cannot bring on its own, or the step being swapped out
   stays on screen underneath the one being swapped in. */
.subscrpt-feedback-modal__body[hidden],
.subscrpt-feedback-modal__footer[hidden] {
  display: none !important;
}

```