/* ============================================
   app-banners.css
   ============================================
   Banner styles including product status banner, notification banners,
   and settings-related banners (danger zone, upgrade section, badges).
   ============================================ */

/* ── Product status banner ─────────────────────────────────────── */
.banner-product-status {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.4rem 3rem;
   font-size: var(--wp-text-xs);
   background: var(--color-primary-wash, rgba(93, 202, 165, 0.10));
   border-bottom: var(--border-accent);
   color: var(--color-text-secondary);
}

.banner-product-status__label {
   flex-shrink: 0;
}

.banner-product-status__label strong {
   color: var(--color-primary-light, #5DCAA5);
   font-weight: 500;
}

.banner-product-status__dismiss {
   position: absolute;
   right: 0.5rem;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: inherit;
   cursor: pointer;
   font-size: 1rem;
   line-height: 1;
   padding: 0.15rem 0.35rem;
   opacity: 0.6;
   font-family: system-ui, -apple-system, sans-serif;
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 1.5rem;
   min-height: 1.5rem;
   border-radius: var(--radius-element, 4px);
   transition: opacity 0.15s ease, background-color 0.15s ease;
   z-index: 100;
}

.banner-product-status__dismiss:hover {
   opacity: 1;
   background-color: rgba(0, 0, 0, 0.08);
}

.banner-product-status__dismiss:active {
   background-color: rgba(0, 0, 0, 0.15);
}

.wp-notify-warning {
   background: var(--color-warning-bg);
   color: var(--color-warning-text);
   border-bottom: var(--border-default);
}

/* ── Settings danger zone ──────────────────────────────────────── */
.settings-danger-zone__row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: .75rem;
}

.settings-danger-zone__label {
   margin: 0 0 .2rem 0;
}

.settings-danger-zone__btn {
   flex-shrink: 0;
}

/* ── Settings row right-side control group ─────────────────────── */

/* ── Settings status / availability badges ─────────────────────── */