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

/* Tailwind base styles (simplified) */
*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(to bottom, #0a0a23, #1a1a3a);
    color: #e0e0ff;
    margin: 0;
    /* --- CRITICAL FIX: Explicitly set body to flex container for centering --- */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center;   /* Center children horizontally */
    min-height: 100vh;     /* Ensure body takes full viewport height */
    padding: 1rem;         /* Keep overall padding */
}

/* --- NEW: Input Field Style Fix --- */
/* This ensures all inputs and selects use the dark theme */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
select {
    background-color: #1f2937; /* bg-gray-800 */
    color: #ffffff;
    border: 1px solid #374151; /* A subtle border */
    border-radius: 0.25rem; /* rounded */
    padding: 0.5rem; /* p-2 */
    width: 100%;
}

/* --- NEW: Style for placeholder text --- */
::placeholder {
    color: #9ca3af; /* text-gray-400 */
    opacity: 1;
}

/* Tailwind utility classes used in the HTML */
.hidden { display: none; }
/* Removed min-h-screen, flex, items-center, p-4 from body in HTML, now in CSS */
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.bg-gray-900 { background-color: #111827; }
.bg-opacity-80 { --tw-bg-opacity: 0.8; background-color: rgba(17, 24, 39, var(--tw-bg-opacity)); }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-700 { background-color: #374151; }
.bg-cyan-600 { background-color: #0891b2; }
.hover\:bg-cyan-700:hover { background-color: #0e7490; }
.bg-purple-600 { background-color: #9333ea; }
.hover\:bg-purple-700:hover { background-color: #7e22ce; }
.bg-green-600 { background-color: #16a34a; }
.hover\:bg-green-700:hover { background-color: #15803d; }
.bg-red-600 { background-color: #dc2626; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.bg-red-800 { background-color: #991b1b; }
.rounded-lg { border-radius: 0.5rem; }
.rounded { border-radius: 0.25rem; }
.w-full { width: 100%; }
.max-w-lg { max-width: 32rem; }
.max-h-96 { max-height: 24rem; }
.max-h-72 { max-height: 18rem; }
.max-h-60 { max-height: 15rem; }
.glow { box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }
.glow-sm { box-shadow: 0 0 6px rgba(0, 200, 200, 0.4); }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.neon-text { text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; }
.text-white { color: #ffffff; }
.hover\:text-white:hover { color: #ffffff; }
.text-cyan-400 { color: #22d3ee; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-green-400 { color: #4ade80; }
.text-red-500 { color: #ef4444; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-6 { margin-top: 1.5rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.block { display: block; }
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { --tw-ring-offset-width: 2px; box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow,0 0 #0000); }
.focus\:ring-cyan-500:focus { --tw-ring-color: #06b6d4; box-shadow: 0 0 0 2px var(--tw-ring-color); }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-opacity { transition-property: opacity; }
.duration-300 { transition-duration: 300ms !important; }
.fixed { position: fixed; }
.bottom-4 { bottom: 1rem; }
.right-4 { right: 1rem; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.overflow-y-auto { overflow-y: auto; }
.hover\:underline:hover { text-decoration: underline; }
button { cursor: pointer; }

/* --- Custom Scrollbar for themed overflow areas --- */
.scrollbar-custom {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #0e7490 #1f2937; /* thumb color track color */
}

.scrollbar-custom::-webkit-scrollbar {
    width: 8px;
}

.scrollbar-custom::-webkit-scrollbar-track {
    background: #1f2937; /* bg-gray-800 */
    border-radius: 10px;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: #0891b2; /* bg-cyan-600 */
    border-radius: 10px;
    border: 2px solid #1f2937; /* padding around thumb */
}

/* --- Futuristic Input & Select Styles --- */
.futuristic-input,
.futuristic-select {
    background-color: #1a202c; /* Slightly darker than gray-800 for depth */
    color: #e0e0ff;
    border: 1px solid #00ffff; /* Neon border */
    border-radius: 0.375rem; /* More rounded corners */
    padding: 0.6rem 0.8rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2); /* Subtle neon glow */
}

.futuristic-input:focus,
.futuristic-select:focus {
    outline: none;
    border-color: #22d3ee; /* Brighter neon on focus */
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}

.futuristic-select option {
    background-color: #1a202c; /* Background for options */
    color: #e0e0ff;
}

/* --- Glow Button (for primary actions) --- */
.glow-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.glow-button:hover {
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8), 0 0 20px rgba(147, 51, 234, 0.6); /* Cyan and purple mix */
    transform: translateY(-2px);
}

.glow-button:active {
    transform: translateY(0);
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
}

/* --- Mall Listing Card Style --- */
.mall-listing-card {
    background-color: #1f2937; /* bg-gray-800 */
    border: 1px solid #374151; /* bg-gray-700 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px; /* Ensure a consistent height for cards */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 8px rgba(0, 200, 200, 0.3); /* subtle glow-sm */
    position: relative;
    overflow: hidden;
}

.mall-listing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

.mall-listing-card .item-name {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #22d3ee; /* text-cyan-400 */
    margin-bottom: 0.5rem;
}

.mall-listing-card .item-details {
    font-size: 0.875rem; /* text-sm */
    color: #d1d5db; /* text-gray-300 */
    line-height: 1.4;
}

.mall-listing-card .item-meta {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-gray-500 */
    margin-top: 0.5rem;
}

.mall-listing-card .cancel-button {
    background-color: #dc2626; /* bg-red-600 */
    color: #ffffff;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    transition: background-color 0.2s ease;
    align-self: flex-end; /* Align to the bottom right */
    margin-top: 1rem;
}

.mall-listing-card .cancel-button:hover {
    background-color: #b91c1c; /* hover:bg-red-700 */
}

/* Category filter button active/inactive states */
.mall-filter-btn {
    background-color: #374151; /* bg-gray-700 */
    color: #9ca3af; /* text-gray-300 */
    transition: all 0.2s ease;
}

.mall-filter-btn.bg-cyan-600 { /* Active state */
    background-color: #0891b2;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.mall-filter-btn:hover:not(.bg-cyan-600) {
    background-color: #0e7490;
    color: #ffffff;
}

/* Custom Modal Styles */
#custom-modal {
    z-index: 1000; /* Ensure it's on top */
}

/* NEW: Force Discord icon size */
.discord-icon {
    width: 64px !important; /* Doubled from 24px */
    height: 64px !important; /* Doubled from 24px */
    object-fit: contain !important;
}