/*
 * RahkarTheme — in-UI notice (toast) styles.
 *
 * The toast stack is a fixed-position container at the top of the viewport.
 * In RTL, `justify-content: flex-start` places toasts on the right side
 * (the start of horizontal flow in RTL), which is the natural reading
 * position. The stack is capped at 4 visible notices; older items scroll.
 *
 * Adaptations:
 *   - prefers-reduced-motion: no slide/fade transitions
 *   - Mobile: toasts span the full width (minus safe-area paddings)
 *   - Desktop: toasts are 380px max-width, bounded 16px from the edge
 *
 * z-index: 999 — below the cart modal (1000) and mobile nav drawer (1001),
 * so toasts don't cover an active dialog. A user dismissed from the modal
 * will see the toast appear below it; if the modal is open and a toast
 * fires, the toast appears at the viewport top while the modal stays focused.
 */
.rh-notice-stack {
	position: fixed;
	top: max( 12px, env( safe-area-inset-top, 0px ) );
	inset-inline-start: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 999;
	pointer-events: none;
	padding: 0 max( 12px, env( safe-area-inset-left, 0px ) ) 0 max( 12px, env( safe-area-inset-right, 0px ) );
	max-height: 90vh;
	overflow: hidden;
}

.rh-notice {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	max-width: 380px;
	min-height: 48px;
	padding: 12px 14px;
	border-radius: var( --wp--custom--radius--md, 10px );
	background: var( --wp--preset--color--base, #fff );
	border: 1px solid var( --wp--preset--color--border, #e2e4e9 );
	box-shadow: 0 8px 28px -8px rgba( 15, 17, 21, 0.18 );
	font: inherit;
	font-size: 0.875rem;
	color: var( --wp--preset--color--text, #1a1d23 );
	opacity: 0;
	transform: translateY( -8px );
	transition: opacity 200ms ease, transform 200ms ease;
	contain: layout paint style;
}

.rh-notice--show {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( min-width: 768px ) {
	.rh-notice-stack {
		align-items: flex-start;
	}

	.rh-notice {
		max-width: 380px;
	}
}

/* ── Icon ─────────────────────────────────────────────────── */
.rh-notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 50%;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
}

/* ── Body text ─────────────────────────────────────────────── */
.rh-notice__body {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* ── Close button ──────────────────────────────────────────── */
.rh-notice__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --wp--preset--color--text-muted, #5b6271 );
	cursor: pointer;
	border-radius: var( --wp--custom--radius--sm, 6px );
	transition: background-color 120ms, color 120ms;
	margin-inline-start: auto;
}

.rh-notice__close:hover,
.rh-notice__close:focus-visible {
	background: var( --wp--preset--color--surface, #f7f7f8 );
	color: var( --wp--preset--color--contrast, #0f1115 );
}

/* ── Level colors ──────────────────────────────────────────── */
.rh-notice--error {
	border-color: rgba( 220, 38, 38, 0.3 );
}
.rh-notice--error .rh-notice__icon {
	background: #dc2626;
	color: #fff;
}
.rh-notice--error .rh-notice__body {
	color: #991b1b;
}

.rh-notice--warning {
	border-color: rgba( 217, 119, 6, 0.3 );
}
.rh-notice--warning .rh-notice__icon {
	background: #d97706;
	color: #fff;
}
.rh-notice--warning .rh-notice__body {
	color: #92400e;
}

.rh-notice--success {
	border-color: rgba( 25, 135, 84, 0.3 );
}
.rh-notice--success .rh-notice__icon {
	background: var( --wp--preset--color--success, #198754 );
	color: #fff;
}
.rh-notice--success .rh-notice__body {
	color: #155724;
}

.rh-notice--info {
	border-color: rgba( 10, 102, 194, 0.2 );
}
.rh-notice--info .rh-notice__icon {
	background: var( --wp--preset--color--primary, #0a66c2 );
	color: #fff;
}
.rh-notice--info .rh-notice__body {
	color: var( --wp--preset--color--text, #1a1d23 );
}

/* ── Reduced motion ────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.rh-notice {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.rh-notice--show {
		opacity: 1;
		transform: none;
	}
}

/* =====================================================================
 *  In-UI confirmation dialog
 * ===================================================================== */
.rh-confirm {
	position: fixed;
	inset: 0;
	z-index: 1002;
	display: grid;
	place-items: center;
	padding: max( 16px, env( safe-area-inset-top, 0px ) ) max( 16px, env( safe-area-inset-right, 0px ) ) max( 16px, env( safe-area-inset-bottom, 0px ) ) max( 16px, env( safe-area-inset-left, 0px ) );
	pointer-events: none;
	opacity: 0;
	transition: opacity 180ms ease;
}
.rh-confirm[hidden] {
	display: none;
}
.rh-confirm[data-state="open"] {
	pointer-events: auto;
	opacity: 1;
}
.rh-confirm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 15, 17, 21, 0.5 );
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
	cursor: pointer;
}
.rh-confirm__panel {
	position: relative;
	z-index: 1;
	width: min( 420px, calc( 100vw - 32px ) );
	padding: 22px;
	border: 1px solid var( --wp--preset--color--border, #e2e4e9 );
	border-radius: var( --wp--custom--radius--lg, 12px );
	background: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--text, #1a1d23 );
	box-shadow: 0 24px 64px rgba( 15, 17, 21, 0.24 );
	transform: translateY( 8px ) scale( .98 );
	transition: transform 180ms ease;
}
.rh-confirm[data-state="open"] .rh-confirm__panel {
	transform: translateY( 0 ) scale( 1 );
}
.rh-confirm__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rh-confirm__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #d97706;
	color: #fff;
	font-weight: 800;
}
.rh-confirm__title {
	margin: 0;
	font-size: 1rem;
	font-weight: var( --wp--custom--fw--strong, 700 );
	line-height: 1.4;
}
.rh-confirm__message {
	margin: 16px 0 22px;
	font-size: .9375rem;
	line-height: 1.7;
	color: var( --wp--preset--color--text, #1a1d23 );
}
.rh-confirm__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.rh-confirm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var( --wp--custom--button--radius, 10px );
	font: inherit;
	font-size: .9375rem;
	font-weight: var( --wp--custom--button--fw, 600 );
	cursor: pointer;
	transition: background-color 120ms, color 120ms, border-color 120ms;
}
.rh-confirm__btn--cancel {
	border-color: var( --wp--preset--color--border, #e2e4e9 );
	background: transparent;
	color: var( --wp--preset--color--text-muted, #5b6271 );
}
.rh-confirm__btn--cancel:hover,
.rh-confirm__btn--cancel:focus-visible {
	border-color: var( --wp--preset--color--primary, #0a66c2 );
	color: var( --wp--preset--color--primary, #0a66c2 );
}
.rh-confirm__btn--confirm {
	background: var( --wp--preset--color--primary, #0a66c2 );
	color: #fff;
}
.rh-confirm__btn--confirm:hover,
.rh-confirm__btn--confirm:focus-visible {
	background: var( --wp--preset--color--primary-dark, #074a8d );
	color: #fff;
}
.rh-confirm__btn:focus-visible,
.rh-confirm__close:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary, #0a66c2 );
	outline-offset: 2px;
}

@media ( max-width: 480px ) {
	.rh-confirm {
		place-items: end center;
		padding-inline: 12px;
	}
	.rh-confirm__panel {
		width: 100%;
		padding: 20px 16px max( 20px, env( safe-area-inset-bottom, 0px ) );
		border-radius: var( --wp--custom--radius--lg, 12px ) var( --wp--custom--radius--lg, 12px ) 0 0;
		transform: translateY( 12px );
	}
	.rh-confirm[data-state="open"] .rh-confirm__panel {
		transform: translateY( 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.rh-confirm,
	.rh-confirm__panel {
		transition: none;
	}
}