/**
 * --------------------------------------------------------
 * Le Foin® Notice
 * Frontend Styles
 * --------------------------------------------------------
 */

/* --------------------------------------------------------
   Root
-------------------------------------------------------- */

.lfn-notice {

	position: relative;

	display: flex;
	flex-direction: column;
	gap: 0.75rem;

	padding: 1.25rem 1.5rem;

	margin: 1.5rem 0;

	border-radius: 14px;

	border: 1px solid transparent;

	background: #ffffff;

	box-shadow:
		0 8px 24px rgba(0,0,0,.06);

	transition:
		all .25s ease;

}

/* --------------------------------------------------------
   Hover
-------------------------------------------------------- */

.lfn-notice:hover {

	transform: translateY(-2px);

	box-shadow:
		0 12px 32px rgba(0,0,0,.08);

}

/* --------------------------------------------------------
   Header
-------------------------------------------------------- */

.lfn-notice__header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 1rem;

}

/* --------------------------------------------------------
   Title
-------------------------------------------------------- */

.lfn-notice__title {

	margin: 0;

	font-size: 1.15rem;

	font-weight: 700;

	line-height: 1.4;

	color: #222;

}

/* --------------------------------------------------------
   Icon
-------------------------------------------------------- */

.lfn-notice__icon {

	font-size: 1.35rem;

	line-height: 1;

}

/* --------------------------------------------------------
   Content
-------------------------------------------------------- */

.lfn-notice__content {

	font-size: 0.96rem;

	line-height: 1.7;

	color: #555;

}

/* --------------------------------------------------------
   Footer
-------------------------------------------------------- */

.lfn-notice__footer {

	margin-top: .5rem;

	display: flex;

	align-items: center;

	justify-content: flex-end;

}

/* --------------------------------------------------------
   Button
-------------------------------------------------------- */

.lfn-notice__button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: .65rem 1rem;

	border-radius: 10px;

	text-decoration: none;

	font-size: .9rem;

	font-weight: 600;

	transition: .2s ease;

}

.lfn-notice__button:hover {

	transform: translateY(-1px);

}

/* --------------------------------------------------------
   Close Button
-------------------------------------------------------- */

.lfn-notice__close {

	cursor: pointer;

	font-size: 1rem;

	line-height: 1;

	opacity: .55;

	transition: .2s ease;

}

.lfn-notice__close:hover {

	opacity: 1;

}

/* --------------------------------------------------------
   SUCCESS
-------------------------------------------------------- */

.lfn-notice--success {

	background: #f3fff5;

	border-color: #28a745;

}

.lfn-notice--success .lfn-notice__button {

	background: #28a745;

	color: #fff;

}

/* --------------------------------------------------------
   INFO
-------------------------------------------------------- */

.lfn-notice--info {

	background: #f4f9ff;

	border-color: #0d6efd;

}

.lfn-notice--info .lfn-notice__button {

	background: #0d6efd;

	color: #fff;

}

/* --------------------------------------------------------
   WARNING
-------------------------------------------------------- */

.lfn-notice--warning {

	background: #fff8e6;

	border-color: #ffc107;

}

.lfn-notice--warning .lfn-notice__button {

	background: #ffc107;

	color: #222;

}

/* --------------------------------------------------------
   ERROR
-------------------------------------------------------- */

.lfn-notice--error {

	background: #fff3f3;

	border-color: #dc3545;

}

.lfn-notice--error .lfn-notice__button {

	background: #dc3545;

	color: #fff;

}

/* --------------------------------------------------------
   Dark Mode
-------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	.lfn-notice {

		background: #232323;

		color: #f5f5f5;

		border-color: #444;

	}

	.lfn-notice__title {

		color: #fff;

	}

	.lfn-notice__content {

		color: #d7d7d7;

	}

}

/* --------------------------------------------------------
   Responsive
-------------------------------------------------------- */

@media (max-width: 768px) {

	.lfn-notice {

		padding: 1rem;

		border-radius: 12px;

	}

	.lfn-notice__title {

		font-size: 1rem;

	}

	.lfn-notice__content {

		font-size: .92rem;

	}

}