/* Estilos do widget "Zyrgon Golf Scorecard". Prefixo .zyrgon-scorecard-
   para evitar conflitos com estilos do Elementor ou do tema. */

.zyrgon-scorecard-widget {
	width: 100%;
}

.zyrgon-scorecard-title {
	margin: 0 0 15px;
	font-size: 20px;
	font-weight: 700;
}

.zyrgon-scorecard-tables {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	justify-content: space-between;
}

.zyrgon-scorecard-table-wrap {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	max-width: 795px;
}

.zyrgon-scorecard-table-title {
	color: var(--Verde, #24461F);
	font-family: "Instrument Sans";
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-align: left;
	margin: 0 0 30px;
}

.zyrgon-scorecard-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.zyrgon-scorecard-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	font-family: inherit;
	border-bottom: 0 !important;
}

.zyrgon-scorecard-table th,
.zyrgon-scorecard-table td {
	color: var(--Verde, #24461F);
	text-align: center;
	font-family: "Instrument Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 160%;
	min-width: 90px;
	padding: 10px 0 !important;
	border-top: 0 !important;
}

.zyrgon-scorecard-table thead th {
	color: var(--Verde, #24461F);
	font-family: "Instrument Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 160%;
	text-align: center;
	border-top: 0;
	border-bottom: 1px solid;
	border-color: rgba(36, 70, 31,0.2);
}

.zyrgon-scorecard-hole-col {
	text-align: left !important;
	font-weight: 600 !important;
}

.zyrgon-scorecard-alt-col {
	background-color: rgba(225, 192, 123,0.2);
}

/* O reset.css do Hello Elementor aplica um listrado cinza nas linhas ímpares
   (table tbody>tr:nth-child(odd)>td/th), que conflita com o listrado por
   coluna deste widget. Usamos :where() no td/th para manter a regra mais
   específica que a do tema mas menos específica que .zyrgon-scorecard-alt-col
   abaixo, garantindo que o amarelo das colunas volte em qualquer linha. */
table.zyrgon-scorecard-table tbody > tr:nth-child(odd) > :where(td, th) {
	background-color: transparent;
}

table.zyrgon-scorecard-table tbody tr td.zyrgon-scorecard-alt-col,
table.zyrgon-scorecard-table tbody tr th.zyrgon-scorecard-alt-col {
	background-color: rgba(225, 192, 123, 0.2);
}

.zyrgon-scorecard-totals-row td,
.zyrgon-scorecard-totals-row th {
	border-top: 1px solid !important;
	font-weight: 700;
	border-bottom: 0 !important;
	border-color: rgba(36, 70, 31,0.2) !important;
}

@media screen and (min-width: 1561px){
	.zyrgon-scorecard-distance-col {
		width: 90px;
	}
	
}


td.zyrgon-scorecard-par-col {
    width: 90px;
}

@media ( max-width: 1560px ) and (min-width: 1351px){

	.zyrgon-scorecard-table thead th {
		font-size: 15px;
	}

	.zyrgon-scorecard-table th, .zyrgon-scorecard-table td {
		font-size: 15px;
	}

	.zyrgon-scorecard-table th, .zyrgon-scorecard-table td {
		min-width: 75px;
	}
	
}

@media screen and (max-width: 1350px) and (min-width: 1101px){
	
	.zyrgon-scorecard-table thead th {
		font-size: 13px;
	}

	.zyrgon-scorecard-table th, .zyrgon-scorecard-table td {
		font-size: 13px;
	}

	.zyrgon-scorecard-table th, .zyrgon-scorecard-table td {
		min-width: 60px;
	}
}

@media screen and (max-width: 1100px){
	
	.zyrgon-scorecard-table-wrap {
		max-width: 100%;
	}
	
	.zyrgon-scorecard-tables {
		flex-direction: column;
	}
	
}

@media ( max-width: 767px ) {

	/* Em vez de encolher fonte/padding (o que ficava demasiado apertado),
	   mantém-se o espaçamento normal das colunas: cada tabela ganha o seu
	   próprio scroll horizontal (zyrgon-scorecard-table-scroll), com o título
	   (Front Nine/Back Nine) fora dessa área para se manter sempre visível. */
	.zyrgon-scorecard-table-scroll {
		padding-bottom: 4px;
	}
}