/* Foundation-inspired alert look, self-contained */
.wso-alerts { margin: 1rem 0; }
.wso-alert {
  position: relative;
  padding: 0.9rem 1rem;
  border: 1px solid;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}
.wso-alert-title { font-weight: 700; margin-bottom: 0.35rem; }
.wso-alert-close {
  position: absolute; top: 0.35rem; right: 0.5rem;
  background: transparent; border: none; font-size: 1.2rem;
  line-height: 1; cursor: pointer; opacity: 0.8;
}
.wso-alert-close:hover { opacity: 1; }
.wso-alert-debug {
  margin-top: 0.75rem; padding: 0.75rem; border-radius: 6px;
  overflow: auto; font-size: 12px; background: rgba(0,0,0,0.05);
}
.wso-alert.is-primary { background: #eef6ff; border-color: #b7d9ff; color: #103a5a; }
.wso-alert.is-success { background: #effaf2; border-color: #bfe7c8; color: #184d2b; }
.wso-alert.is-warning { background: #fff8e6; border-color: #ffe2a6; color: #5a3b00; }
.wso-alert.is-alert   { background: #fff0f0; border-color: #ffc1c1; color: #5a1111; }

/* No Style */
.wso-alert.is-none { background: transparent; border-color: transparent; color: inherit; }

/* Banner wrapper */
.wso-banner { padding: 0; border: none; background: transparent; margin-bottom: 0.75rem; }
.wso-banner img { width: 100%; height: auto; display: block; }
/* Extra safety: banners should never get colored backgrounds */
.wso-banner.is-primary,
.wso-banner.is-success,
.wso-banner.is-warning,
.wso-banner.is-alert,
.wso-banner.is-none { background: transparent; border: none; color: inherit; }