/*
Copyright 2025 Rihaan Meher

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
@import "components/features.css";
@import "components/hero.css";
@import "components/slideshow.css";

:root {
	--blue: #3178c6;
	--light-blue: #e3f2fd;
	--dark-text: #1a1a1a;
	--gray: #f5f5f5;
	--primary-color: #3178c6;
	--secondary-color: #e3f2fd;
	--text-dark: #1a1a1a;
	--bg-light: #f9fafc;
	--border-radius: 8px;
	--input-bg: #ffffff;
}

[data-theme="dark"] {
	--blue: #90caf9;
	--light-blue: #1e1e1e;
	--dark-text: #f0f0f0;
	--gray: #2c2c2c;
	--primary-color: #90caf9;
	--secondary-color: #1e1e1e;
	--text-dark: #f0f0f0;
	--bg-light: #121212;
	--input-bg: #2a2a2a;
}

[data-theme="dark"] input,
[data-theme="dark"] button {
	border: 1px solid #444;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	background-color: var(--input-bg);
	color: var(--text-dark);
}

body {
	font-family: "Inter", sans-serif;
	background-color: var(--bg-light);
	color: var(--text-dark);
	margin: 0;
	padding: 0;
}

nav {
	display: flex;
	justify-content: space-between;
	padding: 15px 40px;
	background: var(--bg-light);
	border-bottom: 1px solid var(--secondary-color);
	position: sticky;
	top: 0;
	z-index: 999;
	font-family: system-ui, Inter, sans-serif;
	align-items: center;
}

.logo {
	font-size: 22px;
	font-weight: 700;
	color: var(--blue);
}

/* Fix: Navigation links spacing */
.nav-links {
	list-style: none;
	display: flex;
	gap: 20px;
	margin-left: auto; /* Push links to right */
}

.nav-links a {
	color: var(--dark-text);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease;
}

.nav-links a:hover {
	color: var(--blue);
}

#auth-links {
	display: flex;
	gap: 12px;
	align-items: center;
}

#auth-links a {
	text-decoration: none;
	font-weight: 500;
	color: var(--dark-text);
	padding: 6px 12px;
	border: 1px solid var(--blue);
	border-radius: 5px;
	transition: background 0.3s;
}

#auth-links a:hover {
	background-color: var(--light-blue);
}

/* Fix: Authentication container */
.auth-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh; /* Ensure full-page centering */
	width: 100%;
}

.auth-card {
	background: var(--bg-light);
	padding: 10px;
	border-radius: var(--border-radius);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
	text-align: center;
	width: 350px;
}

.auth-card h1 {
	font-size: 22px;
	margin-bottom: 20px;
}

form {
	display: flex;
	flex-direction: column;
	align-items: center; /* Centers everything */
}

form input,
form button {
	width: 80%;
	max-width: 300px;
	text-align: center;
}

/* Fix: Proper button styling */
input {
	width: 100%;
	padding: 12px;
	margin: 10px 0;
	border: 1px solid var(--secondary-color);
	border-radius: var(--border-radius);
	font-size: 16px;
}

button {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: var(--border-radius);
	font-size: 16px;
	cursor: pointer;
	transition: background 0.3s;
}

#signup {
	background-color: #3ca374;
	color: var(--text-dark);
}

#signup:hover {
	background-color: #2a7854;
}

#login {
	background-color: var(--primary-color);
	color: var(--text-dark);
}

#login:hover {
	background-color: #235a92;
}

/* Fix: Dropdown positioning */
#user-dropdown {
	position: relative;
	display: flex;
	align-items: center;
}

#profile-btn {
	background-color: var(--text-dark);
	border: 1px solid var(--blue);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 16px;
	cursor: pointer;
}

.dropdown-menu {
	position: absolute;
	top: 50px;
	right: 0;
	background-color: var(--gray);
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: none;
	flex-direction: column;
	min-width: 150px;
	z-index: 1000;
}

.dropdown-menu li {
	list-style: none;
}

.dropdown-menu a {
	display: block;
	padding: 10px;
	color: var(--dark-text);
	text-decoration: none;
}

.dropdown-menu a:hover {
	background-color: var(--gray);
}

/* Fix: Mobile Responsiveness */
@media (max-width: 768px) {
	nav {
		flex-direction: column;
		align-items: center;
	}

	.nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
		margin-top: 10px;
	}

	.nav-links.show {
		display: flex;
	}

	.hamburger {
		display: block;
		font-size: 26px;
		background: none;
		border: none;
		cursor: pointer;
		color: var(--dark-text);
	}

	.auth-card {
		width: 90%;
	}
}

/* Fix: Social login buttons layout */
.social-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0;
	width: 100%;
	align-items: center;
}

.gsi-material-button {
	width: 100%;
	max-width: 300px;
}

.auth-action-buttons {
	display: flex;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin-top: 16px;
}

.auth-action-buttons button {
	flex: 1;
	max-width: 140px;
}

.forgot-link {
	font-size: 14px;
	color: var(--blue);
	text-decoration: none;
	margin-top: 8px;
	display: inline-block;
}

.forgot-link:hover {
	text-decoration: underline;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 20px;
	padding: 0 20px 40px;
	align-items: stretch;
}

.marketplace-card {
	background: var(--gray);
	padding: 20px;
	border-radius: var(--border-radius);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
	text-align: left;
	transition: transform 0.2s ease;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.marketplace-card:hover {
	transform: translateY(-4px);
}

.auth-card {
	background: var(--gray);
	padding: 20px;
	border-radius: var(--border-radius);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
	text-align: center;
	transition: transform 0.2s ease;
}

.auth-card:hover {
	transform: translateY(-4px);
}

#notification-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 1000;
	max-width: 300px;
}

.notification {
	position: relative;
	bottom: 20px;
	right: 20px;
	width: 300px;
	max-height: 300px;
	overflow-y: auto;
	background: var(--gray);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	padding: 16px;
	border-radius: 8px;
	display: block;
	z-index: 1000;
}

.notification.success {
	border-left: 4px solid #3ca374;
}

.notification.error {
	border-left: 4px solid #e53935;
}

.notification .close-btn {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: #888;
	line-height: 1;
	padding: 0;
	height: auto;
	width: auto;
	display: inline;
	vertical-align: top;
}

.notification .message {
	margin-bottom: 8px;
	white-space: pre-wrap;
}

.notification .actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
}

.notification .actions button {
	padding: 6px 12px;
	font-size: 13px;
	border: none;
	border-radius: 4px;
	background-color: var(--blue);
	color: white;
	cursor: pointer;
}

.notification .actions button:hover {
	background-color: #235a92;
}

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

button:hover {
	filter: brightness(0.95);
}

.settings-container {
	max-width: 600px;
	margin: 40px auto;
	padding: 20px;
	background-color: var(--secondary-color);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	color: var(--text-dark);
}

.settings-container h1 {
	font-size: 24px;
	margin-bottom: 24px;
	text-align: center;
}

.setting-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.setting-item label {
	font-size: 16px;
	font-weight: 500;
}

#theme-toggle {
	padding: 8px 16px;
	font-size: 14px;
	border: none;
	border-radius: 6px;
	background-color: var(--blue);
	color: white;
	cursor: pointer;
	transition: background 0.3s ease;
}

#theme-toggle:hover {
	background-color: #235a92;
}

.model-tag {
	display: inline-block;
	background-color: #ddf4ff;
	color: #0366d6;
	padding: 2px 6px;
	margin: 2px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
}

a,
.model-link {
	display: inline-block;
	margin-top: 8px;
	margin-bottom: 15px;
	font-size: 15px;
	color: var(--primary-color);
	text-decoration: none;
}

select {
	margin-top: 6px;
	padding: 4px 8px;
	font-size: 13px;
	border-radius: 4px;
	border: 1px solid #ccc;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal.hidden {
	display: none;
}

.modal-content {
	background: var(--bg-light);
	padding: 20px;
	border-radius: 8px;
	width: 300px;
	text-align: center;
}

.modal-content h2 {
	margin-bottom: 12px;
}

.modal-content select {
	margin: 10px 0;
	padding: 6px;
	width: 100%;
}

.modal-content button {
	margin-top: 10px;
	padding: 8px 16px;
}

.marketplace-btn {
	margin-top: auto;
}

.close-btn {
	cursor: pointer;
	font-size: 24px;
	position: absolute;
	top: 10px;
	right: 15px;
}
.modal-content {
	position: relative;
	padding: 20px;
	background-color: var((--bg-light));
	border-radius: 8px;
	color: var(--text-dark);
}
.center1 { 
    margin: auto; 
    width: 100%; 
    height: 200%; 
    padding: 10px; 
    text-align: center; 
    align-items: center; 
    background-image: url(../img/tech.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    box-shadow: 5px 5px lightgray; 
}
.download-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background-color: var(--secondary-color);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.download-block {
  margin-bottom: 24px;
  padding: 12px;
  background-color: var(--gray);
  border-radius: var(--border-radius);
}

.download-block summary {
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 10px;
}

.download-block select {
  margin-top: 10px;
  padding: 8px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #3d8aff;
  width: 100%;
  color: white;
  background-color: #2a2a2a;
}

.binary-list {
  margin-top: 16px;
}

.binary-list a {
  display: block;
  margin: 8px 0;
  font-size: 15px;
  color: var(--primary-color);
  text-decoration: none;
}

.binary-list a:hover {
  text-decoration: underline;
}

.placeholder {
  font-size: 15px;
  color: #666;
  margin-top: 10px;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--secondary-color);
  position: sticky;
  top: 0;
  z-index: 999;
  font-family: system-ui, Inter, sans-serif;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
}

.hamburger {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--dark-text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--blue);
}

@media (max-width: 768px) {
	nav {
		flex-direction: column;
		align-items: stretch;
		padding: 10px 20px;
	}

	.nav-left {
		width: 100%;
		justify-content: flex-start;
	}

	.hamburger {
		display: block;
	}

	.nav-links {
		flex-direction: column;
		display: none;
		width: 100%;
		gap: 10px;
		margin-top: 10px;
	}

	.nav-links.show {
		display: flex;
	}

	.nav-links li {
		padding: 8px 0;
		text-align: left;
	}
}