/* FOR WHOLE WEB SCREEN LAYOUT */
*{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

body{
	min-height: 100vh;
	font-family: Arial, sans-serif;
	color: whitesmoke;
	background: #1a1a1a;
}


/* FOR THE TOP BOX DESIGN AND CONTENTS */
header{
	display: flex;
	height: 110px;
	background: #000000;
	border-bottom: 2px solid #474747;
	justify-content: space-between;
	padding: 0 30px;
	padding-top: 26px;
	box-shadow: 0 0 20px #ffffff;
}

/* RADIOBUTTON TO FOR THE FOOTER SECTION */
input{
	display: none;
}

.page{
	display: none;
	text-align: center;	
	padding-bottom: 100px;
}

#homepage:checked ~ .pages .home{
	display: block;
}
#camerapage:checked ~ .pages .camera{
	display: block;
}
#settingspage:checked ~ .pages .settings{
	display: block;
}

/* FOOTER DESIGN */
footer{
	position: fixed;
	background: black;
	bottom: 0;
	left: 0;
	height: 10%;
	width: 100%;
	align-items: center;
	font-size: 20px;
	display: flex;
	box-shadow: 0 0 10px #ffffff;
	user-select: none;
	z-index: 100;
}

footer label{
	flex: 1;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	color: whitesmoke;
	font-size: 15px;
	user-select: none;
	text-shadow: 0 0 5px whitesmoke, 0 0 10px whitesmoke;
	transition: 0.5s ease;
}

footer label .footerlogo{
	display: block;
	margin: 0 auto -15px auto;
	padding: 0;
}

footer label:hover{
	transform: scale(1.2);
}

#homepage:checked ~ .pages ~ footer label[for="homepage"],
#camerapage:checked ~ .pages ~ footer label[for="camerapage"],
#settingspage:checked ~ .pages ~ footer label[for="settingspage"]{
	color: yellow;
}

.logo{
	padding-left: 5px;
	user-select: none;
}

.hometext,
.cameratext{
	margin-top: 25px;
	width: 100%;
	padding: 7px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	text-align: center;
	user-select: none;
	text-shadow: 0 0 20px #474747;
}

/* HERO CONTAINER: SIDE BY SIDE LAYOUT */
.hero-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 80%;
	max-width: 1200px;
	margin: 25px auto 0;
}

.box1{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 220px;
	background: #0b132b;
	border: 2px solid #474747;
	border-radius: 20px;
	box-shadow: 0 0 10px #ffffff;
	cursor: pointer;
	transition: 0.3s ease;
	user-select: none;
}

.hero-image-box {
	flex: 1;
	height: 220px;
	background: #0b132b;
	border: 2px solid #474747;
	border-radius: 20px;
	box-shadow: 0 0 10px #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: 0.5s ease;
	user-select: none;
}

.hero-image-box:hover{
	transform: scale(1.1);
}

.hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.box1content{
	padding: 20px;
	font-size: 20px;
	text-align: left;
	text-shadow: 0 0 20px #474747;
	user-select: none;
}

/* ASK JAPOY BAR */
.askjapoy-bar {
	background: #ffd000;
	border: 3px solid #474747;
	height: 60px;
	width: 80%;
	max-width: 1200px;
	margin: 30px auto 0;
	border-radius: 15px;
	box-shadow: 0 0 10px #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: 0.3s ease;
}

.japoy{
	color: black;
	font-weight: bold;
	font-size: 22px;
	text-shadow: 0 0 2px black;
}

.box2{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120px;
	width: 80%;
	max-width: 1200px;
	margin: 30px auto 0;
	background: #0b132b;
	border: 2px solid #474747;
	border-radius: 20px;
	box-shadow: 0 0 10px #ffffff;
	cursor: pointer;
	transition: 0.3s ease;
	user-select: none;
}

.box2content{
	padding: 20px;
	font-size: 20px;
	text-align: center;
	text-shadow: 0 0 20px #474747;
	user-select: none;
}

/* WHAT WE CAN DO SECTION */
.what-we-can-do {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 80%;
	max-width: 1200px;
	margin: 30px auto 0;
	padding: 25px;
	background: #0b132b;
	border: 2px solid #474747;
	border-radius: 20px;
	box-shadow: 0 0 10px #ffffff;
	text-align: left;
	transition: 0.5s ease;
	user-select: none;
}

.what-we-can-do:hover{
	transform: scale(1.1);
}

.wwcd-graphic {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.emoji-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.wwcd-content h3 {
	font-size: 22px;
	margin-bottom: 10px;
	color: #ffd000;
}

.wwcd-content ul {
	list-style-position: inside;
	font-size: 16px;
	line-height: 1.6;
}

/* HOVER EFFECTS */
.box1:hover, .hero-image-box:hover, .box2:hover, .what-we-can-do:hover {
	transform: scale(1.02);
}

.askjapoy-bar:hover {
	transform: scale(1.02);
}

/* CAMERA PAGE STYLES */
.camerasetup{
	position: relative;
	width: 90%;
	max-width: 500px;
	height: 500px;
	margin: 20px auto 0 auto;
	overflow: hidden;
	border-radius: 10px;
	border: 2px solid #474747;
	background: #000000;
	box-shadow: 0 0 10px #ffffff; 
}

#objcamera{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.scannerbox{
	background: #ffd000;
	border: 2px solid #474747;
	height: 110px;
	width: 110px;
	margin: -20px auto 0;
	border-radius: 50%;
	box-shadow: 0 0 10px #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: 0.5s ease;
	user-select: none;
}

.scanbtn{
	border: none;
	background: none;
	color: black;	
	font-size: 22px;
	text-shadow: 0 0 2px black;
	user-select: none;
}

.scannerbox:hover{
	transform: scale(1.10);
}

.scan-result{
	width: 90%;
	max-width: 600px;
	margin: 25px auto 100px;
	padding: 15px;
	min-height: 50px;
	background: #0b132b;
	border: 2px solid #474747;
	border-radius: 15px;
	box-shadow: 0 0 10px #ffffff;
	color: whitesmoke;
	font-size: 18px;
	text-align: center;
	display: none;
	transition: 0.5s ease;
}

.scan-result.show{
	display: block;
}


/* MOBILE RESPONSIVE MEDIA QUERY */
@media (max-width: 600px){

	body{
		width: 100%;
		height: 100dvh;
		min-height: 100dvh;
	}

	.pages{
		width: 100%;
		height: calc(100dvh - 75px);
		overflow-y: auto;
	}

	.page{
		width: 100%;
		height: auto;
		padding-bottom: 90px;
	}

	header{
		height: 80px;
		padding: 15px;
		align-items: center;
	}

	header .logo img{
		width: 65px;
		height: auto;
	}

	.hometext, .cameratext{
		margin-top: 10px;
		padding: 5px;
		font-size: 17px;
	}

	.hero-container {
		flex-direction: column;
		width: 90%;
		margin-top: 15px;
		gap: 15px;
	}

	.box1, .hero-image-box {
		width: 100%;
		height: auto;
		min-height: 140px;
		padding: 20px;
	}

	.box1content{
		padding: 15px;
		font-size: clamp(12px, 3.5vw, 15px);
		line-height: 1.4;
	}

	.askjapoy-bar{
		width: 90%;
		height: 50px;
		margin: 20px auto 0;
	}

	.japoy{
		font-size: clamp(14px, 4vw, 18px);
	}

	.box2{
		width: 90%;
		height: auto;
		min-height: 80px;
		margin: 20px auto 0;
	}

	.box2content{
		padding: 15px;
		font-size: clamp(12px, 3.5vw, 15px);
	}

	.what-we-can-do {
		width: 90%;
		margin: 20px auto 0;
		padding: 15px;
		flex-direction: row;
	}

	.wwcd-graphic {
		width: 50px;
		height: 50px;
	}

	.wwcd-content h3 {
		font-size: 16px;
	}

	.wwcd-content ul {
		font-size: 12px;
	}

	.camerasetup{
		width: 90%;
		height: calc(100dvh - 330px);
		min-height: 180px;
		max-height: 400px;
		margin: 10px auto 0;
	}

	.scannerbox{
		width: 15dvh;
		height: 15dvh;
		min-width: 85px;
		min-height: 85px;
		max-width: 110px;
		max-height: 110px;
		margin: 8px auto 0;
	}

	.scanbtn{
		font-size: clamp(14px, 4vw, 18px);
	}

	footer{
		height: 75px;
	}

	footer label{
		padding: 3px;
		font-size: clamp(10px, 3vw, 13px);
	}

	footer label .footerlogo{
		width: clamp(25px, 7vw, 32px);
		height: clamp(25px, 7vw, 32px);
		margin: 0 auto -7px auto;
	}
}

.camerasetup {
  position: relative; /* lets the overlay sit on top of the video */
}

.camerasetup video {
  display: block;
  width: 100%;
}

.snapoverlay {
  position: absolute;
  inset: 0;               /* top/right/bottom/left = 0, covers the video */
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Quick white flash so people know the photo was taken */
.camerasetup.flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0.6;
  pointer-events: none;
  animation: flashfade 0.25s ease-out forwards;
}

@keyframes flashfade {
  to { opacity: 0; }
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translate(-50%, 10px);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;   /* so it never blocks taps */
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.chatbox {
	display: flex;
	flex-direction: column;
	margin: 12px;
	border-radius: 14px;
	background: #f2f2f2;
	overflow: hidden;
	/* extra room so the footer doesn't cover the input */
	margin-bottom: 90px;
}

.chat-log {
	height: 180px;
	overflow-y: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.msg {
	max-width: 85%;
	padding: 8px 12px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.35;
	word-wrap: break-word;
}

.msg.bot  { align-self: flex-start; background: #fff; color: #222; }
.msg.user { align-self: flex-end;   background: #2b7cff; color: #fff; }
.msg.error { align-self: flex-start; background: #ffe3e3; color: #a00; }

.msg img {
	display: block;
	max-width: 140px;
	border-radius: 8px;
}

.chat-input {
	display: flex;
	gap: 6px;
	padding: 8px;
	background: #e6e6e6;
}

.chat-input input {
	flex: 1;
	padding: 8px 12px;
	border: none;
	border-radius: 999px;
	font-size: 14px;
}

.chat-input button {
	padding: 8px 16px;
	border: none;
	border-radius: 999px;
	background: #2b7cff;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.chat-input button:disabled { opacity: 0.5; }