@charset "utf-8";

#main h2,
#main h3 	{
	/*text-transform:uppercase;*/
}

/* ============================================
   HOW IT WORKS SECTION
   ============================================ */

.info-section {
    margin: 2rem 0;
}

.info-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #333;
}

.info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.info-card {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}

.info-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4a90a4 0%, #357a8c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.info-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.info-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: #333;
}

.info-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* ============================================
   WHY TRUST US SECTION
   ============================================ */

.trust-section {
    background: #fff;
    border: 2px solid #4a90a4;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
}

.trust-section h2 {
    text-align: center;
    margin: 1rem 0 1.5rem;
    color: #333;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.trust-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-icon i {
    font-size: 1.25rem;
    color: #fff;
}

.trust-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

.trust-text strong {
    color: #333;
    display: block;
    margin-bottom: 0.25rem;
}

.trust-cta {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.trust-cta a {
    color: #4a90a4;
    font-weight: 600;
}

.trust-cta a:hover {
    text-decoration: underline;
}

/* ============================================
   GAME PANELS & BADGES
   ============================================ */

#games 		{
	--games-font-size:	17px;
	--game-gap:			25px;
	--border-radius: 	3px;
	--logo-height:		150px;
	--game-hd:			35px;
	--game-line1:		20px;
	--game-line2:		15px;
	--game-line3:		18px;
	--game-prize:		70px;
}
#games 		{ }

#games .game-panels {
	display:		flex;
	flex-wrap:		wrap;
	justify-content:space-between;
	align-items: 	stretch;
	gap:			var(--game-gap);
	margin:			var(--game-gap) 0;
	font-size:		var(--games-font-size);
}

@keyframes bounce {
	0%, 100% { transform: translateY(-50%); }
	50% { transform: translateY(-60%); }
}
.game-panel {
	position: relative;
	width:calc(33% - (var(--game-gap) * 0.6));
	max-width:500px;
	background:#999;
	border-radius:var(--border-radius);
	text-align:center;
	padding:0;
	text-align:center;
	line-height:100%;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s, box-shadow 0.3s ease;
}
.game-panel:hover {
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
	transform: translateY(calc(var(--game-gap) / -2));
}

/* Game Badges */
.game-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 10;
    white-space: nowrap;
}

/* Badge colour variations based on parent panel */
#gameFreeLottoClub .game-badge {
    background: linear-gradient(135deg, #e63946 0%, #c1121f 100%);
}

#gamePickMyPostcode .game-badge {
    background: linear-gradient(135deg, #2a9d8f 0%, #1d7a6e 100%);
}

#gameLotteryCoUk .game-badge {
    background: linear-gradient(135deg, #457b9d 0%, #1d3557 100%);
}

#gameFreeBirthdateLottery .game-badge {
    background: linear-gradient(135deg, #9b5de5 0%, #7b2cbf 100%);
}

#gameLuckySpinner .game-badge {
    background: linear-gradient(135deg, #f77f00 0%, #d62828 100%);
}

a.panel-content { display:block; text-decoration:none; }
#games .panel-content {
	padding:1em 1em 1.5em;
	overflow:hidden;
	margin:0;
	z-index:3;
}
#games .panel-content .game-logo { margin:0.5em auto; }
#games .panel-content .game-logo img { display:block; height:var(--logo-height); margin:0 auto; }
#games .panel-content p { margin:0 auto; padding:1px 0 8px; line-height:140%; color:#FFF; }
#games .panel-content h4,
#games .panel-content .prize b {
	color:#FFF;
	letter-spacing:1px;
	text-shadow:0 1px 2px #000;
}
#games .panel-content h4 {
	padding:7px 0 7px 1px;
	margin:0;
	font-size: var(--game-hd);
	font-weight:700;
}
#games .panel-content h4 a {
	text-decoration:none;
	color:inherit !important;
}
#games .panel-content h4 a:hover {
	color:#FFC;
}
#games .panel-content p em 		{ font-weight:300; opacity:0.8; }
#games .panel-content p.line1 	{ font-size:var(--game-line1); font-weight:500; }
#games .panel-content p.line2 	{ font-size:var(--game-line2); }
#games .panel-content p.line3 	{ font-size:var(--game-line1); font-weight:500; }
#games .panel-content p.line4 	{ font-size:var(--game-line2); }
#games .panel-content p.line5 	{ font-size:var(--game-line3); font-weight:500; max-width:250px; }
#games .panel-content .prize b 	{
	display:block;
	padding:0.5em 0 0.5em 1px;
	margin:0 auto;
	font-size: var(--game-prize);
	font-weight:900;
	font-style:normal;
}
#games .panel-content  .btn-row { max-width:200px; }
#games .panel-content  a.btn,
#games .panel-content  .btn {
	background:#FFF;
	border:2px solid #FFF;
	color:#28006A;
	font-size:1em;
	font-weight:700;
	margin:0.5em auto;
}
#games .panel-content  a.btn-alt,
#games .panel-content  .btn-alt {
	background:none;
	border:1px solid #FFF;
	color:#FFF;
	font-size:0.9em;
}
#games .panel-content  .btn:hover {}

#gamePickMyPostcode 		{ background:radial-gradient(circle at 50% 10%, #4686D9, #4686D9 10%, #3D6BC0); }
#gameFreeLottoClub			{ background:radial-gradient(circle at 50% 10%, #FDC509, #FDC509 10%, #F67A06); }
#gameLotteryCoUk 			{ background:radial-gradient(circle at 50% 10%, #03A7F5, #03A7F5 10%, #0392D4); }
#gameFreeCashLotto 			{ background:radial-gradient(circle at 50% 10%, #FECB43, #FECB43 10%, #E7A801); }
#gameFreeBirthdateLottery	{ background:radial-gradient(circle at 50% 10%, #B5D0F2, #B5D0F2 10%, #608FCA); }
#gameLuckySpinner	 		{ background:radial-gradient(circle at 50% 10%, #FF813B, #FF813B 10%, #FF583F); }

#games #gamePickMyPostcode .panel-content p.line5 	{ max-width:200px; }
#games #gameFreeCashLotto .panel-content p.line5,
#games #gameLuckySpinner .panel-content p.line5 	{ max-width:270px; }

/* ============================================
   RESPONSIVE - INFO & TRUST SECTIONS
   ============================================ */

@media only screen and (max-width: 768px) {
    .info-section,
    .trust-section {
        padding: 1.5rem;
    }
    
    .info-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .info-card {
        max-width: 100%;
    }
    
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .trust-item {
        gap: 0.75rem;
    }
    
    .trust-icon {
        width: 45px;
        height: 45px;
    }
    
    .trust-icon i {
        font-size: 1.1rem;
    }
}

/* ============================================
   RESPONSIVE - GAME PANELS
   ============================================ */

@media only screen and (min-width: 1101px) and (max-width: 1300px) {
	#games 		{
		--games-font-size:	16px;
		--game-gap:			20px;
		--logo-height:		140px;
		--game-hd:			32px;
		--game-line1:		18px;
		--game-line2:		13px;
		--game-line3:		16px;
		--game-prize:		65px;
	}
}

@media only screen and (min-width: 1101px) and (max-width: 1200px) {
	#games 		{
		--games-font-size:	15px;
		--game-gap:			18px;
		--logo-height:		130px;
		--game-hd:			30px;
		--game-line1:		17px;
		--game-line2:		13px;
		--game-line3:		15px;
		--game-prize:		50px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 1100px) {
	.game-panel { width:calc(50% - (var(--game-gap) / 2)); }
}
@media only screen and (min-width: 600px) and (max-width: 950px) {
	#games 		{
		--games-font-size:	16px;
		--game-gap:			20px;
		--logo-height:		140px;
		--game-hd:			32px;
		--game-line1:		18px;
		--game-line2:		13px;
		--game-line3:		16px;
		--game-prize:		65px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
	#games 		{
		--games-font-size:	15px;
		--game-gap:			17px;
		--logo-height:		130px;
		--game-hd:			30px;
		--game-line1:		17px;
		--game-line2:		13px;
		--game-line3:		15px;
		--game-prize:		55px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 725px) {
	#games 		{
		--games-font-size:	14px;
		--game-gap:			14px;
		--logo-height:		110px;
		--game-hd:			28px;
		--game-line1:		16px;
		--game-line2:		12px;
		--game-line3:		14px;
		--game-prize:		45px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 675px) {
	#games 		{
		--games-font-size:	13px;
		--game-gap:			12px;
		--logo-height:		90px;
		--game-hd:			24px;
		--game-line1:		14px;
		--game-line2:		11px;
		--game-line3:		13px;
		--game-prize:		40px;
	}
}
@media only screen and (max-width: 600px) {
	.game-panel { width:100%; }
    
    .game-badge {
        top: -6px;
        right: -6px;
        font-size: 0.65rem;
        padding: 0.35rem 0.6rem;
    }
}
@media only screen and (max-width: 500px) {
	#games 		{
		--games-font-size:	16px;
		--game-gap:			20px;
		--logo-height:		140px;
		--game-hd:			32px;
		--game-line1:		18px;
		--game-line2:		13px;
		--game-line3:		16px;
		--game-prize:		65px;
	}
}
@media only screen and (max-width: 440px) {
	#games 		{
		--games-font-size:	15px;
		--game-gap:			17px;
		--logo-height:		130px;
		--game-hd:			30px;
		--game-line1:		17px;
		--game-line2:		13px;
		--game-line3:		15px;
		--game-prize:		55px;
	}
}
@media only screen and (max-width: 400px) {
	#games 		{
		--games-font-size:	14px;
		--game-gap:			14px;
		--logo-height:		110px;
		--game-hd:			28px;
		--game-line1:		16px;
		--game-line2:		12px;
		--game-line3:		14px;
		--game-prize:		45px;
	}
}
@media only screen and (max-width: 360px) {
	#games 		{
		--games-font-size:	13px;
		--game-gap:			12px;
		--logo-height:		90px;
		--game-hd:			24px;
		--game-line1:		14px;
		--game-line2:		11px;
		--game-line3:		13px;
		--game-prize:		40px;
	}
}