/* ===== CZSBRASIL TOAST SYSTEM ===== */

/* --- Design Tokens --- */
:root {
	/* Toast Colors */
	--czs-toast-success: 16 185 129;
	--czs-toast-success-dark: 5 150 105;
	--czs-toast-error: 239 68 68;
	--czs-toast-error-dark: 220 38 38;
	--czs-toast-warning: 245 158 11;
	--czs-toast-warning-dark: 217 119 6;
	--czs-toast-info: 88 101 242;
	--czs-toast-info-dark: 71 82 196;

	/* Spacing */
	--czs-toast-gap: 12px;
	--czs-toast-padding-block: 16px;
	--czs-toast-padding-inline: 20px;
	--czs-toast-inset: 24px;

	/* Sizing */
	--czs-toast-max-width: 420px;
	--czs-toast-icon-size: 40px;
	--czs-toast-close-size: 24px;
	--czs-toast-radius: 16px;
	--czs-toast-progress-height: 3px;

	/* Typography */
	--czs-toast-font: 'Poppins', sans-serif;
	--czs-toast-title-size: 0.95rem;
	--czs-toast-message-size: 0.85rem;

	/* Animation */
	--czs-toast-duration: 0.4s;
	--czs-toast-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--czs-toast-auto-close: 5s;

	/* Surfaces */
	--czs-toast-overlay-light: rgba(255, 255, 255, 0.1);
	--czs-toast-overlay-medium: rgba(255, 255, 255, 0.2);
	--czs-toast-text-primary: #fff;
	--czs-toast-text-secondary: rgba(255, 255, 255, 0.9);
	--czs-toast-text-muted: rgba(255, 255, 255, 0.7);
}

/* --- Animations --- */
@keyframes czsToastSlideIn {
	from { translate: 120% 0; opacity: 0; }
	to   { translate: 0 0;    opacity: 1; }
}

@keyframes czsToastSlideOut {
	from { translate: 0 0;    opacity: 1; }
	to   { translate: 120% 0; opacity: 0; }
}

@keyframes czsToastProgress {
	from { width: 100%; }
	to   { width: 0%; }
}

/* --- Container --- */
.czs-toast-container {
	position: fixed;
	inset-block-start: var(--czs-toast-inset);
	inset-inline-end: var(--czs-toast-inset);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: var(--czs-toast-gap);
	pointer-events: none;
	max-width: var(--czs-toast-max-width);
	width: calc(100% - var(--czs-toast-inset) * 2);
}

/* --- Toast Base --- */
.czs-toast {
	--_color: var(--czs-toast-info);
	--_color-dark: var(--czs-toast-info-dark);

	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: var(--czs-toast-padding-block) var(--czs-toast-padding-inline);
	border-radius: var(--czs-toast-radius);
	background: linear-gradient(
		135deg,
		rgb(var(--_color) / 0.95),
		rgb(var(--_color-dark) / 0.95)
	);
	border: 1px solid var(--czs-toast-overlay-light);
	color: var(--czs-toast-text-primary);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.05) inset;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	pointer-events: auto;
	position: relative;
	overflow: hidden;

	translate: 120% 0;
	opacity: 0;
	animation: czsToastSlideIn var(--czs-toast-duration) var(--czs-toast-easing) forwards;
}

.czs-toast.removing {
	animation: czsToastSlideOut var(--czs-toast-duration) var(--czs-toast-easing) forwards;
}

/* Progress bar */
.czs-toast::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	height: var(--czs-toast-progress-height);
	background: rgba(255, 255, 255, 0.3);
	animation: czsToastProgress var(--czs-toast-auto-close) linear forwards;
}

/* --- Toast Types (só trocam as variáveis internas) --- */
.czs-toast--success {
	--_color: var(--czs-toast-success);
	--_color-dark: var(--czs-toast-success-dark);
}

.czs-toast--error {
	--_color: var(--czs-toast-error);
	--_color-dark: var(--czs-toast-error-dark);
}

.czs-toast--warning {
	--_color: var(--czs-toast-warning);
	--_color-dark: var(--czs-toast-warning-dark);
}

.czs-toast--info {
	--_color: var(--czs-toast-info);
	--_color-dark: var(--czs-toast-info-dark);
}

/* --- Icon --- */
.czs-toast__icon {
	width: var(--czs-toast-icon-size);
	height: var(--czs-toast-icon-size);
	border-radius: 50%;
	background: var(--czs-toast-overlay-medium);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	font-size: 1rem;
}

/* --- Content --- */
.czs-toast__content {
	flex: 1;
	min-width: 0;
}

.czs-toast__title {
	font: 600 var(--czs-toast-title-size) / 1.3 var(--czs-toast-font);
	color: var(--czs-toast-text-primary);
	margin: 0 0 2px;
}

.czs-toast__message {
	font: 400 var(--czs-toast-message-size) / 1.4 var(--czs-toast-font);
	color: var(--czs-toast-text-secondary);
	margin: 0;
}

/* --- Close Button --- */
.czs-toast__close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	width: var(--czs-toast-close-size);
	height: var(--czs-toast-close-size);
	border: none;
	background: var(--czs-toast-overlay-light);
	border-radius: 50%;
	color: var(--czs-toast-text-muted);
	cursor: pointer;
	display: grid;
	place-items: center;
	font-size: 0.7rem;
	padding: 0;
	transition: background 0.2s, color 0.2s;
}

.czs-toast__close:hover {
	background: var(--czs-toast-overlay-medium);
	color: var(--czs-toast-text-primary);
}

/* ===== DEBUG PANEL ===== */
.czs-toast-debug {
	position: fixed;
	inset-block-end: var(--czs-toast-inset);
	inset-inline-end: var(--czs-toast-inset);
	z-index: 99998;
	background: rgba(15, 17, 25, 0.95);
	border: 1px solid var(--czs-toast-overlay-light);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	font-family: var(--czs-toast-font);
	min-width: 200px;
}

.czs-toast-debug__title {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 12px;
	padding-block-end: 8px;
	border-block-end: 1px solid var(--czs-toast-overlay-light);
}

.czs-toast-debug__btn {
	--_btn-color: var(--czs-toast-info);

	display: block;
	width: 100%;
	padding: 8px 12px;
	margin-block-end: 6px;
	border: none;
	border-radius: 8px;
	font: 500 0.8rem var(--czs-toast-font);
	cursor: pointer;
	text-align: left;
	background: rgb(var(--_btn-color) / 0.2);
	color: rgb(var(--_btn-color));
	transition: translate 0.2s;
}

.czs-toast-debug__btn:last-child {
	margin-block-end: 0;
}

.czs-toast-debug__btn--success { --_btn-color: var(--czs-toast-success); }
.czs-toast-debug__btn--error   { --_btn-color: var(--czs-toast-error); }
.czs-toast-debug__btn--warning { --_btn-color: var(--czs-toast-warning); }
.czs-toast-debug__btn--info    { --_btn-color: var(--czs-toast-info); }

.czs-toast-debug__btn:hover {
	translate: 4px 0;
}

.czs-toast-debug__close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	width: 20px;
	height: 20px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	font-size: 0.7rem;
	padding: 0;
	display: grid;
	place-items: center;
}

.czs-toast-debug__close:hover {
	color: var(--czs-toast-text-primary);
}

/* --- Responsive --- */
@media (max-width: 480px) {
	:root {
		--czs-toast-inset: 16px;
		--czs-toast-padding-block: 14px;
		--czs-toast-padding-inline: 16px;
		--czs-toast-icon-size: 36px;
	}

	.czs-toast-container {
		inset-inline-start: var(--czs-toast-inset);
		max-width: none;
	}
}