

html, body { background-color: #f4f3f3; font-family: "Sofia Sans", sans-serif; position:relative; }
.uk-logo img { height: 65px; }

.font-light { font-weight: 300; font-family: "Sofia Sans", sans-serif; font-optical-sizing: auto;}
.font-regular { font-weight: 500; font-family: "Sofia Sans", sans-serif; font-optical-sizing: auto;}
.font-medium { font-weight: 700; font-family: "Sofia Sans", sans-serif; font-optical-sizing: auto;}
.font-bold { font-weight: 900; font-family: "Sofia Sans", sans-serif; font-optical-sizing: auto;}



/* Animation keyframes */
@keyframes button-animation {
	0%, 100% { transform: scale(1) translateZ(0); filter: brightness(1); }
	50% { transform: scale(1.05) translateZ(0); filter: brightness(1.3); }
}


*[data-text]{ visibility:hidden; }


h3 { color: #222; font-size: 20px; font-weight: 700;}
.uk-list li { margin-top: 5px !important; }
.uk-container-xsmall { max-width:650px; }

.action-btn, .primary-cta {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;

	/*** mobile ***/
	@media (max-width: 640px) {
		flex-direction: column;
		/*padding-right: 35px;*/
		display: block;

		div { margin:20px auto; }
	}
}
.action-btn:only-child .primary, 
.primary-cta:only-child .primary, 
.primary:hover,
.teaser .primary
{
	animation: button-animation 5s cubic-bezier(.86, 0, .07, 1) infinite;
	will-change: transform, filter;
}


.button{

	&.primary {
		position: relative;
		display: inline-block;
		/*display: inline-grid;*/
		/*place-items: center;*/
		/*min-height: 30px;*/
		padding: 15px 24px;
		color: #fff;
		font-size: 18px;
		font-weight: 800;
		font-style: italic;
		line-height: 1.5em;
		text-align: center;
		text-decoration: none;
		border: 0px solid #570011;
		border-bottom: 1px solid #570011;
		border-radius: 40px;
		overflow: hidden; /* hide ::before edges */
		background: radial-gradient( 107% 108% at 50% 108%, rgb(255 0 60), rgb(159 0 32) );
		box-shadow: 0 8px 6px rgb(88 72 55 / .15);
		cursor: pointer;
		z-index: 1;
		transition: color 0.3s ease, transform 0.3s ease;
		text-transform: uppercase;
		/*margin: 10px;*/

		color: #fff;
		/*animation: button-animation 5s cubic-bezier(.86, 0, .07, 1) infinite;*/
		/*will-change: transform, filter;*/

		/* only animate if it’s the only button */
		&:only-child {
			/*animation: button-animation 5s cubic-bezier(.86, 0, .07, 1) infinite;*/
			/*will-change: transform, filter;*/
		}

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			box-sizing: border-box;
			/*background: 	;*/
			background-image: url('assets/img/btn-animation.webp'), radial-gradient( 98% 99% at 50% 100%, rgb(255 96 128), rgb(199 0 40) );
			background-size: cover;
			background-position: center;
			opacity: 0;
			transition: all 1s ease-in-out 2s;
			z-index: -1;
		}

		/* Hover effect */
		&:hover, &.active {
			/*color: #ffdddd;*/
			/*transform: translateY(-3px);*/

			&::before {
				opacity: 1;
			}
		}

		/*** mobile ***/
		@media (max-width: 640px) {
			/*width: 90%;*/
			display: block;
		}

	}

	&.dark{
		position: relative;
		display: inline-flex;
		justify-content: center;
		place-items: center;
		min-height: 28px;
		min-width: 120px;
		padding: 5px 24px;
		margin: 0.5em;
		margin-bottom: 2em;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		font-style: italic;
		line-height: 1em;
		text-align: center;
		text-decoration: none;
		border: 1px solid #070606; border-radius: 40px;
		box-shadow: 0 8px 6px rgb(88 72 55 / .15);
		overflow: hidden; /* hide ::before edges */
		background: radial-gradient(73% 100% at 50% 100%, rgb(85 78 78), rgb(22 20 20));
		cursor: pointer;
		z-index: 1;
		transition: color 0.3s ease, transform 0.3s ease;
		text-transform: uppercase;

		/* The gradient overlay for hover */
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: radial-gradient(73% 100% at 50% 100%, rgb(130 120 120), rgb(38 34 34));
			opacity: 0;
			transition: opacity 0.6s ease-in-out;
			z-index: -1;
		}

		/* Hover effect */
		&.dark:hover {
			/*color: #ffdddd;*/
			/*transform: translateY(-3px);*/

			&::before {
				opacity: 1;
			}
		}

		img { height: 20px; width:auto; display:inline-block; margin: 8px;}

	}

}

header {
	background-color: transparent;position: absolute;
	top: 15px;
	z-index: 99;
	left: 0;
	right: 0;

	.uk-navbar-nav {

		> li{
			line-height: 1em; padding: 1px; height: 32px; border-radius: 1em; 

			> a{ 
				background-color: #FAFAFA; border: 1px solid #bbb; border-radius: 1em; color: #222; font-weight: 700; 
				font-style: italic; line-height: 1em; padding: 0.2em 1em; min-height: 10px;

				img{
					height: 1.3em; margin: 0 5px;
				}


				&:focus, &:active, &:hover {
					box-shadow: 0 1px 8px rgb(69 63 63 / .15);
					color: rgb(195 135 65);
					/*background: linear-gradient( 282deg, rgb(210 153 86) 4%, rgb(229 176 113) 44%, rgb(245 223 197) 67%, rgb(229 176 113) 98% );*/
				}

			}
		}
	}

}

#promo-banner{
	background-color: #f4f3f3; text-align: center; padding: 0;

	div {
		min-height: 600px; max-height: 700px; 
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 100%; /* fills height, crops width */
	}
}

#promo-content {
	font-style: italic; text-align: center; padding: 0;

	h2 {
		color: #554E4E; font-weight: 700; font-size: 20px; text-transform: uppercase; margin: 0;

		b { color: #000; font-weight: 800;}
	}

	h1 { 
		color: #222; font-weight: 800; font-size: 34px; margin: 0;
	}

	.action-btn, .primary-cta { 
		margin: 20px auto;

		a { min-width: 250px; margin: 5px 10px; display: block;}
	}
}

#tnc_container {
	padding-top: 20px;padding-bottom: 20px;

	#terms-and-conditions { 
		max-height: 150px; transition: max-height 1s ease; 

		ol li{color: #222; font-weight: 300; }
	}

	#terms-and-conditions {

		&.expanded {
			max-height: 1000px; /* large enough for full content */

			.fade-overlay { opacity: 0; }
		}

		.fade-overlay {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 160px;
			background-color: #f00;
			background: linear-gradient(to bottom, rgba(244,243,243,0), rgba(244,243,243,1));
			pointer-events: none;
			transition: opacity 0.5s ease;
			display: block;
			z-index: 999;
		}

		a {
			color:#000; text-decoration:underline; font-style: italic;

			&:hover { text-decoration:none; }
		}

	}

	a#show_tnc{ 
		font-size: 14px; color: #444 !important; font-style: italic;

		&:hover img { transform: scale(1.1) translateX(0) rotate(180deg); }
		img { filter: brightness(10%); transition: all 0.5s ease;}
	}

}

#blocks {

	.item-block {
		border-radius:16px; min-height: 140px;  border: 1px solid #fff; 
		position: relative;
		overflow: hidden;
		padding: 0;
		background-color: #fff;
		transition: all 0.3s ease;
		box-shadow: 0 2px 8px rgb(88 72 55 / .2);

		p {
			font-style:italic; color: #111; font-size: 14px; font-weight: 400; 
			z-index: 9; position: absolute; bottom: 0px; padding: 15px; margin: 0; width: 50%; line-height: 1em;

			span { display:block; font-size: 1.6em; font-weight: 700; line-height: 1em;}
		}

		img{
			transition: all 0.5s ease;
			max-height: 100%; z-index: 9;
			left: 30%;

			&.mobile-icon{
				left: 50%;
			}
		}

		&:after {
			content: "";
			position: absolute;
			top: 0;
			left: 43%;
			height: 100%;width: 100%;
			transition: all 0.5s ease;
			background-color: #f00;
			z-index: 1;
			background: linear-gradient( 293deg, rgb(121 16 9) .01%, rgb(201 16 4) 70.01% );
			clip-path: polygon( calc(0% + 43px) 0, calc(0% + 48px) 0, calc(0% + 6px) 100%, calc(0% + 15px) 100%, calc(0% + 57px) 0, 100% 0, 100% 100%, 0% 100% );
		}

		&:hover{
			transform: scale(1.03) translateZ(0);
			z-index: 999;
			/*left: 50%;*/

			&:after{
				transform: scale(1.1) translateZ(0);
				left: 48%;
			}

			img{ transform: scale(1.1) translateZ(0); }
		}

		/*** Tablet ***/
		@media (max-width: 960px) {
			min-height: 110px;
		
			&:after { left: 50%;}
			p{ padding: 10px; font-size: 16px; width: 50%;}
		}

		/*** mobile ***/
		@media (max-width: 640px) {
			min-height: 80px;
		
			&:after { left: 50%;}
			p{ 
				padding: 8px; font-size: 12px; width: 45%;
				span{ font-size: 1.1em;}
			}
		}
		

	}

	.block-container {
		div { 
			cursor:pointer; 

			&:nth-child(n+4) .item-block:after {
			/*&:nth-child(n+3) .item-block:after {*/
				background: linear-gradient( 159.63deg, rgb(85 78 78) 2.81%, rgb(22 20 20) 95.98% );
			}
		}
	}

}

footer { 
	margin-top: 70px; padding: 0px;

	.uk-container {
		z-index: 1;
		margin-block-start: auto;
		padding-block-start: 32px;

		border-radius: 20px 20px 0 0;
		background: radial-gradient( 109% 100% at 50% 100%, rgb(22 20 20) 48%, rgb(38 34 34) 77%, rgb(53 49 49) );
		text-align: center;


		.links-container {
			/*display:flex;  justify-content: space-evenly; margin: 10px 0;*/

			ul { 
				list-style-type: none; display: flex; justify-content: center; align-items: center;
				margin-bottom: 10px;

				li { padding: 0.5em 1em;}

				@media (max-width: 640px) {
					flex-direction: column;
				}

			}
			a { 
				font-weight: 700; color: #ede3d8; transition: all 0.5s ease; text-shadow: 1px 1px 2px #000;
				&:hover{ color: #e5b071;}
			}
		}

		.payments {
			margin-bottom: 2em;
			button {
				background-color: #353131; border: 1px solid #453f3f; border-radius: 20px; transition: all 0.5s ease; margin: 5px;

				&:hover{ background-color: #453f3f; border: 1px solid #635b5b; }
				img{ max-height: 30px; min-height: 30px;}
			}

			a {
				font-size: 13px; font-weight: 700; color: #ede3d8; transition: all 0.5s ease; text-shadow: 1px 1px 2px #000; font-style: italic;

				&:hover{ color: #e5b071; text-decoration: none;}
			}
		}

		.copyrights {
			font-size:12px; line-height: 2.5em; color:rgb(99 91 91); padding-bottom: 20px; padding-bottom:15px; 

			p { margin: 0; }

			@media (max-width: 640px) {
				padding-bottom:20px; 
			}
		}

	}

	@media (max-width: 960px) {
		padding: 0;
	}
}

.uk-modal { background: rgba(0,0,0,0.8); }
.uk-modal-dialog{
	border-radius: 22px;
	width: 500px;

	&:before{
		inset: -4px;
		position: absolute;
		z-index: -1;
		border-radius: 22px;
		border: 1px solid transparent;
		background: 
			radial-gradient( 73% 100% at 50% 100%, rgb(207 181 151), rgb(124 102 78) ) padding-box,
			linear-gradient( 282deg, rgb(195 135 65) 4%, rgb(241 208 169) 44%, rgb(248 231 212) 67%, rgb(210 153 86) ) border-box;
		content: "";
		box-sizing: border-box;
	}
	.uk-close {
		transform: scale(1.5);
		top: 22px;
		right: 65px;

		svg line{color: rgb(99, 91, 91); stroke-width: 3px; }
		&:hover svg line{color: #a09696; }

	}

	.uk-modal-body{
		position: relative;
		border-radius: 18px;
		border: 1px solid #fff;
		background-color: #fff;
		z-index: 999;
		background-image: radial-gradient( 105% 89% at 50% 100%, rgb(255 255 255), rgb(250 239 226) 50%, rgb(217 212 212) );
		box-shadow: 0 20px 60px rgb(218 163 98 / .4), 0 6px 16px rgb(0 0 0 / .1);
		padding: 22px 65px;


		h3, p { color:#000; }


		p { font-size:  2em;  font-weight: 400;}
		p span { font-weight: 700; }


		hr {
			height: 1px;
			border: 0;
			border-bottom: 1px solid transparent;
			border-image: linear-gradient( 90deg, rgb(180 169 169 / 0), rgb(180 169 169) 50%, rgb(180 169 169 / 0) );
			/* gradient as border image */
			border-image-source: linear-gradient(90deg,
				rgba(180,169,169,0),
				rgba(180,169,169,1) 50%,
				rgba(180,169,169,0)
			);
			border-image-slice: 1;
		}

		ul {
			list-style: none;
			padding: 0;

			li {
				display: flex;
				gap: 8px;
				padding-block: 16px;
				border-bottom: 1px solid transparent;
				border-image: linear-gradient( 90deg, rgb(180 169 169 / 0), rgb(180 169 169) 50%, rgb(180 169 169 / 0) );
				/* gradient as border image */
				border-image-source: linear-gradient(90deg,
					rgba(180,169,169,0),
					rgba(180,169,169,1) 50%,
					rgba(180,169,169,0)
				);
				border-image-slice: 1;

				img.flag { border:1px solid #fff; border-radius: 6px; width: 25px; height: 25px; overflow: hidden; object-fit: cover;}

				div.language-details {
					display: flex;
					flex-direction: column;
					gap: 12px;

					h4 { color: #222; font-size:14px; font-weight:600; font-style:italic; margin: 0}

					> div {
						display: flex;
						flex-wrap: wrap;
						gap: 8px;
					}

					button {
						background: #fff;
						border-radius: 12px;
						border: 1px solid transparent;
						font-size: 16px;
						line-height: 1.4;
						color: #635b5b;
						box-shadow: 0 1px 8px rgb(69 63 63 / .15);
						display: inline-grid;
						grid-auto-flow: column;
						text-decoration: none;
						padding: 5px 7px;
						cursor: pointer;

						&:hover {
							color: #c38741;
						}

						&:active, &.active {
							color: #161414;
							border-color: #161414;
						}
						img {
							box-sizing: border-box;
							width: 12px;
							height: 12px;
						}

						.uk-icon {
							margin-right: 5px;

							svg polyline{color: rgb(0, 0, 0); stroke-width: 2px; }
						}

					}
				}

			}

		}
	}

}