/**
 * Alert component
 *
 * Flat notice block with a 2px accent edge on the left.
 *
 * Usage:
 *   <div class="alert alert--success" role="status">
 *     <p class="alert__title">Added to cart</p>
 *     <p class="alert__text">Free shipping on orders over ₹2,000.</p>
 *   </div>
 */

.alert {
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-sm);
	line-height: var(--line-normal);
	color: var(--color-text);
	background: var(--color-surface-muted);
	border: var(--border-width) solid var(--color-border-muted);
	border-left: var(--border-width-strong) solid var(--color-primary);
	border-radius: var(--radius-none);
}

.alert__title {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-heading);
	margin: 0;
}

.alert__text {
	margin: var(--space-1) 0 0;
	max-width: none;
}

.alert__text:only-child,
.alert p:last-child {
	margin-bottom: 0;
}

/* --- Variants --- */

.alert--info {
	background: var(--color-surface-muted);
	border-left-color: var(--color-primary);
}

.alert--success {
	background: var(--sage-light);
	border-color: var(--sage-dark);
	border-left-color: var(--color-primary);
}

.alert--danger {
	background: var(--clay-soft);
	border-color: rgba(182, 32, 19, 0.25);
	border-left-color: var(--color-accent);
}

.alert--danger .alert__title {
	color: var(--color-accent);
}

/**
 * Inline form result — one line of feedback under a form, no box.
 * Used by the newsletter sign-ups.
 */
.form-notice {
	font-size: var(--text-sm);
	line-height: var(--line-normal);
	margin: 0;
}

.form-notice--ok { color: var(--color-primary); }
.form-notice--error { color: var(--color-accent); }

/* Solid forest notice — shipping bars, storewide announcements. */
.alert--inverse {
	background: var(--color-surface-inverse);
	color: var(--color-inverse);
	border-color: var(--color-surface-inverse);
	border-left-color: var(--color-accent);
}

.alert--inverse .alert__title {
	color: var(--color-inverse);
}