/*
 * ResaCommerce presentation contract.
 *
 * State and message content remain owned by WooCommerce. These styles target
 * WooCommerce's public notice, snackbar and validation surfaces in place.
 */
:where(:root) {
  --resacommerce-shell-accent: var(--wp--preset--color--accent, #243fc5);
  --resacommerce-shell-accent-contrast: #fff;
  --resacommerce-shell-background: #fff;
  --resacommerce-shell-surface: #fff;
  --resacommerce-shell-surface-subtle: #fafafa;
  --resacommerce-shell-text: currentColor;
  --resacommerce-shell-muted: color-mix(in srgb, currentColor 66%, transparent);
  --resacommerce-shell-border: color-mix(in srgb, currentColor 18%, transparent);
  --resacommerce-shell-focus: color-mix(in srgb, var(--resacommerce-shell-accent) 38%, transparent);
  --resacommerce-shell-selected: color-mix(in srgb, var(--resacommerce-shell-accent) 8%, #fff);
  --resacommerce-shell-error: #b42318;
  --resacommerce-shell-error-surface: color-mix(in srgb, var(--resacommerce-shell-error) 7%, #fff);
  --resacommerce-shell-success: #067647;
  --resacommerce-shell-success-surface: color-mix(in srgb, var(--resacommerce-shell-success) 7%, #fff);
  --resacommerce-shell-warning: #b54708;
  --resacommerce-shell-warning-surface: color-mix(in srgb, var(--resacommerce-shell-warning) 7%, #fff);
  --resacommerce-shell-info: #175cd3;
  --resacommerce-shell-info-surface: color-mix(in srgb, var(--resacommerce-shell-info) 7%, #fff);
  --resacommerce-shell-radius-sm: 0.375rem;
  --resacommerce-shell-radius: 0.5rem;
  --resacommerce-shell-radius-lg: 0.75rem;
  --resacommerce-shell-control-height: 3.5rem;
  --resacommerce-shell-header-height: 4.25rem;
  --resacommerce-shell-width: 74rem;
  --resacommerce-shell-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
}

/* Blocks: persistent context banners. */
.resacommerce-shell .wc-block-components-notice-banner {
  align-items: flex-start;
  border: 1px solid var(--resacommerce-shell-border);
  border-radius: var(--resacommerce-shell-radius);
  box-shadow: none;
  box-sizing: border-box;
  color: var(--resacommerce-shell-text);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-block: 0 1rem;
  padding: 0.875rem 1rem;
}

.resacommerce-shell .wc-block-components-notice-banner:is(.is-error, .is-warning, .is-info, .is-success) {
  border-inline-start-width: 3px;
}

.resacommerce-shell .wc-block-components-notice-banner.is-error {
  background: var(--resacommerce-shell-error-surface);
  border-color: color-mix(in srgb, var(--resacommerce-shell-error) 32%, transparent);
}

.resacommerce-shell .wc-block-components-notice-banner.is-warning {
  background: var(--resacommerce-shell-warning-surface);
  border-color: color-mix(in srgb, var(--resacommerce-shell-warning) 32%, transparent);
}

.resacommerce-shell .wc-block-components-notice-banner.is-info {
  background: var(--resacommerce-shell-info-surface);
  border-color: color-mix(in srgb, var(--resacommerce-shell-info) 32%, transparent);
}

.resacommerce-shell .wc-block-components-notice-banner.is-success {
  background: var(--resacommerce-shell-success-surface);
  border-color: color-mix(in srgb, var(--resacommerce-shell-success) 32%, transparent);
}

.resacommerce-shell .wc-block-components-notice-banner__content {
  min-width: 0;
}

.resacommerce-shell .wc-block-components-notice-banner a {
  color: inherit;
  font-weight: 600;
  text-underline-offset: 0.2em;
}

/* Blocks: WooCommerce owns the portal, timing and dismissal behaviour. */
.resacommerce-shell .wc-block-components-snackbar-list {
  inset-block-end: 1rem;
  inset-inline: auto 1rem;
  max-width: min(25rem, calc(100vw - 2rem));
}

.resacommerce-shell .wc-block-components-snackbar {
  background: #171717;
  border: 0;
  border-radius: var(--resacommerce-shell-radius);
  box-shadow: var(--resacommerce-shell-shadow);
  color: #fff;
  font-size: 0.875rem;
}

/* Blocks: field errors remain adjacent to WooCommerce's native controls. */
.resacommerce-shell .wc-block-components-validation-error {
  color: var(--resacommerce-shell-error);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-block-start: 0.375rem;
}

/* Classic/account surfaces use WooCommerce's own notice queue and markup. */
.resacommerce-shell :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
  border: 1px solid var(--resacommerce-shell-border);
  border-inline-start-width: 3px;
  border-radius: var(--resacommerce-shell-radius);
  box-sizing: border-box;
  font-size: 0.875rem;
  line-height: 1.5;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.875rem 1rem;
  width: 100%;
}

.resacommerce-shell .woocommerce-error {
  background: var(--resacommerce-shell-error-surface);
  border-color: color-mix(in srgb, var(--resacommerce-shell-error) 32%, transparent);
  color: color-mix(in srgb, var(--resacommerce-shell-error) 80%, #000);
}

.resacommerce-shell .woocommerce-message {
  background: var(--resacommerce-shell-success-surface);
  border-color: color-mix(in srgb, var(--resacommerce-shell-success) 32%, transparent);
}

.resacommerce-shell .woocommerce-info {
  background: var(--resacommerce-shell-info-surface);
  border-color: color-mix(in srgb, var(--resacommerce-shell-info) 32%, transparent);
}

.resacommerce-shell :is(.wc-block-components-notice-banner, .woocommerce-error, .woocommerce-message, .woocommerce-info) :focus-visible {
  outline: 3px solid var(--resacommerce-shell-focus);
  outline-offset: 3px;
}

@media (max-width: 48rem) {
  :where(.resacommerce-shell) {
    --resacommerce-shell-header-height: 4rem;
  }

  .resacommerce-shell .wc-block-components-snackbar-list {
    inset-inline: 1rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resacommerce-shell .wc-block-components-snackbar {
    animation: none !important;
    transition: none !important;
  }
}