/* Casino Review Manager — картка казино, рейтинг, CTA-кнопки, "Load More" */

/*
 * Картка адаптується до ширини списку, а не вікна: у вузькій колонці контенту
 * (сайдбар, тема з контентом ~700px) вона перебудовується так само, як на планшеті/телефоні.
 *   > 860px    — один рядок: логотип | назва + рейтинг | бонус | кнопка
 *   521–860px  — той самий рядок, компактніший (логотип 100px, менші відступи й заголовок)
 *   <= 520px   — одна колонка (мобільний вигляд)
 */
.crm-casino-list,
.crm-casino-meta {
	container: crm-casino / inline-size;
	inline-size: 100%;
}

.crm-casino-item {
	--crm-item-text: #171717;
	--crm-item-border: #ddd;
	--crm-rating-color: #ffde01;

	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 20px;
	border: 1px solid var(--crm-item-border);
	border-radius: 5px;
	color: var(--crm-item-text);

	@container crm-casino (width <= 520px) {
		flex-direction: column;
	}

	&.crm-casino-item-light {
		--crm-rating-color: #d5ba00;
	}

	&.crm-casino-item-dark {
		--crm-item-text: #fff;

		background-color: #2d3337;

		:is(p, h1).crm-casino-name,
		.crm-casino-review a {
			color: #fff;
		}
	}

	p {
		margin: 0;
		line-height: 1.3;
	}

	:is(p, h1).crm-casino-name {
		font-size: 26px;
		font-weight: bold;

		@container crm-casino (width <= 860px) {
			font-size: 22px;
		}

		@container crm-casino (width <= 520px) {
			font-size: 18px;
		}
	}

	div.crm-casino-bonus {
		font-weight: bold;
	}

	div.crm-casino-extra {
		font-weight: normal;
	}

	:is(div.crm-casino-bonus, div.crm-casino-extra) {
		:is(h1, h2, h3, h4, h5, h6) {
			margin: 0 0 5px;
			font-size: inherit !important;
			font-weight: inherit !important;
		}

		:is(p, li) {
			font-size: inherit !important;
			font-weight: inherit !important;
		}

		:is(strong, b) {
			font-size: inherit !important;
			font-weight: bold !important;
		}

		:is(ul, ol) {
			margin-inline-start: 5px;
			margin-block-end: 0;
			font-size: inherit !important;
			font-weight: inherit !important;
		}
	}

	/* min-inline-size: 0 — колонка не розпирається рядком зірок, зірки стискаються під неї */
	.crm-casino-data {
		min-inline-size: 0;
		text-align: center;
	}

	.crm-casino-link {
		text-align: end;
	}

	.crm-casino-review {
		padding: 10px 15px 0;
		font-size: 16px;

		a:hover {
			opacity: .7;
		}
	}

	.crm-casino-bonuses :is(ul, ol) {
		margin-inline-start: 5px;
		margin-block-end: 0;
	}

	.crm-casino-thumbnail img {
		width: 150px;
		height: 150px;
		object-fit: cover;

		@container crm-casino (width <= 860px) {
			width: 100px;
			height: 100px;
		}
	}

	.crm-casino-col {
		flex: 1;
		padding: 15px 25px;

		@container crm-casino (width <= 860px) {
			padding: 15px 12px;
		}

		@container crm-casino (width <= 520px) {
			padding: 10px 15px;
		}

		&.crm-casino-col--logo {
			flex: none;
		}

		&.crm-casino-col--link {
			flex: .5;
		}
	}

	.crm-casino-col--data {
		display: flex;
		flex: 2;
		align-items: center;
		justify-content: center;
		min-inline-size: 0;
	}

	.crm-casino-col--bonus {
		display: flex;
		flex: 2;
		align-self: stretch;
		align-items: center;
	}

	/* Компактний рядок: кнопка за шириною тексту, решту ділять назва і бонус */
	@container crm-casino (521px <= width <= 860px) {
		.crm-casino-col--data {
			flex: 1 1 0;
		}

		.crm-casino-col--bonus {
			flex: 1.2 1 0;
		}

		.crm-casino-col.crm-casino-col--link {
			flex: 0 0 auto;
		}
	}
}

/* Rating */

.crm-casino-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin-block-start: 5px;
	padding: 0 15px;
	font-size: 12px;
	color: var(--crm-rating-color, #ffde01);

	/* Зірки стискаються, якщо колонка вужча за 10 зірок, замість того щоб вилазити на сусідній блок */
	.crm-casino-star {
		position: relative;
		flex: 0 1 auto;
		inline-size: 14px;
		min-inline-size: 8px;
		aspect-ratio: 1;
		background-image: url("../img/star-empty.svg");
		background-repeat: no-repeat;
		background-size: contain;

		&.crm-casino-star--filled {
			background-image: url("../img/star.svg");
		}

		&.crm-casino-star--half {
			background-image: url("../img/star-half.svg");
		}
	}
}

/* Rating number (Settings → "Show Rating Number") */

/* Якщо цифра не вміщується поруч із зірками, вона переноситься під них */
.crm-casino-score {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 8px;
	margin-block-start: 5px;

	.crm-casino-rating {
		flex: 0 1 auto;
		min-inline-size: 0;
		margin: 0;
		padding: 0;
	}
}

.crm-casino-note {
	flex: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* CTA button */

.crm-casino-button {
	--crm-button-bg: #2ecc71;
	--crm-button-bg-hover: #27ae60;
	--crm-button-shadow: rgb(45 221 108 / .55);
	--crm-button-shadow-hover: rgb(39 174 96 / .55);

	width: 100%;
	margin: 0;
	padding: 20px;
	border-radius: 5px;
	background-color: var(--crm-button-bg);
	box-shadow: 0 5px 15px 0 var(--crm-button-shadow);
	color: #fff !important;
	font-size: 1em;
	font-weight: 400;
	line-height: 60px;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .5s ease-in-out, box-shadow .5s ease-in-out;

	&:is(:hover, :focus-visible) {
		background-color: var(--crm-button-bg-hover);
		box-shadow: 0 5px 15px 0 var(--crm-button-shadow-hover);
	}

	&:focus-visible {
		outline: 2px solid var(--crm-button-bg-hover);
		outline-offset: 3px;
	}
}

.crm-casino-button-green {
	--crm-button-bg: #2ecc71;
	--crm-button-bg-hover: #27ae60;
	--crm-button-shadow: rgb(45 221 108 / .55);
	--crm-button-shadow-hover: rgb(39 174 96 / .55);
}

.crm-casino-button-red {
	--crm-button-bg: #e74c3c;
	--crm-button-bg-hover: #c0392b;
	--crm-button-shadow: rgb(231 76 60 / .55);
	--crm-button-shadow-hover: rgb(192 57 43 / .55);
}

.crm-casino-button-blue {
	--crm-button-bg: #3498db;
	--crm-button-bg-hover: #2980b9;
	--crm-button-shadow: rgb(52 152 219 / .55);
	--crm-button-shadow-hover: rgb(41 128 185 / .55);
}

.crm-casino-button-yellow {
	--crm-button-bg: #f1c40f;
	--crm-button-bg-hover: #f39c12;
	--crm-button-shadow: rgb(241 196 15 / .55);
	--crm-button-shadow-hover: rgb(243 156 18 / .55);
}

.crm-casino-button-purple {
	--crm-button-bg: #9b59b6;
	--crm-button-bg-hover: #8e44ad;
	--crm-button-shadow: rgb(155 89 182 / .55);
	--crm-button-shadow-hover: rgb(142 68 173 / .55);
}

.crm-casino-button-orange {
	--crm-button-bg: #e67e22;
	--crm-button-bg-hover: #d35400;
	--crm-button-shadow: rgb(230 126 34 / .55);
	--crm-button-shadow-hover: rgb(211 84 0 / .55);
}

/* Load more */

.crm-casino-more-wrap {
	width: 100%;
	margin-block-end: 20px;
	text-align: center;

	.crm-loader {
		display: block;
		width: 20px;
		height: 20px;
		margin: auto;
		border: 3px solid #eaf0f6;
		border-block-start-color: #212121;
		border-radius: 50%;
		animation: crm-spin 1s linear infinite;
	}
}

@keyframes crm-spin {
	to {
		transform: rotate(1turn);
	}
}

@media (prefers-reduced-motion: reduce) {
	.crm-casino-button {
		transition: none;
	}

	.crm-casino-more-wrap .crm-loader {
		animation-duration: 3s;
	}
}