image.png/* ========================================================================
   VaM-X Collections Theme System
   ======================================================================== */

/* =============================================================================
   🌍 WORLD COLLECTION - Space / Earth Theme
   ชื่อ: "My Universe" หรือ "You're My World"
   สี: Blue (Earth), Green (Nature), Dark Space Background
   ============================================================================= */

/* --- Background (Hero Background with Earth Image) --- */
body.collection-world {
    position: relative;
    min-height: 100vh;
}

/* รูปพื้นหลังแบบ Fixed ติดจอ */
body.collection-world::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/bg-collection/world.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -2;
}

/* Overlay สีดำโปร่งแสง (เพื่อให้อ่านข้อความชัดขึ้น) */
body.collection-world::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: -1;
}

/* --- Main Panel (Space Glass Effect - Very Transparent) --- */
.collection-world .info-panel {
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.55) 0%, 
        rgba(30, 58, 138, 0.45) 100%
    ) !important;
    border: 1px solid #4a9eff !important;
    box-shadow: 
        0 0 30px rgba(74, 158, 255, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

/* --- Description Panel (Same Style as Info Panel) --- */
.collection-world .description-panel {
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.55) 0%, 
        rgba(30, 58, 138, 0.45) 100%
    ) !important;
    border: 1px solid #4a9eff !important;
    box-shadow: 
        0 0 30px rgba(74, 158, 255, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

/* --- Badge VIP/FREE (Earth Tone) --- */
.collection-world .badge-vip {
    background: linear-gradient(135deg, #4a9eff, #00d084) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3) !important;
}

.collection-world .badge-free {
    background: linear-gradient(135deg, #00d084, #10b981) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(0, 208, 132, 0.4) !important;
}

/* --- Main Action Button (Glowing Earth Button) --- */
.collection-world .btn-gateway-action,
.collection-world .btn-access-free {
    background: linear-gradient(135deg, #4a9eff, #00d084) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 
        0 5px 20px rgba(74, 158, 255, 0.3),
        0 0 40px rgba(74, 158, 255, 0.2) !important;
    transition: all 0.3s ease;
}

.collection-world .btn-gateway-action:hover,
.collection-world .btn-access-free:hover {
    background: linear-gradient(135deg, #00d084, #4a9eff) !important;
    box-shadow: 
        0 8px 30px rgba(74, 158, 255, 0.3),
        0 0 60px rgba(74, 158, 255, 0.4) !important;
    transform: translateY(-5px);
}

/* --- Ref ID Large (Green Glow) --- */
.collection-world .ref-id-large {
    color: #00d084 !important;
    text-shadow: 0 0 10px rgba(0, 208, 132, 0.3) !important;
}

/* --- Meta Tags (Space Theme) --- */
.collection-world .meta-tag-item {
    background: rgba(74, 158, 255, 0.1) !important;
    border: 1px solid rgba(74, 158, 255, 0.3) !important;
    color: #4a9eff !important;
}

.collection-world .meta-tag-item svg {
    fill: #4a9eff !important;
}

.collection-world .meta-tag-vip {
    background: rgba(74, 158, 255, 0.15) !important;
    border-color: #4a9eff !important;
    color: #4a9eff !important;
}

.collection-world .meta-tag-free {
    background: rgba(0, 208, 132, 0.15) !important;
    border-color: #00d084 !important;
    color: #00d084 !important;
}

.collection-world .meta-tag-free svg {
    fill: #00d084 !important;
}

/* --- Gallery Frame (Subtle Glow) --- */
.collection-world .main-image-frame {
    border: 2px solid rgba(74, 158, 255, 0.3) !important;
    box-shadow: 
        0 0 20px rgba(74, 158, 255, 0.2),
        0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.collection-world .thumb-item:hover,
.collection-world .thumb-item.active {
    border-color: #4a9eff !important;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.3) !important;
}

/* --- Identity Box (Earth Gradient) --- */
.collection-world .identity-box {
    background: linear-gradient(90deg, 
        rgba(74, 158, 255, 0.1) 0%, 
        rgba(0, 208, 132, 0.05) 100%
    ) !important;
    border: 1px solid rgba(74, 158, 255, 0.3) !important;
    border-left: 4px solid #4a9eff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

.collection-world .tech-header {
    color: #00d084 !important;
    border-bottom: 1px solid rgba(0, 208, 132, 0.2) !important;
}

.collection-world .tech-header svg {
    fill: #00d084 !important;
}

/* --- Info Values (Cyan Accent) --- */
.collection-world .info-value.filename {
    color: #00d084 !important;
}

/* --- Bookmark Button (Blue Theme) --- */
.collection-world .btn-bookmark {
    border-color: rgba(74, 158, 255, 0.3) !important;
    color: #4a9eff !important;
}

.collection-world .btn-bookmark:hover {
    border-color: #4a9eff !important;
    background: rgba(74, 158, 255, 0.1) !important;
    color: #4a9eff !important;
}

.collection-world .btn-bookmark.active {
    background: rgba(74, 158, 255, 0.15) !important;
    border-color: #4a9eff !important;
    color: #4a9eff !important;
}

.collection-world .btn-bookmark.active svg {
    fill: #4a9eff !important;
}

/* --- Copy Button (Blue Glow) --- */
.collection-world .btn-copy-id:hover {
    color: #4a9eff !important;
    background: rgba(74, 158, 255, 0.1) !important;
}

.collection-world .copy-feedback {
    background: #4a9eff !important;
    color: #000 !important;
}

.collection-world .copy-feedback::after {
    border-right-color: #4a9eff !important;
}

/* --- VIP Option Buttons (Source A/B) --- */
.collection-world .vip-option-btn:hover {
    border-color: #4a9eff !important;
    background: rgba(74, 158, 255, 0.1) !important;
    color: #4a9eff !important;
}

.collection-world .vip-option-btn:hover svg {
    fill: #4a9eff !important;
}

/* --- Modal (Space Popup) --- */
.collection-world .modal-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
    border: 2px solid #4a9eff !important;
    box-shadow: 
        0 0 50px rgba(74, 158, 255, 0.3),
        0 20px 80px rgba(0, 0, 0, 0.7) !important;
}

.collection-world .modal-icon {
    fill: #4a9eff !important;
    filter: drop-shadow(0 0 10px rgba(74, 158, 255, 0.3)) !important;
}

.collection-world .modal-btn {
    background: linear-gradient(135deg, #4a9eff, #00d084) !important;
    color: #000 !important;
}

.collection-world .modal-btn:hover {
    background: linear-gradient(135deg, #00d084, #4a9eff) !important;
    box-shadow: 0 5px 25px rgba(74, 158, 255, 0.3) !important;
}

/* --- Loader (Blue Spinner) --- */
.collection-world .vip-loader {
    border-color: #222 !important;
    border-top-color: #4a9eff !important;
}

/* =============================================================================
   🌙 PROMISE COLLECTION - Emerald Nebula / Moonlight Theme
   ชื่อ: "Promise"
   สี: Emerald Green (หลัก), Moonlight Gold (รอง), Dark Space
   ============================================================================= */

/* --- Background (Nebula Dark) --- */
body.collection-promise {
    position: relative;
    min-height: 100vh;
}

/* รูปพื้นหลังแบบ Fixed ติดจอ */
body.collection-promise::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/bg-collection/promise.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -2;
}

/* Overlay สีดำโปร่งแสง */
body.collection-promise::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%);
    z-index: -1;
}

/* --- Main Panel (Emerald Glass Effect - Dark & Transparent) --- */
.collection-promise .info-panel {
    background: linear-gradient(135deg, 
        rgba(5, 20, 15, 0.40) 0%, 
        rgba(15, 45, 35, 0.30) 100%
    ) !important;
    border: 1px solid #10b981 !important;
    box-shadow: 
        0 0 30px rgba(16, 185, 129, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

/* --- Description Panel (Same Style) --- */
.collection-promise .description-panel {
    background: linear-gradient(135deg, 
        rgba(5, 20, 15, 0.40) 0%, 
        rgba(15, 45, 35, 0.30) 100%
    ) !important;
    border: 1px solid #10b981 !important;
    box-shadow: 
        0 0 30px rgba(16, 185, 129, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}

/* --- Badge VIP/FREE (Emerald + Moonlight) --- */
.collection-promise .badge-vip {
    background: linear-gradient(135deg, #399678, #fbfba7) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(57, 150, 120, 0.4) !important;
}

.collection-promise .badge-free {
    background: linear-gradient(135deg, #399678, #61b093) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(57, 150, 120, 0.4) !important;
}

/* --- Main Action Button (Emerald Glow) --- */
.collection-promise .btn-gateway-action,
.collection-promise .btn-access-free {
    background: linear-gradient(135deg, #399678, #fbfba7) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 
        0 5px 20px rgba(57, 150, 120, 0.4),
        0 0 40px rgba(57, 150, 120, 0.2) !important;
    transition: all 0.3s ease;
}

.collection-promise .btn-gateway-action:hover,
.collection-promise .btn-access-free:hover {
    background: linear-gradient(135deg, #fbfba7, #399678) !important;
    box-shadow: 
        0 8px 30px rgba(57, 150, 120, 0.5),
        0 0 60px rgba(251, 251, 167, 0.3) !important;
    transform: translateY(-5px);
}

/* --- Ref ID Large (Moonlight Glow) --- */
.collection-promise .ref-id-large {
    color: #fbfba7 !important;
    text-shadow: 0 0 10px rgba(251, 251, 167, 0.4) !important;
}

/* --- Meta Tags (Emerald Theme) --- */
.collection-promise .meta-tag-item {
    background: rgba(57, 150, 120, 0.1) !important;
    border: 1px solid rgba(57, 150, 120, 0.3) !important;
    color: #399678 !important;
}

.collection-promise .meta-tag-item svg {
    fill: #399678 !important;
}

.collection-promise .meta-tag-vip {
    background: rgba(57, 150, 120, 0.15) !important;
    border-color: #399678 !important;
    color: #399678 !important;
}

.collection-promise .meta-tag-free {
    background: rgba(57, 150, 120, 0.15) !important;
    border-color: #399678 !important;
    color: #399678 !important;
}

.collection-promise .meta-tag-free svg {
    fill: #399678 !important;
}

/* --- Gallery Frame (Emerald Glow) --- */
.collection-promise .main-image-frame {
    border: 2px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: 
        0 0 20px rgba(16, 185, 129, 0.2),
        0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.collection-promise .thumb-item:hover,
.collection-promise .thumb-item.active {
    border-color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

/* --- Identity Box (Emerald Gradient) --- */
.collection-promise .identity-box {
    background: linear-gradient(90deg, 
        rgba(57, 150, 120, 0.1) 0%, 
        rgba(251, 251, 167, 0.05) 100%
    ) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-left: 4px solid #10b981 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

.collection-promise .tech-header {
    color: #fbfba7 !important;
    border-bottom: 1px solid rgba(251, 251, 167, 0.2) !important;
}

.collection-promise .tech-header svg {
    fill: #fbfba7 !important;
}

/* --- Info Values (Moonlight Accent) --- */
.collection-promise .info-value.filename {
    color: #fbfba7 !important;
}

/* --- Bookmark Button (Emerald Theme) --- */
.collection-promise .btn-bookmark {
    border-color: rgba(57, 150, 120, 0.3) !important;
    color: #399678 !important;
}

.collection-promise .btn-bookmark:hover {
    border-color: #399678 !important;
    background: rgba(57, 150, 120, 0.1) !important;
    color: #399678 !important;
}

.collection-promise .btn-bookmark.active {
    background: rgba(57, 150, 120, 0.15) !important;
    border-color: #399678 !important;
    color: #399678 !important;
}

.collection-promise .btn-bookmark.active svg {
    fill: #399678 !important;
}

/* --- Copy Button (Emerald Glow) --- */
.collection-promise .btn-copy-id:hover {
    color: #399678 !important;
    background: rgba(57, 150, 120, 0.1) !important;
}

.collection-promise .copy-feedback {
    background: #399678 !important;
    color: #000 !important;
}

.collection-promise .copy-feedback::after {
    border-right-color: #399678 !important;
}

/* --- VIP Option Buttons (Source A/B) --- */
.collection-promise .vip-option-btn:hover {
    border-color: #399678 !important;
    background: rgba(57, 150, 120, 0.1) !important;
    color: #399678 !important;
}

.collection-promise .vip-option-btn:hover svg {
    fill: #399678 !important;
}

/* --- Modal (Emerald Popup - Dark & Mysterious) --- */
.collection-promise .modal-box {
    background: linear-gradient(135deg, #0a1f1a 0%, #1a3d32 100%) !important;
    border: 2px solid #10b981 !important;
    box-shadow: 
        0 0 50px rgba(16, 185, 129, 0.4),
        0 20px 80px rgba(0, 0, 0, 0.7) !important;
}

.collection-promise .modal-icon {
    fill: #10b981 !important;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4)) !important;
}

.collection-promise .modal-btn {
    background: linear-gradient(135deg, #399678, #fbfba7) !important;
    color: #000 !important;
}

.collection-promise .modal-btn:hover {
    background: linear-gradient(135deg, #fbfba7, #399678) !important;
    box-shadow: 0 5px 25px rgba(57, 150, 120, 0.4) !important;
}

/* --- Loader (Emerald Spinner) --- */
.collection-promise .vip-loader {
    border-color: #222 !important;
    border-top-color: #399678 !important;
}

/* =============================================================================
   🌌 GALAXY COLLECTION (Template - ยังไม่ใช้งาน)
   ============================================================================= */

body.collection-galaxy {
    background: #1a001a;
}

.collection-galaxy .info-panel {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.95), rgba(168, 85, 247, 0.85)) !important;
    border: 1px solid #a855f7 !important;
}

/* เพิ่ม CSS สำหรับ Galaxy Collection ในอนาคต */