/* Global Styles */
:root {
	--main-bg-color: #141c54;
	--main-color: #fefefe;
	--dark-blue: #4949a233;
	--accent-color: #64ffda;
	--success-color: #4caf50;
	--warning-color: #ff9800;
	--danger-color: #f44336;
	--tab-active-bg: rgba(100, 255, 218, 0.1);
	--tab-active-border: #64ffda;
}
body {
	overflow-x: hidden;
	background-color: var(--main-bg-color);
}

/* ===================== Reusable Classes ===================== */
/* Colors */
.main-color {
	color: var(--main-color);
}
.dark-blue-bg {
	background-color: var(--dark-blue);
}
.accent-color {
	color: var(--accent-color);
}

/* Spaces */
.gap-5rem {
	gap: 5rem;
}
.p-16rem {
	padding: 1.6rem;
}

/* Fonts */
.fs-55rem {
	font-size: 5.5rem;
}
.fs-4rem {
	font-size: 4rem;
}

/* Text */
.uppercase {
	text-transform: uppercase;
}

/* Width */
.max-w-900 {
	max-width: 900px;
}

/* Filters */
.blur-bg-main {
	backdrop-filter: blur(1.5rem);
}

/* ====================== Header ====================== */
header .logo {
	display: block;
	width: 50px;
	animation: fadeInLeft 1s ease-out;
}

header p {
	animation: fadeInDown 1s ease-out 0.3s both;
}

/* ===================== Main Container ===================== */
main {
	backdrop-filter: blur(0.5rem);
	min-height: calc(100vh);
	position: relative;
}

.main-container {
	width: 95%;
	position: relative;
	z-index: 2;
	animation: scaleIn 1.2s ease-out 0.5s both;
}

/* ===================== Tab Navigation ===================== */
.tab-navigation {
	display: flex;
    justify-content: center;
    gap: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.3rem;
	flex-wrap: wrap;
}

.tab-btn {
	background: transparent;
	border: 2px solid transparent;
	color: var(--main-color);
	padding: 0.75rem 1.5rem;
	border-radius: 25px;
	font-size: 1rem;
	font-weight: 500;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.tab-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
}

.tab-btn.active {
	background: var(--tab-active-bg);
	border-color: var(--tab-active-border);
	color: var(--accent-color);
	box-shadow: 0 0 4px rgba(100, 255, 218, 0.3);
}

.tab-btn i {
	transition: transform 0.3s ease;
}

.tab-btn:hover i {
	transform: scale(1.1);
}

/* ===================== Tab Content ===================== */
.tab-content {
	position: relative;
	min-height: 330px;
}

.tab-pane {
	display: none;
	animation: fadeIn 0.5s ease-out;
}

.tab-pane.active {
	display: block;
}

/* ===================== Clock Tab ===================== */
.clock-display {
	padding: 2rem 0;
}

.time-display {
	margin-bottom: 2rem;
}

.time-unit {
	font-size: 4rem;
	font-weight: 700;
	color: var(--accent-color);
	text-shadow: 0 0 4px rgba(100, 255, 218, 0.5);
	transition: all 0.3s ease;
}

.time-separator {
	font-size: 3rem;
	font-weight: 300;
	color: var(--main-color);
	margin: 0 0.5rem;
	opacity: 0.7;
}

.date-display {
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--main-color);
	opacity: 0.9;
}

.timezone-display {
	font-size: 1rem;
	color: var(--accent-color);
	opacity: 0.8;
	font-style: italic;
}

/* ===================== Stopwatch Tab ===================== */
.stopwatch-display {
	padding: 2rem 0;
}

.stopwatch-display .time-unit {
	font-size: 3.5rem;
}

.ms-unit {
	font-size: 2.5rem;
	color: var(--warning-color);
}

.stopwatch-controls {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.control-btn {
	background: transparent;
	border: 2px solid;
	color: var(--main-color);
	padding: 0.75rem 1.5rem;
	border-radius: 25px;
	font-size: 1rem;
	font-weight: 500;
	transition: all 0.3s ease;
	cursor: pointer;
	min-width: 120px;
}

.control-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.control-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.start-btn {
	border-color: var(--success-color);
	color: var(--success-color);
}

.start-btn:hover:not(:disabled) {
	background: var(--success-color);
	color: var(--main-bg-color);
}

.pause-btn {
	border-color: var(--warning-color);
	color: var(--warning-color);
}

.pause-btn:hover:not(:disabled) {
	background: var(--warning-color);
	color: var(--main-bg-color);
}

.reset-btn {
	border-color: var(--danger-color);
	color: var(--danger-color);
}

.reset-btn:hover:not(:disabled) {
	background: var(--danger-color);
	color: var(--main-color);
}

.lap-btn {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

.lap-btn:hover:not(:disabled) {
	background: var(--accent-color);
	color: var(--main-bg-color);
}
.tab-btn, .control-btn {
	min-width: 180px;
}

/* ===================== Lap Times ===================== */
.lap-times {
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

.lap-title {
	color: var(--accent-color);
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 1rem;
	border-bottom: 1px solid rgba(100, 255, 218, 0.3);
	padding-bottom: 0.5rem;
}

.lap-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lap-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	padding: 0.75rem 1rem;
	border-radius: 10px;
	border-left: 3px solid var(--accent-color);
	transition: all 0.3s ease;
}

.lap-item:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(5px);
}

.lap-number {
	color: var(--accent-color);
	font-weight: 600;
}

.lap-time {
	color: var(--main-color);
	font-family: "Courier New", monospace;
	font-weight: 500;
}

/* ===================== Shapes Background ===================== */
.shapes {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.shapes div {
	position: absolute;
	width: 170px;
	height: 170px;
}

.shapes div.right-circle {
	background-color: #40e0d0b0;
	border-radius: 50%;
	bottom: 12%;
	right: 15%;
	animation: fadeInRight 1.5s ease-out 0.8s both,
		float 3s ease-in-out 2s infinite;
}

.shapes div.left-square {
	background-color: #ce23cecf;
	border-radius: 6px;
	top: 12%;
	left: 15%;
	animation: fadeInLeft 1.5s ease-out 0.8s both,
		float 3s ease-in-out 2.5s infinite;
}

/* ===================== Footer ===================== */
footer {
	border-top: 2px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(1.5rem);
	animation: fadeInUp 1s ease-out 1.8s both;
}

footer p {
	font-size: 0.9rem;
	letter-spacing: 0.5px;
}

footer a {
	transition: all 0.3s ease;
	position: relative;
}

footer a:hover {
	color: var(--accent-color) !important;
	transform: translateY(-1px);
}

footer a::after {
	content: "";
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -2px;
	left: 0;
	background-color: var(--accent-color);
	transition: width 0.3s ease;
}

footer a:hover::after {
	width: 100%;
}

/* ===================== Media Queries ===================== */
@media (max-width: 991px) {
	.time-unit {
		font-size: 3rem;
	}
	.time-separator {
		font-size: 2.5rem;
	}
	.date-display {
		font-size: 1.3rem;
	}
	.stopwatch-controls {
		gap: 0.75rem;
	}
	.control-btn {
		min-width: 100px;
		padding: 0.6rem 1.2rem;
	}
}

@media screen and (max-width: 768px) {
	.time-unit {
		font-size: 2.5rem;
	}
	.time-separator {
		font-size: 2rem;
	}
	.date-display {
		font-size: 1.1rem;
	}
	.tab-btn, .control-btn {
		min-width: 150px;
	}
	.lap-item {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}
	.stopwatch-display .time-unit {
		font-size: 2.8rem;
	}
}

@media screen and (max-width: 480px) {
	.time-unit {
		font-size: 2rem;
	}
	.time-separator {
		font-size: 1.5rem;
	}
	.date-display {
		font-size: 1rem;
	}
	.p-25rem {
		padding: 1.5rem;
	}
	.stopwatch-display .time-unit {
		font-size: 1.7rem;
	}
	.time-display .time-separator.dot {
		margin: 0 0;
	}
}

/* ===================== Animations ===================== */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

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

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* ===================== Scrollbar Styling ===================== */
.lap-times::-webkit-scrollbar {
	width: 6px;
}

.lap-times::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
}

.lap-times::-webkit-scrollbar-thumb {
	background: var(--accent-color);
	border-radius: 3px;
}

.lap-times::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 255, 218, 0.8);
}