/**
 * Lottery Odds Calculator Plugin Styles
 * Enhanced with animations for balls, coin, and dice
 */

/* Root container */
.loc-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: #333;
}

/* Main calculator wrapper */
.loc-calculator {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	padding: 40px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	color: white;
}

/* Title */
.loc-title {
	margin: 0 0 30px 0;
	font-size: 2.5em;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Sections */
.loc-section {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 8px;
	padding: 30px;
	margin-bottom: 30px;
	color: #333;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.loc-section h3 {
	margin: 0 0 20px 0;
	font-size: 1.5em;
	font-weight: 600;
	color: #667eea;
	border-bottom: 3px solid #667eea;
	padding-bottom: 10px;
}

/* Form groups */
.loc-form-group {
	margin-bottom: 20px;
}

.loc-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
	font-size: 0.95em;
}

.loc-form-group input[type='number'],
.loc-form-group select {
	width: 100%;
	padding: 12px;
	border: 2px solid #e0e0e0;
	border-radius: 6px;
	font-size: 1em;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.loc-form-group input[type='number']:focus,
.loc-form-group select:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Toggle switch */
.loc-toggle-group {
	display: flex;
	align-items: center;
	gap: 15px;
}

.loc-toggle-group label {
	margin: 0;
	flex: 1;
}

.loc-toggle-group input[type='checkbox'] {
	width: 50px;
	height: 28px;
	cursor: pointer;
	accent-color: #667eea;
}

/* Bonus configuration */
.loc-bonus-config {
	background: #f5f5f5;
	padding: 20px;
	border-radius: 6px;
	margin-top: 20px;
	border-left: 4px solid #667eea;
}

/* Error message */
.loc-error-message {
	background: #fee;
	border: 2px solid #f88;
	border-radius: 6px;
	padding: 15px;
	color: #c33;
	font-weight: 500;
	margin-top: 15px;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   LOTTERY BALLS ANIMATION
   ============================================ */

.loc-lottery-balls-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 30px;
	min-height: 80px;
}

.loc-lottery-ball {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
	font-weight: 700;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
	animation: ballBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform-origin: center;
}

@keyframes ballBounce {
	0% {
		transform: scale(0) translateY(-30px);
		opacity: 0;
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

/* Results section */
.loc-odds-summary {
	text-align: center;
	padding: 30px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 8px;
	color: white;
	margin-bottom: 25px;
}

.loc-odds-summary p:first-child {
	margin: 0 0 15px 0;
	font-size: 1.1em;
	opacity: 0.9;
}

.loc-odds-display {
	margin: 0;
	font-size: 2.5em;
	font-weight: 700;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Explanation section */
.loc-explanation {
	margin-top: 20px;
}

.loc-toggle-button {
	background: #667eea;
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	text-align: left;
}

.loc-toggle-button:hover {
	background: #764ba2;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.loc-toggle-button:active {
	transform: translateY(0);
}

/* Explanation content */
.loc-explanation-content {
	margin-top: 20px;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		max-height: 0;
	}
	to {
		opacity: 1;
		max-height: 1000px;
	}
}

.loc-explanation-step {
	background: #f9f9f9;
	padding: 20px;
	border-radius: 6px;
	margin-bottom: 15px;
	border-left: 4px solid #667eea;
}

.loc-explanation-step h4 {
	margin: 0 0 10px 0;
	color: #667eea;
	font-size: 1.1em;
}

.loc-explanation-step p {
	margin: 8px 0;
	line-height: 1.6;
	color: #555;
}

.loc-explanation-step strong {
	color: #333;
	background: #fff3cd;
	padding: 2px 6px;
	border-radius: 3px;
}

/* ============================================
   FUN GENERATORS SECTION
   ============================================ */

.loc-generators-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.loc-generator {
	background: #f9f9f9;
	padding: 25px;
	border-radius: 8px;
	text-align: center;
	border: 2px solid #e0e0e0;
	transition: all 0.3s ease;
}

.loc-generator:hover {
	border-color: #667eea;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.loc-generator h4 {
	margin: 0 0 15px 0;
	color: #667eea;
	font-size: 1.2em;
}

.loc-generator-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	padding: 12px 30px;
	border-radius: 6px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	margin-top: 15px;
}

.loc-generator-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.loc-generator-btn:active:not(:disabled) {
	transform: translateY(0);
}

.loc-generator-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.loc-generator-result {
	margin-top: 20px;
	font-size: 2em;
	font-weight: 700;
	color: #667eea;
	animation: popIn 0.5s ease;
}

@keyframes popIn {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ============================================
   COIN ANIMATION
   ============================================ */

.loc-coin {
	width: 100px;
	height: 100px;
	margin: 0 auto 15px;
	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5em;
	font-weight: 700;
	color: #333;
	box-shadow: 0 8px 20px rgba(255, 165, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.5);
	border: 3px solid #DAA520;
	position: relative;
	transition: all 0.3s ease;
}

.loc-coin::before {
	content: '';
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent);
	pointer-events: none;
}

.loc-coin.loc-coin-spin {
	animation: coinSpin 1s linear;
}

@keyframes coinSpin {
	0% {
		transform: rotateY(0) rotateX(0);
	}
	50% {
		transform: rotateY(1800deg) rotateX(360deg);
	}
	100% {
		transform: rotateY(3600deg) rotateX(720deg);
	}
}

.loc-coin.loc-coin-result-show {
	animation: coinLand 0.5s ease-out;
}

@keyframes coinLand {
	0% {
		transform: scale(1.2) rotateZ(45deg);
	}
	100% {
		transform: scale(1) rotateZ(0deg);
	}
}

/* ============================================
   DICE ANIMATION
   ============================================ */

.loc-dice {
	width: 100px;
	height: 100px;
	margin: 0 auto 15px;
	background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3em;
	font-weight: 700;
	color: white;
	box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.3);
	border: 3px solid #FF3838;
	position: relative;
	transition: all 0.3s ease;
}

.loc-dice::before {
	content: '';
	position: absolute;
	width: 90%;
	height: 90%;
	border-radius: 6px;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent);
	pointer-events: none;
}

.loc-dice.loc-dice-roll {
	animation: diceRoll 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes diceRoll {
	0% {
		transform: rotateX(0) rotateY(0) rotateZ(0);
	}
	25% {
		transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg);
	}
	50% {
		transform: rotateX(1440deg) rotateY(720deg) rotateZ(360deg);
	}
	75% {
		transform: rotateX(2160deg) rotateY(1080deg) rotateZ(540deg);
	}
	100% {
		transform: rotateX(2880deg) rotateY(1440deg) rotateZ(720deg);
	}
}

.loc-dice.loc-dice-result-show {
	animation: diceLand 0.5s ease-out;
}

@keyframes diceLand {
	0% {
		transform: scale(1.2) rotateZ(45deg);
	}
	100% {
		transform: scale(1) rotateZ(0deg);
	}
}

/* Responsive design */
@media (max-width: 768px) {
	.loc-calculator {
		padding: 20px;
	}

	.loc-title {
		font-size: 1.8em;
	}

	.loc-section {
		padding: 20px;
	}

	.loc-section h3 {
		font-size: 1.2em;
	}

	.loc-odds-display {
		font-size: 1.8em;
	}

	.loc-generators-container {
		grid-template-columns: 1fr;
	}

	.loc-toggle-group {
		flex-direction: column;
		align-items: flex-start;
	}

	.loc-lottery-ball {
		width: 50px;
		height: 50px;
		font-size: 1.2em;
	}

	.loc-coin {
		width: 80px;
		height: 80px;
		font-size: 2em;
	}

	.loc-dice {
		width: 80px;
		height: 80px;
		font-size: 2.5em;
	}
}

@media (max-width: 480px) {
	.loc-container {
		padding: 10px;
	}

	.loc-calculator {
		padding: 15px;
	}

	.loc-title {
		font-size: 1.5em;
		margin-bottom: 20px;
	}

	.loc-section {
		padding: 15px;
		margin-bottom: 20px;
	}

	.loc-odds-summary {
		padding: 20px;
	}

	.loc-odds-display {
		font-size: 1.5em;
	}

	.loc-explanation-step {
		padding: 15px;
	}

	.loc-generator {
		padding: 15px;
	}

	.loc-lottery-ball {
		width: 45px;
		height: 45px;
		font-size: 1em;
	}

	.loc-coin {
		width: 70px;
		height: 70px;
		font-size: 1.5em;
	}

	.loc-dice {
		width: 70px;
		height: 70px;
		font-size: 2em;
	}
}