:root {
	--bg: #121212;
	--fg: #e0e0e0;
	--input-bg: #1a1a1a;
	--border: #444;
	--btn: #0d6efd;
	--btn-hover: #0b5ed7;
	--btn-reset: #198754;
	--btn-reset-hover: #157347;
	--danger: #dc3545;
	--danger-hover: #bb2d3b;
}

* {
	box-sizing: border-box;
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	margin: 8px;
	padding: 0;
	user-select: none;
}

header, main {
	padding: 16px;
}

main {
  max-width: 750px;
  margin: 0 auto;
}

h2 {
	margin: 0 0 12px;
	font-size: 22px;
	text-align: center;
	text-shadow: 0 0 3px #fff;
	opacity: 0;
	animation: fade 0.5s ease forwards;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

.form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 400px;
	margin: 0 auto;
	opacity: 0;
	animation: fade 0.5s ease forwards;
	animation-delay: 0.1s;
}
.form.form-registo input,
.form.form-registo button {
	height: 38px;
	box-sizing: border-box;
}

.form-final {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	animation-delay: 0.3s;  
}

.form-final #total {
	font-size: 18px;
	text-align: center;
	padding: 0 10px;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	text-wrap-mode: nowrap;
}

button, input {
	padding: 10px;
	background: var(--input-bg);
	color: #fff;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 15px;
}

button {
	background: var(--btn);
	border: none;
	cursor: pointer;
	flex: 1;
}

button:hover {
	background: var(--btn-hover);
}

.btn-resetar {
	background: var(--btn-reset);
	cursor: pointer;
}

.btn-resetar:hover:not(:disabled) {
	background: var(--btn-reset-hover);
}

.btn-resetar:disabled {
	background: var(--btn-reset);
	cursor: default;
	pointer-events: none;
}

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	padding: 10px 16px;
	border-radius: 6px;
	cursor: pointer;
	text-shadow: 0 0 3px #fff;
}

.btn-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	filter: drop-shadow(0 0 3px #fff);
	margin-right: 5px;
	overflow: visible;
}

.input-euro {
	position: relative;
	width: 100%;
}

.input-euro input {
	padding-right: 24px;
	width: 100%;
}

.simbolo-euro {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #aaa;
	pointer-events: none;
	font-size: 18px;
}

/* TABELA */
#lista {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
	background: var(--input-bg);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 0 10px #00000040;
	font-size: 15px;
	opacity: 0;
	animation: fade 0.5s ease forwards;
	animation-delay: 0.2s;
}

#separador {
	border-top: 3px solid #2a2a2a;
	padding: 0;
}

td, th {
	padding: 8px 12px;
	border-bottom: 1px solid #333;
	text-align: left;
}

th {
	background: #2a2a2a;
	font-weight: 700;
}

.right {
	text-align: right;
}

.apagar {
	background: none;
	color: var(--danger);
	border: none;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.5s ease;
}

.apagar:hover {
	color: var(--danger-hover);
}

/* TOTAL */
#total {
	font-size: 20px;
	font-weight: 700;
	text-align: right;
	margin-top: 15px;
	margin-right: 15px;
	text-shadow: 0 0 3px #fff;
	opacity: 1;
	filter: blur(0px);
	transition: opacity 0.3s ease, filter 0.3s ease;
}

#total.fade {
	opacity: 0;
}

#total-print {
	display: none;
	text-align: right;
	font-weight: 700;
	font-size: 12pt;
	margin-top: 10px;
}

/* MODAL */
#modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	backdrop-filter: blur(0px);
	transition: opacity 0.4s ease-out, backdrop-filter 0.4s ease-out, background 0.4s ease-out;
	touch-action: none;
}
#modal.ativo {
	opacity: 1;
	backdrop-filter: blur(2px);
	background: rgba(0, 0, 0, 0.25);
}
#modal.hidden {
	display: none;
}

#modal.fechar {
	opacity: 0;
	backdrop-filter: blur(0px);
}

#modal-fundo {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
}

.fechar #modal-fundo {
	opacity: 0;
}

#modal-caixa {
	position: relative;
	background: var(--input-bg);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 20px;
	max-width: 90%;
	width: 380px;
	box-shadow: 0 0 15px #00000080;
	z-index: 1001;
	text-align: center;
	animation: modalIn 0.2s ease-out;
	opacity: 0.85;
}

#modal-caixa.saindo {
	animation: modalOut 0.2s ease-in forwards;
}

#modal-texto {
	margin-bottom: 20px;
	font-size: 18px;
}

#modal-botoes {
	display: flex;
	gap: 10px;
	justify-content: center;
}

#modal-botoes button {
	padding: 10px 20px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	border-radius: 6px;
	color: #fff;
	font-size: 15px;
	min-width: 100px;
	outline: none;
	flex: 1;
}

#modal-confirmar.confirmar {
	background: var(--btn);
}

#modal-confirmar.confirmar:hover {
	background: var(--btn-hover);
}

#modal-confirmar.pagar {
	background: var(--btn-reset);
}

#modal-confirmar.pagar:hover {
	background: var(--btn-reset-hover);
}

#modal-confirmar.eliminar {
	background: var(--danger);
}

#modal-confirmar.eliminar:hover {
	background: var(--danger-hover);
}

#modal-cancelar {
	background: var(--btn);
}

#modal-cancelar:hover {
	background: var(--btn-hover);
}

.verde-botao {
	background-color: var(--btn-reset) !important;
}

.vermelho-botao {
	background-color: var(--danger) !important;
}

button.btn-icon {
	transition: background-color 0.3s ease;
}

/* RESPONSIVO mobile */ 
@media (max-width: 768px) {
	body {
		margin: 0 !important;
	}
	button, input {
		font-size: 16px;
		max-width: 100%;
	}
	.form {
		padding: 16px;
	}
	#lista {
		font-size: 15px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#separador {
		border-top: 2px solid #2a2a2a;
		padding: 0;
	}
	td, th {
		padding: 7px;
		overflow-wrap: break-word;
	}
	.form-registo {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"produto produto"
			"preco   botao";
		gap: 10px;
	}
	.form-registo input#produto {
		grid-area: produto;
		width: 100%;
	}
	.form-registo input#preco {
		grid-area: preco;
		width: 100%;
	}
	.form-registo button {
		grid-area: botao;
		width: 100%;
		height: 38px;
	}
	.form-final {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		align-items: center;
	}
	.form-final button,
	.form-final #total {
		flex: 1;
		text-align: center;
	}
	.form-final #total {
		font-size: 18px;
		margin: 0;
	}
}

@media (min-width: 769px) {
	.form.form-registo {
		display: grid;
		grid-template-columns: 50% 25% 25%;
		gap: 10px;
		align-items: center;
		width: 100%;
		max-width: 700px;
		margin: 0 auto;
	}
	.form.form-final button,
	.form.form-registo button {
		width: 174px;
		height: 38px;
		flex: 0 0 auto !important;
	}
	.form:first-of-type input#produto,
	.form:first-of-type input#preco,
	.form:first-of-type button {
		width: 100%;
	}
	.form.form-final {
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: center;
	}
	.form:last-of-type button {
		flex: 0 0 60%;
		font-size: 16px;
		padding: 10px 16px;
	}
	.form:last-of-type #total {
		flex: 0 0 40%;
		font-size: 18px;
		margin: 0;
		text-wrap-mode: nowrap;
		text-align: center;
	}
}

/* PRINT */
@media print {
	.apagar, .no-print, button, header, input {
		display: none !important;
	}
	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
		margin: 20px;
		font-family: Arial, sans-serif;
	}
	table {
		width: 100%;
		border-collapse: collapse;
		font-size: 10pt;
	}
	#lista {
		box-shadow: unset;
		background: unset;
	}
	#separador {
		border-top: 1px solid #2a2a2a;
		padding: 0;
	}
	td, th {
		border: 1px solid #ccc;
		padding: 5px 8px;
	}
	th {
		background: #eee;
		font-weight: bold;
	}
	h2 {
		margin: 0 0 0px;
	}
	#total-print {
		display: block;
		margin-top: 10px;
		text-align: right;
		font-weight: bold;
		font-size: 11pt;
	}
}


/* ANIMAÇÕES */
@keyframes fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes modalIn {
	from { transform: scale(0.8); opacity: 0; }
	to { transform: scale(1); opacity: 0.85; }
}

@keyframes modalOut {
	from { transform: scale(1); opacity: 0.85; }
	to { transform: scale(0.8); opacity: 0; }
}

.modoLeitura {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--input-bg);
  color: var(--danger);
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.4s ease, transform 0.4s ease;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
}
.modoLeitura.mostrar {
  opacity: 0.85;
  transform: translateX(-50%) translateY(0);
}