html {
scroll-padding-top: 68px; /* header height */
}
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #eaeaff;
overflow-x: hidden;
position: relative;
}
body > * {
position: relative;
z-index: 2;
}
html, body {
width: 100%;
height: 100%;
background: transparent;
overflow-x: hidden;
}
body {
background: #040611;
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
body {
position: relative;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse at top, #0a0e27 0%, #020510 40%, #000000 100%);
pointer-events: none;
}
/* Canvas for stars */
#cosmic-canvas {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
pointer-events: none;
background: transparent;
}
/* Fallback if canvas is not supported - CSS stars */
.star-layer {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
/* Small stars */
.star-layer-1 {
background-image:
radial-gradient(2px 2px at 20% 30%, white, transparent),
radial-gradient(2px 2px at 60% 70%, white, transparent),
radial-gradient(1px 1px at 50% 50%, white, transparent),
radial-gradient(1px 1px at 80% 10%, white, transparent),
radial-gradient(2px 2px at 90% 60%, white, transparent),
radial-gradient(1px 1px at 33% 80%, white, transparent),
radial-gradient(2px 2px at 15% 90%, white, transparent),
radial-gradient(1px 1px at 70% 20%, white, transparent);
background-size: 200% 200%;
animation: twinkle-1 3s ease-in-out infinite;
opacity: 0.8;
}
/* Medium stars */
.star-layer-2 {
background-image:
radial-gradient(3px 3px at 40% 20%, rgba(127, 252, 255, 0.8), transparent),
radial-gradient(2px 2px at 10% 60%, rgba(167, 139, 250, 0.8), transparent),
radial-gradient(3px 3px at 75% 40%, rgba(120, 180, 255, 0.8), transparent),
radial-gradient(2px 2px at 25% 75%, rgba(127, 252, 255, 0.8), transparent),
radial-gradient(3px 3px at 85% 85%, rgba(167, 139, 250, 0.8), transparent),
radial-gradient(2px 2px at 45% 15%, rgba(120, 180, 255, 0.8), transparent);
background-size: 250% 250%;
animation: twinkle-2 4s ease-in-out infinite;
opacity: 0.6;
}
/* Large stars */
.star-layer-3 {
background-image:
radial-gradient(4px 4px at 30% 50%, rgba(127, 252, 255, 1), transparent),
radial-gradient(3px 3px at 65% 25%, rgba(167, 139, 250, 1), transparent),
radial-gradient(4px 4px at 55% 80%, rgba(120, 180, 255, 1), transparent);
background-size: 300% 300%;
animation: twinkle-3 5s ease-in-out infinite;
opacity: 0.7;
}
/* Twinkle animations */
@keyframes twinkle-1 {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 0.3;
}
}
@keyframes twinkle-2 {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 0.2;
}
}
@keyframes twinkle-3 {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 0.4;
}
}
/* Nebula glow effect (optional) */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(circle at 20% 30%, rgba(88, 101, 242, 0.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(120, 180, 255, 0.1), transparent 40%),
radial-gradient(circle at 50% 50%, rgba(150, 100, 255, 0.08), transparent 50%);
pointer-events: none;
animation: nebula-drift 30s ease-in-out infinite;
}
@keyframes nebula-drift {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(-5%, 5%) scale(1.05);
}
66% {
transform: translate(5%, -5%) scale(0.95);
}
}
/* Shooting star effect (optional) */
@keyframes shooting-star {
0% {
transform: translateX(0) translateY(0);
opacity: 1;
}
100% {
transform: translateX(300px) translateY(300px);
opacity: 0;
}
}
.shooting-star {
position: fixed;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
z-index: -1;
animation: shooting-star 3s linear;
pointer-events: none;
}
h1, h2, h3{
font-weight:600;
letter-spacing:-0.01em;
}
p{
font-weight:400;
}
.btn{
font-weight:500;
}
:root{
/* ===== COLOR SYSTEM ===== */
--bg:#0b0d14;
--card:#141827;
--accent:#7fffd4;
--text:#eef0f6;
--muted:#9aa0b3;
}
:root {
--cosmic-blue: #6b8cff;
--cosmic-indigo: #3b3f8f;
--cosmic-purple: #8b6cff;
--cosmic-violet: #5a3d8c;
--deep-space: #05060d;
}
:root {
--card-bg: rgba(20,30,60,.45);
--btn-gradient: linear-gradient(135deg,#6aa8ff,#8bc4ff);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
position: relative;
overflow-x: hidden;
}
/* ===============================
COSMIC BACKGROUND � TRUE FIXED
================================ */
a{
color:var(--accent);
text-decoration:none;
}
header{
padding:24px 8%;
display:flex;
justify-content:space-between;
position: relative;
z-index: 1000;
}
.logo{
font-family: "Outfit", sans-serif;
font-size:2rem;
letter-spacing:2px;
}
.logo span{
background: linear-gradient(90deg, #5fa8ff, #7fffff);
-webkit-background-clip: text;
}
nav a{
margin-left:28px;
color:var(--muted);
font-size:.9rem;
}
nav a:hover{
color:var(--text)
}
.hamburger{
width:28px;
height:20px;
display:none;
flex-direction:column;
justify-content:space-between;
cursor:pointer;
position: relative;
z-index: 1001;
}
.hamburger span{
height:3px;
background:var(--text);
border-radius:4px;
}
/* Mobile Nav Links with Icon */
.mobile-nav a {
color: var(--text);
font-size: 1.1rem;
display: flex;
/* ← CHANGE to flex */
align-items: center;
gap: 12px;
/* ← Spacing between icon & text */
padding: 12px 0;
transition: all 0.3s ease;
}
.mobile-nav a:hover {
padding-left: 8px;
color: #7ffcff;
}
/* Icon Container */
.nav-icon {
font-size: 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(102, 204, 255, 0.1);
border-radius: 8px;
transition: all 0.3s ease;
}
/* Icon Hover Effect */
.mobile-nav a:hover .nav-icon {
background: rgba(102, 204, 255, 0.2);
transform: scale(1.1);
}
/* Active Page Indicator */
.mobile-nav a.active .nav-icon {
background: linear-gradient(135deg, #7ffcff, #6cf);
}
main{
padding:80px 8%;
max-width:1700px;
margin:0 auto;
background: transparent !important;
box-sizing: border-box;
}
.hero{
padding: 22vh 0 140px;
max-width: 720px;
}
.hero h1,
.hero p,
.hero .btn{
text-align: left;
}
.hero h1{
font-family:'Outft', sans-serif;
font-size:3rem;
margin-bottom:20px;
}
.hero h1 span{
color:var(--accent)
}
.hero p{
max-width:560px;
color:var(--muted);
margin-bottom:40px;
font-size:.95rem;
}
.btn{
display:inline-block;
padding:14px 36px;
border-radius:50px;
background:linear-gradient(135deg,var(--accent),#5fd6b6);
color:#0b0d14;
font-weight:600;
}
.section-title{
font-family: var(--font-accent);
font-size:1.9rem;
margin-bottom:48px;
text-align:center;
}
section::after{
content:var(--symbol-star);
position:absolute;
right:8%;
top:20%;
opacity:.05;
font-size:60px;
animation:breath 6s ease-in-out infinite;
}
@keyframes breath{
0%,100%{
opacity:.04
}
50%{
opacity:.1
}
}
.discord{
text-align:center;
padding:46px;
border-radius:30px;
background:radial-gradient(circle at top,#1e2646,#111628);
border:1px solid rgba(127,255,212,.2);
}
footer{
padding:40px 8%;
border-top:1px solid #1f2436;
text-align:center;
color:var(--muted);
font-size:.85rem;
}
@media(max-width:768px){
nav{
display:none
}
.hamburger{
display:flex
}
.hero h1{
font-size:2.3rem
}
}
/* WHY SECTION */
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:28px;
margin-top:50px;
}
.feature-card {
position: relative;
padding: 22px 20px;
border-radius: 18px;
background: rgba(18, 28, 60, 0.55);
backdrop-filter: blur(14px);
color: #eaf2ff;
overflow: hidden;
border: 1px solid rgba(120,170,255,.15);
box-shadow:
inset 0 0 18px rgba(120,170,255,.06),
0 20px 35px rgba(0,0,0,.45);
transition:
transform .4s ease,
box-shadow .4s ease;
}
.feature-card::before {
content: "";
position: absolute;
inset: 0;
padding: 1.5px;
border-radius: 18px;
background: linear-gradient(
135deg,
#5fa8ff,
#7fffff,
#8b5cff
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .75;
pointer-events: none;
}
.feature-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 0 25px rgba(120,190,255,.35),
0 25px 45px rgba(0,0,0,.55);
}
.feature-card h3 {
font-size: 17px;
margin-bottom: 8px;
letter-spacing: .5px;
}
.feature-card p {
font-size: 13px;
line-height: 1.5;
opacity: .8;
}
.feature-card h3::before{
content:var(--symbol-star);
position:absolute;
left:0;
opacity:.2;
transform:scale(.6);
transition:.3s;
}
.feature-card:hover h3::before{
opacity:.9;
transform:scale(1);
}
/* MOBILE TWEAK */
@media(max-width:600px){
.section-title{
font-size:1.6rem;
}
.feature-card{
padding:24px;
}
}
/* HERO MOBILE FIX */
@media (max-width: 768px){
.hero{
margin-left: auto;
margin-right: auto;
padding: 20vh 8% 120px;
}
}
@media (min-width: 1024px){
main{
max-width: 1400px;
}
@media (min-width: 1024px){
.features{
max-width: 1440px;
margin: 80px auto 0;
grid-template-columns: repeat(4, 300px);
justify-content: center;
gap: 36px;
}
}
.feature-card{
padding: 40px;
min-height: 240px;
border-radius: 26px;
}
.feature-card h3{
font-size: 1.25rem;
}
.feature-card p{
font-size: 1rem;
line-height: 1.7;
}
.hero{
margin-left: 8%;
}
}
.moon-orb{
position:fixed;
width:240px;
height:240px;
border-radius:50%;
background:radial-gradient(circle,#7fffd4,transparent 70%);
opacity:.07;
top:10%;
right:8%;
filter:blur(40px);
pointer-events:none;
animation:float 8s ease-in-out infinite;
}
@keyframes float{
0%,100%{
transform:translateY(0)
}
50%{
transform:translateY(-30px)
}
}
.hero h1{
animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-6px);
}
}
.hero h1{
animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-6px);
}
}
@media (min-width:1024px){
.feature-card:nth-child(1){
animation:floatA 7s ease-in-out infinite
}
.feature-card:nth-child(2){
animation:floatB 9s ease-in-out infinite
}
.feature-card:nth-child(3){
animation:floatA 8s ease-in-out infinite
}
.feature-card:nth-child(4){
animation:floatB 10s ease-in-out infinite
}
}
@keyframes floatA{
0%,100%{
transform:translateY(0)
}
50%{
transform:translateY(-12px)
}
}
@keyframes floatB{
0%,100%{
transform:translateY(0)
}
50%{
transform:translateY(8px)
}
}
.moon-symbol{
position:absolute;
top:15%;
left:0;
font-size:140px;
opacity:.04;
color:var(--accent);
pointer-events:none;
transition:transform .2s ease;
}
.mystic-divider{
text-align:center;
margin:140px 0;
color:var(--accent);
opacity:.4;
letter-spacing:20px;
}
.mystic-divider::before{
content:" ";
}
body.night-mode{
background:radial-gradient(circle at top,#0f1222,#05070d);
}
@keyframes drift{
0%,100%{
transform:translateY(0)
}
50%{
transform:translateY(-14px)
}
}
.hero span,
.feature-card{
animation:drift 8s ease-in-out infinite;
}
.market-title {
margin-bottom: 12px;
}
.market-desc {
margin-bottom: 60px;
/* this increases the spacing */
}
.product-action {
margin-top: 24px;
}
.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
opacity: 0;
pointer-events: none;
transition: .3s ease;
z-index: 999;
}
.overlay.active {
opacity: 1;
pointer-events: auto;
}
.mobile-nav {
position: fixed;
top: 0;
right: 0;
width: 75%;
max-width: 300px;
height: 100vh;
background: #111;
padding: 100px 20px;
transform: translateX(100%);
transition: .35s ease;
z-index: 1000;
}
.mobile-nav.active {
transform: translateX(0);
}
body.lock-scroll {
overflow: hidden;
}
.page-title {
text-align: center;
font-size: 2rem;
margin: 40px 0 20px;
letter-spacing: 1px;
}
.badge {
position: absolute;
top: 10px;
left: 10px;
background: #9b8cff;
color: #000;
font-size: 11px;
padding: 4px 8px;
border-radius: 12px;
}
.order-section {
max-width: 980px;
margin: 120px auto;
padding: 48px 40px;
background: linear-gradient(180deg, #121733, #0b0f1f);
border-radius: 32px;
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.order-section ol {
margin-top: 20px;
padding-left: 20px;
}
.order-section li {
margin-bottom: 12px;
color: #cfd4ff;
}
.order-section h2 {
margin-top: 30px;
}
.order-section ol {
font-size: .85rem;
color: #ccc;
}
.order-section .section {
background: rgba(255,255,255,0.04);
border-radius: 24px;
padding: 32px;
margin-bottom: 40px;
}
.order-section .section h2 {
font-family: 'Cinzel', serif;
font-size: 1.4rem;
margin-bottom: 18px;
letter-spacing: 1px;
}
.order-section .section ul {
list-style: none;
padding: 0;
}
.order-section .section li {
position: relative;
padding-left: 28px;
margin-bottom: 14px;
color: #cfd4ff;
line-height: 1.6;
}
.order-section .section li::before {
content: "";
position: absolute;
left: 0;
color: #9b8cff;
}
.order-main-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 44px;
font-size: 14px;
font-weight: 800;
letter-spacing: 1px;
color: #0b1220;
background: linear-gradient(180deg, #eaf3ff, #d7e7ff);
border-radius: 999px;
border: 1px solid rgba(120,160,255,.6);
overflow: hidden;
/* sweep stay inside */
isolation: isolate;
box-shadow:
0 4px 0 #1a3557,
0 14px 30px rgba(0,0,0,.45),
0 0 32px rgba(120,180,255,.55);
transition:
transform .2s ease,
box-shadow .2s ease;
}
/* text layer */
.order-main-btn span {
position: relative;
z-index: 2;
}
.order-main-btn {
position: relative;
overflow: hidden;
isolation: isolate;
}
.order-main-btn::before {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 30%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(120,180,255,.55),
transparent
);
transform: skewX(-20deg);
opacity: 0;
pointer-events: none;
z-index: 1;
}
.order-main-btn:hover::before {
animation: sweep-inside .75s ease;
}
/* hover */
.order-main-btn:hover {
transform: translateY(-2px);
box-shadow:
0 18px 36px rgba(0,0,0,.55),
0 0 42px rgba(125,188,222,.8);
}
.order-main-btn:active {
transform: translateY(1px);
box-shadow:
0 6px 16px rgba(0,0,0,.5),
0 0 26px rgba(125,188,222,.45);
}
@keyframes discord-sweep {
from {
left: -60%;
}
to {
left: 130%;
}
}
@media (max-width: 600px) {
.order-section {
padding: 36px 22px;
border-radius: 24px;
}
.order-section .section {
padding: 24px;
}
}
/* ===============================
SYNC ORDER DISCORD BUTTON
with product-card .order-btn
================================ */
.order-main-btn {
isolation: isolate;
overflow: hidden;
color: #0b1220 !important;
background: linear-gradient(
180deg,
#f7faff,
#d7e7ff
) !important;
border: 3px solid #1f3f66 !important;
box-shadow:
0 3px 0 #1a3557,
0 14px 28px rgba(0,0,0,.45),
0 0 28px rgba(125,188,222,.55);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.selected-product {
background: linear-gradient(
180deg,
rgba(114,116,217,0.14),
rgba(114,116,217,0.06)
);
border: 1px solid rgba(114,116,217,0.35);
border-radius: 20px;
padding: 18px 22px;
margin-bottom: 40px;
box-shadow:
0 18px 40px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.06);
}
.selected-product p {
font-size: 0.85rem;
color: #7274d9;
}
.selected-product h3 {
margin-top: 6px;
font-size: 1.2rem;
color: #7274d9;
text-shadow: 0 0 12px rgba(114,116,217,.35);
}
#product-list {
width: 100%;
max-width: none;
}
.market-switch {
display: flex;
justify-content: center;
gap: 14px;
margin: 40px auto 30px;
}
.switch-btn {
position: relative;
padding: 11px 30px;
font-size: 13px;
font-weight: 700;
letter-spacing: .5px;
color: #dbe7ff;
background: linear-gradient(180deg, #151b33, #0e1328);
border-radius: 999px;
border: 1px solid rgba(120,160,255,.25);
cursor: pointer;
overflow: hidden;
h
box-shadow:
0 6px 16px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.08);
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}
/* HOVER AURA (BUKAN SWEEP) */
.switch-btn::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(
circle at center,
rgba(140,190,255,.25),
transparent 60%
);
opacity: 0;
transition: opacity .25s ease;
pointer-events: none;
}
.switch-btn:hover {
transform: translateY(-2px);
border-color: rgba(140,190,255,.55);
box-shadow:
0 10px 28px rgba(0,0,0,.45),
0 0 24px rgba(140,190,255,.25);
}
.switch-btn:hover::before {
opacity: 1;
}
/* ACTIVE (SELECTED) */
.switch-btn.active {
color: #08111f;
color: #0b1220 !important;
background: linear-gradient(
180deg,
#f7faff,
#d7e7ff
) !important;
border: 3px solid #1f3f66 !important;
border-radius: 999px !important;
/* DEPTH + OUTER GLOW ONLY */
box-shadow:
0 3px 0 #1a3557,
0 14px 28px rgba(0,0,0,.45),
0 0 28px rgba(125,188,222,.55);
}
/* ACTIVE HOVER (more lively) */
.switch-btn.active:hover {
transform: translateY(-1px);
box-shadow:
0 18px 40px rgba(0,0,0,.5),
0 0 55px rgba(120,180,255,.75);
}
.product-desc {
font-size: .85rem;
line-height: 1.6;
color: #b6bddb;
margin-bottom: 14px;
}
.product-desc::before {
content: " ";
color: #6fffd2;
}
/* SEARCH BAR WRAPPER */
.filter-search {
max-width: 420px;
margin: 40px auto;
position: relative;
}
/* INPUT */
.tag-input {
width: 100%;
padding: 14px 18px;
border-radius: 14px;
background: rgba(15, 25, 45, 0.65);
border: 1px solid rgba(120, 180, 255, 0.35);
color: #eaf3ff;
font-size: 15px;
outline: none;
transition: 0.25s;
backdrop-filter: blur(8px);
}
.switch-btn i {
font-size: 14px;
}
/* PLACEHOLDER */
.tag-input::placeholder {
color: rgba(180, 210, 255, 0.6);
}
/* FOCUS EFFECT */
.tag-input:focus {
border-color: #6faeff;
box-shadow:
0 0 0 2px rgba(80, 150, 255, 0.25),
0 0 18px rgba(100, 170, 255, 0.45);
background: rgba(18, 30, 60, 0.85);
}
/* DROPDOWN */
.tag-dropdown {
position: absolute;
top: 110%;
width: 100%;
background: rgba(12, 20, 40, 0.95);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(120, 180, 255, 0.2);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
z-index: 20;
}
/* DROPDOWN ITEM */
.tag-item {
padding: 12px 16px;
cursor: pointer;
color: #dceaff;
transition: 0.2s;
}
.tag-item:hover {
background: rgba(100, 160, 255, 0.15);
color: #7fb3ff;
}
.selected-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
.selected-tag {
background: #222;
padding: 4px 8px;
border-radius: 6px;
display: flex;
gap: 6px;
align-items: center;
}
.selected-tag button {
background: none;
border: none;
color: red;
cursor: pointer;
}
.tag-dropdown div {
padding: 12px 18px;
cursor: pointer;
color: #cfd4ff;
}
.tag-dropdown div:hover {
background: rgba(155,140,255,0.2);
}
.admin-form, .admin-list {
max-width: 800px;
margin: 40px auto;
background: rgba(255,255,255,0.04);
padding: 32px;
border-radius: 24px;
}
.admin-form input,
.admin-form textarea,
.admin-form select {
width: 100%;
margin-bottom: 14px;
padding: 10px;
border-radius: 12px;
background: #0b0f1f;
color: #fff;
border: 1px solid rgba(155,140,255,0.3);
}
.admin-form button:not(.btn-chip-add):not(.chip-remove-btn) {
padding: 12px 28px;
border-radius: 999px;
background: linear-gradient(90deg, #9b8cff, #6fffd2);
border: none;
font-weight: 700;
}
.admin-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px;
margin-bottom: 10px;
background: rgba(255,255,255,0.06);
border-radius: 14px;
}
.admin-actions button {
margin-left: 10px;
}
/* ===============================
PAGINATION
================================ */
.pagination {
margin: 32px 0 48px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
.pagination button {
padding: 9px 22px;
border-radius: 10px;
border: 1px solid rgba(120, 180, 255, 0.2);
background: rgba(120, 180, 255, 0.06);
color: rgba(200, 220, 255, 0.65);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: 0.2s ease;
}
.pagination button:hover:not(:disabled) {
background: rgba(127, 252, 255, 0.12);
border-color: rgba(127, 252, 255, 0.35);
color: #7ffcff;
transform: translateY(-1px);
}
.pagination button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
#pageInfo {
font-size: 14px;
opacity: 0.7;
}
/* Product Counter */
.product-counter {
text-align: center;
font-size: 13px;
color: rgba(180, 200, 255, 0.5);
letter-spacing: 0.04em;
margin: 8px 0 0;
}
/* =========================
ADOPT PREVIEW MODAL
========================= */
.preview {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.preview.hidden {
display: none;
}
.box {
background: #0f0f14;
color: #fff;
width: 90%;
max-width: 520px;
max-;
overflow-y: auto;
border-radius: 16px;
padding: 20px;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#close {
position: absolute;
/* BUKAN fixed */
top: -18px;
right: -18px;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
cursor: pointer;
font-size: 26px;
font-weight: bold;
color: #fff;
background: linear-gradient(135deg, #ff5c5c, #d81b1b);
box-shadow:
0 8px 22px rgba(216,27,27,.45);
z-index: 10;
}
.close:hover {
opacity: 1;
}
#image {
width: 100%;
border-radius: 12px;
margin-bottom: 16px;
object-fit: cover;
}
#title {
font-size: 22px;
margin-bottom: 8px;
}
#desc {
font-size: 14px;
opacity: 0.85;
margin-bottom: 14px;
line-height: 1.6;
}
#tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
#tags .tag {
background: #1f1f2e;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.bottom .price {
font-weight: bold;
font-size: 16px;
}
.bottom .status {
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
text-transform: uppercase;
}
.bottom .status.open {
background: #2ecc71;
color: #000;
}
.bottom .status.sold {
background: #e74c3c;
color: #fff;
}
/* =========================
PRODUCT GRID
========================= */
/* =========================
PRODUCT GRID (GLOBAL)
========================= */
.product-grid {
display: grid;
gap: 16px;
padding: 0 14px;
width: 100%;
box-sizing: border-box;
/* Mobile: always 1 column */
grid-template-columns: 1fr;
}
/* Large phone / small tablet */
@media (min-width: 520px) {
.product-grid {
padding: 0 20px;
grid-template-columns: repeat(2, 1fr);
}
}
/* Tablet */
@media (min-width: 820px) {
.product-grid {
padding: 0 28px;
grid-template-columns: repeat(3, 1fr);
}
}
/* Desktop */
@media (min-width: 1200px) {
.product-grid {
padding: 0 32px;
grid-template-columns: repeat(4, 1fr);
}
}
/* =========================
PRODUCT CARD
========================= */
.product-card {
position: relative;
background: linear-gradient(
180deg,
rgba(26, 34, 76, 1),
rgba(111,255,210,0.06)
);
border-radius: 26px;
padding: 22px;
border: 1px solid rgba(155,140,255,0.25);
overflow: hidden;
/* THIS IS REQUIRED */
}
.product-card::after {
content: "";
position: absolute;
inset: auto -80px -80px auto;
width: 220px;
height: 220px;
background: radial-gradient(
circle,
rgba(146,120,255,0.25),
transparent 70%
);
opacity: 0.35;
pointer-events: none;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
/* SOLD overlay */
.product-card .sold {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.65);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: bold;
color: #ff5c5c;
border-radius: 14px;
z-index: 2;
}
/* =========================
IMAGE
========================= */
.product-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
/* =========================
TEXT
========================= */
.product-card h3 {
font-size: 16px;
margin: 6px 0 4px;
}
.product-card .product-desc {
font-size: 13px;
opacity: 0.75;
line-height: 1.4;
margin-bottom: 8px;
}
/* clamp desc (2 lines) */
.product-desc.clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =========================
TAG LIST
========================= */
.product-card .tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.product-card .tag {
background: #222238;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
opacity: 0.85;
}
/* =========================
BOTTOM (PRICE + STATUS)
========================= */
.card-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.card-bottom .price {
font-weight: bold;
font-size: 14px;
}
.card-bottom .status {
font-size: 11px;
padding: 3px 10px;
border-radius: 999px;
text-transform: uppercase;
}
.card-bottom .status.open {
background: #2ecc71;
color: #000;
}
.card-bottom .status.sold {
background: #e74c3c;
color: #fff;
}
/* =========================
MOBILE TWEAK
========================= */
@media (max-width: 480px) {
.product-card img {
height: 150px;
}
}
.hidden {
display;
none;
}
/* ===============================
ADMIN TABLE
================================ */
.admin-list {
max-width: 900px;
margin: 50px auto 80px;
}
.admin-list h2 {
color: #fff;
margin-bottom: 16px;
}
/* ===============================
ADMIN TABLE
================================ */
.admin-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
font-size: 14px;
}
.admin-table thead {
background: rgba(255,255,255,0.06);
}
.admin-table th {
text-align: center;
padding: 12px 14px;
font-weight: 600;
color: #ddd;
border-bottom: 1px solid rgba(255,255,255,0.1);
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table td {
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
color: #eee;
border-left: 1px solid rgba(255, 255, 255, 0.05);
text-align: center;
vertical-align: middle;
}
/* Enter animation per row */
.admin-table tbody tr {
opacity: 0;
transform: translateX(-10px);
animation: adminRowIn 0.3s ease forwards;
}
.admin-table tbody tr:nth-child(1) {
animation-delay: 0ms;
}
.admin-table tbody tr:nth-child(2) {
animation-delay: 40ms;
}
.admin-table tbody tr:nth-child(3) {
animation-delay: 80ms;
}
.admin-table tbody tr:nth-child(4) {
animation-delay: 120ms;
}
.admin-table tbody tr:nth-child(5) {
animation-delay: 160ms;
}
.admin-table tbody tr:nth-child(6) {
animation-delay: 200ms;
}
.admin-table tbody tr:nth-child(7) {
animation-delay: 240ms;
}
.admin-table tbody tr:nth-child(8) {
animation-delay: 280ms;
}
@keyframes adminRowIn {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.admin-table tr:hover td {
background: rgba(111, 255, 210, 0.04);
transition: background 0.2s ease;
}
.admin-table tr {
transition: background 0.2s ease;
}
/* ===============================
TYPE BADGE
================================ */
.admin-table td:nth-child(2) {
text-transform: capitalize;
font-weight: 600;
}
.admin-table td:nth-child(2)::before {
content: " ";
font-size: 10px;
margin-right: 4px;
color: #7dd3fc;
}
/* ===============================
ACTION BUTTONS
================================ */
.admin-table button {
border: none;
outline: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: 0.2s ease;
}
/* EDIT */
.admin-table button:first-child {
background: rgba(34,197,94,0.15);
color: #22c55e;
margin-right: 6px;
}
.admin-table button:first-child:hover {
background: rgba(34,197,94,0.3);
}
/* DELETE */
.admin-table button:last-child {
background: rgba(239,68,68,0.15);
color: #ef4444;
}
.admin-table button:last-child:hover {
background: rgba(239,68,68,0.3);
}
/* ===============================
MOBILE FRIENDLY
================================ */
/* ===============================
COSMIC TOAST
================================ */
/* =============================================
LUNAR MINT TOAST
============================================= */
#toast-container {
position: fixed;
bottom: 28px;
right: 24px;
z-index: 99999;
display: flex;
flex-direction: column-reverse;
gap: 10px;
pointer-events: none;
}
.toast {
position: relative;
min-width: 270px;
max-width: 320px;
padding: 14px 16px 14px 50px;
border-radius: 18px;
background: linear-gradient(135deg, #0d1235 0%, #111840 100%);
color: #ddeeff;
font-weight: 500;
font-size: 13.5px;
overflow: hidden;
pointer-events: all;
box-shadow:
0 8px 32px rgba(0,0,0,0.5),
0 0 0 1px rgba(120,180,255,0.12),
inset 0 1px 0 rgba(255,255,255,0.05);
opacity: 0;
transform: translateY(40px) scale(0.9);
transition:
opacity 0.38s cubic-bezier(0.34, 1.45, 0.64, 1),
transform 0.42s cubic-bezier(0.34, 1.45, 0.64, 1);
}
/* ── Paw icon on the left ── */
.toast-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
line-height: 1;
animation: toast-paw-wiggle 1.6s ease-in-out infinite;
}
@keyframes toast-paw-wiggle {
0%, 100% {
transform: translateY(-50%) rotate(-10deg);
}
50% {
transform: translateY(-50%) rotate(10deg);
}
}
.toast.show {
opacity: 1;
transform: translateX(0) scale(1);
}
.toast.finishing {
opacity: 0;
transform: translateY(20px) scale(0.92);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
/* text */
.toast-text {
position: relative;
z-index: 2;
line-height: 1.45;
}
/* ── Loading bar ── */
.toast-bar {
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #6fffd2, #9b8cff, #6fffd2);
background-size: 200% 100%;
animation: toast-bar-grow 1.6s ease forwards,
toast-bar-shimmer 1.2s linear infinite;
border-radius: 0 0 18px 18px;
}
@keyframes toast-bar-grow {
from {
width: 0%;
}
to {
width: 100%;
}
}
@keyframes toast-bar-shimmer {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
/* ── States ── */
.toast.success {
background: linear-gradient(135deg, #0a1f14 0%, #102b1e 100%);
box-shadow:
0 8px 32px rgba(0,0,0,0.5),
0 0 0 1px rgba(111,255,210,0.2),
0 0 20px rgba(111,255,210,0.06);
}
.toast.success .toast-icon {
animation: toast-sparkle 0.8s ease forwards;
}
@keyframes toast-sparkle {
0% {
transform: translateY(-50%) scale(0) rotate(-20deg);
}
60% {
transform: translateY(-50%) scale(1.3) rotate(10deg);
}
100% {
transform: translateY(-50%) scale(1) rotate(0deg);
}
}
.toast.error {
background: linear-gradient(135deg, #1f0a0a 0%, #2b1010 100%);
box-shadow:
0 8px 32px rgba(0,0,0,0.5),
0 0 0 1px rgba(255,80,80,0.2),
0 0 20px rgba(255,80,80,0.06);
}
.toast.error .toast-icon {
animation: none;
}
.toast.success .toast-bar {
background: linear-gradient(90deg, #6fffd2, #a8ffdb, #6fffd2);
background-size: 200% 100%;
animation: toast-bar-shimmer 1.2s linear infinite;
width: 100%;
}
.toast.error .toast-bar {
background: #ff5555;
width: 100%;
animation: none;
}
/* ===== LOGOUT BUTTON ===== */
.logout-btn {
position: absolute;
top: 18px;
right: 18px;
padding: 6px 14px;
font-size: 12.5px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #ff4d4d, #d81b1b);
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(216, 27, 27, 0.35);
transition: all 0.25s ease;
}
.logout-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(216, 27, 27, 0.45);
}
.logout-btn:active {
transform: scale(0.96);
}
/* Mobile safe */
@media (max-width: 480px) {
.logout-btn {
top: 12px;
right: 12px;
font-size: 12px;
padding: 5px 12px;
}
}
.admin-form::after,
.admin-list::after,
body:has(.admin-form) section::after {
content: none !important;
}
/* ===============================
PRODUCT CARD ANIMATION (PREMIUM)
================================ */
.product-card {
opacity: 0;
transform: translateY(24px) scale(0.97);
transition:
opacity 0.6s ease,
transform 0.6s cubic-bezier(.2,.8,.2,1),
box-shadow 0.3s ease;
will-change: transform, opacity;
}
.product-card.show {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ===============================
PAGE ENTER ANIMATION
================================ */
.page-title,
.market-title {
opacity: 0;
transform: translateY(-10px);
animation: fadeDown 0.8s ease forwards;
}
@keyframes fadeDown {
to {
opacity: 1;
transform: translateY(0);
}
}
.commission-status {
margin-top: 10px;
padding: 6px 16px;
font-size: 11px;
font-weight: 700;
border-radius: 999px;
letter-spacing: 1px;
width: fit-content;
margin-inline: auto;
}
.commission-status.open {
color: #1e9b50;
background: rgba(30, 155, 80, 0.15);
border: 1px solid rgba(30, 155, 80, 0.4);
}
.commission-status.closed {
color: #c0392b;
background: rgba(192, 57, 43, 0.15);
border: 1px solid rgba(192, 57, 43, 0.4);
}
.commission-closed {
text-align: center;
padding: 60px 20px;
font-size: 18px;
font-weight: 600;
color: #7aaedc;
opacity: 0.9;
}
/* HARD RESET FIXED BACKGROUND */
html, body {
transform: none !important;
filter: none !important;
perspective: none !important;
overflow-x: hidden;
}
/* ===============================
TAG LIST
================================ */
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 10px 0 6px;
}
.tag {
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
color: #dfe6ff;
background: linear-gradient(
180deg,
rgba(120,140,255,.35),
rgba(90,110,220,.25)
);
border: 1px solid rgba(140,160,255,.45);
border-radius: 999px;
white-space: nowrap;
user-select: none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 2px 6px rgba(0,0,0,.35);
}
``
.selected-product.active {
animation: pulseGlow 1.2s ease;
}
@keyframes pulseGlow {
0% {
box-shadow: 0 0 0 rgba(120,140,255,0);
}
40% {
box-shadow: 0 0 28px rgba(120,140,255,.65);
}
100% {
box-shadow: 0 0 0 rgba(120,140,255,0);
}
}
/* FORCE FIX � ADOPT ONLY */
body.adopt-page .order-section {
width: 100%;
max-width: 100%;
}
body.adopt-page .order-section > * {
max-width: 420px !important;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* ===============================
FIX HOW TO ORDER SIZE (ALL PAGE)
================================ */
.order-section .section {
max-width: 520px;
width: 100%;
margin: 0 auto 24px auto;
}
/* Mobile fix */
@media (max-width: 768px) {
.order-section {
padding: 32px 16px;
}
.order-section .section {
padding: 20px;
font-size: 0.95rem;
}
.order-section .section h2 {
font-size: 1.1rem;
}
.order-section .section ul li {
font-size: 0.9rem;
line-height: 1.5;
}
}
/* ===============================
COMMISSION TOGGLE (ADMIN)
================================ */
.commission-toggle {
margin: 24px 0 36px;
display: flex;
flex-direction: column;
gap: 10px;
}
.toggle-label {
font-size: 14px;
opacity: 0.65;
letter-spacing: 0.5px;
}
.toggle-wrap {
position: relative;
display: flex;
width: 240px;
height: 44px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
overflow: hidden;
}
.toggle-wrap button {
flex: 1;
border: none;
background: none;
color: #ccc;
font-weight: 600;
z-index: 2;
cursor: pointer;
transition: color 0.25s ease;
}
.toggle-wrap button.active {
color: #fff;
}
.toggle-indicator {
position: absolute;
top: 3px;
left: 3px;
width: calc(50% - 6px);
height: calc(100% - 6px);
border-radius: 999px;
background: linear-gradient(
135deg,
#6dffb6,
#3ddc97
);
box-shadow:
0 0 18px rgba(109,255,182,0.45);
transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
/* CLOSED STATE */
.toggle-wrap.closed .toggle-indicator {
transform: translateX(100%);
background: linear-gradient(
135deg,
#ff7a7a,
#ff4d4d
);
box-shadow:
0 0 18px rgba(255,122,122,0.45);
}
/* CENTER COMMISSION TOGGLE */
.commission-toggle {
align-items: center;
text-align: center;
}
.toggle-wrap {
margin: 0 auto;
}
/* toast finishing - see FURRY EDITION above */
.btn-save-product {
display: inline-flex;
/* REQUIRED */
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
/* TAKES EFFECT NOW */
isolation: isolate;
/* SUPER IMPORTANT */
padding: 13px 34px;
margin: 8px 0;
font-size: 12px;
font-weight: 700;
color: #0b1220 !important;
background: linear-gradient(
180deg,
#f7faff,
#d7e7ff
) !important;
border: 3px solid #1f3f66 !important;
border-radius: 999px !important;
/* DEPTH + OUTER GLOW ONLY */
box-shadow:
0 3px 0 #1a3557,
0 14px 28px rgba(0,0,0,.45),
0 0 28px rgba(125,188,222,.55);
transition:
transform .18s ease,
box-shadow .18s ease;
}
/* glow layer */
.btn-save-product::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(120deg,
transparent,
rgba(255,255,255,0.45),
transparent
);
opacity: 0;
transition: opacity .3s;
}
/* hover mewah */
.btn-save-product:hover {
transform: translateY(-2px);
box-shadow:
0 18px 36px rgba(0,0,0,.55),
0 0 42px rgba(125,188,222,.8);
}
.btn-save-product:hover::before {
opacity: 1;
}
/* klik efek */
.btn-save-product:active {
transform: translateY(1px);
box-shadow:
0 6px 16px rgba(0,0,0,.5),
0 0 26px rgba(125,188,222,.45);
}
/* shimmer sweep */
.btn-save-product::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.35),
transparent
);
}
.btn-save-product:hover::after {
animation: saveShimmer 1.2s linear;
}
@keyframes saveShimmer {
to {
left: 100%;
}
}
/* EMPTY STATE */
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-icon {
font-size: 26px;
color: #8fa8ff;
display: block;
margin-bottom: 10px;
}
.empty-title {
font-weight: 600;
color: #e8ecff;
}
.empty-desc {
font-size: 13px;
color: #9aa4d6;
}
/* ACTIVE TAG */
.tag.active {
background: linear-gradient(180deg,#cfd7ff,#9fb0ff);
color: #0b1026;
box-shadow: 0 0 12px rgba(150,170,255,.6);
}
/* ===============================
TAG SEARCH DROPDOWN (GLOBAL)
================================ */
.tag-dropdown div {
padding: 10px 14px;
cursor: pointer;
font-size: 0.9rem;
color: #e6f0ff;
transition: background 0.2s ease;
}
.tag-dropdown div:hover {
background: rgba(120, 180, 255, 0.15);
}
#adoptTagDropdown .tag-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
cursor: pointer;
}
#adoptTagDropdown .tag-item:hover {
background: rgba(255,255,255,0.05);
}
#adoptTagDropdown small {
font-size: 12px;
opacity: 0.6;
}
.tag-dropdown .tag-item {
display: flex;
justify-content: space-between;
padding: 8px 12px;
}
.tag-dropdown small {
opacity: .6;
font-size: 12px;
transparent
}
.selected-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 14px;
}
.selected-tag {
background: linear-gradient(135deg,#6ef3c5,#39c3ff);
color: #000;
padding: 6px 10px;
border-radius: 20px;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.selected-tag button {
border: none;
background: rgba(0,0,0,.2);
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
cursor: pointer;
}
.tag.active-tag {
background: #39ffb6;
color: #000;
box-shadow: 0 0 10px rgba(57,255,182,.6);
}
.tag-search-wrap {
position: relative;
max-width: 420px;
margin: 20px auto;
}
.tag-search-wrap input {
width: 100%;
padding: 12px 14px;
background: rgba(20, 30, 60, 0.75);
border: 1px solid rgba(120, 180, 255, 0.25);
border-radius: 12px;
outline: none;
color: #cfe8ff;
font-size: 14px;
transition: 0.25s ease;
}
.tag-search-wrap input::placeholder {
color: rgba(200, 220, 255, 0.5);
}
.tag-search-wrap input:focus {
border-color: #6fd3ff;
box-shadow: 0 0 15px rgba(120, 200, 255, 0.35);
}
.selected-tags-wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.selected-tag {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(80, 140, 255, 0.2);
border: 1px solid rgba(120, 180, 255, 0.35);
border-radius: 20px;
color: #dbe9ff;
font-size: 13px;
}
.selected-tag button {
border: none;
background: transparent;
color: #8fbaff;
cursor: pointer;
font-size: 15px;
}
.selected-tag button:hover {
color: #ff6b6b;
}
.tag.active-tag {
background: linear-gradient(135deg,#58c8ff,#2c5cff);
color: #fff;
box-shadow: 0 0 10px rgba(90,170,255,.6);
}
/* adopt card tag (read only) */
.tag-readonly {
pointer-events: none;
opacity: 0.75;
}
/* preview clickable tag */
.tag-clickable {
cursor: pointer;
transition: 0.25s;
}
.tag-clickable:hover {
transform: translateY(-2px);
box-shadow: 0 0 8px rgba(120,180,255,0.6);
}
/* OVERLAY */
.confirm-overlay {
position: fixed;
inset: 0;
background: rgba(5, 10, 25, 0.7);
backdrop-filter: blur(6px);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.confirm-overlay.hidden {
display: none;
}
/* BOX */
.confirm-box {
background: rgba(15, 25, 50, 0.9);
border-radius: 18px;
padding: 22px 26px;
width: 320px;
text-align: center;
border: 1px solid rgba(120, 180, 255, 0.35);
box-shadow:
0 0 25px rgba(90, 160, 255, 0.35),
inset 0 0 15px rgba(90, 160, 255, 0.15);
animation: confirmPop 0.25s ease;
}
@keyframes confirmPop {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* TEXT */
.confirm-box h3 {
color: #7fb3ff;
margin-bottom: 8px;
}
.confirm-box p {
color: #dce9ff;
font-size: 14px;
}
/* BUTTON AREA */
.confirm-actions {
display: flex;
gap: 12px;
margin-top: 18px;
}
/* BUTTON BASE */
.confirm-btn {
flex: 1;
padding: 10px 0;
border-radius: 12px;
border: none;
cursor: pointer;
font-weight: 600;
transition: 0.25s;
}
/* CANCEL */
.confirm-btn.cancel {
background: rgba(255, 255, 255, 0.08);
color: #cbdcff;
}
.confirm-btn.cancel:hover {
background: rgba(255, 255, 255, 0.15);
}
/* OK */
.confirm-btn.ok {
background: linear-gradient(135deg, #4da0ff, #5b7cff);
color: white;
box-shadow: 0 0 15px rgba(80, 150, 255, 0.6);
}
.confirm-btn.ok:hover {
transform: scale(1.05);
box-shadow: 0 0 22px rgba(80, 150, 255, 0.8);
}
/* ===============================
COSMIC REVEAL SYSTEM
================================ */
.reveal {
opacity: 0;
transition: 1.3s cubic-bezier(.16,1,.3,1);
}
/* LOGO */
.reveal-left {
transform: translateX(-70px);
}
/* SUBTITLE */
.reveal-right {
transform: translateX(70px);
}
/* TITLE */
.reveal-top {
transform: translateY(-60px);
}
/* CARD */
.reveal-card-right {
transform: translateX(90px);
}
.reveal-card-left {
transform: translateX(-90px);
}
/* SHOW STATE */
.reveal.show {
opacity: 1;
transform: translate(0,0);
}
/* ===============================
PAGE ENTER ANIMATION (GLOBAL)
================================ */
/* hidden state */
body:not(.page-loaded) .logo {
opacity: 0;
transform: translateX(-60px);
}
body:not(.page-loaded) .market-title {
opacity: 0;
transform: translateY(-50px);
}
body:not(.page-loaded) .market-desc {
opacity: 0;
transform: translateX(60px);
}
body:not(.page-loaded) .product-card {
opacity: 0;
transform: translateY(40px);
}
/* smooth transition */
.logo,
.market-title,
.market-desc,
.product-card {
transition:
opacity 1.1s ease,
transform 1.1s cubic-bezier(.2,.8,.2,1);
}
/* stagger delay for cards */
.product-card {
transition-delay: var(--delay, 0ms);
}
/* ===============================
WHAT WE OFFER SECTION
================================ */
.services {
padding: 80px 20px 60px;
text-align: center;
position: relative;
z-index: 2;
}
.services .section-title {
font-size: 32px;
margin-bottom: 45px;
letter-spacing: 1px;
}
/* GRID */
.service-grid {
max-width: 1000px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 22px;
}
/* CARD */
.service-card {
position: relative;
padding: 28px 22px;
border-radius: 18px;
background: rgba(15, 22, 45, 0.65);
backdrop-filter: blur(14px);
border: 1px solid rgba(120,170,255,.18);
color: #eaf2ff;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition:
transform .35s ease,
box-shadow .35s ease,
border .35s ease;
}
/* Cosmic glow border */
.service-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
background: linear-gradient(
120deg,
transparent,
rgba(140,220,255,.35),
transparent
);
opacity: 0;
pointer-events: none;
transition: .4s ease;
}
/* Hover */
.service-card:hover {
transform: translateY(-8px) scale(1.04);
border: 1px solid rgba(160,210,255,.45);
box-shadow:
0 0 28px rgba(100,160,255,.35),
inset 0 0 25px rgba(140,200,255,.08);
}
.service-card:hover::after {
opacity: 1;
}
/* Emoji icon glow */
.service-card span {
filter: drop-shadow(0 0 8px rgba(140,200,255,.5));
}
.reveal-up,
.reveal-down {
opacity: 0;
transition:
transform 1s cubic-bezier(.22,1,.36,1),
opacity 1s ease;
}
.reveal-up {
transform: translateY(60px);
}
.reveal-down {
transform: translateY(-40px);
}
.reveal-show {
opacity: 1;
transform: translateY(0);
}
.reveal-hero-top,
.reveal-hero-left,
.reveal-hero-bottom {
opacity: 0;
transition:
transform 1.2s cubic-bezier(.22,1,.36,1),
opacity 1.2s ease;
}
.reveal-hero-top {
transform: translateY(-80px);
}
.reveal-hero-left {
transform: translateX(-80px);
}
.reveal-hero-bottom {
transform: translateY(60px);
}
.hero-show {
opacity: 1;
transform: translate(0, 0);
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 26px;
margin-top: 40px;
}
.logo-gradient {
background: linear-gradient(90deg, #5fa8ff, #7fffff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 0 12px rgba(120,180,255,.35);
}
.logos{
font-size:1.7rem;
letter-spacing:1px;
font-weight: 700;
}
.logos span{
background: linear-gradient(90deg, #5fa8ff, #7fffff);
-webkit-background-clip: text;
}
.mint-animate {
background: linear-gradient(
270deg,
#5fa8ff,
#7fffff,
#8b5fff,
#5fa8ff
);
background-size: 600% 600%;
-webkit-background-clip: text;
color: transparent;
animation: mintFlow 6s ease infinite;
}
@keyframes mintFlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* ===================== */
/* MARKET MOON RAIL */
/* ===================== */
.market-rail {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 520px;
margin: 32px auto 20px;
padding: 0 40px;
}
/* ITEM */
.rail-item {
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
font-size: 44px;
color: rgba(170,210,255,.55);
cursor: pointer;
position: relative;
z-index: 2;
transition: .35s ease;
}
/* LABEL */
.rail-item span {
font-size: 11px;
margin-top: 6px;
letter-spacing: .5px;
opacity: .6;
}
/* HOVER */
.rail-item:hover {
transform: scale(1.15);
color: #dff2ff;
filter: drop-shadow(0 0 14px rgba(160,220,255,.8));
}
/* ACTIVE */
.rail-item.active {
color: #ffffff;
transform: scale(1.2);
filter:
drop-shadow(0 0 8px rgba(200,240,255,.9))
drop-shadow(0 0 18px rgba(160,220,255,.8));
}
.rail-item.active span {
opacity: 1;
}
/* GLOW BULAT BELAKANG */
.rail-item::before {
content: "";
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid rgba(130,190,255,.25);
opacity: .4;
transform: scale(.9);
transition: .4s ease;
}
.artist-name {
font-size: 13px;
color: #9be7ff;
opacity: .8;
margin-top: 8px;
cursor: pointer;
transition: .2s;
}
.artist-name:hover {
color: #ffffff;
opacity: 1;
}
/* ===============================
COMMISSION PREVIEW MODAL
=============================== */
.modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
}
.modal.hidden {
display: none;
}
/* BACKDROP */
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(3px);
}
/* MAIN BOX */
.box {
position: relative;
z-index: 2;
background: #0f1522;
width: 94%;
max-width: 900px;
max-height: 92vh;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,.5);
animation: popIn .25s ease;
}
/* CLOSE BUTTON */
.close-btn {
position: absolute;
top: 12px;
right: 14px;
background: rgba(255,255,255,.08);
border: none;
border-radius: 10px;
padding: 6px 10px;
font-size: 18px;
color: #fff;
cursor: pointer;
transition: .2s;
z-index: 5;
}
.close-btn:hover {
background: rgba(255,255,255,.18);
}
/* LAYOUT */
.layout {
display: flex;
gap: 16px;
padding: 18px;
}
/* IMAGE */
.image-wrap {
flex: 1;
min-width: 40%;
}
.image-wrap img {
width: 100%;
height: 100%;
max-height: 420px;
object-fit: contain;
border-radius: 12px;
background: #0b0f1a;
}
/* INFO SIDE */
.info {
flex: 1;
display: flex;
flex-direction: column;
}
/* TITLE */
.info h2 {
font-size: 20px;
margin-bottom: 8px;
}
/* DIVIDER */
.info .divider {
height: 2px;
width: 100%;
background: linear-gradient(90deg,#a4e8ff,#02bfff);
margin-bottom: 10px;
border-radius: 2px;
}
/* DESCRIPTION */
.info p {
font-size: 14px;
line-height: 1.5;
opacity: .9;
}
/* TOS BOX */
.tos-box {
background: rgba(255,255,255,.05);
padding: 10px;
border-radius: 10px;
margin-top: 10px;
}
.tos-box h4 {
font-size: 13px;
opacity: .8;
margin-bottom: 4px;
}
/* PRICE + BUTTON */
/* ORDER BUTTON */
#commission-order {
padding: 13px 34px;
margin: 8px 0;
background: linear-gradient(
180deg,
#f7faff,
#d7e7ff
) !important;
border: none;
padding: 10px 18px;
border-radius: 12px;
color: #000;
font-weight: 600;
cursor: pointer;
transition: .2s;
}
#commission-order:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(140,120,255,.5);
}
/* ARTIST FOOTER */
/* MOBILE MODE */
@media (max-width: 768px) {
.layout {
flex-direction: column;
padding: 14px;
}
.image-wrap img {
max-height: 260px;
}
#commission-order {
width: 100%;
}
}
/* ANIMATION */
@keyframes popIn {
from {
transform: scale(.92);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* ===============================
GLOBAL PREVIEW MODAL BASE
=============================== */
.modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
}
.modal.hidden {
display: none;
}
/* BACKDROP */
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(3px);
}
/* MAIN BOX */
.box {
position: relative;
z-index: 2;
background: #0f1522;
width: 94%;
max-width: 900px;
max-height: 92vh;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,.5);
animation: popIn .25s ease;
}
/* CLOSE */
.close-btn {
position: absolute;
top: 12px;
right: 14px;
background: rgba(255,255,255,.08);
border: none;
border-radius: 10px;
padding: 6px 10px;
font-size: 18px;
color: #fff;
cursor: pointer;
transition: .2s;
z-index: 5;
}
.close-btn:hover {
background: rgba(255,255,255,.18);
}
/* LAYOUT */
.layout {
display: flex;
gap: 16px;
padding: 18px;
}
/* IMAGE */
.image-wrap {
flex: 1;
min-width: 40%;
}
.image-wrap img {
width: 100%;
height: 100%;
max-height: 420px;
object-fit: contain;
border-radius: 12px;
background: #0b0f1a;
}
/* INFO SIDE */
.info {
flex: 1;
display: flex;
flex-direction: column;
}
/* TITLE */
.info h2 {
font-size: 20px;
margin-bottom: 8px;
}
/* DIVIDER */
.info .divider {
height: 2px;
width: 100%;
background: linear-gradient(90deg,#a4e8ff,#02bfff);
margin-bottom: 10px;
border-radius: 2px;
}
/* DESCRIPTION */
.desc {
font-size: 14px;
line-height: 1.5;
opacity: .9;
}
/* TOS */
.tos-box {
background: rgba(255,255,255,.05);
padding: 10px;
border-radius: 10px;
margin-top: 10px;
}
.tos-box h4 {
font-size: 13px;
opacity: .8;
margin-bottom: 4px;
}
.tos-box p {
font-size: 13px;
opacity: .85;
}
/* PROPERTY LORE */
.lore-box {
background: rgba(255,255,255,.05);
padding: 10px;
border-radius: 10px;
margin-top: 10px;
}
.lore-box h4 {
font-size: 13px;
opacity: .8;
margin-bottom: 4px;
}
.lore-box p {
font-size: 13px;
line-height: 1.5;
opacity: .85;
}
/* PRICE + BUTTON */
/* ARTIST FOOTER */
/* MOBILE */
@media (max-width: 768px) {
.layout {
flex-direction: column;
padding: 14px;
}
.image-wrap img {
max-height: 260px;
}
}
/* ANIMATION */
@keyframes popIn {
from {
transform: scale(.92);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* ===============================
PREVIEW MODAL BASE (COMMISSION + PROPERTY)
=============================== */
.modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
overflow-y: hidden;
}
.modal.hidden {
display: none;
}
/* BACKDROP */
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(3px);
}
/* MAIN BOX */
.box {
position: relative;
z-index: 2;
background: #0f1522;
width: 94%;
max-width: 900px;
max-height: 92vh;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,.5);
animation: popIn .25s ease;
display: flex;
flex-direction: column;
}
/* CLOSE BUTTON */
.close-btn {
position: absolute;
top: 12px;
right: 14px;
background: rgba(255,255,255,.08);
border: none;
border-radius: 10px;
padding: 6px 10px;
font-size: 18px;
color: #fff;
cursor: pointer;
transition: .2s;
z-index: 5;
}
.close-btn:hover {
background: rgba(255,255,255,.18);
}
/* CONTENT SCROLL AREA */
.scroll {
overflow-y: auto;
padding-right: 6px;
}
/* ===============================
LAYOUT
=============================== */
.layout {
display: flex;
gap: 16px;
padding: 18px;
}
/* IMAGE SIDE */
.image-wrap {
flex: 1;
min-width: 40%;
}
.image-wrap img {
width: 100%;
height: 100%;
max-height: 420px;
object-fit: contain;
border-radius: 12px;
background: #0b0f1a;
}
/* INFO SIDE */
.info {
flex: 1;
display: flex;
flex-direction: column;
}
/* TITLE */
.info h2 {
font-size: 20px;
margin-bottom: 8px;
}
/* DIVIDER */
.info .divider {
height: 2px;
width: 100%;
background: linear-gradient(90deg,#a4e8ff,#02bfff);
margin-bottom: 10px;
border-radius: 2px;
}
/* DESCRIPTION */
.desc {
font-size: 14px;
line-height: 1.5;
opacity: .9;
}
/* ===============================
INFO BOX (TOS + LORE)
=============================== */
.box-area {
background: rgba(255,255,255,.05);
padding: 10px;
border-radius: 10px;
margin-top: 10px;
}
.box-area h4 {
font-size: 13px;
opacity: .8;
margin-bottom: 4px;
}
.box-area p {
font-size: 13px;
line-height: 1.45;
opacity: .85;
}
/* ===============================
PRICE + BUTTON
=============================== */
/* ===============================
ARTIST FOOTER
=============================== */
.artist {
margin-top: 10px;
font-size: 12px;
opacity: .65;
letter-spacing: .4px;
color: #cfd8ff;
text-align: left;
}
/* ===============================
MOBILE MODE
=============================== */
@media (max-width: 768px) {
.layout {
flex-direction: column;
padding: 14px;
}
.image-wrap img {
max-height: 260px;
}
}
/* ===============================
ANIMATION
=============================== */
@keyframes popIn {
from {
transform: scale(.92);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* ===============================
PREVIEW PRICE LABEL FIX
=============================== */
/* Commission preview */
#commission-price::before {
content: "Price: ";
font-weight: 600;
color: #9fdcff;
margin-right: 4px;
}
/* Property preview */
#property-price::before {
content: "Price: ";
font-weight: 600;
color: #9fdcff;
margin-right: 4px;
}
/* Adopt preview */
#price::before {
content: "Price: ";
font-weight: 600;
color: #9fdcff;
margin-right: 4px;
}
/* CLOSE BUTTON */
.close-btn {
position: absolute;
top: 12px;
right: 14px;
background: rgba(255,255,255,.08);
border: none;
border-radius: 10px;
padding: 6px 10px;
font-size: 18px;
color: #fff;
cursor: pointer;
transition: .2s;
z-index: 5;
}
.close-btn:hover {
background: rgba(255,255,255,.18);
}
/* CONTENT SCROLL */
.scroll {
overflow-y: auto;
padding-right: 6px;
}
/* ===============================
LAYOUT
=============================== */
.layout {
display: flex;
gap: 16px;
padding: 18px;
}
/* IMAGE SIDE */
.image-wrap {
flex: 1;
min-width: 40%;
}
.image-wrap img {
width: 100%;
height: 100%;
max-height: 420px;
object-fit: contain;
border-radius: 12px;
background: #0b0f1a;
}
/* INFO SIDE */
.info {
flex: 1;
display: flex;
flex-direction: column;
}
/* TITLE */
.info h2 {
font-size: 20px;
margin-bottom: 8px;
}
/* DIVIDER */
.info .divider {
height: 2px;
width: 100%;
background: linear-gradient(90deg,#a4e8ff,#02bfff);
margin-bottom: 10px;
border-radius: 2px;
}
/* DESCRIPTION */
.desc {
font-size: 14px;
line-height: 1.5;
opacity: .9;
}
/* ===============================
ADOPT DETAIL GRID
=============================== */
.adopt-detail {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 6px 10px;
margin-top: 10px;
font-size: 13px;
}
.adopt-detail span {
opacity: .75;
}
/* LIKE */
#likes {
color: #6cffb5;
}
/* DISLIKE */
#dislikes {
color: #ff8a8a;
}
/* ===============================
INFO BOX (LORE)
=============================== */
.box-area {
background: rgba(255,255,255,.05);
padding: 10px;
border-radius: 10px;
margin-top: 12px;
}
.box-area h4 {
font-size: 13px;
opacity: .8;
margin-bottom: 4px;
}
.box-area p {
font-size: 13px;
line-height: 1.45;
opacity: .85;
}
/* TAGS */
.tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.tags span {
background: rgba(255,255,255,.08);
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
}
/* ===============================
PRICE + BUTTON
=============================== */
/* OPEN */
.status.open {
color: #5cff9a;
}
/* SOLD */
.status.sold {
color: #ff6b6b;
}
/* ===============================
ARTIST FOOTER
=============================== */
/* ===============================
MOBILE MODE
=============================== */
@media (max-width: 768px) {
.layout {
flex-direction: column;
padding: 14px;
}
.image-wrap img {
max-height: 260px;
}
}
/* ===============================
ANIMATION
=============================== */
@keyframes popIn {
from {
transform: scale(.92);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.status {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
margin-top: 6px;
background: rgba(120,180,255,.15);
color: #9fc9ff;
letter-spacing: .4px;
}
.image-wrap img {
width: 100%;
max-height: 420px;
object-fit: contain;
border-radius: 12px;
background: #0b0f1a;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.tags span {
background: rgba(100,160,255,.15);
color: #a8caff;
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
}
.tags .tag {
background: rgba(100,160,255,.15);
color: #a8caff;
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
}
#product-preview.modal {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
}
#product-preview.hidden {
display: none;
}
/* BACKDROP */
#product-preview .overlay {
position: absolute;
inset: 0;
background: rgba(10,14,30,.78);
backdrop-filter: blur(6px);
z-index: 1;
}
/* BOX */
#product-preview .box {
position: relative;
z-index: 5;
width: 95%;
max-width: 960px;
max-height: 92vh;
background: #0f1426;
border-radius: 18px;
display: flex;
flex-direction: column;
box-shadow: 0 30px 70px rgba(0,0,0,.7);
}
/* CLOSE */
#product-preview .close-btn {
position: absolute;
top: 12px;
right: 14px;
z-index: 10;
border: none;
background: rgba(255,255,255,.12);
color: #fff;
border-radius: 8px;
padding: 6px 10px;
cursor: pointer;
}
/* SCROLL */
#product-preview .scroll {
overflow-y: auto;
}
/* LAYOUT */
#product-preview .layout {
display: flex;
gap: 18px;
padding: 18px;
}
/* IMAGE */
#product-preview .image-wrap {
flex: 1;
background: #0b1020;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
}
#product-preview .image-wrap img {
width: 100%;
height: 100%;
max-height: 450px;
object-fit: contain;
}
/* INFO */
#product-preview .info {
flex: 1;
display: flex;
flex-direction: column;
}
#product-preview #title {
font-size: 22px;
font-weight: 600;
}
#product-preview .divider {
height: 2px;
width: 100%;
background: linear-gradient(90deg,#9ddcff,#5fa0ff);
margin: 10px 0;
}
#product-preview .desc {
font-size: 14px;
line-height: 1.5;
opacity: .9;
}
/* ADOPT DETAIL */
#adopt-detail,
.adopt-detail {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 6px;
margin-top: 10px;
font-size: 13px;
}
/* LORE */
#product-preview .box-area {
background: rgba(255,255,255,.05);
padding: 10px;
border-radius: 10px;
margin-top: 12px;
}
/* TAGS */
#product-preview .tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
#product-preview .tags .tag {
background: rgba(120,170,255,.15);
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
}
/* PRICE + STATUS + BUTTON */
/* ============================= */
/* ADOPT PREVIEW FINAL FIX */
/* ============================= */
#product-preview .row {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 18px;
}
/* PRICE + STATUS ROW */
/* PRICE */
#product-preview .price {
font-size: 18px;
font-weight: 600;
}
/* STATUS */
#product-preview .status {
font-size: 12px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(0,255,180,.12);
color: #63ffd1;
white-space: nowrap;
}
/* ORDER BUTTON */
#product-preview .order-btn {
width: 100%;
padding: 13px;
border-radius: 12px;
font-weight: 600;
}
/* FOOTER ARTIST */
#product-preview .artist {
margin-top: 14px;
font-size: 12px;
opacity: .6;
text-align: center;
}
/* ================= */
/* DESKTOP BEHAVIOR */
/* ================= */
/* ============================= */
/* PC ADOPT PREVIEW ACTION BAR */
/* ============================= */
@media (min-width: 900px) {
#product-preview .info {
display: flex;
flex-direction: column;
gap: 10px;
}
/* LIMIT TOP SPACING */
#product-preview .box-area,
#product-preview .adopt-detail,
#product-preview .tags {
margin-bottom: 8px;
}
/* ORDER AREA FIX */
#product-preview .row {
margin-top: 12px;
/* NOT AUTO */
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,.08);
display: flex;
flex-direction: column;
gap: 10px;
}
/* PRICE + STATUS BAR */
/* BUTTON */
#product-preview .order-btn {
width: 100%;
padding: 13px;
border-radius: 14px;
}
/* ARTIST FOOTER */
#product-preview .artist {
margin-top: 8px;
font-size: 12px;
opacity: .6;
text-align: center;
}
}
/* ============================= */
/* ADOPT PREVIEW CLEAN REBUILD */
/* ============================= */
#product-preview .row {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 18px;
}
/* PRICE + STATUS WRAPPER */
/* PRICE */
#product-preview .price {
font-size: 18px;
font-weight: 600;
}
/* STATUS */
#product-preview .status {
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,255,180,.12);
color: #63ffd1;
}
/* ORDER BUTTON */
#product-preview .order-btn {
width: 100%;
padding: 12px;
border-radius: 12px;
font-weight: 600;
margin-top: 4px;
}
/* FOOTER ARTIST */
#product-preview .artist {
margin-top: 14px;
font-size: 12px;
opacity: .6;
text-align: center;
}
/* ===== MOBILE TWEAK ===== */
@media (max-width: 768px) {
#product-preview .row > div {
flex-direction: row;
}
}
/* =============================== */
/* FORCE PREVIEW FULL HEIGHT FIX */
/* =============================== */
#product-preview .box {
height: 90vh !important;
max-height: 90vh !important;
display: flex;
flex-direction: column;
}
#product-preview .scroll {
flex: 1;
overflow-y: auto;
}
#product-preview .layout {
display: flex;
}
#product-preview .info {
display: flex;
flex-direction: column;
}
@media (min-width: 900px) {
#product-preview .row {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
#product-preview .order-btn {
width: 100%;
padding: 14px;
border-radius: 14px;
}
#product-preview .artist {
margin-top: 10px;
text-align: center;
font-size: 12px;
opacity: .6;
}
}
/* ===== ADOPT PREVIEW HARD FIX ===== */
#product-preview .scroll {
max-height: 90vh !important;
overflow-y: auto !important;
}
#product-preview .layout {
display: flex !important;
flex-direction: row !important;
gap: 18px;
}
#product-preview .info {
display: flex !important;
flex-direction: column !important;
}
/* PRICE + STATUS BAR */
#product-preview .row {
margin-top: 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px;
}
/* ARTIST FOOTER */
#product-preview .artist {
margin-top: 8px !important;
text-align: center;
font-size: 12px;
opacity: .6;
}
/* MOBILE FIX */
@media (max-width: 768px) {
#product-preview .layout {
flex-direction: column !important;
}
}
/* ===== PREVIEW EMPTY SPACE FIX ===== */
#product-preview .box {
height: auto !important;
max-height: 90vh;
}
#product-preview .layout {
height: auto !important;
}
#product-preview .info {
height: auto !important;
}
#product-preview .scroll {
height: auto !important;
max-height: 90vh;
overflow-y: auto;
position: relative;
z-index: 2;
}
/* Remove flex stretch */
#product-preview .info > * {
flex-shrink: 0;
}
.artist-link {
font-size: 12px;
opacity: 0.65;
cursor: pointer;
transition: 0.2s;
}
.artist-link:hover {
opacity: 1;
text-decoration: underline;
}
#property-preview .order-btn {
all: unset;
cursor: pointer;
padding: 12px 22px;
border-radius: 14px;
font-weight: 600;
background: linear-gradient(135deg,#7fffd4,#66f2ff);
color: #041017;
box-shadow: 0 0 12px rgba(127,255,212,.4);
}
.box,
.scroll,
.layout,
.info,
.tags,
.artist {
pointer-events: auto;
}
.overlay {
pointer-events: auto;
}
.tag,
.artist {
pointer-events: auto;
cursor: pointer;
}
.artist:hover {
opacity: 1;
color: #7fffd4;
}
.row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
}
/* PRICE LEFT */
.price {
grid-column: 1;
}
/* STATUS RIGHT */
.status {
grid-column: 2;
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,.08);
}
/* ORDER FULL BOTTOM */
.order-btn {
grid-column: 1 / -1;
margin-top: 8px;
}
@media (max-width: 768px) {
.layout {
padding: 14px;
gap: 12px;
}
.row {
grid-template-columns: 1fr;
}
.status {
text-align: left;
width: fit-content;
}
.order-btn {
width: 100%;
}
}
/* ===============================
ADOPT PREVIEW HARD OVERRIDE
=============================== */
#product-preview,
#product-preview * {
box-sizing: border-box;
}
/* modal container */
#product-preview {
position: fixed;
inset: 0;
z-index: 9999;
}
/* dark backdrop */
#product-preview .overlay {
position: absolute;
inset: 0;
background: rgba(5,10,20,.85);
backdrop-filter: blur(6px);
}
/* main card */
#product-preview .box {
position: relative;
max-width: 980px;
width: 95%;
max-height: 90vh;
margin: auto;
margin-top: 5vh;
background: linear-gradient(180deg,#0c1424,#090f1d);
border-radius: 18px;
display: flex;
flex-direction: column;
}
/* scroll area */
#product-preview .scroll {
flex: 1;
overflow-y: auto;
}
/* layout */
#product-preview .layout {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 18px;
padding: 18px;
}
/* image */
#product-preview .image-wrap {
background: #0b1325;
border-radius: 14px;
;
display: flex;
align-items: center;
justify-content: center;
}
#product-preview .image-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* info column */
#product-preview .info {
display: flex;
flex-direction: column;
gap: 12px;
}
/* divider */
#product-preview .divider {
height: 1px;
background: linear-gradient(to right,#3fffd0,transparent);
}
/* stats grid */
#adopt-preview .adopt-detail,
#product-preview .adopt-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
font-size: 13px;
}
/* lore box */
#product-preview .box-area {
background: rgba(255,255,255,.04);
padding: 10px 12px;
border-radius: 10px;
}
/* tags */
#product-preview .tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#product-preview .tags span {
background: rgba(255,255,255,.08);
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
}
/* PRICE + STATUS + ORDER BAR */
#product-preview .row {
margin-top: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
/* price left */
#product-preview .price {
font-size: 17px;
font-weight: 700;
}
/* status right */
#product-preview .status {
justify-self: end;
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,255,180,.15);
color: #38ffd2;
}
/* order button FULL WIDTH under them */
#product-preview .order-btn {
grid-column: 1 / -1;
margin-top: 6px;
padding: 12px;
border-radius: 12px;
border: none;
background: linear-gradient(90deg,#3fffd0,#6ddcff);
font-weight: 600;
}
/* footer artist */
#product-preview .artist {
padding: 10px 18px;
font-size: 12px;
opacity: .6;
}
/* close btn */
#product-preview .close-btn {
position: absolute;
top: 10px;
right: 12px;
background: transparent;
border: none;
font-size: 20px;
color: #fff;
}
/* MOBILE */
@media (max-width: 800px) {
#product-preview .layout {
grid-template-columns: 1fr;
}
#product-preview .box {
max-height: 95vh;
}
}
.box {
position: relative;
z-index: 5;
}
.overlay {
z-index: 1;
}
.footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.price {
justify-self: start;
}
.status {
justify-self: end;
}
.order {
grid-column: 1 / -1;
}
#product-preview .row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"price status"
"button button";
gap: 10px;
}
#price {
grid-area: price;
}
#status {
grid-area: status;
text-align: right;
}
#order {
grid-area: button;
}
#product-preview .row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
/* ===== ADOPT PREVIEW FIX ===== */
#product-preview .row {
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
align-items: center;
}
/* price kiri atas */
#price {
grid-column: 1;
grid-row: 1;
font-weight: 600;
}
/* status top right */
#status {
grid-column: 2;
grid-row: 1;
text-align: right;
}
/* full-width order button at bottom */
#order {
grid-column: 1 / span 2;
grid-row: 2;
width: 100%;
}
#product-preview .info {
justify-content: flex-start !important;
}
#product-preview .row {
margin-top: 12px !important;
}
#product-preview .info {
justify-content: flex-start !important;
}
#product-preview .row {
margin-top: 12px !important;
}
/* =========================
ADOPT PREVIEW PRICE LAYOUT
========================= */
#product-preview .row {
display: flex;
flex-direction: column;
gap: 10px;
}
#product-preview .top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
#price {
font-size: 18px;
font-weight: 600;
}
#status {
font-size: 13px;
padding: 4px 10px;
border-radius: 12px;
text-transform: uppercase;
}
/* status color */
#status.open {
background: rgba(0,255,170,.15);
color: #3cffc5;
}
#status.sold {
background: rgba(255,80,80,.15);
color: #ff6b6b;
}
/* ORDER BUTTON FULL WIDTH */
#order {
width: 100%;
}
/* ==== ADOPT PREVIEW PRICE FIX ==== */
#product-preview .row {
display: flex;
flex-direction: column;
gap: 12px;
}
#product-preview .top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
#product-preview #order {
width: 100%;
}
#status {
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
text-transform: uppercase;
}
/* COLOR */
#status.open {
background: rgba(0,255,170,.15);
color: #3cffc5;
}
#status.sold {
background: rgba(255,80,80,.15);
color: #ff6b6b;
}
/* ARTIST */
.artist {
margin-top: 14px;
font-size: 13px;
opacity: .7;
text-align: center;
}
/* ===============================
ADOPT PREVIEW FIX (PRICE + STATUS + ORDER)
=============================== */
#product-preview .row {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 18px;
}
#product-preview .top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
#price {
font-size: 18px;
font-weight: 700;
color: #9fffe5;
}
#status {
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
/* STATUS COLOR */
#status.open {
background: rgba(0,255,170,0.18);
color: #3cffc5;
}
#status.sold {
background: rgba(255,80,80,0.18);
color: #ff6b6b;
}
/* ORDER BUTTON */
#order {
width: 100%;
padding: 14px;
border-radius: 14px;
font-weight: 700;
font-size: 15px;
border: none;
cursor: pointer;
background: linear-gradient(90deg,#3cffc5,#5fe9ff);
color: #00221a;
}
/* ARTIST */
.artist {
margin-top: 16px;
text-align: center;
font-size: 13px;
opacity: .7;
}
/* ==== FIX ADOPT PREVIEW PRICE + STATUS + ORDER ==== */
#product-preview .price-row {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
/* TOP ROW: PRICE LEFT — STATUS RIGHT */
#product-preview .price-top {
display: flex;
justify-content: space-between !important;
align-items: center;
width: 100%;
}
/* REMOVED - Now handled in lm-modal.css
#preview-price {
font-size: 18px;
font-weight: 700;
}
*/
/* STATUS */
#preview-status {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
/* ORDER BUTTON BELOW */
}
/* ================= PREVIEW UNIVERSAL ================= */
.preview-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.preview-modal.hidden {
display: none;
}
.preview-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.65);
backdrop-filter: blur(6px);
}
/* BOX */
.preview-box {
position: relative;
background: #0f0f14;
border-radius: 18px;
width: 92%;
max-width: 880px;
max-height: 92vh;
box-shadow: 0 0 40px rgba(0,0,0,.6);
display: flex;
flex-direction: column;
}
/* CLOSE */
.close-btn {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font-size: 22px;
color: #fff;
cursor: pointer;
z-index: 10;
}
/* SCROLL */
.preview-scroll {
overflow-y: auto;
}
/* LAYOUT */
.preview-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
}
/* IMAGE */
.preview-image-wrap {
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.preview-image-wrap img {
width: 100%;
height: 100%;
max-height: 520px;
object-fit: contain;
}
/* INFO */
.preview-info {
padding: 20px;
display: flex;
flex-direction: column;
}
.preview-info h2 {
font-size: 22px;
margin-bottom: 8px;
}
.divider {
height: 1px;
background: linear-gradient(90deg,#00f6ff,#8b5cff);
margin: 10px 0 14px;
}
.preview-desc {
opacity: .9;
line-height: 1.5;
}
/* LORE / TOS BOX */
.preview-box-area,
.tos-box {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
padding: 12px;
margin-top: 12px;
}
.preview-box-area h4,
.tos-box h4 {
font-size: 14px;
margin-bottom: 6px;
}
/* TAGS */
/* PRICE + STATUS + ORDER */
.price-row {
margin-top: auto;
padding-top: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* TOP ROW */
.price-top {
display: flex;
justify-content: space-between;
align-items: center;
}
/* PRICE */
#preview-price {
font-weight: 600;
}
/* REMOVED - This was causing layout issues
#preview-price::before {
content: "Price: ";
opacity: .7;
}
*/
/* STATUS */
#preview-status {
font-size: 13px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,.08);
}
/* ORDER BTN */
) !important;
border: 3px solid #1f3f66 !important;
border-radius: 13px !important;
/* DEPTH + OUTER GLOW ONLY */
box-shadow:
0 3px 0 #1a3557,
0 14px 28px rgba(0,0,0,.45),
0 0 28px rgba(125,188,222,.55);
transition:
transform .18s ease,
box-shadow .18s ease;
}
/* ARTIST FOOTER */
.preview-artist {
text-align: center;
padding: 10px;
font-size: 12px;
opacity: .6;
}
/* ================= MOBILE ================= */
@media (max-width: 768px) {
.preview-layout {
grid-template-columns: 1fr;
}
.preview-image-wrap img {
max-height: 300px;
}
}
/* ===== MARKET CARD FIX ===== */
.product-card .price {
white-space: nowrap;
font-size: 14px;
}
.product-card .price::before {
content: "Price: ";
opacity: .7;
}
/* Small order button */
.product-card .order-btn,
.product-card button {
padding: 6px 12px;
font-size: 12px;
border-radius: 8px;
}
/* Card footer align */
.product-card .card-bottom,
.product-card .card-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
/* =========================
IMAGE NORMAL
========================= */
.product-card img {
height: 150px;
object-fit: cover;
}
/* =========================
PRICE NORMAL
========================= */
.product-card .price {
margin: 8px 0;
font-size: 14px;
}
/* =========================
ORDER BUTTON FIX
========================= */
.product-card .order-btn,
.product-card button.order-btn {
position: absolute !important;
right: 12px;
bottom: 12px;
width: auto !important;
min-width: 110px;
padding: 10px 22px;
font-size: 14px;
font-weight: 600;
border-radius: 14px;
white-space: nowrap;
}
/* =========================
PREVENT FLEX STRETCH
========================= */
.product-card > * {
flex: unset !important;
}
/* =========================
MOBILE OPTIMIZE
========================= */
@media (max-width: 600px) {
.product-card {
min-height: 250px;
}
.product-card img {
height: 130px;
}
}
.preview-info {
display: flex;
flex-direction: column;
height: 100%;
}
.price-row {
margin-top: auto;
}
.preview-scroll {
max-height: 85vh;
overflow-y: auto;
}
.preview-artist {
cursor: pointer;
opacity: .7;
}
.preview-artist:hover {
opacity: 1;
text-decoration: underline;
}
.lm-filter {
position: relative;
margin-bottom: 16px;
}
#lmFilterInput {
width: 100%;
padding: 10px 14px;
border-radius: 10px;
border: none;
outline: none;
}
#lmFilterDropdown {
position: absolute;
top: 110%;
left: 0;
right: 0;
background: #111;
border-radius: 10px;
overflow: hidden;
display: none;
z-index: 9000;
}
.lm-filter-item {
padding: 8px 12px;
cursor: pointer;
}
.lm-filter-item:hover {
background: rgba(255,255,255,.08);
}
#lmFilterChips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.lm-chip {
background: #222;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
display: flex;
gap: 6px;
align-items: center;
opacity: 0;
transform: scale(0.6) translateY(8px);
animation: chipBubbleIn 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}
.lm-chip button {
background: none;
border: none;
color: #fff;
cursor: pointer;
}
.lm-filter-box {
margin-bottom: 16px;
}
#lmFilterInput {
width: 100%;
padding: 10px;
border-radius: 8px;
}
.lm-dropdown {
background: #111;
border-radius: 8px;
margin-top: 6px;
overflow: hidden;
}
.lm-dropdown div {
padding: 8px;
cursor: pointer;
}
.lm-dropdown div:hover {
background: #222;
}
.lm-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.lm-chip {
background: #333;
padding: 6px 10px;
border-radius: 20px;
cursor: pointer;
}
.tag.active-tag {
background: linear-gradient(135deg,#7df9ff,#b388ff);
color: #000;
box-shadow: 0 0 8px rgba(150,200,255,.5);
}
/* ===============================
UNIVERSAL TAG SYSTEM
Used for:
- tag di modal
- tag di card
- filter chip
=============================== */
.lm-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(120, 200, 255, 0.15);
border: 1px solid rgba(120, 200, 255, 0.25);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #9dd8ff;
text-transform: nonr;
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
.lm-tag:hover {
background: rgba(120, 200, 255, 0.25);
border-color: rgba(120, 200, 255, 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(120, 200, 255, 0.3);
}
/* clickable tag */
.lm-tag.clickable {
cursor: pointer;
}
/* active tag */
.lm-tag.active {
background: rgba(120, 200, 255, 0.35);
border-color: rgba(120, 200, 255, 0.6);
color: white;
}
/* close button inside chip */
.lm-tag button {
background: none;
border: none;
color: inherit;
font-size: 14px;
cursor: pointer;
padding: 0;
line-height: 1;
}
.selected-filters {
margin: 16px 0;
}
.filter-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-height: 28px;
}
.filter-label {
font-size: 12px;
color: rgba(255,255,255,0.5);
font-weight: 600;
}
.filter-divider {
height: 1px;
background: rgba(255,255,255,0.1);
margin: 6px 0;
}
.chip-wrap {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
opacity: 0;
transform: scale(0.6) translateY(8px);
animation: chipBubbleIn 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}
@keyframes chipBubbleIn {
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.chip-close {
cursor: pointer;
opacity: 0.6;
transition: 0.2s;
}
.chip-close:hover {
opacity: 1;
}
/* ===============================
MARKET SEARCH
=============================== */
.market-search {
position: relative;
max-width: 520px;
margin: 20px auto 10px;
}
.market-search input {
width: 100%;
padding: 12px 16px;
border-radius: 999px;
border: none;
background: rgba(255,255,255,0.06);
color: #fff;
font-size: 14px;
outline: none;
backdrop-filter: blur(10px);
}
.market-search input::placeholder {
color: #94a3b8;
}
/* ===============================
DROPDOWN
=============================== */
.tag-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
width: 100%;
background: rgba(8, 12, 28, 0.97);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.07);
z-index: 9000;
display: none;
backdrop-filter: blur(16px);
}
.tag-dropdown.show {
display: block;
}
.tag-option {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
font-size: 13px;
color: #c4cfee;
cursor: pointer;
transition: background 0.15s ease;
border-left: 2px solid transparent;
}
.tag-option:hover {
background: rgba(111, 255, 210, 0.07);
border-left-color: #6fffd2;
color: #6fffd2;
}
.tag-option[data-type="artist"] {
color: #c4b8ff;
}
.tag-option[data-type="artist"]:hover {
background: rgba(155, 140, 255, 0.08);
border-left-color: #9b8cff;
color: #9b8cff;
}
.tag-option {
padding: 10px 14px;
font-size: 13px;
color: #cbd5f5;
cursor: pointer;
transition: background 0.2s;
}
.tag-option:hover {
background: rgba(255,255,255,0.06);
}
/* ===============================
CHIP SECTION
=============================== */
.chip-section {
max-width: 700px;
margin: 15px auto 30px;
padding: 10px 14px;
border-radius: 14px;
background: rgba(255,255,255,0.04);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.chip-group {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.chip-label {
font-size: 13px;
color: #94a3b8;
margin-right: 4px;
}
.chip-divider {
width: 1px;
height: 18px;
background: rgba(255,255,255,0.08);
}
/* ===============================
CHIPS
=============================== */
.chip button {
background: none;
border: none;
color: #94a3b8;
font-size: 12px;
cursor: pointer;
}
.chip button:hover {
color: #fff;
}
/* ===============================
CHIP BASE
================================ */
/* ================= CHIP SYSTEM ================= */
.chip-wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.filter-label {
opacity: 0.7;
font-weight: 500;
}
/* ── CHIP BASE ─────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px 5px 13px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: default;
transition: all 0.18s ease;
user-select: none;
white-space: nowrap;
}
/* ── TAG CHIP ──────────────────────────────────── */
.chip.tag {
background: rgba(111, 255, 210, 0.08);
border: 1px solid rgba(111, 255, 210, 0.25);
color: #6fffd2;
}
.chip.tag:hover {
background: rgba(111, 255, 210, 0.14);
border-color: rgba(111, 255, 210, 0.45);
}
/* ── ARTIST CHIP ───────────────────────────────── */
.chip.artist {
background: rgba(155, 140, 255, 0.12);
border: 1px solid rgba(155, 140, 255, 0.35);
color: #c4b8ff;
}
.chip.artist:hover {
background: rgba(155, 140, 255, 0.2);
border-color: rgba(155, 140, 255, 0.6);
}
/* ── CLOSE BUTTON ──────────────────────────────── */
.chip .chip-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
font-size: 11px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
flex-shrink: 0;
}
.chip .chip-x:hover {
background: rgba(255, 80, 80, 0.35);
transform: scale(1.15);
}
.chip.tag .chip-x {
background: rgba(111, 255, 210, 0.15);
color: #6fffd2;
}
.chip.tag .chip-x:hover {
background: rgba(255, 80, 80, 0.3);
color: #fff;
}
.chip.artist .chip-x {
background: rgba(155, 140, 255, 0.2);
color: #c4b8ff;
}
.chip.artist .chip-x:hover {
background: rgba(255, 80, 80, 0.3);
color: #fff;
}
/* ── DIVIDER ───────────────────────────────────── */
.filter-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(120,180,255,0.15) 30%, rgba(120,180,255,0.15) 70%, transparent);
margin: 16px 0;
}
/* ── ACTIVE CHIP STATE ─────────────────────────── */
.chip.active {
box-shadow: 0 0 0 1.5px rgba(79, 209, 255, 0.5);
}
.chip.tag.active {
background: rgba(79, 209, 255, 0.18);
border-color: rgba(79, 209, 255, 0.55);
color: #4fd1ff;
}
.chip.artist.active {
background: rgba(155, 140, 255, 0.22);
border-color: rgba(155, 140, 255, 0.65);
color: #c4b8ff;
}
/* ── ACTIVE TAG ON CARD ─────────────────────────── */
.tag.active-tag {
background: rgba(79, 209, 255, 0.2);
border-color: rgba(79, 209, 255, 0.5);
color: #4fd1ff;
box-shadow: 0 0 8px rgba(79, 209, 255, 0.3);
}
.terms-popup {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.terms-box {
background: #111;
padding: 30px;
max-width: 400px;
border-radius: 16px;
text-align: center;
color: white;
box-shadow: 0 0 40px rgba(120,255,220,0.3);
}
.terms-box h2 {
margin-bottom: 15px;
}
.terms-box p {
font-size: 14px;
opacity: 0.8;
margin-bottom: 20px;
}
.terms-buttons button {
background: linear-gradient(45deg, #6ef3c5, #7f5fff);
border: none;
padding: 10px 20px;
border-radius: 8px;
color: white;
cursor: pointer;
font-weight: 600;
}
.card-bottom {
position: relative;
margin-top: 10px;
}
.card-payment {
font-size: 12px;
opacity: 0.6;
margin-top: 4px;
}
.card-see-more {
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
opacity: 0.7;
pointer-events: none;
}
/* ===============================
MAINTENANCE SCREEN - COMPLETE CSS
Copy this code to style.css (bottom section or replace old maintenance)
================================ */
.maintenance-screen {
position: fixed;
inset: 0;
background: radial-gradient(circle at top, #0f1022, #05060f);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
}
.maintenance-screen.hidden {
display: none;
}
.maintenance-box {
text-align: center;
padding: 60px 40px;
border-radius: 24px;
background: linear-gradient(135deg,
rgba(15, 20, 40, 0.95),
rgba(20, 25, 50, 0.95));
border: 1px solid rgba(120, 180, 255, 0.3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
max-width: 600px;
width: 100%;
animation: slideUpMaintenance 0.5s ease;
}
.maintenance-box::before {
content: none; /* replaced: fa-wrench via ::before on FA class */
display: block;
font-size: 80px;
margin-bottom: 24px;
filter: drop-shadow(0 0 20px rgba(127, 252, 255, 0.5));
animation: floatTool 2s ease-in-out infinite;
}
@keyframes floatTool {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(5deg);
}
}
.maintenance-box h1 {
font-size: clamp(28px, 5vw, 42px);
font-weight: 800;
margin: 0 0 16px 0;
background: linear-gradient(135deg, #7ffcff, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.maintenance-box p {
font-size: clamp(14px, 3vw, 18px);
color: rgba(200, 220, 255, 0.8);
line-height: 1.7;
margin: 0 0 32px 0;
}
.maintenance-box .back-soon {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: rgba(120, 180, 255, 0.15);
border: 1px solid rgba(120, 180, 255, 0.3);
border-radius: 999px;
color: #7ffcff;
font-weight: 600;
font-size: 14px;
cursor: default;
}
.maintenance-box .back-soon i {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes slideUpMaintenance {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile Responsive */
@media (max-width: 768px) {
.maintenance-box {
padding: 40px 24px;
}
.maintenance-box::before {
font-size: 60px;
}
}
@media (max-width: 480px) {
.maintenance-box {
padding: 32px 20px;
}
.maintenance-box::before {
font-size: 50px;
margin-bottom: 20px;
}
}
/* ===== COMMISSION / MAINTENANCE TOGGLE ===== */
.commission-toggle {
margin: 30px 0;
padding: 20px;
border-radius: 14px;
background: rgba(20, 22, 40, 0.7);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(8px);
}
.toggle-label {
display: block;
font-size: 0.9rem;
opacity: 0.7;
margin-bottom: 10px;
}
.toggle-wrap {
position: relative;
display: flex;
background: rgba(0,0,0,0.3);
border-radius: 10px;
overflow: hidden;
}
.toggle-wrap button {
flex: 1;
padding: 10px 0;
border: none;
background: transparent;
color: white;
font-weight: 600;
cursor: pointer;
z-index: 2;
transition: color 0.3s;
}
/* indicator */
.toggle-indicator {
position: absolute;
top: 4px;
left: 4px;
width: calc(50% - 8px);
height: calc(100% - 8px);
background: linear-gradient(135deg, #7a6cff, #3fd0ff);
border-radius: 8px;
transition: transform 0.3s ease;
z-index: 1;
}
/* OPEN state */
.toggle-wrap.open .toggle-indicator {
transform: translateX(0%);
}
/* MAINTENANCE state */
.toggle-wrap.maintenance .toggle-indicator {
transform: translateX(100%);
}
/* text color when active */
.toggle-wrap.open #btn-open,
.toggle-wrap.maintenance #btn-close {
color: #000;
}
.maintenance-toggle {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.maintenance-toggle button {
padding: 10px 18px;
border: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
background: #2a2a2a;
color: white;
transition: 0.2s;
}
/* OPEN ACTIVE */
.toggle-wrap.open #btn-open {
background: #00c853;
color: white;
}
/* MAINTENANCE ACTIVE */
.toggle-wrap.maintenance #btn-maintenance {
background: #ff5252;
color: white;
}
.maintenance-toggle button:hover {
opacity: 0.85;
}
/* Container row image */
/* old image-url CSS removed */
button[onclick="addImageField()"]:hover {
background: #2f66d6;
}
#pagination {
display: flex;
justify-content: center;
gap: 12px;
margin: 40px 0;
flex-wrap: wrap;
}
.page-btn {
padding: 8px 14px;
border-radius: 10px;
border: 1px solid rgba(120,180,255,0.3);
background: rgba(15,27,53,0.8);
color: #7ffcff;
font-weight: 600;
cursor: pointer;
transition: 0.3s ease;
}
.page-btn:hover {
background: rgba(120,180,255,0.2);
}
.page-btn.active {
background: linear-gradient(135deg, #7ffcff, #a78bfa);
color: #000;
border: none;
}
/* Disabled */
.page-btn:disabled {
background: #333;
color: #777;
cursor: not-allowed;
transform: none;
}
/* Page info */
.page-info {
font-size: 14px;
color: #aaa;
min-width: 80px;
text-align: center;
}
/* ===============================
ADMIN PANEL - COMPLETE REDESIGN
REPLACE THE ADMIN SECTION IN style.css WITH THIS CODE
================================ */
/* ===============================
ADMIN HEADER
================================ */
.admin-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(5, 10, 20, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(120, 180, 255, 0.2);
padding: 20px 0;
margin-bottom: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.admin-header-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.admin-logo {
display: flex;
align-items: center;
gap: 16px;
}
.logo-moon {
font-size: 40px;
filter: drop-shadow(0 0 10px rgba(127, 252, 255, 0.5));
animation: float-moon 3s ease-in-out infinite;
}
@keyframes float-moon {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
}
.admin-title {
font-size: clamp(20px, 4vw, 28px);
font-weight: 800;
margin: 0;
background: linear-gradient(135deg, #7ffcff, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.admin-subtitle {
font-size: 13px;
color: rgba(200, 220, 255, 0.7);
margin: 4px 0 0 0;
letter-spacing: 0.5px;
}
.logout-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 12px;
color: #ef4444;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.logout-btn:hover {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
/* ===============================
MAINTENANCE SECTION
================================ */
.maintenance-section {
max-width: 1400px;
margin: 0 auto 40px;
padding: 0 24px;
}
.maintenance-card {
background: linear-gradient(135deg,
rgba(15, 20, 40, 0.8),
rgba(20, 25, 50, 0.6));
border: 1px solid rgba(120, 180, 255, 0.2);
border-radius: 20px;
padding: 32px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.maintenance-card:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
border-color: rgba(120, 180, 255, 0.3);
}
.maintenance-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.maintenance-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(120, 180, 255, 0.2), rgba(150, 100, 255, 0.2));
border-radius: 50%;
font-size: 24px;
color: #7ffcff;
flex-shrink: 0;
}
.maintenance-header h3 {
font-size: clamp(18px, 3vw, 22px);
font-weight: 700;
color: #fff;
margin: 0;
}
.maintenance-header p {
font-size: 14px;
color: rgba(200, 220, 255, 0.7);
margin: 4px 0 0 0;
}
/* Toggle Switch */
.toggle-wrap {
position: relative;
display: flex;
background: rgba(0, 0, 0, 0.4);
border-radius: 14px;
overflow: hidden;
padding: 4px;
gap: 4px;
}
.toggle-wrap button {
flex: 1;
padding: 14px 20px;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.6);
font-weight: 600;
font-size: 14px;
cursor: pointer;
z-index: 2;
transition: all 0.3s ease;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.toggle-wrap button i {
font-size: 16px;
}
.toggle-indicator {
position: absolute;
top: 4px;
left: 4px;
width: calc(50% - 4px);
height: calc(100% - 8px);
background: linear-gradient(135deg, #22d3ee, #a78bfa);
border-radius: 10px;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
box-shadow: 0 4px 12px rgba(34, 211, 238, 0.4);
}
/* Toggle States */
.toggle-wrap.open .toggle-indicator {
transform: translateX(0);
}
.toggle-wrap.maintenance .toggle-indicator {
transform: translateX(100%);
}
.toggle-wrap.open #btn-open,
.toggle-wrap.maintenance #btn-maintenance {
color: #020510;
font-weight: 700;
}
/* ===============================
ADMIN FORM
================================ */
.admin-form {
max-width: 1400px;
margin: 0 auto 60px;
padding: 0 24px;
}
.admin-form-container {
background: linear-gradient(135deg,
rgba(15, 20, 40, 0.8),
rgba(20, 25, 50, 0.6));
border: 1px solid rgba(120, 180, 255, 0.2);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.admin-form-container:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
border-color: rgba(120, 180, 255, 0.3);
}
.form-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(120, 180, 255, 0.15);
}
.form-header h2 {
font-size: clamp(22px, 4vw, 28px);
font-weight: 800;
color: #fff;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 12px;
}
.form-header h2 i {
color: #7ffcff;
font-size: 24px;
}
.form-header p {
font-size: 14px;
color: rgba(200, 220, 255, 0.7);
margin: 0;
}
/* Form Grid */
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 32px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
font-size: 14px;
font-weight: 600;
color: rgba(200, 220, 255, 0.9);
display: flex;
align-items: center;
gap: 8px;
}
.form-group label i {
color: #7ffcff;
font-size: 14px;
}
.admin-form input,
.admin-form textarea,
.admin-form select {
width: 100%;
padding: 14px 16px;
border-radius: 12px;
background: rgba(10, 15, 30, 0.6);
color: #fff;
border: 1px solid rgba(120, 180, 255, 0.2);
font-size: 14px;
font-family: inherit;
transition: all 0.3s ease;
}
.admin-form input::placeholder,
.admin-form textarea::placeholder {
color: rgba(200, 220, 255, 0.4);
}
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
outline: none;
border-color: rgba(120, 180, 255, 0.5);
background: rgba(10, 15, 30, 0.8);
box-shadow: 0 0 0 3px rgba(120, 180, 255, 0.1);
}
.admin-form textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
/* Image URL Container */
#image-url-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.image-url-row {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 8px;
animation: rowSlideIn 0.25s ease forwards;
}
@keyframes rowSlideIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.image-url-row input {
flex: 1;
margin: 0;
}
/* ===============================
BUTTON IMPROVEMENTS - ADMIN PANEL
Fix:
1. btn-remove-image (X button) - Box style like Edit button
2. btn-add-image (Add Image) - Box style like Edit button
3. Back button di header - Kotak button style
================================ */
/* ========================================
FIX 1: BTN-REMOVE-IMAGE (X Button)
Style like Delete button in table
======================================== */
.btn-remove-image {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
/* Box style */
padding: 8px 16px !important;
height: auto !important;
width: auto !important;
min-width: 70px !important;
/* Cosmic red theme */
background: rgba(239, 68, 68, 0.15) !important;
border: 1px solid rgba(239, 68, 68, 0.3) !important;
border-radius: 8px !important;
/* Text */
color: #ef4444 !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
.btn-remove-image:hover {
background: rgba(239, 68, 68, 0.25) !important;
border-color: rgba(239, 68, 68, 0.5) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}
.btn-remove-image:active {
transform: translateY(0) !important;
}
/* ========================================
FIX 2: BTN-ADD-IMAGE (Add Image Button)
Style like Edit button in table
======================================== */
.btn-add-image {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
/* Box style */
padding: 8px 16px !important;
height: auto !important;
/* Cosmic cyan theme */
background: rgba(34, 211, 238, 0.15) !important;
border: 1px solid rgba(34, 211, 238, 0.3) !important;
border-radius: 8px !important;
/* Text */
color: #22d3ee !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
margin-top: 8px !important;
}
.btn-add-image i {
font-size: 13px !important;
transition: transform 0.2s ease !important;
}
.btn-add-image:hover {
background: rgba(34, 211, 238, 0.25) !important;
border-color: rgba(34, 211, 238, 0.5) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(34, 211, 238, 0.2) !important;
}
.btn-add-image:hover i {
transform: rotate(90deg) !important;
}
.btn-add-image:active {
transform: translateY(0) !important;
}
/* ========================================
FIX 3: BACK BUTTON (Header)
Box button style for page
Commission, Adopt, Property
======================================== */
/* Target link in header (back button) */
header > a,
header a[href*="index.html"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
/* Box button style */
padding: 10px 20px !important;
/* Cosmic purple theme */
background: rgba(167, 139, 250, 0.15) !important;
border: 1px solid rgba(167, 139, 250, 0.3) !important;
border-radius: 8px !important;
/* Text */
color: #a78bfa !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
header > a:hover,
header a[href*="index.html"]:hover {
background: rgba(167, 139, 250, 0.25) !important;
border-color: rgba(167, 139, 250, 0.5) !important;
color: #c4b5fd !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2) !important;
}
header > a:active,
header a[href*="index.html"]:active {
transform: translateY(0) !important;
}
/* ========================================
MOBILE RESPONSIVE
======================================== */
@media (max-width: 768px) {
.btn-remove-image,
.btn-add-image {
padding: 7px 14px !important;
font-size: 12px !important;
}
header > a,
header a[href*="index.html"] {
padding: 8px 16px !important;
font-size: 13px !important;
}
}
/
/* Section Divider */
.section-divider {
margin: 32px 0 24px;
padding: 12px 0;
border-top: 1px solid rgba(120, 180, 255, 0.2);
border-bottom: 1px solid rgba(120, 180, 255, 0.2);
}
.section-divider span {
font-size: 16px;
font-weight: 700;
color: #7ffcff;
text-transform: uppercase;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 8px;
}
/* Save Button */
.btn-save-product {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px 32px;
background: linear-gradient(135deg, #22d3ee, #a78bfa);
border: none;
border-radius: 14px;
color: #020510;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 24px rgba(34, 211, 238, 0.3);
margin-top: 32px;
}
.btn-save-product:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(34, 211, 238, 0.5);
}
.btn-save-product:active {
transform: translateY(-1px);
}
/* ===============================
ADMIN LIST SECTION
================================ */
.admin-list {
max-width: 1400px;
margin: 0 auto 80px;
padding: 0 24px;
}
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(120, 180, 255, 0.15);
flex-wrap: wrap;
gap: 16px;
}
.list-header h2 {
font-size: clamp(22px, 4vw, 28px);
font-weight: 800;
color: #fff;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 12px;
}
.list-header h2 i {
color: #7ffcff;
font-size: 24px;
}
.list-header p {
font-size: 14px;
color: rgba(200, 220, 255, 0.7);
margin: 0;
}
.list-stats {
display: flex;
gap: 12px;
align-items: center;
}
.stat-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(120, 180, 255, 0.15);
border: 1px solid rgba(120, 180, 255, 0.3);
border-radius: 999px;
color: #7ffcff;
font-weight: 600;
font-size: 13px;
}
.stat-badge i {
font-size: 14px;
}
/* Table Wrapper - IMPORTANT for mobile scroll */
.admin-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: linear-gradient(135deg,
rgba(15, 20, 40, 0.8),
rgba(20, 25, 50, 0.6));
border: 1px solid rgba(120, 180, 255, 0.2);
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* Admin Table */
.admin-table {
width: 100%;
min-width: 800px;
/* Minimum width for mobile scroll */
border-collapse: collapse;
}
.admin-table thead {
background: rgba(120, 180, 255, 0.1);
position: sticky;
top: 0;
z-index: 10;
}
.admin-table th {
text-align: left;
padding: 16px 20px;
font-weight: 700;
color: #7ffcff;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(120, 180, 255, 0.2);
white-space: nowrap;
}
.admin-table tbody tr {
transition: all 0.2s ease;
}
.admin-table tbody tr:hover {
background: rgba(120, 180, 255, 0.08);
}
.admin-table td {
padding: 16px 20px;
border-bottom: 1px solid rgba(120, 180, 255, 0.08);
color: rgba(200, 220, 255, 0.9);
font-size: 14px;
}
.admin-table tbody tr:last-child td {
border-bottom: none;
}
/* Type Badge */
.admin-table .type-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 90px;
padding: 6px 12px;
background: rgba(120, 180, 255, 0.15);
border: 1px solid rgba(120, 180, 255, 0.3);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #7ffcff;
text-transform: capitalize;
text-align: center;
}
/* Status Badge */
.admin-table .status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 90px;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-transform: capitalize;
text-align: center;
}
.admin-table .status-badge.open,
.admin-table .status-badge.available {
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #22c55e;
}
.admin-table .status-badge.close,
.admin-table .status-badge.owned {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #ef4444;
}
/* Action Buttons */
.admin-table .action-buttons {
display: flex;
gap: 8px;
flex-wrap: nowrap;
}
.admin-table button {
border: none;
outline: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.admin-table .btn-edit {
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.admin-table .btn-edit:hover {
background: rgba(34, 197, 94, 0.25);
border-color: rgba(34, 197, 94, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}
.admin-table .btn-delete {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.admin-table .btn-delete:hover {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}
/* Loading State */
.loading-state {
text-align: center;
padding: 80px 40px;
}
.loading-spinner {
font-size: 48px;
color: #7ffcff;
margin-bottom: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading-state p {
font-size: 16px;
color: rgba(200, 220, 255, 0.7);
margin: 0;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 80px 40px;
}
.empty-icon {
font-size: 80px;
color: rgba(120, 180, 255, 0.3);
margin-bottom: 20px;
}
.empty-state h3 {
font-size: 24px;
font-weight: 700;
color: #fff;
margin: 0 0 12px 0;
}
.empty-state p {
font-size: 15px;
color: rgba(200, 220, 255, 0.7);
margin: 0;
line-height: 1.6;
}
/* ===============================
CONFIRM DIALOG
================================ */
.confirm-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeIn 0.3s ease;
padding: 20px;
}
.confirm-overlay.hidden {
display: none;
}
.confirm-box {
background: linear-gradient(135deg,
rgba(15, 20, 40, 0.95),
rgba(20, 25, 50, 0.95));
border: 1px solid rgba(120, 180, 255, 0.3);
border-radius: 24px;
padding: 40px;
max-width: 480px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
animation: slideUp 0.3s ease;
text-align: center;
}
.confirm-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: rgba(251, 191, 36, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: #fbbf24;
border: 2px solid rgba(251, 191, 36, 0.3);
}
.confirm-box h3 {
font-size: 24px;
font-weight: 800;
color: #fff;
margin: 0 0 12px 0;
}
.confirm-box p {
font-size: 15px;
color: rgba(200, 220, 255, 0.8);
margin: 0 0 32px 0;
line-height: 1.6;
}
.confirm-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.confirm-btn {
padding: 12px 28px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
border: none;
}
.confirm-btn.cancel {
background: rgba(120, 180, 255, 0.15);
border: 1px solid rgba(120, 180, 255, 0.3);
color: #7ffcff;
}
.confirm-btn.cancel:hover {
background: rgba(120, 180, 255, 0.25);
border-color: rgba(120, 180, 255, 0.5);
transform: translateY(-2px);
}
.confirm-btn.ok {
background: linear-gradient(135deg, #22d3ee, #a78bfa);
color: #020510;
box-shadow: 0 4px 16px rgba(34, 211, 238, 0.3);
}
.confirm-btn.ok:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(34, 211, 238, 0.5);
}
/* ===============================
MAINTENANCE SCREEN
================================ */
.maintenance-screen {
position: fixed;
inset: 0;
background: radial-gradient(circle at top, #0f1022, #05060f);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
}
.maintenance-screen.hidden {
display: none;
}
.maintenance-box {
text-align: center;
padding: 60px 40px;
border-radius: 24px;
background: linear-gradient(135deg,
rgba(15, 20, 40, 0.95),
rgba(20, 25, 50, 0.95));
border: 1px solid rgba(120, 180, 255, 0.3);
backdrop-filter: blur(20px);
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
max-width: 600px;
width: 100%;
animation: slideUp 0.5s ease;
}
.maintenance-box::before {
content: none; /* replaced: fa-wrench via ::before on FA class */
display: block;
font-size: 80px;
margin-bottom: 24px;
filter: drop-shadow(0 0 20px rgba(127, 252, 255, 0.5));
animation: float-moon 2s ease-in-out infinite;
}
.maintenance-box h1 {
font-size: clamp(28px, 5vw, 42px);
font-weight: 800;
margin-bottom: 16px;
background: linear-gradient(135deg, #7ffcff, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.maintenance-box p {
font-size: clamp(14px, 3vw, 18px);
color: rgba(200, 220, 255, 0.8);
line-height: 1.7;
margin-bottom: 32px;
}
.maintenance-box .back-soon {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: rgba(120, 180, 255, 0.15);
border: 1px solid rgba(120, 180, 255, 0.3);
border-radius: 999px;
color: #7ffcff;
font-weight: 600;
font-size: 14px;
}
/* ===============================
ANIMATIONS
================================ */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===============================
MOBILE RESPONSIVE
================================ */
@media (max-width: 1024px) {
.admin-table {
min-width: 700px;
}
}
@media (max-width: 768px) {
.admin-header-content {
padding: 0 20px;
}
.logo-moon {
font-size: 32px;
}
.logout-btn span {
display: none;
}
.logout-btn {
padding: 12px 16px;
}
.maintenance-section,
.admin-form,
.admin-list {
padding: 0 20px;
}
.maintenance-card,
.admin-form-container {
padding: 24px;
}
.maintenance-header {
flex-direction: column;
text-align: center;
gap: 12px;
}
.maintenance-icon {
width: 48px;
height: 48px;
font-size: 20px;
}
.toggle-wrap button {
padding: 12px 16px;
font-size: 13px;
}
.toggle-wrap button span {
display: none;
}
.form-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.form-group.full-width {
grid-column: 1;
}
.list-header {
flex-direction: column;
align-items: flex-start;
}
.admin-table {
min-width: 600px;
font-size: 13px;
}
.admin-table th,
.admin-table td {
padding: 12px 16px;
}
.admin-table button {
padding: 6px 12px;
font-size: 12px;
}
.confirm-box {
padding: 32px 24px;
}
.confirm-icon {
width: 64px;
height: 64px;
font-size: 28px;
}
.confirm-actions {
flex-direction: column;
}
.confirm-btn {
width: 100%;
justify-content: center;
}
.maintenance-box {
padding: 40px 24px;
}
.maintenance-box::before {
font-size: 60px;
}
}
@media (max-width: 480px) {
.admin-header {
padding: 16px 0;
}
.admin-title {
font-size: 18px;
}
.admin-subtitle {
font-size: 11px;
}
.maintenance-card,
.admin-form-container {
padding: 20px;
}
.form-header {
margin-bottom: 24px;
padding-bottom: 20px;
}
.section-divider {
margin: 24px 0 20px;
}
.image-url-row {
flex-direction: row;
flex-wrap: nowrap;
gap: 6px;
}
.btn-remove-image {
width: 38px;
flex-shrink: 0;
}
.btn-chip-add {
flex-shrink: 0 !important;
padding: 8px 14px !important;
min-width: unset !important;
}
.admin-table {
min-width: 550px;
}
.stat-badge {
font-size: 12px;
padding: 6px 12px;
}
.empty-icon {
font-size: 60px;
}
.empty-state {
padding: 60px 24px;
}
.loading-state {
padding: 60px 24px;
}
.loading-spinner {
font-size: 40px;
}
}
/* Admin Filter Section */
.admin-filter-section {
margin: 0;
padding: 0;
}
.filter-section-title {
font-size: 18px;
font-weight: 700;
color: #7ffcff;
margin: 0 0 20px 0;
display: flex;
align-items: center;
gap: 10px;
}
.filter-section-title i {
font-size: 16px;
}
/* Search Wrapper */
.admin-search-wrapper {
width: 100%;
position: relative;
margin-bottom: 20px;
}
.admin-search-input {
width: 100%;
padding: 14px 20px;
background: rgba(10, 15, 30, 0.6);
border: 1px solid rgba(120, 180, 255, 0.3);
border-radius: 12px;
color: #fff;
font-size: 15px;
font-family: inherit;
transition: all 0.3s ease;
}
.admin-search-input::placeholder {
color: rgba(200, 220, 255, 0.4);
}
.admin-search-input:focus {
outline: none;
border-color: rgba(120, 180, 255, 0.6);
background: rgba(10, 15, 30, 0.8);
box-shadow: 0 0 0 3px rgba(120, 180, 255, 0.1);
}
/* Dropdown */
.admin-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
max-height: 300px;
overflow-y: auto;
background: rgba(15, 20, 40, 0.98);
border: 1px solid rgba(120, 180, 255, 0.3);
border-radius: 12px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
z-index: 100;
}
.admin-dropdown.hidden {
display: none;
}
.admin-dropdown-item {
padding: 12px 20px;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid rgba(120, 180, 255, 0.1);
color: rgba(200, 220, 255, 0.9);
font-size: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.admin-dropdown-item:last-child {
border-bottom: none;
}
.admin-dropdown-item:hover {
background: rgba(120, 180, 255, 0.1);
color: #7ffcff;
padding-left: 24px;
}
.admin-dropdown-item i {
font-size: 12px;
opacity: 0.6;
}
.admin-dropdown-empty {
padding: 20px;
text-align: center;
color: rgba(200, 220, 255, 0.5);
font-size: 14px;
}
/* Selected Filters */
.admin-selected-filters {
display: flex;
flex-direction: column;
gap: 12px;
}
.filter-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.filter-label {
font-size: 13px;
font-weight: 600;
color: rgba(200, 220, 255, 0.8);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.filter-label i {
font-size: 12px;
color: #7ffcff;
}
.chip-wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex: 1;
}
/* Chips */
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(120, 180, 255, 0.15);
border: 1px solid rgba(120, 180, 255, 0.3);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #7ffcff;
transition: all 0.2s ease;
cursor: default;
}
.chip:hover {
background: rgba(120, 180, 255, 0.25);
border-color: rgba(120, 180, 255, 0.5);
}
.chip-x {
cursor: pointer;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(239, 68, 68, 0.2);
border-radius: 50%;
font-size: 10px;
color: #ef4444;
transition: all 0.2s ease;
}
.chip-x:hover {
background: rgba(239, 68, 68, 0.4);
transform: scale(1.1);
}
/* Empty state for chips */
.chip-wrap:empty::before {
content: "No filters selected";
color: rgba(200, 220, 255, 0.4);
font-size: 13px;
font-style: italic;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.admin-filter-section {
padding: 20px;
margin: 0 20px 24px;
}
.filter-row {
flex-direction: column;
align-items: flex-start;
}
.chip-wrap {
width: 100%;
}
}
@media (max-width: 480px) {
.admin-filter-section {
padding: 16px;
}
.filter-section-title {
font-size: 16px;
}
.admin-search-input {
font-size: 14px;
padding: 12px 16px;
}
}
/* ===============================
COSMIC INFO BOARD
=============================== */
/* ── Info Board ────────────────────────────────────────── */
.info-board {
max-width: 580px;
margin: 16px auto 72px;
padding: 0 20px;
}
.info-board-inner {
background: rgba(10, 16, 36, 0.65);
border: 1px solid rgba(120, 180, 255, 0.13);
border-radius: 18px;
padding: 28px 28px 24px;
backdrop-filter: blur(14px);
box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
.info-board-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(120, 180, 255, 0.10);
}
.info-board-icon {
font-size: 16px;
color: #7ffcff;
opacity: 0.85;
}
.info-board-title {
font-size: 14px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(200, 230, 255, 0.7);
margin: 0;
}
.info-board-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.info-board-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(120,180,255,0.08);
border-radius: 12px;
transition: border-color 0.2s, background 0.2s;
}
.info-board-item:hover {
background: rgba(127,252,255,0.04);
border-color: rgba(127,252,255,0.15);
}
.info-item-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(127,252,255,0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #7ffcff;
font-size: 13px;
}
.info-item-body strong {
display: block;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.88);
margin-bottom: 3px;
}
.info-item-body p {
margin: 0;
font-size: 12px;
color: rgba(200,220,255,0.5);
line-height: 1.55;
}
@media (max-width: 600px) {
.info-board-inner { padding: 22px 18px 18px; }
.info-board-item { padding: 12px 14px; gap: 12px; }
}
/* ==========================================
ADMIN PAGINATION
========================================== */
.admin-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 32px 0;
padding: 16px;
}
.admin-page-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 10px 20px;
color: #fff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-page-btn:hover:not(:disabled) {
background: rgba(127, 252, 255, 0.15);
border-color: rgba(127, 252, 255, 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(127, 252, 255, 0.2);
}
.admin-page-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.admin-page-info {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
min-width: 60px;
text-align: center;
}
/* Row Number Column */
.admin-table .row-num-col {
font-size: 14px;
font-weight: 600;
color: rgba(127, 252, 255, 0.7);
text-align: center;
}
/* ==========================================
ADMIN LIST CONTAINER (Header + Filter)
========================================== */
.admin-list-container {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
}
.admin-list-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.admin-list-header .header-left h2 {
font-size: 20px;
font-weight: 700;
color: #7ffcff;
margin: 0 0 6px 0;
display: flex;
align-items: center;
gap: 10px;
}
.admin-list-header .header-left p {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.admin-list-header .header-right {
flex-shrink: 0;
}
.admin-divider {
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(127, 252, 255, 0.3) 20%,
rgba(127, 252, 255, 0.3) 80%,
transparent
);
margin: 20px 0;
}
@media (max-width: 600px) {
.admin-list-header {
flex-direction: column;
align-items: flex-start;
}
}
/* Center align TYPE and STATUS headers */
.admin-table th:nth-child(3),
.admin-table th:nth-child(4) {
text-align: center;
}
/* Center align TYPE and STATUS content cells */
.admin-table td:nth-child(3),
.admin-table td:nth-child(4) {
text-align: center;
}
.admin-filter-box {
margin-top: 16px;
padding: 16px;
border-radius: 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.filter-title {
margin-bottom: 12px;
font-size: 16px;
color: #9ff;
}
.filter-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
}
.filter-label {
opacity: 0.8;
font-size: 14px;
}
.admin-pagination {
margin-top: 12px;
display: flex;
justify-content: center;
gap: 12px;
}
/* ==========================================
ADMIN FILTER LABEL ROW
========================================== */
.filter-label-row {
margin-bottom: 12px;
}
.filter-label-row .filter-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: rgba(127, 252, 255, 0.9);
margin: 0;
}
.filter-label-row .filter-label i {
font-size: 13px;
color: #7ffcff;
}
/* Chip wrap spacing */
.admin-filter-section .chip-wrap {
margin-top: 16px;
}
/* ==========================================
PAGINATION FIX - Universal
========================================== */
.pg-btn {
padding: 10px 20px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
color: #fff;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.pg-btn:hover:not(:disabled) {
background: rgba(127, 252, 255, 0.15);
border-color: rgba(127, 252, 255, 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(127, 252, 255, 0.2);
}
.pg-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.pg-info {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
min-width: 60px;
text-align: center;
}
/* ==========================================
MARKET SEARCH BAR - All Pages
========================================== */
.search-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto 30px;
}
#marketSearch {
width: 100%;
padding: 14px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
color: #fff;
font-size: 15px;
font-family: inherit;
transition: all 0.3s ease;
}
#marketSearch::placeholder {
color: rgba(255, 255, 255, 0.4);
}
#marketSearch:focus {
outline: none;
border-color: rgba(127, 252, 255, 0.5);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(127, 252, 255, 0.1);
}
#marketDropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
max-height: 300px;
overflow-y: auto;
background: rgba(15, 20, 40, 0.95);
border: 1px solid rgba(127, 252, 255, 0.3);
border-radius: 12px;
backdrop-filter: blur(10px);
z-index: 100;
}
#marketDropdown.hidden {
display: none;
}
.dropdown-item {
padding: 12px 16px;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dropdown-item:hover {
background: rgba(127, 252, 255, 0.1);
}
.dropdown-item:last-child {
border-bottom: none;
}
/* ==========================================
MARKET FILTER REDESIGN - Compact Box
Commission, Adopt, Property pages
========================================== */
/* ── Search & Filter Box ───────────────────────────────── */
.search-filter-box {
background: rgba(8, 13, 30, 0.75);
border: 1px solid rgba(120, 180, 255, 0.12);
border-radius: 16px;
padding: 18px 20px 16px;
margin: 0 auto 24px;
max-width: 820px;
position: relative;
backdrop-filter: blur(16px);
box-shadow: 0 6px 32px rgba(0,0,0,0.32);
}
.search-input-wrap {
position: relative;
margin-bottom: 16px;
}
.search-input-wrap #marketSearch {
margin-bottom: 0;
}
.search-filter-box #marketSearch {
width: 100%;
padding: 11px 16px 11px 40px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(120,180,255,0.16);
border-radius: 10px;
color: #fff;
font-size: 13.5px;
font-family: inherit;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
}
.search-filter-box #marketSearch::placeholder {
color: rgba(200,220,255,0.32);
}
.search-filter-box #marketSearch:focus {
outline: none;
border-color: rgba(127,252,255,0.4);
background: rgba(255,255,255,0.06);
}
.filter-section {
margin-bottom: 16px;
}
.filter-section:last-child {
margin-bottom: 0;
}
.filter-section-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(127,252,255,0.5);
margin-bottom: 9px;
}
.filter-section-label i {
font-size: 11px;
color: #7ffcff;
opacity: 0.7;
}
.filter-empty-state {
font-size: 12px;
color: rgba(255,255,255,0.25);
font-style: italic;
padding: 4px 0;
}
.chip-container {
display: flex;
flex-wrap: wrap;
gap: 7px;
min-height: 28px;
}
.chip-container:empty::after {
content: '';
}
.filter-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(120,180,255,0.10) 30%, rgba(120,180,255,0.10) 70%, transparent);
margin: 14px 0;
}
@media (max-width: 600px) {
.search-filter-box {
padding: 14px 14px 12px;
}
}
/* ── Admin Pagination Bar ── */
.admin-pagination {
margin-bottom: 12px;
}
.admin-pg-bar {
display: flex;
align-items: center;
gap: 12px;
}
.admin-pg-btn {
display: inline-flex;
align-items: center;
padding: 8px 18px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: rgba(200,220,255,0.8);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}
.admin-pg-btn:hover:not(:disabled) {
background: rgba(127,252,255,0.1);
border-color: rgba(127,252,255,0.35);
color: #7ffcff;
transform: translateY(-1px);
}
.admin-pg-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.admin-pg-info {
font-size: 13px;
font-weight: 600;
color: rgba(200,220,255,0.6);
min-width: 48px;
text-align: center;
}
/* ==========================================
ADMIN DESKTOP LAYOUT FIX (min-width: 1024px)
========================================== */
@media (min-width: 1024px) {
/* Center maintenance card */
.maintenance-section .maintenance-card {
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
/* Center Website Status header */
.maintenance-header {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
/* Logout position absolute top right */
.admin-header {
position: relative;
}
.admin-header .logout-btn {
position: absolute !important;
top: 20px !important;
right: 40px !important;
}
}
/* ══════════════════════════════════════════════════════════════
✦ V2 VISUAL UPGRADE — Layout expansion + color harmonization
══════════════════════════════════════════════════════════════ */
/* ── Layout: wider everything ─────────────────────────────── */
main {
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 24px;
width: 100%;
}
.search-filter-box {
max-width: 900px !important;
}
#product-list {
max-width: 1400px !important;
padding: 0 0 24px !important;
}
.lm-sort-bar {
max-width: 1400px !important;
padding: 0 !important;
margin: 0 auto 16px !important;
}
.info-board {
max-width: 640px !important;
}
/* ── Typography: gradient title ──────────────────────────── */
.market-title {
font-size: 2rem !important;
font-weight: 700 !important;
background: linear-gradient(135deg, #7ffcff 0%, #a78bfa 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
letter-spacing: 1px !important;
margin-bottom: 10px !important;
}
.market-desc {
color: rgba(200, 220, 255, 0.55) !important;
font-size: 0.9rem !important;
line-height: 1.75 !important;
margin-bottom: 32px !important;
}
/* ── Search box visual ───────────────────────────────────── */
.search-filter-box {
background: rgba(10, 16, 36, 0.72) !important;
border: 1px solid rgba(120, 180, 255, 0.18) !important;
border-radius: 18px !important;
padding: 22px 24px !important;
margin: 0 auto 28px !important;
backdrop-filter: blur(18px) !important;
box-shadow: 0 12px 48px rgba(0,0,0,0.4) !important;
}
.search-filter-box #marketSearch {
border: 1px solid rgba(120, 180, 255, 0.22) !important;
border-radius: 12px !important;
padding: 13px 18px !important;
}
.search-filter-box #marketSearch:focus {
border-color: rgba(127, 252, 255, 0.45) !important;
box-shadow: 0 0 0 3px rgba(127, 252, 255, 0.07) !important;
}
.filter-section-label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: rgba(127, 252, 255, 0.65) !important;
margin-bottom: 10px !important;
}
.filter-section-label i {
font-size: 11px !important;
color: rgba(127, 252, 255, 0.65) !important;
}
.filter-divider {
background: linear-gradient(90deg, transparent, rgba(120,180,255,0.15) 30%, rgba(120,180,255,0.15) 70%, transparent) !important;
margin: 14px 0 !important;
}
/* chips in filter area (active-selected ones with ×) */
.chip.tag {
background: rgba(127, 252, 255, 0.07) !important;
border: 1px solid rgba(127, 252, 255, 0.22) !important;
color: #7ffcff !important;
}
.chip.tag:hover {
background: rgba(127, 252, 255, 0.13) !important;
}
.chip.artist {
background: rgba(167, 139, 250, 0.1) !important;
border: 1px solid rgba(167, 139, 250, 0.3) !important;
color: #a78bfa !important;
}
.chip.artist:hover {
background: rgba(167, 139, 250, 0.18) !important;
}
/* ── Sort bar ─────────────────────────────────────────────── */
.lm-sort-btn.active {
background: rgba(127, 252, 255, 0.1) !important;
border-color: rgba(127, 252, 255, 0.35) !important;
color: #7ffcff !important;
}
/* ── Pagination ──────────────────────────────────────────── */
.pagination button:hover:not(:disabled) {
background: rgba(127, 252, 255, 0.12) !important;
border-color: rgba(127, 252, 255, 0.35) !important;
color: #7ffcff !important;
}
/* ── Info board ──────────────────────────────────────────── */
.info-board-inner {
background: linear-gradient(145deg, rgba(13,21,44,0.82), rgba(9,15,34,0.72)) !important;
border: 1px solid rgba(120, 180, 255, 0.18) !important;
border-radius: 22px !important;
backdrop-filter: blur(16px) !important;
box-shadow: 0 16px 60px rgba(0,0,0,0.4) !important;
}
.info-board-header {
border-bottom: 1px solid rgba(120, 180, 255, 0.12) !important;
margin-bottom: 28px !important;
padding-bottom: 20px !important;
}
.info-board-icon {
color: #7ffcff !important;
text-shadow: 0 0 12px rgba(127,252,255,0.7) !important;
}
.info-board-title {
color: #fff !important;
}
.info-step-num {
background: linear-gradient(135deg, #7ffcff, #9ff) !important;
color: #03121f !important;
box-shadow: 0 0 14px rgba(120,200,255,0.6) !important;
}
.info-step:hover .info-step-num {
transform: scale(1.1) !important;
box-shadow: 0 0 22px rgba(120,200,255,0.9) !important;
}
.info-step:hover {
transform: translateX(5px) !important;
}
.info-step-text strong {
color: #fff !important;
}
.info-step-text p {
color: rgba(200, 220, 255, 0.55) !important;
}
/* ── tag-dropdown visual ─────────────────────────────────── */
.tag-dropdown {
background: rgba(10, 16, 40, 0.96) !important;
border: 1px solid rgba(120, 180, 255, 0.22) !important;
border-radius: 12px !important;
}
.tag-dropdown div:hover,
.tag-dropdown .tag-option:hover {
background: rgba(127, 252, 255, 0.08) !important;
color: #7ffcff !important;
}
/* ── chip-container: hide the empty text ─────────────────── */
.chip-container:empty::after {
content: '' !important;
}
/* ── Responsive: wider on mobile too ──────────────────────── */
@media (max-width: 768px) {
main {
padding: 0 14px !important;
}
.search-filter-box {
margin: 0 0 24px !important;
}
.lm-sort-bar {
padding: 0 !important;
}
}
/* ══════════════════════════════════════════════════════════
✦ FINAL FIXES — v2 complete override
══════════════════════════════════════════════════════════ */
/* ── Center title & desc ─────────────────────────────────── */
.lm-centered,
.market-title,
.market-desc {
text-align: center !important;
max-width: 680px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── Gradient title ──────────────────────────────────────── */
.market-title {
font-size: 2.2rem !important;
font-weight: 700 !important;
background: linear-gradient(135deg, #7ffcff 0%, #a78bfa 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
letter-spacing: 1px !important;
margin-bottom: 10px !important;
}
.market-desc {
color: rgba(200, 220, 255, 0.55) !important;
font-size: 0.9rem !important;
line-height: 1.75 !important;
margin-bottom: 36px !important;
}
/* ── Sort bar — full base styles ────────────────────────── */
.lm-sort-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 10px !important;
max-width: 1400px !important;
margin: 0 auto 16px !important;
padding: 0 !important;
}
.lm-sort-count {
font-size: 12px;
color: rgba(200, 220, 255, 0.5);
}
.lm-sort-count span {
font-weight: 700;
color: rgba(200, 220, 255, 0.85);
}
.lm-sort-btns {
display: flex;
gap: 6px;
}
.lm-sort-btn {
padding: 6px 14px;
border-radius: 8px;
border: 1px solid rgba(120, 180, 255, 0.2);
background: rgba(120, 180, 255, 0.06);
color: rgba(200, 220, 255, 0.45);
font-family: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: all 0.18s ease;
}
.lm-sort-btn:hover {
border-color: rgba(127, 252, 255, 0.35);
color: rgba(200, 220, 255, 0.85);
}
.lm-sort-btn.active {
background: rgba(127, 252, 255, 0.1) !important;
border-color: rgba(127, 252, 255, 0.38) !important;
color: #7ffcff !important;
}
/* ── Info board — full redesign ─────────────────────────── */
.info-board {
max-width: 620px !important;
margin: 24px auto 80px !important;
padding: 0 20px !important;
}
.info-board-inner {
background: linear-gradient(145deg, rgba(13,21,44,0.85), rgba(9,15,34,0.75)) !important;
border: 1px solid rgba(120, 180, 255, 0.18) !important;
border-radius: 22px !important;
padding: 36px 32px !important;
backdrop-filter: blur(18px) !important;
box-shadow: 0 20px 64px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04) !important;
max-width: none !important;
position: relative;
overflow: hidden;
}
/* subtle nebula glow top-right */
.info-board-inner::before {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(127,252,255,0.06), transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.info-board-header {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 28px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid rgba(120, 180, 255, 0.12) !important;
}
.info-board-icon {
font-size: 20px !important;
color: #7ffcff !important;
text-shadow: 0 0 14px rgba(127,252,255,0.8) !important;
}
.info-board-title {
font-size: 18px !important;
font-weight: 600 !important;
color: #fff !important;
margin: 0 !important;
letter-spacing: 0.5px;
}
/* Vertical line connecting steps */
.info-board-steps {
position: relative;
display: flex;
flex-direction: column;
gap: 20px !important;
}
.info-board-steps::before {
content: '';
position: absolute;
left: 18px;
top: 18px;
bottom: 18px;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(127,252,255,0.25) 20%, rgba(127,252,255,0.25) 80%, transparent);
pointer-events: none;
}
.info-step {
display: flex !important;
align-items: flex-start !important;
gap: 16px !important;
transition: transform 0.22s ease !important;
}
.info-step:hover {
transform: translateX(5px) !important;
}
.info-step-num {
min-width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
background: linear-gradient(135deg, #7ffcff, #a0f0ff) !important;
color: #03121f !important;
box-shadow: 0 0 14px rgba(127,252,255,0.5) !important;
flex-shrink: 0 !important;
transition: all 0.25s ease !important;
position: relative;
z-index: 1;
}
.info-step:hover .info-step-num {
transform: scale(1.12) !important;
box-shadow: 0 0 24px rgba(127,252,255,0.85) !important;
}
.info-step-text strong {
display: block;
font-size: 14px !important;
color: #fff !important;
margin-bottom: 2px !important;
font-weight: 600;
}
.info-step-text p {
margin: 0 !important;
font-size: 12px !important;
color: rgba(200, 220, 255, 0.5) !important;
line-height: 1.5 !important;
}
/* ── filter section label: no icon dependency ───────────── */
.filter-section-label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: rgba(127, 252, 255, 0.65) !important;
margin-bottom: 10px !important;
}
.filter-section-label i {
display: none !important;
}
/* hide broken FA icons */
/* ── Search filter box glowup ───────────────────────────── */
.search-filter-box {
background: rgba(10, 16, 36, 0.72) !important;
border: 1px solid rgba(120, 180, 255, 0.18) !important;
border-radius: 18px !important;
padding: 22px 24px !important;
margin: 0 auto 28px !important;
max-width: 900px !important;
backdrop-filter: blur(18px) !important;
box-shadow: 0 12px 48px rgba(0,0,0,0.4) !important;
}
.search-filter-box #marketSearch {
border: 1px solid rgba(120, 180, 255, 0.22) !important;
border-radius: 12px !important;
padding: 13px 18px !important;
background: rgba(255,255,255,0.05) !important;
color: #fff !important;
}
.search-filter-box #marketSearch::placeholder {
color: rgba(200,220,255,0.38) !important;
}
.search-filter-box #marketSearch:focus {
border-color: rgba(127,252,255,0.45) !important;
box-shadow: 0 0 0 3px rgba(127,252,255,0.07) !important;
outline: none !important;
}
/* ── Layout: wider everything ───────────────────────────── */
main {
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 20px;
width: 100%;
}
/* ── Pagination glowup ──────────────────────────────────── */
.pagination button {
border: 1px solid rgba(120,180,255,0.2) !important;
background: rgba(120,180,255,0.05) !important;
color: rgba(200,220,255,0.55) !important;
border-radius: 10px !important;
font-family: inherit !important;
transition: all 0.2s ease !important;
}
.pagination button:hover:not(:disabled) {
background: rgba(127,252,255,0.1) !important;
border-color: rgba(127,252,255,0.38) !important;
color: #7ffcff !important;
transform: translateY(-1px) !important;
}
.pagination button:disabled {
opacity: 0.3 !important;
cursor: not-allowed !important;
}
/* ── chip colors ─────────────────────────────────────────── */
.chip.tag {
background: rgba(127,252,255,0.07) !important;
border: 1px solid rgba(127,252,255,0.22) !important;
color: #7ffcff !important;
}
.chip.artist {
background: rgba(167,139,250,0.1) !important;
border: 1px solid rgba(167,139,250,0.3) !important;
color: #a78bfa !important;
}
/* ── mobile ─────────────────────────────────────────────── */
@media (max-width: 640px) {
main {
padding: 0 14px !important;
}
.info-board {
padding: 0 14px !important;
}
.info-board-inner {
padding: 24px 18px !important;
}
.market-title {
font-size: 1.75rem !important;
}
.lm-sort-bar {
flex-direction: column;
align-items: flex-start !important;
}
}
/* ══════════════════════════════════════════════════════════
✦ CHIP EMPTY STATE + IMAGE FIX
══════════════════════════════════════════════════════════ */
/* Empty state for chip containers */
.chip-container:empty::after {
content: 'No active filters yet' !important;
font-size: 12px !important;
color: rgba(127, 252, 255, 0.22) !important;
font-style: italic !important;
letter-spacing: 0.3px !important;
pointer-events: none !important;
}
#artistChips:empty::after {
content: 'Search or click an artist on the card ↓' !important;
font-size: 11.5px !important;
color: rgba(167, 139, 250, 0.3) !important;
font-style: italic !important;
}
#tagChips:empty::after {
content: 'Search or click a tag on the card ↓' !important;
font-size: 11.5px !important;
color: rgba(127, 252, 255, 0.25) !important;
font-style: italic !important;
}
/* ═══════════════════════════════════════════════════════════
✦ LUNAR MINT — V3 ADDITIONS
═══════════════════════════════════════════════════════════ */
/* ── Layout wide ─────────────────────────────────────────── */
main {
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 640px) {
main {
padding: 0 14px !important;
}
}
/* ── Title center + gradient ──────────────────────────────── */
.market-title, .lm-centered {
text-align: center !important;
font-size: 2.1rem !important;
font-weight: 700 !important;
background: linear-gradient(135deg, #7ffcff 0%, #a78bfa 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
letter-spacing: 1px !important;
margin: 0 auto 10px !important;
max-width: 680px !important;
display: block !important;
}
.market-desc {
text-align: center !important;
color: rgba(200,220,255,.55) !important;
font-size: .9rem !important;
line-height: 1.75 !important;
margin: 0 auto 32px !important;
max-width: 680px !important;
}
@media (max-width:640px) {
.market-title {
font-size:1.7rem !important;
}
}
/* ── Search filter box ────────────────────────────────────── */
.search-filter-box {
background: rgba(10,16,36,.72) !important;
border: 1px solid rgba(120,180,255,.18) !important;
border-radius: 18px !important;
padding: 22px 24px !important;
margin: 0 auto 24px !important;
max-width: 900px !important;
backdrop-filter: blur(18px) !important;
box-shadow: 0 12px 48px rgba(0,0,0,.4) !important;
}
.search-filter-box #marketSearch {
border: 1px solid rgba(120,180,255,.22) !important;
border-radius: 12px !important;
padding: 13px 18px !important;
background: rgba(255,255,255,.05) !important;
color: #fff !important;
width: 100% !important;
}
.search-filter-box #marketSearch::placeholder {
color: rgba(200,220,255,.35) !important;
}
.search-filter-box #marketSearch:focus {
border-color: rgba(127,252,255,.45) !important;
box-shadow: 0 0 0 3px rgba(127,252,255,.07) !important;
outline: none !important;
}
.filter-section-label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: rgba(127,252,255,.65) !important;
margin-bottom: 10px !important;
}
.filter-section-label i {
display: none !important;
}
.filter-divider {
background: linear-gradient(90deg,transparent,rgba(120,180,255,.15) 30%,rgba(120,180,255,.15) 70%,transparent) !important;
margin: 14px 0 !important;
}
.chip-container {
min-height: 28px !important;
}
#artistChips:empty::after {
content: 'Search or click an artist on the card ↓';
font-size: 11.5px;
color: rgba(167,139,250,.3);
font-style: italic;
}
#tagChips:empty::after {
content: 'Search or click a tag on the card ↓';
font-size: 11.5px;
color: rgba(127,252,255,.25);
font-style: italic;
}
/* ── SORT BAR ─────────────────────────────────────────────── */
.lm-sort-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 10px !important;
max-width: 1400px !important;
margin: 0 auto 16px !important;
padding: 0 !important;
}
.lm-sort-left {
display: flex;
align-items: center;
gap: 12px;
}
.lm-sort-right {
display: flex;
gap: 6px;
align-items: center;
}
.lm-sort-count-txt {
font-size: 12px;
color: rgba(200,220,255,.45);
}
.lm-sort-count-txt span {
font-weight: 700;
color: rgba(200,220,255,.8);
}
.lm-sort-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(120,180,255,.18);
background: rgba(120,180,255,.05);
color: rgba(200,220,255,.45);
font-family: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: .3px;
cursor: pointer;
transition: all .18s ease;
white-space: nowrap;
}
.lm-sort-btn:hover {
border-color: rgba(127,252,255,.32);
color: rgba(200,220,255,.85);
background: rgba(127,252,255,.06);
}
.lm-sort-btn.active {
background: rgba(127,252,255,.1) !important;
border-color: rgba(127,252,255,.4) !important;
color: #7ffcff !important;
box-shadow: 0 0 12px rgba(127,252,255,.12);
}
.lm-sort-recommended.active {
background: rgba(255,217,125,.08) !important;
border-color: rgba(255,217,125,.35) !important;
color: #ffd97d !important;
box-shadow: 0 0 12px rgba(255,217,125,.1);
}
.sort-icon {
font-size: 12px;
}
@media (max-width:500px) {
.lm-sort-bar {
flex-direction: column;
align-items: flex-start !important;
}
.lm-sort-btn {
font-size: 10px;
padding: 5px 10px;
}
}
/* ── ARTIST AVATAR in preview ─────────────────────────────── */
.lm-artist-row-preview {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid rgba(120,180,255,.13);
border-radius: 12px;
cursor: pointer;
transition: all .18s ease;
margin-top: 4px;
}
.lm-artist-row-preview:hover {
border-color: rgba(127,252,255,.28);
background: rgba(127,252,255,.04);
}
.lm-artist-avatar-wrap {
width: 36px;
height: 36px;
flex-shrink: 0;
}
.lm-artist-avatar-img {
width: 36px;
height: 36px;
border-radius: 10px;
object-fit: cover;
border: 1px solid rgba(120,180,255,.2);
display: block;
}
.lm-artist-avatar-initial {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: #060b18;
flex-shrink: 0;
box-shadow: 0 0 12px rgba(127,252,255,.25);
}
.lm-artist-row-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.lm-artist-row-name {
font-size: 13px;
font-weight: 600;
color: rgba(200,220,255,.85);
transition: color .18s;
}
.lm-artist-row-preview:hover .lm-artist-row-name {
color: #7ffcff;
}
.lm-artist-row-sub {
font-size: 10px;
color: rgba(200,220,255,.35);
transition: color .18s;
}
.lm-artist-row-preview:hover .lm-artist-row-sub {
color: rgba(127,252,255,.5);
}
/* ── Pagination ────────────────────────────────────────────── */
.pagination button {
border: 1px solid rgba(120,180,255,.2) !important;
background: rgba(120,180,255,.05) !important;
color: rgba(200,220,255,.55) !important;
border-radius: 10px !important;
font-family: inherit !important;
transition: all .2s ease !important;
}
.pagination button:hover:not(:disabled) {
background: rgba(127,252,255,.1) !important;
border-color: rgba(127,252,255,.38) !important;
color: #7ffcff !important;
transform: translateY(-1px) !important;
}
.pagination button:disabled {
opacity: .3 !important;
}
/* ── Chip colors ───────────────────────────────────────────── */
.chip.tag {
background:rgba(127,252,255,.07)!important;
border:1px solid rgba(127,252,255,.22)!important;
color:#7ffcff!important;
}
.chip.artist {
background:rgba(167,139,250,.1)!important;
border:1px solid rgba(167,139,250,.3)!important;
color:#a78bfa!important;
}
/* ── Info board ────────────────────────────────────────────── */
.info-board {
max-width:620px!important;
margin:24px auto 80px!important;
padding:0 20px!important;
}
.info-board-inner {
background:linear-gradient(145deg,rgba(13,21,44,.85),rgba(9,15,34,.75))!important;
border:1px solid rgba(120,180,255,.18)!important;
border-radius:22px!important;
padding:36px 32px!important;
backdrop-filter:blur(18px)!important;
box-shadow:0 20px 64px rgba(0,0,0,.45)!important;
}
.info-board-header {
border-bottom:1px solid rgba(120,180,255,.12)!important;
margin-bottom:28px!important;
padding-bottom:20px!important;
}
.info-board-icon {
color:#7ffcff!important;
text-shadow:0 0 14px rgba(127,252,255,.8)!important;
}
.info-board-title {
color:#fff!important;
font-size:18px!important;
font-weight:600!important;
margin:0!important;
}
.info-board-steps {
position:relative;
display:flex;
flex-direction:column;
gap:20px!important;
}
.info-board-steps::before {
content:'';
position:absolute;
left:18px;
top:18px;
bottom:18px;
width:1px;
background:linear-gradient(to bottom,transparent,rgba(127,252,255,.22) 20%,rgba(127,252,255,.22) 80%,transparent);
pointer-events:none;
}
.info-step {
display:flex!important;
align-items:flex-start!important;
gap:16px!important;
transition:transform .22s ease!important;
}
.info-step:hover {
transform:translateX(5px)!important;
}
.info-step-num {
min-width:36px!important;
height:36px!important;
border-radius:50%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:1px!important;
background:linear-gradient(135deg,#7ffcff,#a0f0ff)!important;
color:#03121f!important;
box-shadow:0 0 14px rgba(127,252,255,.5)!important;
flex-shrink:0!important;
position:relative;
z-index:1;
}
.info-step:hover .info-step-num {
transform:scale(1.12)!important;
box-shadow:0 0 24px rgba(127,252,255,.85)!important;
}
.info-step-text strong {
font-size:14px!important;
color:#fff!important;
margin-bottom:2px!important;
display:block;
}
.info-step-text p {
margin:0!important;
font-size:12px!important;
color:rgba(200,220,255,.5)!important;
line-height:1.5!important;
}
@media(max-width:640px){
.info-board-inner {
padding:24px 18px!important;
}
}
/* ══════════════════════════════════════════════════════════
✦ ORDER BUTTON + ARTIST ROW FIX
══════════════════════════════════════════════════════════ */
/* Commission order btn — match color with adopt (white) */
}
}
/* Artist row — entire box clickable, not just text */
.lm-artist-row-preview {
cursor: pointer !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 14px !important;
border: 1px solid rgba(120,180,255,.13) !important;
border-radius: 12px !important;
transition: all .18s ease !important;
width: 100% !important;
text-decoration: none !important;
background: transparent !important;
user-select: none !important;
}
.lm-artist-row-preview:hover {
border-color: rgba(127,252,255,.3) !important;
background: rgba(127,252,255,.05) !important;
}
.lm-artist-row-preview:active {
transform: scale(.98) !important;
background: rgba(127,252,255,.08) !important;
}
/* Ensure all children do not intercept clicks */
.lm-artist-row-preview * {
pointer-events: none !important;
}
/* ── Fix status badge shape — override old rule using border-radius: 999px ── */
#preview-status,
#commission-preview-status,
#property-preview-status {
border-radius: 6px !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
padding: 3px 10px !important;
background: unset !important;
}
/* ══════════════════════════════════════════════════════════
✦ V4 FEATURES — NSFW · TIER · RATING · FEATURED · CURSOR
══════════════════════════════════════════════════════════ */
/* ── NSFW card button ──────────────────────────────────── */
.lm-img-wrap {
position: relative;
overflow: hidden;
}
/* nsfw rules consolidated below */
/* ── Featured badge ────────────────────────────────────── */
.lm-featured-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 4;
padding: 3px 9px;
border-radius: 7px;
background: linear-gradient(135deg, rgba(255,217,125,0.2), rgba(167,139,250,0.2));
border: 1px solid rgba(255,217,125,0.45);
color: #ffd97d;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
pointer-events: none;
}
/* ── Rating stars on card ──────────────────────────────── */
.lm-rating-row {
display: flex;
align-items: center;
gap: 2px;
padding: 2px 0 6px;
}
.lm-star {
font-size: 13px;
cursor: pointer;
transition: transform .1s;
line-height: 1;
}
.lm-star.star-filled {
color: #ffd97d;
}
.lm-star.star-empty {
color: rgba(200,220,255,0.15);
}
.lm-star:hover {
transform: scale(1.2);
}
.lm-rating-count {
font-size: 10px;
color: rgba(200,220,255,0.35);
margin-left: 3px;
}
/* ── Rating stars in modal ─────────────────────────────── */
.lm-modal-rating-wrap {
margin: 4px 0 12px;
}
.lm-modal-rating-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(200,220,255,0.3);
margin-bottom: 5px;
}
.lm-modal-stars {
display: flex;
gap: 4px;
margin-bottom: 3px;
}
.lm-star-modal {
font-size: 20px;
cursor: pointer;
color: rgba(200,220,255,0.15);
transition: color .15s, transform .1s;
}
.lm-star-modal.filled {
color: #ffd97d;
}
.lm-star-modal.user-rated {
color: #ffd97d;
filter: drop-shadow(0 0 4px #ffd97d);
}
.lm-star-modal:hover {
color: #ffd97d;
transform: scale(1.15);
}
.lm-modal-rating-avg {
font-size: 11px;
color: rgba(200,220,255,0.4);
}
.lm-modal-rating-avg span {
color: rgba(200,220,255,0.25);
}
/* ── Price tier badge ──────────────────────────────────── */
.lm-tier-badge {
display: inline-block;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
color: #ffd97d;
opacity: 0.75;
margin-left: 4px;
}
/* ── Price tier filter chips ───────────────────────────── */
.lm-tier-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 2px 0;
}
.lm-tier-chip {
padding: 4px 12px;
border-radius: 20px;
border: 1px solid rgba(255,217,125,0.2);
background: transparent;
color: rgba(255,217,125,0.45);
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: all .15s ease;
font-family: inherit;
}
.lm-tier-chip:hover {
border-color: rgba(255,217,125,0.5);
color: #ffd97d;
background: rgba(255,217,125,0.07);
}
.lm-tier-chip.active {
background: rgba(255,217,125,0.15);
border-color: rgba(255,217,125,0.6);
color: #ffd97d;
}
/* ── NSFW global toggle bar ────────────────────────────── */
.lm-nsfw-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
margin-bottom: 10px;
background: rgba(255,80,80,0.04);
border: 1px solid rgba(255,80,80,0.1);
border-radius: 10px;
}
.lm-nsfw-label {
font-size: 11px;
color: rgba(200,220,255,0.4);
font-weight: 600;
letter-spacing: 0.5px;
}
.lm-nsfw-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 8px;
border: 1px solid rgba(255,80,80,0.25);
background: rgba(255,80,80,0.06);
color: rgba(255,140,140,0.6);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all .18s ease;
font-family: inherit;
}
.lm-nsfw-toggle:hover {
border-color: rgba(255,80,80,0.4);
background: rgba(255,80,80,0.1);
color: rgba(255,140,140,0.85);
}
.lm-nsfw-toggle.active {
background: rgba(255,80,80,0.15);
border-color: rgba(255,80,80,0.5);
color: #ff8a8a;
}
.nsfw-eye {
font-size: 14px;
}
/* ── Share button ──────────────────────────────────────── */
.lm-share-btn {
width: 100%;
margin-top: 10px;
padding: 9px 16px;
border-radius: 10px;
border: 1px dashed rgba(127,252,255,0.2);
background: transparent;
color: rgba(127,252,255,0.4);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
transition: all .18s ease;
font-family: inherit;
}
.lm-share-btn:hover {
border-color: rgba(127,252,255,0.45);
color: rgba(127,252,255,0.8);
background: rgba(127,252,255,0.04);
}
/* ── Admin toggle buttons ──────────────────────────────── */
.admin-toggle-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
}
.admin-toggle-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 9px;
border: 1px solid rgba(120,180,255,0.18);
background: rgba(120,180,255,0.04);
color: rgba(200,220,255,0.45);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .18s ease;
font-family: inherit;
}
.admin-toggle-btn .toggle-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(200,220,255,0.2);
transition: background .2s;
}
.admin-toggle-btn.active {
border-color: rgba(127,252,255,0.4);
background: rgba(127,252,255,0.08);
color: rgba(127,252,255,0.85);
}
.admin-toggle-btn.active .toggle-dot {
background: #7ffcff;
box-shadow: 0 0 6px rgba(127,252,255,0.6);
}
.toggle-hint {
font-size: 10px;
color: rgba(200,220,255,0.3);
font-style: italic;
}
/* ── Transaction log table ─────────────────────────────── */
.tx-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
color: rgba(200,220,255,0.7);
}
.tx-table th {
text-align: left;
padding: 10px 12px;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(200,220,255,0.3);
border-bottom: 1px solid rgba(120,180,255,0.1);
}
.tx-table td {
padding: 10px 12px;
border-bottom: 1px solid rgba(120,180,255,0.06);
}
.tx-table tr:hover td {
background: rgba(120,180,255,0.03);
}
.tx-status {
display: inline-block;
padding: 2px 8px;
border-radius: 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border: 1px solid;
}
.tx-status-select {
background: rgba(10,15,30,0.8);
color: rgba(200,220,255,0.6);
border: 1px solid rgba(120,180,255,0.2);
border-radius: 6px;
padding: 4px 8px;
font-size: 11px;
cursor: pointer;
}
/* ── Admin Checkbox style ───────────────────────────────── */
.admin-checkbox-label {
display: flex !important;
align-items: center !important;
gap: 10px;
cursor: pointer;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(120,180,255,0.12);
background: rgba(120,180,255,0.03);
color: rgba(200,220,255,0.45);
font-size: 13px;
font-weight: 500;
user-select: none;
transition: all .18s ease;
margin-bottom: 0 !important;
}
.admin-checkbox-label:hover {
border-color: rgba(127,252,255,0.25);
background: rgba(127,252,255,0.04);
color: rgba(200,220,255,0.7);
}
.admin-checkbox {
width: 20px;
height: 20px;
border-radius: 6px;
border: 2px solid rgba(120,180,255,0.25);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .18s ease;
}
.admin-checkbox.checked {
background: rgba(34,197,94,0.2);
border-color: #22c55e;
box-shadow: 0 0 8px rgba(34,197,94,0.3);
}
.admin-checkbox.checked::after {
content: '✓';
font-size: 12px;
font-weight: 800;
color: #22c55e;
}
.admin-checkbox-label:has(.admin-checkbox.checked) {
border-color: rgba(34,197,94,0.25);
background: rgba(34,197,94,0.04);
color: rgba(200,220,255,0.75);
}
/* ── Field info tooltip ─────────────────────────────────── */
.field-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid rgba(127,252,255,0.3);
background: rgba(127,252,255,0.06);
color: rgba(127,252,255,0.6);
font-size: 9px;
font-weight: 800;
cursor: pointer;
margin-left: 5px;
position: relative;
vertical-align: middle;
font-style: normal;
transition: all .15s ease;
user-select: none;
}
.field-info:hover {
background: rgba(127,252,255,0.15);
border-color: rgba(127,252,255,0.6);
color: #7ffcff;
}
/* Tooltip bubble */
.field-info::after {
content: attr(data-tip);
position: fixed;
bottom: auto;
top: auto;
left: 50%;
transform: translateX(-50%);
background: rgba(8,12,28,0.96);
border: 1px solid rgba(127,252,255,0.2);
color: rgba(200,220,255,0.85);
font-size: 11px;
font-weight: 400;
line-height: 1.5;
padding: 8px 12px;
border-radius: 9px;
width: max-content;
max-width: min(220px, 85vw);
text-align: left;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
pointer-events: none;
opacity: 0;
transition: opacity .15s ease;
z-index: 99999;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
/* Arrow */
.field-info::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: rgba(127,252,255,0.2);
pointer-events: none;
opacity: 0;
transition: opacity .15s ease;
z-index: 9999;
}
/* Show on hover (PC) */
.field-info:hover::after,
.field-info:hover::before {
opacity: 1;
}
/* Show on click (mobile) — toggle via JS */
.field-info.tip-open::after,
.field-info.tip-open::before {
opacity: 1;
}
/* ── Priority timer badge ───────────────────────────────── */
.badge-timer {
font-size: 8px;
font-weight: 700;
background: rgba(255,217,125,0.15);
border: 1px solid rgba(255,217,125,0.3);
border-radius: 4px;
padding: 1px 4px;
margin-left: 4px;
letter-spacing: 0.5px;
color: #ffd97d;
}
/* ── Priority badge in admin table ─────────────────────── */
.priority-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
white-space: nowrap;
}
.priority-badge.active {
color: #ffd97d;
background: rgba(255,217,125,0.12);
border: 1px solid rgba(255,217,125,0.35);
}
.priority-badge.permanent {
color: #a78bfa;
background: rgba(167,139,250,0.1);
border: 1px solid rgba(167,139,250,0.3);
}
.priority-expired {
display: inline-block;
padding: 3px 9px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
color: rgba(239,68,68,0.6);
background: rgba(239,68,68,0.07);
border: 1px solid rgba(239,68,68,0.2);
}
.priority-none {
color: rgba(200,220,255,0.2);
font-size: 13px;
}
/* ── Sort bar fix — button right + box style ────────────── */
.lm-sort-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.lm-sort-right {
margin-left: auto;
}
.lm-sort-btn.lm-sort-price {
padding: 7px 16px !important;
border-radius: 8px !important;
border: 1px solid rgba(127,252,255,0.2) !important;
background: rgba(127,252,255,0.04) !important;
color: rgba(200,220,255,0.55) !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer;
transition: all .18s ease !important;
font-family: inherit !important;
display: flex;
align-items: center;
gap: 5px;
}
.lm-sort-btn.lm-sort-price:hover {
border-color: rgba(127,252,255,0.4) !important;
color: rgba(200,220,255,0.85) !important;
background: rgba(127,252,255,0.08) !important;
}
.lm-sort-btn.lm-sort-price.active {
border-color: rgba(127,252,255,0.6) !important;
color: #7ffcff !important;
background: rgba(127,252,255,0.12) !important;
}
/* ══════════════════════════════════════════════
HOVER CARD — zoom photo + shadow lift
(GPU-accelerated, no lag)
══════════════════════════════════════════════ */
.lm-card, .product-card {
transition: transform .25s cubic-bezier(.22,.68,0,1.2),
box-shadow .25s ease;
will-change: transform;
}
.lm-card:hover, .product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(127,252,255,0.12),
0 4px 16px rgba(0,0,0,0.4);
}
.lm-card .lm-img, .product-card .lm-img {
transition: transform .35s cubic-bezier(.22,.68,0,1.2);
}
.lm-card:hover .lm-img, .product-card:hover .lm-img {
transform: scale(1.06);
}
/* ══════════════════════════════════════════════
SKELETON LOADING
══════════════════════════════════════════════ */
.lm-skeleton-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 8px 0;
}
@media (max-width: 768px) {
.lm-skeleton-grid {
grid-template-columns: 1fr;
}
}
.lm-skeleton-card {
background: rgba(255,255,255,0.04);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
}
.lm-skeleton-img {
width: 100%;
aspect-ratio: 1;
background: linear-gradient(90deg,
rgba(255,255,255,0.04) 25%,
rgba(127,252,255,0.06) 50%,
rgba(255,255,255,0.04) 75%);
background-size: 200% 100%;
animation: lmShimmer 1.6s ease-in-out infinite;
}
.lm-skeleton-body {
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.lm-skeleton-line {
border-radius: 6px;
background: linear-gradient(90deg,
rgba(255,255,255,0.04) 25%,
rgba(127,252,255,0.06) 50%,
rgba(255,255,255,0.04) 75%);
background-size: 200% 100%;
animation: lmShimmer 1.6s ease-in-out infinite;
}
.lm-skeleton-line.title {
height: 18px;
width: 70%;
}
.lm-skeleton-line.sub {
height: 13px;
width: 45%;
animation-delay: .1s;
}
.lm-skeleton-line.price {
height: 22px;
width: 30%;
animation-delay: .2s;
}
@keyframes lmShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ══════════════════════════════════════════════
EMPTY STATE
══════════════════════════════════════════════ */
.lm-empty-state {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
gap: 14px;
text-align: center;
}
.lm-empty-icon {
font-size: 48px;
opacity: 0.4;
animation: lmFloat 3s ease-in-out infinite;
}
.lm-empty-title {
font-size: 17px;
font-weight: 700;
color: rgba(255,255,255,0.6);
letter-spacing: .5px;
}
.lm-empty-sub {
font-size: 13px;
color: rgba(255,255,255,0.3);
}
.lm-empty-reset {
margin-top: 6px;
padding: 9px 22px;
background: rgba(127,252,255,0.08);
border: 1px solid rgba(127,252,255,0.25);
border-radius: 20px;
color: #7ffcff;
font-size: 13px;
cursor: pointer;
transition: all .2s ease;
}
.lm-empty-reset:hover {
background: rgba(127,252,255,0.15);
border-color: rgba(127,252,255,0.5);
}
@keyframes lmFloat {
0%,100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* ══════════════════════════════════════════════
SCROLL TO TOP BUTTON
══════════════════════════════════════════════ */
#lmScrollTop {
position: fixed;
bottom: 28px;
right: 24px;
z-index: 999;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(10,8,25,0.85);
border: 1px solid rgba(127,252,255,0.3);
color: #7ffcff;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(127,252,255,0.15);
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity .3s ease, transform .3s ease;
}
#lmScrollTop.visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
#lmScrollTop:hover {
background: rgba(127,252,255,0.12);
border-color: rgba(127,252,255,0.6);
box-shadow: 0 4px 24px rgba(127,252,255,0.25);
}
/* ══════════════════════════════════════════════
TOS CHECKBOX + ORDER BUTTON FIX
══════════════════════════════════════════════ */
.lm-tos-wrap {
margin: 12px 0 8px;
padding: 10px 14px;
background: rgba(127,252,255,0.04);
border: 1px solid rgba(127,252,255,0.1);
border-radius: 10px;
}
.lm-tos-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: rgba(255,255,255,0.55);
line-height: 1.5;
}
.lm-tos-label input[type="checkbox"] {
margin-top: 2px;
accent-color: #7ffcff;
width: 15px;
height: 15px;
flex-shrink: 0;
cursor: pointer;
}
.lm-tos-link {
color: #7ffcff;
text-decoration: underline;
cursor: pointer;
font-weight: 600;
}
.lm-tos-link:hover {
color: #a78bfa;
}
/* Order button — blue text but visible */
/* TOS Modal */
.lm-tos-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.lm-tos-modal {
background: #0d1535;
border: 1px solid rgba(127,252,255,0.15);
border-radius: 16px;
padding: 28px;
max-width: 480px;
width: 100%;
max-height: 80vh;
display: flex;
flex-direction: column;
gap: 16px;
}
.lm-tos-modal h3 {
color: #7ffcff;
font-size: 16px;
font-weight: 700;
}
.lm-tos-modal-body {
overflow-y: auto;
flex: 1;
color: rgba(255,255,255,0.65);
font-size: 13px;
line-height: 1.7;
white-space: pre-wrap;
}
.lm-tos-modal-close {
align-self: flex-end;
padding: 8px 20px;
background: rgba(127,252,255,0.1);
border: 1px solid rgba(127,252,255,0.25);
border-radius: 8px;
color: #7ffcff;
font-size: 13px;
cursor: pointer;
transition: all .2s ease;
}
.lm-tos-modal-close:hover {
background: rgba(127,252,255,0.2);
}
/* ══════════════════════════════════════════════
SITE-WIDE T&C POPUP
══════════════════════════════════════════════ */
#lm-site-tos-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(4,6,18,0.92);
backdrop-filter: blur(16px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.lm-site-tos-box {
width: 100%;
max-width: 440px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(127,252,255,0.15);
border-radius: 20px;
padding: 36px 28px;
box-shadow: 0 8px 48px rgba(0,0,0,0.6), 0 0 80px rgba(127,252,255,0.05);
}
.lm-site-tos-icon {
text-align: center;
font-size: 40px;
margin-bottom: 12px;
}
.lm-site-tos-title {
text-align: center;
font-size: 22px;
font-weight: 800;
color: white;
margin-bottom: 6px;
}
.lm-site-tos-title span {
color: #7ffcff;
}
.lm-site-tos-sub {
text-align: center;
font-size: 13px;
color: rgba(255,255,255,0.4);
margin-bottom: 20px;
}
.lm-site-tos-body {
background: rgba(0,0,0,0.2);
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
max-height: 200px;
overflow-y: auto;
border: 1px solid rgba(255,255,255,0.06);
scrollbar-width: thin;
scrollbar-color: rgba(127,252,255,0.2) transparent;
}
.lm-site-tos-body p {
font-size: 13px;
color: rgba(255,255,255,0.55);
margin-bottom: 10px;
line-height: 1.6;
}
.lm-site-tos-body p:last-child {
margin-bottom: 0;
}
.lm-site-tos-check {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 18px;
cursor: pointer;
}
.lm-site-tos-check input {
margin-top: 3px;
accent-color: #7ffcff;
flex-shrink: 0;
}
.lm-site-tos-check span {
font-size: 13px;
color: rgba(255,255,255,0.6);
line-height: 1.5;
}
.lm-site-tos-btn {
width: 100%;
padding: 13px;
background: linear-gradient(135deg, rgba(127,252,255,0.12), rgba(167,139,250,0.12));
border: 1px solid rgba(127,252,255,0.3);
border-radius: 12px;
color: #7ffcff;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all .2s ease;
}
.lm-site-tos-btn:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(127,252,255,0.22), rgba(167,139,250,0.22));
box-shadow: 0 4px 20px rgba(127,252,255,0.2);
}
.lm-site-tos-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
══════════════════════════════════════════════ */
}
}
}
}
}
}
}
}
}
}
═══════════════════════════════════════ */
}
}
}
/* ═══════════════════════════════════════
NSFW GATE — confirmation popup
═══════════════════════════════════════ */
#lm-nsfw-gate {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(4,4,16,0.75);
backdrop-filter: blur(18px);
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
#lm-nsfw-gate.visible {
opacity: 1;
pointer-events: all;
}
.lm-nsfw-gate-box {
width: 100%;
max-width: 360px;
background: linear-gradient(145deg, rgba(30,10,30,0.95), rgba(10,6,20,0.98));
border: 1px solid rgba(255,80,120,0.25);
border-radius: 20px;
padding: 32px 28px;
text-align: center;
box-shadow:
0 0 0 1px rgba(255,80,120,0.08),
0 24px 60px rgba(0,0,0,0.7),
0 0 80px rgba(255,80,120,0.06);
transform: scale(0.88) translateY(16px);
transition: transform .35s cubic-bezier(.34,1.3,.64,1);
}
#lm-nsfw-gate.visible .lm-nsfw-gate-box {
transform: scale(1) translateY(0);
}
.lm-nsfw-gate-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255,80,120,0.1);
border: 1.5px solid rgba(255,80,120,0.3);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
box-shadow: 0 0 24px rgba(255,80,120,0.15);
}
.lm-nsfw-gate-icon i {
font-size: 26px;
color: #ff5078;
}
.lm-nsfw-gate-title {
font-size: 20px;
font-weight: 800;
color: white;
margin-bottom: 10px;
letter-spacing: -0.3px;
}
.lm-nsfw-gate-desc {
font-size: 13px;
color: rgba(255,255,255,0.45);
line-height: 1.7;
margin-bottom: 24px;
}
.lm-nsfw-gate-desc strong {
color: #ff5078;
font-weight: 700;
}
.lm-nsfw-gate-actions {
display: flex;
gap: 10px;
}
.lm-nsfw-gate-cancel,
.lm-nsfw-gate-agree {
flex: 1;
padding: 12px;
border-radius: 12px;
border: none;
font-size: 13px;
font-weight: 700;
letter-spacing: .5px;
cursor: pointer;
transition: all .2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.lm-nsfw-gate-cancel {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.45);
}
.lm-nsfw-gate-cancel:hover {
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
}
.lm-nsfw-gate-agree {
background: rgba(255,80,120,0.12);
border: 1px solid rgba(255,80,120,0.35);
color: #ff5078;
}
.lm-nsfw-gate-agree:hover {
background: rgba(255,80,120,0.22);
border-color: #ff5078;
box-shadow: 0 0 20px rgba(255,80,120,0.2);
}
/* ═══════════════════════════════════════
NSFW CARD BUTTON — icon fix
═══════════════════════════════════════ */
/* ═══════════════════════════════════════
CHIP ADD BUTTON — 3D white
═══════════════════════════════════════ */
.chip-add-btn {
padding: 0 18px !important;
border-radius: 0 10px 10px 0 !important;
border: 1px solid rgba(120,180,255,0.3) !important;
border-left: none !important;
background: rgba(20,30,60,0.6) !important;
color: rgba(180,210,255,0.9) !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
white-space: nowrap !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
align-self: stretch !important;
height: auto !important;
transition: all .18s ease !important;
box-shadow: none !important;
}
.chip-add-btn:hover {
background: rgba(120,180,255,0.12) !important;
border-color: rgba(120,180,255,0.5) !important;
transform: none !important;
box-shadow: none !important;
}
.chip-add-btn:active {
background: rgba(120,180,255,0.2) !important;
transform: none !important;
box-shadow: none !important;
}
.artist-add-btn {
border-color: rgba(167,139,250,0.35) !important;
color: #c4b5fd !important;
}
.artist-add-btn:hover {
background: rgba(167,139,250,0.15) !important;
border-color: rgba(167,139,250,0.6) !important;
}
.tags-add-btn {
border-color: rgba(127,252,255,0.3) !important;
color: #7ffcff !important;
}
.tags-add-btn:hover {
background: rgba(127,252,255,0.1) !important;
border-color: rgba(127,252,255,0.55) !important;
}
/* ═══════════════════════════════════════
NSFW CARD — definitive
═══════════════════════════════════════ */
.lm-img-wrap {
position: relative;
}
.nsfw-card-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 20;
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid rgba(239,68,68,0.5);
background: rgba(8,6,18,0.82);
color: #ff8a8a;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
transition: all .15s ease;
font-size: 13px;
pointer-events: all;
}
.nsfw-card-btn i {
color: #ff8a8a;
pointer-events: none;
}
.nsfw-card-btn:hover {
background: rgba(239,68,68,0.22);
border-color: rgba(239,68,68,0.7);
}
.nsfw-overlay {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(8,6,18,0.5);
backdrop-filter: blur(2px);
gap: 6px;
pointer-events: none;
}
.nsfw-overlay.hidden {
display: none !important;
}
.nsfw-overlay i {
font-size: 22px;
color: rgba(255,120,120,0.7);
}
.nsfw-overlay span {
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,140,140,0.8);
}
.nsfw-blurred {
filter: blur(16px) !important;
transform: scale(1.05);
transition: filter .3s ease, transform .3s ease !important;
}
.lm-img:not(.nsfw-blurred) {
transition: filter .3s ease, transform .3s ease !important;
}
/* ═══════════════════════════════════════
PRICE + PAYMENT — new styling
═══════════════════════════════════════ */
.lm-modal-price {
color: #ffffff !important;
font-size: 28px !important;
font-weight: 800 !important;
}
.lm-modal-payment {
font-size: 13px !important;
color: rgba(255,255,255,0.85) !important;
}
.lm-modal-payment::before {
content: attr(data-label);
color: rgba(255,255,255,0.3) !important;
font-size: 12px;
}
/* ═══════════════════════════════════════
SHARE TOOLTIP
═══════════════════════════════════════ */
.lm-share-tooltip-wrap {
position: relative;
flex-shrink: 0;
}
.lm-share-tooltip {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
background: rgba(8,6,20,0.95);
border: 1px solid rgba(127,252,255,0.2);
color: #7ffcff;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
padding: 6px 10px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease;
backdrop-filter: blur(8px);
}
.lm-share-tooltip::after {
content: '';
position: absolute;
top: 100%;
right: 14px;
border: 5px solid transparent;
border-top-color: rgba(127,252,255,0.2);
}
.lm-share-tooltip-wrap:hover .lm-share-tooltip {
opacity: 1;
transform: translateY(0);
}
.lm-payment-lbl {
color: rgba(255,255,255,0.3) !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.lm-payment-val {
color: #ffffff !important;
font-size: 13px !important;
font-weight: 600 !important;
}
/* action bar height fix */
.lm-modal-action-bar {
align-items: stretch !important;
}
.lm-share-tooltip-wrap {
display: flex !important;
flex-shrink: 0 !important;
}
.lm-modal-share-icon-btn {
width: 52px !important;
height: 100% !important;
min-height: 46px !important;
align-self: stretch !important;
}
.lm-filter-chip,
.filter-chip,
.lm-artist-chip,
.lm-tag-chip {
margin: 3px !important;
}
.lm-chips-wrap,
.chips-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 6px 0 !important;
}
/* ═══════════════════════════════════════════
ACTION BAR + SHARE BTN — definitive
═══════════════════════════════════════════ */
.lm-modal-action-bar {
display: flex;
gap: 10px;
align-items: stretch;
}
.lm-share-tooltip-wrap {
position: relative;
display: flex;
align-self: stretch;
flex-shrink: 0;
}
.lm-modal-share-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
padding: 0;
flex: 0 0 52px;
border-radius: 4px;
border: 2px solid #1a3a5c;
background: linear-gradient(180deg, #f7faff, #d7e7ff);
color: #0891b2;
cursor: pointer;
box-shadow: 0 4px 0 #0f2d4a;
transition: all .18s ease;
}
.lm-modal-share-icon-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 #0f2d4a;
}
.lm-modal-share-icon-btn:active {
transform: translateY(3px);
box-shadow: 0 1px 0 #0f2d4a;
}
.lm-share-tooltip {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
background: rgba(8,6,20,0.95);
border: 1px solid rgba(127,252,255,0.2);
color: #7ffcff;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
padding: 6px 10px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease;
}
.lm-share-tooltip::after {
content: '';
position: absolute;
top: 100%;
right: 14px;
border: 5px solid transparent;
border-top-color: rgba(127,252,255,0.2);
}
.lm-share-tooltip-wrap:hover .lm-share-tooltip {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════
FILTER CHIPS — definitive
═══════════════════════════════════════════ */
.filter-section {
margin-bottom: 12px !important;
}
.filter-section:last-child {
margin-bottom: 0 !important;
}
.filter-section-label {
margin-bottom: 6px !important;
}
.chip-container {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
min-height: 0 !important;
padding: 0 !important;
}
/* ═══════════════════════════════════════════════
PREVIEW MODAL — full rework
═══════════════════════════════════════════════ */
/* Container */
.lm-modal-container {
border-radius: 20px !important;
border: 1px solid rgba(127,252,255,0.1) !important;
background: #0b1020 !important;
box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(127,252,255,0.05) !important;
}
/* Image */
.lm-modal-image {
border-radius: 0 !important;
display: block !important;
width: 100% !important;
}
.lm-modal-image-section {
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
/* Status */
.lm-modal-status.available,
.lm-modal-status.open {
background: rgba(52,211,153,0.1) !important;
border: 1px solid rgba(52,211,153,0.3) !important;
color: #34d399 !important;
}
.lm-modal-status.close,
.lm-modal-status.closed,
.lm-modal-status.owned {
background: rgba(255,100,100,0.1) !important;
border: 1px solid rgba(255,100,100,0.25) !important;
color: rgba(255,120,120,0.8) !important;
}
/* Title */
.lm-modal-title {
font-size: 26px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
color: white !important;
margin: 2px 0 1px 0 !important;
}
/* Divider */
.lm-modal-divider {
height: 1px !important;
background: linear-gradient(90deg, rgba(127,252,255,0.2), transparent) !important;
margin: 6px 0 14px 0 !important;
border: none !important;
}
/* Desc */
.lm-modal-desc {
font-size: 13px !important;
color: rgba(255,255,255,0.45) !important;
line-height: 1.75 !important;
}
/* Detail grid */
.lm-modal-details-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.lm-modal-detail-item {
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 10px !important;
padding: 9px 12px !important;
}
.lm-modal-detail-label {
display: block !important;
font-size: 9px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.3) !important;
margin-bottom: 3px !important;
}
.lm-modal-detail-value {
font-size: 13px !important;
font-weight: 600 !important;
color: white !important;
}
/* Lore box */
.lm-modal-box {
background: rgba(167,139,250,0.04) !important;
border: 1px solid rgba(167,139,250,0.12) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
}
.lm-modal-box h4 {
font-size: 9px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: rgba(167,139,250,0.6) !important;
font-weight: 700 !important;
margin-bottom: 6px !important;
}
.lm-modal-box p {
font-size: 12px !important;
color: rgba(255,255,255,0.4) !important;
line-height: 1.7 !important;
}
/* Tags */
.lm-modal-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.lm-modal-tag {
padding: 4px 10px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 500 !important;
background: rgba(127,252,255,0.07) !important;
border: 1px solid rgba(127,252,255,0.18) !important;
color: #7ffcff !important;
}
/* Artist */
.lm-modal-artist {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 14px !important;
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(255,255,255,0.06) !important;
border-radius: 12px !important;
cursor: pointer !important;
}
/* Price block */
.lm-modal-price-block {
background: rgba(127,252,255,0.04) !important;
border: 1px solid rgba(127,252,255,0.1) !important;
border-radius: 12px !important;
padding: 12px 16px !important;
}
.lm-modal-price-label {
display: block !important;
font-size: 9px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.3) !important;
margin-bottom: 3px !important;
}
.lm-modal-price {
display: block !important;
font-size: 28px !important;
font-weight: 800 !important;
color: white !important;
line-height: 1.1 !important;
}
/* Stacked action buttons */
.lm-preview-actions {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.lm-preview-share-btn {
width: 100% !important;
padding: 11px !important;
border-radius: 4px !important;
border: 1px solid rgba(127,252,255,0.18) !important;
background: transparent !important;
color: rgba(127,252,255,0.55) !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
transition: all .2s ease !important;
}
.lm-preview-share-btn:hover {
background: rgba(127,252,255,0.06) !important;
border-color: rgba(127,252,255,0.35) !important;
color: #7ffcff !important;
}
/* Info section spacing */
.lm-modal-info {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
padding: 20px !important;
}
/* Push status+title+artist block down toward divider */
.lm-modal-status {
display: inline-flex !important;
align-items: center !important;
padding: 3px 10px !important;
border-radius: 999px !important;
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
width: fit-content !important;
margin-bottom: 4px !important;
}.lm-modal-section-lbl {
font-size: 9px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: rgba(127,252,255,0.5) !important;
font-weight: 700 !important;
margin-bottom: -4px !important;
}
/* ══════════════════════════════════════════════
CHIP STAGGER DELAY
══════════════════════════════════════════════ */
.chip-container .chip:nth-child(1) { animation-delay: 0ms; }
.chip-container .chip:nth-child(2) { animation-delay: 50ms; }
.chip-container .chip:nth-child(3) { animation-delay: 100ms; }
.chip-container .chip:nth-child(4) { animation-delay: 150ms; }
.chip-container .chip:nth-child(5) { animation-delay: 200ms; }
.chip-container .chip:nth-child(6) { animation-delay: 250ms; }
.chip-container .chip:nth-child(7) { animation-delay: 300ms; }
.chip-container .chip:nth-child(8) { animation-delay: 350ms; }
.chip-container .chip:nth-child(9) { animation-delay: 400ms; }
.chip-container .chip:nth-child(10) { animation-delay: 450ms; }
.chip-container .chip:nth-child(n+11) { animation-delay: 500ms; }
#artistChips .lm-chip:nth-child(1) { animation-delay: 0ms; }
#artistChips .lm-chip:nth-child(2) { animation-delay: 55ms; }
#artistChips .lm-chip:nth-child(3) { animation-delay: 110ms; }
#artistChips .lm-chip:nth-child(4) { animation-delay: 165ms; }
#artistChips .lm-chip:nth-child(5) { animation-delay: 220ms; }
#artistChips .lm-chip:nth-child(n+6){ animation-delay: 275ms; }
#tagChips .lm-chip:nth-child(1) { animation-delay: 0ms; }
#tagChips .lm-chip:nth-child(2) { animation-delay: 45ms; }
#tagChips .lm-chip:nth-child(3) { animation-delay: 90ms; }
#tagChips .lm-chip:nth-child(4) { animation-delay: 135ms; }
#tagChips .lm-chip:nth-child(5) { animation-delay: 180ms; }
#tagChips .lm-chip:nth-child(6) { animation-delay: 225ms; }
#tagChips .lm-chip:nth-child(7) { animation-delay: 270ms; }
#tagChips .lm-chip:nth-child(n+8){ animation-delay: 315ms; }
/* ── Admin chip input row — same as image-url-row ── */
.chip-input-row {
display: flex !important;
gap: 10px !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.chip-input-row input {
flex: 1 !important;
min-width: 0 !important;
width: 0 !important;
border-radius: 10px !important;
border-right: 1px solid rgba(120, 180, 255, 0.2) !important;
}
/* ═══════════════════════════════════════════════
ORDER FORM MODAL
═══════════════════════════════════════════════ */
.lm-order-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,10,0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
transition: opacity .2s;
}
.lm-order-overlay.hidden { display: none; }
.lm-order-box {
background: linear-gradient(135deg, rgba(12,18,45,0.98), rgba(8,12,30,0.98));
border: 1px solid rgba(120,180,255,0.15);
border-radius: 18px;
width: 100%;
max-width: 460px;
box-shadow: 0 28px 70px rgba(0,0,0,0.55);
animation: lmOrderIn .22s cubic-bezier(.34,1.56,.64,1);
overflow: hidden;
}
@keyframes lmOrderIn {
from { transform: scale(0.9) translateY(16px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
}
.lm-order-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(120,180,255,0.1);
background: rgba(120,180,255,0.03);
}
.lm-order-header-left {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: rgba(220,235,255,0.95);
}
.lm-order-header-left i { color: #6fffd2; font-size: 14px; }
.lm-order-close {
background: none;
border: none;
color: rgba(160,190,255,0.4);
font-size: 15px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: all .18s;
}
.lm-order-close:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.lm-order-product-info {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid rgba(120,180,255,0.07);
background: rgba(120,180,255,0.02);
}
.lm-order-product-thumb {
width: 48px;
height: 48px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid rgba(120,180,255,0.15);
}
.lm-order-product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lm-order-product-title {
font-size: 14px;
font-weight: 600;
color: rgba(220,235,255,0.9);
margin-bottom: 3px;
}
.lm-order-product-artist {
font-size: 12px;
color: rgba(111,255,210,0.7);
}
.lm-order-body {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 13px;
}
.lm-order-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.lm-order-field label {
font-size: 11px;
font-weight: 600;
color: rgba(160,190,255,0.55);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.lm-order-req { color: #ef4444; }
.lm-order-field input,
.lm-order-field textarea {
width: 100%;
padding: 10px 13px;
background: rgba(20,30,60,0.5);
border: 1px solid rgba(120,180,255,0.18);
border-radius: 10px;
color: #fff;
font-size: 13px;
font-family: 'Outfit', sans-serif;
outline: none;
transition: border-color .18s;
box-sizing: border-box;
}
.lm-order-field input:focus,
.lm-order-field textarea:focus { border-color: rgba(111,255,210,0.4); }
.lm-order-field textarea { resize: none; }
.lm-order-generate {
margin: 0 20px 16px;
padding: 14px;
background: rgba(111,255,210,0.05);
border: 1px solid rgba(111,255,210,0.18);
border-radius: 12px;
}
.lm-order-template-label {
font-size: 11px;
font-weight: 600;
color: rgba(111,255,210,0.6);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.lm-order-template-text {
font-size: 13px;
color: rgba(220,235,255,0.85);
line-height: 1.6;
margin-bottom: 12px;
font-style: italic;
}
.lm-order-copy-btn {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
background: rgba(111,255,210,0.12);
border: 1px solid rgba(111,255,210,0.3);
border-radius: 8px;
color: #6fffd2;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .18s;
width: 100%;
justify-content: center;
}
.lm-order-copy-btn:hover {
background: rgba(111,255,210,0.22);
border-color: rgba(111,255,210,0.5);
}
.lm-order-footer {
display: flex;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid rgba(120,180,255,0.08);
}
.lm-order-btn-cancel {
flex: 1;
padding: 10px;
background: rgba(120,180,255,0.06);
border: 1px solid rgba(120,180,255,0.18);
border-radius: 10px;
color: rgba(160,190,255,0.6);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .18s;
font-family: 'Outfit', sans-serif;
}
.lm-order-btn-cancel:hover { background: rgba(120,180,255,0.12); }
.lm-order-btn-submit {
flex: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
background: rgba(111,255,210,0.12);
border: 1px solid rgba(111,255,210,0.3);
border-radius: 10px;
color: #6fffd2;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all .18s;
font-family: 'Outfit', sans-serif;
}
.lm-order-btn-submit:hover {
background: rgba(111,255,210,0.22);
border-color: rgba(111,255,210,0.5);
}
.lm-order-btn-submit:disabled,
.lm-order-btn-submit.lm-btn-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* TOS Checkbox */
.lm-order-tos-check {
margin-top: 14px;
padding: 12px 14px;
background: rgba(127, 252, 255, 0.04);
border: 1px solid rgba(127, 252, 255, 0.15);
border-radius: 10px;
}
.lm-tos-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: rgba(180, 200, 255, 0.8);
line-height: 1.5;
}
.lm-tos-label input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink: 0;
accent-color: #6fffd2;
cursor: pointer;
}
.lm-tos-link {
color: #6fffd2;
text-decoration: underline;
cursor: pointer;
}
.lm-tos-link:hover { color: #a0fff0; }
/* Order modal — action row */
.lm-order-action-row {
display: flex;
gap: 8px;
}
.lm-order-action-row .lm-order-copy-btn {
flex: 1;
}
.lm-order-link-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 8px 16px;
background: rgba(155,140,255,0.12);
border: 1px solid rgba(155,140,255,0.3);
border-radius: 8px;
color: #9b8cff;
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: all .18s;
}
.lm-order-link-btn:hover {
background: rgba(155,140,255,0.22);
border-color: rgba(155,140,255,0.5);
}
/* ── Order modal post-generate footer ── */
.lm-order-footer-post {
display: flex;
gap: 8px;
}
.lm-order-btn-order {
flex: 1;
padding: 12px 16px;
background: linear-gradient(135deg, rgba(127,252,255,0.15), rgba(167,139,250,0.15));
border: 1px solid rgba(127,252,255,0.3);
border-radius: 14px;
color: white;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
text-shadow: 0 0 12px rgba(127,252,255,0.4);
}
.lm-order-btn-order:hover {
background: linear-gradient(135deg, rgba(127,252,255,0.22), rgba(167,139,250,0.22));
border-color: rgba(127,252,255,0.5);
box-shadow: 0 4px 20px rgba(127,252,255,0.15);
transform: translateY(-1px);
}
.lm-order-copy-btn {
flex: 1;
padding: 12px 16px;
background: rgba(120,140,180,0.1);
border: 1px solid rgba(120,180,255,0.15);
border-radius: 14px;
color: rgba(180,200,255,0.8);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.lm-order-copy-btn:hover {
background: rgba(127,252,255,0.08);
border-color: rgba(127,252,255,0.25);
color: #7ffcff;
}
/* Cancel button in pending table */
.tx-tbl-cancel {
background: rgba(239,68,68,0.08) !important;
border-color: rgba(239,68,68,0.25) !important;
color: rgba(239,68,68,0.8) !important;
}
.tx-tbl-cancel:hover {
background: rgba(239,68,68,0.15) !important;
color: #ef4444 !important;
}
/* ════════════════════════════════════
MARKET HEADER WITH CURRENCY
════════════════════════════════════ */
.lm-market-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
height: 60px;
position: sticky;
top: 0;
z-index: 100;
background: rgba(4,6,18,0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(127,252,255,0.07);
}
.lm-header-right {
display: flex;
align-items: center;
gap: 10px;
}
.lm-back-btn {
color: rgba(180,200,255,0.6);
text-decoration: none;
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
border-radius: 10px;
border: 1px solid rgba(120,180,255,0.15);
background: rgba(120,140,180,0.06);
transition: all 0.2s;
white-space: nowrap;
}
.lm-back-btn:hover {
color: #7ffcff;
border-color: rgba(127,252,255,0.3);
background: rgba(127,252,255,0.06);
}
/* Currency selector in header */
.lm-currency-slot select,
.lm-currency-select {
background: rgba(127,252,255,0.04);
border: 1px solid rgba(127,252,255,0.15);
border-radius: 10px;
padding: 6px 10px;
color: rgba(200,230,255,0.75);
font-size: 12px;
font-weight: 600;
outline: none;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
letter-spacing: 0.3px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(127,252,255,0.4)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 24px;
}
.lm-currency-slot select:hover,
.lm-currency-select:hover {
border-color: rgba(127,252,255,0.35);
color: #7ffcff;
background-color: rgba(127,252,255,0.07);
}
.lm-currency-slot select:focus,
.lm-currency-select:focus {
border-color: rgba(127,252,255,0.4);
box-shadow: 0 0 0 3px rgba(127,252,255,0.07);
}
.lm-currency-slot select option,
.lm-currency-select option {
background: #0d1235;
color: white;
}
/* ════════════════════════════════════════════════════════
INFO BOARD + FILTER BOX — FINAL OVERRIDE
════════════════════════════════════════════════════════ */
.info-board {
max-width: 580px;
margin: 16px auto 72px;
padding: 0 20px;
}
.info-board-inner {
background: rgba(10,16,36,0.65);
border: 1px solid rgba(120,180,255,0.13);
border-radius: 18px;
padding: 28px 28px 24px;
backdrop-filter: blur(14px);
box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}
.info-board-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(120,180,255,0.10);
}
.info-board-icon { font-size: 16px; color: #7ffcff; opacity: 0.85; }
.info-board-title {
font-size: 14px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(200,230,255,0.7);
margin: 0;
}
.info-board-items { display: flex; flex-direction: column; gap: 14px; }
.info-board-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(120,180,255,0.08);
border-radius: 12px;
transition: border-color 0.2s, background 0.2s;
}
.info-board-item:hover {
background: rgba(127,252,255,0.04);
border-color: rgba(127,252,255,0.15);
}
.info-item-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(127,252,255,0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #7ffcff;
font-size: 13px;
}
.info-item-body strong {
display: block;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.88);
margin-bottom: 3px;
}
.info-item-body p {
margin: 0;
font-size: 12px;
color: rgba(200,220,255,0.5);
line-height: 1.55;
}
/* override all old step styles to hidden since HTML changed */
.info-board-steps, .info-step, .info-step-num, .info-step-text { display: none !important; }
/* ── Search & Filter Box OVERRIDE ── */
.search-filter-box {
background: rgba(8,13,30,0.75) !important;
border: 1px solid rgba(120,180,255,0.12) !important;
border-radius: 16px !important;
padding: 18px 20px 16px !important;
margin: 0 auto 24px !important;
max-width: 820px !important;
backdrop-filter: blur(16px) !important;
box-shadow: 0 6px 32px rgba(0,0,0,0.32) !important;
}
.search-input-wrap { position: relative; margin-bottom: 16px !important; }
.search-filter-box #marketSearch {
width: 100% !important;
padding: 11px 16px 11px 40px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(120,180,255,0.16) !important;
border-radius: 10px !important;
font-size: 13.5px !important;
transition: border-color 0.2s, background 0.2s !important;
box-sizing: border-box !important;
}
.search-filter-box #marketSearch:focus {
border-color: rgba(127,252,255,0.4) !important;
background: rgba(255,255,255,0.06) !important;
outline: none !important;
}
.filter-section { margin-bottom: 14px !important; }
.filter-section:last-child { margin-bottom: 0 !important; }
.filter-section-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
color: rgba(127,252,255,0.5) !important;
margin-bottom: 9px !important;
}
.chip-container { gap: 7px !important; min-height: 28px !important; }
.filter-divider {
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(120,180,255,0.10) 30%, rgba(120,180,255,0.10) 70%, transparent) !important;
margin: 14px 0 !important;
}
@media (max-width: 600px) {
.info-board-inner { padding: 20px 16px 18px !important; }
.info-board-item { padding: 12px 13px; gap: 11px; }
.search-filter-box { padding: 14px 14px 12px !important; }
}