/**
 * iOS-notifications plugin — brand re-skin (extracted 2026-10-08 from
 * woocommerce-overrides.css so lean surfaces — e.g. the ssb-private-events guest
 * page — can load it without the whole WooCommerce override layer).
 * Enqueued by functions.php right after the plugin's notifications.css
 * (handle `brats-ios-notifications-skin`). Uses theme.json preset variables only.
 */

/* ==========================================================================
   iOS-notifications plugin — brand re-skin
   ==========================================================================
   Re-skins the ios-notifications-block plugin (cart bottom-sheet, banner
   toasts, inline alerts) from its default iOS palette to the State Street
   Brats brand. We override the plugin's concrete selectors here rather than
   editing the third-party plugin; this stylesheet is enqueued AFTER
   `ios-notifications-styles` (see the conditional dependency in functions.php)
   so matched specificity wins on source order — no !important needed except
   where the plugin itself uses it.

   Brand constants are hardcoded because the canonical --ssb-* tokens are
   section-scoped (screen.css:4849) and do NOT resolve on this body-level
   overlay. Ink/cream are stable brand constants; tan/red/dark use the global
   --wp--preset--color--* presets with hex fallbacks.
     ink  #0F0F0F / ink-soft #1A1A1A   cream #EFE2C7   cream surface #fbf7f0
   Philosophy: brand chrome (sheet, buttons, neutrals, the iOS-blue accents)
   is fully re-skinned; alert SEMANTICS (success-green / warning-amber /
   error-red) stay legible, warm-tuned, with error mapped to the brand red.
   ========================================================================== */

/* --- Bottom sheet surface & structure --- */
.bottom-sheet {
    background: rgba(251, 247, 240, 0.94); /* warm cream (--surface-form-box) */
    box-shadow: 0 -4px 24px rgba(15, 15, 15, 0.18);
}
.sheet-overlay {
    background: rgba(15, 15, 15, 0.45); /* warm ink scrim */
}
.sheet-handle {
    background: var(--wp--preset--color--primary, #c2a488);
}
.sheet-header {
    border-bottom: 1px solid rgba(201, 168, 119, 0.30);
}
.sheet-actions {
    background: rgba(251, 247, 240, 0.96);
    border-top: 1px solid rgba(201, 168, 119, 0.30);
}
.sheet-title {
    color: #0F0F0F;
}
.sheet-message {
    color: var(--wp--preset--color--dark-default, #303333);
}
.sheet-app-name,
.sheet-time {
    color: var(--wp--preset--color--primary-dark, #a38f79); /* decorative microcopy only */
}
.sheet-details {
    background: #ffffff;
}
.sheet-details p {
    color: var(--wp--preset--color--dark-default, #303333);
}

/* --- Sheet buttons (echo .btn-box--ink / .btn-box--ghost-ink) ---
   Primary maps to brand INK, not tan: white/cream on tan #c2a488 fails
   contrast (~1.9:1); cream on ink is ~14.5:1. */
.sheet-btn-primary {
    background: #0F0F0F;
    color: #EFE2C7;
}
.sheet-btn-primary:hover {
    background: #1A1A1A;
}
.sheet-btn-secondary {
    background: transparent;
    color: #0F0F0F;
    border: 1.5px solid #0F0F0F;
}
.sheet-btn-secondary:hover {
    background: #0F0F0F;
    color: #EFE2C7;
}
.sheet-btn:focus,
.sheet-btn:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent, #d32f2f);
    outline-offset: 2px;
}

/* --- Cart item rows & upsell --- */
.notification-cart-item {
    background: #ffffff;
}
.cart-item-name,
.cart-item-price {
    color: #0F0F0F;
}
.cart-item-quantity {
    color: var(--wp--preset--color--dark-default, #303333); /* qty is load-bearing info */
}
.notification-cart-total {
    border-top: 2px solid rgba(201, 168, 119, 0.50);
    color: #0F0F0F;
}
.upsell-add-btn {
    background: var(--wp--preset--color--accent, #d32f2f); /* "add" = positive accent */
}
.upsell-add-btn:hover {
    background: #A02523;
}
.upsell-add-btn.adding {
    background: #3f7a3f; /* warm-shifted success green */
}
.notification-upsell-item {
    background: #FBF4E4;
    border: 1px solid var(--wp--preset--color--primary, #c2a488);
}
.notification-upsells {
    border-bottom: 1px solid rgba(201, 168, 119, 0.30);
}
.upsells-header {
    color: var(--wp--preset--color--dark-default, #303333); /* section label — load-bearing, keep AA contrast */
}

/* --- Banner notification (top toast) --- */
.banner-content {
    background: rgba(251, 247, 240, 0.92);
}
.banner-notification.active .banner-content {
    box-shadow: 0 4px 20px rgba(15, 15, 15, 0.16);
}
.banner-title {
    color: #0F0F0F;
}
.banner-message {
    color: var(--wp--preset--color--dark-default, #303333);
}
.banner-app-name,
.banner-time {
    color: var(--wp--preset--color--primary-dark, #a38f79);
}
.banner-close {
    background: rgba(15, 15, 15, 0.92);
}
.banner-close:hover {
    background: #0F0F0F;
}
.banner-close:focus,
.banner-close:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent, #d32f2f);
    outline-offset: 2px;
}

/* --- Icon gradients (info → brand ink; error → brand red; success/warning
   stay semantic, warm-tuned). Glyph color unified to cream. --- */
.banner-icon.icon-info,
.sheet-icon.icon-info {
    background: linear-gradient(135deg, #1A1A1A 0%, #0F0F0F 100%);
}
.banner-icon.icon-error,
.sheet-icon.icon-error {
    background: linear-gradient(135deg, #d32f2f 0%, #A02523 100%);
}
.banner-icon.icon-success,
.sheet-icon.icon-success {
    background: linear-gradient(135deg, #4f9a52 0%, #3f7a3f 100%);
}
.banner-icon.icon-warning,
.sheet-icon.icon-warning {
    background: linear-gradient(135deg, #E5A300 0%, #C77F00 100%);
}
.banner-icon,
.sheet-icon {
    color: #EFE2C7;
}

/* --- Inline alerts — semantic tints kept; info de-blued, error left-rule to
   brand red. Success/warning bg+text pairs left as-is (WCAG-AA already). --- */
.alert-inline.alert-info {
    background: #F2ECDF;
    color: #0F0F0F;
    border-left: 4px solid var(--wp--preset--color--primary-dark, #a38f79);
}
.alert-inline.alert-error {
    border-left: 4px solid var(--wp--preset--color--accent, #d32f2f);
}
.alert-inline.alert-success {
    border-left: 4px solid #3f7a3f;
}
.alert-inline.alert-warning {
    border-left: 4px solid #C77F00;
}

/* --- Reduced motion: the plugin animates sheet/banner/alert/spinner with no
   guard. Honor the user's preference. --- */
@media (prefers-reduced-motion: reduce) {
    .bottom-sheet,
    .sheet-overlay,
    .banner-notification,
    .banner-content,
    .alert-inline,
    .notification-icon,
    .sheet-icon,
    .upsell-add-btn.adding {
        animation: none !important;
        transition: none !important;
    }
}