/* Base Styles */
:root {
	--border-radius: 8px;
	--transition: all 0.3s ease;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
	background-color: var(--darker-bg);
	color: var(--light-text);
	line-height: 1.6;
	overflow-x: hidden;
}

/* Global Styles */

.page-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	text-decoration: none;
	color: var(--light-text);
	transition: var(--transition);
}

a:hover {
	color: var(--primary-color);
}

button {
	cursor: pointer;
	border: none;
	outline: none;
	transition: var(--transition);
}

ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* Header Styles */
.site-header {
	background-color: var(--dark-bg);
	position: sticky;
	top: 0;
	z-index: 3;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header-container #profile-picture {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius);
	overflow: hidden;
	cursor: pointer;
	transition: var(--transition);
}

.header-container #profile-picture img {
	width: 50px;
	height: 50px;
	object-fit: cover;
}

.header-container #profile-picture:hover {
	transform: scale(1.05) rotate(2deg);
}

.header-container .user-inside {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: row;
	gap: 10%;
	width: 100%;
}

.header-container .user-actions {
	display: flex;
	position: absolute;
	top: 120%;
	right: 0;
	border-radius: var(--border-radius);
	background-color: var(--dark-bg);
	box-shadow: var(--glow);
	padding: 1rem;
	flex-direction: column;
	gap: 1rem;
}

.header-container .user-actions.hidden {
	display: none;
}

.logo img {
	height: 50px;
	width: auto;
}

.main-nav ul {
	display: flex;
	gap: 2rem;
}

.nav-link {
	font-weight: 500;
	padding: 0.5rem 0;
	position: relative;
}

.nav-link:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	transition: var(--transition);
}

.nav-link:hover:after,
.nav-link.active:after {
	width: 100%;
}
.header-left {
	width: 30%;
}

.header-right {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: flex-end;
	width: 30%;
	gap: 1.5rem;
}

.cart-icon {
	position: relative;
}

.cart-count {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: var(--accent-color);
	color: var(--light-text);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
}

.user-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--primary-color);
	transition: var(--transition);
}

.user-link:hover {
	background-color: var(--primary-color);
	color: var(--light-text);
}

/* Hero Section */
.shop-hero,
.home-hero {
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../img/banner2.png');
	background-size: cover;
	background-position: bottom;
	height: 30vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
}

.hero-content {
	width: 100%;
	height: 100%;
	padding: 2rem;
}

.hero-content h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
	font-size: 1.2rem;
	color: var(--gray-text);
}

.hero-text {
	height: 100%;
	display: flex;
	gap: 1rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.home-hero img {
	height: 50%;
}

.hero-text #nbOfPlayer {
	width: calc(fit-content + 0.5rem);
	font-size: 2rem;
	color: var(--primary-color);
	font-weight: bold;
	background-color: var(--dark-bg);
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);

	padding: 0.5rem 1rem;
	border-radius: 1rem;
}
.actionButton {
	background-color: var(--primary-color);
	color: var(--light-text) !important;
	box-shadow: var(--box-shadow);
	padding: 0.8rem 1rem;
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: var(--transition);
}

.actionButton a {
	color: var(--light-text) !important;
}

.actionButton:hover {
	background-color: var(--secondary-color);
	box-shadow: var(--glow);
}

.actionButton.full-width {
	width: 100%;
}

/* Checkout Section */

.payement-content {
	width: 100%;
	max-width: 70vw;
	margin: 2rem auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

.roundedBase.payementDiv {
	background: var(--dark-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: 2rem 2.5rem;
	margin-bottom: 2rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}

#checkout-button {
	width: 100%;
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
	font-weight: bold;
}

.payementDetails {
	width: 100%;
	background: var(--darker-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: 1.5rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.payementDetails h2 {
	font-size: 1.3rem;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.payementDetails span {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--gray-text);
	font-size: 1rem;
}

.payementDetails .order-id,
.payementDetails .order-status,
.payementDetails .shop-id-used {
	font-weight: 500;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.payementDetails .order-id span,
.payementDetails .order-status span,
.payementDetails .shop-id-used span {
	margin-bottom: 0rem;
}

.payementDetails .shop-id-used {
	font-size: 0.9rem;
	color: var(--light-text);
	background-color: var(--dark-bg);
	padding: 0.5rem;
	border-radius: var(--border-radius);
}

#order-details {
	margin-top: 1rem;
	width: 100%;
}

#order-details li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--light-gray);
	font-size: 1rem;
}

#order-details li.total {
	font-weight: bold;
	color: var(--primary-color);
	border-top: 2px solid var(--primary-color);
	border-bottom: none;
	margin-top: 0.7rem;
	font-size: 1.1rem;
}

.payement-content .item-name {
	flex: 2;
	color: var(--light-text);
}

.payement-content .item-quantity {
	flex: 1;
	text-align: center;
	color: var(--gray-text);
}

.payement-content .item-price {
	flex: 1;
	text-align: right;
	color: var(--primary-color);
}

.payement-content .actionButton {
	margin-top: 1.5rem;
}

/* home Content */
.home-content {
	width: 80%;
	margin: 2rem auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.home-content .products-container {
	width: 100%;
}
.home-content .products-container .products-grid {
	grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
}

.section-title {
	font-size: 1.8rem;
	margin-bottom: 2rem;
}

.tiktok-live-banner {
	background-color: #fe2c55;
	color: white;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	position: relative;
	z-index: 10;
	width: 100%;
}

.live-indicator {
	display: flex;
	align-items: center;
	gap: 5px;
}

.live-dot {
	width: 10px;
	height: 10px;
	background-color: white;
	border-radius: 50%;
	animation: blink 1.5s infinite;
}

.live-text {
	font-weight: bold;
	letter-spacing: 1px;
}

.watch-live-btn {
	background-color: white;
	color: #fe2c55;
	padding: 5px 15px;
	border-radius: 20px;
	font-weight: bold;
	text-decoration: none;
	transition: all 0.3s;
}

.watch-live-btn:hover {
	background-color: #eeeeee;
	transform: scale(1.05);
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

.welcome-section .welcome-video {
	width: 50%;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.whyJoinUs,
.welcome-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background-color: var(--dark-bg);
	padding: 1.5rem;
	border-radius: calc(var(--border-radius) + 1.5rem);
	box-shadow: var(--box-shadow);
	align-items: center;
	opacity: 0;
	animation: slideIn 0.5s ease forwards;
}

.whyJoinUs img {
	width: 100%;
}

.whyJoinUs-content {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
	gap: 1rem;
}

.whyJoinUs-card {
	background-color: var(--darker-bg);
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: var(--transition);
	box-shadow: var(--box-shadow);
	height: 100%;
	display: flex;
	align-items: center;
	padding: 1.5rem;
	flex-direction: column;
	cursor: pointer;
	text-align: center;
	opacity: 0;
}

.whyJoinUs-card:nth-child(1) {
	animation: slideIn 0.5s ease 0.5s forwards;
}

.whyJoinUs-card:nth-child(2) {
	animation: slideIn 0.5s ease 0.75s forwards;
}

.whyJoinUs-card:nth-child(3) {
	animation: slideIn 0.5s ease 1s forwards;
}

.whyJoinUs-card:nth-child(4) {
	animation: slideIn 0.5s ease 1.25s forwards;
}
.whyJoinUs-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--glow);
}

.features-section {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 1.5rem;
	border-radius: calc(var(--border-radius) + 1.5rem);
	box-shadow: var(--box-shadow);
	background-color: var(--dark-bg);
}

.feature-block {
	display: flex;
	align-items: center;
	gap: 40px;
	background-color: var(--light-gray);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	overflow: hidden;
	transition: var(--transition);
}

.feature-block img {
	width: 50%;
	height: auto;
	object-fit: cover;
}

.feature-block .text {
	color: var(--light-text);
	padding: 1.5rem;
	width: 50%;
}

.feature-block .text h3 {
	color: var(--primary-color);
	margin-bottom: 10px;
	font-size: 1.8rem;
}

.feature-block .text p {
	color: var(--gray-text);
	font-size: 1rem;
}

.feature-block.left-image {
	flex-direction: row;
}

.feature-block.right-image {
	flex-direction: row-reverse;
}

.feature-block.stacked {
	flex-direction: column;
	text-align: center;
}

.feature-block.stacked img {
	width: 100%;
	max-height: 400px;
}

/* Admin Content */

.admin-content {
	width: 80%;
	margin: 2rem auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.admin-content .filter-buttons,
.leaderboard-interval {
	display: flex;
	gap: 1rem;
}

.leaderboard-interval {
	justify-content: space-evenly;
	margin-bottom: 2%;
}

.admin-content .filter-buttons button,
.leaderboard-interval button {
	padding: 0.8rem 1rem;
	background-color: var(--primary-color);
	color: var(--light-text);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: var(--transition);
}

.admin-content .filter-buttons button:hover,
.leaderboard-interval button:hover {
	background-color: var(--secondary-color);
}

.admin-content .stat-container {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.admin-content .stat-container .stat-text {
	background-color: var(--dark-bg);
	padding: 1rem 1.5rem;
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: var(--transition);
	box-shadow: var(--box-shadow);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.admin-content table,
.leaderboard-content table .cancel-content table,
.success-content table,
.historique-content table {
	width: 100%;
}

.admin-content table th,
.admin-content table td,
.leaderboard-content table th,
.leaderboard-content table td,
.cancel-content table th,
.cancel-content table td,
.success-content table th,
.success-content table td,
.historique-content table th,
.historique-content table td {
	padding: 0.5rem;
	text-align: center;
}

.admin-content table th,
.leaderboard-content table th,
.cancel-content table th,
.success-content table th,
.historique-content table th {
	background-color: var(--dark-bg);
	color: var(--light-text);
}

.admin-content table tr:nth-child(even),
.leaderboard-content table tr:nth-child(even),
.cancel-content table tr:nth-child(even),
.success-content table tr:nth-child(even),
.historique-content table tr:nth-child(even) {
	background-color: var(--light-gray);
}

.admin-content table tr:hover,
.leaderboard-content table tr:hover,
.cancel-content table tr:hover,
.success-content table tr:hover,
.historique-content table tr:hover {
	background-color: var(--dark-bg);
}

.admin-content table tr:hover td,
.leaderboard-content table tr:hover td,
.cancel-content table tr:hover td,
.success-content table tr:hover td,
.historique-content table tr:hover td {
	color: var(--primary-color);
}

.admin-content table tr td,
.leaderboard-content table tr td,
.cancel-content table tr td,
.success-content table tr td,
.historique-content table tr td {
	color: var(--light-text);
}

.leaderboard-content h1 {
	margin: 2%;
	text-align: center;
}

.leaderboard-table {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.leaderboard-table table {
	width: 100%;
}

#personal-leaderboard {
	margin: 2%;
	padding: 1%;
	border-radius: var(--border-radius);
	display: flex;
	justify-content: center;
	border: var(--primary-color) 2px solid;
}

.admin-content .absence-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	background-color: var(--dark-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}

.admin-content .absence-container .absence-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.admin-content .absence-container .absence-form input,
.admin-content .absence-container .absence-form textarea {
	padding: 0.5rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--light-gray);
	background-color: var(--dark-bg);
	color: var(--light-text);
}

.admin-content .absence-container .absence-form input:active,
.admin-content .absence-container .absence-form input:focus,
.admin-content .absence-container .absence-form textarea:active,
.admin-content .absence-container .absence-form textarea:focus {
	border: 1px solid var(--primary-color);
}

.admin-content table select {
	padding: 0.5rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--light-gray);
	background-color: var(--dark-bg);
	color: var(--light-text);
	width: 100%;
}

.admin-content table select option {
	background-color: var(--dark-bg);
	color: var(--light-text);
}

.admin-content .absence-container .absence-form button {
	padding: 0.8rem;
	background-color: var(--primary-color);
	color: var(--light-text);
	border-radius: var(--border-radius);
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	transition: var(--transition);
}

.admin-content .absence-container .absence-form button:hover {
	background-color: var(--secondary-color);
}

.admin-content .absence-container .absence-form .form-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

.admin-content .absence-container .absence-form .form-container label {
	display: flex;
	flex-direction: column;
}

.admin-content .absence-container th {
	background-color: var(--darker-bg);
}

.admin-content .absence-container tr {
	background-color: var(--light-gray);
}

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

#admin-modal .admin-modal-content {
	background-color: var(--dark-bg);
	padding: 1.5rem;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	width: 80%;
	height: 90%;
	overflow-y: auto;
}

#admin-modal .admin-modal-content::-webkit-scrollbar {
	width: 0px;
}

#admin-modal .admin-modal-content .modal-body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	padding: 20px;
	display: flex;
	gap: 2rem;
	flex-direction: column;
}

#admin-modal .admin-modal-content .modal-body.changeTheme div {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#admin-modal .admin-modal-content .modal-body.changeTheme div input {
	padding: 0.5rem;
	width: 100%;
	min-height: 3rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--light-gray);
	background-color: var(--dark-bg);
	color: var(--light-text);
}

#admin-modal .admin-modal-content .modal-footer {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.admin-content .quick-buttons {
	padding: 1.5rem;
	background-color: var(--dark-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	display: flex;
	gap: 1rem;
}

.admin-content .quick-buttons button {
	padding: 0.8rem 1rem;
	background-color: var(--primary-color);
	color: var(--light-text);
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: var(--transition);
}

.historique-content,
.leaderboard-content,
.cancel-content,
.success-content,
.login-content,
.mentions-legales-content,
.profile-content,
.cgv-content,
.cgu-content,
.error-content {
	width: 80%;
	margin: 2rem auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.error-content {
	justify-content: center;
	align-items: center;
}

.error-content img {
	width: 25%;
}

.cancelDiv,
.successDiv {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.baseButton {
	width: 100%;
	padding: 0.8rem 1rem;
	background-color: var(--primary-color);
	color: var(--light-text) !important;
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: var(--transition);
}

.baseButton:hover {
	background-color: var(--secondary-color);
}

.fullWidthBanner,
.fullWidthBanner .actionButton {
	width: 100%;
}

/* Profile Page */

.profile-content section {
	background-color: var(--dark-bg);
	padding: 1.5rem;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}

.profile-content .profile-info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.profile-content .profile-info-content {
	display: flex;
	flex-direction: row;
	gap: 1rem;
}

.profile-content .profile-info-content img {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--border-radius);
}

.profile-content .profile-info-picture {
	width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.profile-content .profile-info-picture .profile-picture {
	width: 100%;
}

.profile-content .profile-info-form {
	width: 70%;
}

.profile-content #randomImg {
	margin: 2% 0;
	width: 100%;
}
.profile-content .profile-info-form label {
	width: 30%;
	display: flex;
	flex-direction: column;
}

.profile-content .profile-info-form #urlLabel {
	width: 100%;
}

.profile-content .profile-info-form input {
	padding: 0.5rem;
	min-height: 2rem;
	width: 100%;
	border-radius: var(--border-radius);
	border: 1px solid var(--light-gray);
	background-color: var(--dark-bg);
	color: var(--light-text);
}

.profile-content .profile-info-form input:active,
.profile-content .profile-info-form input:focus {
	border: 1px solid var(--primary-color);
}

.profile-content .profile-info-form select {
	padding: 0.5rem;
	min-height: 2rem;
	width: 100%;
	border-radius: var(--border-radius);
	border: 1px solid var(--light-gray);
	background-color: var(--dark-bg);
	color: var(--light-text);
}

.profile-content .profile-info-form .form {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
}

.profile-content .profile-info-form .buttonCollection {
	display: flex;
	flex-wrap: wrap;
	margin-top: 1rem;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
}

.profile-content .gta-card {
	background-color: var(--darker-bg);
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: var(--transition);
	box-shadow: var(--box-shadow);
	width: 20%;
	display: flex;
	padding: 2%;
	text-align: center;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	cursor: pointer;
}

.profile-content .gta-card:hover {
	transform: translateY(-0.5rem) scale(1.05);
	box-shadow: var(--glow);
}

.profile-content .essential-gta-info,
.profile-content .identity-gta-info,
.profile-content .stats-gta-info {
	padding: 1.5rem;
	display: flex;
	flex-grow: 1;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}
/* Shop Content */
.shop-content {
	width: 80%;
	margin: 2rem auto;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 2rem;
}

.info-span {
	display: flex;
	justify-content: center;
	width: 80%;
	text-align: center;
	margin: 2rem auto;
	font-size: 0.9rem;
	color: var(--gray-text);
	background-color: var(--dark-bg);
	padding: 0 1rem;
	border-radius: var(--border-radius);
	text-align: center;
}

/* Filters */
.shop-filters {
	background-color: var(--dark-bg);
	border-radius: var(--border-radius);
	padding: 1.5rem;
	position: sticky;
	top: 90px;
	height: fit-content;
}

.shop-filters h3 {
	margin-bottom: 1.5rem;
	font-size: 1.3rem;
	color: var(--light-text);
	border-bottom: 1px solid var(--light-gray);
	padding-bottom: 0.5rem;
}

.filter-group {
	margin-bottom: 1.5rem;
}

.filter-group h4 {
	margin-bottom: 1rem;
	font-size: 1rem;
	color: var(--gray-text);
}

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

.filter-link {
	color: var(--gray-text);
	padding: 0.3rem 0;
	transition: var(--transition);
}

.filter-link:hover,
.filter-link.active {
	color: var(--primary-color);
	transform: translateX(5px);
}

.price-slider {
	padding: 0 0.5rem;
}

.slider {
	width: 100%;
	height: 5px;
	background: var(--light-gray);
	outline: none;
	-webkit-appearance: none;
	border-radius: 5px;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--primary-color);
	cursor: pointer;
}

.price-values {
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
	color: var(--gray-text);
}

/* Notification */

.notification {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;
	transform: translateY(100px);
	opacity: 0;
	transition: all 0.3s ease;
}

.notification.show {
	transform: translateY(0);
	opacity: 1;
}

.notification-content {
	background-color: var(--primary-color);
	color: white;
	padding: 15px 20px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.notification i {
	color: white;
}

/* Products Grid */
.products-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
}

.products-header h2 {
	font-size: 1.8rem;
}

.products-sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.products-sort select {
	padding: 0.5rem;
	border-radius: var(--border-radius);
	background-color: var(--dark-bg);
	color: var(--light-text);
	border: 1px solid var(--light-gray);
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
	gap: 2rem;
}

/* Product Card */
.product-card {
	background-color: var(--dark-bg);
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: var(--transition);
	box-shadow: var(--box-shadow);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.product-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--glow);
}

.product-image {
	height: 200px;
	overflow: hidden;
}

.product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
}

.product-card:hover .product-image img {
	transform: scale(1.05);
}

.product-info {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.product-title {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

.product-description {
	color: var(--gray-text);
	font-size: 0.9rem;
	margin-bottom: 1rem;
	flex-grow: 1;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.product-price {
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.product-actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.quantity-selector {
	display: flex;
	align-items: center;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.qty-btn {
	background-color: var(--light-gray);
	color: var(--light-text);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	transition: var(--transition);
}

.qty-btn:hover {
	background-color: var(--primary-color);
}

.qty-input {
	width: 100%;
	height: 40px;
	text-align: center;
	border: none;
	background-color: var(--light-gray);
	color: var(--light-text);
	font-size: 1rem;
	-moz-appearance: textfield;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.add-to-cart,
.see-info {
	padding: 0.8rem;
	background-color: var(--primary-color);
	color: var(--light-text);
	border-radius: var(--border-radius);
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	transition: var(--transition);
}

.add-to-cart:hover {
	background-color: var(--secondary-color);
	transform: translateY(-2px);
}

/* Cart Preview */
.cart-preview {
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background-color: var(--dark-bg);
	z-index: 5;
	transition: var(--transition);
	box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
}

.cart-preview.active {
	right: 0;
}

.cart-preview-header {
	padding: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--light-gray);
}

.close-cart {
	background: none;
	color: var(--gray-text);
	font-size: 1.2rem;
}

.close-cart:hover {
	color: var(--accent-color);
}

.cart-preview-content {
	flex-grow: 1;
	overflow-y: auto;
	padding: 1.5rem;
}

.cart-items {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cart-item {
	display: flex;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--light-gray);
}

.cart-item-image {
	width: 80px;
	height: 80px;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.cart-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-item-details {
	flex-grow: 1;
}

.cart-item-title {
	font-weight: 500;
	margin-bottom: 0.3rem;
}

.cart-item-price {
	color: var(--primary-color);
	font-weight: 500;
}

.cart-item-quantity {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.cart-item-remove {
	color: var(--accent-color);
	background: none;
	padding: 0;
	font-size: 1.2rem;
}

.cart-preview-footer {
	padding: 1.5rem;
	border-top: 1px solid var(--light-gray);
}

.cart-total {
	display: flex;
	justify-content: space-between;
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

.checkout-btn {
	display: block;
	width: 100%;
	padding: 1rem;
	background-color: var(--primary-color);
	color: var(--light-text) !important;
	text-align: center;
	border-radius: var(--border-radius);
	font-weight: 500;
	transition: var(--transition);
}

.checkout-btn:hover {
	background-color: var(--secondary-color);
}

.id-boutique {
	display: flex;
	flex-direction: column;
}

.id-boutique input {
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	background-color: #f9f9f9;
}

.id-boutique input:active,
.id-boutique input:focus {
	border: 1px solid var(--primary-color);
}

.clear-basket-container {
	margin-top: 20px;
	text-align: center;
}

.clear-basket-btn {
	background-color: var(--accent-color);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
}

.clear-basket-btn:hover {
	background-color: #e74c3c;
}

.empty-cart {
	text-align: center;
	color: var(--gray-text);
	padding: 20px 0;
}

/* Overlay */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 4;
	display: none;
}

.overlay.active {
	display: block;
}

/* Footer */
.site-footer {
	background-color: var(--dark-bg);
	margin-top: auto;
}

.footer-container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 3rem 1rem 1rem;
}

.footer-logo {
	text-align: center;
	margin-bottom: 2rem;
}

.footer-logo img {
	height: 60px;
}

.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
}

.footer-section h4 {
	font-size: 1.2rem;
	margin-bottom: 1rem;
	color: var(--light-text);
	position: relative;
}

.footer-section h4:after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 40px;
	height: 2px;
	background-color: var(--primary-color);
}

.footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.footer-links a {
	color: var(--gray-text);
	transition: var(--transition);
}

.footer-links a:hover {
	color: var(--primary-color);
	transform: translateX(5px);
}

.footer-links i {
	margin-right: 0.5rem;
}

.footer-cta .discord-link {
	background-color: var(--primary-color);
	color: var(--light-text);
	padding: 0.8rem 1rem;
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: var(--transition);
}

.footer-cta .discord-link:hover {
	background-color: var(--secondary-color);
}

.status-iframe {
	border-radius: var(--border-radius);
}

.footer-bottom {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid var(--light-gray);
	color: var(--gray-text);
	font-size: 0.9rem;
}

#discord-float-btn {
	position: fixed;
	bottom: 30px;
	left: 30px;
	z-index: 1000;
	background: var(--primary-color);
	color: var(--light-text);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	box-shadow: var(--glow, 0 4px 20px rgba(0, 0, 0, 0.2));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	animation: discord-pulse 1.5s infinite;
}
#discord-float-btn:hover {
	transform: scale(1.08) rotate(-3deg);
	box-shadow: 0 0 24px var(--primary-color);
}
@keyframes discord-pulse {
	0% {
		box-shadow: 0 0 0 0 var(--primary-color, #5865f2);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(88, 101, 242, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(88, 101, 242, 0);
	}
}

#discord-widget-modal {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1100;
	background: rgba(0, 0, 0, 0.4);
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	transition: opacity 0.3s;
}
#discord-widget-modal.hidden {
	display: none;
}
.discord-modal-content {
	background: var(--dark-bg, #23272a);
	border-radius: var(--border-radius);
	box-shadow: var(--glow, 0 4px 20px rgba(0, 0, 0, 0.3));
	padding: 1.5rem 1rem 1rem 1rem;
	margin: 0 0 2vw 2vw;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	animation: slideIn 0.4s;
}

#close-discord-modal {
	background: none;
	border: none;
	color: var(--light-text, #fff);
	font-size: 1.5rem;
	cursor: pointer;
	margin-bottom: 0.5rem;
	align-self: flex-end;
	transition: color 0.2s;
}
#close-discord-modal:hover {
	color: var(--primary-color, #5865f2);
}
@media (max-width: 600px) {
	.discord-modal-content iframe {
		width: 95vw;
		height: 60vh;
	}
}

/* Modale produit */
.product-modal {
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	transition: opacity 0.3s;
}
.product-modal-content {
	background: var(--dark-bg);
	border-radius: var(--border-radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	padding: 2.5rem 2rem 2rem 2rem;
	max-width: 50vw;
	width: 95vw;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: fadeIn 0.3s;
}
.product-modal .close-modal {
	position: absolute;
	top: 1.2rem;
	right: 1.5rem;
	font-size: 2rem;
	color: var(--gray-text);
	cursor: pointer;
	transition: color 0.2s;
	z-index: 2;
}
.product-modal .close-modal:hover {
	color: var(--primary-color);
}
.modal-image {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: var(--border-radius);
	margin-bottom: 1.2rem;
	box-shadow: var(--box-shadow);
	background: var(--darker-bg);
}
#modal-title {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 0.7rem;
	color: var(--primary-color);
	text-align: center;
}
.modal-price {
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 1rem;
	text-align: center;
}
#modal-description {
	color: var(--light-text);
	font-size: 1rem;
	margin-bottom: 0.5rem;
	white-space: pre-line;
	word-break: break-word;
}
@media (max-width: 600px) {
	.product-modal-content {
		max-width: 98vw;
		padding: 1.2rem 0.5rem 1.5rem 0.5rem;
	}
	.modal-image {
		width: 100px;
		height: 100px;
	}
}

/* Responsive Design */
@media (max-width: 992px) {
	.shop-content {
		grid-template-columns: 1fr;
	}

	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}

	.filters-container {
		order: 1;
	}

	.shop-filters {
		position: static;
	}
}

@media (max-width: 1300px) {
	.products-grid {
		grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
	}
}

@media (max-width: 768px) {
	.header-container {
		flex-direction: column;
		gap: 1rem;
	}

	.shop-content,
	.admin-content,
	.home-content,
	.historique-content,
	.cancel-content,
	.success-content,
	.login-content,
	.profile-content,
	.mentions-legales-content,
	.cgv-content,
	.cgu-content,
	.error-content {
		width: 100%;
	}

	.feature-block.right-image,
	.feature-block.left-image {
		flex-direction: column;
	}

	.feature-block img {
		width: 100%;
		max-height: 400px;
	}

	.feature-block .text {
		width: 100%;
	}

	.feature-block.stacked {
		text-align: left;
	}

	.header-right {
		width: fit-content;
	}

	.header-left {
		width: fit-content;
	}

	.header-container .user-inside {
		gap: 5rem;
	}

	.main-nav ul {
		gap: 1rem;
	}

	.hero-content h1 {
		font-size: 2.5rem;
	}

	.products-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.products-grid,
	.whyJoinUs-content {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	}

	.cart-preview {
		width: 100%;
		right: -100%;
	}

	.discord-modal-content {
		padding: 0;
	}
}

@media (max-width: 576px) {
	.products-grid,
	.whyJoinUs-content {
		grid-template-columns: 1fr !important;
	}

	.footer-content {
		grid-template-columns: 1fr !important;
	}

	.hero-content h1 {
		font-size: 2rem;
	}
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

.product-card {
	animation: fadeIn 0.5s ease forwards;
}