/*
Theme Name: Top Casino Bonus
Theme URI: https://topcasinobonus.pt
Description: Child theme Top Casino Bonus, out of twentytwentyfive
Author: Pedro Ribeiro
Author URI: https://topcasinobonus.pt
Template: twentytwentyfive
Version: 1.0.0
*/

body {
background-color: #000000; /*#333b5b*/
color: #FFFFFF;
}

.pageMainContent {
	line-height:1.5;
}

h3 {font-weight:700;}

.greenCTA a {
	background-color: #45a049!important;
	color: #FFFFFF!important;
}

.playnow-sash {
    position: absolute;
    top: 0;
    right: 0;	
    /*transform: translateX(-50%);*/
    background-color: #FFFFFF;
    color: #ffffff;
	width:20px;
	height:20px;
    padding: 2px 4px;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
	z-index: 1;
}

.playnow-sash img {
	width: 20px!important;
    height: 20px!important;
	margin-bottom: 8px!important;
}

.game-sash {
    position: absolute;
    bottom: 0;
    left: 50%;
	width:100%;
    transform: translateX(-50%);
    background-color: rgba(51, 59, 91, 0.9); /* Azul forte com leve transparência */
    color: #ffffff;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 500;
    padding: 2px 4px;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
	z-index: 1;
}

.sash-estreia {
	background-color: #da4a64;	
}

.sash-recente {
	
}

.sash-destaque {
	background-color: rgba(239, 3, 77, 1);
	
}

.sash-megaways {
	background-color: #d8c170;
	color: #252113;
}

.wp-post-image {
	/*border-radius:16px;
	border-top-left-radius:0px;
	border-top-right-radius:0px;*/
}

.categoryGameTile a img {
	border-radius:8px!important;
}


.offer-paragraph{
	font-size:0.8em;
}

.lineHeightTall {
	line-height:2.5;
}

:where(.wp-site-blocks *:focus) {
	outline-width: 0px!important;
	outline-style: solid!important;
}

main {
	margin-top:0px!important;
	padding-top:0px!important;
}

.rank-math-breadcrumb {
	font-size: 0.7em;
}

.ub_table-of-contents-header-container {
    display: none;
}

.pagBrancoHeader img {
		height:260px;
}

.allCaps {
	text-transform: uppercase;
	font-weight:800;
	letter-spacing: -4px;
}

        /* Container que mantém o ratio 16:9 */
        .iframe-container {
            position: relative;
            width: 100%; /* Ocupa toda a largura disponível */
            padding-top: 40%; /* 16:9 = 9 / 16 * 100 */
        }

        /* O iframe ocupa todo o espaço disponível dentro do container */
        .iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

.fullscreen-btn {
            display: block;
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            background-color: #000000;
            color: white;
            border: none;
            border-radius: 8px;
			position: relative;
			bottom: -16px;
			left: calc(100% - 64px);
			z-index: 1 !important;
        }

.bold {
	font-weight:800;
}

.containerMenuJogos{
	gap:4px;
}

.itemMenuJogos a{
	background-color: #333b5b !important;
	/*background: linear-gradient(130deg,rgb(79,196,245) 0%,rgb(218,74,100) 100%);*/
    color: #a5a9ab!important;
    border: 0px;
    font-size: 0.7em;
    padding: 4px 16px !important;
    margin: 0px;
	letter-spacing: 0px;
	border-radius:8px!important;
}

.atividade a{
	color: #FFFFFF!important;	
}

.bolden {
	font-weight:800;
	letter-spacing: -4px;
}

.underlinha {
	background-color: black;
    width: fit-content;
    padding: 10px 20px;
}

.noUnderline a {
	text-decoration: none!important;
}

.blogPageTitle {
	font-size: 22px!important;	
}

.boldtitulo-banner {
	text-transform: uppercase;
    font-size: 3em!important;
    letter-spacing: -4px;
    font-weight: 800!important;
	margin-top: -20px;
}

.icon-banner-1 {
	display: inline;
    top: 10%;
    position: absolute;
    right: 10%;
	animation: anima-ico-1 2s ease-in-out infinite;
	display: none;
}

.icon-banner-2 {
	display: inline;
    bottom: 10%;
    position: absolute;
    left: 10%;
	animation: anima-ico-2 2s ease-in-out infinite;
	display: none;
}

@keyframes anima-ico-1 {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(10px) rotate(0deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes anima-ico-2 {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.wp-block-details summary::marker {
    content: "+ ";
    font-size: 22px;
	font-weight: 900;
    color: #FFFFFF;
}

.wp-block-details[open] summary::marker {
    content: "-  ";
}

.raiseFive {
	z-index:5!important;
	position:relative;
}

h2::before {
    content: "◽️ " ; /* Elemento vazio para o quadrado */
    display: inline-block;
	font-weight:900;
    /*width: 16px;
    height: 16px;*/
	margin-left: -2px;
    margin-right: 4px; /* Espaço entre o quadrado e o texto */
	/*color: linear-gradient(130deg, #4fc4f5, #da4a64); /* Gradiente diagonal */
    /*background: linear-gradient(130deg, #4fc4f5, #da4a64); /* Gradiente diagonal */
    /*border-radius: 1px; /* Opcional: pode arredondar ligeiramente os cantos */
	background: linear-gradient(130deg, #4fc4f5, #da4a64);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.introtext {
	padding-top:32px!important;
	padding-bottom:32px!important;
}

.casinoCTA a {
	background-color: #008000!important;
	color: #FFFFFF!important;
	font-weight: 800!important;
	border-radius: 16px!important;
}

.gradientBgGray {
	background: linear-gradient(130deg, #FFFFFF, #EDEDED)!important;
}

.wp-block-table.is-style-stripes td, .wp-block-table.is-style-stripes th {
    vertical-align: top;
	padding: 16px;
}

.quick4MenuIcons {
	margin-inline-start: 0!important;
    margin-inline-end: 0!important;
}


.quickMenuPill {
	    pointer-events:auto!important;
		/*box-shadow: -4px 4px 0px #ffffff;*/
}

.quickMenuPill:hover {
	    background: linear-gradient(130deg, rgb(60 197 255) 0%, rgb(219 22 56) 100%)!important;
		/*box-shadow: 4px 4px 0px rgb(219 22 56);*/
}

.wp-element-button {
	background-color: #ffffff!important;
	color: #000000!important;
}

/* ----- */

.affiliate-table {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
	color: #000;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.table-header {
    display: flex;
    background: #111;
    color: white;
    font-weight: bold;
    padding: 15px;
    text-align: center;
}

.table-header .column {
    flex: 1;
    padding: 10px;
}

.table-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 15px;
	background: linear-gradient(130deg, #FFFFFF, #EDEDED);
}

.table-row:last-child {
    border-bottom: none;
}

.column {
    flex: 1;
    text-align: center;
    padding: 10px;
}

.col-titulo {
	font-size:0.7em;
}

.casino-site img {
    width: 120px;
    border-radius: 5px;
}

.bonus {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offer-box {
    background-color: #f8f8f8;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    text-align: center;
    width: 100%;
}

.bonus p {
    margin: 0px;
}

.bonus a {
    font-size: 12px;
    color: #666666;
    text-decoration: none;
}

.ratings a {
    display: block;
    font-size: 12px;
    color: #007bff;
    text-decoration: none;
    margin-top: 5px;
}

.score {
    font-size: 24px;
    font-weight: bold;
    color: #4CAF50;
}

.get-bonus {
    display: inline-block;
    padding: 16px 32px;
    background-color: #008000;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 16px;
    margin-bottom: 5px;
}

.get-bonus:hover {
    background-color: #45a049;
}

.offer-head{
	font-size:0.8em;
}
.offer-subhead{
	font-size:1.5em;
}
.offer-sigterms{}

.play-now a {
    font-size: 16px;
    color: #ffffff;
    text-decoration: none;
}

.blogCard {
	min-height:472px!important;
}

.hp-blog-cards li {
	padding: 16px;
	box-sizing: border-box;
	/*background-color:white;*/
	background: linear-gradient(130deg, #FFFFFF, #EDEDED);
	color:black;
	border-radius: 16px;
	/*min-height: 472px!important;*/
	z-index:2;
}

.hp-blog-cards li div img {
	border-radius: 16px;
}

.hp-blog-cards li a {
	font-weight: 800;
}

.wp-block-latest-posts__post-title {
	color: #000000!important;
	font-weight:800;
	text-decoration: none!important;
	font-size: 20px;
		z-index:2;
}

.wp-block-latest-posts__post-title:hover {
	text-decoration: underline;
}

.wp-block-latest-posts__post-date {
	font-size:0.7em;
}

.wp-block-latest-posts__post-excerpt {
	font-size:0.7em!important;
}

.wp-block-latest-posts__read-more{
	display:block;
	margin-top:16px;
	color: #000000!important;
	text-decoration: none!important;
	padding: 8px 16px;
    border: 1px solid #efefef;
	font-weight: 400 !important;
}

.wp-block-latest-posts__read-more:hover{
	text-decoration: underline!important;
}

.wp-block-heading {
	z-index:2!important;
	position: relative;
}

.newsContainer {
	background: url('https://topcasinobonus.pt/wp-content/uploads/pattern-01-lines.png') repeat center/auto!important;
}

.newsContainer::after {
	content: "";
    background: linear-gradient(180deg, rgb(19, 19, 35) 0%, rgb(51, 59, 91) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;	
	mix-blend-mode: multiply;
}

.containerJogosWhiteBg::after {
	background: url('https://topcasinobonus.pt/wp-content/uploads/tcb-patt-transparent-whiteIcons.png') repeat center/auto!important;
	/*mix-blend-mode: multiply;*/
	content: "";
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.1;	
}

.containerJogos {
	background: url('https://topcasinobonus.pt/wp-content/uploads/tcb-patt-new2.png') repeat center/auto!important;
}

.containerJogos::after {
	content: "";
    background: linear-gradient(180deg, rgb(19, 19, 35) 0%, rgb(51, 59, 91) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;	
	mix-blend-mode: multiply;
}

.jogosTitle, .jogosDescription, .games-carousel-container {
	z-index:2!important;
	position: relative;
}

.faqContainer{
	background-color: #DA4A64;
}

.faqContainer::after{
	content: "";
	background: url('https://topcasinobonus.pt/wp-content/uploads/tcb-patt-question.png') repeat center/auto!important;
	position: absolute;
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;	
}

.faqContentContainer {
	z-index:2!important;
	position: relative;
}

button {
	font-family: inherit!important;
}


.wpcf7-text, .wpcf7-textarea {
	padding: 8px;
	font-size: 1em;
	font-family: inherit!important;
}

.wpcf7-submit {
	padding:16px;
	font-family: inherit!important;
	background-color: #008000!important;
	color: #FFFFFF!important;
	font-weight: 800!important;
	border: 0px!important;
	border-radius: 16px!important;
	
}

/* * * * * Game Caro * * * * */

.games-carousel-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.games-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px;
}

.games-grid-one {
	display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    padding: 8px;
}

.game-item {
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.game-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.game-image-override div a img{
	width: 100%!important;
    height: 100%!important;
}

.game-image:hover {
    transform: scale(1.05);
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 8px;
    border-radius: 20%;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
}

.carousel-nav.prev {
    left: 5px;
}

.carousel-nav.next {
    right: 5px;
}

.games-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px;
   -ms-overflow-style: none;  /* Hide scrollbar for Internet Explorer and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    overflow-x: auto;
}

.games-carousel::-webkit-scrollbar {
    display: none;
}

/* Tamanhos das imagens baseados no tipo */
.game-image.square {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.game-image.vertical {
    width: 150px;
    height: 300px;
    object-fit: cover;
}

.game-image.wide {
    width: 300px;
    height: 150px;
    object-fit: cover;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .game-image.square {
        width: 120px;
        height: 120px;
    }

    .game-image.vertical {
        width: 120px;
        height: 240px;
    }

    .game-image.wide {
        width: 240px;
        height: 120px;
    }
}

.games-carousel {
    cursor: grab;
    user-select: none;
    overflow-x: auto;
    display: flex;
    gap: 10px;
    padding: 10px;
    scroll-behavior: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.games-carousel::-webkit-scrollbar {
    display: none;
}

.games-carousel.dragging {
    cursor: grabbing;
}

/* Agora não bloqueia os eventos do clique */
.games-carousel img {
    user-select: none;
    -webkit-user-drag: none;
}

.triptico{
	position: relative;
    z-index: 2 !important;	
}


/* * * * * FIXES * * * * */ 

.detalhes-jogo {
	font-size:14px;
}

.detalhes-jogo p { margin:0px; }

.whiteContentContainer {
	/*margin-top:32px!important;
	margin-bottom:32px!important;
	padding-top:32px!important;*/
	padding-bottom:32px!important;
}

.wp-block-ub-tabbed-content .wp-block-ub-tabbed-content-tabs-content {
    border: 0px solid #d3d3d3; 
	padding: 16px 0px;
}

.wp-block-ub-tabbed-content .wp-block-ub-tabbed-content-tab-title-wrap {
    border: 1px solid #d3d3d3;
	border-radius: 8px;
}

.game-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    grid-template-rows: repeat(2, auto); /* 2 linhas */
    gap: 4px; /* Espaçamento entre os itens */
    max-width: 800px; /* Ajusta a largura */
    margin: 20px auto; /* Centraliza */
}

.game-meta-item {
    /*background: #333333;*/
	border: 1px solid #333333;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
	flex-flow: column-reverse;
	max-block-size: fit-content;
}

.game-meta-label {
    font-weight: 300;
    color: #666666;
	font-size:0.7em
}

.game-meta-value {
    color: #000000;
	font-size: 1.5em;
}

/* * * * * Game Calendar * * * * */

.game-timeline-container {
    width: 100%;
    overflow-x: auto;
    padding: 0px;
}

.timeline {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    white-space: nowrap;
    overflow-x: auto;
    padding: 16px 0;
	gap:4px;
}

.timeline-item {
    position: relative;
    text-align: center;
    min-width: 150px;
}

.timeline-date {
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
}

.timeline-content {
    margin-top: 4px;
    background: #007bff;
    color: white;
    padding: 0px;
    border-radius: 8px;
    font-size: 4px;
	overflow:hidden;
}

.past .timeline-content {
    background: #333B5B; 
}

.future .timeline-content {
    background: #DA4A64;
}

/* Adiciona efeito hover para destacar links */
.timeline-content a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
	overflow: hidden;
    width: 100% !important;
    display: block;
}

.timeline-game-image {
    width: 100%; /* Ajusta conforme necessário */
    height: auto;
    border-radius: 8px;
    margin-bottom: 0px;
}
.timeline-game-image:hover {
	transform: scale(1.05);
	    transition: transform 0.3s ease-in-out;
}
.timeline-content a:hover {
    text-decoration: underline;
}



/* * * * * Verificacao de Idade * * * * */

.age-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.age-modal-content {
    background: #FFFFFF;
	color: #000000;
    padding: 16px;
	padding-bottom:32px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 400px;
}

.age-modal button {
    background: #28a745;
    color: white;
    padding: 10px 16px;
    border: none;
	border-radius:16px;
    cursor: pointer;
    margin-top: 10px;
}

.age-modal button:hover {
    background: #218838;
}

.deny-btn {
    background: #ff141a!important;
}

.deny-btn:hover {
    background: #df1218!important;
}

.hidden {
    display: none !important;
}

.age-modal a {
    color: #007bff;
    text-decoration: none;
}

.age-modal a:hover {
    text-decoration: underline;
}

/* * * * * Responsiveness * * * * */ 

@media (min-width: 1025px) {
	.hideXL {
		display:none!important;
	}
	.showXL{
		display:block!important;
	}
	
}

@media (max-width: 1024px) {
	.hideSM {
		display: none!important;
	}
	.showSM {
		display: block!important;
	}
	.pagBrancoHeader img {
		height:180px;
	}
	.greenCTA {
		margin:0 auto!important;
	}
	.brandsBarClickable {
		grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr))!important;
		gap: 4px!important;
    	padding: 0px !important;
	}
	.noUnderline a {
		font-size:24px;
		font-weight:700;
	}
	.hp-blog-cards li {
		padding: 8px;
		padding-bottom:16px;
		border-radius:8px;
	}
	.hp-blog-cards li div img {
    	border-radius: 8px;
	}
	.wp-block-latest-posts.is-grid li {
		margin:0px;
		margin-bottom:8px;
	}
	.game-meta-grid {
    	grid-template-columns: repeat(2, 1fr); /* 2 colunas */
   		grid-template-rows: repeat(3, auto); /* 3 linhas */
		margin-bottom: -64px !important;
	}
	
	.games-grid-one {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
		padding: 4px;
	}	
	
	.casinoCTA, .casinoContentBox {
		margin-top:32px!important;
	}	
			
    .table-header {
        display: none;
    }
    .table-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    .column {
        width: 100%;
    }
	.banner-content {
		
		align-items: flex-end;
		padding: 0;
		min-height: 300px!important;
	}
	.subtitulo-banner {
		font-size:16px!important;	
	}
	.boldtitulo-banner {
    	font-size: 1.8em!important;
    	letter-spacing: -2px;
		margin: 0px;
	}
	.custom-logo {
		width: 80px!important;
	}
	.introtext {
		padding-top:0px!important;
		padding-bottom:0px!important;
	}
	.icon-banner-1 {
    	top: 2%;
		right: 2%;
	}
	.icon-banner-1 div {
    	width:82px!important;
		height:82px!important;
	}
	.icon-banner-2 {
    	bottom: 8%;
    	left: -32px;	
	}
	.icon-banner-2 div {
    	width:232px!important;
		height:232px!important;
	}
	.offer-head{}
	.offer-subhead{
		font-size:1.7em;
	}
	.offer-sigterms{}
	.grelhaJogos{
		grid-template-columns: repeat(3, 1fr)!important;
        column-gap: 8px!important;
        row-gap: 8px!important;
    }
	.grelhaJogos li figure{
		margin:2px;
    }
}


/* Remove o marcador padrão */
.wp-block-details summary::marker {
    content: ""; /* Remove o marcador padrão */
}

/* Estiliza o summary e adiciona o "+" à direita */
.wp-block-details > summary {
    display: flex;
    justify-content: space-between; /* Faz com que o título fique à esquerda e o "+" à direita */
    align-items: center;
    cursor: pointer;
    /*font-weight: bold;*/
    position: relative;
	padding:8px;
	padding-left:16px;
	border:1px solid #000000;
}

/* Adiciona o "+" manualmente apenas no primeiro nível */
.wp-block-details > summary::after {
    content: "+"; /* Define o conteúdo padrão */
    font-size: 22px;
    font-weight: 900;
    color: #FFFFFF;
    margin-left: auto; /* Empurra o "+" para a direita */
}

/* Muda para "-" apenas se esse accordion estiver aberto */
.wp-block-details[open] > summary::after {
    content: "-"; /* Muda para "-" quando aberto */
}

.darkAccordion summary{
	border:1px solid #000000!important;
	background-color: #FFFFFF;
	color:#000000;
}


.darkAccordion summary::after{
	color:#000000!important;;
}

.whiteBorder summary{
	border:1px solid #FFFFFF!important;
}

.lightAccordion summary{
	border:1px solid #000000!important;
	background-color: #FFFFFF!important;
	color:#000000!important;
}

.lightAccordion summary::after {
	color:#000000!important;
}

.lightAccordion summary strong{
	font-weight:500!important;
}