/* Cards in the reference style: dark rounded body with a gradient title band on top
   (the "WELCOME BONUS" band of the casigood77 promo cards). */

/* ---- card-buttons (.v6-games) ---- */
body .v6-games__list {
	gap: 18px;
}

body .v6-games__card {
	position: relative;
	background: var(--cg-surface) !important;
	border: 1px solid var(--cg-line);
	border-radius: var(--cg-radius) !important;
	overflow: hidden;
	box-shadow: var(--cg-shadow);
	transition: transform .25s ease, border-color .25s ease;
}

body .v6-games__card:hover {
	transform: translateY(-3px);
	border-color: rgba(97, 198, 255, .45);
}

body .v6-games__card .v6-games__heading {
	margin: 0 !important;
	padding: 12px 18px !important;
	background: var(--cg-grad);
	text-align: center;
}

body .v6-games__card .v6-games__card-info__title {
	margin: 0;
	font-size: 15px !important;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

body .v6-games__card .v6-games__card-info {
	padding: 18px 20px 20px !important;
}

body .v6-games__card .v6-games__card-info__description,
body .v6-games__card .v6-games__card-info__description p {
	color: var(--cg-muted) !important;
	font-size: 14px;
	line-height: 1.6;
}

body .v6-games__card .v6-games__card-info__description li {
	color: var(--cg-muted);
}

body .v6-games__card .v6-games__card-info__description h4 {
	color: var(--cg-sky);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---- payment methods (.v1-payment) ---- */
body .v1-payment__card {
	background: var(--cg-surface) !important;
	border: 1px solid var(--cg-line);
	border-radius: var(--cg-radius) !important;
	transition: border-color .25s;
}

body .v1-payment__card:hover {
	border-color: rgba(97, 198, 255, .45);
}

body .v1-payment__card-logo {
	background: #ffffff !important;
	border-radius: 12px !important;
	padding: 6px;
}

body .v1-payment__card-info {
	font-weight: 800;
}

/* ---- bonus-promo v4 / v5 ---- */
/* No overflow:hidden on the card: it flattens the 3D flip and the front shows mirrored.
   Round the two faces instead. */
body .v4-bonus-promo__card,
body .v5-bonus-promo__card {
	border-radius: var(--cg-radius) !important;
	box-shadow: var(--cg-shadow);
}

body .v4-bonus-promo__card-front,
body .v4-bonus-promo__card-back,
body .v5-bonus-promo__card-front,
body .v5-bonus-promo__card-back {
	border-radius: var(--cg-radius) !important;
	border: 1px solid var(--cg-line);
}

body .v4-bonus-promo__card-front,
body .v5-bonus-promo__card-front {
	background:
		radial-gradient(260px 160px at 85% 0%, rgba(22, 216, 181, .22), rgba(22, 216, 181, 0) 70%),
		var(--cg-surface) !important;
}

body .v4-bonus-promo__card-back,
body .v5-bonus-promo__card-back {
	background: var(--cg-surface-2) !important;
}

body .v4-bonus-promo__card-bonus,
body .v5-bonus-promo__card-title {
	font-weight: 900 !important;
	color: #ffffff;
}

body .v5-bonus-promo__card-header,
body .v5-bonus-promo__card-no-code {
	background: var(--cg-grad) !important;
	color: #ffffff !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
}

body .v4-bonus-promo__card-toggle,
body .v5-bonus-promo__card-toggle {
	color: var(--cg-sky) !important;
}

/* ---- bonus-text-button (.v1-bonus) ---- */
body .v1-bonus__card {
	background: var(--cg-surface) !important;
	border: 1px solid var(--cg-line);
	border-radius: var(--cg-radius) !important;
	overflow: hidden;
	box-shadow: var(--cg-shadow);
}

body .v1-bonus__card-title {
	background: var(--cg-grad);
	padding: 12px 18px !important;
	margin: 0 !important;
}

body .v1-bonus__card-title__text {
	color: #ffffff !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
}

body .v1-bonus__card-description {
	color: var(--cg-muted);
}

/* ---- links-block chips ----
   The chip carries .vAll-button_secondary, so the white-button rules from child.css
   (black text, light hover bg) have to be overridden explicitly here. */
body .v6-quick-links__list {
	gap: 10px;
}

body .v6-quick-link.vAll-button_secondary,
body .v6-quick-link {
	background: var(--cg-surface) !important;
	border: 1px solid var(--cg-line) !important;
	border-radius: 999px !important;
	color: var(--cg-text) !important;
	transform: none;
	transition: border-color .2s, background .2s;
}

body .v6-quick-link::before {
	background: var(--cg-grad-h) !important;
}

body .v6-quick-link .v6-quick-link__title {
	color: var(--cg-text) !important;
	font-weight: 700;
	transition: color .2s;
}

body .v6-quick-link svg,
body .v6-quick-link svg use {
	color: var(--cg-sky);
	fill: var(--cg-sky);
	stroke: var(--cg-sky);
}

body .v6-quick-link.vAll-button_secondary:hover,
body .v6-quick-link:hover {
	background: var(--cg-surface) !important;
	border-color: var(--cg-sky) !important;
	transform: none;
}

body .v6-quick-link:hover .v6-quick-link__title {
	color: #000000 !important;
}

body .v6-quick-link:hover svg,
body .v6-quick-link:hover svg use {
	color: #000000;
	fill: #000000;
	stroke: #000000;
}

/* title band flush with the card edges */
body .v6-games__card {
	padding: 0 !important;
}

/* bonus-text-button: band flush with the edges, text at the top, button at the bottom */
body .v1-bonus__card {
	padding: 0 !important;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start !important;
}

body .v1-bonus__card-description {
	margin-top: 0 !important;
	padding: 16px 20px 0;
}

body .v1-bonus__card-description table {
	width: 100%;
	font-size: 13px;
}

body .v1-bonus__card > .vAll-button {
	margin: auto 20px 20px !important;
}
