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

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	/* Color Scheme */
	--primary-bg: #0f0f0f;
	--secondary-bg: #1a1a1a;
	--card-bg: #252525;
	--accent-color: #6366f1;
	--accent-hover: #4f46e5;
	--text-primary: #ffffff;
	--text-secondary: #a1a1aa;
	--text-muted: #71717a;
	--border-color: #404040;
	--success-color: #10b981;
	--error-color: #ef4444;
	--warning-color: #f59e0b;
	
	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	
	/* Border Radius */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	
	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

html, body {
	height: 100%;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
	color: var(--text-primary);
	background: var(--primary-bg);
	overflow-x: hidden;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: var(--secondary-bg);
}

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

::-webkit-scrollbar-thumb:hover {
	background: var(--accent-hover);
}

/* Login Page Styles */
.loginstyle {
	min-height: 100vh;
	background: linear-gradient(135deg, 
		#0f0f0f 0%, 
		#1a1a2e 35%, 
		#16213e 70%, 
		#0f0f0f 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	padding: var(--space-xl);
}

.loginstyle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
		radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
	pointer-events: none;
	animation: backgroundMove 20s ease-in-out infinite;
}

@keyframes backgroundMove {
	0%, 100% { 
		transform: translate(0, 0) scale(1); 
	}
	25% { 
		transform: translate(-2%, 2%) scale(1.05); 
	}
	50% { 
		transform: translate(2%, -2%) scale(0.95); 
	}
	75% { 
		transform: translate(-1%, 1%) scale(1.02); 
	}
}

.login_header {
	width: 100px;
	height: 100px;
	border-radius: var(--radius-xl);
	margin-bottom: var(--space-xl);
	box-shadow: 
		0 20px 40px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(1deg); }
}

.logintext {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: var(--space-lg);
	background: linear-gradient(135deg, 
		#ffffff 0%, 
		#e2e8f0 25%, 
		#cbd5e1 50%, 
		#94a3b8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-align: center;
	letter-spacing: -0.02em;
	animation: textGlow 4s ease-in-out infinite;
}

@keyframes textGlow {
	0%, 100% { 
		filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1)); 
	}
	50% { 
		filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2)); 
	}
}

.codebox {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-xl);
	padding: var(--space-xl);
	margin: var(--space-xl) 0;
	max-width: 700px;
	width: 100%;
	box-shadow: 
		0 25px 50px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	position: relative;
	overflow: hidden;
}

.codebox::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(255, 255, 255, 0.05), 
		transparent);
	animation: shimmerEffect 3s infinite;
}

@keyframes shimmerEffect {
	0% { left: -100%; }
	100% { left: 100%; }
}

.line {
	color: var(--text-secondary);
	font-size: 1.1rem;
	text-align: center;
	line-height: 1.8;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.anim-typewriter {
	animation: typewriter 4s steps(40) 0.2s 1 normal both, blinkTextCursor 500ms steps(40) infinite normal;
	border-right: 2px solid rgba(255, 255, 255, 0.75);
	white-space: nowrap;
	overflow: hidden;
	align-items: center;
}

@keyframes typewriter {
	from { width: 0; }
	to { width: 24em; }
}

@keyframes blinkTextCursor {
	from { border-right-color: rgba(255, 255, 255, 0.75); }
	to { border-right-color: transparent; }
}

.loginbutton {
	background: linear-gradient(135deg, 
		var(--accent-color) 0%, 
		var(--accent-hover) 50%,
		#3b82f6 100%);
	color: var(--text-primary);
	border: none;
	border-radius: var(--radius-xl);
	padding: var(--space-lg) var(--space-2xl);
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	transition: all 0.4s ease;
	box-shadow: 
		0 10px 25px rgba(99, 102, 241, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	position: relative;
	overflow: hidden;
	min-width: 280px;
}

.loginbutton:hover {
	transform: translateY(-3px);
	box-shadow: 
		0 15px 35px rgba(99, 102, 241, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.2);
	background: linear-gradient(135deg, 
		#4f46e5 0%, 
		#3b82f6 50%,
		#2563eb 100%);
}

.loginbutton:active {
	transform: translateY(-1px);
}

.loginbutton::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(255, 255, 255, 0.2), 
		transparent);
	transition: left 0.5s ease;
}

.loginbutton:hover::before {
	left: 100%;
}

.login_text {
	padding-left: var(--space-sm);
}

.floor_set {
	display: flex;
	gap: var(--space-lg);
	margin-top: var(--space-2xl);
	justify-content: center;
	flex-wrap: wrap;
}

.login_floor {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	cursor: pointer;
	transition: all 0.3s ease;
	color: var(--text-primary);
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login_floor:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
}

/* Animated Background Elements */
.square {
	position: absolute;
	backdrop-filter: blur(5px);
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	animation: animate 10s linear infinite;
	animation-delay: calc(-1s * var(--i));
}

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

.square:nth-child(1) {
	top: 50%;
	right: 60%;
	width: 100px;
	height: 100px;
}

.square:nth-child(2) {
	top: 40%;
	right: 30%;
	width: 120px;
	height: 120px;
	z-index: 2;
}

.square:nth-child(3) {
	bottom: 70%;
	right: 30%;
	width: 80px;
	height: 80px;
	z-index: 2;
}

.square:nth-child(4) {
	top: 85%;
	left: 50%;
	width: 50px;
	height: 50px;
}

.square:nth-child(5) {
	top: 10%;
	right: 50%;
	width: 60px;
	height: 60px;
}

/* Main Application */
.singin {
	min-height: 100vh;
	background: var(--primary-bg);
	display: flex;
	flex-direction: column;
}

.header_singin {
	background: rgba(26, 26, 26, 0.95);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border-color);
	padding: var(--space-lg) var(--space-xl);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.header_welcome {
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.heaeritem {
	display: flex;
	align-items: center;
}

.point_users {
	font-size: 1rem;
	color: var(--text-secondary);
	margin-right: var(--space-md);
	font-weight: 500;
}

.point_users span {
	color: var(--warning-color);
	font-weight: 700;
	font-size: 1.1rem;
}

.dropdown {
    position: relative;
    display: inline-block;
	
	
}
  
.dropdown-content {
    display: none;
    position: absolute;
    color:white;
    font-family: 'Kanit', sans-serif;
    background-color: rgb(0 0 0 / 86%);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 0.375rem;
    z-index: 1;
    margin-top: 5px;
    margin-left: -40px;
	backdrop-filter: blur(5px);

}
  
.dropdown-content a {
    padding: 5px 16px;
    text-decoration: none; 
    display: block;
   
	
}



.dropdown:hover .dropdown-content {
    display: block;
    cursor: pointer;
    border-radius: 0.375rem;

    margin-top: -3px;

	
	
}

.dropdown-content a:hover {
    background-color: rgba(0,0,0,0.8);
	
	
}

.icon_avter2 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--accent-color);
	cursor: pointer;
	transition: all 0.3s ease;
}

.icon_avter2:hover {
	border-color: var(--accent-hover);
	box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.icon_avter2:active {
	transform: scale(0.95);
}

/* Search Container */
.search-container {
	padding: var(--space-lg) var(--space-xl) var(--space-xl);
	position: sticky;
	top: 80px;
	z-index: 50;
	background: var(--primary-bg);
	border-bottom: 1px solid var(--border-color);
}

.search-wrapper {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}

.search-input {
	width: 100%;
	padding: var(--space-lg) var(--space-xl) var(--space-lg) 3.5rem;
	background: var(--card-bg);
	border: 2px solid var(--border-color);
	border-radius: var(--radius-xl);
	color: var(--text-primary);
	font-size: 1rem;
	transition: all 0.3s ease;
	outline: none;
}

.search-input:focus {
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
	background: var(--secondary-bg);
}

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

.search-icon {
	position: absolute;
	left: var(--space-lg);
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
	transition: color 0.3s ease;
}

.search-input:focus + .search-icon {
	color: var(--accent-color);
}

.search-clear {
	position: absolute;
	right: var(--space-lg);
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.3s ease;
	padding: var(--space-xs);
	border-radius: var(--radius-sm);
	display: none;
}

.search-clear:hover {
	color: var(--text-primary);
	background: rgba(255, 255, 255, 0.1);
}

.search-clear.show {
	display: block;
}

/* Filter Tags */
.filter-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	justify-content: center;
}

.filter-tag {
	background: rgba(99, 102, 241, 0.2);
	color: var(--text-primary);
	border: 2px solid transparent;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-xl);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	user-select: none;
	position: relative;
	overflow: hidden;
}

.filter-tag:hover {
	background: rgba(99, 102, 241, 0.3);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.filter-tag.active {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.filter-tag:active {
	transform: translateY(0);
}

/* Store Grid */
.body_singin {
	flex: 1;
	padding: var(--space-xl);
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-xl);
	align-content: start;
	scroll-behavior: smooth;
}

.store_item_box {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
	height: 350px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.store_item_box:hover {
	transform: translateY(-8px);
	border-color: var(--accent-color);
	box-shadow: var(--shadow-xl);
}

.store_item_text {
	background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%);
	color: var(--text-primary);
	padding: var(--space-lg);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}

.img-box {
	flex: 1;
	padding: var(--space-lg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-style {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: var(--radius-md);
	transition: all 0.3s ease;
}

.store_item_box:hover .img-style {
	transform: scale(1.05);
}

/* No Results */
.no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--space-2xl);
	color: var(--text-muted);
}

.no-results h3 {
	font-size: 1.25rem;
	margin-bottom: var(--space-sm);
	color: var(--text-primary);
}

.no-results p {
	font-size: 0.875rem;
	margin-bottom: var(--space-lg);
}

.no-results svg {
	width: 64px;
	height: 64px;
	margin-bottom: var(--space-lg);
	opacity: 0.5;
}

/* Modal Styles - FIXED CENTER POSITIONING */
/* ถ้า modal ยังไม่แสดงถูกต้อง เพิ่ม CSS นี้ */
/* .popup, .popup-x {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
} */

/* .popup.show, .popup-x.show {
    display: flex !important;
} */

.popup{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	backdrop-filter: blur(5px);
	z-index: 1000 !important;

}
.popup-x{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	backdrop-filter: blur(5px);
	z-index: 1000 !important;

}

.popupbox-x{
	position: relative;
	/* margin-left: auto;
	margin-right: auto; */
	max-width: 900px !important;
	max-height: 90vh !important;

	z-index: 1001 !important;
	background: var(--card-bg) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: var(--radius-xl) !important;

	padding: 0 0 1.25em;
	left: 50%;
	top: 50%; 
	transform: translate(-50%, -50%);
}

.popupbox{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	height: 50%;
	background: #26262a;
	border-radius: var(--radius-xl);
	padding: 0 0 1.25em;
	left: 50%;
	top: 50%; 
	transform: translate(-50%, -50%);
	overflow: auto;
}

/* 
.popupbox, .popupbox-x {
	background: var(--card-bg) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: var(--radius-xl) !important;
	width: 100% !important;
	max-width: 900px !important;
	max-height: 90vh !important;
	overflow: hidden !important;
	box-shadow: var(--shadow-xl) !important;
	transform: scale(0.9) !important;
	opacity: 0 !important;
	transition: all 0.3s ease !important;
	margin: auto !important;
	position: relative !important;
} */

.popupbox-x {
	max-width: 600px !important;
}

.popup.show .popupbox, 
.popup-x.show .popupbox-x {
	transform: scale(1) !important;
	opacity: 1 !important;
}

.header_popup, .header_popup-x {
	background: var(--secondary-bg);
	border-bottom: 1px solid var(--border-color);
	padding: var(--space-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: var(--radius-xl) var(--radius-xl) 0.0cm 0.0cm;
	flex-shrink: 0;
}

.header_popup_fixbox {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--text-primary);
	font-weight: 600;
	font-size: 1.1rem;
}

#closepopup, #closepopup-x {
	background: var(--error-color);
	color: var(--text-primary);
	border: none;
	border-radius: var(--radius-md);
	padding: var(--space-sm);
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

#closepopup:hover, #closepopup-x:hover {
	background: #dc2626;
	transform: scale(1.05);
}

#closepopup:active, #closepopup-x:active {
	transform: scale(0.95);
}

.body_popup, .body_popup-x {
	padding: 0.5rem;
	overflow-y: auto;
	max-height: 80vh;
	scrollbar-width: thin;
	scrollbar-color: var(--accent-color) var(--secondary-bg);
}

.body_popup::-webkit-scrollbar, .body_popup-x::-webkit-scrollbar {
	width: 6px;
}

.body_popup::-webkit-scrollbar-track, .body_popup-x::-webkit-scrollbar-track {
	background: var(--secondary-bg);
	border-radius: 3px;
}

.body_popup::-webkit-scrollbar-thumb, .body_popup-x::-webkit-scrollbar-thumb {
	background: var(--accent-color);
	border-radius: 3px;
}

/* Product Detail Styles */
.displayflex {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
}

.displayflex_item {
	flex: 1;
}

.preview_body {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--space-lg);
	height: 300px;
	background: var(--secondary-bg);
	position: relative;
}

.preview_body iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.floor_video {
	background: rgba(255, 193, 7, 0.1);
	border-left: 4px solid var(--warning-color);
	padding: var(--space-lg);
	font-size: 0.875rem;
	color: var(--text-secondary);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-lg);
	line-height: 1.6;
}

.popuptexatice_box {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
	justify-content: center;
}

.popuptexatice_box_at {
	background: #fffa37;
	color: black;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.popuptexprice {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--warning-color);
	text-align: center;
	margin-bottom: var(--space-lg);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.buy_action {
	display: flex;
	gap: var(--space-md);
	justify-content: center;
	margin-top: var(--space-lg);
}

.buy_botton, .toup_botton {
	background: var(--accent-color);
	color: var(--text-primary);
	border: none;
	border-radius: var(--radius-md);
	padding: var(--space-lg) var(--space-xl);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-width: 120px;
	justify-content: center;
}

.buy_botton:hover, .toup_botton:hover {
	background: var(--accent-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.toup_botton {
	background: var(--success-color);
}

.toup_botton:hover {
	background: #059669;
}

.buy_botton:active, .toup_botton:active {
	transform: translateY(0);
}

.licenesbox {
    display: flex;
	justify-content: center;
	flex-direction: row;
    width: 100%;
    height: 10%;
    margin-top: 0.2%;
    background-color: rgba(255, 255, 255, 0.02);
}

.licenesbox {
    display: flex;
	justify-content: center;
	flex-direction: row;
    width: 100%;
    height: 10%;
    margin-top: 0.2%;
    background-color: rgba(255, 255, 255, 0.02);
}

.licenes_div{
    display: block;
	height: 100%;
    margin-left: 0.2%;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.5); 
    display: flex;
	justify-content: center;
	align-items: center;
}


.licnes_botton{
    display: block;

	height: 100%;
    margin-left: 0.2%;
    background-color: rgba(0, 107, 244, 1); 
    display: flex;
	justify-content: center;
	align-items: center;

    cursor: pointer;
}

.licnes_botton_dowland{
    display: block;

	height: 100%;
    margin-left: 0.2%;
    background-color: rgb(77, 150, 35); 
    display: flex;
	justify-content: center;
	align-items: center;

    cursor: pointer;
}

.licnes_botton_dowland:hover{
    background-color: rgb(116, 236, 46); 
}


.licenes_id{
    display: block;
	height: 100%;
    margin-left: 0.2%;
    background-color: rgba(0, 0, 0, 0.5); 
    display: flex;
	justify-content: center;
	align-items: center;
    
}

.licnes_botton:hover{
    background-color: rgb(128, 119, 255); 
}

/* Footer */
.footer__container {
	background: var(--secondary-bg);
	border-top: 1px solid var(--border-color);
	padding: var(--space-lg);
	text-align: center;
	color: var(--text-muted);
	font-size: 0.875rem;
}

/* Loading States */
.loading-state {
	position: relative;
	overflow: hidden;
}

.loading-state::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, 
		transparent, 
		rgba(99, 102, 241, 0.1), 
		transparent);
	animation: loadingSlide 1.5s infinite;
}

@keyframes loadingSlide {
	0% { left: -100%; }
	100% { left: 100%; }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

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

/* Responsive Design */
@media (max-width: 1200px) {
	.body_singin {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: var(--space-lg);
	}
}

@media (max-width: 768px) {
	:root {
		--space-xl: 1rem;
		--space-2xl: 1.5rem;
	}
	
	.loginstyle {
		padding: var(--space-lg);
	}
	
	.logintext {
		font-size: 2.5rem;
	}
	
	.login_header {
		width: 80px;
		height: 80px;
	}
	
	.codebox {
		padding: var(--space-lg);
		margin: var(--space-lg) 0;
	}
	
	.line {
		font-size: 1rem;
	}
	
	.loginbutton {
		padding: var(--space-md) var(--space-xl);
		font-size: 1rem;
		min-width: 260px;
	}
	
	.floor_set {
		gap: var(--space-md);
		margin-top: var(--space-xl);
	}
	
	.login_floor {
		width: 50px;
		height: 50px;
		padding: var(--space-md);
	}
	
	.header_singin {
		padding: var(--space-md);
		flex-direction: column;
		gap: var(--space-md);
		text-align: center;
	}
	
	.header_welcome {
		font-size: 1.5rem;
	}
	
	.search-container {
		padding: var(--space-md);
		top: 120px;
	}
	
	.search-input {
		padding: var(--space-md) var(--space-lg) var(--space-md) 3rem;
	}
	
	.search-icon {
		left: var(--space-md);
	}
	
	.search-clear {
		right: var(--space-md);
	}
	
	.filter-tags {
		justify-content: flex-start;
		gap: var(--space-xs);
	}
	
	.filter-tag {
		font-size: 0.8rem;
		padding: var(--space-xs) var(--space-md);
	}
	
	.body_singin {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		padding: var(--space-md);
		gap: var(--space-md);
	}
	
	.store_item_box {
		height: 300px;
	}
	
	.img-style {
		height: 150px;
	}
	
	/* Mobile Modal Fixes */
	.popup, .popup-x {
		padding: 0.5rem !important;
		align-items: stretch !important;
	}
	
	.popupbox, .popupbox-x {
		width: 100% !important;
		max-width: none !important;
		max-height: 100% !important;
		margin: 0 !important;
		border-radius: var(--radius-lg) !important;
		display: flex !important;
		flex-direction: column !important;
	}
	
	.header_popup, .header_popup-x {
		padding: var(--space-md);
		flex-shrink: 0;
	}
	
	.header_popup_fixbox {
		font-size: 1rem;
	}
	
	.body_popup, .body_popup-x {
		padding: var(--space-lg);
		flex: 1;
		overflow-y: auto;
		max-height: none;
	}
	
	.displayflex {
		flex-direction: column;
		gap: var(--space-lg);
	}
	
	.preview_body {
		height: 250px;
	}
	
	.popuptexprice {
		font-size: 2rem;
	}
	
	.buy_action {
		flex-direction: column;
		gap: var(--space-sm);
	}
	
	.buy_botton, .toup_botton {
		width: 100%;
		padding: var(--space-md) var(--space-lg);
	}
	
	.licenesbox {
		grid-template-columns: 1fr;
		gap: 1px;
	}
	
	.licenes_id, .licenes_div, .licnes_botton, .licnes_botton_dowland {
		justify-content: flex-start;
		padding: var(--space-sm) var(--space-md);
	}
	
	.licenes_id::before {
		content: 'ID: ';
		font-weight: normal;
		color: var(--text-muted);
	}
}

@media (max-width: 480px) {
	.logintext {
		font-size: 2rem;
	}
	
	.header_singin {
		padding: var(--space-sm);
	}
	
	.loginbutton {
		padding: var(--space-md) var(--space-lg);
		font-size: 0.9rem;
	}
	
	.popuptexprice {
		font-size: 1.75rem;
	}
	
	.body_singin {
		grid-template-columns: 1fr;
	}
	
	.dropdown-content {
		right: auto;
		left: 0;
		min-width: 180px;
	}
	
	/* Full Screen Modal on Small Devices */
	.popup, .popup-x {
		padding: 0 !important;
	}
	
	.popupbox, .popupbox-x {
		width: 100vw !important;
		height: 100vh !important;
		max-height: 100vh !important;
		border-radius: 0 !important;
	}
	
	.header_popup, .header_popup-x {
		padding: var(--space-sm) var(--space-md);
	}
	
	.body_popup, .body_popup-x {
		padding: var(--space-md);
	}
	
	.preview_body {
		height: 200px;
	}
	
	.popuptexprice {
		font-size: 1.75rem;
	}
	
	.floor_video {
		font-size: 0.8rem;
		padding: var(--space-md);
	}
}

/* Focus states for accessibility */
.loginbutton:focus,
.login_floor:focus,
.buy_botton:focus,
.toup_botton:focus,
.licnes_botton:focus,
.filter-tag:focus,
.search-input:focus,
.icon_avter2:focus {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	:root {
		--border-color: #666666;
		--text-secondary: #cccccc;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}