/*=============== MAIN CSS FILE ===============*/
/* This file imports all modular CSS files in the correct order */

/* Legacy: Import original styles FIRST so new modules can override it */
@import url('styles.css');

/* Base styles - Variables, reset, typography */
@import url('base/variables.css');
@import url('base/reset.css');
@import url('base/typography.css');
@import url('cinematic-terminal.css');

/* Components - Reusable UI components */
@import url('components/navbar.css');
@import url('components/footer.css');
@import url('components/showcase.css');

@import url('components/gradient-btn.css');

/* Mobile bottom navigation */
@import url('mobile-navbar.css');

/* 
TODO: Extract remaining styles from styles.css into these files:
- components/buttons.css
- components/cards.css  
- components/modal.css
- sections/home.css
- sections/work.css
- sections/products.css
- sections/contact.css
- utils/animations.css
- utils/responsive.css
*/
/* FIX: Force Beta Badge Styling directly in main.css */
.beta-badge {
	display: inline-block;
	padding: 0.05rem 0.25rem;
	background: #000000 !important;
	border: none !important;
	border-radius: 4px;
	font-size: 0.55rem;
	font-weight: 700;
	color: #ffffff !important;
	letter-spacing: 0.5px;
	margin-left: 4px;
	margin-right: 2rem;
	line-height: 1;
	transform: translateY(1px);
}

.light-theme .beta-badge {
	background: #000000 !important;
	border-color: #000000 !important;
	color: #ffffff !important;
}

/* FORCE FIX: Nav Button */

/* =============== HERO SECTION =============== */
.hero-title-main {
	margin-top: 2rem !important;
}

/* =============== SOCIAL LINKS ROW =============== */
.social-links-row {
	display: flex !important;
	gap: 0.6rem !important;
	justify-content: center !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	margin: 2rem auto 0 auto !important;
	width: 100% !important;
	max-width: 900px !important;
	padding: 0 1rem !important;
	box-sizing: border-box !important;
}

.social-link-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	flex: 1 1 0% !important;
	background: #111827 !important;
	color: #e2e8f0 !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	border: 1.5px solid #2a3444 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	padding: 0.8rem 1.2rem !important;
	margin: 0 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition:
		background 0.2s,
		border-color 0.2s,
		color 0.2s,
		transform 0.2s !important;
	outline: none !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.social-link-btn i {
	font-size: 1.15em !important;
	color: #94a3b8 !important;
	transition: color 0.2s !important;
}

.social-link-btn span {
	font-size: 0.95em !important;
	font-weight: 500 !important;
	color: inherit !important;
}

.social-link-btn:hover {
	background: #243044 !important;
	color: #fff !important;
	border-color: #3a4a5e !important;
	transform: translateY(-1px) !important;
}

.social-link-btn:hover i {
	color: #fff !important;
}

.social-link-btn .social-link-icon {
	width: 1.15em !important;
	height: 1.15em !important;
	fill: #94a3b8 !important;
	flex-shrink: 0 !important;
	transition: fill 0.2s !important;
}

.social-link-btn:hover .social-link-icon {
	fill: #fff !important;
}

/* =============== HERO DIVIDER =============== */
.hero-divider {
	width: 90% !important;
	max-width: 700px !important;
	height: 1px !important;
	background: linear-gradient(
		90deg,
		transparent,
		#cbd5e1,
		transparent
	) !important;
	margin: 1.2rem auto !important;
}

/* =============== COLLABORATE SECTION =============== */
.collaborate-section {
	background: #111827 !important;
	border-radius: 20px !important;
	padding: 3rem 2.5rem !important;
	margin-top: 0 !important;
	text-align: center !important;
	max-width: 900px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.collaborate-section h3 {
	color: #fff !important;
	font-size: 2.5rem !important;
	font-weight: 700 !important;
	margin-bottom: 1rem !important;
}

.collaborate-section p {
	color: #94a3b8 !important;
	font-size: 1.05rem !important;
	line-height: 1.7 !important;
	margin-bottom: 2.5rem !important;
}

/* =============== MARQUEE SCROLLING BADGES =============== */
.marquee-wrapper {
	overflow: hidden !important;
	margin-bottom: 2rem !important;
	mask-image: linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	) !important;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	) !important;
}

.marquee-row {
	overflow: hidden !important;
	margin-bottom: 0.5rem !important;
}

.marquee-track {
	display: flex !important;
	gap: 0.5rem !important;
	width: max-content !important;
}

.marquee-left {
	animation: marqueeLeft 25s linear infinite !important;
}

.marquee-right {
	animation: marqueeRight 25s linear infinite !important;
}

@keyframes marqueeLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes marqueeRight {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

.marquee-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	background: #1e293b !important;
	color: #cbd5e1 !important;
	border: 1px solid #334155 !important;
	border-radius: 8px !important;
	padding: 0.4rem 0.8rem !important;
	font-size: 0.8rem !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}

.marquee-badge i {
	font-size: 1rem !important;
	color: #94a3b8 !important;
}

.marquee-badge img {
	width: 14px !important;
	height: 14px !important;
	filter: grayscale(1) brightness(1.8) !important;
}

/* Collaborate Buttons */
.collaborate-buttons {
	display: flex !important;
	gap: 0.75rem !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
}

.collab-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	padding: 0.55rem 1rem !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
}

.collab-btn i {
	font-size: 0.9rem !important;
}

.collab-btn-primary {
	background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

.collab-btn-primary:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

.collab-btn-disabled {
	background: #374151 !important;
	color: #6b7280 !important;
	border: 1px solid #4b5563 !important;
	pointer-events: none !important;
	cursor: default !important;
}

/* Responsive: Collaborate */
@media screen and (max-width: 768px) {
	.collaborate-section {
		padding: 2rem 1.5rem !important;
		margin-left: 1rem !important;
		margin-right: 1rem !important;
	}
	.collaborate-section h3 {
		font-size: 2rem !important;
	}
	.collaborate-section p {
		font-size: 0.95rem !important;
	}
}

@media screen and (max-width: 600px) {
	.collaborate-section {
		padding: 1.75rem 1.25rem !important;
	}
	.collaborate-section h3 {
		font-size: 1.6rem !important;
	}
	.collaborate-section p {
		font-size: 0.8rem !important;
	}
	.collaborate-buttons {
		gap: 0.4rem !important;
	}
	.collab-btn {
		padding: 0.6rem 0.8rem !important;
		font-size: 0.8rem !important;
		gap: 0.3rem !important;
	}
	.collab-btn i {
		font-size: 0.9rem !important;
	}
}

/* Responsive: Tablet */
@media screen and (max-width: 768px) {
	.social-links-row {
		gap: 0.35rem !important;
		flex-wrap: nowrap !important;
	}
	.social-link-btn {
		padding: 0.55rem 0.5rem !important;
		font-size: 0.75rem !important;
		gap: 0.3rem !important;
		border-radius: 8px !important;
	}
	.social-link-btn i {
		font-size: 1rem !important;
	}
}

/* Responsive: Mobile */
@media screen and (max-width: 600px) {
	.social-links-row {
		gap: 0.3rem !important;
		flex-wrap: nowrap !important;
	}
	.social-link-btn {
		padding: 0.5rem 0.35rem !important;
		font-size: 0.7rem !important;
		gap: 0.25rem !important;
		border-radius: 8px !important;
	}
	.social-link-btn i {
		font-size: 0.9rem !important;
	}
}

/* Responsive: Extra Small */
@media screen and (max-width: 400px) {
	.social-link-btn {
		padding: 0.45rem 0.25rem !important;
		font-size: 0.65rem !important;
	}
	.social-link-btn i {
		font-size: 0.8rem !important;
	}
}

/* =============== WORK FILTER BUTTONS =============== */
.work__filters {
	gap: 0.5rem !important;
}

.work__items {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.4rem !important;
	background: #1e293b !important;
	color: #94a3b8 !important;
	border: 1.5px solid #334155 !important;
	border-radius: 12px !important;
	padding: 0.6rem 1.2rem !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
}

.work__items i {
	font-size: 1.1rem !important;
	color: #fff !important;
}

.work__items:hover {
	background: #2a3a50 !important;
	border-color: #3b82f6 !important;
	color: #fff !important;
}

.work__items.active-work {
	background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: none !important;
}

/* ============ WORK FEATURES ============ */
.feature-item {
	color: #64748b !important;
	font-weight: 400 !important;
}

/* ============ PRODUCT CARD ============ */
.product__title {
	color: #545454 !important;
	font-weight: 500 !important;
}
.products__subtitle {
	color: #94a3b8 !important;
	font-weight: 400 !important;
}

/* ============ WORK BUTTONS (Contact Me) ============ */
.work_button:not(.store-badge) {
	box-shadow: none !important;
	border-color: #f1f5f9 !important;
	color: #475569 !important;
	font-weight: 400 !important;
}
.work_button:not(.store-badge) i {
	color: #475569 !important;
}
.work_button:not(.store-badge):hover {
	box-shadow: none !important;
}

/* ============ STORE BUTTONS ============ */
.store-buttons-container {
	width: 100% !important;
}
.store-title {
	font-weight: 300 !important;
	font-size: 0.82rem !important;
}
.work_button.store-badge {
	box-shadow: none !important;
	border-color: #f1f5f9 !important;
}
.work_button.store-badge:hover {
	box-shadow: none !important;
}

/* ============ REDESIGNED TAG BUTTONS ============ */
.product__tags {
	gap: 7px !important;
}
.product__tag,
.product__tag.flutter,
.product__tag.dart,
.product__tag.firebase,
.product__tag.figma {
	background-color: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 20px !important;
	padding: 4px 10px 4px 7px !important;
	height: auto !important;
	gap: 5px !important;
	color: #94a3b8 !important;
	font-weight: 400 !important;
	font-size: 0.75rem !important;
}
.tag__icon {
	background-color: transparent !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
}
.tag__icon i {
	font-size: 0.9rem !important;
}
.tag__icon img {
	width: 13px !important;
	height: 13px !important;
}
.product__tag.flutter .tag__icon,
.product__tag.flutter .tag__icon i {
	color: #42a5f5 !important;
}
.product__tag.dart .tag__icon,
.product__tag.dart .tag__icon i {
	color: #0175c2 !important;
}
.product__tag.firebase .tag__icon,
.product__tag.firebase .tag__icon i {
	color: #f57f17 !important;
}
.product__tag.figma .tag__icon i {
	background: linear-gradient(
		135deg,
		#ff5db1 0%,
		#ff5db1 35%,
		#1abcfe 68%,
		#0acf83 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	display: inline-block;
}
.tag__icon img {
	width: 13px !important;
	height: 13px !important;
}

/* ============ CERTIFICATES SECTION ============ */
.certificates__card {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fff !important;
	border-radius: 16px !important;
	border: 3px solid #fff !important;
	overflow: hidden !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.certificates__card img {
	width: 100% !important;
	height: 280px !important;
	object-fit: cover !important;
	object-position: top !important;
	display: block !important;
}

.products {
	background-color: #fff !important;
}
.certificates.section {
	background:
		radial-gradient(
			circle at 15% 50%,
			rgba(59, 130, 246, 0.15) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 85% 30%,
			rgba(45, 212, 191, 0.15) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 50% 50%,
			rgba(255, 255, 255, 0.8) 0%,
			rgba(248, 250, 252, 1) 100%
		);
	background-color: #f1f5f9;
	padding: 5rem 1.5rem;
}
.certificates__header {
	text-align: center;
	max-width: 1024px;
	margin: 0 auto 3rem;
}
.certificates__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #1e293b;
	color: #94a3b8;
	border: 1px solid #334155;
	border-radius: 50px;
	padding: 0.32rem 0.85rem;
	font-size: 0.73rem;
	@media screen and (max-width: 600px) {
		.certificates__badge {
			padding: 0.23rem 0.65rem;
			font-size: 0.68rem;
		}
	}
	font-weight: 400;
	margin-bottom: 1.2rem;
}
.certificates__badge-dot {
	width: 8px;
	height: 8px;
	background: #818cf8;
	border-radius: 50%;
}
.certificates__title {
	color: #1e293b;
	font-size: 2.5rem;
	font-weight: 800;
	font-style: normal;
	margin-bottom: 1rem;
	line-height: 1.3;
}
.certificates__title-gradient {
	background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.certificates__subtitle {
	color: #334155 !important;
	font-size: 1.25rem !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
}
br.cert-br-mobile {
	display: none;
}
@media screen and (max-width: 768px) {
	.certificates__title {
		font-size: 2.2rem;
	}
	.certificates__subtitle {
		font-size: 1.1rem !important;
	}
	br.cert-br-mobile {
		display: block;
	}
}
@media screen and (max-width: 480px) {
	.certificates__title {
		font-size: 1.85rem;
	}
	.certificates__subtitle {
		font-size: 1.05rem !important;
	}
}
.certificates__carousel {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	padding: 0 5rem;
}
.certificates__card {
	background: #fff;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
}
.certificates__card img {
	width: 100%;
	height: auto;
	display: block;
}
.certificates__nav-prev,
.certificates__nav-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: #334155;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: background 0.3s;
}
.certificates__nav-prev:hover,
.certificates__nav-next:hover {
	background: #475569;
}
.certificates__nav-prev {
	left: 0;
}
.certificates__nav-next {
	right: 0;
}
.certificates__nav-prev i,
.certificates__nav-next i {
	color: #fff;
	font-size: 1.5rem;
}
@media screen and (max-width: 768px) {
	.certificates__carousel {
		padding: 0 2.5rem;
	}
	.certificates__nav-prev,
	.certificates__nav-next {
		width: 32px;
		height: 32px;
	}
	.certificates__nav-prev i,
	.certificates__nav-next i {
		font-size: 1.2rem;
	}
}

/* ============ HIDE NAVBAR ON MOBILE ============ */
@media screen and (max-width: 768px) {
	.header-redesign,
	#header {
		display: none !important;
	}
	.home-redesign-section {
		padding-top: 3.5rem !important;
	}
	.hero-title-main {
		margin-top: 0.5rem !important;
		font-size: 4rem !important;
	}
	.hero-title-sub {
		font-size: 2.2rem !important;
	}
	.hero-description {
		font-size: 1.1rem !important;
	}
	.work__filters {
		gap: 0.35rem !important;
	}
	.work__items {
		padding: 0.5rem 1rem !important;
		font-size: 0.82rem !important;
		border-radius: 10px !important;
		gap: 0.3rem !important;
	}
	.work__items i {
		font-size: 0.95rem !important;
	}
	/* Mobile tag buttons */
	.product__tag,
	.product__tag.flutter,
	.product__tag.dart,
	.product__tag.firebase,
	.product__tag.figma {
		padding: 6px 13px 6px 9px !important;
		font-size: 0.85rem !important;
		height: auto !important;
		gap: 6px !important;
	}
	.tag__icon i {
		font-size: 1.5rem !important;
	}
	.tag__icon img {
		width: 24px !important;
		height: 24px !important;
	}
}

/* ============ WORK CONTAINER MOBILE — PREVENT LAYOUT JUMP ============ */
@media screen and (max-width: 968px) {
	.work__container {
		min-height: 380px !important;
		transition: min-height 0.3s ease !important;
	}
}

/* ============ COMING SOON CARD MOBILE ============ */
@media screen and (max-width: 768px) {
	.work__card.mix.web {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		text-align: center !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.work__card.mix.web i,
	.work__card.mix.web h3,
	.work__card.mix.web p {
		text-align: center !important;
		width: 100% !important;
	}
}

/* ============ MOBILE TITLE CENTER FIX ============ */
@media screen and (max-width: 600px) {
	.products__header,
	.products__header.container {
		text-align: center !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.section__title-static,
	.products__header .section__title-static,
	.work .section__title-static,
	.products .section__title-static {
		text-align: center !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.products__subtitle,
	.products__header .products__subtitle,
	.work .products__subtitle,
	.products .products__subtitle {
		text-align: center !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}