/* VRGoo Header Style v1.4 */
/* Top bar order: [Search] [⊕] [🔔] [👤] [⭐VIP] [Apps] [🌐] */

/* ===== EXTRA ITEMS WRAPPER ===== */
.vrgoo-header-extra {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: 10px !important;
    vertical-align: middle !important;
}

/* ===== VIP BUTTON ===== */
.vrgoo-vip-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    color: #fff !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.35) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.vrgoo-vip-btn:hover {
    background: linear-gradient(135deg, #e67e22, #d35400) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.5) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.vrgoo-vip-btn:visited,
.vrgoo-vip-btn:active {
    color: #fff !important;
}

.vrgoo-vip-btn svg {
    width: 14px !important;
    height: 14px !important;
    fill: #fff !important;
}

.vrgoo-vip-btn span {
    color: #fff !important;
}

/* ===== APPS BUTTON ===== */
.vrgoo-apps-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    opacity: 0.8 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.vrgoo-apps-btn:hover {
    opacity: 1 !important;
    background: rgba(255,255,255,0.15) !important;
    transform: scale(1.1) !important;
}

.vrgoo-apps-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: #fff !important;
}

/* ===== AVATAR IN TOP BAR ===== */
.vrgoo-top-avatar {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.vrgoo-top-avatar img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    object-fit: cover !important;
}

/* ===== LANGUAGE IN TOP BAR ===== */
.vrgoo-top-lang {
    display: inline-flex !important;
    align-items: center !important;
    color: #fff !important;
    font-size: 13px !important;
    opacity: 0.9 !important;
    cursor: pointer !important;
}

.vrgoo-top-lang img {
    width: 20px !important;
    height: 14px !important;
    margin-right: 4px !important;
}

.vrgoo-top-lang * {
    color: #fff !important;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .vrgoo-header-extra {
        gap: 6px !important;
        margin-left: 6px !important;
    }
    
    .vrgoo-vip-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    
    .vrgoo-vip-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .vrgoo-apps-btn {
        width: 26px !important;
        height: 26px !important;
    }

    .vrgoo-top-avatar img {
        width: 26px !important;
        height: 26px !important;
    }
}

@media (max-width: 480px) {
    .vrgoo-vip-btn span {
        display: none !important;
    }
    .vrgoo-vip-btn {
        padding: 6px !important;
        border-radius: 50% !important;
    }
    .vrgoo-top-lang span {
        display: none !important;
    }
    .vrgoo-apps-btn {
        display: none !important;
    }
}