@font-face {
	font-family: Inter;
	src: url("../font/Inter-Regular.ttf");
}

@font-face {
	font-family: ProductSansBold;
	src: url("../font/ProductSans-Bold.ttf");
}


:root {

	--color-navy-blue1: #003399;
	--color-navy-blue2: #1a50d4;
	--color-forest-green1: #00843d;
	--color-forest-green2: #00a84f;
	--color-deep-purple1: #6d28d9;
	--color-deep-purple2: #7c3aed;
	--color-burnt-orange1: #c2410c;
	--color-burnt-orange2: #ea580c;
	--color-sky-blue1: #0369a1;
	--color-sky-blue2: #0ea5e9;
	--color-crimson-red1: #b91c1c;
	--color-crimson-red2: #ef4444;
	--color-hot-pink1: #be185d;
	--color-hot-pink2: #ec4899;
	--color-frost-blue1: #dbe3ff;
	--color-frost-blue2: #f0f4ff;
	--color-magenta1: #7c1d6f;
	--color-magenta2: #c026d3;
	--color-grey-muted: #5a6a8a;
	--color-gold-yellow1: #eebb05;

	--color-blue-dark1: #002f7d;
	
	--color-velvet1: #781ea6;
	

	--color-brand-inverse-gradient: linear-gradient(to right, var(--color-velvet1), var(--color-blue-dark1));
	--color-brand-gradient: linear-gradient(to right, var(--color-blue-dark1), var(--color-velvet1));
}

/** {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}*/

body {
	font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: var(--color-frost-blue2);
	color: var(--text-main);
	line-height: 1.6;
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
}

header {
	background-image: var(--color-brand-gradient);
	color: white;
	padding: 0.6rem 0.6rem;
	/*position: sticky;*/
	top: 0;
	z-index: 1000;
	box-shadow: var(--color-navy-blue1) 0px 1px 10px;
}

footer {
	background-image: var(--color-brand-inverse-gradient);
    color: white;
	margin-top: auto;
	padding: 1rem 1rem;
}

footer a {
	color: white;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

.footer-grid {
	text-align: center;
	opacity: 0.7;
	font-size: 0.9rem;
}

h1, h2, h3, h4 {
	color: var(--color-navy-blue1);
}

h1 {
	font-size: 26px;
	font-weight: bold;
}

h2 {
	font-size: 22px;
	font-weight: bold;
}

h3 {
	font-size: 20px;
	font-weight: bold;
}

h4 {
	font-size: 18px;
	font-weight: bold;
}

.h-base {
	margin-top: 0;
	margin-bottom: 0;
}

.text-blue-primary {
	color: var(--color-navy-blue1);
}

.text-gold {
	color: var(--color-gold-yellow1);
}

.text-jackpot {
	font-family: 'Fredoka One', cursive;
}

.text-muted {
	color: var(--color-grey-muted);
}

.text-blue {
	color: var(--color-navy-blue2);
}

.text-red {
	color: var(--color-crimson-red2);
}

.text-orange {
	color: var(--color-burnt-orange2);
}

.text-green {
	color: var(--color-forest-green1);
}

.text-baloo {
	font-family: "Baloo 2", cursive;
}

section {
	padding: 10px 0px;
}

.container {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding: 1rem 1rem;
}

.title {
	color: var(--color-navy-blue1);
}


.col {
	padding: 10px 10px;
}

.col-lottery {
    min-width: 370px;
}

.card {
	background-color: white;
	border: 2px solid var(--color-frost-blue1);
    border-radius: 18px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

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

.card-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
}

.card-lottery {
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.card-lottery h3 {
	color: white !important
}

.card-lottery:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(26, 53, 212, 0.15);
}

.text-14 {
	font-size: 14px; 
}

.results-jackpot {
	margin: auto 0px 0px 0px ;
	padding: 10px 0px 10px 0px;
	border-top: 2px dashed var(--color-frost-blue1);
    display: flex;
    align-items: center;
    justify-content: space-between;
	gap: .5rem;
}

.card-header {
	padding: 10px 20px;
	font-family: "Baloo 2";
	font-size: 20px;
}

.card-body-result {
	padding: 10px 20px 0px 20px;
	display: flex; 
	flex-direction: column;
}

.card-body {
	padding: 20px 20px 20px 20px;
	display: flex; 
	flex-direction: column;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-grey-muted);
    flex-wrap: wrap;
	margin-left: 10px;
}

.breadcrumb a {
    color: var(--color-navy-blue2);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.balls-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.ball {
    width: 40px;
    height: 40px;
	padding-top: 3px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 1.2rem;
    color: white;
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.15);
    position: relative;
}

.ball::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 10px;
    width: 10px;
    height: 6px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.ball-star {
	background-image: url("../img/star.svg");
	background-size: cover;
	color: white;
	box-shadow: none;
}

.ball-drop {
	background-image: url("../img/drop.svg");
	background-size: cover;
	color: white;
	box-shadow: none;
}

.ball-small {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ball-small::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 5px;
    height: 3px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.ball-x-small {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ball-x-small::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 3px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.ball-number {
	width: 10px;
}

.btn-row {
	display: grid;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
	grid-template-columns: 1fr;
}

.btn-pill {
    display: inline-block;
    padding: 6px 12px;
	border: 0px;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	/*margin: 10px 0px;*/
	font-size: 14px;
}

.btn-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
	/*box-shadow: 0 6px 20px rgba(29, 78, 216, 0.4);*/
	filter: brightness(1.05);
}

.btn-blue {
	background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}

.btn-red {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
}

.btn-green {
    background: linear-gradient(180deg, #10b981, #059669);
}

.btn-dark {
	background: linear-gradient(180deg, #343a40, #495057);
}

.btn-period, .btn-period:hover {
	background-color:#f2f2f2 !important;
	color: black !important;
	border-color: #ddd !important;
}

.dropdown-menu {
    overflow: hidden;
    overflow-y: auto;
    max-height: calc(50vh - 150px);
}

.bg-navy-blue {
	background-color: var(--color-navy-blue1);
}

.bg-navy-blue-gradient {
	background-image: linear-gradient(to right, var(--color-navy-blue1), var(--color-navy-blue2));
}

.bg-forest-green {
	background-color: var(--color-forest-green1);
}

.bg-forest-green-gradient {
	background-image: linear-gradient(to right, var(--color-forest-green1), var(--color-forest-green2));
}

.bg-deep-purple {
	background-color: var(--color-deep-purple1);
}

.bg-deep-purple-gradient {
	background-image: linear-gradient(to right, var(--color-deep-purple1), var(--color-deep-purple2));
}

.bg-sky-blue {
	background-color: var(--color-sky-blue1);
}

.bg-sky-blue-gradient {
	background-image: linear-gradient(to right, var(--color-sky-blue1), var(--color-sky-blue2));
}

.bg-crimson-red {
	background-color: var(--color-crimson-red1);
}

.bg-crimson-red-gradient {
	background-image: linear-gradient(to right, var(--color-crimson-red1), var(--color-crimson-red2));
}

.bg-magenta {
	background-color: var(--color-magenta1);
}

.bg-magenta-gradient {
	background-image: linear-gradient(to right, var(--color-magenta1), var(--color-magenta2));
}

.pill-blue {
	background-image: linear-gradient(to right, #06b6d4, #2563eb);
	padding: 8px;
	border-radius: 0.75rem;
	color: white;
	line-height: 1.8;
}

.pill-red {
	background-image: linear-gradient(to right, #f97316, #dc2626);
	padding: 8px;
	border-radius: 0.75rem;
	color: white;
	line-height: 1.8;
}

.pill-orange {
	background-image: linear-gradient(to right, #eab308, #ea580c);
	padding: 8px;
	border-radius: 0.75rem;
	color: white;
	line-height: 1.8;

}

.pill-green {
	background-image: linear-gradient(to right, #22c55e, #059669);
	padding: 8px;
	border-radius: 0.75rem;
	color: white;
	line-height: 1.8;
}

.pill-purple {
	background-image: linear-gradient(to right, #3b82f6, #9333ea);
	padding: 8px;
	border-radius: 0.75rem;
	color: white;
	line-height: 1.8;
}

.pill-pink {
	background-image: linear-gradient(to right, #a855f7, #db2777 );
	padding: 8px;
	border-radius: 0.75rem;
	color: white
}


.mymillionnum {
    border-radius: 50px;
	background-image: linear-gradient(to right, var(--color-navy-blue1), var(--color-navy-blue2));
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
	color: white
}

.lotojoker {
	border-radius: 50px;
	color: white;
	background-image: linear-gradient(to right, var(--color-forest-green1), var(--color-forest-green2));
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.lotocode {
	border-radius: 50px;
	color: white;
	background-image: linear-gradient(to right, var(--color-sky-blue1), var(--color-sky-blue2));
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

table {
	border: 1px solid #dddddd;
    border-radius: 12px;
    border-spacing: 0;
    border-collapse: separate;
	width: stretch;
	overflow-x: scroll;
}

table tbody tr:nth-child(even){
	background-color: var(--color-frost-blue2);
}


thead {
	background-image: linear-gradient(to right, var(--color-navy-blue1), var(--color-navy-blue2));
	color: white;
}

th, td {
	padding: 10px;
}

table th:first-child {
	border-top-left-radius: 12px;
}

table th:last-child {
	border-top-right-radius: 12px;
}

table tr:last-child>td:first-child {
	border-bottom-left-radius: 12px;
}

table tr:last-child>td:last-child {
	border-bottom-right-radius: 12px;
}


@media (max-width: 640px) {
    .card-grid-2 {
        grid-template-columns: 1fr;
    }
    .card-grid-3 {
        grid-template-columns: 1fr;
    }
}