/* utils */

@import url("utils_flexbox.css?version=0.0.0.4&date=2025-11-10");
@import url("utils_common.css?version=0.0.0.4&date=2025-11-10");
@import url("utils_colors.css?version=0.0.0.4&date=2025-11-10");
@import url("utils_background.css?version=0.0.0.4&date=2025-11-10");
@import url("utils_buttons.css?version=0.0.0.4&date=2025-11-10");
@import url("utils_inputs.css?version=0.0.0.4&date=2025-11-10");
@import url("utils_labels.css?version=0.0.0.4&date=2025-11-10");

@import url("utils_languages.css?version=0.0.0.4&date=2025-11-10");
@import url("utils_alert.css?version=0.0.0.4&date=2025-11-10");

/* utils_ */
@import url("utils_text.css?version=0.0.0.4&date=2025-11-10");
@import url("utils_font_colors.css?version=0.0.0.4&date=2025-11-10");
/* move it later to new location is currently used !! */
			/************* THIS IS BEING USED ******************/
			.padding-right-5 {padding: 0 5px;}
			.padding-right-10 {padding: 0 10px;}
			.padding-right-15 {padding: 0 15px;}
			.padding-right-20 {padding: 0 20px;}
			.padding-right-25 {padding: 0 25px;}
			.padding-right-30 {padding: 0 30px;}

			.margin-bottom-5 {margin-bottom: 5px;}
			.margin-bottom-10 {margin-bottom: 10px;}
			.margin-bottom-15 {margin-bottom: 15px;}
			.margin-bottom-20 {margin-bottom: 20px;}
			.margin-bottom-25 {margin-bottom: 25px;}
			.margin-bottom-30 {margin-bottom: 30px;}

			.margin-top-5 {margin-top: 5px;}
			.margin-top-10 {margin-top: 10px;}
			.margin-top-15 {margin-top: 15px;}
			.margin-top-20 {margin-top: 20px;}
			.margin-top-25 {margin-top: 25px;}
			.margin-top-30 {margin-top: 30px;}

			/* WIDTH */
			.min-width-10 {min-width: 40px;}
			.min-width-15 {min-width: 45px;}
			.min-width-20 {min-width: 20px;}
			.min-width-25 {min-width: 25px;}
			.min-width-30 {min-width: 30px;}
			.min-width-35 {min-width: 35px;}
			.min-width-40 {min-width: 40px;}
			.min-width-45 {min-width: 45px;}
			.min-width-50 {min-width: 50px;}
			.min-width-60 {min-width: 60px;}
			.min-width-70 {min-width: 70px;}
			.min-width-80 {min-width: 80px;}
			.min-width-90 {min-width: 90px;}
			.min-width-100 {min-width: 100px;}
			.min-width-150 {min-width: 150px;}
			.min-width-200 {min-width: 200px;}
			.min-width-250 {min-width: 250px;}
			.min-width-300 {min-width: 300px;}
			.min-width-350 {min-width: 350px;}
			.min-width-360 {min-width: 360px;}
			.min-width-370 {min-width: 370px;}
			.min-width-380 {min-width: 380px;}
			.min-width-390 {min-width: 390px;}
			.min-width-400 {min-width: 400px;}
			.min-width-450 {min-width: 450px;}
			.min-width-500 {min-width: 500px;}
			.min-width-550 {min-width: 550px;}
			.min-width-600 {min-width: 600px;}
			.min-width-650 {min-width: 650px;}
			.min-width-700 {min-width: 700px;}

			.max-width-10 {max-width: 40px;}
			.max-width-15 {min-width: 45px;}
			.max-width-20 {max-width: 20px;}
			.max-width-25 {max-width: 25px;}
			.max-width-30 {max-width: 30px;}
			.max-width-35 {max-width: 35px;}
			.max-width-40 {max-width: 40px;}
			.max-width-45 {max-width: 45px;}
			.max-width-50 {max-width: 50px;}
			.max-width-60 {max-width: 60px;}
			.max-width-70 {max-width: 70px;}
			.max-width-80 {max-width: 80px;}
			.max-width-90 {max-width: 90px;}
			.max-width-100 {max-width: 100px;}
			.max-width-150 {max-width: 150px;}
			.max-width-200 {max-width: 200px;}
			.max-width-250 {max-width: 250px;}
			.max-width-300 {max-width: 300px;}
			.max-width-310 {max-width: 310px;}
			.max-width-320 {max-width: 320px;}
			.max-width-330 {max-width: 330px;}
			.max-width-340 {max-width: 340px;}
			.max-width-350 {max-width: 350px;}
			.max-width-360 {max-width: 360px;}
			.max-width-370 {max-width: 370px;}
			.max-width-380 {max-width: 380px;}
			.max-width-390 {max-width: 390px;}
			.max-width-400 {max-width: 400px;}
			.max-width-450 {max-width: 450px;}
			.max-width-500 {max-width: 500px;}
			.max-width-550 {max-width: 550px;}
			.max-width-600 {max-width: 600px;}
			.max-width-650 {max-width: 650px;}
			.max-width-700 {max-width: 700px;}

			.min-width-percent-10 {min-width: 10%;}
			.min-width-percent-20 {min-width: 20%;}
			.min-width-percent-30 {min-width: 30%;}
			.min-width-percent-40 {min-width: 40%;}
			.min-width-percent-50 {min-width: 50%;}
			.min-width-percent-60 {min-width: 60%;}
			.min-width-percent-70 {min-width: 70%;}
			.min-width-percent-80 {min-width: 80%;}
			.min-width-percent-90 {min-width: 90%;}
			.min-width-percent-100 {min-width: 100%;}

			.max-width-percent-10 {max-width: 10%;}
			.max-width-percent-20 {max-width: 20%;}
			.max-width-percent-30 {max-width: 30%;}
			.max-width-percent-40 {max-width: 40%;}
			.max-width-percent-50 {max-width: 50%;}
			.max-width-percent-60 {max-width: 60%;}
			.max-width-percent-70 {max-width: 70%;}
			.max-width-percent-80 {max-width: 80%;}
			.max-width-percent-90 {max-width: 90%;}
			.max-width-percent-100 {max-width: 100%;}

			/* HEIGHT */
			.min-height-10 {min-height: 10px;}
			.min-height-15 {min-height: 15px;}
			.min-height-20 {min-height: 20px;}
			.min-height-25 {min-height: 25px;}
			.min-height-30 {min-height: 30px;}
			.min-height-35 {min-height: 35px;}
			.min-height-40 {min-height: 40px;}
			.min-height-45 {min-height: 45px;}
			.min-height-50 {min-height: 50px;}
			.min-height-60 {min-height: 60px;}
			.min-height-70 {min-height: 70px;}
			.min-height-80 {min-height: 80px;}
			.min-height-90 {min-height: 90px;}
			.min-height-100 {min-height: 100px;}
			.min-height-150 {min-height: 150px;}
			.min-height-200 {min-height: 200px;}
			.min-height-250 {min-height: 250px;}
			.min-height-300 {min-height: 300px;}
			.min-height-350 {min-height: 350px;}
			.min-height-400 {min-height: 400px;}
			.min-height-450 {min-height: 450px;}
			.min-height-500 {min-height: 500px;}
			.min-height-550 {min-height: 550px;}
			.min-height-600 {min-height: 600px;}
			.min-height-650 {min-height: 650px;}
			.min-height-700 {min-height: 700px;}

			.max-height-10 {max-height: 10px;}
			.max-height-15 {max-height: 15px;}
			.max-height-20 {max-height: 20px;}
			.max-height-25 {max-height: 25px;}
			.max-height-30 {max-height: 30px;}
			.max-height-35 {max-height: 35px;}
			.max-height-40 {max-height: 40px;}
			.max-height-45 {max-height: 45px;}
			.max-height-50 {max-height: 50px;}
			.max-height-60 {max-height: 60px;}
			.max-height-70 {max-height: 70px;}
			.max-height-80 {max-height: 80px;}
			.max-height-90 {max-height: 90px;}
			.max-height-100 {max-height: 100px;}
			.max-height-150 {max-height: 150px;}
			.max-height-200 {max-height: 200px;}
			.max-height-250 {max-height: 250px;}
			.max-height-300 {max-height: 300px;}
			.max-height-350 {max-height: 350px;}
			.max-height-400 {max-height: 400px;}
			.max-height-450 {max-height: 450px;}
			.max-height-500 {max-height: 500px;}
			.max-height-550 {max-height: 550px;}
			.max-height-600 {max-height: 600px;}
			.max-height-650 {max-height: 650px;}
			.max-height-700 {max-height: 700px;}

			.min-height-percent-10 {min-height: 10%;}
			.min-height-percent-20 {min-height: 20%;}
			.min-height-percent-30 {min-height: 30%;}
			.min-height-percent-40 {min-height: 40%;}
			.min-height-percent-50 {min-height: 50%;}
			.min-height-percent-60 {min-height: 60%;}
			.min-height-percent-70 {min-height: 70%;}
			.min-height-percent-80 {min-height: 80%;}
			.min-height-percent-90 {min-height: 90%;}
			.min-height-percent-100 {min-height: 100%;}

			.box-shadow-1 {box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);}

			.background-color-212121 {background-color: #212121;}
			.background-color-444 {background-color: #444;}
			.background-color-333 {background-color: #333;}

			.border-bottom-1-444 {border-bottom: 1px solid rgba(68, 68, 68, 1);}
/*******************************/







/* temporary todos rewriten */
/*
.item-shop-buy-button {
	background-color: #f39c12; 
	color: white; 
	padding: 10px 20px; 
	border: none; 
	border-radius: 5px; 
	text-decoration: none; 
	font-weight: bold; 
	transition: background-color 0.3s; 
}

.item-shop-buy-button:hover { 
	background-color: #e67e22; 
}
*/
/* Base button styles */
.item-shop-buy-button {
	padding: 12px 25px;
	border: 2px solid;
	border-radius: 12px;
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.1);
	transition: background 0.3s, box-shadow 0.3s;
	cursor: pointer;
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Enough to purchase - green */
.item-shop-buy-button.enough {
	background: linear-gradient(145deg, #27ae60, #2ecc71);
	border-color: #1e8449;
}
.item-shop-buy-button.enough:hover {
	background: linear-gradient(145deg, #2ecc71, #27ae60);
	box-shadow: 0 6px 12px rgba(0,0,0,0.25), inset 0 -2px 4px rgba(0,0,0,0.15);
}

/* Not enough - red */
.item-shop-buy-button.not-enough {
	background: linear-gradient(145deg, #e74c3c, #c0392b);
	border-color: #922b21;
	cursor: not-allowed;
}
.item-shop-buy-button.not-enough:hover {
	background: linear-gradient(145deg, #c0392b, #e74c3c);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.1);
}

/* Expired - gray */
.item-shop-buy-button.expired {
	background: linear-gradient(145deg, #7f8c8d, #95a5a6);
	border-color: #636e72;
	cursor: not-allowed;
}
.item-shop-buy-button.expired:hover {
	background: linear-gradient(145deg, #95a5a6, #7f8c8d);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.1);
}

/* Upcoming - blue */
.item-shop-buy-button.upcoming {
	background: linear-gradient(145deg, #2980b9, #3498db);
	border-color: #1f5f8b;
	cursor: not-allowed;
}
.item-shop-buy-button.upcoming:hover {
	background: linear-gradient(145deg, #3498db, #2980b9);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(0,0,0,0.1);
}