/* css/theme-shop.css - Premium Theme Shop Styles */

/* ===== THEME SHOP MODAL ===== */
#modal-shop .modal-content {
    max-width: 460px;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    background: rgba(8, 12, 20, 0.97);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 20px;
}

.theme-shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(0,240,255,0.05));
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.theme-shop-header h3 {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ff9500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ts-coins-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #ffd700;
    font-weight: 800;
    background: rgba(0,0,0,0.4);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,215,0,0.2);
}

/* ===== CATEGORY TABS ===== */
.ts-category-tabs {
    display: flex;
    gap: 0;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
    scrollbar-width: none;
}
.ts-category-tabs::-webkit-scrollbar { display: none; }

.ts-cat-tab {
    flex: 1;
    min-width: 80px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    padding: 10px 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.4);
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.ts-cat-tab:hover { color: rgba(255,255,255,0.7); }

.ts-cat-tab.active {
    color: #ffd700;
    border-bottom-color: #ffd700;
}

.ts-cat-tab i {
    display: block;
    font-size: 16px;
    margin-bottom: 3px;
}

/* ===== SCROLLABLE CONTENT ===== */
.ts-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    max-height: 55vh;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,215,0,0.3) transparent;
}
.ts-content-area::-webkit-scrollbar { width: 4px; }
.ts-content-area::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.3); border-radius: 4px; }

.ts-tab-pane { display: none; }
.ts-tab-pane.active { display: block; }

/* ===== DURATION SELECTOR ===== */
.ts-duration-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
}

.ts-dur-btn {
    flex: 1;
    padding: 6px 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.ts-dur-btn.active {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,150,0,0.15));
    color: #ffd700;
    box-shadow: 0 0 8px rgba(255,215,0,0.15);
}

/* ===== THEME CARDS GRID ===== */
.ts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ts-card {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ts-card:hover {
    border-color: rgba(255,215,0,0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.ts-card.equipped {
    border-color: #00ffaa;
    box-shadow: 0 0 15px rgba(0,255,170,0.15);
}

.ts-card.legendary {
    border-color: rgba(255,100,0,0.4);
    background: linear-gradient(135deg, rgba(255,100,0,0.06), rgba(255,0,100,0.04));
}

.ts-card.legendary::before {
    content: '🔥 أسطوري';
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 8px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff6400, #ff0064);
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    z-index: 5;
}

.ts-card.seasonal {
    border-color: rgba(0,200,255,0.3);
}

.ts-card.seasonal::before {
    content: '🌟 موسمي';
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 8px;
    font-weight: 800;
    background: linear-gradient(135deg, #00c8ff, #0066ff);
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    z-index: 5;
}

/* Preview Area */
.ts-card-preview {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    position: relative;
    overflow: hidden;
}

/* Animated preview backgrounds */
.ts-card-preview[data-bg="royal-gold"] {
    background: linear-gradient(135deg, #1a0f00, #2a1800);
}
.ts-card-preview[data-bg="royal-gold"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255,215,0,0.2), transparent 60%);
    animation: shimmer 3s infinite;
}

.ts-card-preview[data-bg="crystal"] {
    background: linear-gradient(135deg, #0a0a2e, #1a1a4e);
}
.ts-card-preview[data-bg="space"] {
    background: linear-gradient(135deg, #020010, #0a0030);
}
.ts-card-preview[data-bg="cyberpunk"] {
    background: linear-gradient(135deg, #0a001a, #1a0030);
}
.ts-card-preview[data-bg="arabic"] {
    background: linear-gradient(135deg, #1a0a00, #2a1500);
}
.ts-card-preview[data-bg="japanese"] {
    background: linear-gradient(135deg, #1a0010, #0a0020);
}
.ts-card-preview[data-bg="underwater"] {
    background: linear-gradient(135deg, #001a2e, #003050);
}
.ts-card-preview[data-bg="forest"] {
    background: linear-gradient(135deg, #001a0a, #003015);
}
.ts-card-preview[data-bg="winter"] {
    background: linear-gradient(135deg, #0a1520, #152535);
}
.ts-card-preview[data-bg="fire"] {
    background: linear-gradient(135deg, #1a0500, #2a0a00);
}

@keyframes shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.ts-card-info {
    padding: 8px 10px;
}

.ts-card-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    display: block;
}

.ts-card-desc {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
    display: block;
    margin-bottom: 6px;
    line-height: 1.4;
}

.ts-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ts-price {
    font-size: 11px;
    font-weight: 800;
    color: #ffd700;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ts-price.free { color: #00ffaa; }

.ts-buy-btn {
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #ffd700, #ff9500);
    color: #000;
}

.ts-buy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.ts-buy-btn.equipped-btn {
    background: rgba(0,255,170,0.15);
    color: #00ffaa;
    border: 1px solid rgba(0,255,170,0.3);
    cursor: default;
}

/* ===== LUCKY BOX SECTION ===== */
.ts-lucky-box {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255,0,100,0.08), rgba(100,0,255,0.08));
    border: 1px solid rgba(255,0,150,0.2);
    border-radius: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ts-lucky-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,0,150,0.1), transparent 70%);
    animation: luckyPulse 2s infinite;
}

@keyframes luckyPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.ts-lucky-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
    position: relative;
}

.ts-lucky-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 12px;
    position: relative;
}

.ts-lucky-btn {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 800;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff0096, #6400ff);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255,0,150,0.3);
}

.ts-lucky-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,0,150,0.5);
}

/* ===== THEME PREVIEW MODAL ===== */
.ts-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ts-preview-overlay.active {
    display: flex;
}

.ts-preview-card {
    width: 100%;
    max-width: 400px;
    background: rgba(15,20,30,0.98);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 20px;
    overflow: hidden;
}

.ts-preview-scene {
    width: 100%;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ts-preview-details {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ts-preview-name {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.ts-preview-features {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-preview-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}

.ts-preview-feature i {
    color: #ffd700;
    font-size: 10px;
    width: 16px;
    text-align: center;
}

.ts-preview-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.ts-preview-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.ts-preview-buy {
    background: linear-gradient(135deg, #ffd700, #ff9500);
    color: #000;
}

.ts-preview-close {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ===== EFFECTS GRID ===== */
.ts-effect-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.ts-effect-card:hover {
    border-color: rgba(255,215,0,0.2);
}

.ts-effect-card.equipped {
    border-color: #00ffaa;
}

.ts-effect-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: rgba(255,255,255,0.05);
    flex-shrink: 0;
}

.ts-effect-info {
    flex: 1;
}

.ts-effect-name {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.ts-effect-desc {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

.ts-effect-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* ===== SHOP FOOTER ===== */
.ts-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.ts-footer button {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: inherit;
    background: linear-gradient(135deg, #ffd700, #d4af37);
    color: #000;
    transition: all 0.2s ease;
}

/* ===== ROOM THEME APPLIED EFFECTS ===== */
.room-theme-royal-gold {
    --room-bg: linear-gradient(135deg, #1a0f00 0%, #2a1800 50%, #0a0500 100%) !important;
}
.room-theme-royal-gold #board-felt-theme { background: radial-gradient(circle, #2a1b02 0%, #110a00 100%) !important; border-color: #ffd700 !important; }

.room-theme-crystal {
    --room-bg: linear-gradient(135deg, #0a0a2e 0%, #1a1a5e 50%, #0a0a2e 100%) !important;
}
.room-theme-crystal #board-felt-theme { background: radial-gradient(circle, #0f1c3f 0%, #070e22 100%) !important; border-color: #00f0ff !important; }

.room-theme-space {
    --room-bg: linear-gradient(135deg, #020010 0%, #0a0040 50%, #000020 100%) !important;
}
.room-theme-space #board-felt-theme { background: radial-gradient(circle, #0c0022 0%, #03000a 100%) !important; border-color: #9d00ff !important; }

.room-theme-cyberpunk {
    --room-bg: linear-gradient(135deg, #0a001a 0%, #1a0040 50%, #0a001a 100%) !important;
}
.room-theme-cyberpunk #board-felt-theme { background: radial-gradient(circle, #1a0033 0%, #0a001a 100%) !important; border-color: #ff00ff !important; }

.room-theme-arabic {
    --room-bg: linear-gradient(135deg, #2c1a04 0%, #4a3000 50%, #150a00 100%) !important;
}
.room-theme-arabic #board-felt-theme { background: radial-gradient(circle, #3a220c 0%, #1c0e03 100%) !important; border-color: #b8860b !important; }

.room-theme-japanese {
    --room-bg: linear-gradient(135deg, #1f030a 0%, #3d1b28 50%, #0d0104 100%) !important;
}
.room-theme-japanese #board-felt-theme { background: radial-gradient(circle, #2d101a 0%, #15050b 100%) !important; border-color: #ff69b4 !important; }

.room-theme-underwater {
    --room-bg: linear-gradient(135deg, #001026 0%, #002d59 50%, #000c1d 100%) !important;
}
.room-theme-underwater #board-felt-theme { background: radial-gradient(circle, #00223e 0%, #000f1c 100%) !important; border-color: #00bfff !important; }

.room-theme-forest {
    --room-bg: linear-gradient(135deg, #021c08 0%, #0a3615 50%, #010d03 100%) !important;
}
.room-theme-forest #board-felt-theme { background: radial-gradient(circle, #082411 0%, #031006 100%) !important; border-color: #2e8b57 !important; }

.room-theme-winter {
    --room-bg: linear-gradient(135deg, #0a1b2a 0%, #1c354e 50%, #050d15 100%) !important;
}
.room-theme-winter #board-felt-theme { background: radial-gradient(circle, #10253a 0%, #06111d 100%) !important; border-color: #add8e6 !important; }

.room-theme-fire {
    --room-bg: linear-gradient(135deg, #260500 0%, #4c1103 50%, #130200 100%) !important;
}
.room-theme-fire #board-felt-theme { background: radial-gradient(circle, #3b0a00 0%, #1d0300 100%) !important; border-color: #ff4500 !important; }

/* ===== SEAT GLOWS & CUSTOM EFFECTS ===== */
.seat-effect-light-halo {
    box-shadow: 0 0 15px #00f0ff, inset 0 0 10px #00f0ff !important;
    animation: seatGlow 2s infinite alternate;
}
.seat-effect-gold-rain {
    box-shadow: 0 0 15px #ffd700, inset 0 0 10px #ffd700 !important;
}
.seat-effect-wings-avatar::before {
    content: '👼';
    position: absolute;
    left: -18px;
    font-size: 16px;
    z-index: 1;
}
.seat-effect-wings-avatar::after {
    content: '👼';
    position: absolute;
    right: -18px;
    font-size: 16px;
    z-index: 1;
    transform: scaleX(-1);
}
.seat-effect-animated-crown::before {
    content: '👑';
    position: absolute;
    top: -16px;
    left: calc(50% - 8px);
    font-size: 12px;
    z-index: 3;
    animation: crownFloat 1.5s ease-in-out infinite alternate;
}

/* ===== ANIMATIONS ===== */
@keyframes floatParticle {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-60px) rotate(180deg); opacity: 0; }
}

@keyframes seatGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(0,240,255,0.2); }
    50% { box-shadow: 0 0 25px rgba(0,240,255,0.7); }
}

@keyframes crownFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

.ts-card-preview .float-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: floatParticle 2s infinite;
}

/* ===== SEAT THEMES VISUALS ===== */
.seat-theme-royal_gold_throne .avatar-circle {
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%) !important;
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 10px #ffd700 !important;
    color: #1a1a0e !important;
}
.seat-theme-crystal_glowing .avatar-circle {
    background: linear-gradient(135deg, #00f0ff 0%, #0044ff 100%) !important;
    border: 2px solid #00f0ff !important;
    box-shadow: 0 0 10px #00f0ff !important;
    color: #fff !important;
}
.seat-theme-scifi_chair .avatar-circle {
    background: linear-gradient(135deg, #ff00ff 0%, #3d0066 100%) !important;
    border: 2px solid #ff00ff !important;
    color: #fff !important;
}
.seat-theme-dragon_seat .avatar-circle {
    background: linear-gradient(135deg, #ff4500 0%, #4a0000 100%) !important;
    border: 2px solid #ff4500 !important;
    color: #fff !important;
}
.seat-theme-neon_animated .avatar-circle {
    background: linear-gradient(135deg, #00ffaa 0%, #004a30 100%) !important;
    border: 2px solid #00ffaa !important;
    color: #000 !important;
}
.seat-theme-pharaoh .avatar-circle {
    background: linear-gradient(135deg, #ffd700 0%, #1a1a0e 100%) !important;
    border: 2px solid #b8860b !important;
    color: #ffd700 !important;
}
.seat-theme-samurai .avatar-circle {
    background: linear-gradient(135deg, #8b0000 0%, #000000 100%) !important;
    border: 2px solid #ff0000 !important;
    color: #fff !important;
}
.seat-theme-astronaut .avatar-circle {
    background: linear-gradient(135deg, #ffffff 0%, #708090 100%) !important;
    border: 2px solid #c0c0c0 !important;
    color: #000 !important;
}
.seat-theme-crystal_seat .avatar-circle {
    background: linear-gradient(135deg, #e0ffff 0%, #4682b4 100%) !important;
    border: 2px solid #b0c4de !important;
    color: #0044ff !important;
}
.seat-theme-vip_entry .avatar-circle {
    background: linear-gradient(135deg, #ffd700 0%, #8b0000 100%) !important;
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 12px #ffd700 !important;
    color: #fff !important;
}