/* Basic Styling */
body {
	font-family: sans-serif;
	background-color: #222; /* Dark background */
	color: #eee; /* Light text */
	margin: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.container {
	width: 100%;
	max-width: 800px; /* Limit width */
	background-color: #333;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	margin-bottom: 20px;
}

header,
footer {
	text-align: center;
	margin-bottom: 20px;
}

h1 {
	color: #ff0000; /* YouTube Red */
}

label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	color: #ccc;
}

input[type="text"],
input[type="number"] {
	width: calc(100% - 22px); /* Adjust for padding and border */
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #555;
	border-radius: 4px;
	background-color: #444;
	color: #eee;
	font-size: 1rem;
}

button {
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	margin-right: 10px;
	transition: background-color 0.2s;
}

#calculate-button {
	background-color: #ff0000; /* YouTube Red */
	color: white;
}
#calculate-button:hover {
	background-color: #cc0000;
}
#calculate-button:disabled {
	background-color: #777;
	cursor: not-allowed;
}

#clear-button {
	background-color: #666;
	color: #eee;
}
#clear-button:hover {
	background-color: #555;
}

.input-group {
	display: flex;
	gap: 10px;
	align-items: flex-end; /* Align button with input */
}

.input-group input {
	flex-grow: 1; /* Input takes available space */
	margin-bottom: 0; /* Remove margin for alignment */
}

.range-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-top: 10px;
}

.results-card {
	margin-top: 20px;
	background-color: #444;
	padding: 15px;
	border-radius: 5px;
}

.results-card h3 {
	margin-top: 0;
	color: #ff0000;
}

.results-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(150px, 1fr)
	); /* Responsive grid */
	gap: 15px;
	margin-top: 15px;
}

.result-item {
	background-color: #555;
	padding: 10px;
	border-radius: 4px;
	text-align: center;
}
.result-item .label {
	font-size: 0.8em;
	color: #bbb;
	display: block;
}
.result-item .value {
	font-size: 1.1em;
	font-weight: bold;
	display: block;
	margin-top: 5px;
}

#error-message {
	color: #ff6666; /* Light red for errors */
	background-color: #442222;
	padding: 10px;
	border-radius: 4px;
	margin-top: 15px;
	display: none; /* Hidden by default */
	border: 1px solid #883333;
}

#loading-message {
	display: none; /* Hidden by default */
	text-align: center;
	margin-top: 15px;
	font-style: italic;
	color: #aaa;
}

footer a {
	color: #ff8888;
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
}

/* Simple toggle for advanced options */
#advanced-options {
	background-color: #3a3a3a;
	padding: 15px;
	border-radius: 4px;
	margin-top: 15px;
	display: none; /* Initially hidden */
}
#advanced-toggle {
	cursor: pointer;
	color: #ff8888;
	text-decoration: underline;
	display: inline-block;
	margin-bottom: 15px;
}

/* Video thumbnail styling */
.video-thumbnail {
	width: 100%;
	max-width: 200px;
	height: auto;
	border-radius: 4px;
	margin: 10px 0;
	display: block;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.video-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.video-item .value {
	margin-top: 10px;
	font-size: 0.9em;
	line-height: 1.3;
}