/*
 * shop.css — Shop page. Same visual language as lobby.css: shared chrome
 * from shell.css, tan 9-slice border-image panels (field_bg_input.png) for
 * the two main panels, flat rgba(58,36,16,a) boxes for anything nested
 * inside them (item cards, icon slots) rather than another full sprite —
 * that's the established convention (see lobby.css's .lobby-equip-box /
 * .lobby-util-item-row for the same pattern). Buy buttons (card + the qty
 * confirmation modal) use button_default_bg.png, the same tan pill sprite as
 * the auth buttons and the shell's "back to Lobby" center button, per
 * explicit request to reuse existing UI art instead of a bespoke gradient.
 */

.shop-main {
    position: relative; z-index: 2; flex: 1;
    display: flex; gap: 16px;
    padding: 16px 20px;
    min-height: 0;
    overflow: hidden;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.shop-sidebar {
    flex: 0 0 236px;
    display: flex; flex-direction: column; gap: 4px;
    border-style: solid; border-width: 20px;
    border-image-source: url('../bg/UI/Sprite sheets/field_bg_input.png');
    border-image-slice: 16 fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
    padding: 14px 12px 18px;
    overflow-y: auto;
    scrollbar-width: none;
    color: #3a2410;
}
.shop-sidebar::-webkit-scrollbar { display: none; }

/* ── Reskin 2026-09-09 ───────────────────────────────────────────────────
 * User supplied a reference screenshot (a Genshin-style shop: icon-button
 * pair up top, a clean category list with the active one as a filled pill,
 * item cards with a grade-colored border + a matching colored price
 * footer). Adopted the STRUCTURE, kept DEEPCORE's own tan/amber palette
 * rather than the reference's light-blue theme — see the item-card section
 * further down for the bigger visual change. */

.shop-tabs-row { display: flex; gap: 8px; margin-bottom: 4px; }
.shop-tab-btn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 6px; border-radius: 12px; cursor: pointer;
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
    color: #8a6a48; background: rgba(58,36,16,.07);
    border: 1.5px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.shop-tab-ic { font-size: 20px; line-height: 1; }
.shop-tab-btn.active { background: rgba(200,100,26,.16); color: #c8641a; border-color: rgba(200,100,26,.4); }

/* 2026-09-09 follow-up: "kategori... buat lebih besar dan dengan bingkai
   masing-masing" — bumped size (padding/font) and gave EVERY row its own
   border now, not just a background-only hover/active state. */
#shop-cats { display: flex; flex-direction: column; gap: 7px; }
.shop-cat-row {
    padding: 12px 16px; border-radius: 12px; cursor: pointer;
    font-size: 12px; font-weight: 600; letter-spacing: .3px;
    color: #6b4520;
    border: 1.5px solid rgba(58,36,16,.16);
    transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.shop-cat-row:hover  { background: rgba(58,36,16,.06); border-color: rgba(58,36,16,.28); }
.shop-cat-row.active {
    background: linear-gradient(135deg,#c8641a,#9c5518);
    color: #fff8ec; font-weight: 800;
    border-color: #e08838;
    box-shadow: 0 3px 10px rgba(200,100,26,.35);
}

/* ── Content panel ───────────────────────────────────────────────────────── */

.shop-content {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    border-style: solid; border-width: 20px;
    border-image-source: url('../bg/UI/Sprite sheets/field_bg_input.png');
    border-image-slice: 16 fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
    padding: 12px 14px 16px;
    overflow: hidden;
    color: #3a2410;
}

.shop-search-row { display: flex; gap: 8px; flex-shrink: 0; margin-bottom: 12px; }
.shop-search-input {
    flex: 1;
    background: rgba(58,36,16,.08);
    border: 1px solid rgba(58,36,16,.2);
    border-radius: 7px;
    color: #2c1a08;
    padding: 9px 12px;
    font-size: 12.5px;
    outline: none;
}
.shop-search-input::placeholder { color: rgba(58,36,16,.45); }
.shop-search-input:focus { border-color: rgba(200,100,26,.5); }
.shop-refresh-btn {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 36px; border-radius: 7px; cursor: pointer;
    background: rgba(58,36,16,.08); border: 1px solid rgba(58,36,16,.2);
    color: #6b4520; font-size: 14px;
    transition: background .15s, transform .15s;
}
.shop-refresh-btn:hover { background: rgba(200,100,26,.14); transform: rotate(90deg); }

.shop-body { flex: 1; overflow-y: auto; scrollbar-width: none; }
.shop-body::-webkit-scrollbar { display: none; }

.shop-section-label {
    font-size: 11.5px; letter-spacing: 3px; font-weight: 700;
    color: #8a6a48; margin-bottom: 12px;
}
.shop-count { color: rgba(138,106,72,.6); font-weight: 400; letter-spacing: 1px; }

.shop-msg { text-align: center; padding: 60px 0; color: rgba(138,106,72,.6); font-size: 12px; letter-spacing: 2px; }
.shop-msg-error { color: #a3291d; }

.shop-hint {
    margin-top: 14px; padding: 10px 14px; border-radius: 7px;
    background: rgba(58,36,16,.06); border: 1px solid rgba(58,36,16,.15);
    color: #6b4520; font-size: 11.5px; letter-spacing: .5px;
}

/* ── Item / top-up cards ─────────────────────────────────────────────────
 * Reskinned to match the reference: whole card border-colored by item
 * grade (GRADE_C in shop.js, passed in as the --grade-c custom property),
 * a dedicated icon "art" area, a dark name strip, and a price footer whose
 * background is the SAME grade color — the reference's purple/orange
 * card-border-plus-footer combo, just DEEPCORE's own grade palette instead
 * of Genshin's purple/orange rarity split. The whole card is now the
 * click target (opens the buy confirm modal) — no more separate per-card
 * "BELI" button, matching the reference (which has no visible per-card
 * button either, just the price footer itself reads as the CTA). */

.shop-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px;
}

.shop-card2 {
    --grade-c: #6e7681;
    position: relative; cursor: pointer;
    border-radius: 14px; overflow: hidden;
    border: 2px solid var(--grade-c, #6e7681);
    background: rgba(255,248,236,.5);
    box-shadow: 0 4px 12px rgba(58,36,16,.12);
    transition: transform .15s, box-shadow .15s;
}
.shop-card2:hover  { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(58,36,16,.22); }
.shop-card2:active { transform: translateY(-1px); }
.shop-card2.popular { --grade-c: #c8641a; }
.shop-card2-topup   { --grade-c: #c8641a; } /* topup packages have no `grade` field to derive a color from — same amber as .shop-card2-footer-topup's gradient, so the border matches the footer instead of falling back to the default gray */

.shop-card2-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: rgba(20,12,5,.72); color: #ffe088;
    font-size: 10px; font-weight: 800; letter-spacing: .5px;
    padding: 3px 8px; border-radius: 5px;
}
.shop-card2-badge-hot  { background: linear-gradient(135deg,#a3291d,#c8641a); color: #fff8ec; }
.shop-card2-badge-disc { background: rgba(163,41,29,.85); color: #fff8ec; }
.shop-card2-badge-pop  { right: 8px; left: 8px; text-align: center; background: linear-gradient(135deg,#c8641a,#9c7a00); color: #fff8ec; }

.shop-card2-art {
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 35%, rgba(200,100,26,.16), transparent 65%),
        rgba(58,36,16,.05);
    display: flex; align-items: center; justify-content: center;
}
.shop-card2-icon { font-size: 40px; filter: drop-shadow(0 3px 6px rgba(58,36,16,.25)); }

.shop-card2-name {
    background: rgba(58,36,16,.85); color: #fff8ec;
    font-size: 12px; font-weight: 700; text-align: center;
    padding: 7px 8px; line-height: 1.25;
}
.shop-card2-gems { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: #a8e6ba; }
.shop-card2-gems b { color: #5fd97a; }

.shop-card2-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--grade-c, #6e7681);
    padding: 8px;
}
.shop-card2-footer-topup { background: linear-gradient(135deg,#c8641a,#9c5518); }
.shop-card2-ic {
    width: 15px; height: 15px; flex-shrink: 0;
    background-image: url('../bg/currency_ggems.png');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    image-rendering: pixelated;
}
.shop-card2-old   { font-size: 11px; color: rgba(255,255,255,.6); text-decoration: line-through; font-family: var(--font-mono); }
.shop-card2-price { font-size: 13px; font-weight: 800; color: #fff8ec; font-family: var(--font-mono); }

/* Buy button reuses the same tan pill sprite as everywhere else (auth
   buttons, the Lobby "back to Lobby" center button) instead of a bespoke
   gradient — per request, "manfaatkan UI yang ada". Still used by the
   purchase-confirm MODAL's button (cards themselves no longer have one). */
.shop-buy-btn {
    flex: 1; width: 100%;
    background-image: url('../bg/UI/Sprite sheets/button_default_bg.png');
    background-color: transparent;
    background-size: 100% 100%; background-repeat: no-repeat;
    border: none;
    color: #4a2f12; font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px;
    padding: 9px 6px; cursor: pointer;
    transition: filter .15s;
}
.shop-buy-btn:hover:not(:disabled) { filter: brightness(1.06); }
.shop-buy-btn:disabled { opacity: .6; cursor: default; }

/* ── Purchase confirmation modal ─────────────────────────────────────────── */

.shop-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10,5,2,.7);
    display: flex; align-items: center; justify-content: center;
}
.shop-modal {
    position: relative;
    width: 260px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    border-style: solid; border-width: 20px;
    border-image-source: url('../bg/UI/Sprite sheets/field_bg_input.png');
    border-image-slice: 16 fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
    padding: 18px 16px 20px;
    color: #3a2410;
}
.shop-modal-close {
    position: absolute; top: -6px; right: -6px;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(58,36,16,.85); color: #f0d888;
    cursor: pointer; font-size: 12px;
}
.shop-modal-icon { font-size: 40px; }
.shop-modal-name { font-size: 13px; font-weight: 800; color: #2c1a08; text-align: center; }

.shop-modal-qty-row { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 12.5px; color: #6b4520; }
.shop-qty-stepper { display: flex; align-items: center; gap: 6px; }
.shop-qty-btn {
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(58,36,16,.1); color: #4a2f12; cursor: pointer;
    font-weight: 800; font-size: 14px; user-select: none;
    transition: background .15s;
}
.shop-qty-btn:hover { background: rgba(200,100,26,.2); }
#shop-modal-qty {
    width: 44px; text-align: center;
    background: rgba(58,36,16,.1); border: 1px solid rgba(58,36,16,.25);
    border-radius: 5px; color: #2c1a08; font-family: var(--font-mono);
    padding: 5px 2px; outline: none;
}

.shop-modal-total-row {
    display: flex; justify-content: space-between; width: 100%;
    font-size: 12px; font-weight: 700; color: #2c1a08;
    padding-top: 8px; border-top: 1px solid rgba(58,36,16,.15);
}
.shop-modal-total-row span:last-child { color: #2b8a3e; font-family: var(--font-mono); }

.shop-modal .shop-buy-btn { margin-top: 4px; padding: 11px 6px; font-size: 12.5px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */

.shop-toast {
    position: fixed; bottom: 96px; left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(20,10,4,.95);
    border: 1px solid rgba(200,100,26,.5);
    border-radius: 7px;
    padding: 10px 22px;
    color: #ffe088;
    font-size: 12px; letter-spacing: 1px;
    opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 999; white-space: nowrap;
}
.shop-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.shop-toast-success { border-color: rgba(43,138,62,.6); color: #6fe090; }
.shop-toast-error   { border-color: rgba(163,41,29,.6); color: #f08a80; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@container (max-width: 720px) {
    .shop-main { flex-direction: column; overflow-y: auto; }
    .shop-sidebar { flex: 0 0 auto; width: 100%; }
    #shop-cats { flex-direction: row; flex-wrap: wrap; }
    .shop-content { flex: 1 1 auto; min-height: 360px; }
}