@font-face {
	font-family: 'Space Mono';
	src: url('./fonts/Space_Mono/SpaceMono-Bold.ttf');
	font-weight: 700;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
	padding: 0;
}

:root {
	--clr-primary: hsl(172, 67%, 45%);
	--clr-hover: #9ee7de;

	--clr-error: rgb(223, 126, 91);

	--clr-white: hsl(0, 0%, 100%);

	--clr-cyan-400: hsl(183, 100%, 15%);
	--clr-cyan-300: hsl(186, 14%, 43%);
	--clr-cyan-200: hsl(184, 14%, 56%);
	--clr-cyan-100: hsl(185, 41%, 84%);
	--clr-cyan-50: hsl(189, 41%, 97%);

	--border-radius-general: 20px;
	--border-radius-input: 5px;

	font-size: 24px;
	font-weight: 700;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	font-family: 'Space Mono', monospace;

	margin: 0;
	min-height: 100dvh;

	background-color: var(--clr-cyan-100);
}

header {
	margin-bottom: 4rem;
}

main {
	display: flex;
	gap: 1rem;

	padding: 1rem;

	border-radius: var(--border-radius-general);

	background-color: var(--clr-white);

	min-width: 36rem;
	min-height: 16rem;
}

/*** Form ***/

form#tip-form {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.8rem;

	width: 100%;
	max-width: 50%;

	font-size: 0.5rem;
}

.frm-bill-amount-container {
	position: relative;
	display: flex;
	flex-direction: column;
}

/*** Form --- Radio Buttons ***/

.frm-tip-choice-container {
	display: flex;

	width: 100%;
}

.frm-tip-choice-container > fieldset {
	position: relative;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;

	padding: 0;
	margin: 0;
	border: none;

	width: 100%;
	height: 100%;
}

.frm-tip-choice-input-container {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
}

.frm-tip-choice-label {
	padding-block: 0.4rem;

	color: var(--clr-white);
	font-size: 1rem;

	transition: color 0.15s ease-out;
	pointer-events: none;
}

.frm-tip-choice-input-rdo {
	position: absolute;
	appearance: none;

	margin: 0;

	width: 100%;
	height: 100%;

	background-color: var(--clr-cyan-400);

	border-radius: var(--border-radius-input);
	z-index: -1;

	transition: background-color 0.15s ease-out;
}

.frm-tip-choice-input-container:hover > .frm-tip-choice-input-rdo {
	cursor: pointer;
	background-color: var(--clr-hover);
}

.frm-tip-choice-input-rdo:checked {
	background-color: var(--clr-primary);
}

.frm-tip-choice-input-container:hover > .frm-tip-choice-label,
.frm-tip-choice-input-container:has(.frm-tip-choice-input-rdo:checked)
	> .frm-tip-choice-label {
	color: var(--clr-cyan-400);
}

/*** Custom Tip Input ***/

.frm-tip-choice-input-custom {
	position: absolute;

	display: flex;
	align-items: center;
	justify-content: center;

	font-family: 'Space Mono', monospace;
	font-size: 1rem;
	font-weight: 700;
	color: var(--clr-cyan-400);
	text-align: center;

	background-color: var(--clr-cyan-50);

	width: 100%;
	height: 100%;

	border: none;
	border-radius: var(--border-radius-input);

	z-index: -1;

	transition: background-color 0.15s ease-out, color 0.15s ease-out,
		outline 0.15s ease-out;
}

input.frm-tip-choice-input-custom::-webkit-outer-spin-button,
input.frm-tip-choice-input-custom::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

input.frm-tip-choice-input-custom[type='number'] {
	appearance: textfield;
	-moz-appearance: textfield;
	border: none;
}

.frm-tip-choice-input-custom:hover {
	cursor: pointer;
	background-color: var(--clr-hover);
	color: var(--clr-cyan-400);
}

.frm-tip-choice-input-custom:focus,
.frm-tip-choice-input-custom.has-value {
	background-color: var(--clr-white);
	color: var(--clr-cyan-400);
	outline: 3px solid var(--clr-primary);
}

/*** Custom Tip Input Label ***/

.frm-tip-choice-custom-input-container:has(.frm-tip-choice-input-custom:hover)
	> .frm-tip-custom-choice-label {
	color: var(--clr-cyan-400);
}
.frm-tip-choice-custom-input-container:has(.frm-tip-choice-input-custom:focus)
	> .frm-tip-custom-choice-label,
.frm-tip-choice-custom-input-container:has(.has-value)
	> .frm-tip-custom-choice-label {
	display: none;
}

.frm-tip-custom-choice-label {
	color: var(--clr-cyan-300);
}

/*** Form --- Other ***/

.input-legend {
	font-size: 0.6rem;
	color: var(--clr-cyan-300);

	margin-bottom: 0.4rem;
}

.frm-people-amount-container {
	position: relative;
	display: flex;
	flex-direction: column;
}

.people-amount-error-message {
	color: var(--clr-error);
}

#people-amount-legend {
	display: flex;
	justify-content: space-between;
}

.input-legend-icon {
	position: absolute;
	left: 0.6rem;
	top: 1.84rem;
}

.number-input {
	display: flex;
	align-items: end;

	border: none;
	border-radius: var(--border-radius-input);
	outline: 0px solid white;

	background-color: var(--clr-cyan-50);
	padding: 0.2rem;

	text-align: right;

	font-size: 1rem;
	font-family: 'Space Mono', monospace;
	font-weight: 700;
	color: var(--clr-cyan-400);

	transition: outline 0.15s ease-out;
}

.number-input:hover {
	cursor: pointer;
	outline: 3px solid var(--clr-primary);
}

.number-input:focus {
	outline: 3px solid var(--clr-primary);
}

.number-input::placeholder {
	color: var(--clr-cyan-200);
}

.number-input.input-error {
	outline: solid 2px var(--clr-error);
}

.number-input::-webkit-outer-spin-button,
.number-input::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

.number-input {
	appearance: textfield;
	-moz-appearance: textfield;
}

/*** Output ***/

.output-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;

	width: 100%;
	max-width: 50%;

	padding: 1rem;

	border-radius: calc(var(--border-radius-general) / 1.5);

	background-color: var(--clr-cyan-400);

	color: var(--clr-white);
}

.paragraph {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
}

.paragraph-title {
	font-size: 0.6rem;
	color: var(--clr-cyan-50);

	margin: 0;
	padding: 0;
}

.paragraph-hint {
	align-self: self-start;
	font-size: 0.5rem;
	color: var(--clr-cyan-200);

	margin: 0;
	padding: 0;
}

.total-cost {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-size: 2rem;
	color: var(--clr-primary);
}

#btn-reset {
	margin-top: auto;

	font-family: 'Space Mono', monospace;
	text-transform: uppercase;
	color: var(--clr-cyan-400);
	font-size: 0.8rem;

	background-color: var(--clr-primary);

	padding: 0.4rem;

	border: none;
	border-radius: var(--border-radius-input);

	transition: background-color 0.15s ease-out;
}

#btn-reset:hover {
	background-color: var(--clr-hover);
	cursor: pointer;
}

#btn-reset:disabled {
	opacity: 40%;
	cursor: default;
}

#btn-reset:disabled:hover {
	background-color: var(--clr-primary);
}

/*** Mobile ***/

@media screen and (max-width: 890px) {
	header {
		margin-bottom: 1rem;
	}

	main {
		flex-direction: column;
		min-width: auto;
		min-height: auto;
	}

	form#tip-form {
		max-width: 100%;
		gap: 1rem;
	}

	.output-container {
		max-width: 100%;
	}

	.total-cost {
		font-size: 1.4rem;
	}

	.frm-tip-choice-container > fieldset {
		grid-template-columns: 1fr 1fr;
	}
}