/* =========================================
   SHOP UI STYLES - PREMIUM CYBERPUNK
   ========================================= */

#shop-list { 
    display: flex; flex-direction: column; gap: 12px; 
    padding-top: 10px; padding-bottom: 80px; 
}

.shop-item {
    display: flex; align-items: center; padding: 12px;
    background: rgba(22, 27, 34, 0.7); border: 1px solid #30363d;
    border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    position: relative; overflow: hidden; transition: transform 0.2s, border-color 0.2s;
}

/* Garis Neon Akses Emas Tipis di Kiri */
.shop-item::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 4px; height: 100%; background: var(--gold);
    box-shadow: 0 0 10px var(--gold);
}

.shop-item:hover {
    transform: translateY(-2px); border-color: #4b5563;
    background: rgba(22, 27, 34, 0.9);
}

/* --- KOTAK GAMBAR ITEM --- */
.shop-item-img-container {
    width: 55px; height: 55px; background: #0d1117;
    border: 1px solid #30363d; border-radius: 8px;
    display: flex; justify-content: center; align-items: center;
    margin-right: 12px; flex-shrink: 0;
    box-shadow: inset 0 0 10px rgba(255, 202, 40, 0.05);
}

.shop-item-img {
    width: 35px; height: 35px; object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}

/* --- INFO BARANG (Tengah) --- */
.shop-item-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.shop-item-title {
    color: #e6edf3; font-weight: 900; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px;
}

.shop-item-desc { color: #8b949e; font-size: 9px; line-height: 1.3; font-weight: bold; }

/* --- HARGA & KONTROL (Kanan) --- */
.shop-item-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* Label Harga Ala Price Tag */
.shop-item-price {
    color: var(--gold); font-weight: 900; font-size: 12px;
    background: rgba(255, 202, 40, 0.1); padding: 3px 8px;
    border-radius: 4px; border: 1px solid rgba(255, 202, 40, 0.2); letter-spacing: 0.5px;
}

/* --- GABUNGAN INPUT QTY & TOMBOL --- */
.shop-item-controls {
    display: flex;
    flex-direction: column; 
    align-items: flex-end;
    gap: 6px;
}

.qty-wrapper {
    display: flex;
    align-items: center;
}

/* Tombol Plus & Minus */
.btn-qty {
    width: 28px; height: 26px;
    background: #161b22; color: #c9d1d9;
    border: 1px solid #30363d; font-weight: 900; font-size: 16px;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    transition: 0.2s; outline: none;
}

.btn-qty:hover { background: rgba(46, 204, 113, 0.1); color: var(--emerald); }
.btn-qty:active { background: var(--emerald); color: #000; }

.btn-qty.minus { border-radius: 4px 0 0 4px; border-right: none; }
.btn-qty.plus { border-radius: 0 4px 4px 0; border-left: none; }

/* Input Angka Manual (Tengah) */
.shop-qty-input {
    width: 36px; height: 26px;
    background: #0d1117; color: white;
    border: 1px solid #30363d; border-radius: 0;
    text-align: center; font-weight: bold; font-size: 12px;
    outline: none; 
    -webkit-appearance: none; /* [OPTIMASI]: Mencegah styling bawaan Safari iOS */
    appearance: none;
}

.shop-qty-input:focus { border-color: var(--emerald); }

/* Tombol BUY */
.btn-buy-item {
    width: 100%; 
    min-width: 92px; 
    height: 28px; background: var(--emerald); color: #000;
    border: none; padding: 0 12px; border-radius: 4px; 
    font-weight: 900; font-size: 11px; text-transform: uppercase;
    cursor: pointer; transition: 0.2s;
}

.btn-buy-item:active { background: #1e8449; transform: scale(0.95); }
.btn-buy-item:disabled { background: #30363d; color: #8b949e; cursor: not-allowed; transform: none; }

/* --- MODAL (Pop-up) Shop --- */
.modal-box.shop-box { border-color: var(--gold); box-shadow: 0 0 20px rgba(255, 202, 40, 0.3); }
.text-warning-shop { color: var(--gold); font-weight: 900; margin-bottom: 10px; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }