:root {
	--primary-color: #e85a4f; /* Vibrant red‑orange (for primary buttons) */
	--secondary-color: #e9c46a; /* Warm, golden yellow (for borders/accents) */
	--accent-color: #2a9d8f; /* Teal (for the "Food is Cooked" button) */
	--deep-color: #264653; /* Dark blue‑green (for header background, headings) */
	--neutral-dark: #333333;
	--neutral-light: #ffffff;
	--background: #f9f9f9;
}

@font-face {
	font-family: 'Quiapo-Regular';
	src: url('../fonts/Quiapo-Regular.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {
	margin: 0;
	font-family: Arial, sans-serif;
	background: var(--background);
	color: var(--neutral-dark);
}

header {
	background: var(--deep-color);
	color: var(--neutral-light);
	padding: 20px;
	text-align: center;
}

header h1 {
	margin: 0;
	font-size: 2.5em;
	font-family: 'Quiapo-Regular', cursive, sans-serif;
}

#dish-selection {
	padding: 20px;
}

#dish-selection h2 {
	text-align: center;
	margin-bottom: 10px;
	font-family: 'Quiapo', cursive, sans-serif;
}

#dish-selection h3 {
	text-align: center;
	margin-bottom: 10px;
	font-family: 'Quiapo', cursive, sans-serif;
}

.cards-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.card {
	background: var(--neutral-light);
	border: 2px solid var(--secondary-color);
	border-radius: 8px;
	width: 200px;
	text-align: center;
	padding: 10px;
	transition: transform 0.3s;
}

.card img {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

.card:hover {
	transform: scale(1.05);
}

#details-timer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20px;
}

.details,
.timer-setup {
	flex: 1 1 300px;
	background: var(--neutral-light);
	margin: 10px;
	padding: 20px;
	border-radius: 8px;
	border: 2px solid var(--secondary-color);
}

.details h2,
.timer-setup h2 {
	text-align: center;
}

.checklist {
	list-style-type: none;
	padding: 0;
}

.checklist li {
	margin: 5px 0;
}

.checklist input[type='checkbox'] {
	margin-right: 10px;
}

.back-button {
	background: var(--secondary-color);
	border: none;
	padding: 8px 12px;
	margin-bottom: 10px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.9em;
	color: var(--neutral-dark);
}

.back-button:hover {
	background: #d4af60;
}

.time-inputs {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 20px;
}

.time-inputs label {
	margin-right: 5px;
}

.timer-setup input {
	width: 60px;
	padding: 5px;
	text-align: center;
}

#startTimerBtn {
	display: block;
	width: 100%;
	padding: 10px;
	background: var(--primary-color);
	color: var(--neutral-light);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1em;
	margin-bottom: 10px;
}

#startTimerBtn:hover {
	background: #cf4a3c;
}

.ready-button {
	background: var(--accent-color);
	border: none;
	padding: 10px 15px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1em;
	color: var(--neutral-light);
	display: block;
	width: 100%;
}

.ready-button:hover {
	background: #268f81;
}

#timer-container {
	max-width: 500px;
	margin: 40px auto;
	text-align: center;
}

.progress-circle {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

#time-display {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
}

.controls {
	margin-top: 20px;
}

.controls button {
	padding: 10px 20px;
	margin: 0 10px;
	border: none;
	border-radius: 5px;
	background: var(--primary-color);
	color: var(--neutral-light);
	cursor: pointer;
	font-size: 1em;
}

.controls button:hover {
	background: #cf4a3c;
}

#pauseBtn:disabled {
	background-color: grey;
	cursor: not-allowed;
}
