/* ==========================================================
   XectShop theme: dark game-UI style
   Change colors from the variables below.
   ========================================================== */
:root {
    --bg:          #0b0b0d;
    --bg-2:        #141417;
    --panel:       #19191c;
    --panel-2:     #222226;
    --line:        #34343a;
    --line-soft:   #2a2a2f;
    --text:        #e6e6e6;
    --text-dim:    #9a9aa2;
    --accent:      #f0a040;   /* orange action text */
    --accent-2:    #ffd24a;   /* yellow star */
    --red:         #b8373a;
    --blue:        #5a7cff;

    /* Category card colors (categories.color in the database) */
    --c-gray:   #8b8b93;
    --c-teal:   #3fb59a;
    --c-red:    #d0504e;
    --c-gold:   #e0b64a;
    --c-purple: #a878f0;
    --c-blue:   #6f8dff;

    --radius: 3px;
    --font: Tahoma, Verdana, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font: 13px/1.45 var(--font);
    color: var(--text);
    background:
        radial-gradient(ellipse at 30% 0%, #1f2230 0%, transparent 55%),
        linear-gradient(180deg, #111114 0%, var(--bg) 100%) fixed;
    background-color: var(--bg);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.ico { width: 18px; height: 18px; flex: none; }
.ico-sm { width: 13px; height: 13px; vertical-align: -2px; }

/* Thin game-style scrollbar */
* { scrollbar-width: thin; scrollbar-color: #555 #1a1a1a; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

/* ---------- Top bar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 16px;
    padding: 6px 16px;
    background: linear-gradient(180deg, #2a2a2e 0%, #121214 100%);
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 #3a3a40 inset, 0 4px 14px rgba(0,0,0,.6);
}
/* Logo: fades in on page load, then slowly "breathes" (fade + blue glow) while a
   soft light sweeps across the letters. Source image: assets/img/logo.png */
.brand { position: relative; flex: none; display: block; line-height: 0; margin: 0 6px; }
.brand-logo {
    display: block; height: 46px; width: auto;
    animation: logo-in 1s ease-out both, logo-breathe 4s ease-in-out 1s infinite;
}
.brand::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    /* the sweep is clipped to the shape of the logo itself */
    -webkit-mask: url(../img/logo.png) center / 100% 100% no-repeat;
            mask: url(../img/logo.png) center / 100% 100% no-repeat;
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.85) 50%, transparent 58%) no-repeat;
    background-size: 300% 100%;
    animation: logo-shine 4s ease-in-out 1s infinite both;
}
.brand:hover .brand-logo { animation-duration: 1s, 1.6s; }
@keyframes logo-in {
    from { opacity: 0; filter: blur(6px); transform: translateY(-4px); }
    to   { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes logo-breathe {
    0%, 100% { opacity: .78; filter: drop-shadow(0 0 0 rgba(90,124,255,0)); }
    50%      { opacity: 1;   filter: drop-shadow(0 0 9px rgba(90,124,255,.75)) brightness(1.1); }
}
@keyframes logo-shine {
    0%, 45% { background-position: 150% 0; }
    100%    { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-logo, .brand::after { animation: none; }
    .brand::after { display: none; }
}
.brand-admin {
    padding: 1px 8px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
    color: var(--c-gold); border: 1px solid color-mix(in srgb, var(--c-gold) 60%, #000); border-radius: 2px;
}

.topnav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; }
.nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 66px; padding: 6px 8px;
    border-radius: var(--radius);
    color: #f0f0f0; font-size: 12px; white-space: nowrap;
    background: none; border: 0; font-family: inherit; cursor: pointer;
    transition: background .15s, color .15s;
}
.nav-btn .ico { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px #000); }
.nav-btn:hover { background: rgba(255,255,255,.07); }
.nav-btn.active { color: #8fb4ff; background: rgba(90,124,255,.12); }
.sidebar-toggle { display: none; }

/* ---------- Page frame ---------- */
.shell {
    flex: 1;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 14px;
    width: 100%; max-width: 1880px;   /* uses almost the whole screen on wide monitors */
    margin: 12px auto; padding: 0 14px;
}

.panel {
    background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 120px);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 0 0 1px #000, 0 6px 20px rgba(0,0,0,.45);
}
.panel + .panel { margin-top: 14px; }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.page-title { margin: 0; font-size: 17px; font-weight: bold; }
.panel-title {
    padding: 8px 10px; margin: -4px -4px 8px;
    font-weight: bold; text-align: center;
    background: linear-gradient(180deg, #3a3d4d, #262833);
    border: 1px solid #4a4d60; border-radius: var(--radius);
}

.stats { display: flex; gap: 8px; margin-left: auto; }
.stat {
    display: flex; gap: 20px; align-items: center;
    padding: 3px 10px;
    background: #111; border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--text-dim);
}
.stat b { color: var(--text); font-weight: normal; }

/* ---------- Sidebar ---------- */
.sidebar {
    align-self: start;
    position: sticky; top: 80px;
    max-height: calc(100vh - 96px); overflow-y: auto;
    padding: 8px;
    background: rgba(28,28,32,.92);
    border: 1px solid var(--line); border-radius: 6px;
    box-shadow: 0 0 0 1px #000;
}
.cat-all, .cat-group > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; margin-bottom: 3px;
    background: linear-gradient(180deg, #2b2b30, #1f1f23);
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    cursor: pointer; user-select: none;
}
.cat-group > summary { list-style: none; }
.cat-group > summary::-webkit-details-marker { display: none; }
.cat-group > summary::after { content: "›"; color: var(--text-dim); transition: transform .15s; }
.cat-group[open] > summary::after { transform: rotate(90deg); }
.cat-all:hover, .cat-group > summary:hover { border-color: #55555e; }
.cat-all.active, .cat-group > summary.active { border-color: var(--blue); color: #fff; }
.cat-name { flex: 1; }
.count {
    margin-left: auto; padding: 0 6px;
    font-size: 11px; color: var(--text-dim);
    background: #111; border-radius: 8px;
}
.cat-link {
    display: flex; align-items: center;
    padding: 5px 8px 5px 32px;
    color: var(--text-dim); border-left: 2px solid transparent;
}
.cat-link:hover { color: var(--text); background: rgba(255,255,255,.03); }
.cat-link.active { color: var(--accent); border-left-color: var(--accent); background: rgba(240,160,64,.06); }
.cat-group[open] { margin-bottom: 6px; }
.sidebar-cta { width: 100%; margin-top: 10px; justify-content: center; }

/* ---------- Tabs & filters ---------- */
.tabs { display: flex; gap: 3px; border-bottom: 2px solid #3d3d44; overflow-x: auto; }
.tab {
    min-width: 110px; padding: 6px 16px;
    text-align: center; color: #c9c9c9;
    background: linear-gradient(180deg, #3b3b40, #2a2a2e);
    border: 1px solid #45454b; border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
}
.tab:hover { color: #fff; }
.tab.active {
    color: #fff; font-weight: bold;
    background: linear-gradient(180deg, #6b6b72, #3d3d44);
    border-color: #77777e;
}

.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.filters .spacer { flex: 1; }
select, input[type=search] {
    height: 26px; padding: 0 8px;
    font: inherit; color: var(--text);
    background: linear-gradient(180deg, #2c2c31, #1d1d21);
    border: 1px solid #4a4a52; border-radius: 2px;
    outline: none;
}
select { min-width: 150px; cursor: pointer; }
select:disabled { opacity: .45; cursor: not-allowed; }
select:focus, input:focus { border-color: var(--blue); }
.search { position: relative; display: flex; align-items: center; }
.search .ico { position: absolute; left: 7px; width: 14px; height: 14px; color: var(--text-dim); pointer-events: none; }
.search input { width: 220px; padding-left: 26px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 28px; padding: 3px 12px;
    color: var(--text); font: inherit; cursor: pointer;
    background: linear-gradient(180deg, #3a3a40, #26262a);
    border: 1px solid #4d4d55; border-radius: var(--radius);
}
.btn:hover { border-color: #77777f; color: #fff; }
.btn.active { background: linear-gradient(180deg, #5a6fd0, #34449a); border-color: #7486e8; }
.btn-red { background: linear-gradient(180deg, #c64548, #8e2629); border-color: #d25a5d; color: #fff; }
.btn-red:hover { border-color: #f08082; }
.btn-lg { min-height: 38px; padding: 6px 18px; font-size: 14px; }

/* ---------- Product cards ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 cards per row on desktop */
    gap: 14px;
}
.card {
    --rc: var(--c-gray);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 22%, #1d1d21) 0%, #1b1b1f 60%);
    border: 1px solid color-mix(in srgb, var(--rc) 70%, #000);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px #000;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover {
    transform: translateY(-2px);
    border-color: var(--rc);
    box-shadow: 0 0 0 1px #000, 0 0 14px color-mix(in srgb, var(--rc) 45%, transparent);
}
.c-gray   { --rc: var(--c-gray); }
.c-teal   { --rc: var(--c-teal); }
.c-red    { --rc: var(--c-red); }
.c-gold   { --rc: var(--c-gold); }
.c-purple { --rc: var(--c-purple); }
.c-blue   { --rc: var(--c-blue); }

.card-img {
    position: relative; aspect-ratio: 16 / 9;
    display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--rc) 25%, #2a2a2e) 0%, #151518 75%);
    border-bottom: 1px solid color-mix(in srgb, var(--rc) 40%, #000);
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--rc); }
.ph-ico { width: 84px; height: 84px; opacity: .8; filter: drop-shadow(0 0 10px var(--rc)); }
.placeholder.big .ph-ico { width: 120px; height: 120px; }

.card-badges { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }
.card-badges.static { position: static; margin-bottom: 8px; }
.badge {
    padding: 1px 6px; font-size: 10px; font-weight: bold; letter-spacing: .3px;
    border-radius: 2px; border: 1px solid rgba(0,0,0,.6);
}
.badge-new    { background: linear-gradient(180deg, #4d74ff, #2b47c0); color: #fff; }
/* tag color comes from the database (inline background-color); the gradient just adds a little depth */
.badge-tag    { background-color: #c2591a; background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.2)); color: #fff; }
.card-badges  { flex-wrap: wrap; right: 6px; }
.card-video {
    position: absolute; right: 6px; bottom: 6px;
    display: grid; place-items: center; width: 26px; height: 26px;
    color: #fff; background: rgba(0,0,0,.6); border-radius: 50%;
}

.card-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; }
.card-title {
    display: flex; align-items: center; gap: 5px;
    color: var(--rc); font-weight: bold; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: underline; text-underline-offset: 2px;
}
.card-title .ico { color: var(--text-dim); }
.card-meta { color: var(--text-dim); font-size: 12px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.price-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 14px;
    background: #121214; border: 1px solid #333; border-radius: 2px;
    font-weight: bold;
}
.card-action {
    padding: 5px 16px; font-size: 14px;
    color: var(--accent); font-weight: bold;
    background: linear-gradient(180deg, #2c2c30, #1a1a1d);
    border: 1px solid #3e3e44; border-radius: 2px;
}
.card-action:hover { color: #ffc070; border-color: var(--accent); }

/* ---------- Product detail ---------- */
.crumbs { margin-bottom: 12px; color: var(--text-dim); }
.crumbs a:hover { color: var(--accent); }
.detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.detail-media { aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; }
.detail-media:hover { transform: none; }
.detail-media img { width: 100%; height: 100%; object-fit: cover; }
.video, .video iframe { width: 100%; height: 100%; border: 0; }
.detail-title { margin: 0 0 4px; font-size: 22px; color: var(--rc); }
.detail-price {
    display: flex; justify-content: space-between; align-items: center;
    margin: 14px 0; padding: 10px 14px;
    background: #111; border: 1px solid var(--line); border-radius: var(--radius);
}
.detail-price .label { color: var(--text-dim); }
.detail-price b { font-size: 20px; color: var(--accent-2); }
.detail-desc { color: #cfcfd4; line-height: 1.6; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Misc ---------- */
.empty { padding: 50px 10px; text-align: center; color: var(--text-dim); }
.empty .ico { width: 48px; height: 48px; }
.pager { display: flex; justify-content: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.pager .btn { min-width: 32px; justify-content: center; }

.footer {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 12px 16px;
    color: var(--text-dim); font-size: 12px;
    background: linear-gradient(180deg, #151518, #0c0c0e);
    border-top: 1px solid #2a2a2f;
}
.footer-links { display: flex; gap: 14px; }
.footer a:hover { color: var(--accent); }

/* ---------- Mobile ---------- */
@media (max-width: 960px) {
    .shell { grid-template-columns: 1fr; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
        width: 280px; max-height: none; border-radius: 0;
        transform: translateX(-100%); transition: transform .2s;
    }
    body.sidebar-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.6); }
    .sidebar-toggle { display: flex; }
    .detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .topbar { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
    .brand-logo { height: 38px; }
    .topnav { width: 100%; margin: 0; }
    .nav-btn { min-width: 58px; font-size: 11px; }
    .nav-btn .ico { width: 22px; height: 22px; }
    .shell { padding: 0 10px; }
    .grid { grid-template-columns: 1fr; }
    .search, .search input { width: 100%; }
    .filters .spacer { display: none; }
    .stats { margin-left: 0; }
}

/* ---------- Admin panel ---------- */
.admin-shell { flex: 1; width: 100%; max-width: 1100px; margin: 14px auto; padding: 0 16px; }
.login-box { max-width: 360px; margin: 60px auto; }
.topnav form { display: flex; }

.notice {
    margin-bottom: 12px; padding: 8px 12px;
    background: rgba(63,181,154,.12); border: 1px solid var(--c-teal); border-radius: var(--radius);
}
.notice-error { background: rgba(208,80,78,.12); border-color: var(--c-red); }

.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.field > span { color: var(--text-dim); font-size: 12px; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field input[type=text], .field input[type=url], .field input[type=password], .field input[type=number],
.field textarea, .field select {
    width: 100%; min-height: 30px; padding: 5px 8px;
    font: inherit; color: var(--text);
    background: #121214; border: 1px solid #4a4a52; border-radius: 2px; outline: none;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--blue); }
.field input[type=file] { color: var(--text-dim); }
.check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.form-image { max-width: 260px; border: 1px solid var(--line); border-radius: var(--radius); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table th { color: var(--text-dim); font-weight: normal; background: #151518; white-space: nowrap; }
.table tr:hover td { background: rgba(255,255,255,.02); }
.table .thumb { width: 72px; }
.table .thumb img { width: 64px; height: 36px; object-fit: cover; border-radius: 2px; }
.table .actions { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.indent { display: inline-block; width: 22px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--rc); }
.bulk-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.table .pick { width: 28px; }
.table .pick input, .bulk-bar input { width: 16px; height: 16px; cursor: pointer; }
.btn.btn-green { background: linear-gradient(180deg, #3fa860, #1f6e3a); border-color: #5cc47e; color: #fff; }
.btn.btn-green:hover { border-color: #8be0a6; }

/* ---------- Hover image preview ---------- */
.preview {
    position: fixed; z-index: 50; left: 0; top: 0;
    display: none; padding: 5px;
    background: #121214; border: 1px solid #5a5a63; border-radius: var(--radius);
    box-shadow: 0 0 0 1px #000, 0 10px 30px rgba(0,0,0,.7);
    pointer-events: none;
}
.preview.show { display: block; }
.preview img { display: block; max-width: min(520px, 45vw); max-height: 70vh; width: auto; height: auto; }

/* View counter on the product card, between the price and the Details button */
.card-foot { gap: 8px; }
.card-views { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; color: var(--text-dim); font-size: 13px; }

/* Admin: tag picker on the product form, color input on the Tags page */
.tag-picker { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 10px; background: #121214; border: 1px solid #4a4a52; border-radius: 2px; }
.tag-picker .badge { font-size: 11px; padding: 2px 8px; }
.field-color { flex: 0 0 90px; min-width: 90px; }
.field input[type=color] { width: 100%; height: 30px; padding: 2px; background: #121214; border: 1px solid #4a4a52; border-radius: 2px; cursor: pointer; }

/* Wide screens: cards get bigger, so their text grows with them */
@media (min-width: 1500px) {
    .card-body { padding: 12px 14px 14px; }
    .card-title { font-size: 17px; }
    .card-meta { font-size: 13px; }
    .price-chip, .card-action { font-size: 15px; padding: 6px 14px; }
    .card-action { padding: 6px 20px; }
    .badge { font-size: 11px; padding: 2px 8px; }
}