.active-draw {
	display: grid;
    gap: 20px;
    padding: 10px 15px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
    grid-template-columns: 1fr 1fr 1fr;
}

.active-draw.group-2,
.active-draw.group-7 {
	grid-template-columns: 1fr 1fr;
}

.active-draw.group-4 {
	grid-template-columns: .6fr 1fr 1fr;
}

.active-draw.group-5 {
	grid-template-columns: .5fr 1.2fr 1fr;
}


.active-draw.group-1 .last-draw,
.active-draw.group-1 .numbers,
.active-draw.group-4 .last-draw,
.active-draw.group-4 .numbers {
	justify-content: center;
}

.active-draw.group-2 .gcl-group,
.active-draw.group-5 .gcl-group,
.active-draw.group-7 .gcl-group {
	display: flex;
    justify-content: space-between;
    gap: 50px;
}

.active-draw.group-2 .gcl-group h4,
.active-draw.group-5 .gcl-group h4,
.active-draw.group-7 .gcl-group h4 {
	font-size: 18px;
}

.active-draw h3 {
	margin: 0;
}

/* Подравняване на вътрешните блокове */
.active-draw .logo,
.active-draw .last-draw,
.active-draw .next-draw {
  display: grid;
	justify-content: left;
  align-items: center;
	text-align: center;
}
.active-draw .logo {
	text-align: left;
}
.active-draw .next-draw {
	justify-content: right;
}

.active-draw .logo img {
	width: 100px;	
}

.active-draw .logo a {
	text-decoration: none;
	color: #000;
}

/* Разстояния */
.active-draw .last-draw {
  gap: 5px;
}

.active-draw .numbers {
  display: flex;
}

/* Стил на числата */
.active-draw .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;
	margin: 0 4px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  font-size: 13px;
}

/* Таймер */
.active-draw .next-draw > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.countdown-timer {
  display: flex;
  gap: 5px;
}

.countdown-timer span {
    font-size: 14px;
    color: #fff;
    background: #d20f34;
    padding: 2px 6px;
    border-radius: 5px;
}

@media ( max-width: 768px ) {
	.active-draw {
		display: block;
	}
	.active-draw h3 {
		margin-bottom: 20px;
	}
	.active-draw .next-draw {
		margin-top: 20px;
	}
	.active-draw .logo {
		text-align: center;
		display: block;
	}
	.active-draw.group-2 .gcl-group, 
	.active-draw.group-5 .gcl-group,
	.active-draw.group-7 .gcl-group,
	.active-draw .last-draw {
    	display: block;
		width: 100%;
		text-align: center;
	}
	.active-draw .gcl-group > div {
		margin-top: 15px;
	}
}







.lotto-history {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin-top: 15px;
}

/* Header */
.lotto-history thead {
  background: #222;
  color: #fff;
}

.lotto-history th {
  text-align: left;
  padding: 10px;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Rows */
.lotto-history td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.lotto-history tbody tr {
  transition: background 0.2s ease;
}

.lotto-history tbody tr:hover {
  background: #f5f5f5;
}

/* Numbers styling */
.lotto-history .lotto_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  margin-right: 6px;

  border-radius: 50%;
  background: #222;
  color: #fff;
  font-size: 13px;
}

/* Optional: zebra rows */
.lotto-history tbody tr:nth-child(even) {
  background: #fafafa;
}
@media (max-width: 600px) {

  .lotto-history thead {
    display: none; /* скриваме header-а */
  }

  .lotto-history,
  .lotto-history tbody,
  .lotto-history tr,
  .lotto-history td {
    display: block;
    width: 100%;
  }

  .lotto-history tr {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
  }

  .lotto-history td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
  }

  /* Добавяме "етикети" */
  .lotto-history td:nth-child(1)::before {
    content: "ID";
    font-weight: bold;
    color: #666;
  }

  .lotto-history td:nth-child(2)::before {
    content: "Date";
    font-weight: bold;
    color: #666;
  }

  .lotto-history td:nth-child(3)::before {
    content: "Numbers";
    font-weight: bold;
    color: #666;
  }

  /* Числата */
  .lotto-history .lotto_num {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .lotto-history td:last-child {
    flex-wrap: wrap;
    gap: 5px;
  }
}






.lotto-pagination {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.lotto-pagination a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
    min-width: 32px;
    text-align: center;
    cursor: pointer;
}

.lotto-pagination a:hover:not(.current) {
    background-color: #f5f5f5;
}

.lotto-pagination a.current {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.page-separator {
    padding: 0 8px;
    color: #666;
    font-size: 14px;
    user-select: none;
    display: inline-block;
}

/* Стилове за First/Last бутони */
.lotto-pagination a[data-page="First"],
.lotto-pagination a[data-page="Last"] {
    font-weight: bold;
    min-width: 50px;
}