/* --------------------------   --------------------------
    01. Basic Contents
		- External Calls
        - Initialization
        - Basic Blocks
    02. Common Blocks
		- top navbar
		- bottom navbar
		- theme toggle button
		- page title
		- search
    03. Replace css
		- bootsrap main button replace
		- choice js replace
    04. Login Page
		- login basic class
		- login form class
		- login button class
		- theme toggle button class
    05. Account Page
    06. Category Page
    07. Shop Page
		- top filter
--------------------------   -------------------------- */

/* --------------------   -------------------- */
/*  01. Basic Contents - External Calls
/* --------------------   -------------------- */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap');

/* --------------------   -------------------- */
/*  01. Basic Contents - Initialization
/* --------------------   -------------------- */

	:root {
		/* Light Theme Base */
		--bg-light-start: #E6F0FF;
		--bg-light-end: #F7FAFF;
		--card-light: #FFFFFF;
		--text-light: #1A2238;
		--accent-light: #0097A7;
		/* Dashboard Specific Light vars */
		--text-muted-light: #64748B;
		--border-light: rgba(0, 0, 0, 0.08);
		--card-hover-light: #F8FAFC;
		--choices-bg-light: transparent;
		--choices-list-bg-light: #FFFFFF;
		/* Dark Theme Base */
		--bg-dark-start: #0A192F;
		--bg-dark-end: #1E293B;
		--card-dark: #243447;
		--text-dark: #E2E8F0;
		--accent-dark: #00E6B8;
		/* Dashboard Specific Dark vars */
		--text-muted-dark: #94A3B8;
		--border-dark: rgba(255, 255, 255, 0.08);
		--card-hover-dark: #1C2938;
		--choices-bg-dark: transparent;
		--choices-list-bg-dark: #243447;
	}

	html[data-theme="light"] {
		--bg-start: var(--bg-light-start);
		--bg-end: var(--bg-light-end);
		--card: var(--card-light);
		--card-hover: var(--card-hover-light);
		--text: var(--text-light);
		--accent: var(--accent-light);
		--text-muted: var(--text-muted-light);
		--border: var(--border-light);
		--choices-bg: var(--choices-bg-light);
		--choices-list-bg: var(--choices-list-bg-light);
	}

	html[data-theme="dark"] {
		--bg-start: var(--bg-dark-start);
		--bg-end: var(--bg-dark-end);
		--card: var(--card-dark);
		--card-hover: var(--card-hover-dark);
		--text: var(--text-dark);
		--accent: var(--accent-dark);
		--text-muted: var(--text-muted-dark);
		--border: var(--border-dark);
		--choices-bg: var(--choices-bg-dark);
		--choices-list-bg: var(--choices-list-bg-dark);
	}

/* --------------------   -------------------- */
/*  01. Basic Contents - Basic Blocks
/* --------------------   -------------------- */

	body {
		background: linear-gradient(145deg, var(--bg-start), var(--bg-end));
		color: var(--text);
		font-family: 'Outfit', sans-serif;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		transition: background 0.5s ease, color 0.3s ease;
		margin: 0;
		padding-bottom: 2rem;
	}

	body.login {
		background: linear-gradient(145deg, var(--bg-start), var(--bg-end));
		color: var(--text);
		font-family: 'Outfit', sans-serif;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		transition: background 0.5s ease, color 0.3s ease;
		margin: 0;
	}

	::placeholder {
		color: var(--text-muted) !important;
	}

/* --------------------   -------------------- */
/*  02. Common Blocks - top navbar
/* --------------------   -------------------- */

	.navbar {
		background-color: var(--card);
		transition: background-color 0.3s ease;
		border-bottom: 1px solid var(--border);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.navbar-brand {
		color: var(--accent) !important;
		font-weight: 700;
		margin-right: 2rem !important;
	}

	.navbar-brand i {
		font-size: 1.3rem;
	}

	.nav-link {
		color: var(--text) !important;
		opacity: 0.8;
		transition: 0.3s;
	}

	.nav-link:hover,
	.nav-link.active {
		opacity: 1;
		color: var(--accent) !important;
	}

	.navbar .dropdown-menu {
		background-color: var(--card);
		border: 1px solid var(--border);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
		border-radius: 0.8rem;
	}

	.navbar .dropdown-item {
		color: var(--text);
		padding: 0.5rem 1.2rem;
		transition: 0.2s;
	}

	.navbar .dropdown-item:hover {
		background-color: var(--card-hover);
		color: var(--accent);
	}

	@media (max-width: 991px) {
		.desktop-nav-menu {
			display: none !important;
		}

		.navbar-brand {
			margin-right: 0 !important;
		}
	}

/* --------------------   -------------------- */
/*  02. Common Blocks - bottom navbar
/* --------------------   -------------------- */

	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: var(--card);
		border-top: 1px solid var(--border);
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0.6rem 0;
		z-index: 100;
		padding-bottom: env(safe-area-inset-bottom, 0.6rem);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
		transition: background-color 0.3s ease;
	}

	.bottom-nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: var(--text-muted);
		text-decoration: none;
		font-size: 0.70rem;
		font-weight: 600;
		gap: 0.1rem;
		transition: color 0.3s;
		flex: 1;
	}

	.bottom-nav-item i {
		font-size: 1.3rem;
	}

	.bottom-nav-item.active,
	.bottom-nav-item:hover {
		color: var(--accent);
	}

	.bottom-nav .fab-button {
		background: var(--accent);
		color: #fff !important;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -1.8rem;
		border: 4px solid var(--bg-start);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
		transition: transform 0.2s;
	}

	html[data-theme="dark"] .bottom-nav .fab-button {
		border-color: var(--bg-dark-start);
	}

	.bottom-nav .fab-button:hover {
		transform: scale(1.05);
		color: #fff !important;
	}

	@media (min-width: 992px) {
		.bottom-nav {
			display: none !important;
		}

		.main-content {
			padding-bottom: 2rem !important;
		}
	}

/* --------------------   -------------------- */
/*  02. Common Blocks - theme toggle button
/* --------------------   -------------------- */

	.theme-toggle-btn {
		border: none;
		background: transparent;
		color: var(--text);
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0;
		font-family: inherit;
		height: 100%;
	}

	.theme-toggle-btn:hover {
		color: var(--accent);
	}

	.theme-toggle-btn.icon-1_1 {
		font-size: 1.1rem;
	}

/* --------------------   -------------------- */
/*  02. Common Blocks - page title
/* --------------------   -------------------- */

	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1.5rem;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.page-title {
		font-weight: 700;
		margin: 0;
		color: var(--text);
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.title-icon {
		color: var(--accent);
		background: rgba(0, 151, 167, 0.1);
		padding: 0.4rem 0.6rem;
		border-radius: 0.6rem;
		font-size: 1.2rem;
	}

	html[data-theme="dark"] .title-icon {
		background: rgba(0, 230, 184, 0.1);
	}

/* --------------------   -------------------- */
/*  02. Common Blocks - search
/* --------------------   -------------------- */

	.controls-container {
		display: flex;
		flex-wrap: wrap;
		gap: 0.8rem;
		align-items: center;
	}

	.search-box {
		background: var(--input-bg);
		border: 1px solid var(--border);
		border-radius: 2rem;
		padding: 0.5rem 1.2rem;
		color: var(--text);
		width: 100%;
		max-width: 300px;
		transition: all 0.3s ease;
		font-size: 0.95rem;
	}

	.search-box::placeholder {
		color: var(--text-muted);
	}

	.search-box:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.1);
	}

/* --------------------   -------------------- */
/*  03. Replace css - bootsrap main button replace
/* --------------------   -------------------- */

	.btn-accent {
		background-color: var(--accent);
		color: #fff;
		border: none;
		border-radius: 0.6rem;
		font-weight: 600;
		transition: background 0.3s ease;
		padding: 0.5rem 1.2rem;
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}

	.btn-accent:hover {
		background-color: #007b8f;
		color: #fff;
	}

/* --------------------   -------------------- */
/*  03. Replace css - choice js replace
/* --------------------   -------------------- */

	.sort-wrapper {
		width: 140px;
	}

	.choices {
		margin-bottom: 0;
	}

	.choices__inner {
		background-color: var(--card);
		border: 1px solid var(--border);
		border-radius: 2rem;
		min-height: 42px;
		padding: 0.2rem 1rem;
		color: var(--text);
		font-family: inherit;
		font-weight: 600;
		font-size: 0.9rem;
		display: flex;
		align-items: center;
	}

	.is-open .choices__inner {
		border-radius: 1rem 1rem 0 0;
	}

	.is-focused .choices__inner {
		border-color: var(--accent);
	}

	.choices__list--single {
		padding: 0;
	}

	.choices[data-type*="select-one"]::after {
		border-color: var(--text) transparent transparent transparent;
		right: 15px;
	}

	.choices[data-type*="select-one"].is-open::after {
		border-color: transparent transparent var(--text) transparent;
	}

	.choices__list--dropdown {
		background-color: var(--choices-list-bg);
		border: 1px solid var(--border);
		border-radius: 0 0 1rem 1rem;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		margin-top: 0;
		z-index: 10;
	}

	.choices__list--dropdown .choices__item {
		color: var(--text);
		font-size: 0.9rem;
	}

	.choices__list--dropdown .choices__item--selectable.is-highlighted {
		background-color: var(--card-hover);
		color: var(--accent);
	}

/* --------------------   -------------------- */
/*  04. Login Page - login basic class
/* --------------------   -------------------- */

	.login-wrapper {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2rem 1rem;
		position: relative;
	}

	.glass-card {
		background-color: var(--card);
		border-radius: 1.2rem;
		padding: 2.5rem 2.2rem;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
		border: 1px solid var(--border);
		transition: all 0.3s ease;
		width: 100%;
		max-width: 420px;
	}

	.small-text {
		font-size: 0.9rem;
		text-align: center;
		margin-top: 1.5rem;
	}

	.login-icon-container {
		width: 64px;
		height: 64px;
		background: rgba(0, 151, 167, 0.1);
		border-radius: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1rem;
	}

	.login-icon {
		font-size: 2rem;
		color: var(--accent);
	}

	.login-text {
		color: var(--text);
	}

/* --------------------   -------------------- */
/*  04. Login Page - login form class
/* --------------------   -------------------- */

	.form-control {
		background-color: var(--input-bg);
		color: var(--text);
		border: 1px solid var(--border);
		border-radius: 0.8rem;
		padding: 0.8rem 1rem;
		font-size: 0.95rem;
	}

	.form-control::placeholder {
		color: var(--text-muted);
		opacity: 0.7;
	}

	.form-control:focus {
		background-color: var(--input-bg);
		color: var(--text);
		border-color: var(--accent);
		box-shadow: 0 0 0 0.15rem rgba(0, 151, 167, 0.2);
	}

	.form-label {
		font-weight: 600;
		font-size: 0.9rem;
		color: var(--text-muted);
		margin-bottom: 0.4rem;
	}

/* --------------------   -------------------- */
/*  04. Login Page - login button class
/* --------------------   -------------------- */

	.btn-accent {
		background-color: var(--accent);
		color: #fff;
		border: none;
		border-radius: 0.8rem;
		font-weight: 600;
		transition: background 0.3s ease;
		padding: 0.8rem;
		width: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		font-size: 1.05rem;
		margin-top: 1rem;
	}

	.btn-accent:hover {
		background-color: #007b8f;
		color: #fff;
	}

/* --------------------   -------------------- */
/*  04. Login Page - theme toggle button class
/* --------------------   -------------------- */

	.theme-bubble {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: 50%;
		cursor: pointer;
		color: var(--text);
		transition: all 0.3s ease;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	}

	.theme-bubble:hover {
		border-color: var(--accent);
		color: var(--accent);
	}

/* --------------------   -------------------- */
/*  07. Shop Page - top filter
/* --------------------   -------------------- */